
.desec{position:relative}
.dehd{text-align:center;margin-bottom:22px}.dehd h2,.dehd .sub{margin-inline:auto}
.degrid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:760px){.degrid{grid-template-columns:1fr 1fr;gap:20px}}
.decol{position:relative;border-radius:22px;padding:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);min-width:0}
.de-d{background:radial-gradient(120% 90% at 0% 0%,rgba(178,76,255,.38),transparent 60%),radial-gradient(90% 80% at 100% 100%,rgba(0,229,255,.18),transparent 60%),#17131f}
.de-e{background:radial-gradient(120% 90% at 100% 0%,rgba(255,196,0,.32),transparent 60%),radial-gradient(90% 80% at 0% 100%,rgba(255,92,138,.18),transparent 60%),#1d1812}
.detop{display:flex;align-items:center;gap:14px;margin-bottom:12px;min-width:0}
.deart{flex:none;width:112px;height:112px;border-radius:18px;object-fit:cover;box-shadow:0 10px 30px -12px rgba(0,0,0,.8);animation:defloat 4s ease-in-out infinite}
.de-e .deart{animation-delay:-2s}
@keyframes defloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-6px) rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){.deart{animation:none}}
.detx{min-width:0}.detx h3{font-size:clamp(22px,4.6vw,28px);font-weight:800;letter-spacing:-.01em;line-height:1.1}
.de-d .detx h3{background:linear-gradient(90deg,#fff,#e2b8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.de-e .detx h3{background:linear-gradient(90deg,#fff,#ffd96b);-webkit-background-clip:text;background-clip:text;color:transparent}
.detx h3 span{display:inline-block;-webkit-text-fill-color:initial;background:none}
.detx p{color:#C9D1DC;font-size:14px;margin-top:6px;line-height:1.4}
.decards{display:flex;flex-direction:column;gap:10px}
.decard{display:flex;gap:12px;align-items:flex-start;background:rgba(10,12,16,.55);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:12px;min-width:0}
.decard.skel{min-height:110px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));background-size:200% 100%;animation:deskel 1.2s linear infinite}
@keyframes deskel{to{background-position:-200% 0}}
.deico{flex:none;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-size:30px;background:linear-gradient(135deg,#2b2140,#3b2a5c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}
.r-legendary .deico{background:linear-gradient(135deg,#5a3a00,#b07b00);box-shadow:inset 0 0 0 2px #ffd23f,0 0 18px -4px #ffd23f}
.r-mythic .deico{background:linear-gradient(135deg,#4a0f4f,#a3207a);box-shadow:inset 0 0 0 2px #ff6bd5,0 0 18px -4px #ff6bd5}
.r-epic .deico{background:linear-gradient(135deg,#2d1660,#6a2fd6);box-shadow:inset 0 0 0 2px #b28cff}
.r-rare .deico{background:linear-gradient(135deg,#0d2b5c,#1E5BFF);box-shadow:inset 0 0 0 2px #6fa0ff}
.deico.coin{flex-direction:column;gap:0;font-size:24px;line-height:1;background:linear-gradient(135deg,#4d3800,#a87900);box-shadow:inset 0 0 0 2px #ffd23f}
.deico.coin b{font-size:13px;color:#fff3c4;margin-top:3px}
.debody{flex:1;min-width:0}
.detitle{font-weight:800;font-size:15.5px;line-height:1.25;color:#fff}
.dename{font-size:14px;color:#EEF2F7;margin-top:2px}
.derar{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.12);color:#fff;vertical-align:1px}
.r-legendary .derar{background:#ffd23f;color:#2a1d00}.r-mythic .derar{background:#ff6bd5;color:#2a0020}.r-epic .derar{background:#8a5cff}.r-rare .derar{background:#1E5BFF}
.derar.day{background:#00b37a;color:#fff}
.derule{font-size:13.5px;color:#C9D1DC;margin-top:3px;line-height:1.35}
.demeta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:#C9D1DC;margin-top:6px}
.debar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:7px}
.debar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b24cff,#00E5FF)}
.debar.ev i{background:linear-gradient(90deg,#ffb800,#ff5c8a)}
.deprog{font-size:12px;color:#97A1AF;margin-top:3px}
.derow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.detime{font-size:12.5px;color:#ffd96b;font-weight:700;white-space:nowrap}
.debtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:10px 16px;border-radius:12px;border:0;font:800 14px/1.1 var(--font,system-ui);color:#fff;background:#2a313b;text-decoration:none;cursor:pointer;margin-inline-start:auto;max-width:100%;text-align:center}
.debtn.go{background:linear-gradient(90deg,#1E5BFF,#b24cff);box-shadow:0 8px 22px -10px rgba(178,76,255,.9)}
.de-e .debtn.go{background:linear-gradient(90deg,#ff9f00,#ff5c8a);box-shadow:0 8px 22px -10px rgba(255,159,0,.9)}
.debtn.go:hover{transform:translateY(-1px)}
.debtn.ok{background:rgba(0,179,122,.22);color:#7dffcf;box-shadow:inset 0 0 0 1px rgba(0,179,122,.6)}
.debtn.lock{background:rgba(255,255,255,.07);color:#C9D1DC;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.debtn.play{background:rgba(0,229,255,.14);color:#9ff4ff;box-shadow:inset 0 0 0 1px rgba(0,229,255,.5)}
.debtn[disabled]{cursor:default}
.deempty{color:#C9D1DC;font-size:14px;padding:16px;text-align:center;border:1px dashed rgba(255,255,255,.18);border-radius:14px}
.detoast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;z-index:2000;background:#10351f;color:#d6ffe9;border:1px solid #1d8a52;padding:12px 18px;border-radius:14px;font-weight:700;font-size:15px;max-width:calc(100vw - 32px);text-align:center;transition:transform .3s,opacity .3s;pointer-events:none}
.detoast.bad{background:#3a1418;color:#ffd6dc;border-color:#a33a48}
.detoast.in{transform:translate(-50%,0);opacity:1}
.deburst{position:fixed;width:0;height:0;z-index:2001;pointer-events:none}
.deburst i{position:absolute;left:-10px;top:-10px;font-style:normal;font-size:20px;animation:deb 1s ease-out forwards}
@keyframes deb{from{transform:translate(0,0) scale(.4);opacity:1}to{transform:translate(var(--x),var(--y)) scale(1.1);opacity:0}}
@media (max-width:420px){.deart{width:84px;height:84px;border-radius:14px}.decol{padding:12px}.deico{width:48px;height:48px;font-size:26px}}
[dir=rtl] .debtn{margin-inline-start:auto}
