/* ════════════════════════════════════════════════════════════════════════════
   MARKET + BACKPACK (INVENTORY) + CHAMPION SKIN-PICKER
   Uses the site design tokens (--bg/--card/--p/--gold/--t1…). Self-contained so it
   can be dropped in without touching style.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* Rarity accents (shared by every skin card surface) */
.sk-common    { --rk:#7e8aa3; --rkglow:rgba(176,164,140,.20); }
.sk-uncommon  { --rk:#56c1d6; --rkglow:rgba(86,193,214,.22); }
.sk-rare      { --rk:#5a8dee; --rkglow:rgba(90,141,238,.24); }
.sk-epic      { --rk:#b06cff; --rkglow:rgba(176,108,255,.26); }
.sk-legendary { --rk:#eeb351; --rkglow:rgba(238,179,81,.30); }
.sk-mythic    { --rk:#ef4d6b; --rkglow:rgba(239,77,107,.32); }

/* ── Page intro / toolbar ─────────────────────────────────────────────────── */
.mkt-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
/* No font-size here. This rule used to set clamp(30px,5vw,46px), which beat .page-title and left the
   Market as the one page whose heading was 46px against 72px everywhere else — reported as looking
   like a different site. Spacing and family stay; the size comes from .page-title like the rest. */
.mkt-head h1{ letter-spacing:.02em; margin:.1em 0 0; line-height:1; color:var(--t1); }
.mkt-head .eyebrow{ color:var(--p3); }
.mkt-stat-row{ display:flex; gap:10px; flex-wrap:wrap; }
.mkt-stat{ background:linear-gradient(180deg,rgba(29,34,51,.7),rgba(16,19,30,.7)); border:1px solid var(--ln); border-radius:14px; padding:10px 14px; min-width:104px; }
.mkt-stat b{ display:flex; align-items:center; gap:5px; font-size:18px; color:var(--gold2); font-weight:800; }
.mkt-stat small{ color:var(--t3); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }

.mkt-toolbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:20px; }
.mkt-search{ position:relative; flex:1 1 280px; }
.mkt-search input{ width:100%; background:rgba(0,0,0,.34); border:1px solid var(--ln2); border-radius:12px; color:var(--t1); font:600 15px var(--fu); padding:12px 14px 12px 42px; outline:none; transition:border-color .15s, box-shadow .15s; }
.mkt-search input:focus{ border-color:var(--p); box-shadow:0 0 0 3px rgba(238,179,81,.16); }
.mkt-search svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--t3); }
.mkt-sync{ display:inline-flex; align-items:center; gap:8px; background:rgba(238,179,81,.10); border:1px solid rgba(238,179,81,.34); color:var(--p3); font:700 13px var(--fu); padding:11px 16px; border-radius:12px; cursor:pointer; transition:background .15s, transform .1s; }
.mkt-sync:hover{ background:rgba(238,179,81,.18); }
.mkt-sync:active{ transform:scale(.97); }
.mkt-sync.spin svg{ animation:mktspin 1s linear infinite; }
@keyframes mktspin{ to{ transform:rotate(360deg); } }
.mkt-live{ display:inline-flex; align-items:center; gap:7px; color:var(--t2); font-size:12.5px; font-weight:600; }
.mkt-live i{ width:8px; height:8px; border-radius:50%; background:var(--grn); box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:mktpulse 1.8s ease-out infinite; }
@keyframes mktpulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5);} 70%{ box-shadow:0 0 0 7px rgba(34,197,94,0);} 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0);} }

/* ── Skin grid + card ─────────────────────────────────────────────────────── */
.skin-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:15px; }
.skin-card{ position:relative; display:flex; flex-direction:column; background:linear-gradient(180deg,rgba(29,34,51,.74),rgba(16,19,30,.82)); border:1px solid var(--ln); border-radius:16px; overflow:hidden; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.skin-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--rk,#7e8aa3); opacity:.9; }
.skin-card:hover{ transform:translateY(-4px); border-color:var(--rk,var(--ln2)); box-shadow:0 16px 36px rgba(0,0,0,.5), 0 0 0 1px var(--rkglow,transparent); }
.skin-img{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:14px; background:radial-gradient(70% 70% at 50% 38%, var(--rkglow,rgba(176,164,140,.18)) 0%, transparent 72%); }
.skin-img img{ max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.skin-ph{ width:74%; height:74%; opacity:.9; }
/* prominent rarity-bordered coin price badge on the skin image (build 322) */
.skin-price-badge{ position:absolute; top:9px; left:9px; z-index:2; display:inline-flex; align-items:baseline; gap:3px; padding:4px 9px; border-radius:9px; font:800 13px var(--fu); color:#ffe7a6; background:rgba(10,12,18,.82); border:1px solid var(--rk,rgba(238,179,81,.42)); box-shadow:0 3px 10px rgba(0,0,0,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.skin-price-badge .coin-ico{ width:13px !important; height:13px !important; margin-right:0 !important; align-self:center; }
.skin-price-badge .coin-c{ opacity:.5; }
.skin-meta{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.skin-name{ font:600 13.5px/1.3 var(--fu); color:var(--t1); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.skin-price{ display:flex; align-items:center; gap:5px; font:800 16px var(--fu); color:var(--gold2); margin-top:auto; }
.skin-price .skin-usd{ color:var(--t3); font-size:11px; font-weight:600; margin-left:auto; }
.skin-btn{ margin-top:auto; width:100%; border:none; border-radius:10px; padding:9px 10px; font:800 13px var(--fu); letter-spacing:.03em; cursor:pointer; color:#1a130a; background:linear-gradient(180deg,var(--p3),var(--p)); transition:filter .15s, transform .1s; display:flex; align-items:center; justify-content:center; gap:6px; }
.skin-btn:hover{ filter:brightness(1.08); }
.skin-btn:active{ transform:scale(.97); }
.skin-btn:disabled{ opacity:.5; cursor:not-allowed; filter:grayscale(.4); }
.skin-btn.sell{ color:var(--t1); background:rgba(239,77,107,.16); border:1px solid rgba(239,77,107,.4); }
.skin-btn.sell:hover{ background:rgba(239,77,107,.26); }
.skin-tag{ position:absolute; top:9px; right:9px; z-index:2; font:800 9.5px var(--fu); letter-spacing:.1em; text-transform:uppercase; padding:4px 7px; border-radius:7px; background:rgba(0,0,0,.55); color:var(--rk,#cdd5e6); border:1px solid var(--rk,var(--ln)); }
.skin-tag.staked{ color:#f4cd84; border-color:rgba(238,179,81,.5); background:rgba(238,179,81,.14); }
.skin-tag.spent { color:#fca5a5; border-color:rgba(239,68,68,.4);  background:rgba(239,68,68,.12);  }

/* Generic loading / empty / pager */
.mkt-grid-msg{ grid-column:1/-1; text-align:center; color:var(--t3); padding:40px 0; font:600 14px var(--fu); }
.skin-skel{ aspect-ratio:1/1.5; border-radius:16px; background:linear-gradient(110deg,rgba(255,255,255,.03) 30%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.03) 70%); background-size:220% 100%; animation:skel 1.3s ease-in-out infinite; }
@keyframes skel{ to{ background-position:-220% 0; } }
.mkt-pager{ display:flex; justify-content:center; gap:10px; margin-top:24px; }
.mkt-pager button{ background:rgba(0,0,0,.34); border:1px solid var(--ln2); color:var(--t1); font:700 13px var(--fu); padding:9px 18px; border-radius:10px; cursor:pointer; }
.mkt-pager button:disabled{ opacity:.4; cursor:not-allowed; }
.mkt-pager span{ color:var(--t2); font:600 13px var(--fu); align-self:center; }

/* ── Champion skin-picker (replaces the coin stake box) ───────────────────── */
.skin-stake{ display:flex; flex-direction:column; gap:10px; }
.skin-stake-label{ font:700 12px var(--fu); letter-spacing:.06em; text-transform:uppercase; color:var(--t2); }
.skin-stake-sel{ display:flex; align-items:center; gap:11px; background:rgba(0,0,0,.32); border:1px solid var(--ln2); border-radius:14px; padding:10px 12px; cursor:pointer; transition:border-color .15s; min-height:64px; }
.skin-stake-sel:hover{ border-color:var(--p); }
.skin-stake-sel .ss-thumb{ width:46px; height:46px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; background:radial-gradient(70% 70% at 50% 40%, var(--rkglow,rgba(176,164,140,.2)) 0%, transparent 72%); border:1px solid var(--rk,var(--ln)); overflow:hidden; }
.skin-stake-sel .ss-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.skin-stake-sel .ss-info{ flex:1; min-width:0; }
.skin-stake-sel .ss-name{ font:600 14px var(--fu); color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.skin-stake-sel .ss-val{ display:flex; align-items:center; gap:5px; font:800 15px var(--fu); color:var(--gold2); }
.skin-stake-sel .ss-empty{ color:var(--t3); font:600 14px var(--fu); }
/* Empty state ("Select a skin…"): drop the left thumb box + its glow so only the label shows.
   Once a skin is picked the thumb gains a sk-<rarity> class and reappears with the skin image. */
.skin-stake-sel .ss-thumb:not([class*="sk-"]){ display:none !important; }
.skin-stake-sel:has(.ss-empty){ min-height:52px; }
.skin-stake-sel .ss-caret{ color:var(--t3); flex:none; }

/* Picker dropdown panel */
.skin-pop{ position:relative; }
.skin-pop-menu{ position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:40; background:linear-gradient(180deg,rgba(24,28,42,.98),rgba(14,17,26,.98)); border:1px solid var(--ln2); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.6); padding:8px; max-height:320px; overflow:auto; }
.skin-pop-menu[hidden]{ display:none; }
.sp-item{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; cursor:pointer; transition:background .12s; }
.sp-item:hover{ background:rgba(238,179,81,.10); }
.sp-item .sp-thumb{ width:40px; height:40px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--rk,var(--ln)); background:radial-gradient(70% 70% at 50% 40%, var(--rkglow,rgba(176,164,140,.2)) 0%, transparent 72%); }
.sp-item .sp-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.sp-item .sp-name{ flex:1; min-width:0; font:600 13.5px var(--fu); color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-item .sp-val{ display:flex; align-items:center; gap:4px; font:800 14px var(--fu); color:var(--gold2); flex:none; }
.skin-pop-empty{ padding:22px 14px; text-align:center; color:var(--t3); font:600 13px var(--fu); }
.skin-pop-empty a{ color:var(--p3); font-weight:800; text-decoration:none; }
.skin-pop-empty a:hover{ text-decoration:underline; }

@media (max-width:560px){
  .skin-grid{ grid-template-columns:repeat(auto-fill, minmax(152px,1fr)); gap:12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BACKPACK — header bag icon + badge + skins modal (global, all pages)
   ═══════════════════════════════════════════════════════════════════════ */
.canta-btn{ position:relative; width:40px; height:40px; border-radius:10px; border:1px solid var(--rust-ln,var(--ln2)); background:rgba(255,255,255,.04); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:none; transition:background .15s, border-color .15s; }
.canta-btn:hover{ background:rgba(238,179,81,.10); border-color:var(--p,#eeb351); }
.canta-btn .canta-ico{ display:inline-flex; align-items:center; justify-content:center; }
.canta-btn .canta-ico svg{ width:20px; height:20px; color:var(--t2); transition:color .15s; }
.canta-btn:hover .canta-ico svg{ color:var(--p3,#f4cd84); }
.canta-badge{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:linear-gradient(145deg,var(--gold2,#f4cd84),var(--gold,#eeb351)); color:#231a02; font:800 11px/18px var(--fu,sans-serif); text-align:center; box-shadow:0 0 0 2px var(--rust-bg2,#0a0c15), 0 2px 6px rgba(238,179,81,.5); }
.canta-badge[hidden]{ display:none; }

/* modal: wider + left-aligned, with a scrollable skin grid */
.canta-modal__card{ max-width:640px; width:100%; padding:0; text-align:left; overflow:hidden; display:flex; flex-direction:column; max-height:min(82vh,720px); }
.canta-modal__head{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px 14px; border-bottom:1px solid var(--ln); flex-wrap:wrap; }
.canta-modal__title-wrap{ display:flex; align-items:center; gap:12px; }
.canta-modal__ico{ width:42px; height:42px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; background:radial-gradient(70% 70% at 50% 35%, rgba(238,179,81,.22), transparent 72%); border:1px solid rgba(238,179,81,.4); }
.canta-modal__ico svg{ width:22px; height:22px; color:var(--p3,#f4cd84); }
.canta-modal__card .app-modal__title{ margin:0; font-size:24px; }
.canta-modal__sub{ font:600 12.5px var(--fu); color:var(--t3); margin-top:2px; }
.canta-modal__sub .coin-amt,.canta-modal__sub b{ color:var(--gold2); }
.canta-modal__tabs{ display:inline-flex; gap:4px; background:rgba(0,0,0,.3); border:1px solid var(--ln); border-radius:11px; padding:3px; }
.canta-tab{ border:0; background:transparent; color:var(--t2); font:700 12px var(--fu); letter-spacing:.04em; text-transform:uppercase; padding:7px 13px; border-radius:8px; cursor:pointer; transition:background .15s,color .15s; }
.canta-tab:hover{ color:var(--t1); }
.canta-tab.active{ background:linear-gradient(145deg,var(--p,#eeb351),var(--p3,#f4cd84)); color:#231a02; }
.canta-modal__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; padding:18px 20px; overflow-y:auto; flex:1 1 auto; min-height:0; }
.canta-modal__loading,.canta-modal__empty{ grid-column:1/-1; text-align:center; color:var(--t3); font:600 14px var(--fu); padding:46px 16px; }
.canta-modal__empty a{ color:var(--p3); font-weight:800; text-decoration:none; }
.canta-modal__empty a:hover{ text-decoration:underline; }
.canta-modal__empty small{ color:var(--t3); font-weight:500; }
.canta-modal__foot{ padding:13px 20px; border-top:1px solid var(--ln); display:flex; justify-content:flex-end; }
.canta-modal__market{ display:inline-flex; align-items:center; gap:7px; color:var(--t2); font:700 13px var(--fu); text-decoration:none; padding:8px 14px; border:1px solid var(--ln2); border-radius:10px; transition:border-color .15s,color .15s; }
.canta-modal__market:hover{ color:var(--p3); border-color:var(--p); }
.canta-modal__market .nav-ico svg{ width:16px; height:16px; }

/* a skin card inside the modal */
.cm-card{ position:relative; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.18)); border:1px solid var(--ln2); border-radius:14px; padding:12px 11px 11px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.cm-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--rk,#7e8aa3); opacity:.9; }
.cm-card.dim{ opacity:.62; }
.cm-img{ height:78px; display:flex; align-items:center; justify-content:center; background:radial-gradient(72% 72% at 50% 38%, var(--rkglow,rgba(176,164,140,.18)) 0%, transparent 72%); border-radius:10px; }
.cm-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.cm-img .skin-ph{ width:48px; height:48px; opacity:.7; }
.cm-name{ font:600 13px var(--fu); color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-val{ display:flex; align-items:center; gap:5px; font:800 14px var(--fu); color:var(--gold2); }
.cm-tag{ font:800 10px var(--fu); letter-spacing:.05em; text-transform:uppercase; padding:4px 8px; border-radius:7px; align-self:flex-start; }
.cm-tag.staked{ color:#f4cd84; background:rgba(238,179,81,.14); }
.cm-tag.spent{ color:#ef9a9a; background:rgba(239,77,107,.14); }
.cm-tag.sold{ color:#9fb0c9; background:rgba(176,164,140,.16); }
.cm-actions{ display:flex; gap:7px; margin-top:2px; }
.cm-act{ flex:1; text-align:center; font:800 12px var(--fu); padding:8px 6px; border-radius:9px; cursor:pointer; border:1px solid transparent; text-decoration:none; transition:filter .15s, background .15s, border-color .15s; }
.cm-act.use{ background:linear-gradient(145deg,var(--p,#eeb351),var(--p3,#f4cd84)); color:#231a02; }
.cm-act.use:hover{ filter:brightness(1.08); }
.cm-act.sell{ background:rgba(255,255,255,.05); color:var(--t2); border-color:var(--ln2); }
.cm-act.sell:hover{ color:#fca5a5; border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.10); }
.cm-act.sell:disabled{ opacity:.6; cursor:default; }

@media (max-width:560px){
  .canta-modal__head{ gap:10px; }
  .canta-modal__grid{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; padding:14px; }
}

/* ── "Use a Skin" entry button (rustpot / coinflip / quickgame) ──────────────
   Gold-outline secondary action that sits beside each game's primary CTA so it
   reads as an alternative way in (stake a skin instead of coins). */
.btn-skin-stake{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 20px; border-radius:14px; cursor:pointer; white-space:nowrap;
  font:800 14px/1 var(--fu, 'Rajdhani', system-ui, sans-serif); letter-spacing:.02em;
  color:var(--gold, #eeb351);
  background:linear-gradient(180deg, rgba(238,179,81,.12), rgba(238,179,81,.04));
  border:1.5px solid rgba(238,179,81,.45);
  box-shadow:0 4px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
  transition:filter .15s, border-color .15s, transform .05s, background .15s, color .15s;
}
.btn-skin-stake:hover{
  border-color:var(--gold, #eeb351); color:var(--gold2, #f4cd84);
  background:linear-gradient(180deg, rgba(238,179,81,.20), rgba(238,179,81,.08));
}
.btn-skin-stake:active{ transform:translateY(1px); }
.btn-skin-stake svg{ stroke:currentColor; }
/* layout niceties per game */
.rp-join-bar .btn-skin-stake{ margin-top:10px; }
.qg-stake-row .btn-skin-stake{ height:48px; }
.cf-skin-btn{ width:100%; margin-top:8px; }
@media (max-width:720px){
  .rp-join-bar .btn-skin-stake{ width:100%; max-width:340px; }
  .qg-stake-row .btn-skin-stake{ flex:1 1 100%; margin-top:8px; }
}

/* ── Skin-only games: the skin button is now the PRIMARY call-to-action ─────────
   Filled gold (vs the gold-outline .btn-skin-stake) so it reads as the main action. */
.rp-skin-primary, .qg-skin-primary, .cf-skin-primary{
  color:#1a1205;
  background:linear-gradient(180deg,#ffd95e,#f0a92c);
  border:0;
  box-shadow:0 8px 22px rgba(240,169,44,.34), inset 0 1px 0 rgba(255,255,255,.25);
  font-weight:900; letter-spacing:.01em;
}
.rp-skin-primary:hover, .qg-skin-primary:hover, .cf-skin-primary:hover{
  filter:brightness(1.06);
  background:linear-gradient(180deg,#ffd95e,#f0a92c);
  color:#1a1205;
}
.rp-skin-primary{ font-size:17px; padding:14px 34px; border-radius:14px; }
.qg-skin-primary{ font-size:15px; padding:14px 22px; border-radius:14px; height:auto; }
.cf-skin-primary{ width:100%; font-size:16px; padding:14px 22px; border-radius:14px; margin-top:4px; }
.cf-skin-hint{ margin:8px 2px 2px; font-size:12.5px; color:var(--rk,#8a93a8); text-align:center; line-height:1.4; }
.qg-create-skin-row{ display:flex; flex-direction:column; align-items:stretch; gap:4px; }
.qg-create-skin-row .stake-bounds{ text-align:center; }
/* Quickgame skin-join button on each game card */
.qg-skin-join{ width:100%; justify-content:center; }

/* ── Staked-skin thumbnails shown in every game (next to the coin amount) ───── */
.rp-en-skin, .qg-seat-skin, .cf-game-skin, .champ-seat-skin{
  display:inline-block; vertical-align:middle; object-fit:contain;
  border-radius:6px; background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.08);
}
.rp-en-skin{ width:46px; height:46px; margin-right:8px; }
.qg-seat-skin{ width:52px; height:52px; margin-right:8px; }
.cf-game-skin{ width:54px; height:54px; margin-right:8px; }
.champ-seat-skin{ width:60px; height:60px; margin-right:8px; }
/* keep the coin amount + skin image on one centered line */
.rp-en-amt, .qg-seat-amt, .cf-game-wager{ display:inline-flex; align-items:center; gap:2px; }

/* ── Market sort dropdown (#6) ─────────────────────────────────────────────── */
.mkt-sort{
  appearance:none; -webkit-appearance:none;
  background:rgba(0,0,0,.34) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa6bd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center;
  border:1px solid var(--ln2,rgba(255,255,255,.12)); color:var(--t1,#e7edfa);
  font:600 13px var(--fu,inherit); padding:9px 30px 9px 12px; border-radius:10px; cursor:pointer;
}
.mkt-sort:hover{ border-color:rgba(238,179,81,.4); }
.mkt-sort:focus{ outline:none; border-color:var(--p3,#eeb351); }
.mkt-sort option{ background:#15171c; color:#e7edfa; }

/* ── Coinflip join-range hint (#7) ─────────────────────────────────────────── */
.cf-game-range{ font:600 11px var(--fu,inherit); color:var(--t3,#9aa6bd); text-align:center; margin:4px 0 2px; opacity:.9; }
.cf-game-range .coin-ico{ width:11px; height:11px; vertical-align:-1px; }

/* ── Multi-skin stake picker (#1) ──────────────────────────────────────────── */
.cm-card{ position:relative; }
.cm-card .cm-check{
  position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%;
  background:var(--p3,#eeb351); color:#1a1205; font:800 13px/22px var(--fu,inherit); text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.4); opacity:0; transform:scale(.4); transition:opacity .14s, transform .14s; pointer-events:none; z-index:3;
}
.cm-card.cm-sel .cm-check{ opacity:1; transform:scale(1); }
.cm-card.cm-sel{ outline:2px solid var(--p3,#eeb351); outline-offset:-1px; box-shadow:0 0 0 3px rgba(238,179,81,.22); }
.cm-selectable{ cursor:pointer; }
/* Backpack bulk-select toolbar (top-right of the modal head) (#backpack) */
.canta-modal__tools{ display:flex; align-items:center; gap:8px; margin-left:auto; margin-right:42px; }
.canta-tool{ appearance:none; border:1px solid var(--ln,rgba(255,255,255,.12)); background:rgba(255,255,255,.05); color:var(--t1,#e7edfa); font:700 13px var(--fu,inherit); padding:7px 13px; border-radius:9px; cursor:pointer; white-space:nowrap; transition:background .14s, border-color .14s, opacity .14s, filter .14s; }
.canta-tool:hover{ background:rgba(255,255,255,.1); }
.canta-tool--sell{ background:linear-gradient(180deg,#f3c64f,#e0a534); color:#1a1205; border-color:transparent; }
.canta-tool--sell:hover{ background:linear-gradient(180deg,#f3c64f,#e0a534); filter:none; }
.canta-tool--sell:disabled{ opacity:.45; cursor:default; filter:grayscale(.3); }
.canta-modal__foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.canta-modal__confirm{
  margin-left:auto; border:none; cursor:pointer; border-radius:11px; padding:11px 20px;
  font:800 14px var(--fu,inherit); color:#1a1205;
  background:linear-gradient(180deg,#f7d27a,#eeb351); box-shadow:0 4px 14px rgba(238,179,81,.3);
}
.canta-modal__confirm:disabled{ background:rgba(255,255,255,.07); color:var(--t3,#9aa6bd); cursor:not-allowed; box-shadow:none; }
.canta-modal__confirm:not(:disabled):hover{ filter:brightness(1.06); }

/* Multiple staked-skin thumbnails stacked on a game board (#1) */
.skin-stack{ display:inline-flex; align-items:center; gap:4px; position:relative; cursor:default; vertical-align:middle; }
.skin-stack .ss-th{ width:44px; height:44px; border:1.5px solid rgba(0,0,0,.55); border-radius:8px; background:rgba(0,0,0,.22); overflow:hidden; display:inline-flex; align-items:center; justify-content:center; transition:transform .12s; }
.skin-stack .ss-th img{ max-width:100%; max-height:100%; object-fit:contain; }
.skin-stack:hover .ss-th{ transform:translateY(-2px); }
.skin-stack-more{ font:800 12px var(--fu,inherit); color:var(--t2,#c2ccde); background:rgba(255,255,255,.08); border-radius:7px; padding:3px 7px; margin-left:2px; align-self:center; }
/* hover/focus list of every staked skin + price */
.skin-stack-tip{ position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) scale(.96); transform-origin:bottom center;
  min-width:180px; max-width:260px; max-height:240px; overflow-y:auto; background:var(--card,#161b27); border:1px solid var(--ln,#2a3142);
  border-radius:12px; padding:8px; box-shadow:0 14px 40px rgba(0,0,0,.5); opacity:0; pointer-events:none; visibility:hidden; transition:opacity .14s, transform .14s; z-index:999; }
.skin-stack:hover .skin-stack-tip, .skin-stack:focus .skin-stack-tip, .skin-stack:focus-within .skin-stack-tip{ opacity:1; transform:translateX(-50%) scale(1); visibility:visible; }
.skin-stack-tip::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--ln,#2a3142); }
.sst-row{ display:flex; align-items:center; gap:8px; padding:4px 5px; border-radius:7px; }
.sst-row + .sst-row{ margin-top:1px; }
.sst-row:hover{ background:rgba(255,255,255,.05); }
.sst-th{ width:30px; height:30px; flex:none; border-radius:5px; background:rgba(0,0,0,.25); overflow:hidden; display:inline-flex; align-items:center; justify-content:center; }
.sst-th img{ max-width:100%; max-height:100%; object-fit:contain; }
.sst-name{ flex:1; min-width:0; font:600 12px var(--fu,inherit); color:var(--t1,#e7edfa); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sst-val{ font:800 12px var(--fu,inherit); color:var(--gold2,#eeb351); display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }

/* Champion seat: staked-skin stack centered DIRECTLY under the player name (#3) */
.champ-seat-skins{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:4px; margin:6px auto 2px; max-width:200px; }
.champ-seat-skins:empty{ display:none; }
.champ-seat-skins .skin-stack .ss-th{ width:40px; height:40px; }

/* Market price-range filter (coin value) (#1) */
.mkt-range{ display:inline-flex; align-items:center; gap:5px; padding:0 10px; height:40px; border-radius:11px;
  background:var(--card2,rgba(255,255,255,.04)); border:1px solid var(--ln,rgba(255,255,255,.1)); flex:0 0 auto; }
.mkt-range .coin-ico{ width:15px; height:15px; opacity:.85; flex:0 0 auto; }
.mkt-range-in{ width:62px; height:26px; border:none; background:transparent; color:var(--t1,#e7edfa); font:700 13px var(--fu,inherit);
  text-align:center; outline:none; -moz-appearance:textfield; }
.mkt-range-in::-webkit-outer-spin-button, .mkt-range-in::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.mkt-range-in::placeholder{ color:var(--t3,#7e8aa3); font-weight:600; }
.mkt-range-sep{ color:var(--t3,#7e8aa3); font-weight:700; }
.mkt-range-clear{ width:20px; height:20px; flex:0 0 auto; border:none; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.08); color:var(--t2,#c2ccde); font:700 11px/1 var(--fu,inherit); display:inline-flex; align-items:center; justify-content:center; transition:background .14s, color .14s; }
.mkt-range-clear:hover{ background:rgba(255,90,90,.22); color:#ff8e8e; }
@media (max-width:640px){ .mkt-range{ order:3; } .mkt-range-in{ width:52px; } }

/* Champion: pot skins under the Prize Pool — same stack as other games (first 3 + "+N", names on
   hover). The hover list opens DOWNWARD here because the Prize Pool sits near the top (an upward
   tip would clip under the header). (#7) */
.champ-pot-skins{ display:flex; justify-content:center; align-items:center; margin-top:11px; overflow:visible; }
.champ-pot-skins:empty{ display:none; }
.champ-pot-skins .skin-stack{ flex-wrap:nowrap; }
.champ-pot-skins .skin-stack .ss-th{ width:42px; height:42px; }
.champ-pot-skins .skin-stack-tip{ bottom:auto; top:calc(100% + 8px); }
.champ-pot-skins .skin-stack-tip::after{ top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:var(--ln,#2a3142); }

/* ════════ Deposit / Withdraw — redesigned two-column checkout (#1) ════════ */
/* `overflow:hidden` here is for the desktop sheet's rounded corners. It also loads after
   patch94.css, so it was silently overriding the mobile rule that lets the card scroll — and on a
   phone the deposit and withdraw cards then clipped their own primary button out of reach
   (measured: card ended at y=848, "Continue to Send" sat at y=1099). Corners on a desktop are not
   worth a payment you cannot complete, so the clip is now desktop-only. */
.dw-modal .dw-card{ max-width:920px !important; width:min(96vw,920px) !important; padding:0 !important; }
@media (hover:hover) and (pointer:fine){
  .dw-modal .dw-card{ overflow:hidden; }
}
.dw-grid{ display:grid; grid-template-columns:320px 1fr; min-height:480px; }
.dw-side{ background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.18)); border-right:1px solid var(--ln,#262c3b); padding:18px 16px; display:flex; flex-direction:column; gap:14px; }
.dw-tabs{ display:flex; gap:6px; background:rgba(0,0,0,.3); border:1px solid var(--ln,#262c3b); border-radius:11px; padding:4px; }
.dw-tab{ flex:1; height:34px; border:0; border-radius:8px; background:transparent; color:var(--t2,#c2ccde); font-weight:800; font-size:13px; cursor:pointer; transition:background .15s, color .15s; }
.dw-tab.is-on{ background:rgba(255,255,255,.08); color:#fff; }
.dw-methods{ display:flex; flex-direction:column; gap:8px; }
.dw-mgroup{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--t3,#8a93a6); font-weight:800; margin:6px 2px 1px; }
.dw-mrow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dw-method{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:12px 13px; border-radius:12px; border:1px solid var(--ln,#262c3b); background:rgba(255,255,255,.02); color:var(--t1,#e7edfa); cursor:pointer; transition:border-color .15s, background .15s, transform .1s; }
.dw-method:hover{ border-color:rgba(238,179,81,.4); background:rgba(255,255,255,.045); }
.dw-method.is-sel{ border-color:rgba(238,179,81,.7); background:radial-gradient(120% 140% at 0% 0%, rgba(238,179,81,.12), rgba(238,179,81,.03)); box-shadow:inset 0 0 0 1px rgba(238,179,81,.25); }
.dw-method--sm{ flex-direction:column; gap:6px; text-align:center; padding:13px 8px; }
.dw-method.is-soon{ opacity:.5; cursor:not-allowed; }
.dw-mi{ width:38px; height:38px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(0,0,0,.3); font-size:20px; }
.dw-method--sm .dw-mi{ width:34px; height:34px; }
.dw-mi-crypto{ color:#f0b840; background:radial-gradient(70% 70% at 50% 35%, rgba(240,184,64,.22), transparent 72%); }
.dw-mt{ display:flex; flex-direction:column; gap:1px; line-height:1.2; min-width:0; }
.dw-mt b{ font-size:13.5px; font-weight:800; }
.dw-mt small{ font-size:11px; color:var(--t3,#8a93a6); }
.dw-ref{ margin-top:auto; padding-top:14px; border-top:1px solid var(--ln,#262c3b); }
.dw-ref-head{ font-size:12px; font-weight:800; color:var(--t1,#e7edfa); display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:8px; }
.dw-ref-bonus{ font-size:10.5px; font-weight:700; color:#f0b840; background:rgba(240,184,64,.12); border-radius:6px; padding:2px 7px; }
.dw-ref-row{ display:flex; gap:7px; }
.dw-ref-row input{ flex:1; min-width:0; height:38px; padding:0 12px; border-radius:9px; border:1px solid var(--ln,#262c3b); background:rgba(0,0,0,.32); color:#fff; font-size:13px; }
.dw-ref-apply{ height:38px; padding:0 16px; border:0; border-radius:9px; background:linear-gradient(180deg,#ffe39c,#e0a236); color:#2a1c04; font-weight:800; font-size:13px; cursor:pointer; flex:0 0 auto; }
.dw-ref-note{ font-size:11.5px; color:var(--t3,#8a93a6); margin-top:7px; min-height:14px; }
.dw-ref-note.on{ color:#5cf08f; }
.dw-main{ padding:22px 24px; display:flex; flex-direction:column; min-width:0; }
.dw-title{ margin:0 0 16px; font-size:19px; font-weight:800; color:#fff; }
.dw-selrow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.dw-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.dw-field>span{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--t3,#8a93a6); font-weight:700; }
.dw-select{ height:46px; padding:0 12px; border-radius:11px; border:1px solid var(--ln,#262c3b); background:rgba(0,0,0,.32) 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='%238a93a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; color:#fff; font-size:14px; font-weight:600; appearance:none; -webkit-appearance:none; cursor:pointer; }
.dw-addrbox{ display:flex; gap:16px; align-items:flex-start; padding:16px; border-radius:14px; border:1px solid var(--ln,#262c3b); background:rgba(0,0,0,.22); margin-bottom:14px; }
.dw-qr{ width:120px; height:120px; flex:0 0 auto; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.dw-qr img{ width:100%; height:100%; object-fit:contain; }
.dw-qr-ph{ color:#b9b9b9; font-weight:800; font-size:13px; letter-spacing:.1em; }
.dw-addr-info{ min-width:0; }
.dw-addr-title{ font-size:14px; font-weight:800; color:#fff; display:block; margin-bottom:4px; }
.dw-addr-sub{ font-size:12px; color:var(--t3,#8a93a6); line-height:1.45; margin:0 0 10px; }
.dw-min{ font-size:12px; color:var(--t2,#c2ccde); background:rgba(0,0,0,.3); border-radius:8px; padding:7px 10px; display:inline-flex; align-items:center; gap:5px; }
.dw-min .coin-ico{ width:14px; height:14px; }
.dw-addr-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.dw-addr-field>span{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--t3,#8a93a6); font-weight:700; }
.dw-addr-row{ display:flex; gap:8px; }
.dw-addr-row input{ flex:1; min-width:0; height:46px; padding:0 14px; border-radius:11px; border:1px solid var(--ln,#262c3b); background:rgba(0,0,0,.32); color:#fff; font-size:13.5px; font-family:var(--fm,monospace); letter-spacing:.01em; }
.dw-copy{ width:46px; height:46px; flex:0 0 auto; border-radius:11px; border:1px solid var(--ln,#262c3b); background:rgba(255,255,255,.04); color:var(--t2,#c2ccde); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
.dw-copy:hover{ background:rgba(238,179,81,.14); color:#f0b840; }
.dw-calc{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:14px 16px; border-radius:13px; border:1px solid var(--ln,#262c3b); background:rgba(0,0,0,.22); margin-bottom:16px; }
.dw-calc-side{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.dw-calc-lbl{ font-size:11px; color:var(--t3,#8a93a6); font-weight:700; }
.dw-calc-val{ display:flex; align-items:center; gap:6px; font-size:18px; font-weight:800; color:#fff; }
.dw-calc-val input{ width:100%; min-width:0; background:transparent; border:0; color:#fff; font-size:18px; font-weight:800; padding:0; font-variant-numeric:tabular-nums; }
.dw-calc-val input:focus{ outline:none; }
.dw-calc-recv{ color:#f0b840; }
.dw-calc-recv .coin-ico{ width:.85em; height:.85em; }
.dw-calc-bonus{ font-size:13px; color:#5cf08f; font-weight:800; }
.dw-calc-eq{ font-size:18px; color:var(--t3,#8a93a6); font-weight:800; }
.dw-cta{ width:100%; height:50px; margin-top:auto; border:0; border-radius:13px; background:linear-gradient(180deg,#ffe39c,#f3c86d 46%,#e0a236); color:#2a1c04; font-weight:900; font-size:15px; letter-spacing:.02em; cursor:pointer; box-shadow:0 6px 18px rgba(224,162,54,.42), inset 0 1px 0 rgba(255,255,255,.6); transition:filter .15s, box-shadow .15s; }
.dw-cta:hover{ filter:brightness(1.06); }
.dw-cta:disabled{ opacity:.65; cursor:default; }
.dw-cta--ghost{ background:rgba(255,255,255,.06); color:#fff; box-shadow:inset 0 0 0 1px var(--ln,#262c3b); margin-top:16px; height:44px; }
.dw-soon{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; color:var(--t2,#c2ccde); padding:30px 10px; }
.dw-soon-ico{ font-size:42px; }
.dw-soon p{ font-size:14px; line-height:1.5; max-width:320px; margin:0; }
@media (max-width:720px){
  .dw-modal .dw-card{ width:96vw !important; }
  .dw-grid{ grid-template-columns:1fr; min-height:0; }
  .dw-side{ border-right:0; border-bottom:1px solid var(--ln,#262c3b); }
  .dw-addrbox{ flex-direction:column; align-items:center; text-align:center; }
  .dw-selrow{ grid-template-columns:1fr; }
}

/* ── Backpack / skin-picker scroll fix ──────────────────────────────────────
   Force a constrained flex-column card so the grid ALWAYS scrolls when it's full.
   Higher specificity (.canta-modal .canta-modal__card) beats the base .app-modal__card
   rule that was leaving the lower skins (names + prices) cut off with no way to scroll. */
.canta-modal .canta-modal__card{
  display:flex !important; flex-direction:column !important;
  max-height:min(86vh,780px) !important; overflow:hidden !important;
}
.canta-modal .canta-modal__grid{
  flex:1 1 auto !important; min-height:0 !important;
  overflow-y:auto !important; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
/* keep the skin card tall enough that the name + price are never clipped */
.canta-modal .cm-card{ overflow:visible; }
.canta-modal .cm-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* ── Chat game-card skin thumb — FULLY self-contained (higher specificity than every base
   .skin-stack rule, so it wins outright regardless of load order). Fixes the drifting/"yamuk"
   skin and the hover list that shot up into the messages. ── */
.chat-game-card .cgc-thumb-stack{ position:relative; width:42px; height:42px; flex:0 0 42px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; padding:0; overflow:visible; }
.chat-game-card .cgc-thumb-stack .skin-stack{ position:static; display:flex; align-items:center; justify-content:center; width:100%; height:100%; gap:0; transform:none; vertical-align:top; }
.chat-game-card .cgc-thumb-stack .ss-th{ width:42px !important; height:42px !important; box-sizing:border-box; margin:0; border:1.5px solid rgba(0,0,0,.5); border-radius:9px; background:rgba(0,0,0,.28); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.chat-game-card .cgc-thumb-stack .ss-th img{ width:100%; height:100%; object-fit:contain; display:block; }
.chat-game-card .cgc-thumb-stack .skin-stack:hover .ss-th{ transform:none; }   /* no hover lift in the tiny tile */
.chat-game-card .cgc-thumb-stack .skin-stack-more{ position:absolute; right:-4px; bottom:-4px; margin:0; font-size:9.5px; font-weight:800; padding:1px 4px; z-index:3; background:#2b3346; color:#e8edf7; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.5); }
/* hover list anchored BELOW + to the LEFT edge of the thumb (the card sits at the top of the chat and
   is narrow — a centred, above-anchored tip shot up into the messages and overflowed sideways). */
.chat-game-card .skin-stack-tip{ bottom:auto; top:calc(100% + 9px); left:0; right:auto; transform:translateX(0) scale(.96); transform-origin:top left; }
.chat-game-card .skin-stack:hover .skin-stack-tip, .chat-game-card .skin-stack:focus .skin-stack-tip, .chat-game-card .skin-stack:focus-within .skin-stack-tip{ transform:translateX(0) scale(1); }
.chat-game-card .skin-stack-tip::after{ top:auto; bottom:100%; left:20px; border-top-color:transparent; border-bottom-color:var(--ln,#2a3142); }
@media (max-width:480px){ .chat-game-card .cgc-thumb-stack, .chat-game-card .cgc-thumb-stack .ss-th{ width:38px !important; height:38px !important; flex-basis:38px; } }

/* ── Make the chat game-card a touch more compact (takes less vertical room in the chat) ── */
.chat-game-card{ gap:5px !important; padding:7px 9px !important; }
.chat-game-card .cgc-top{ gap:8px; }
.chat-game-card .cgc-bottom{ padding-top:6px; }
.chat-game-card .cgc-win{ font-size:11.5px; }
.chat-game-card .cgc-label{ font-size:10px; }

/* Withdraw modal — the selected-coin summary in the LEFT panel (big icon + name + network), so the
   left side reads as full and the network no longer needs to live in the right-hand coin field. */
/* Withdraw modal LEFT panel: coins as a vertical list (icon left, name right), stacked */
.dw-side .wd-coin-list{ display:flex; flex-direction:column; gap:8px; }
.dw-side .wd-coin-list-lbl{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--t3,#8a93a6); padding-left:2px; }
.dw-side .wd-coins{ display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; gap:8px; margin-top:0 !important; justify-content:flex-start !important; }
.dw-side .wd-coin{ flex:0 0 auto !important; width:100%; flex-direction:row !important; justify-content:flex-start !important; align-items:center; gap:11px; padding:11px 13px !important; text-align:left; }
.dw-side .wd-coin .wd-coin-ico{ width:26px; height:26px; flex:0 0 auto; }
.dw-side .wd-coin .wd-coin-nm{ font-size:13.5px; text-align:left; }

/* Deposit referral urgency countdown — encourages applying the code / depositing while the bonus is "active". */
.dw-ref-timer{ display:flex; align-items:center; gap:6px; margin:8px 0 2px; padding:7px 11px; border-radius:9px;
  background:linear-gradient(90deg,rgba(238,179,81,.14),rgba(238,179,81,.05)); border:1px solid rgba(238,179,81,.3);
  font-size:12px; font-weight:700; color:#f0dcae; }
.dw-ref-timer svg{ color:#f4cd84; flex:0 0 auto; }
.dw-ref-timer b{ font-family:'Share Tech Mono',monospace; color:#f4cd84; font-size:13px; letter-spacing:.04em;
  font-variant-numeric:tabular-nums; }