/* play.retro.mn — shared theme.
   Same design language as retro.mn/market (square corners, Unbounded display,
   JetBrains Mono for numbers) so the two sites read as one product, with gold
   reserved for anything that is money. */

:root{
  --bg:#0f161c; --bg2:#171f26; --bg3:#1d262e; --card:#141c23;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
  --txt:#eef2f5; --sub:#8f9aa4; --muted:#5b6670;
  --accent:#22e58c; --gold:#ffce54; --red:#ff5a74; --blue:#5b9dff;
  --amber:#ffb454; --pink:#ff5a9e; --teal:#37d3c4; --purple:#a78bfa;
  --ct:#5b9dff; --t:#ffb454;
  --sb:70px; --sb-open:230px; --wrapw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:'Inter',system-ui,sans-serif;
  line-height:1.5;font-size:15px;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(34,229,140,.22);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)}
.mono{font-family:'JetBrains Mono',monospace}
img{display:block;max-width:100%}

/* ── background ─────────────────────────────────────────────────────────── */
.bgfx{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:
  radial-gradient(1300px 700px at 84% -18%,rgba(255,206,84,.05),transparent 58%),
  radial-gradient(1000px 620px at 6% 4%,rgba(34,229,140,.045),transparent 55%)}
.bgfx::before{content:"";position:absolute;inset:-2px;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:34px 34px;
  mask:radial-gradient(1100px 700px at 60% 0%,#000,transparent 78%)}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;will-change:transform}
.orb.a{width:420px;height:420px;background:rgba(255,206,84,.14);top:-120px;right:-60px;animation:float1 22s ease-in-out infinite}
.orb.b{width:360px;height:360px;background:rgba(34,229,140,.13);bottom:-140px;left:6%;animation:float2 26s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,50px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,-40px)}}

/* ── sidebar ────────────────────────────────────────────────────────────── */
.sb{position:fixed;top:0;left:0;bottom:0;width:var(--sb);z-index:60;background:#111921;
  border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 0;
  transition:width .26s cubic-bezier(.4,0,.2,1);overflow:hidden}
.sb:hover{width:var(--sb-open);box-shadow:24px 0 60px rgba(0,0,0,.5)}
.sb-logo{display:flex;align-items:center;gap:12px;padding:6px 20px 16px;height:48px}
.sb-logo img{width:28px;height:28px;object-fit:contain;flex:0 0 auto}
.sb-logo .wm{font-family:'Unbounded';font-weight:700;font-size:.9rem;letter-spacing:.4px;
  white-space:nowrap;opacity:0;transform:translateX(-6px);transition:.26s}
.sb-logo .wm b{color:var(--accent)}
.sb:hover .sb-logo .wm{opacity:1;transform:none}
.sb-nav{display:flex;flex-direction:column;gap:3px;padding:8px 11px;flex:1}
.sb-nav .gap{flex:1}
.sb-i{display:flex;align-items:center;gap:15px;height:44px;padding:0 11px;color:var(--sub);
  position:relative;cursor:pointer;transition:.18s;white-space:nowrap}
.sb-i svg{width:19px;height:19px;flex:0 0 auto;stroke-width:2}
.sb-i .t{font-size:.86rem;font-weight:500;opacity:0;transform:translateX(-6px);transition:.26s}
.sb:hover .sb-i .t{opacity:1;transform:none}
.sb-i:hover{background:rgba(255,255,255,.05);color:var(--txt)}
.sb-i.on{color:var(--accent);background:rgba(34,229,140,.08)}
.sb-i.on::before{content:"";position:absolute;left:-11px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;background:var(--accent)}

/* ── frame ──────────────────────────────────────────────────────────────── */
.wrap{margin-left:var(--sb);min-height:100vh}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;height:60px;
  padding:0 clamp(16px,3vw,34px);background:rgba(11,14,19,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.tb-spacer{flex:1}
.page{max-width:var(--wrapw);margin:0 auto;padding:26px clamp(16px,3vw,34px) 70px}

.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px;background:var(--bg2);
  border:1px solid var(--line);font-size:.8rem;font-weight:500;color:var(--sub)}
.chip svg{width:14px;height:14px}
.chip img{width:22px;height:22px}
.chip.gold{border-color:rgba(255,206,84,.3);color:var(--gold);background:rgba(255,206,84,.07)}
.chip.gold b{font-family:'JetBrains Mono';color:var(--gold)}

/* ── page header ────────────────────────────────────────────────────────── */
.page-h{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.head-l{display:flex;align-items:center;gap:16px}
.head-ico{width:54px;height:54px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(34,229,140,.2),rgba(34,229,140,.02));
  border:1px solid rgba(34,229,140,.34);box-shadow:0 10px 30px rgba(34,229,140,.14)}
.head-ico svg{width:27px;height:27px;color:var(--accent)}
.page-h h1{font-family:'Unbounded';font-weight:700;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.5px}
.page-h .sub{color:var(--sub);font-size:.86rem;margin-top:5px;max-width:520px}

/* ── cards / panels ─────────────────────────────────────────────────────── */
.panel{background:var(--card);border:1px solid var(--line);padding:20px}
.panel-h{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.panel-h h2{font-family:'Unbounded';font-weight:600;font-size:.98rem;letter-spacing:-.2px}
.panel-h svg{width:17px;height:17px;color:var(--sub)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}

.lbl{font-family:'JetBrains Mono';font-size:.55rem;letter-spacing:1.7px;text-transform:uppercase;color:var(--muted)}
.val{font-family:'Unbounded';font-weight:600;font-size:1.15rem;line-height:1.15;margin-top:4px}
.val.gold{color:var(--gold)}
.val.green{color:var(--accent)}
.val.red{color:var(--red)}

/* ── balance card ───────────────────────────────────────────────────────── */
.bal{position:relative;display:flex;align-items:center;gap:15px;min-height:64px;padding:12px 18px;
  background:linear-gradient(150deg,rgba(255,206,84,.1),var(--card) 60%);
  border:1px solid rgba(255,206,84,.22);overflow:hidden}
.bal::before{content:"";position:absolute;top:-40px;right:-20px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,206,84,.2),transparent 70%)}
.bal .wico{width:38px;height:38px;display:grid;place-items:center;background:rgba(255,206,84,.14);
  color:var(--gold);flex:0 0 auto}
.bal .wico svg{width:20px;height:20px}
.bal .locked{font-size:.72rem;color:var(--amber);margin-top:3px}

/* ── tier badge ─────────────────────────────────────────────────────────── */
/* Skewed plate, deliberately reminiscent of the CS2 Premier badge already used
   on retro.mn so the bracket reads as "rank" instantly. Colour runs from gold
   at 1.1 down to grey at 2.4. */
.tier{display:inline-flex;align-items:center;justify-content:center;min-width:66px;height:30px;
  padding:0 12px;transform:skewX(-11deg);font-family:'JetBrains Mono';font-weight:700;font-size:.92rem;
  letter-spacing:.5px;border:1px solid;position:relative;overflow:hidden}
.tier span{transform:skewX(11deg)}
.tier::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(
  115deg,transparent 0 6px,rgba(255,255,255,.05) 6px 7px)}
.tier.lg{min-width:96px;height:42px;font-size:1.25rem}
.t-1-1{color:#ffd76e;border-color:rgba(255,215,110,.55);background:rgba(255,215,110,.13)}
.t-1-2{color:#ffb454;border-color:rgba(255,180,84,.5); background:rgba(255,180,84,.12)}
.t-1-3{color:#ff8f6e;border-color:rgba(255,143,110,.5);background:rgba(255,143,110,.12)}
.t-1-4{color:#ff5a9e;border-color:rgba(255,90,158,.5); background:rgba(255,90,158,.12)}
.t-2-1{color:#a78bfa;border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.12)}
.t-2-2{color:#5b9dff;border-color:rgba(91,157,255,.5); background:rgba(91,157,255,.12)}
.t-2-3{color:#37d3c4;border-color:rgba(55,211,196,.5); background:rgba(55,211,196,.12)}
.t-2-4{color:#8f9aa4;border-color:rgba(143,154,164,.4);background:rgba(143,154,164,.1)}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 22px;
  background:var(--bg3);border:1px solid var(--line2);font-weight:600;font-size:.88rem;
  cursor:pointer;transition:.16s;white-space:nowrap}
.btn:hover{background:#26313a;border-color:var(--line2)}
.btn svg{width:17px;height:17px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#06120c}
.btn.primary:hover{background:#3af09e;box-shadow:0 8px 26px rgba(34,229,140,.28)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#251c00}
.btn.gold:hover{background:#ffd971;box-shadow:0 8px 26px rgba(255,206,84,.28)}
.btn.ghost{background:transparent}
.btn.danger{background:transparent;border-color:rgba(255,90,116,.4);color:var(--red)}
.btn.danger:hover{background:rgba(255,90,116,.1)}
.btn.lg{height:54px;padding:0 34px;font-size:.98rem}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover{background:var(--bg3)}

/* ── checklist (eligibility gate) ───────────────────────────────────────── */
.chk{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.chk:last-child{border-bottom:0}
.chk .ic{width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center;font-size:.8rem;font-weight:700}
.chk.ok .ic{background:rgba(34,229,140,.14);color:var(--accent)}
.chk.no .ic{background:rgba(255,90,116,.14);color:var(--red)}
.chk .tx{font-size:.87rem}
.chk .tx .fix{display:inline-block;margin-top:4px;font-size:.79rem;color:var(--accent);font-weight:600}
.chk.no .tx{color:var(--sub)}

/* ── misc ───────────────────────────────────────────────────────────────── */
.note{display:flex;gap:11px;padding:14px 16px;background:rgba(91,157,255,.07);
  border:1px solid rgba(91,157,255,.22);font-size:.84rem;color:var(--sub)}
.note.warn{background:rgba(255,180,84,.07);border-color:rgba(255,180,84,.24)}
.note.danger{background:rgba(255,90,116,.07);border-color:rgba(255,90,116,.24)}
.note svg{width:18px;height:18px;flex:0 0 auto;color:var(--blue);margin-top:1px}
.note.warn svg{color:var(--amber)}
.note.danger svg{color:var(--red)}
.note b{color:var(--txt)}

.empty{text-align:center;padding:52px 20px;color:var(--muted);font-size:.88rem}
.empty svg{width:38px;height:38px;margin:0 auto 14px;opacity:.4}

table.tbl{width:100%;border-collapse:collapse;font-size:.85rem}
table.tbl th{text-align:left;padding:10px 12px;font-family:'JetBrains Mono';font-size:.58rem;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
table.tbl td{padding:12px;border-bottom:1px solid var(--line)}
table.tbl tr:last-child td{border-bottom:0}
.pos{color:var(--accent)} .neg{color:var(--red)}

.spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:760px){
  :root{--sb:0px}
  .sb{transform:translateX(-100%);width:var(--sb-open)}
  .sb.open{transform:none}
  .wrap{margin-left:0}
}