:root {
  --bg: #090b10; --panel: #11141c; --panel2: #171b26; --panel3: #1e2330;
  --line: rgba(255,255,255,.06); --line2: rgba(255,255,255,.12);
  --text: #f1f2f6; --mute: #8a90a2; --dim: #5b6172;
  --gold: #ffb547; --gold2: #ff7a1a; --gold-rgb: 255,181,71;
  --grad: linear-gradient(135deg, #ffd36b 0%, #ffb547 35%, #ff7a1a 100%);
  --ok: #3ddc97; --err: #ff4d5e;
  --display: 'Sora', system-ui, sans-serif; --body: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', monospace;
  --r: 14px;
}
* { box-sizing: border-box; margin: 0; }
html { color-scheme: dark; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 var(--body); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p a { color: var(--gold); }
img { display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select { font: 14px var(--mono); color: var(--text); background: var(--bg); border: 1px solid var(--line2); border-radius: 10px; padding: 11px 13px; width: 100%; outline: none; }
input:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.15); }
code { font: 12px var(--mono); color: var(--gold); word-break: break-all; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--panel3); border-radius: 8px; }

.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 600px at 75% -15%, rgba(255,140,40,.13), transparent 60%),
    radial-gradient(900px 600px at 0% 0%, rgba(70,90,200,.10), transparent 60%),
    radial-gradient(1200px 800px at 50% 120%, rgba(120,60,255,.06), transparent 60%), var(--bg); }

.kicker { display: flex; align-items: center; gap: 8px; font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 12px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.mute { color: var(--mute); }
.fine { font-size: 12px; color: var(--dim); margin-top: 14px; }

/* ── Butoane ─────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 11px;
  font: 700 14px var(--display); transition: transform .15s, filter .2s, background .2s, box-shadow .2s; white-space: nowrap; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.acc { background: var(--grad); color: #1a0e00; box-shadow: 0 8px 24px -8px rgba(255,140,30,.6), inset 0 1px 0 rgba(255,255,255,.45); }
.btn.acc:hover { filter: brightness(1.08); box-shadow: 0 12px 34px -8px rgba(255,140,30,.8), inset 0 1px 0 rgba(255,255,255,.45); }
.btn.ghost { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line2); }
.btn.ghost:hover { background: rgba(255,255,255,.09); }
.btn.big { padding: 15px 28px; font-size: 15px; border-radius: 13px; }
.btn.sq { padding: 0; width: 40px; height: 40px; font-size: 22px; border-radius: 10px; }
.btn:disabled { opacity: .4; pointer-events: none; filter: grayscale(.6); }

/* ── Header ──────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 36px; padding: 0 32px; height: 70px;
  background: rgba(9,11,16,.92); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 10px; font: 800 21px var(--display); letter-spacing: .02em; }
.logo-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); position: relative; box-shadow: 0 4px 16px -4px rgba(255,140,30,.7); }
.logo-mark::after { content: ''; position: absolute; inset: 8px; border: 2.5px solid #1a0e00; border-radius: 3px; transform: rotate(45deg); }
.nav { display: flex; gap: 2px; flex: 1; height: 100%; }
.nav a { display: flex; align-items: center; padding: 0 16px; font-weight: 600; font-size: 14px; color: var(--mute); position: relative; transition: color .2s; }
.nav a:hover { color: var(--text); }
.nav a.on { color: var(--text); }
.nav a.on::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 14px var(--gold2); }
.pill { font: 600 11px var(--mono); background: var(--panel3); padding: 1px 7px; margin-left: 6px; border-radius: 10px; color: var(--text); }
.wallet { display: flex; align-items: center; gap: 10px; }
.bal { display: flex; flex-direction: column; align-items: flex-end; padding: 6px 14px; border-radius: 11px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.bal .kicker { margin: 0; font-size: 9px; letter-spacing: .12em; }
.bal b { font: 700 16px var(--mono); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--mute); border-radius: 10px; }
.icon:hover { color: var(--text); background: var(--panel); }
.icon svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon.off .w { opacity: 0; } .icon.off { color: var(--err); }

/* ── Live feed ───────────────────────────────────────────── */
.feed-wrap { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); background: rgba(13,15,21,.8); height: 76px; overflow: hidden; }
.feed-live { display: flex; flex-direction: column; justify-content: center; padding: 0 22px 0 40px; font: 700 13px var(--display);
  border-right: 1px solid var(--line); flex: none; position: relative; }
.feed-live i { position: absolute; left: 20px; top: 50%; width: 8px; height: 8px; margin-top: -11px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: blink 1.4s infinite; }
.feed-live small { font: 500 10px var(--body); color: var(--dim); }
@keyframes blink { 50% { opacity: .25; } }
.feed { display: flex; gap: 6px; padding: 7px; overflow: hidden; }
.feed-it { flex: none; display: flex; align-items: center; gap: 10px; width: 220px; padding: 0 12px 0 6px; position: relative; border-radius: 10px;
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--rc) 22%, transparent)), var(--panel);
  box-shadow: inset 0 -2px 0 var(--rc); animation: feedIn .5s cubic-bezier(.2,1.3,.4,1); overflow: hidden; }
.feed-it.mine { box-shadow: inset 0 -2px 0 var(--rc), inset 0 0 0 1px rgba(var(--gold-rgb),.5); }
.feed-it .gun { width: 72px; height: 54px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.feed-it div { min-width: 0; } .feed-it b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-it span { font: 500 11px var(--body); color: var(--mute); }
@keyframes feedIn { from { opacity: 0; transform: translateX(-40px); } }

main { max-width: 1340px; margin: 0 auto; padding: 28px 32px 80px; }
.sec-row { display: flex; align-items: flex-end; justify-content: space-between; margin: 60px 0 22px; }
.sec { font: 700 28px var(--display); letter-spacing: -.02em; margin: 60px 0 22px; }
.sec-row .sec { margin: 0; }
.sec-row { gap: 10px 30px; flex-wrap: wrap; }
.sec-note { max-width: 560px; color: var(--mute); font-size: 13px; line-height: 1.5; text-align: right; }
.crate.skin .crate-img { width: 96%; max-width: 260px; transform: rotate(-14deg); }
.case-card:hover .crate.skin .crate-img { transform: rotate(-8deg) scale(1.08) translateY(-4px); }
@media (max-width: 900px) { .sec-note { text-align: left; } }
.back { display: inline-flex; color: var(--mute); font-weight: 600; font-size: 14px; margin-bottom: 18px; } .back:hover { color: var(--gold); }

/* ── Hero ────────────────────────────────────────────────── */
.hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 440px; padding: 50px 56px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(110deg, #141823 0%, #12151e 45%, #1d1610 100%); box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px -40px rgba(0,0,0,.8); }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/22px 22px;
  mask-image: linear-gradient(90deg, transparent 30%, #000); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); }
.hero-light { position: absolute; right: -10%; top: -30%; width: 75%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,150,50,.35), rgba(200,60,255,.12) 55%, transparent); }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { font: 800 clamp(38px, 5vw, 66px)/1.02 var(--display); letter-spacing: -.035em; margin: 4px 0 18px; }
.hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { max-width: 440px; color: var(--mute); font-size: 16px; }
.hero-cta { display: flex; gap: 10px; margin: 30px 0 36px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 0; flex-wrap: wrap; }
.hero-stats div { padding: 0 26px; border-left: 1px solid var(--line2); } .hero-stats div:first-child { padding-left: 0; border: 0; }
.hero-stats b { display: block; font: 700 22px var(--display); } .hero-stats span { font-size: 12px; color: var(--mute); }
.hero-art { position: relative; height: 340px; z-index: 1; }
.hero-art img { position: absolute; object-fit: contain; }
.ha-back { width: 95%; right: -12%; top: 4%; transform: rotate(-14deg); opacity: .55; filter: blur(1.5px) drop-shadow(0 20px 30px rgba(0,0,0,.7)); }
.ha-main { width: 78%; right: 4%; top: 24%; transform: rotate(-22deg); filter: drop-shadow(0 30px 40px rgba(0,0,0,.8)) drop-shadow(0 0 40px rgba(200,80,255,.45)); animation: float 6s ease-in-out infinite; }
.ha-case { width: 34%; left: -4%; bottom: -2%; transform: rotate(8deg); filter: drop-shadow(0 20px 30px rgba(0,0,0,.8)); animation: float 7s ease-in-out -3s infinite; }
@keyframes float { 50% { translate: 0 -14px; } }

/* ── Iteme ───────────────────────────────────────────────── */
.item { position: relative; display: flex; flex-direction: column; padding: 12px 14px 14px; border-radius: var(--r); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .25s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s; }
.item::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px; border-radius: 2px; background: var(--rc); box-shadow: 0 0 14px 1px var(--rc); }
.item-glow { position: absolute; z-index: -1; left: 50%; bottom: -60%; width: 130%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, var(--rc), transparent); opacity: .2; transition: opacity .3s; }
.item-top { display: flex; justify-content: space-between; gap: 6px; font: 600 10px var(--body); text-transform: uppercase; letter-spacing: .08em; }
.item-rar { color: var(--rc); }
.item-ch { font: 600 11px var(--mono); color: var(--mute); text-transform: none; letter-spacing: 0; }
.item-img { aspect-ratio: 4/3; display: grid; place-items: center; margin: 4px -4px 6px; }
.item .gun { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.65)); transition: transform .35s cubic-bezier(.2,.9,.3,1.3); }
.item-w { display: block; font-size: 12px; color: var(--mute); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-s { display: block; font: 600 14px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-p { display: block; font: 700 14px var(--mono); color: var(--gold); margin-top: 6px; }
.grid .item:hover, .item.sel { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 45%, transparent), 0 18px 40px -20px var(--rc); }
.grid .item:hover .item-glow { opacity: .4; } .grid .item:hover .gun { transform: scale(1.08) rotate(-4deg); }
.item.sel { box-shadow: inset 0 0 0 2px var(--gold), 0 18px 40px -20px var(--gold); } .item.sel .item-glow { opacity: .45; }
.r-cov .item-glow, .r-gold .item-glow { opacity: .3; }
.r-gold { background: linear-gradient(180deg, #221c14, var(--panel)); }
.r-gold::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 40%, rgba(255,220,150,.13) 50%, transparent 60%) 0 0/250% 100%; animation: shine 3.5s linear infinite; }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.grid.sm { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.grid.sm .item { cursor: pointer; }
.item-act { position: relative; z-index: 2; display: flex; gap: 6px; margin-top: 12px; }
.item-act button { flex: 1; padding: 8px 0; font: 600 12px var(--body); border-radius: 8px; background: rgba(255,255,255,.06); transition: background .2s; }
.item-act button:hover { background: var(--grad); color: #1a0e00; }

/* ── Cazuri ──────────────────────────────────────────────── */
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; }
.case-card { position: relative; display: flex; flex-direction: column; padding: 16px 18px 18px; border-radius: 18px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--cc) 20%, transparent), transparent 70%), linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.06); transition: transform .3s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s; }
.case-card:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc) 40%, transparent), 0 24px 50px -24px var(--cc); }
.case-card:hover .crate-img { transform: scale(1.08) rotate(-3deg) translateY(-4px); }
.case-card:hover .crate-rays { opacity: .9; }
.cc-info { margin-top: 6px; } .cc-info b { display: block; font: 700 18px var(--display); } .cc-info span { font-size: 12px; color: var(--mute); }
.cc-price { align-self: flex-start; margin-top: 14px; font: 700 15px var(--mono); padding: 9px 16px; border-radius: 10px; background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px var(--line2); transition: .25s; }
.case-card:hover .cc-price { background: var(--grad); color: #1a0e00; box-shadow: 0 8px 20px -8px rgba(255,140,30,.7); }
.tag { display: none; } .tag-unused { position: absolute; top: 14px; left: 14px; z-index: 3; font: 700 10px var(--body); text-transform: uppercase; letter-spacing: .08em;
  padding: 5px 9px; border-radius: 7px; background: rgba(0,0,0,.45); color: var(--cc); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc) 40%, transparent); }

.crate { position: relative; height: 180px; display: grid; place-items: center; }
.crate-rays { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; translate: -50% -50%; opacity: .5; transition: opacity .4s;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--cc) 30%, transparent) 0 6deg, transparent 6deg 20deg);
  mask-image: radial-gradient(closest-side, #000 20%, transparent); -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent);
  animation: spinr 40s linear infinite; }
@keyframes spinr { to { rotate: 360deg; } }
.crate-glow { position: absolute; left: 50%; top: 55%; width: 160px; height: 90px; translate: -50% -50%; border-radius: 50%;
  background: color-mix(in srgb, var(--cc) 55%, transparent); filter: blur(30px); }
.crate-img { position: relative; width: 82%; max-width: 230px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.7)); transition: transform .4s cubic-bezier(.2,.9,.3,1.3); }

.case-head { position: relative; display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: center; padding: 28px 40px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(60% 120% at 15% 50%, color-mix(in srgb, var(--cc) 22%, transparent), transparent 70%), linear-gradient(110deg, var(--panel2), var(--panel));
  box-shadow: inset 0 0 0 1px var(--line); }
.case-head .crate { height: 280px; } .case-head .crate-rays { width: 420px; height: 420px; } .case-head .crate-img { max-width: 320px; animation: float 6s ease-in-out infinite; }
.case-head h1 { font: 800 clamp(32px, 4vw, 52px)/1.05 var(--display); letter-spacing: -.03em; margin-bottom: 10px; }
.open-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.seg { display: flex; background: rgba(0,0,0,.3); padding: 4px; gap: 2px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.seg button { padding: 10px 15px; font: 600 13px var(--mono); color: var(--mute); border-radius: 9px; transition: .2s; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--panel3); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.chk { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; color: var(--mute); cursor: pointer; }
.chk input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chk input:focus-visible + span { box-shadow: 0 0 0 2px var(--gold); }
.chk span { width: 40px; height: 22px; border-radius: 20px; background: var(--panel3); position: relative; transition: background .2s; }
.chk span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--mute); transition: .25s; }
.chk input:checked + span { background: rgba(var(--gold-rgb),.3); } .chk input:checked + span::after { left: 21px; background: var(--gold); }

/* ── Ruleta ──────────────────────────────────────────────── */
.spin-area { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.strip { position: relative; overflow: hidden; padding: 16px 0; border-radius: 18px; background: linear-gradient(180deg, #0d1017, #0b0d13); box-shadow: inset 0 0 0 1px var(--line); }
.strip::before, .strip::after { content: ''; position: absolute; top: 0; bottom: 0; width: 22%; z-index: 2; pointer-events: none; }
.strip::before { left: 0; background: linear-gradient(90deg, #0b0d13, transparent); }
.strip::after { right: 0; background: linear-gradient(-90deg, #0b0d13, transparent); }
.track { display: flex; gap: 6px; will-change: transform; padding-left: 0; }
.track .item { flex: none; width: 170px; transition: opacity .5s, filter .5s, transform .5s; }
.marker { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 3;
  background: linear-gradient(180deg, var(--gold), transparent 30%, transparent 70%, var(--gold)); }
.marker::before, .marker::after { content: ''; position: absolute; left: 50%; width: 18px; height: 11px; translate: -50% 0; background: var(--grad);
  clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 0 6px var(--gold2)); }
.marker::before { top: 0; } .marker::after { bottom: 0; transform: scaleY(-1); }
.strip.done .item { opacity: .22; filter: grayscale(.9) blur(.5px); }
.strip.done .item.winner { opacity: 1; filter: none; transform: scale(1.07); z-index: 1; box-shadow: inset 0 0 0 1px var(--rc), 0 0 40px -6px var(--rc); }
.strip.done .item.winner .item-glow { opacity: .75; animation: pulse 1.4s ease-in-out infinite; }
.strip.done .marker { opacity: 0; transition: opacity .4s; }
@keyframes pulse { 50% { opacity: .4; } }

/* ── Modal / toast ───────────────────────────────────────── */
#modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(4,5,8,.85);
  opacity: 0; pointer-events: none; transition: opacity .25s; }
#modal.show { opacity: 1; pointer-events: auto; }
.modal-card { position: relative; width: min(880px, 100%); max-height: 90vh; overflow: auto; padding: 36px; text-align: center; border-radius: 24px;
  background: radial-gradient(80% 60% at 50% 0%, rgba(255,150,50,.14), transparent 70%), var(--panel); box-shadow: inset 0 0 0 1px var(--line2), 0 40px 100px -30px #000;
  transform: scale(.94) translateY(10px); transition: transform .35s cubic-bezier(.2,1.3,.4,1); }
#modal.show .modal-card { transform: none; }
.modal-card .kicker { justify-content: center; }
.modal-card h2 { font: 800 30px var(--display); letter-spacing: -.02em; margin-bottom: 26px; }
.modal-card h2 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; text-align: left; }
.res-grid.n1 { max-width: 320px; margin: 0 auto; }
.res-grid.n1 .item-s { font-size: 18px; }
.item.pop { animation: pop .7s cubic-bezier(.2,1.4,.4,1) both; } .item.pop .item-glow { opacity: .6; }
.res-grid .item:nth-child(2) { animation-delay: .08s; } .res-grid .item:nth-child(3) { animation-delay: .16s; }
.res-grid .item:nth-child(4) { animation-delay: .24s; } .res-grid .item:nth-child(5) { animation-delay: .32s; }
@keyframes pop { from { opacity: 0; transform: scale(.7) translateY(20px); } }
.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 13px 18px 13px 16px; border-radius: 12px; background: var(--panel2); font-weight: 600; font-size: 14px;
  box-shadow: inset 3px 0 0 var(--ok), inset 0 0 0 1px var(--line), 0 14px 34px rgba(0,0,0,.5); animation: feedIn .3s ease; transition: opacity .4s, transform .4s; }
.toast.err { box-shadow: inset 3px 0 0 var(--err), inset 0 0 0 1px var(--line), 0 14px 34px rgba(0,0,0,.5); }
.toast.out { opacity: 0; transform: translateX(20px); }

/* ── Upgrade ─────────────────────────────────────────────── */
.up { display: grid; grid-template-columns: 1fr 300px 1fr; gap: 30px; align-items: center; padding: 36px; border-radius: 24px;
  background: radial-gradient(40% 80% at 50% 50%, rgba(255,150,50,.1), transparent), linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: inset 0 0 0 1px var(--line); }
.up-slot { position: relative; max-width: 270px; width: 100%; justify-self: center; }
.up-slot .item-s { font-size: 17px; }
.up-lbl { display: block; text-align: center; margin-top: 12px; font: 600 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.empty { aspect-ratio: 1; display: grid; place-items: center; text-align: center; color: var(--mute); font-weight: 600; border: 1.5px dashed var(--line2); border-radius: var(--r); padding: 20px; }
.dial { position: relative; width: 280px; height: 280px; justify-self: center; display: grid; place-items: center; }
.dial svg { position: absolute; inset: 0; }
.d-bg { fill: rgba(0,0,0,.3); stroke: rgba(255,255,255,.06); stroke-width: 12; }
.d-arc { fill: none; stroke: var(--gold); stroke-width: 12; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(255,150,50,.7)); transition: stroke-dasharray .4s; }
.d-ptr { position: absolute; inset: 0; pointer-events: none; }
.d-ptr i { position: absolute; left: 50%; top: 2px; width: 4px; height: 30px; margin-left: -2px; border-radius: 3px; background: #fff; box-shadow: 0 0 14px #fff; }
.d-mid { text-align: center; margin-top: -40px; } .d-mid b { display: block; font: 800 34px var(--display); } .d-mid span { font: 600 13px var(--mono); color: var(--mute); }
.dial .btn { position: absolute; bottom: 64px; }
.dial.won .d-arc { stroke: var(--ok); } .dial.won .d-mid b { color: var(--ok); }
.dial.lost .d-arc { stroke: var(--err); } .dial.lost .d-mid b { color: var(--err); }
.up-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; }
.up-lists h3 { font: 700 17px var(--display); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mult { display: flex; gap: 4px; } .mult button { font: 600 12px var(--mono); padding: 5px 9px; border-radius: 7px; background: rgba(255,255,255,.06); }
.mult button:hover { background: var(--grad); color: #1a0e00; }
.up-lists .grid { max-height: 640px; overflow: auto; padding: 6px; }

/* ── Inventar / fair ─────────────────────────────────────── */
.inv-bar { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.fair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fair > .panel { min-width: 0; }
.panel { padding: 26px; border-radius: 20px; background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 14px; }
.panel.wide { grid-column: 1 / -1; overflow-x: auto; }
.panel h3 { font: 700 18px var(--display); }
.panel label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--mute); font-weight: 600; flex: 1; }
.panel .row { display: flex; gap: 8px; flex-wrap: wrap; } .panel .row .btn { flex: none; }
.panel .item { max-width: 240px; margin-top: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; color: var(--mute); font-size: 11px; padding: 6px; }
td { padding: 9px 6px; border-top: 1px solid var(--line); vertical-align: top; }

.foot { text-align: center; color: var(--dim); font-size: 12px; padding: 30px 16px; border-top: 1px solid var(--line); }

/* ── Telefon ─────────────────────────────────────────────── */
/* ── Efecte la deschidere ────────────────────────────────── */

#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 75; pointer-events: none; }
#flash { position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0; }
#flash.go { animation: flash .6s ease-out; }
@keyframes flash { 0% { opacity: .35; } 100% { opacity: 0; } }

#reveal { position: fixed; inset: 0; z-index: 70; display: none; place-items: center; padding: 16px; background: rgba(5,6,10,.82); }
#reveal.show { display: grid; animation: rvFade .25s ease both; }
@keyframes rvFade { from { opacity: 0; } }
.rv-card { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 30px 32px 28px; text-align: center; border-radius: 24px;
  background: radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--rc) 20%, transparent), transparent 70%), var(--panel);
  box-shadow: inset 0 0 0 1px var(--line2), inset 0 1px 0 rgba(255,255,255,.06), 0 40px 100px -30px #000;
  animation: rvCard .45s cubic-bezier(.2,1.2,.4,1) both; }
#reveal.many .rv-card { width: min(900px, 100%); }
@keyframes rvCard { from { opacity: 0; transform: scale(.95) translateY(10px); } }
/* margine care se roteste incet, doar la Covert si cutite/manusi */
#reveal.r-cov .rv-card::before, #reveal.r-gold .rv-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), transparent 0 60%, var(--rc) 75%, #fff 80%, var(--rc) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rvEdge 4s linear infinite; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes rvEdge { to { --a: 360deg; } }
.rv-stage { position: relative; height: 250px; display: grid; place-items: center; margin: -6px -8px 4px; }
.rv-light { position: absolute; left: 50%; bottom: 18px; width: 70%; height: 60px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, var(--rc), transparent); opacity: .55; filter: blur(6px); }
.rv-img { position: relative; height: 230px; width: auto; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 22px 22px rgba(0,0,0,.6)); animation: rvIn .7s .05s cubic-bezier(.2,1.1,.3,1) both, rvFloat 5s 1s ease-in-out infinite; }
@keyframes rvIn { from { opacity: 0; transform: translateY(30px) scale(.9) rotate(-6deg); } }
@keyframes rvFloat { 50% { translate: 0 -6px; } }
.rv-rar { display: inline-block; padding: 4px 12px; border-radius: 20px; font: 600 11px var(--body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--rc); background: color-mix(in srgb, var(--rc) 12%, transparent); animation: rvRise .5s .15s both; }
.rv-name { font: 800 clamp(30px, 5vw, 44px)/1.05 var(--display); letter-spacing: -.03em; margin-top: 10px; animation: rvRise .5s .2s both; }
.rv-name span { display: block; font: 500 15px var(--body); letter-spacing: 0; color: var(--mute); margin-bottom: 2px; }
.r-gold .rv-name { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.r-gold .rv-name span { -webkit-text-fill-color: var(--mute); }
#reveal.many .rv-name { font-size: 32px; }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; text-align: left; margin-top: 22px; }
.rv-grid .item.best { box-shadow: inset 0 0 0 1.5px var(--rc), 0 18px 40px -20px var(--rc); }
.rv-sum { margin-top: 14px; color: var(--mute); font-size: 14px; animation: rvRise .5s .25s both; }
.rv-sum b { font: 700 20px var(--mono); margin-left: 6px; color: var(--gold); }
.rv-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 22px; animation: rvRise .5s .3s both; }
@keyframes rvRise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .rv-card, .rv-card::before, .rv-img, .rv-name, .rv-rar, .rv-sum, .rv-actions { animation: none !important; }
}

@media (max-width: 900px) {
  .top { flex-wrap: wrap; gap: 0 10px; padding: 10px 16px 0; height: auto; }
  .nav { order: 3; width: 100%; overflow-x: auto; flex: none; height: 46px; } .nav a { padding: 0 12px; } .nav a.on::after { left: 12px; right: 12px; }
  .wallet { margin-left: auto; }
  main { padding: 18px 16px 60px; }
  .hero, .case-head, .up, .up-lists, .fair { grid-template-columns: 1fr; }
  .hero { padding: 24px 22px 30px; } .hero-art { height: 230px; order: -1; margin: -10px 0 10px; }
  .ha-back { width: 72%; right: 0; top: 0; } .ha-main { width: 64%; right: 8%; top: 12%; } .ha-case { width: 30%; left: 4%; bottom: 0; }
  .hero-stats div { padding: 0 14px; }
  .case-head { padding: 20px; } .case-head .crate { height: 220px; }
  .sec, .sec-row { margin-top: 40px; } .sec { font-size: 23px; }
  .dial { width: 260px; height: 260px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .cases { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .crate { height: 140px; }
}


/* ── Case Battle ─────────────────────────────────────────── */
.bt-setup { display: grid; grid-template-columns: auto auto 1fr auto; gap: 26px; align-items: center; padding: 24px 28px; border-radius: 22px;
  background: radial-gradient(60% 120% at 100% 0%, rgba(255,150,50,.1), transparent 70%), linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: inset 0 0 0 1px var(--line); }
.bt-opt .kicker, .bt-go .kicker { margin-bottom: 10px; }
.bt-rounds { min-width: 0; }
.bt-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 48px; align-items: center; }
.bt-chip { position: relative; width: 64px; height: 48px; border-radius: 10px; display: grid; place-items: center;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cc) 35%, transparent), transparent), var(--panel3); box-shadow: inset 0 0 0 1px var(--line2); transition: box-shadow .2s; }
.bt-chip img { width: 52px; height: 40px; object-fit: contain; }
.bt-chip i { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font: 700 12px/1 var(--body); font-style: normal; background: var(--panel3); color: var(--mute); box-shadow: inset 0 0 0 1px var(--line2); }
.bt-chip:hover { box-shadow: inset 0 0 0 1px var(--err); } .bt-chip:hover i { background: var(--err); color: #fff; }
.bt-go { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bt-go > b { font: 700 24px var(--mono); margin-bottom: 8px; }
.bt-warn { color: var(--err); font-size: 12px; }
.bt-pick .case-card { width: 100%; text-align: left; }
.bt-count { position: absolute; top: 14px; right: 14px; z-index: 3; font: 700 12px var(--mono); padding: 4px 9px; border-radius: 7px; background: var(--grad); color: #1a0e00; }

.ar-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 18px 22px; border-radius: 20px;
  background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: inset 0 0 0 1px var(--line); }
.ar-rounds { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ar-rd { width: 70px; height: 54px; border-radius: 11px; display: grid; place-items: center; opacity: .4; transition: opacity .3s, box-shadow .3s, transform .3s;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cc) 30%, transparent), transparent), var(--panel3); }
.ar-rd img { width: 60px; height: 46px; object-fit: contain; }
.ar-rd.past { opacity: .75; }
.ar-rd.on { opacity: 1; transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--gold), 0 10px 24px -10px var(--gold2); }
.ar-pot { text-align: right; } .ar-pot .kicker { justify-content: flex-end; margin-bottom: 4px; }
.ar-pot b { display: block; font: 700 24px var(--mono); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ar-pot small { color: var(--dim); font-size: 12px; }
.ar-note, .ar-res { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-bottom: 18px; padding: 18px 22px; border-radius: 18px; }
.ar-note { background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line2); }
.ar-note p { color: var(--mute); font-size: 14px; max-width: 560px; }
.ar-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-res { animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.ar-res.w { background: linear-gradient(90deg, rgba(61,220,151,.16), transparent); box-shadow: inset 0 0 0 1px var(--ok); }
.ar-res.l { background: linear-gradient(90deg, rgba(255,77,94,.12), transparent); box-shadow: inset 0 0 0 1px rgba(255,77,94,.5); }
.ar-res h3 { font: 800 24px var(--display); letter-spacing: -.02em; } .ar-res p { color: var(--mute); margin-top: 2px; }

.ar-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; }
.pl { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; border-radius: 20px;
  background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s, opacity .4s; }
.pl.lead { box-shadow: inset 0 0 0 1px var(--gold), 0 0 30px -12px var(--gold2); }
.pl.won { box-shadow: inset 0 0 0 2px var(--ok), 0 20px 40px -24px var(--ok); background: linear-gradient(180deg, rgba(61,220,151,.12), var(--panel) 40%); }
.pl.lost { opacity: .5; }
.pl.empty { align-items: center; justify-content: center; min-height: 420px; text-align: center; border: 1.5px dashed var(--line2); box-shadow: none; background: rgba(255,255,255,.015); }
.pl-wait { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--mute); font-weight: 600; }
.dots { display: flex; gap: 5px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
.pl-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pl-h > div { min-width: 0; flex: 1; }
.pl-h b { display: block; font: 700 15px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-h span:not(.av):not(.pl-badge) { font: 700 14px var(--mono); color: var(--gold); }
.av { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 800 12px var(--display); color: #0b0d13;
  background: var(--ac); box-shadow: 0 6px 16px -6px var(--ac); }
.pl-badge { font: 700 10px var(--body); text-transform: uppercase; letter-spacing: .08em; padding: 5px 9px; border-radius: 7px; background: var(--ok); color: #03200f; }
.vbox { position: relative; height: 330px; overflow: hidden; border-radius: 14px; background: linear-gradient(180deg, #0d1017, #0b0d13); box-shadow: inset 0 0 0 1px var(--line); }
.vbox::before, .vbox::after { content: ''; position: absolute; left: 0; right: 0; height: 28%; z-index: 2; pointer-events: none; }
.vbox::before { top: 0; background: linear-gradient(#0b0d13, transparent); } .vbox::after { bottom: 0; background: linear-gradient(0deg, #0b0d13, transparent); }
.vmark { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); box-shadow: 0 0 12px var(--gold2); }
.vready { position: absolute; inset: 0; display: grid; place-items: center; font: 800 40px var(--display); color: var(--mute); }
.vtrack { position: absolute; left: 8px; right: 8px; top: 0; display: flex; flex-direction: column; gap: 8px; will-change: transform; }
.item.mini { height: 142px; flex: none; padding: 10px 12px 12px; }
.item.mini .item-top { display: none; }
.item.mini .item-img { aspect-ratio: auto; flex: 1; min-height: 0; margin: 0 0 6px; }
.item.mini .item-w { font-size: 11px; } .item.mini .item-s { font-size: 13px; } .item.mini .item-p { font-size: 13px; margin-top: 3px; }
.vbox.done .item { opacity: .25; filter: grayscale(.8); transition: opacity .4s, filter .4s; }
.vbox.done .item.winner { opacity: 1; filter: none; box-shadow: inset 0 0 0 1px var(--rc), 0 0 30px -8px var(--rc); }
.pl-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pl-items .item { animation: pop .45s cubic-bezier(.2,1.4,.4,1) both; }

@media (max-width: 1100px) { .bt-setup { grid-template-columns: auto auto; } .bt-rounds { grid-column: 1 / -1; } .bt-go { grid-column: 1 / -1; align-items: flex-start; } }
@media (max-width: 700px) {
  .bt-setup { grid-template-columns: 1fr; padding: 20px; }
  .ar-cols { grid-template-columns: repeat(min(var(--n), 2), minmax(0, 1fr)); }
  .ar-pot { text-align: left; } .ar-pot .kicker { justify-content: flex-start; }
  .vbox { height: 290px; }
  .pl-items { grid-template-columns: 1fr; }
  .pl.empty { min-height: 260px; }
}

/* ── Locked skins ────────────────────────────────────────── */
.lock-btn { position: absolute; top: 8px; right: 8px; z-index: 3; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: var(--mute); background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px var(--line2); opacity: .55; transition: opacity .2s, color .2s, background .2s; }
.lock-btn svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.item:hover .lock-btn, .lock-btn:focus-visible { opacity: 1; }
.lock-btn:hover { color: var(--text); background: rgba(0,0,0,.6); }
.lock-btn.on { opacity: 1; color: #1a0e00; background: var(--grad); box-shadow: 0 4px 14px -4px var(--gold2); }
.item.locked { box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.55); }
.item.locked .item-top { padding-right: 34px; }
.item:has(.lock-btn) .item-top { padding-right: 34px; }
.item-act button:disabled { opacity: .35; pointer-events: none; }
.inv-bar { align-items: center; }
.inv-hint { color: var(--dim); font-size: 12px; }

/* ── Case Battle v2: hexagon spinner tiles ───────────────── */
.pl { gap: 0; padding: 0; overflow: hidden; }
.pl.empty { padding: 14px; gap: 12px; aspect-ratio: auto; display: flex; width: auto; min-height: 420px; }
.vbox { height: 330px; border-radius: 0; background: radial-gradient(60% 50% at 50% 50%, rgba(255,255,255,.04), transparent 70%), #0b0e15; box-shadow: none; border-bottom: 1px solid var(--line); }
.vbox::before { background: linear-gradient(#0b0e15, transparent); } .vbox::after { background: linear-gradient(0deg, #0b0e15, transparent); }
.vmark { display: none; }
.varr { position: absolute; top: 50%; z-index: 3; width: 0; height: 0; margin-top: -10px; border: 10px solid transparent; filter: drop-shadow(0 0 6px var(--gold2)); }
.varr.l { left: 0; border-left: 12px solid var(--gold); border-right: 0; }
.varr.r { right: 0; border-right: 12px solid var(--gold); border-left: 0; }
.pl.won .varr.l { border-left-color: var(--ok); } .pl.won .varr.r { border-right-color: var(--ok); }
.vtrack { left: 0; right: 0; gap: 0; }
.vtrack.still { top: 50%; transform: translateY(-50%); }
.vit { position: relative; height: 150px; flex: none; display: grid; place-items: center; }
.vit .hex, .bit .hex { position: absolute; left: 50%; top: 50%; width: 84px; height: 96px; translate: -50% -50%; background: var(--rc); opacity: .9;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.vit .hex::after, .bit .hex::after { content: ''; position: absolute; inset: 3px; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--rc) 35%, #12162a), #12162a 75%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.vit .gun { position: relative; width: 150px; height: 100px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0,0,0,.7)); transition: transform .4s, opacity .4s, filter .4s; }
.vit-n { position: absolute; left: 8px; right: 8px; bottom: 2px; text-align: center; font: 600 12px var(--body); color: var(--text); opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s; }
.vit-n i { font: 700 12px var(--mono); font-style: normal; color: var(--gold); margin-left: 6px; }
.vbox.done .vit { opacity: .2; filter: grayscale(1); transition: opacity .4s, filter .4s; }
.vbox.done .vit.winner { opacity: 1; filter: none; }
.vbox.done .vit.winner .gun { transform: scale(1.15); filter: drop-shadow(0 0 18px var(--rc)) drop-shadow(0 10px 12px rgba(0,0,0,.7)); }
.vbox.done .vit.winner .vit-n { opacity: 1; }
.pl-h { padding: 12px 16px; background: rgba(255,255,255,.025); border-bottom: 1px solid var(--line); }
.pl-total { flex: none; font: 700 13px var(--mono); padding: 5px 10px; border-radius: 8px; background: var(--panel3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.pl.lead .pl-total { background: rgba(var(--gold-rgb),.15); color: var(--gold); }
.pl.won .pl-total { background: rgba(61,220,151,.15); color: var(--ok); }
.av { width: 34px; height: 34px; border-radius: 50%; font-size: 10px; }
.pl-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; padding: 14px; min-height: 60px; }
.bit { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 8px 0; border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: inset 0 0 0 1px var(--line2); animation: pop .45s cubic-bezier(.2,1.4,.4,1) both; }
.bit-img { position: relative; width: 100%; height: 86px; display: grid; place-items: center; }
.bit .hex { width: 62px; height: 72px; }
.bit .gun { position: relative; width: 100%; height: 70px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
.bit b { font: 700 12px var(--display); margin-top: 6px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bit small { font-size: 11px; color: var(--mute); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bit-p { align-self: stretch; margin: 8px -8px 0; padding: 6px 0; font: 700 12px var(--mono); background: rgba(0,0,0,.3); border-top: 1px solid var(--line); box-shadow: inset 0 -2px 0 var(--rc); }
@media (max-width: 700px) { .vit .gun { width: 110px; height: 76px; } .vit .hex { width: 66px; height: 76px; } .pl-items { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); padding: 10px; } }

/* ── Case Battle builder (v5) ───────────────────────────────────────── */
.cb-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 22px; border-bottom: 1px solid var(--line2); }
.cb-title { position: relative; font: 700 18px var(--display); padding: 0 2px 14px; }
.cb-title::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 14px rgba(var(--gold-rgb),.7); }
.cb-rounds { color: var(--mute); font: 600 13px var(--mono); padding-bottom: 14px; }
.cb-link { color: var(--err); font-weight: 600; } .cb-link:hover { text-decoration: underline; }
.cb-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cb-case, .cb-add, .pk-case { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 252px; padding: 16px 12px 14px; border-radius: 16px; text-align: center;
  background: radial-gradient(120% 70% at 50% 15%, color-mix(in srgb, var(--cc, #ffb547) 18%, transparent), transparent 70%), var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.cb-img { flex: 1; display: grid; place-items: center; width: 100%; min-height: 120px; }
.cb-img img { width: 100%; max-width: 150px; height: 120px; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0,0,0,.55)); transition: transform .3s; }
.cb-case:hover .cb-img img, .pk-case:hover .cb-img img { transform: translateY(-4px) scale(1.04); }
.cb-case b, .pk-case b { font: 600 13px var(--body); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-price { font: 700 13px var(--mono); color: var(--ok); }
.cb-qty { display: flex; align-items: center; gap: 4px; margin-top: 8px; padding: 3px; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line2); }
.cb-qty button { width: 30px; height: 28px; border-radius: 7px; font-size: 17px; font-weight: 700; color: var(--mute); }
.cb-qty button:hover:not(:disabled) { background: var(--panel3); color: var(--text); }
.cb-qty button:disabled { opacity: .3; cursor: default; }
.cb-qty span { min-width: 26px; font: 700 14px var(--mono); }
.cb-x { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 7px; color: var(--dim); font-size: 17px; line-height: 1; }
.cb-x:hover { background: rgba(255,77,94,.15); color: var(--err); }
.cb-add { justify-content: center; gap: 14px; color: var(--mute); font-weight: 600; background: rgba(255,255,255,.015); box-shadow: inset 0 0 0 1.5px var(--line2); transition: color .2s, box-shadow .2s, background .2s; }
.cb-add:hover { color: var(--text); background: rgba(var(--gold-rgb),.04); box-shadow: inset 0 0 0 1.5px rgba(var(--gold-rgb),.5); }
.cb-hex { width: 78px; height: 88px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--line2); transition: background .2s; }
.cb-hex i { width: 74px; height: 84px; display: grid; place-items: center; clip-path: inherit; background: var(--panel2); font: 300 34px var(--body); font-style: normal; color: var(--mute); }
.cb-add:hover .cb-hex { background: var(--gold); } .cb-add:hover .cb-hex i { color: var(--gold); }

.cb-bar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: stretch; }
.cb-left, .cb-cost { padding: 20px 22px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.cb-row { display: flex; flex-wrap: wrap; gap: 18px 28px; }
.cb-field label { display: block; color: var(--mute); font-size: 13px; font-weight: 600; margin-bottom: 9px; }
.cb-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line2); }
.cb-seg button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--mute); transition: background .2s, color .2s; }
.cb-seg button svg { width: 16px; height: 16px; }
.cb-seg button:hover { color: var(--text); }
.cb-seg button.on { background: var(--panel3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.cb-seg button.m-standard.on svg { color: var(--gold); } .cb-seg button.m-underdog.on svg { color: #8ab4ff; } .cb-seg button.m-shared.on svg { color: var(--ok); }
.cb-seg.sm button { padding: 7px 12px; font-size: 13px; }
.cb-type { position: relative; }
.cb-type-btn, .cb-type-menu button { display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 12px; border-radius: 12px; }
.cb-type-btn { min-width: 210px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line2); }
.cb-type-btn:hover { box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.5); }
.cb-type .chev { margin-left: auto; width: 18px; height: 18px; color: var(--mute); transform: rotate(180deg); transition: transform .2s; }
.cb-type.open .chev { transform: none; }
.cb-type-menu { position: absolute; z-index: 20; left: 0; bottom: calc(100% + 6px); min-width: 100%; padding: 6px; border-radius: 14px; background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line2), 0 20px 40px -10px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .15s, transform .15s; }
.cb-type.open .cb-type-menu { opacity: 1; transform: none; pointer-events: auto; }
.cb-type-menu button { width: 100%; min-height: 42px; }
.cb-type-menu button:hover { background: rgba(255,255,255,.05); }
.cb-type-menu button.on { background: rgba(var(--gold-rgb),.1); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.35); }
.cb-type-menu em { margin-left: auto; font: 800 10px var(--body); font-style: normal; letter-spacing: .06em; padding: 3px 7px; border-radius: 6px; background: var(--ok); color: #03200f; }
.tp { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(var(--gold-rgb),.14); }
.tp svg { width: 16px; height: 16px; fill: var(--gold); }
.tp.b { background: rgba(120,160,255,.15); } .tp.b svg { fill: #8ab4ff; }
.vs { font: 700 12px var(--body); font-style: normal; color: var(--dim); }
.cb-desc { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--mute); font-size: 14px; }
.cb-desc b { display: block; color: var(--text); font: 700 14px var(--display); margin-bottom: 3px; }
.cb-cost { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.cb-cost-row { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.cb-cost-row span { color: var(--mute); font-weight: 600; }
.cb-cost-row b { font: 700 24px var(--mono); color: var(--ok); }
.cb-cost .btn { width: 100%; background: linear-gradient(135deg, #4cf0a8, #22b874); color: #022313; box-shadow: 0 8px 24px -8px rgba(61,220,151,.6), inset 0 1px 0 rgba(255,255,255,.4); }

/* Case picker modal */
.modal-card.wide { width: min(1080px, 100%); padding: 0; text-align: left; display: flex; flex-direction: column; max-height: 88vh; }
.pk { display: flex; flex-direction: column; min-height: 0; max-height: 88vh; }
.pk-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; }
.modal-card .pk-head h2 { margin: 0; font-size: 22px; }
.pk-close { width: 36px; height: 36px; border-radius: 10px; font-size: 22px; color: var(--mute); } .pk-close:hover { background: var(--panel3); color: var(--text); }
.pk-tools { display: flex; gap: 10px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.pk-tools input { font-family: var(--body); flex: 1; }
.pk-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; padding: 16px 24px; }
.pk-case { min-height: 210px; cursor: pointer; transition: box-shadow .2s; }
.pk-case:hover { box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.5); }
.pk-case.has { box-shadow: inset 0 0 0 2px var(--ok); }
.pk-case .cb-img { min-height: 100px; } .pk-case .cb-img img { height: 100px; }
.pk-n { position: absolute; top: 9px; right: 9px; z-index: 2; min-width: 24px; padding: 3px 7px; border-radius: 7px; background: var(--ok); color: #03200f; font: 800 12px var(--mono); }
.pk-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--line); }
.pk-foot span { color: var(--mute); font: 600 13px var(--mono); }

/* Arena additions */
.ar-mode { display: flex; align-items: center; gap: 10px; }
.ar-mode svg { width: 22px; height: 22px; color: var(--gold); }
.ar-mode b { display: block; font: 700 15px var(--display); }
.ar-mode span { display: block; color: var(--mute); font-size: 12px; }
.ar-mode b.cost { font: 700 16px var(--mono); color: var(--ok); }
.pl-team { display: block; color: var(--mute); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ar-cols.teams .pl.team-0 { border-top: 3px solid var(--gold); }
.ar-cols.teams .pl.team-1 { border-top: 3px solid #8ab4ff; }
.ar-cols.teams .pl.ts-end { margin-right: 10px; }

@media (max-width: 900px) { .cb-bar { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .cb-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cb-case, .cb-add { min-height: 220px; }
  .cb-row, .cb-field, .cb-seg, .cb-type-btn { width: 100%; }
  .cb-seg button { flex: 1; justify-content: center; padding: 9px 6px; font-size: 13px; }
  .pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .pk-tools { flex-direction: column; padding: 12px; }
  .ar-cols.teams .pl.ts-end { margin-right: 0; }
}

/* ── Case Battle lobby (v6) ─────────────────────────────────────────── */
.bl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px; margin-bottom: 14px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.bl-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.bl-tabs a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 11px; color: var(--mute); font-weight: 600; transition: background .2s, color .2s; }
.bl-tabs a svg { width: 17px; height: 17px; }
.bl-tabs a:hover { color: var(--text); }
.bl-tabs a.on { background: var(--panel3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.bl-tabs a.on svg { color: var(--gold); }
.bl-tabs em { font: 700 11px var(--mono); font-style: normal; padding: 2px 7px; border-radius: 6px; background: rgba(var(--gold-rgb),.15); color: var(--gold); }
.bl-new { padding: 11px 20px; } .bl-new svg { width: 17px; height: 17px; }

.bl-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.bl-modes { display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.bl-modes button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 9px; font-weight: 600; color: var(--dim); transition: color .2s, background .2s; }
.bl-modes button svg { width: 17px; height: 17px; }
.bl-modes button.on { color: var(--mc); }
.bl-modes button:hover { background: rgba(255,255,255,.04); }
.bl-sel { width: auto; min-width: 150px; height: 46px; padding: 0 36px 0 14px; font: 600 14px var(--body); color: var(--mute); background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a90a2' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 0; box-shadow: inset 0 0 0 1px var(--line); appearance: none; -webkit-appearance: none; cursor: pointer; }
.bl-sel option { background: var(--panel2); color: var(--text); }
.bl-grow { flex: 1; }
.bl-num { position: relative; display: block; width: 108px; }
.bl-num input { height: 46px; padding-right: 28px; font-family: var(--body); background: var(--panel); border: 0; box-shadow: inset 0 0 0 1px var(--line); }
.bl-num input:focus { box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 3px rgba(var(--gold-rgb),.15); }
.bl-num span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--mute); font-weight: 600; pointer-events: none; }
.bl-reset { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 11px; color: var(--mute); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.bl-reset svg { width: 18px; height: 18px; } .bl-reset:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }

.bl-list { border-radius: 16px; overflow: hidden; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.bl-h { font: 700 15px var(--display); color: var(--mute); margin: 22px 2px 10px; }
.bl-empty { padding: 40px 20px; text-align: center; color: var(--mute); border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.bl-empty a { color: var(--gold); }
.lb-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 120px 220px 64px 200px; align-items: center; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--line); transition: background .2s; }
.lb-row:first-child { border-top: 0; }
.lb-row:hover { background: rgba(255,255,255,.02); }
.lb-row.mine { background: linear-gradient(90deg, rgba(var(--gold-rgb),.08), transparent 60%); }
.lb-row.full > :not(.lb-act) { opacity: .5; }
.lb-hex { width: 56px; height: 62px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(180deg, var(--mc), color-mix(in srgb, var(--mc) 35%, transparent)); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--mc) 40%, transparent)); }
.lb-hex span { width: 50px; height: 56px; display: grid; place-items: center; clip-path: inherit; background: var(--panel2); font: 700 16px var(--mono); }
.lb-cases { display: flex; align-items: center; gap: 12px; min-width: 0; overflow: hidden; }
.lb-c { position: relative; flex: none; width: 72px; height: 54px; display: grid; place-items: center; }
.lb-c img { width: 72px; height: 54px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.lb-c em { position: absolute; right: -6px; bottom: -4px; font: 700 11px var(--mono); font-style: normal; padding: 2px 6px; border-radius: 6px; background: var(--panel3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.lb-more { color: var(--mute); font: 700 13px var(--mono); }
.lb-price { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.lb-price b { font: 700 15px var(--mono); color: var(--ok); padding: 4px 9px; border-radius: 7px; background: rgba(61,220,151,.1); }
.lb-price small { color: var(--dim); font-size: 12px; padding-left: 2px; }
.lb-seats { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.lb-team { display: inline-flex; gap: 4px; padding: 3px; border-radius: 99px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); }
.lb-av, .lb-plus { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.lb-av { font: 800 13px var(--display); color: #fff; background: var(--ac); box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.lb-av.me { font-size: 9px; color: #1a0e00; }
.lb-plus { font-size: 18px; font-weight: 600; color: var(--mc); box-shadow: inset 0 0 0 1.5px var(--mc); transition: background .2s, transform .2s; }
.lb-plus:hover:not(:disabled) { background: color-mix(in srgb, var(--mc) 18%, transparent); transform: scale(1.08); }
.lb-plus:disabled { opacity: .45; cursor: default; }
.lb-mode { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--mc); }
.lb-mode svg { width: 26px; height: 26px; }
.lb-mode small { color: var(--dim); font: 600 11px var(--mono); }
.lb-act { display: flex; gap: 8px; justify-content: flex-end; }
.lb-btn { padding: 10px 0; width: 100px; font-size: 14px; }
.lb-btn.wide { width: 154px; }
.lb-btn svg { width: 17px; height: 17px; }
.lb-join { color: var(--mc); background: color-mix(in srgb, var(--mc) 8%, transparent); box-shadow: inset 0 0 0 1px var(--mc); }
.lb-join:hover { background: color-mix(in srgb, var(--mc) 18%, transparent); }
.lb-watch { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line2); }
.lb-watch:hover { background: rgba(255,255,255,.08); }
.lb-eye { width: 46px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: var(--mute); box-shadow: inset 0 0 0 1px var(--line2); }
.lb-eye svg { width: 18px; height: 18px; } .lb-eye:hover { color: var(--text); background: rgba(255,255,255,.05); }
.lb-res { font: 700 13px var(--body); padding: 5px 11px; border-radius: 8px; }
.lb-res.w { background: rgba(61,220,151,.14); color: var(--ok); }
.lb-res.s { background: rgba(138,180,255,.14); color: #8ab4ff; }
.lb-res.l { background: rgba(255,77,94,.12); color: var(--err); }
.lb-pr { font: 600 12px var(--mono); } .lb-pr.pos { color: var(--ok); } .lb-pr.neg { color: var(--dim); }
.lb-row.hist .lb-seats { flex-wrap: nowrap; }

.bt-back { display: inline-flex; align-items: center; gap: 4px; color: var(--mute); font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.bt-back svg { width: 16px; height: 16px; } .bt-back:hover { color: var(--text); }
.ar-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bt-spec { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 5px 11px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--mute); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line2); }
.bt-spec svg { width: 15px; height: 15px; }
.ar-mode[style] svg { color: var(--mc); }
.ar-res.n { background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line2); }

@media (max-width: 1100px) {
  .lb-row { grid-template-columns: 64px minmax(0, 1fr) 110px auto; grid-template-areas: "hex cases price mode" "seats seats act act"; row-gap: 12px; }
  .lb-hex { grid-area: hex; } .lb-cases { grid-area: cases; } .lb-price { grid-area: price; } .lb-mode { grid-area: mode; }
  .lb-seats { grid-area: seats; justify-content: flex-start; } .lb-act { grid-area: act; }
}
@media (max-width: 640px) {
  .bl-top { padding: 4px; } .bl-tabs a { padding: 9px 12px; font-size: 14px; } .bl-new { width: 100%; }
  .bl-tabs { width: 100%; } .bl-tabs a { flex: 1; justify-content: center; }
  .bl-modes { width: 100%; } .bl-modes button { flex: 1; justify-content: center; padding: 9px 6px; font-size: 13px; }
  .bl-sel { flex: 1; min-width: 0; } .bl-grow { display: none; } .bl-num { flex: 1; width: auto; }
  .lb-row { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "hex cases mode" "price price price" "seats seats seats" "act act act"; padding: 14px; }
  .lb-hex { transform: scale(.85); } .lb-price { flex-direction: row; align-items: center; gap: 10px; }
  .lb-c { width: 56px; } .lb-c img { width: 56px; height: 44px; }
  .lb-act > .lb-btn { flex: 1; width: auto; }
}
@media (max-width: 640px) {
  .bl-filters { display: grid; grid-template-columns: 1fr 1fr 46px; grid-template-areas: "m m m" "t s r" "mn mx mx"; }
  .bl-modes { grid-area: m; } #fType { grid-area: t; } #fSort { grid-area: s; } .bl-reset { grid-area: r; }
  .bl-num:nth-of-type(1) { grid-area: mn; } .bl-num:nth-of-type(2) { grid-area: mx; }
  .bl-sel, .bl-num { width: 100%; min-width: 0; }
}

/* ── Battle end screen (v7) ─────────────────────────────────────────── */
.pl.lost { opacity: 1; box-shadow: inset 0 0 0 1.5px rgba(255,77,94,.8); }
.pl.won { box-shadow: inset 0 0 0 1.5px var(--ok), 0 20px 50px -26px var(--ok); }
.vbox.fin::before, .vbox.fin::after { display: none; }
.vres { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.vres small { position: relative; font: 600 13px var(--body); color: var(--mute); }
.vres.lose { background: linear-gradient(180deg, #0b0e15 0%, rgba(120,30,60,.35) 100%); }
.vres.win { background: radial-gradient(80% 70% at 50% 45%, rgba(61,220,151,.22), transparent 75%), linear-gradient(180deg, #0c1a1c, #0d2a26); overflow: hidden; }
.rhex { position: relative; width: 84px; height: 94px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.rhex i { width: 79px; height: 89px; display: grid; place-items: center; clip-path: inherit; font-style: normal; }
.rhex svg { width: 30px; height: 30px; }
.vres.lose .rhex { background: var(--err); filter: drop-shadow(0 0 14px rgba(255,77,94,.5)); }
.vres.lose .rhex i { background: linear-gradient(180deg, #2a1420, #1a0f18); color: var(--err); }
.vres.win .rhex { background: var(--ok); filter: drop-shadow(0 0 18px rgba(61,220,151,.6)); }
.vres.win .rhex i { background: linear-gradient(180deg, #123a30, #0c241f); color: var(--ok); }
.rpill { position: relative; font: 700 16px var(--mono); color: var(--ok); padding: 4px 11px; border-radius: 8px; background: rgba(61,220,151,.14); box-shadow: inset 0 0 0 1px rgba(61,220,151,.3); }
/* Green sparkle particles drifting up behind the winner */
.vfx, .vfx::before { position: absolute; inset: -40px 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(61,220,151,.9) 1px, transparent 1.6px), radial-gradient(circle, rgba(61,220,151,.55) 1px, transparent 1.6px), radial-gradient(circle, rgba(160,255,210,.7) .8px, transparent 1.4px);
  background-size: 67px 79px, 97px 89px, 53px 61px; background-position: 0 0, 23px 17px, 11px 29px; animation: vfx-up 9s linear infinite; }
.vfx::before { content: ''; inset: 0; background-size: 83px 71px, 113px 97px, 61px 53px; background-position: 13px 7px, 41px 31px, 5px 19px; animation-duration: 6s; opacity: .7; }
@keyframes vfx-up { from { transform: translateY(0); } to { transform: translateY(-79px); } }
@media (prefers-reduced-motion: reduce) { .vfx, .vfx::before { animation: none; } }
.ar-tacts { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; justify-content: flex-end; }
.ar-tacts .bt-spec { margin-bottom: 0; }
.btn.sm { padding: 8px 14px; font-size: 13px; border-radius: 9px; }
.ar-head { flex-wrap: nowrap; }
.ar-rounds { position: relative; flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; padding: 6px 2px; scrollbar-width: thin; scroll-behavior: smooth; }
.ar-rd { flex: none; }
@media (max-width: 900px) { .ar-head { flex-wrap: wrap; } .ar-rounds { flex-basis: 100%; order: 5; } }
.ar-round { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.ar-round span { font: 600 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.ar-round b { font: 700 26px var(--mono); color: var(--text); background: none; -webkit-text-fill-color: currentColor; }
.ar-round b i { font-style: normal; color: var(--dim); font-size: 18px; }
@media (max-width: 900px) { .ar-round { align-items: flex-start; } }

/* ── Upgrade v2: several skins on each side ─────────────────────────── */
.ug { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr); grid-template-areas: "l d r" "cl . cr" "go go go" "warn warn warn";
  align-items: center; gap: 18px 24px; padding: 30px 30px 26px; border-radius: 26px;
  background: radial-gradient(60% 80% at 50% 30%, rgba(var(--gold-rgb),.07), transparent 70%), var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.ug-side { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; min-height: 290px; padding: 22px 18px 0;
  clip-path: polygon(7% 0, 93% 0, 100% 12%, 100% 88%, 93% 100%, 7% 100%, 0 88%, 0 12%); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
.ug-l { grid-area: l; } .ug-r { grid-area: r; }
.ug-tiles { flex: 1; width: 100%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px 10px; }
.ug-tile { position: relative; width: 132px; height: 100px; display: grid; place-items: center; border-radius: 12px; transition: transform .2s, background .2s; }
.ug-tiles.n1 .ug-tile { width: 230px; height: 170px; } .ug-tiles.n2 .ug-tile { width: 170px; height: 130px; }
.ug-tile .hex { position: absolute; width: 46%; aspect-ratio: .87; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 55%, transparent), color-mix(in srgb, var(--rc) 10%, transparent)); opacity: .55; }
.ug-tile .gun { position: relative; width: 92%; height: 82%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)); }
.ug-tile:hover { background: rgba(255,255,255,.04); transform: translateY(-2px); }
.ug-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 15px; color: #fff; background: var(--err); opacity: 0; transition: opacity .2s; }
.ug-tile:hover .ug-x { opacity: 1; }
.ug-empty { color: var(--dim); font-weight: 600; text-align: center; line-height: 1.5; }
.ug-val { display: flex; align-items: center; gap: 8px; padding: 10px 28px 12px; border-radius: 14px 14px 0 0; background: rgba(0,0,0,.35); }
.ug-val b { font: 700 17px var(--mono); }
.ug-val small { color: var(--mute); font-size: 12px; }
.ug-val em { font: 700 12px var(--mono); font-style: normal; padding: 3px 7px; border-radius: 6px; background: rgba(var(--gold-rgb),.15); color: var(--gold); }
.ug-dial { grid-area: d; width: 300px; height: 300px; }
.ug-dial::before { content: ''; position: absolute; inset: -14px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(180deg, rgba(var(--gold-rgb),.16), rgba(255,255,255,.03)); }
.ug-dial::after { content: ''; position: absolute; inset: -12px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--panel); z-index: 0; }
.ug-dial > * { z-index: 1; }
.ug-dial .d-mid { margin-top: 0; } .ug-dial .d-mid b { font-size: 40px; } .ug-dial .d-mid span { font-family: var(--body); }
.ug-cl { grid-area: cl; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--mute); font-size: 13px; }
.ug-cl b { color: var(--text); }
.ug-swap { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--text); background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line2); transition: transform .3s, color .2s; }
.ug-swap svg { width: 20px; height: 20px; } .ug-swap:hover { color: var(--gold); transform: rotate(-90deg); }
.ug-cr { grid-area: cr; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.ug-m { width: 50px; height: 56px; display: grid; place-items: center; font: 700 13px var(--mono); color: var(--mute);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--line2); position: relative; transition: color .2s, background .2s; }
.ug-m::before { content: ''; position: absolute; inset: 1.5px; clip-path: inherit; background: var(--panel2); z-index: -1; }
.ug-m { isolation: isolate; }
.ug-m:hover { color: var(--text); background: rgba(var(--gold-rgb),.5); }
.ug-m.on { color: #1a0e00; background: var(--gold); } .ug-m.on::before { background: var(--grad); }
.ug-go { grid-area: go; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; }
.ug-go .btn { min-width: 150px; }
.ug-chev { height: 40px; opacity: .55; -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='40' viewBox='0 0 38 40'%3E%3Cpath d='M26 4 10 20l16 16' fill='none' stroke='%23ffb547' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x center; }
.ug-chev.r { transform: scaleX(-1); }
.ug-warn { grid-area: warn; text-align: center; color: var(--err); font-size: 13px; }

.ug-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.ug-panel { min-width: 0; padding: 22px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.ug-ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ug-ph h3 { font: 700 17px var(--display); } .ug-ph h3 span { color: var(--dim); font-weight: 600; }
.ug-ph-r { display: flex; align-items: center; gap: 14px; }
.ug-sort { padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: 13px; box-shadow: inset 0 0 0 1px var(--line2); }
.ug-sort:hover { background: rgba(255,255,255,.05); }
.ug-tools { display: grid; grid-template-columns: minmax(0, 1fr) 130px 130px; gap: 8px; }
.ug-search { position: relative; display: block; }
.ug-search input, .ug-num { font-family: var(--body); height: 44px; }
.ug-search input { padding-right: 40px; }
.ug-search svg { position: absolute; right: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--mute); pointer-events: none; }
.ug-grid { margin-top: 14px; max-height: 620px; overflow: auto; padding: 4px; align-content: start; }
.ug-grid .item { cursor: pointer; }
.ug-grid .item.picked { box-shadow: inset 0 0 0 2px var(--ok), 0 0 24px -8px var(--ok); }
.ug-check { position: absolute; top: 50%; left: 50%; z-index: 4; width: 46px; height: 52px; display: grid; place-items: center; transform: translate(-50%, -62%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--ok); color: #03200f; font-size: 22px; font-weight: 800; animation: pop .3s cubic-bezier(.2,1.4,.4,1) both; }
.ug-note { grid-column: 1 / -1; margin-top: 4px; }

@media (max-width: 1100px) {
  .ug { grid-template-columns: 1fr 1fr; grid-template-areas: "d d" "l r" "cl cr" "go go" "warn warn"; }
  .ug-dial { justify-self: center; }
}
@media (max-width: 760px) {
  .ug { grid-template-columns: 1fr; grid-template-areas: "d" "l" "r" "cl" "cr" "go" "warn"; padding: 20px 14px; }
  .ug-side { min-height: 220px; }
  .ug-tile { width: 104px; height: 80px; } .ug-tiles.n1 .ug-tile { width: 200px; height: 150px; } .ug-tiles.n2 .ug-tile { width: 140px; height: 105px; }
  .ug-dial { width: 260px; height: 260px; }
  .ug-go { gap: 10px; }
  .ug-lists { grid-template-columns: 1fr; }
  .ug-panel { padding: 16px; }
  .ug-tools { grid-template-columns: 1fr 1fr; } .ug-tools .ug-search { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .grid.sm.ug-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 560px; } .ug-grid .item-s { font-size: 13px; } }

/* ── Conturi (auth.js) ───────────────────────────────────── */
#auth { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(4,5,8,.7); overflow: auto; }
.auth-card { width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: 24px;
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--line2), 0 30px 80px -20px rgba(0,0,0,.8); }
.auth-card .logo { align-self: center; margin-bottom: 6px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg); }
.auth-tabs button { padding: 9px; border-radius: 9px; font: 600 13px var(--display); color: var(--mute); }
.auth-tabs button.on { background: var(--panel3); color: var(--text); }
.auth-card label { display: flex; flex-direction: column; gap: 6px; font: 600 12px var(--body); color: var(--mute); }
.auth-err { min-height: 1.4em; font-size: 13px; color: var(--err); }
.auth-card .fine { text-align: center; margin-top: 0; }
@media (max-width: 560px) { .auth-card { padding: 24px 18px; } }

/* ── Bara din dreapta sus: sold, dovleci, avatar, setari ── */
.wallet { position: relative; gap: 8px; }
.hb { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 14px; border-radius: 12px; background: #161c2a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.hb b { font: 700 15px var(--display); white-space: nowrap; }
.hb-ic { width: 20px; height: 20px; fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hb-bal b { color: var(--ok); }
.hb-plus { width: 34px; height: 34px; display: grid; place-items: center; font: 800 20px/1 var(--display); color: #062b19; background: var(--ok);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); transition: filter .2s, transform .15s; }
.hb-plus:hover { filter: brightness(1.12); } .hb-plus:active { transform: scale(.94); }
.hb-pts { padding-right: 14px; }
.hb-pts b { color: #ff9a3c; }
.pumpkin { width: 22px; height: 22px; flex: none; }
.pumpkin .pk-b { fill: #e8661c; } .pumpkin .pk-m { fill: #ff8a2a; }
.pumpkin .pk-stem { fill: none; stroke: #5b8a32; stroke-width: 2; stroke-linecap: round; } .pumpkin .pk-leaf { fill: #6fae3b; }
.hb-av { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); color: #1a0e00; font: 800 17px var(--display);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); transition: filter .2s; }
.hb-av:hover { filter: brightness(1.08); }
.hb-gear { width: 44px; padding: 0; justify-content: center; background: #16243f; color: #3f8cff; transition: background .2s; }
.hb-gear:hover, .hb-gear.on { background: #1b2d50; }
.hb-gear svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.hb-gear.on svg { transform: rotate(60deg); }
.hb-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: 230px; padding: 8px; border-radius: 14px; background: var(--panel2);
  box-shadow: inset 0 0 0 1px var(--line2), 0 20px 50px -12px rgba(0,0,0,.8); }
.hb-menu[hidden] { display: none; }
.hb-who { padding: 8px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.hb-who .kicker { margin-bottom: 6px; font-size: 10px; }
.hb-who b { display: block; font: 700 15px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-row { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px; border-radius: 9px; font: 600 14px var(--body); text-align: left; }
.hb-row:hover { background: rgba(255,255,255,.05); }
.hb-row.danger { color: var(--err); }
.hb-sw { width: 34px; height: 20px; border-radius: 10px; background: var(--panel3); position: relative; transition: background .2s; }
.hb-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--mute); transition: transform .2s, background .2s; }
#snd.on .hb-sw { background: rgba(61,220,151,.3); } #snd.on .hb-sw::after { transform: translateX(14px); background: var(--ok); }
@media (max-width: 560px) {
  .wallet { gap: 6px; }
  .hb { height: 40px; gap: 7px; padding-left: 10px; } .hb-ic { display: none; } .hb b { font-size: 14px; }
  .hb-plus { width: 30px; height: 30px; } .hb-pts { padding-right: 10px; }
  .hb-av, .hb-gear { width: 40px; height: 40px; }
}
@media (max-width: 400px) { .hb-av { display: none; } }

/* ── Giftcard (butonul + de langa sold) ── */
.modal-card.gift { width: min(880px, 100%); padding: 0; overflow: hidden; border-radius: 14px; text-align: left;
  background: radial-gradient(120% 160% at 0% 50%, #3fbf63 0%, #2c9a4c 45%, #237d3f 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 30px 80px -20px rgba(0,0,0,.8); }
.modal-card.gift::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background: repeating-linear-gradient(135deg, #fff 0 2px, transparent 2px 22px); mask-image: linear-gradient(90deg, transparent 10%, #000 60%); -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 60%); }
.gc { position: relative; display: flex; align-items: center; gap: 22px; min-height: 92px; padding: 10px 14px 10px 22px; }
.gc-art { width: 76px; height: 76px; flex: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
.gc-txt { flex: 1; font: 800 19px/1.25 var(--display); text-transform: uppercase; letter-spacing: .01em; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.gc-txt em { font-style: normal; color: #b8ff5a; }
.gc-box { display: flex; gap: 6px; width: min(330px, 100%); padding: 6px; border-radius: 10px; background: rgba(10,30,18,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.gc-box input { flex: 1; min-width: 0; height: 50px; border: 0; border-radius: 7px; background: #11331f; color: #4be08f; font: 700 15px var(--display); letter-spacing: .04em; padding: 0 14px; }
.gc-box input::placeholder { color: rgba(75,224,143,.35); }
.gc-box input:focus { box-shadow: 0 0 0 2px rgba(75,224,143,.5); }
.gc-box input.bad { animation: gcShake .35s; box-shadow: 0 0 0 2px var(--err); }
@keyframes gcShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.gc-btn { flex: none; height: 50px; padding: 0 18px; border-radius: 7px; font: 600 14px var(--body); color: #fff; background: #3fd17a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); transition: filter .2s, background .2s; }
.gc-btn:hover { filter: brightness(1.08); }
.gc-btn:disabled { background: transparent; color: rgba(255,255,255,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); pointer-events: none; }
.gc-x { position: absolute; top: 4px; right: 8px; font-size: 18px; line-height: 1; color: rgba(255,255,255,.6); padding: 2px 4px; }
.gc-x:hover { color: #fff; }
@media (max-width: 700px) {
  .gc { flex-wrap: wrap; gap: 12px 14px; padding: 18px 16px 16px; }
  .gc-art { width: 56px; height: 56px; } .gc-txt { font-size: 16px; min-width: 0; }
  .gc-box { width: 100%; }
}

/* ── Admin Panel ── */
.hb-row { color: inherit; }
.hb-shield { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#adminLink[hidden] { display: none; }
.adm { max-width: 1100px; margin: 0 auto; }
.adm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.adm-head h2 { font: 800 30px var(--display); letter-spacing: -.02em; }
.adm-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.adm-tabs a { padding: 10px 18px; border-radius: 9px; font: 600 14px var(--display); color: var(--mute); }
.adm-tabs a.on { background: var(--panel3); color: var(--text); }
.adm-tabs a:hover:not(.on) { color: var(--text); }
.adm-load { padding: 30px 0; }
.adm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.adm-stats div, .adm-num { display: flex; flex-direction: column; gap: 2px; }
.adm-stats div { padding: 14px 18px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.adm-stats span, .adm-num span { font: 600 11px var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--mute); }
.adm-stats b { font: 700 22px var(--mono); }
.adm-bar { display: flex; gap: 10px; margin-bottom: 12px; }
.adm-bar input { flex: 1; }
.adm-list { display: flex; flex-direction: column; gap: 8px; }
.adm-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 110px 70px 70px auto; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 14px;
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.adm-row.banned { box-shadow: inset 0 0 0 1px rgba(255,77,94,.45); background: linear-gradient(90deg, rgba(255,77,94,.07), var(--panel) 40%); }
.adm-av { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font: 800 15px var(--display); color: #0b0d13; background: var(--ac); }
.adm-who { min-width: 0; }
.adm-who b { display: flex; align-items: center; gap: 8px; font: 700 15px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-who small { color: var(--dim); font-size: 12px; }
.adm-tag { font: 700 10px var(--body); font-style: normal; text-transform: uppercase; letter-spacing: .08em; padding: 3px 7px; border-radius: 6px; background: rgba(var(--gold-rgb),.15); color: var(--gold); }
.adm-tag.bad { background: rgba(255,77,94,.15); color: var(--err); }
.adm-num b { font: 700 14px var(--mono); white-space: nowrap; }
.adm-acts { display: flex; gap: 6px; justify-content: flex-end; }
.btn.adm-ban { background: rgba(255,77,94,.14); color: var(--err); box-shadow: inset 0 0 0 1px rgba(255,77,94,.4); }
.btn.adm-ban:hover { background: rgba(255,77,94,.24); }
.adm-form { display: flex; flex-direction: column; gap: 6px; text-align: left; max-width: 420px; margin: 0 auto; }
.adm-form label, .cr-fields label { display: flex; flex-direction: column; gap: 6px; font: 600 12px var(--body); color: var(--mute); }
.adm-code { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line2); }
.adm-code code { font: 700 20px var(--mono); color: var(--ok); letter-spacing: .06em; word-break: break-all; }
.adm-code.big code { font-size: 26px; }
.cr-new { padding: 22px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 8px; }
.cr-fields { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 12px; align-items: end; }
.cr-in { position: relative; display: flex; align-items: center; }
.cr-in i { position: absolute; left: 13px; font: 700 15px var(--mono); font-style: normal; color: var(--ok); }
.cr-in i + input { padding-left: 28px; }
.cr-in input { font-size: 16px; height: 50px; }
.cr-out { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.cr-out .adm-code { justify-content: space-between; }
.cr-row { grid-template-columns: minmax(0, 1fr) 100px 70px 170px auto; }
.cr-row.used { opacity: .55; }
.cr-code { font: 700 15px var(--mono); color: var(--ok); letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .adm-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .adm-row .adm-num { display: none; }
  .adm-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .cr-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .cr-row .adm-num:not(.wide) { display: flex; }
  .cr-row .adm-num.wide { display: none; }
  .cr-fields { grid-template-columns: 1fr 1fr; } .cr-fields .btn { grid-column: 1 / -1; }
  .adm-stats { grid-template-columns: 1fr 1fr 1fr; } .adm-stats div { padding: 10px 12px; } .adm-stats b { font-size: 16px; }
  .adm-code { flex-direction: column; } .adm-code.big code { font-size: 20px; }
}
.adm-inv { flex: 1; overflow: auto; min-height: 200px; }
.adm-inv .pl-items { padding: 16px 20px; }
.adm-it { position: relative; }
.adm-it .bit { height: 100%; }
.adm-it.locked .bit { box-shadow: inset 0 0 0 1px var(--gold); }
.adm-it .adm-tag { position: absolute; top: 6px; left: 6px; z-index: 2; }
.adm-quick { display: flex; gap: 6px; margin-top: 4px; }
.adm-form .mute b { color: var(--text); font-family: var(--mono); }
@media (max-width: 900px) { .adm-acts { flex-wrap: wrap; } }

/* ── Uzura (FN, MW, FT, WW, BS) ── */
.wear { display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 5px; font: 700 10px/1.4 var(--mono); font-style: normal; letter-spacing: .04em;
  vertical-align: 2px; color: var(--wc); background: color-mix(in srgb, var(--wc) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wc) 35%, transparent); }
.wear.w-fn { --wc: #3ddc97; } .wear.w-mw { --wc: #8fd14f; } .wear.w-ft { --wc: #ffd36b; } .wear.w-ww { --wc: #ff9a3c; } .wear.w-bs { --wc: #ff6b6b; }
.rv-wear { display: block; margin-top: 6px; font: 600 15px var(--body); letter-spacing: 0; color: var(--mute); }
.wear-note { margin: -6px 0 14px; }

/* ── Jester Mode ── */
.jester { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px;
  font: 700 13px var(--display); color: var(--mute); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line2); transition: color .2s, background .2s, box-shadow .2s; }
.jester svg { width: 20px; height: 20px; }
.jester:hover { color: var(--text); }
.jester.on { color: #e7b8ff; background: rgba(168,85,247,.16); box-shadow: inset 0 0 0 1.5px #a855f7, 0 0 24px -8px #a855f7; }
.jester-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px); z-index: 10; width: max-content; max-width: 240px; padding: 9px 12px; border-radius: 9px;
  background: #0b0d13; box-shadow: inset 0 0 0 1px var(--line2), 0 12px 30px -10px #000; font: 500 13px/1.35 var(--body); color: var(--text); text-align: left;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.jester-tip b { display: block; font: 700 13px var(--display); color: #c084fc; }
.jester:hover .jester-tip, .jester:focus-visible .jester-tip { opacity: 1; transform: translate(-50%, 0); }
.jester-on { color: #c084fc; }
.cb-jester { margin-top: 16px; width: 100%; justify-content: flex-start; }
.cb-jester small { margin-left: auto; font: 700 11px var(--mono); text-transform: uppercase; }
.cb-jester .jester-tip { left: 0; transform: translate(0, 4px); } .cb-jester:hover .jester-tip { transform: none; }
.jester-badge { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #c084fc; background: rgba(168,85,247,.16); }
.lb-mode .jester-badge svg { width: 14px; height: 14px; }
.ar-jester svg { color: #c084fc !important; }
.ar-jester b { color: #c084fc; }

/* ── Boti in Case Battle ── */
.lb-av.bot, .av.bot { font-size: 9px; letter-spacing: .04em; background: repeating-linear-gradient(135deg, var(--ac) 0 6px, color-mix(in srgb, var(--ac) 75%, #000) 6px 12px); }
.pl.empty .btn svg { width: 18px; height: 18px; }

/* ── Arena: locurile cat timp battle-ul asteapta ── */
.pl.ws { position: relative; }
.ws-stage { display: grid; place-items: center; background: radial-gradient(60% 55% at 50% 50%, rgba(var(--gold-rgb),.06), transparent 70%), #0b0e15; }
.pl.ws:not(.taken) .ws-stage { background: radial-gradient(60% 55% at 50% 50%, rgba(255,255,255,.035), transparent 70%), #0b0e15; }
.ws-rings { position: absolute; width: min(300px, 90%); height: auto; inset: 0; margin: auto; fill: none; stroke: rgba(255,255,255,.05); stroke-width: 1; }
.ws-rings .ws-core { stroke: none; }
.ws-hex { position: relative; z-index: 3; width: 70px; height: 80px; display: grid; place-items: center; color: var(--mute);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--line2); }
.ws-hex::before { content: ''; position: absolute; inset: 2px; clip-path: inherit; background: #121722; }
.ws-hex svg { position: relative; width: 24px; height: 24px; }
.pl.ws.taken .ws-hex { background: var(--gold); color: var(--gold); }
.pl.ws.taken .ws-hex::before { background: linear-gradient(180deg, rgba(var(--gold-rgb),.18), #121722 80%); }
.pl.ws.taken .ws-hex svg { stroke-width: 2.6; }
.ws-foot { min-height: 64px; gap: 10px; }
.ws-foot > div { flex: 1; min-width: 0; }
.ws-wait { color: var(--mute); font: 600 14px var(--body); }
.ws-foot .btn { flex: none; }
.ws-mark { flex: 1; min-height: 180px; display: grid; place-items: center; color: rgba(255,255,255,.035); }
.ws-mark svg { width: 120px; height: 120px; stroke-width: 1.2; }
.pl.ws.me { box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.45); }
@media (max-width: 700px) { .ws-foot { flex-wrap: wrap; } .ws-mark { min-height: 80px; } .ws-mark svg { width: 70px; height: 70px; } }
.pl.ws:not(.taken) .varr { opacity: .3; filter: none; }

/* ── 🎃 Halloween Event ── */
:root { --hw: #ff8a2a; --hw2: #ffb547; --hwp: #7c3aed; }
.nav a.nav-hw { color: var(--hw); white-space: nowrap; }
.nav a.nav-hw:hover, .nav a.nav-hw.on { color: #ffc78a; }
.nav a.nav-hw.on::after { background: linear-gradient(90deg, var(--hw), var(--hwp)); box-shadow: 0 0 14px var(--hw); }
.hb-pts { position: relative; }
.hb-pts.bump { animation: hwBump .5s; }
.hb-pts.bump::after { content: attr(data-plus) ' 🎃'; position: absolute; right: 8px; top: -4px; font: 800 12px var(--display); color: var(--hw); pointer-events: none; animation: hwPlus 1.2s forwards; }
@keyframes hwBump { 30% { transform: scale(1.08); box-shadow: inset 0 0 0 1px var(--hw), 0 0 20px -4px var(--hw); } }
@keyframes hwPlus { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-22px); } }

.hw-promo { display: flex; align-items: center; gap: 16px; margin: 28px 0 6px; padding: 16px 20px; border-radius: 18px;
  background: linear-gradient(110deg, rgba(255,138,42,.18), rgba(124,58,237,.16) 70%), var(--panel); box-shadow: inset 0 0 0 1px rgba(255,138,42,.35); transition: filter .2s; }
.hw-promo:hover { filter: brightness(1.1); }
.hw-promo-ic { font-size: 34px; filter: drop-shadow(0 0 12px rgba(255,138,42,.6)); }
.hw-promo div { flex: 1; min-width: 0; } .hw-promo b { display: block; font: 800 18px var(--display); color: #ffc78a; } .hw-promo span { color: var(--mute); font-size: 14px; }
.hw-promo em { font: 800 18px var(--display); font-style: normal; color: var(--hw); white-space: nowrap; }

.hw-head { text-align: center; max-width: 720px; margin: 0 auto 26px; }
.hw-head .kicker { justify-content: center; color: var(--hw); } .hw-head .dot { background: var(--hw); box-shadow: 0 0 10px var(--hw); }
.hw-head h1 { font: 800 clamp(30px, 5vw, 46px)/1.1 var(--display); letter-spacing: -.02em;
  background: linear-gradient(90deg, #ffd36b, var(--hw) 45%, #c084fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hw-head p { color: var(--mute); margin-top: 10px; }
.hw-shop { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); border-radius: 24px; overflow: hidden;
  background: radial-gradient(80% 120% at 30% 0%, rgba(255,138,42,.16), transparent 60%), radial-gradient(70% 100% at 100% 100%, rgba(124,58,237,.18), transparent 60%), #120d14;
  box-shadow: inset 0 0 0 1px rgba(255,138,42,.25), 0 30px 80px -30px rgba(255,138,42,.35); }
.hw-wall { position: relative; padding: 26px 26px 18px; display: flex; flex-direction: column; gap: 14px; min-height: 340px;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 46px); }
.hw-sign { align-self: center; padding: 10px 22px; border-radius: 12px; font: 800 18px var(--display); color: #2a1300;
  background: linear-gradient(180deg, #ffc46b, var(--hw)); box-shadow: 0 8px 24px -8px var(--hw), inset 0 1px 0 rgba(255,255,255,.5); }
.hw-shelf { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: center; }
.hw-gun { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 8px; border-radius: 12px;
  background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--rc) 20%, transparent)); border-bottom: 3px solid #5a3a1e; }
.hw-gun .gun { width: 100%; height: 76px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.6)); }
.hw-gun small { font: 700 12px var(--mono); color: var(--hw2); }
.hw-wall-note { text-align: center; color: var(--dim); font-size: 12px; }
.hw-counter { display: flex; flex-direction: column; gap: 14px; padding: 26px; background: rgba(0,0,0,.28); border-left: 1px solid rgba(255,138,42,.15); }
.hw-reg { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #0a0f0c; box-shadow: inset 0 0 0 2px #2b3a30, inset 0 6px 20px rgba(0,0,0,.6); }
.hw-reg.ring { animation: hwRing .9s; }
@keyframes hwRing { 20%, 60% { box-shadow: inset 0 0 0 2px var(--hw), 0 0 30px -6px var(--hw); } 40% { transform: translateY(-2px); } }
.hw-led { font-size: 26px; }
.hw-screen { border: 0; background: none; padding: 0; height: auto; font: 800 40px var(--mono); color: #6dff8e; text-shadow: 0 0 12px rgba(109,255,142,.5); text-align: right; }
.hw-screen:focus { box-shadow: none; }
.hw-counter input[type=range] { padding: 0; height: 6px; accent-color: var(--hw); border: 0; background: none; }
.hw-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.hw-presets button { padding: 8px 0; border-radius: 9px; font: 700 13px var(--mono); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line2); }
.hw-presets button:hover:not(:disabled) { background: rgba(255,138,42,.15); color: #ffc78a; }
.hw-presets button:disabled { opacity: .35; cursor: default; }
.hw-val { color: var(--mute); font-size: 14px; text-align: center; } .hw-val b { color: var(--text); }
.hw-pay { height: 62px; border-radius: 16px; font: 800 22px var(--display); letter-spacing: .04em; color: #10240f;
  background: linear-gradient(180deg, #a6f37a, #5ec43c); box-shadow: 0 6px 0 #3a8a22, 0 14px 30px -10px #5ec43c, inset 0 1px 0 rgba(255,255,255,.5); transition: transform .1s, box-shadow .1s, filter .2s; }
.hw-pay:hover:not(:disabled) { filter: brightness(1.06); }
.hw-pay:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #3a8a22, 0 8px 20px -10px #5ec43c; }
.hw-pay:disabled { filter: grayscale(.8); opacity: .5; cursor: default; }
.hw-have { text-align: center; color: var(--mute); font-size: 13px; } .hw-have b { color: var(--hw); }
.hw-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 8px; }
.hw-how div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px; border-radius: 16px; text-align: center; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.hw-how span { font-size: 26px; } .hw-how b { font: 700 15px var(--display); } .hw-how small { color: var(--mute); }
@media (max-width: 900px) {
  .hw-shop { grid-template-columns: 1fr; } .hw-counter { border-left: 0; border-top: 1px solid rgba(255,138,42,.15); }
  .hw-wall { min-height: 0; } .hw-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hw-how { grid-template-columns: 1fr; } .hw-promo em { display: none; }
}
@media (max-width: 560px) { .hw-presets { grid-template-columns: repeat(3, 1fr); } .hw-screen { font-size: 32px; } .hw-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1300px) and (min-width: 901px) { .top { gap: 18px; } .nav a { padding: 0 10px; font-size: 13px; } .nav a.on::after { left: 10px; right: 10px; } }

/* ── Banner Halloween pe prima pagina ── */
.hwb { position: relative; overflow: hidden; height: 400px; border-radius: 22px; display: grid; place-items: center; text-align: center;
  background: linear-gradient(180deg, #170b2e 0%, #2a1550 55%, #3a1d4a 100%); box-shadow: inset 0 0 0 1px rgba(255,138,42,.25), 0 30px 80px -30px rgba(124,58,237,.5); }
.hwb-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.hwb-star { fill: #fff; opacity: .7; animation: hwTwinkle 3s infinite ease-in-out; }
@keyframes hwTwinkle { 50% { opacity: .15; } }
.hwb-bat { fill: #0c0718; }
.hwb-bats { animation: hwBats 7s infinite ease-in-out; }
@keyframes hwBats { 50% { transform: translate(-14px, 10px); } }
.hwb-jack .pb { fill: #d9581a; } .hwb-jack .pm { fill: #f07a26; } .hwb-jack .st { fill: none; stroke: #3d5a1e; stroke-width: 5; stroke-linecap: round; }
.hwb-jack .face { fill: #ffd36b; filter: drop-shadow(0 0 6px #ffb547); animation: hwFlicker 2.4s infinite; }
@keyframes hwFlicker { 45% { opacity: 1; } 50% { opacity: .65; } 55% { opacity: 1; } 80% { opacity: .85; } }
.hwb-fog ellipse { fill: #c9bbff; opacity: .08; animation: hwFog 12s infinite ease-in-out alternate; }
@keyframes hwFog { to { transform: translateX(40px); } }
.hwb-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 16px; }
.hwb-kicker { font: 700 12px var(--body); letter-spacing: .16em; text-transform: uppercase; color: #ffc78a; }
.hwb-title { display: flex; flex-direction: column; align-items: center; line-height: .95; }
.hwb-title span { font: 800 clamp(48px, 9vw, 104px)/.95 var(--display); letter-spacing: -.02em; text-transform: uppercase; color: #ffe8c2;
  -webkit-text-stroke: 2px #3a1a06; paint-order: stroke fill; text-shadow: 0 6px 0 #5a2a0a, 0 14px 30px rgba(0,0,0,.6); }
.hwb-title em { margin-top: 8px; padding: 6px 22px; border-radius: 10px; font: 800 clamp(18px, 3vw, 30px) var(--display); font-style: normal; text-transform: uppercase; letter-spacing: .06em;
  color: #2a1300; background: linear-gradient(180deg, #ffc46b, #ff8a2a); box-shadow: 0 5px 0 #a8501a, 0 12px 24px -8px #ff8a2a; transform: rotate(-2deg); }
.hwb-time { padding: 9px 18px; border-radius: 10px; font: 800 18px var(--display); letter-spacing: .06em; color: #fff; background: rgba(20,10,30,.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.hwb-btn { padding: 11px 20px; border-radius: 12px; font: 700 14px var(--display); color: #ffe8c2; background: rgba(255,138,42,.16); box-shadow: inset 0 0 0 1px rgba(255,138,42,.5); transition: background .2s; }
.hwb-btn:hover { background: rgba(255,138,42,.28); }
.hwb-hint { position: absolute; z-index: 2; bottom: 12px; left: 0; right: 0; font-size: 12px; color: rgba(255,255,255,.55); }
.hwb-egg { position: absolute; z-index: 3; left: 33.5%; bottom: 24px; width: 26px; height: 30px; padding: 0; opacity: .55; filter: brightness(.55) saturate(.7); transition: opacity .3s, filter .3s, transform .3s; }
.hwb-egg svg { width: 100%; height: 100%; overflow: visible; }
.hwb-egg:hover { opacity: 1; filter: none; transform: scale(1.25); }
.hwb-egg.found { opacity: .25; filter: grayscale(1); cursor: default; }
.hwb-egg.found:hover { transform: none; }

.hwc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 16px 0 10px; }
.hwc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px 0; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #3a2430, #4a3424 70%, #5a4120); box-shadow: inset 0 0 0 1px rgba(255,190,110,.45); transition: transform .2s, box-shadow .2s; }
.hwc:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #ffc46b, 0 18px 40px -16px rgba(255,138,42,.6); }
.hwc b { font: 700 15px var(--display); text-align: center; color: #fff3e0; }
.hwc-img { position: relative; width: 100%; height: 130px; display: grid; place-items: center; }
.hwc-glow { position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cc) 55%, transparent), transparent 70%); filter: blur(10px); }
.hwc-img img { position: relative; max-width: 92%; max-height: 120px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0,0,0,.6)); transition: transform .3s; }
.hwc:hover .hwc-img img { transform: scale(1.07) rotate(-3deg); }
.hwc-p { margin-top: 6px; padding: 8px 26px 9px; font: 700 14px var(--mono); color: #fff;
  background: #2a1a24; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
@media (max-width: 700px) {
  .hwb { height: 340px; } .hwb-time { font-size: 15px; }
  .hwc-row { grid-template-columns: repeat(2, 1fr); gap: 10px; } .hwc-img { height: 100px; } .hwc-img img { max-height: 92px; }
  .hwb-egg { left: 12%; }
}

/* ── 3v3: 6 locuri ── */
.lb-seats.n6 .lb-av, .lb-seats.n6 .lb-plus { width: 28px; height: 28px; }
.lb-seats.n6 .lb-av { font-size: 11px; } .lb-seats.n6 .lb-av.me, .lb-seats.n6 .lb-av.bot { font-size: 8px; }
.ar-cols.n6 { gap: 8px; }
.ar-cols.n6 .vit .gun { width: 120px; height: 80px; }
.ar-cols.n6 .vit .hex { width: 70px; height: 80px; }
.ar-cols.n6 .pl-h { padding: 10px 12px; }
.ar-cols.n6 .ws-hex { width: 58px; height: 66px; }
@media (max-width: 1250px) and (min-width: 701px) {
  .ar-cols.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .ar-cols.n6.teams .pl.ts-end { margin-right: 0; }
}