:root{--bg:#07090e;--panel:#101621;--panel2:#151d2a;--line:#263247;--text:#f4f7fb;--muted:#8590a3;--accent:#e7bd58;--accent2:#fff0a2;--good:#67efac;--bad:#ff6577;--blue:#63b3ff;--purple:#b87cff;--cyan:#4de0ff}
*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(circle at 78% 0,#17213a 0,#090d15 34%,#05070b 78%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100%;overflow-x:hidden}button{font:inherit}.app-shell{display:grid;grid-template-columns:245px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#080c13,#090b10);border-right:1px solid #1f293a;padding:24px 16px;display:flex;flex-direction:column;z-index:5}.brand{display:flex;gap:12px;align-items:center;margin:0 8px 34px}.brand-mark{width:44px;height:44px;border:1px solid var(--accent);border-radius:50%;display:grid;place-items:center;color:var(--accent);font-size:26px;box-shadow:0 0 32px #d7b35a2e,inset 0 0 16px #d7b35a13}.brand-title{font-weight:950;letter-spacing:.15em;font-size:14px}.brand-sub{font-size:11px;color:var(--muted);letter-spacing:.18em}.nav{display:flex;flex-direction:column;gap:7px}.nav button{border:0;border-left:2px solid transparent;background:transparent;color:var(--muted);text-align:left;padding:12px 14px;border-radius:4px 9px 9px 4px;font-weight:800;cursor:pointer;transition:.18s}.nav button:hover,.nav button.active{background:linear-gradient(90deg,#192234,#101621);color:var(--text);border-left-color:var(--accent);transform:translateX(2px)}.sidebar-footer{margin-top:auto;padding:14px}.tiny-label,.eyebrow,.mode-kicker{font-size:10px;letter-spacing:.18em;color:var(--muted);font-weight:900}.season-name{font-size:12px;margin-top:5px;color:var(--accent)}.server-dot{margin-top:14px;font-size:9px;letter-spacing:.08em;color:var(--good)}.main{padding:0 34px 44px;max-width:1480px;width:100%;margin:auto}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between}.top-title{font-weight:900;font-size:20px}.top-subtitle{color:var(--muted);font-size:13px;margin-top:4px}.player-summary{display:flex;gap:14px;align-items:center}.rank-chip,.currency{background:linear-gradient(180deg,#141c28,#0e141d);border:1px solid var(--line);padding:10px 14px;border-radius:9px;box-shadow:0 10px 24px #0004}.rank-chip{display:flex;flex-direction:column;min-width:112px}.rank-chip span{font-weight:950;font-size:12px}.rank-chip small{color:var(--accent);margin-top:2px}.currency{font-weight:950}.view{display:none}.view.active{display:block;animation:viewIn .28s ease}@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.card{background:linear-gradient(180deg,#131b28f7,#0d131df7);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 18px 52px #00000032;position:relative}.cinematic-card{overflow:hidden}.cinematic-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 55%,#dfb34808 55% 56%,transparent 56%),radial-gradient(circle at 80% 50%,#e7bd5812,transparent 32%);pointer-events:none}.scanline{position:absolute;inset:-100% 0 auto;height:150%;background:linear-gradient(180deg,transparent 0,#ffffff08 49%,#ffffff11 50%,transparent 51%);animation:scan 7s linear infinite;pointer-events:none}@keyframes scan{to{transform:translateY(150%)}}.hero{display:grid;grid-template-columns:1.35fr .65fr;min-height:410px}.hero-copy{align-self:center;z-index:1}.hero h1{font-size:54px;line-height:.95;margin:18px 0;letter-spacing:-.055em;text-transform:uppercase}.hero h1 span{color:var(--accent);text-shadow:0 0 28px #e7bd5834}.hero p{color:var(--muted);max-width:650px;line-height:1.65}.hero-actions{display:flex;gap:10px;margin-top:30px}.primary,.secondary,.choice,.stake-buttons button{border-radius:7px;padding:12px 16px;font-weight:950;letter-spacing:.04em;cursor:pointer;text-transform:uppercase;transition:.16s}.primary{background:linear-gradient(180deg,#ffe193,#d9a83c);color:#14110a;border:1px solid #ffe4a3;box-shadow:0 10px 25px #e7bd5822}.primary:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 12px 32px #e7bd5837}.primary:disabled,.secondary:disabled{opacity:.4;cursor:not-allowed;transform:none}.secondary{background:#0d1420;color:var(--text);border:1px solid #35445d}.secondary:hover{border-color:#6b7d99;background:#121b29}.pulse{animation:pulse 2.4s infinite}@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #e7bd5800}50%{box-shadow:0 0 0 8px #e7bd580b,0 0 38px #e7bd5835}}.wide{width:100%}.hero-coin-wrap{display:grid;place-items:center;align-content:center;gap:25px;z-index:1}.coin-shell{position:relative;display:grid;place-items:center}.coin-shell:before{content:"";position:absolute;width:135%;height:135%;border-radius:50%;background:radial-gradient(circle,#e7bd5831,transparent 62%);filter:blur(14px);animation:halo 2.8s ease-in-out infinite}@keyframes halo{50%{transform:scale(1.12);opacity:.55}}.coin-shell.rarity-rare:before{background:radial-gradient(circle,#63aaff40,transparent 62%)}.coin-shell.rarity-epic:before{background:radial-gradient(circle,#b87cff52,transparent 62%)}.coin-shell.rarity-legendary:before{background:radial-gradient(circle,#ffc85760,transparent 62%)}.coin-shell.rarity-mythic:before,.coin-shell.rarity-relic:before{background:conic-gradient(from 0deg,#ff5fa7aa,#6d7dffaa,#62f6ff99,#ffcf5caa,#ff5fa7aa);animation:spinHalo 4s linear infinite;filter:blur(18px)}@keyframes spinHalo{to{transform:rotate(360deg)}}.coin{position:relative;transform-style:preserve-3d;border-radius:50%;transition:transform .1s;z-index:2}.large-coin{width:180px;height:180px}.match-coin{width:170px;height:170px}.coin-face{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;backface-visibility:hidden;font-weight:1000;font-size:72px;border:8px solid #8c6f2f;background:radial-gradient(circle at 34% 26%,#fff1ac,#d8aa3f 52%,#6a4715);color:#251b08;box-shadow:inset 0 0 0 4px #fff1a466,inset 0 -14px 24px #62400b77,0 22px 60px #000a;text-shadow:0 2px 0 #fff4}.coin-face:after{content:"";position:absolute;inset:12px;border-radius:50%;border:2px dashed #6c4d1980}.coin-face.tails{transform:rotateY(180deg)}.coin.flipping{animation:flip .9s cubic-bezier(.2,.7,.2,1)}.coin.show-tails{transform:rotateY(180deg)}@keyframes flip{0%{transform:rotateY(0) translateY(0) scale(1)}45%{transform:rotateY(1080deg) translateY(-72px) scale(1.12)}100%{transform:rotateY(2160deg) translateY(0) scale(1)}}.hero-stat{font-size:11px;color:var(--muted);letter-spacing:.12em}.hero-stat strong{color:var(--text);margin-left:8px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.stat-card{overflow:hidden}.stat-card:after{content:"";position:absolute;height:2px;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.35}.stat-card span{display:block;color:var(--muted);font-size:10px;letter-spacing:.12em}.stat-card strong{display:block;font-size:27px;margin:9px 0 3px}.stat-card small{color:var(--muted)}.section-title{font-weight:950;margin-bottom:16px}.history-list,.quest-list{display:flex;flex-direction:column;gap:10px}.history-item,.quest{display:flex;align-items:center;justify-content:space-between;background:#0a1019;border:1px solid #202b3d;padding:12px;border-radius:8px}.history-item small,.quest small,.history-reward small{display:block;color:var(--muted);margin-top:3px}.history-item .win{color:var(--good)}.history-item .loss{color:var(--bad)}.history-reward{text-align:right;font-weight:900}.empty-state{color:var(--muted);padding:20px 0}.quest-reward{color:var(--accent);font-weight:900}.mode-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.mode-card{min-height:390px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}.mode-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,#dcae4f25,transparent 38%),linear-gradient(140deg,transparent,#ffffff03);pointer-events:none}.casual-mode:before{background:radial-gradient(circle at 80% 20%,#4e96ff25,transparent 38%),linear-gradient(140deg,transparent,#ffffff03)}.mode-card h2{font-size:40px;margin:12px 0 8px;position:relative}.mode-card p{color:var(--muted);line-height:1.6;max-width:680px;position:relative}.mode-reward{margin:18px 0;display:flex;gap:10px;align-items:baseline;color:var(--muted);font-size:11px;letter-spacing:.08em}.mode-reward strong{font-size:17px;color:var(--accent)}.mode-reward small{margin-left:auto}.stake-panel label{display:block;color:var(--muted);font-size:11px;margin-bottom:8px}.stake-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:10px}.stake-buttons button{padding:10px;background:#09101a;color:var(--muted);border:1px solid var(--line)}.stake-buttons button.active{background:var(--accent);color:#16110a;border-color:var(--accent)}.hidden{display:none!important}.match-panel{position:relative}.match-intro{position:fixed;inset:0;background:#06090ee8;backdrop-filter:blur(8px);display:grid;place-items:center;align-content:center;z-index:50;opacity:0;pointer-events:none;transform:scale(1.05)}.match-intro.play{animation:introSequence 1.85s ease both}@keyframes introSequence{0%{opacity:0;transform:scale(1.08)}12%,78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.98)}}.intro-line{width:min(720px,78vw);height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin-bottom:20px;box-shadow:0 0 24px #e7bd58}.intro-mode{letter-spacing:.35em;font-size:11px;color:var(--accent);font-weight:950}.intro-vs{display:grid;grid-template-columns:1fr 90px 1fr;width:min(860px,88vw);align-items:center;margin:26px 0}.intro-vs div:first-child{text-align:right}.intro-vs div:last-child{text-align:left}.intro-vs div{display:flex;flex-direction:column}.intro-vs small{font-size:9px;letter-spacing:.2em;color:var(--muted)}.intro-vs strong{font-size:31px}.intro-vs span{text-align:center;font-size:28px;font-weight:1000;color:var(--bad)}.bot-style{font-size:10px;letter-spacing:.16em;color:var(--cyan);font-weight:900}.arena-card{padding:0;overflow:hidden}.match-header{display:grid;grid-template-columns:1fr 80px 1fr;padding:22px 28px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,#142038,#0d131d 50%,#2a1620)}.competitor{display:flex;flex-direction:column}.competitor.bot{text-align:right}.competitor strong{font-size:21px}.competitor small{color:var(--muted)}.tag{font-size:9px;color:var(--accent);letter-spacing:.15em}.versus{display:grid;place-items:center;color:var(--bad);font-weight:1000}.match-meta{display:flex;justify-content:center;gap:42px;padding:11px;background:#080e16;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.05em}.arena{min-height:385px;display:grid;place-items:center;align-content:center;gap:28px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 48%,#172740 0,#0b121d 36%,#080c13 72%)}.arena-rays{position:absolute;width:700px;height:700px;background:repeating-conic-gradient(from 0deg,#ffffff05 0deg 3deg,transparent 3deg 12deg);animation:slowSpin 28s linear infinite;mask-image:radial-gradient(circle,#000,transparent 68%)}@keyframes slowSpin{to{transform:rotate(360deg)}}.result-banner{font-size:20px;font-weight:1000;letter-spacing:.12em;text-shadow:0 0 22px currentColor;z-index:2}.bot-readout{position:absolute;right:18px;bottom:16px;font-size:9px;letter-spacing:.1em;color:#6d7b91}.choice-area{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:20px 28px 28px;background:#090f18}.choice{padding:18px;border:1px solid var(--line);background:#0e1622;color:var(--text);font-size:15px;display:flex;align-items:center;justify-content:center;gap:9px}.choice span{width:28px;height:28px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center}.heads-choice:hover{border-color:var(--blue);box-shadow:inset 0 0 30px #63b3ff18}.tails-choice:hover{border-color:var(--bad);box-shadow:inset 0 0 30px #ff657718}.choice:disabled{opacity:.35;cursor:not-allowed}.match-end-actions{display:flex;gap:10px;justify-content:center;padding:0 28px 28px;background:#090f18}.casino-hero{display:flex;justify-content:space-between;align-items:end;margin-bottom:16px}.casino-hero h2,.section-head h2{font-size:38px;margin:8px 0}.casino-balance{font-size:10px;letter-spacing:.14em;color:var(--muted)}.casino-balance strong{display:block;color:var(--accent);font-size:22px;margin-top:5px}.casino-card{overflow:hidden}.casino-card h2{font-size:31px;margin:10px 0}.casino-card p{color:var(--muted);line-height:1.55}.gacha-card:before,.slots-card:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-120px;top:-130px;background:#b87cff14;filter:blur(12px)}.slots-card:before{background:#e7bd5818}.odds-table{display:grid;gap:6px;margin:18px 0}.odds-table div{display:flex;justify-content:space-between;padding:8px 11px;background:#090f18;border-radius:7px}.capsule-stage{min-height:150px;margin-top:16px;display:grid;place-items:center;align-content:center;gap:12px;background:radial-gradient(circle,#171f2d,#090d14);border:1px solid #202b3d;border-radius:10px;overflow:hidden;position:relative}.capsule-orb{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:#111a27;border:2px solid #59677c;font-size:34px;box-shadow:0 0 20px #000}.capsule-stage.opening .capsule-orb{animation:capsuleCharge 1.05s ease-in-out infinite}@keyframes capsuleCharge{0%{transform:scale(.85) rotate(0);box-shadow:0 0 15px #6d7dff}50%{transform:scale(1.18) rotate(180deg);box-shadow:0 0 65px #fff}100%{transform:scale(.85) rotate(360deg);box-shadow:0 0 15px #ff5fa7}}.capsule-stage.revealed .capsule-orb{animation:revealPop .6s cubic-bezier(.2,.9,.2,1.2)}@keyframes revealPop{0%{transform:scale(.1);filter:brightness(5)}100%{transform:scale(1)}}.capsule-stage.rarity-mythic,.capsule-stage.rarity-relic{background:conic-gradient(from 0deg,#39152e,#1d2854,#173c48,#4f3613,#39152e);animation:slowSpinBg 7s linear infinite}@keyframes slowSpinBg{to{filter:hue-rotate(360deg)}}.casino-result{min-height:38px;text-align:center;color:var(--muted);font-size:12px}.slot-reels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:24px 0}.slot-reels span{display:grid;place-items:center;height:104px;border-radius:9px;background:linear-gradient(180deg,#05070b,#111927,#05070b);border:1px solid var(--line);font-size:46px;box-shadow:inset 0 0 25px #000}.slot-reels.spinning span{animation:reelShake .14s infinite}@keyframes reelShake{50%{transform:translateY(3px);filter:blur(1px)}}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:16px}.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.shop-item{overflow:hidden}.shop-item:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--rarity,#8892a3);opacity:.7}.coin-preview{height:170px;display:grid;place-items:center;background:radial-gradient(circle,#1d2a3c,#090e16 72%);border-radius:10px;margin-bottom:14px;position:relative;overflow:hidden}.mini-coin{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#fff0a1,#c99a38 58%,#5e3f12);border:6px solid #7a591e;color:#251b08;font-size:39px;font-weight:1000;box-shadow:0 16px 35px #000a;z-index:2}.rarity-beam{position:absolute;width:170px;height:170px;background:conic-gradient(transparent,#ffffff0b,transparent,#ffffff13,transparent);animation:slowSpin 8s linear infinite}.rarity{font-size:10px;letter-spacing:.13em;font-weight:950}.rarity.common{color:#adb5c2}.rarity.rare{color:#6fa8ff}.rarity.epic{color:#bd83ff}.rarity.legendary{color:#f2bd51}.rarity.mythic{color:#ff6f91}.rarity.relic{color:#63f3ff}.rarity-common{--rarity:#adb5c2}.rarity-rare{--rarity:#6fa8ff}.rarity-epic{--rarity:#bd83ff}.rarity-legendary{--rarity:#f2bd51}.rarity-mythic{--rarity:#ff6f91}.rarity-relic{--rarity:#63f3ff}.shop-item.rarity-mythic .coin-preview,.shop-item.rarity-relic .coin-preview{box-shadow:inset 0 0 50px color-mix(in srgb,var(--rarity) 18%,transparent)}.shop-item h3{margin:7px 0 4px}.shop-item p{color:var(--muted);font-size:12px;min-height:36px}.supply-line{font-size:10px;color:#657186;margin-top:11px}.item-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:15px}.item-bottom button{padding:8px 11px}.equipped{color:var(--good);font-size:11px;font-weight:950}.bot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.bot-card{min-height:230px;overflow:hidden}.bot-card:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:#3d74ff0f;right:-90px;top:-90px}.bot-rank{font-size:9px;letter-spacing:.12em;color:var(--accent);font-weight:900}.bot-card h3{font-size:20px;margin:10px 0 6px}.bot-card p{color:var(--muted);font-style:italic;font-size:12px}.bot-bars{margin-top:18px}.bot-bars div{display:flex;justify-content:space-between;border-bottom:1px solid #202a39;padding:8px 0;font-size:11px}.bot-bars span{color:var(--muted)}.bot-record{margin-top:12px;font-size:10px;color:#6d7b91}.stats-lines{display:grid;gap:10px}.stats-line{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #222b39}.stats-line span{color:var(--muted)}.economy-card{margin-top:16px}.toast{position:fixed;right:26px;bottom:26px;background:#151c26;border:1px solid var(--line);padding:14px 18px;border-radius:8px;box-shadow:0 14px 40px #0007;opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:none}.good{color:var(--good)!important}.bad{color:var(--bad)!important}.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}.screen-impact{position:absolute;inset:0;animation:impactFade .65s ease-out forwards}.screen-impact.win{background:radial-gradient(circle,#67efac22,transparent 58%)}.screen-impact.loss{background:radial-gradient(circle,#ff65771c,transparent 58%)}.screen-impact.jackpot{background:radial-gradient(circle,#fff6af55,#b54dff28 34%,transparent 65%)}@keyframes impactFade{0%{opacity:0}20%{opacity:1}100%{opacity:0}}.particle{position:absolute;width:7px;height:16px;background:var(--accent);box-shadow:0 0 12px currentColor;animation:particleFly 1s ease-out forwards}@keyframes particleFly{to{transform:translate(var(--x),var(--y)) rotate(540deg);opacity:0}}.victory-overlay{position:fixed;inset:0;display:grid;place-items:center;background:#07100bd9;backdrop-filter:blur(5px);z-index:80;opacity:0}.victory-overlay.loss{background:#13080bd9}.victory-overlay.show{animation:victoryShow 1.8s ease both}@keyframes victoryShow{0%{opacity:0}10%,80%{opacity:1}100%{opacity:0}}.victory-burst{position:absolute;width:760px;height:760px;background:repeating-conic-gradient(#67efac14 0 4deg,transparent 4deg 13deg);animation:slowSpin 10s linear infinite;mask-image:radial-gradient(circle,#000,transparent 65%)}.victory-overlay.loss .victory-burst{background:repeating-conic-gradient(#ff657712 0 4deg,transparent 4deg 13deg)}.victory-copy{text-align:center;z-index:2}.victory-copy small{letter-spacing:.28em;color:var(--muted);font-weight:900}.victory-copy h1{font-size:76px;letter-spacing:.08em;margin:10px 0;color:var(--good);text-shadow:0 0 45px #67efac66}.victory-overlay.loss h1{color:var(--bad);text-shadow:0 0 45px #ff657755}.victory-copy p{font-weight:900;color:var(--accent);font-size:20px}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}.bot-grid{grid-template-columns:repeat(2,1fr)}.shop-grid{grid-template-columns:repeat(2,1fr)}}
.turn-timer{min-width:72px;text-align:center;color:var(--cyan);font-variant-numeric:tabular-nums}.turn-timer b{font-size:13px;color:var(--text);text-shadow:0 0 12px #63f3ff88}.turn-timer.warning{color:var(--bad);animation:timerPulse .45s ease-in-out infinite alternate}.turn-timer.warning b{color:var(--bad);text-shadow:0 0 18px #ff657799}@keyframes timerPulse{to{transform:scale(1.08);filter:brightness(1.35)}}
@media(max-width:860px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.main{padding:0 16px 28px}.hero{grid-template-columns:1fr}.hero-coin-wrap{display:none}.grid-4,.grid-3,.grid-2,.mode-grid,.shop-grid,.bot-grid{grid-template-columns:1fr}.topbar{height:80px}.top-subtitle{display:none}.match-header{grid-template-columns:1fr 50px 1fr}.hero h1{font-size:40px}.match-meta{gap:13px;font-size:9px}.arena{min-height:330px}.victory-copy h1{font-size:48px}.intro-vs strong{font-size:20px}}

/* v0.3 visual stimulation pass */
:root{--violet:#8b5cf6;--hot:#ff3f91;--cyan2:#19d3ff;--gold:#ffd166}
body{background:
  radial-gradient(circle at 78% 8%,#672cff19,transparent 25%),
  radial-gradient(circle at 18% 78%,#00cfff12,transparent 30%),
  linear-gradient(135deg,#05070d,#09101b 48%,#05070d);}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom,#0009,transparent 75%);z-index:-1}
.sidebar{background:linear-gradient(180deg,#090d17f5,#080b12f8);box-shadow:18px 0 60px #0007,inset -1px 0 #74d9ff12}
.brand-mark{box-shadow:0 0 34px #6deaff4c,inset 0 0 15px #ffffff22;animation:brandBreath 3.4s ease-in-out infinite}@keyframes brandBreath{50%{filter:brightness(1.35);box-shadow:0 0 48px #8d67ff70,inset 0 0 20px #fff3}}
.nav button{position:relative;overflow:hidden;transition:.18s transform,.18s background,.18s color,.18s border-color}.nav button:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,#ffffff10,transparent);transform:translateX(-120%);transition:.45s}.nav button:hover:before{transform:translateX(120%)}.nav button:hover{transform:translateX(4px)}.nav button.active{box-shadow:inset 3px 0 var(--cyan2),0 0 28px #28d7ff0b}
.topbar{backdrop-filter:blur(16px);background:linear-gradient(180deg,#070b12d9,#070b1296)}
.rank-chip{background:linear-gradient(145deg,#151e30,#0b101b);border-color:#5bcfff30;box-shadow:inset 0 0 18px #4a7dff0d,0 8px 30px #0004}.currency{background:linear-gradient(135deg,#2a1d08,#12100d);border:1px solid #ffd16636;box-shadow:inset 0 0 18px #ffd1660e}.currency span{color:#ffe38b;text-shadow:0 0 16px #ffc83d55}
.card{border-color:#ffffff13;background:linear-gradient(145deg,#101722e8,#0a0f18ee);box-shadow:0 18px 60px #0004,inset 0 1px #ffffff08}.card:hover{border-color:#ffffff24}
.cinematic-card{background:radial-gradient(circle at 80% 50%,#31348666,transparent 34%),radial-gradient(circle at 20% 10%,#00d9ff19,transparent 30%),linear-gradient(120deg,#0e1726,#090d16);box-shadow:0 22px 80px #0009,inset 0 0 75px #4f4eff0b}
.cinematic-card:after{content:"";position:absolute;inset:-40%;background:conic-gradient(from 180deg,transparent,#6ae9ff0c,transparent,#c86cff0d,transparent);animation:slowSpin 22s linear infinite;pointer-events:none}
.primary{background:linear-gradient(110deg,#36d5ff,#7664ff 52%,#cf5fff);box-shadow:0 0 0 1px #b6f4ff22 inset,0 7px 24px #635bff36;transition:.16s transform,.16s filter,.16s box-shadow}.primary:hover{transform:translateY(-2px) scale(1.012);filter:brightness(1.15);box-shadow:0 0 0 1px #fff4 inset,0 10px 35px #635bff55}.primary:active,.secondary:active{transform:scale(.97)}
.secondary{transition:.16s transform,.16s filter,.16s border-color}.secondary:hover{filter:brightness(1.16);border-color:#78dfff66}
.stake-buttons{grid-template-columns:repeat(5,1fr)}.custom-stake{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-top:10px}.custom-stake input{width:100%;background:#080d15;border:1px solid #33405a;color:var(--text);border-radius:7px;padding:11px 12px;outline:none}.custom-stake input:focus{border-color:var(--cyan2);box-shadow:0 0 0 3px #19d3ff12}.stake-risk{font-size:9px;letter-spacing:.12em;color:#78869a;margin-top:10px;text-align:right;transition:.2s}.stake-risk.medium{color:#ffd166}.stake-risk.high{color:#ff8d57;text-shadow:0 0 14px #ff7a423f}.stake-risk.critical{color:#ff4777;font-weight:1000;animation:riskPulse .6s alternate infinite}@keyframes riskPulse{to{filter:brightness(1.6);transform:scale(1.015)}}
.arena-card{border-color:#6ee7ff22;box-shadow:0 26px 100px #000b,0 0 50px #405dff0d}.arena{background:radial-gradient(circle at 50% 45%,#253d6c 0,#111b31 27%,#070b13 70%)}.arena:before{content:"";position:absolute;width:380px;height:380px;border:1px solid #61ddff24;border-radius:50%;box-shadow:0 0 75px #5acbff1c,inset 0 0 65px #5d64ff17;animation:arenaPulse 2.6s ease-in-out infinite}@keyframes arenaPulse{50%{transform:scale(1.08);opacity:.68}}.match-coin{filter:drop-shadow(0 0 30px #ffd1663d)}
.choice{font-weight:1000;letter-spacing:.08em;position:relative;overflow:hidden;transition:.14s transform,.14s box-shadow,.14s filter}.choice:hover{transform:translateY(-3px) scale(1.01);filter:brightness(1.18)}.choice:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,#fff1,transparent);transform:translateX(-120%)}.choice:hover:before{animation:choiceSweep .55s ease}@keyframes choiceSweep{to{transform:translateX(120%)}}
.casino-hero{padding:26px 30px;border:1px solid #ffffff12;border-radius:16px;background:radial-gradient(circle at 82% 20%,#ffbf3d24,transparent 23%),radial-gradient(circle at 12% 80%,#714dff1f,transparent 29%),linear-gradient(120deg,#121928,#0b0f18);box-shadow:0 24px 70px #0006}.casino-card{min-height:620px;background:linear-gradient(160deg,#121827,#0a0d14)}
.capsule-stage{min-height:285px;border-color:#526586;background:radial-gradient(circle at 50% 52%,#20283d,#090d14 66%);box-shadow:inset 0 0 70px #000,0 15px 50px #0008}.capsule-stage:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;border:1px solid #8b9dff20;box-shadow:0 0 45px #788aff17,inset 0 0 45px #6e9dff0d;animation:slowSpin 9s linear infinite}.capsule-stage:after{content:"";position:absolute;width:190px;height:190px;background:repeating-conic-gradient(#fff0 0 10deg,#93c8ff19 10deg 11deg,#fff0 11deg 24deg);mask-image:radial-gradient(circle,transparent 42%,#000 43% 50%,transparent 51%);animation:slowSpin 5s linear reverse infinite}.capsule-orb{width:110px;height:110px;font-size:48px;z-index:2;border:2px solid #9aabce;background:radial-gradient(circle at 38% 30%,#273856,#0c111b 70%);box-shadow:0 0 30px #829bff38,inset 0 0 24px #fff1}.capsule-stage.opening .capsule-orb{animation:capsuleCharge .82s ease-in-out infinite}.capsule-stage.charge-2{box-shadow:inset 0 0 90px #525cff25,0 0 35px #657aff18}.capsule-stage.charge-3{animation:stageRumble .1s infinite alternate}.capsule-stage.charge-3 .capsule-orb{box-shadow:0 0 95px #fff,0 0 150px #895fff88}@keyframes stageRumble{to{transform:translate(1px,-1px)}}.capsule-stage.pre-reveal{filter:brightness(1.8);animation:preFlash .5s ease both}@keyframes preFlash{50%{background:#fff}100%{filter:brightness(1)}}.capsule-stage.revealed{min-height:325px}.capsule-stage.revealed .capsule-orb{transform:scale(1.25);box-shadow:0 0 55px var(--rarity,#fff),0 0 140px color-mix(in srgb,var(--rarity,#fff) 45%,transparent);animation:revealPop .7s cubic-bezier(.1,.8,.1,1.35)}.capsule-stage.revealed:before{border-color:var(--rarity,#fff);box-shadow:0 0 90px color-mix(in srgb,var(--rarity,#fff) 35%,transparent)}.casino-result{z-index:3;font-size:13px}.casino-result strong{font-size:16px;color:var(--text);letter-spacing:.08em}
.slot-reels{perspective:900px;gap:14px}.slot-reels span{height:150px;font-size:60px;border:1px solid #5c6680;background:linear-gradient(180deg,#05070b,#172136 48%,#05070b);box-shadow:inset 0 0 35px #000,0 10px 28px #0008;transition:.25s transform,.25s border-color,.25s box-shadow}.slot-reels.spinning span{animation:reelShake .1s infinite}.slot-reels span.locked{transform:scale(1.06);border-color:#ffd166;box-shadow:inset 0 0 35px #000,0 0 30px #ffd1662f}
.collection-summary{display:grid;grid-template-columns:auto auto;gap:2px 14px;text-align:right}.collection-summary strong{font-size:22px;color:var(--accent)}.collection-summary small{font-size:8px;color:var(--muted);letter-spacing:.12em}.section-copy{color:var(--muted);max-width:650px;line-height:1.55;font-size:12px}.collection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.collection-type{cursor:pointer;transition:.18s transform,.18s border-color,.18s box-shadow;overflow:hidden}.collection-type:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--rarity,#fff) 50%,transparent);box-shadow:0 22px 60px #0007,0 0 30px color-mix(in srgb,var(--rarity,#fff) 14%,transparent)}.collection-art{height:190px;display:grid;place-items:center;position:relative;background:radial-gradient(circle,#19253a,#090d14 68%);border-radius:10px;margin-bottom:15px;overflow:hidden}.collection-art .mini-coin{transform:scale(1.08)}.collection-halo{position:absolute;width:210px;height:210px;background:conic-gradient(transparent,var(--rarity,#fff) 8%,transparent 19%,transparent 48%,var(--rarity,#fff) 56%,transparent 68%);opacity:.17;animation:slowSpin 7s linear infinite}.collection-count{position:absolute;right:12px;bottom:10px;background:#05080ecf;border:1px solid #ffffff18;border-radius:999px;padding:5px 9px;font-weight:1000}.collection-footer{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:var(--good);font-size:10px;font-weight:900}
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center}.modal-backdrop{position:absolute;inset:0;background:#02040bd9;backdrop-filter:blur(10px)}.modal-panel{position:relative;width:min(1000px,90vw);max-height:86vh;overflow:auto;border:1px solid #6e8bd339;border-radius:15px;background:linear-gradient(150deg,#121a2a,#080c13);box-shadow:0 40px 120px #000d,0 0 80px #674fff18;padding:26px}.modal-close{position:absolute;right:18px;top:16px;width:38px;height:38px;border-radius:50%;font-size:24px;background:#111a28;color:#fff;border:1px solid #ffffff1b}.modal-head{display:grid;grid-template-columns:1fr 220px;gap:30px;align-items:center;border-bottom:1px solid #ffffff12;padding-bottom:20px}.modal-head h2{font-size:36px;margin:6px 0}.modal-head p{color:var(--muted)}.modal-coin-preview{text-align:center}.modal-coin{width:110px;height:110px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:45px;background:radial-gradient(circle at 35% 25%,#fff5bd,#c49332 60%,#54360d);color:#241807;border:7px solid #84601e;box-shadow:0 0 45px color-mix(in srgb,var(--rarity,#fff) 35%,transparent)}.modal-toolbar{display:flex;justify-content:space-between;align-items:end;padding:18px 0}.modal-toolbar label{font-size:9px;letter-spacing:.12em;color:var(--muted);display:grid;gap:8px}.modal-toolbar select{background:#09101a;color:var(--text);border:1px solid #34425a;border-radius:7px;padding:10px}.modal-owned{text-align:right}.modal-owned strong{display:block;font-size:24px}.modal-owned small{color:var(--muted)}.instance-list{display:grid;gap:9px}.instance-row{display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center;padding:12px;border:1px solid #ffffff10;border-radius:9px;background:#090f18}.instance-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#151e2e;border:2px solid var(--rarity,#899);box-shadow:0 0 20px color-mix(in srgb,var(--rarity,#fff) 22%,transparent)}.instance-main{display:grid;gap:4px}.instance-main small{color:var(--muted)}.instance-tags{display:flex;gap:6px;margin-top:3px}.instance-tags span{font-size:9px;letter-spacing:.08em;padding:3px 6px;border-radius:4px;background:#172033;color:#9fb0c7}
.victory-overlay{background:radial-gradient(circle at 50% 50%,#132c25e8,#040706f7 64%);overflow:hidden}.victory-overlay.show{animation:victoryShowLong 4s ease both}@keyframes victoryShowLong{0%{opacity:0}6%,86%{opacity:1}100%{opacity:0}}.victory-overlay .victory-burst{width:1000px;height:1000px;background:repeating-conic-gradient(#ffe58622 0 3deg,transparent 3deg 10deg);animation:slowSpin 8s linear infinite}.victory-rings{position:absolute;width:520px;height:520px;border:2px solid #ffe27a44;border-radius:50%;box-shadow:0 0 80px #ffd55b25,inset 0 0 80px #ffd55b14;animation:ringBoom 1.1s cubic-bezier(.1,.7,.1,1) both}@keyframes ringBoom{from{transform:scale(.1);opacity:0}45%{opacity:1}to{transform:scale(1.5);opacity:0}}.victory-copy{min-width:520px;padding:34px 50px;background:linear-gradient(180deg,#0b1612bd,#080c0bdb);border-top:1px solid #ffe99842;border-bottom:1px solid #ffe99842;box-shadow:0 0 100px #f9cf4930;text-transform:uppercase}.victory-copy h1{font-size:88px;background:linear-gradient(180deg,#fffbd4,#ffd45e 55%,#b97b13);-webkit-background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 24px #ffd35d55);margin:8px 0}.risk-callout{font-size:11px;letter-spacing:.35em;color:#ffd666;font-weight:1000}.victory-stake{font-size:10px;letter-spacing:.14em;color:#9eb5a9;margin:8px}.payout-counter{font-size:28px;color:#ffe16e;font-weight:1000;letter-spacing:.05em;margin-top:14px;text-shadow:0 0 25px #ffc93388}.victory-overlay.risk-high .victory-copy,.victory-overlay.risk-extreme .victory-copy,.victory-overlay.risk-allin .victory-copy{animation:payoffPunch .5s cubic-bezier(.1,.9,.1,1.2)}@keyframes payoffPunch{0%{transform:scale(.7);filter:brightness(4)}100%{transform:scale(1)}}.victory-overlay.risk-extreme{background:radial-gradient(circle,#49350fe8,#090704f7 68%)}.victory-overlay.risk-allin{background:radial-gradient(circle,#57152ce8,#10040af8 66%);animation:allInShake .12s 8 alternate}.victory-overlay.risk-allin .victory-burst{background:repeating-conic-gradient(#ffea8a45 0 3deg,transparent 3deg 8deg,#ff4d9b2c 8deg 10deg,transparent 10deg 16deg)}.victory-overlay.risk-allin .victory-copy h1{font-size:104px}@keyframes allInShake{to{transform:translate(2px,-2px)}}.victory-overlay.loss{background:radial-gradient(circle,#321018d9,#050407f8 66%)}.victory-overlay.loss .victory-copy{border-color:#ff607653;box-shadow:0 0 80px #ff344023}.victory-overlay.loss .victory-copy h1{background:linear-gradient(#ffd8dc,#ff536c);-webkit-background-clip:text;color:transparent}
.particle{border-radius:2px;background:linear-gradient(#fff7bd,#ffbc42);box-shadow:0 0 16px #ffd95d}.particle.diamond{width:10px;height:10px;transform:rotate(45deg);background:linear-gradient(135deg,#b9f7ff,#7a66ff)}
@media(max-width:1200px){.collection-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.stake-buttons{grid-template-columns:repeat(3,1fr)}.collection-grid{grid-template-columns:1fr}.modal-head{grid-template-columns:1fr}.modal-coin-preview{display:none}.victory-copy{min-width:unset;width:88vw;padding:26px}.victory-copy h1,.victory-overlay.risk-allin .victory-copy h1{font-size:48px}.casino-card{min-height:unset}}
.account-pill{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.035);font-size:11px;letter-spacing:.08em}.mini-action{font:inherit;color:#b9c7ff;background:transparent;border:0;text-decoration:none;cursor:pointer;padding:3px 5px;opacity:.8}.mini-action:hover{opacity:1;color:#fff}

/* v0.5 wager/store/slot/tie additions */
.shop-rotation-status{min-width:150px;text-align:right;padding:10px 14px;border:1px solid #ffffff12;border-radius:8px;background:#090f18}.shop-rotation-status small{display:block;color:var(--muted);font-size:8px;letter-spacing:.14em}.shop-rotation-status strong{display:block;margin-top:5px;color:var(--accent);font-size:15px}.slot-paytable{display:grid;gap:5px;margin:12px 0 16px;padding:12px;border:1px solid #ffffff10;border-radius:8px;background:#070c13}.slot-paytable div{display:flex;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:.06em;color:#91a0b5}.slot-paytable strong{color:#e6edf8}.slot-paytable .jackpot-row{margin-top:3px;padding-top:8px;border-top:1px solid #ffe4772b;color:#ffd65b}.slot-paytable .jackpot-row strong{color:#ffe168;text-shadow:0 0 14px #ffce3d66}.wager-panel{width:min(560px,90vw);overflow:visible}.wager-panel h2{font-size:36px;margin:7px 0}.wager-bankroll{display:flex;justify-content:space-between;align-items:center;margin:20px 0 12px;padding:13px 15px;background:#070d15;border:1px solid #ffffff11;border-radius:8px;color:var(--muted);font-size:10px;letter-spacing:.1em}.wager-bankroll strong{font-size:20px;color:#ffe06c}.wager-modal-buttons{margin-bottom:10px}.wager-modal-actions{display:grid;grid-template-columns:1fr 140px;gap:9px;margin-top:20px}.result-banner.tie{color:#ffd76a;text-shadow:0 0 18px #ffd86a55;border-color:#f0ca5a55}
@media(max-width:650px){.wager-modal-actions{grid-template-columns:1fr}.shop-rotation-status{width:100%;text-align:left}}

.queue-wager-note{display:grid;gap:3px;margin:16px 0;padding:12px 14px;border-left:2px solid var(--accent);background:#0a111d}.queue-wager-note span{font-size:8px;letter-spacing:.15em;color:var(--muted)}.queue-wager-note strong{font-size:12px;color:#f3f7ff}.queue-wager-note small{color:#7d8aa0}

/* v0.6 viewport shell, match readability, contract completion */
html,body{height:100%;overflow:hidden}
.app-shell{height:100vh;min-height:0}
.sidebar{position:relative;top:auto;height:100vh;min-height:0;overflow:hidden}
.main{height:100vh;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:0 34px;max-width:1480px;width:100%;margin:auto}
.topbar{flex:0 0 92px;min-height:92px}
.view{min-height:0}
.view.active{display:block;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 4px 42px 0;scrollbar-width:thin;scrollbar-color:#36455d transparent;overscroll-behavior:contain}
.view.active::-webkit-scrollbar{width:8px}.view.active::-webkit-scrollbar-thumb{background:#36455d;border-radius:999px}.view.active::-webkit-scrollbar-track{background:transparent}
#view-play.active{overflow:hidden;padding-bottom:18px}.match-panel{height:100%;min-height:0}.arena-card{height:calc(100vh - 118px);min-height:650px;display:flex;flex-direction:column;overflow:hidden;padding:18px 22px}.match-header{flex:0 0 auto}.match-meta{flex:0 0 auto}
.round-showcase{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:stretch;margin:10px 0 12px;flex:0 0 auto}.round-number-block{display:grid;place-items:center;align-content:center;padding:10px;border:1px solid #e7bd5842;border-radius:10px;background:linear-gradient(180deg,#151c29,#0a1018);box-shadow:inset 0 0 30px #e7bd580b}.round-number-block small{font-size:8px;letter-spacing:.17em;color:var(--muted);font-weight:900}.round-number-block strong{font-size:54px;line-height:.9;color:var(--accent2);text-shadow:0 0 22px #e7bd5848}.round-number-block span{margin-top:7px;font-size:8px;letter-spacing:.1em;color:#9da9b9;text-align:center}.pick-showdown{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:10px;align-items:center}.pick-vs{text-align:center;font-weight:1000;font-size:15px;color:#607089;letter-spacing:.08em}.pick-card{min-width:0;min-height:82px;border:1px solid #2b374b;border-radius:10px;background:linear-gradient(180deg,#0e1622,#090e16);padding:10px 14px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;align-items:center;transition:.22s ease;overflow:hidden;position:relative}.pick-card:before{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 50% 50%,var(--pickGlow,#fff) 0,transparent 66%);transition:.2s}.pick-card small{font-size:8px;letter-spacing:.16em;color:var(--muted);font-weight:900;z-index:1}.pick-card strong{grid-row:2;font-size:25px;letter-spacing:.06em;color:#bac4d1;z-index:1}.pick-card span{grid-column:2;grid-row:1/3;align-self:center;font-size:8px;letter-spacing:.11em;color:#6f7c90;text-align:right;z-index:1}.pick-card.locked,.pick-card.revealed{border-color:#687a96;transform:translateY(-1px)}.pick-card.heads{--pickGlow:#e7bd58}.pick-card.tails{--pickGlow:#63b3ff}.pick-card.locked:before,.pick-card.revealed:before{opacity:.14}.pick-card.heads strong{color:#ffe18a}.pick-card.tails strong{color:#82c9ff}.pick-card.winner{border-color:var(--good);box-shadow:0 0 24px #67efac18}.pick-card.winner span{color:var(--good)}.pick-card.loser{border-color:#ff657744}.pick-card.loser span{color:var(--bad)}.pick-card.tie{border-color:#e7bd5860}.pick-card.tie span{color:#f5cf6e}
#view-play .arena{flex:1;min-height:280px;display:grid;align-content:center}.choice-area{flex:0 0 auto}.match-end-actions{flex:0 0 auto}
.quest.complete{border-color:#67efac38;background:linear-gradient(90deg,#0d1c18,#0a1019)}.quest.complete strong{color:#86f7be}.quest.complete .quest-reward{color:#6e7d78;font-size:10px;letter-spacing:.1em}
.contract-popup{position:fixed;right:28px;top:106px;z-index:180;display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;width:min(390px,calc(100vw - 32px));padding:14px 16px;border:1px solid #79f0b75e;border-radius:12px;background:linear-gradient(135deg,#10231d,#0b1118);box-shadow:0 18px 55px #000b,0 0 42px #60eaa22b;opacity:0;pointer-events:none;transform:translateX(26px) scale(.96)}.contract-popup.show{animation:contractToast 3.2s ease both}.contract-check{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#67efac;color:#082116;font-weight:1000;font-size:22px;box-shadow:0 0 25px #67efac55}.contract-popup small{display:block;font-size:8px;letter-spacing:.16em;color:#8be9bd;font-weight:950}.contract-popup strong{display:block;margin-top:3px;font-size:14px;color:#fff}.contract-popup span{display:block;margin-top:3px;color:#ffe178;font-weight:1000}@keyframes contractToast{0%{opacity:0;transform:translateX(30px) scale(.95)}8%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateX(18px) scale(.98)}}
@media(max-width:860px){html,body{overflow:auto;height:auto}.app-shell{height:auto;min-height:100vh;grid-template-columns:1fr}.sidebar{height:auto;overflow:visible}.main{height:auto;overflow:visible;padding:0 18px 28px}.view.active{overflow:visible;padding-bottom:28px}#view-play.active{overflow:visible}.arena-card{height:auto;min-height:0}.round-showcase{grid-template-columns:1fr}.pick-showdown{grid-template-columns:1fr 38px 1fr}.pick-card{padding:9px}.pick-card strong{font-size:18px}.contract-popup{right:16px;top:16px}}

/* v0.8 server matchmaking */
.queue-panel{height:100%;display:grid;place-items:center;padding:22px}.queue-card{width:min(720px,100%);text-align:center;padding:34px 38px;background:radial-gradient(circle at 50% 10%,#17325a55,transparent 40%),linear-gradient(180deg,#101824,#090e16);overflow:hidden}.queue-radar{width:170px;height:170px;margin:0 auto 20px;position:relative;display:grid;place-items:center}.queue-ring{position:absolute;border:1px solid #63f3ff55;border-radius:50%;animation:queuePulse 2.4s ease-out infinite}.queue-ring.r1{width:65px;height:65px}.queue-ring.r2{width:110px;height:110px;animation-delay:.5s}.queue-ring.r3{width:160px;height:160px;animation-delay:1s}.queue-core{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#111d2d;border:1px solid #63f3ff88;color:#9ff9ff;font-weight:1000;box-shadow:0 0 28px #63f3ff33}.queue-card h2{font-size:32px;letter-spacing:.06em;margin:8px 0}.queue-card>p{color:var(--muted);margin:0 auto 24px}.queue-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}.queue-stats div{padding:12px;border:1px solid #ffffff12;background:#070d15;border-radius:8px}.queue-stats small{display:block;font-size:8px;color:var(--muted);letter-spacing:.13em}.queue-stats strong{display:block;margin-top:7px;font-size:15px}.queue-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.queue-note{display:block;margin-top:15px;color:#5f6c80;letter-spacing:.08em;font-size:8px}@keyframes queuePulse{0%{transform:scale(.65);opacity:0}25%{opacity:1}100%{transform:scale(1.15);opacity:0}}@media(max-width:650px){.queue-stats{grid-template-columns:1fr 1fr}.queue-actions{grid-template-columns:1fr}}

/* v0.8.1 responsive player client: keep match controls usable on smaller screens/windows */
@media (max-width: 1120px) and (min-width: 861px) {
  .app-shell{grid-template-columns:205px minmax(0,1fr)}
  .sidebar{padding:18px 12px}.brand{margin-bottom:22px}.main{padding:0 20px}
  .topbar{height:78px}.player-summary{gap:8px}.rank-chip,.currency{padding:8px 10px}
  .arena-card{height:calc(100vh - 96px);padding:14px 16px}
  .round-showcase{grid-template-columns:125px minmax(0,1fr);gap:12px;margin:7px 0 8px}
  .round-number-block strong{font-size:44px}.pick-card{min-height:70px;padding:8px 10px}.pick-card strong{font-size:20px}
  .match-coin{width:145px;height:145px}.match-coin .coin-face{font-size:58px;border-width:7px}
}

/* Short desktop/laptop displays (e.g. 1366x768, Parallels windows). */
@media (max-height: 820px) and (min-width: 861px) {
  .topbar{height:64px}.top-title{font-size:17px}.top-subtitle{font-size:11px}.rank-chip,.currency{padding:7px 10px}
  #view-play.active{overflow-y:auto;overflow-x:hidden;padding-bottom:10px}
  .match-panel{height:auto;min-height:100%}
  .arena-card{height:auto;min-height:calc(100vh - 82px);max-height:none;overflow:visible;padding:10px 16px}
  .match-header{min-height:0}.match-header .competitor strong{font-size:clamp(13px,1.5vw,18px)}
  .match-meta{margin:5px 0;gap:10px;font-size:8px}
  .round-showcase{grid-template-columns:108px minmax(0,1fr);gap:10px;margin:5px 0 7px}
  .round-number-block{padding:7px}.round-number-block strong{font-size:36px}.round-number-block span{margin-top:4px;font-size:7px}
  .pick-card{min-height:58px;padding:7px 9px}.pick-card strong{font-size:17px}.pick-card span{font-size:7px}
  #view-play .arena{min-height:155px;padding:8px 0}.arena:before{width:230px;height:230px}
  .match-coin{width:112px;height:112px}.match-coin .coin-face{font-size:43px;border-width:5px}.match-coin .coin-face:after{inset:8px}
  .result-banner{margin-top:8px;font-size:clamp(14px,2vw,20px)}.bot-readout{min-height:16px;font-size:9px}
  .choice-area{gap:8px}.choice{min-height:52px;padding:9px 12px;font-size:12px}.choice span{font-size:22px}
  .match-end-actions{padding:6px 12px 10px}
}

/* Very short windows: prioritize the actual game controls over decorative scale. */
@media (max-height: 650px) and (min-width: 861px) {
  .topbar{height:48px}.top-subtitle{display:none}.rank-chip small{display:none}
  .arena-card{min-height:calc(100vh - 58px);padding:7px 12px}
  .match-header{padding:4px 0}.match-meta{margin:2px 0}
  .round-showcase{grid-template-columns:84px minmax(0,1fr);margin:3px 0 4px}.round-number-block{padding:4px}.round-number-block strong{font-size:28px}.round-number-block small,.round-number-block span{font-size:6px}
  .pick-card{min-height:46px;padding:5px 7px}.pick-card small{font-size:6px}.pick-card strong{font-size:14px}.pick-card span{font-size:6px}
  #view-play .arena{min-height:105px}.arena:before{width:170px;height:170px}.match-coin{width:82px;height:82px}.match-coin .coin-face{font-size:31px;border-width:4px}
  .result-banner{margin-top:5px;font-size:14px}.bot-readout{display:none}
  .choice{min-height:42px;padding:6px 10px}.choice span{font-size:18px}
}

/* Tablet / narrow browser: turn the app into a normal scrolling document and keep controls full width. */
@media (max-width: 860px) {
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
  .app-shell{display:block;min-height:100vh}.sidebar{display:none}
  .main{height:auto;min-height:100vh;width:100%;padding:0 12px 22px;overflow:visible}
  .topbar{height:auto;min-height:64px;padding:9px 0;gap:8px;flex-wrap:wrap}.player-summary{margin-left:auto;gap:6px}.rank-chip,.currency{padding:7px 9px;min-width:0}
  .view.active,#view-play.active{height:auto;min-height:0;overflow:visible;padding:0 0 22px}
  .arena-card{height:auto;min-height:0;overflow:visible;padding:12px}
  .match-header{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr)}.competitor{min-width:0}.competitor strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .match-meta{flex-wrap:wrap;justify-content:center;gap:7px;margin:7px 0}
  .round-showcase{grid-template-columns:1fr;gap:8px}.round-number-block{grid-template-columns:auto auto 1fr;display:grid;column-gap:8px;justify-content:center}.round-number-block strong{font-size:30px}.round-number-block span{margin:0;text-align:left}
  .pick-showdown{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:6px}.pick-card{min-height:58px;padding:7px}.pick-card strong{font-size:15px}.pick-card span{font-size:6px}
  #view-play .arena{min-height:210px;padding:12px 0}.arena:before{width:min(280px,75vw);height:min(280px,75vw)}
  .match-coin{width:120px;height:120px}.match-coin .coin-face{font-size:46px;border-width:5px}
  .choice-area{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice{min-width:0;min-height:58px;padding:10px;font-size:12px}.choice span{font-size:25px}
  .match-end-actions{padding:8px 0 0;flex-wrap:wrap}
  .queue-panel{height:auto;padding:8px}.queue-card{padding:24px 16px}.queue-radar{width:120px;height:120px}.queue-ring.r3{width:115px;height:115px}.queue-ring.r2{width:82px;height:82px}
}

/* Phones / very narrow windows. */
@media (max-width: 520px) {
  .main{padding-left:8px;padding-right:8px}.top-title{font-size:15px}.player-summary{width:100%;justify-content:flex-end}.topbar .top-subtitle{display:none}
  .card{border-radius:10px}.arena-card{padding:8px}
  .match-header{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)}.versus{font-size:10px}.competitor .tag,.competitor small{font-size:7px}.competitor strong{font-size:12px}
  .pick-showdown{grid-template-columns:1fr}.pick-vs{display:none}.pick-card{grid-template-columns:1fr auto;min-height:48px}.pick-card strong{font-size:14px}
  #view-play .arena{min-height:180px}.match-coin{width:100px;height:100px}.match-coin .coin-face{font-size:38px}
  .choice-area{position:sticky;bottom:0;z-index:12;background:linear-gradient(180deg,#090f1800,#090f18 22%);padding-top:12px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .choice{min-height:54px}.queue-stats{grid-template-columns:1fr 1fr}
  .victory-copy{width:92vw;padding:20px 12px}.victory-copy h1,.victory-overlay.risk-allin .victory-copy h1{font-size:38px}.payout-counter{font-size:20px}
}

/* v0.9: match lock + dedicated gacha */
.match-locked #nav button:disabled{opacity:.28;filter:saturate(.25);cursor:not-allowed;transform:none;box-shadow:none}
.match-leave-btn{position:sticky;top:0;z-index:28;margin:0 0 10px auto;display:block;border-color:rgba(255,90,90,.42);background:rgba(55,10,16,.88);backdrop-filter:blur(10px)}
.gacha-grid{display:grid;grid-template-columns:repeat(4,minmax(230px,1fr));gap:16px;align-items:stretch;margin-bottom:18px}
.capsule-tier{display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative}
.capsule-tier .odds-table{margin:12px 0 16px;flex:1}
.capsule-tier-art{height:92px;display:grid;place-items:center;margin:-2px -2px 14px;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.12),transparent 56%);border-bottom:1px solid rgba(255,255,255,.07)}
.capsule-tier-art span{font-size:52px;line-height:1;filter:drop-shadow(0 0 18px rgba(255,255,255,.28))}
.capsule-tier-refined{box-shadow:inset 0 0 0 1px rgba(115,180,255,.12)}
.capsule-tier-prestige{box-shadow:inset 0 0 0 1px rgba(193,126,255,.16)}
.capsule-tier-apex{box-shadow:inset 0 0 0 1px rgba(255,197,82,.22),0 0 32px rgba(255,176,56,.07)}
.gacha-reveal-card{max-width:900px;margin:0 auto 24px}
.casino-single{max-width:760px;margin:0 auto}
@media(max-width:1280px){.gacha-grid{grid-template-columns:repeat(2,minmax(240px,1fr))}}
@media(max-width:720px){.gacha-grid{grid-template-columns:1fr}.match-leave-btn{width:100%;position:relative}.capsule-tier-art{height:72px}}

/* v0.9.2 version HUD */
.client-version{font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:900;white-space:nowrap;padding:6px 8px;border:1px solid #ffffff12;border-radius:7px;background:#ffffff05}
@media(max-width:600px){.client-version{font-size:9px;padding:5px 6px}}

/* v0.9.3 rotating contracts */
.contract-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.contract-title small{font-size:9px;letter-spacing:.12em;color:var(--muted);font-weight:900}.contract-title small strong{color:var(--accent);font-size:10px}.quest-list{max-height:430px;overflow:auto;padding-right:4px}

/* v0.9.4 queue counts + post-match wager */
.mode-queue-count{display:flex;justify-content:space-between;align-items:center;margin:12px 0 10px;padding:9px 11px;border:1px solid #ffffff10;border-radius:7px;background:#070d15;color:var(--muted);font-size:9px;letter-spacing:.12em}.mode-queue-count strong{font-size:18px;color:#8ff6ff}.pre-match-wager{position:absolute;inset:0;z-index:25;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 20%,#172a4866,#05080ddf 62%);backdrop-filter:blur(8px)}.pre-match-wager.hidden{display:none}.pre-match-wager-card{width:min(620px,94%);padding:30px}.pre-match-wager-card h2{font-size:34px;margin:7px 0}.pre-match-wager-card>p{color:var(--muted);line-height:1.5}.pre-match-wager-card>small{display:block;text-align:center;margin-top:12px;color:#8fa1ba;letter-spacing:.08em}.match-panel{position:relative}


/* v0.9.5 — cinematic match HUD collapse */
@media(min-width:861px){
  .app-shell{
    transition:grid-template-columns .32s cubic-bezier(.22,.75,.18,1);
  }
  .sidebar{
    transform:translateX(0);
    opacity:1;
    transition:
      transform .32s cubic-bezier(.22,.75,.18,1),
      opacity .22s ease,
      padding .32s cubic-bezier(.22,.75,.18,1),
      border-color .22s ease;
    will-change:transform;
  }
  body.match-locked .app-shell{
    grid-template-columns:0 minmax(0,1fr);
  }
  body.match-locked .sidebar{
    transform:translateX(-105%);
    opacity:0;
    pointer-events:none;
    padding-left:0;
    padding-right:0;
    border-right-color:transparent;
    overflow:hidden;
  }
  body.match-locked .main{
    max-width:1600px;
  }
}
@media(max-width:0px){
  .app-shell,.sidebar{transition:none!important}
}


/* v0.9.7 — manual quest claims */
.quest.ready{
  border-color:rgba(255,205,90,.42);
  background:linear-gradient(90deg,rgba(255,205,90,.08),rgba(255,255,255,.01));
}
.quest.ready strong{letter-spacing:.02em}
.quest-claim{
  min-width:132px;
  padding:.62rem .9rem;
  white-space:nowrap;
}
@media(max-width:620px){
  .quest.ready{align-items:flex-start;gap:.7rem}
  .quest-claim{min-width:0;width:100%}
}


/* v0.10.0 — leaderboards, profile cards, balanced modes, coin inspection */
.normalized-modes{align-items:stretch}.normalized-modes .mode-card{display:flex;flex-direction:column;min-height:440px}.mode-card-copy{display:flex;flex-direction:column;flex:1}.mode-details{margin-top:auto;display:grid;gap:10px}.mode-card-footer{margin-top:18px;display:grid;gap:10px}.collection-actions{display:flex;gap:8px;flex-wrap:wrap}.leaderboard-tabs{display:flex;gap:8px;margin:0 0 14px}.leaderboard-tabs button{padding:11px 16px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#aeb9dc;font-weight:800;cursor:pointer}.leaderboard-tabs button.active{background:rgba(115,94,255,.16);border-color:rgba(131,112,255,.45);color:white}.leaderboard-list{display:grid}.leader-row{display:grid;grid-template-columns:58px minmax(0,1fr) minmax(150px,auto);align-items:center;gap:14px;padding:14px 8px;border-bottom:1px solid rgba(255,255,255,.07)}.leader-row:last-child{border-bottom:0}.leader-place{font-size:18px;font-weight:900;color:#8490b6}.leader-player{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;min-width:0}.leader-player small{grid-column:2;color:#7f89aa}.leader-metrics{text-align:right;display:grid;gap:2px}.leader-metrics strong{font-size:16px}.leader-metrics small{color:#7f89aa}.username-link{appearance:none;border:0;background:none;color:#eef2ff;font:inherit;font-weight:900;text-align:left;padding:0;cursor:pointer;width:max-content;max-width:100%;overflow:hidden;text-overflow:ellipsis}.username-link:hover{text-decoration:underline}.user-coin-badge{width:31px;height:31px;display:inline-grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#11162a;font-weight:900;flex:0 0 auto;box-shadow:inset 0 0 0 2px rgba(255,255,255,.025)}.profile-link{cursor:pointer}.profile-link:hover{text-decoration:underline}.profile-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}.profile-hero h2{margin:5px 0}.profile-status{font-size:11px;letter-spacing:.12em;color:#63f4bb;font-weight:900}.profile-equipped,.public-profile-head{display:flex;align-items:center;gap:12px}.profile-equipped small,.public-equipped small{display:block;color:#7f89aa;letter-spacing:.09em}.profile-equipped strong{display:block;margin-top:2px}.public-profile-head h2{margin:0 0 4px}.public-profile-head .user-coin-badge{width:54px;height:54px;font-size:22px}.public-equipped{margin:18px 0;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.025)}.public-equipped strong{display:block;margin-top:4px}.profile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.profile-grid>div{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.025);display:grid;gap:4px}.profile-grid small{color:#7f89aa}.profile-grid span{font-size:11px;color:#8c97ba}.inspect-panel{width:min(680px,92vw)}.inspect-stage{height:330px;display:grid;place-items:center;perspective:900px;background:radial-gradient(circle,rgba(124,104,255,.12),transparent 58%);overflow:hidden;border-radius:14px;margin:14px 0}.inspect-coin-model{position:relative;width:210px;height:210px;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.22,.75,.18,1)}.inspect-face{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;font-size:70px;font-weight:950;backface-visibility:hidden;border:8px double rgba(255,255,255,.35);background:radial-gradient(circle at 35% 30%,#e1e4ec,#8e96a8 42%,#34394a 72%,#aeb5c5);box-shadow:inset 0 0 30px rgba(0,0,0,.35),0 24px 45px rgba(0,0,0,.42)}.inspect-back{transform:rotateY(180deg)}.inspect-edge{position:absolute;left:100px;top:8px;width:10px;height:194px;background:repeating-linear-gradient(0deg,#7b8291 0 3px,#c6cad3 3px 5px);transform:rotateY(90deg);transform-origin:center;border-radius:5px}.inspect-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.player-profile-panel{width:min(620px,92vw)}
@media(max-width:680px){.leader-row{grid-template-columns:42px minmax(0,1fr)}.leader-metrics{grid-column:2;text-align:left}.profile-grid{grid-template-columns:1fr 1fr}.profile-hero{align-items:flex-start;flex-direction:column}.inspect-stage{height:250px}.inspect-coin-model{width:160px;height:160px}.inspect-edge{left:76px;height:146px}.inspect-face{font-size:52px}}


/* v0.10.1 — login presentation + aligned play cards */
.auth-body{position:relative;overflow:hidden;background:#070a10!important}
.auth-body:before{content:"";position:fixed;inset:0;background:linear-gradient(115deg,rgba(4,8,14,.15),rgba(4,8,14,.82)),repeating-linear-gradient(90deg,transparent 0 89px,rgba(255,255,255,.018) 90px),repeating-linear-gradient(0deg,transparent 0 89px,rgba(255,255,255,.014) 90px);pointer-events:none}
.auth-ambient{position:fixed;border-radius:50%;filter:blur(1px);pointer-events:none}.auth-ambient-a{width:680px;height:680px;left:-260px;top:-250px;background:radial-gradient(circle,rgba(56,112,255,.22),transparent 67%)}.auth-ambient-b{width:620px;height:620px;right:-260px;bottom:-300px;background:radial-gradient(circle,rgba(108,67,255,.18),transparent 67%)}
.auth-shell{position:relative;z-index:2;display:grid!important;grid-template-columns:minmax(360px,1.15fr) minmax(360px,520px);align-items:center!important;gap:clamp(40px,7vw,120px);width:min(1180px,calc(100vw - 64px));min-height:100vh;margin:auto;padding:48px 0!important}
.auth-presentation{align-self:center}.auth-brand{margin:0 0 clamp(54px,9vh,100px)!important}.auth-brand .brand-mark{width:54px;height:54px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:linear-gradient(145deg,#151d2b,#0b1018);font-size:26px;box-shadow:inset 0 0 24px rgba(104,166,255,.08)}
.auth-pitch h1{font-size:clamp(52px,6.7vw,94px);line-height:.88;letter-spacing:-.055em;margin:16px 0 24px;max-width:680px}.auth-pitch>p{max-width:600px;font-size:15px;line-height:1.75;color:#9aa7ba}.auth-feature-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:28px}.auth-feature-row span{padding:8px 10px;border:1px solid rgba(255,255,255,.09);border-radius:7px;background:rgba(255,255,255,.025);font-size:9px;font-weight:900;letter-spacing:.11em;color:#8593aa}
.auth-card{width:100%!important;padding:34px!important;border-radius:14px!important;border-color:rgba(255,255,255,.1)!important;background:linear-gradient(155deg,rgba(17,23,34,.97),rgba(8,12,19,.985))!important;box-shadow:0 34px 100px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.035)!important}.auth-card-top h2{margin:7px 0 8px;font-size:30px}.auth-card-top p{margin:0;color:#8996a9;line-height:1.55}.auth-tabs{display:grid!important;grid-template-columns:1fr 1fr;margin:26px 0 22px!important}.auth-card input{height:49px;background:#080d15!important;border-color:rgba(255,255,255,.1)!important;transition:border-color .15s,box-shadow .15s}.auth-card input:focus{outline:none;border-color:#6b8dff!important;box-shadow:0 0 0 3px rgba(89,117,255,.11)}.auth-note{text-align:center;border-top:1px solid rgba(255,255,255,.07);padding-top:18px!important;font-size:9px!important;letter-spacing:.1em!important}.auth-note strong{color:#aebbd0}.auth-message{font-size:12px}
.mode-grid{align-items:stretch}.mode-card{display:flex!important;flex-direction:column;height:100%}.mode-card-copy{display:flex;flex-direction:column;flex:1}.mode-details{margin-top:auto}.mode-card-footer{margin-top:22px}
@media(max-width:850px){.auth-body{overflow:auto}.auth-shell{grid-template-columns:1fr;width:min(560px,calc(100vw - 32px));padding:28px 0 46px!important}.auth-presentation{display:none}.auth-card{padding:26px!important}}

/* v0.10.3 canonical stored coin artwork */
.user-coin-badge{overflow:hidden;display:inline-grid;place-items:center;padding:0!important;background:rgba(7,10,16,.65)!important}
.user-coin-model{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.collection-coin-model,.modal-coin-model,.instance-coin-model,.inspect-coin-asset,.match-coin-model{display:block;width:100%;height:100%;object-fit:contain}
.instance-icon,.modal-coin,.coin-face,.inspect-front,.inspect-back{overflow:hidden}
.instance-icon{padding:2px}.modal-coin{padding:4px}

/* v0.10.3 compact login redesign */
.auth-body{min-height:100vh;overflow:auto!important;background:#070a10!important}
.auth-body:before{background:linear-gradient(105deg,rgba(4,8,14,.08),rgba(4,8,14,.9)),linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px)!important;background-size:auto,72px 72px,72px 72px!important}
.auth-ambient-a{width:520px!important;height:520px!important;left:-205px!important;top:-220px!important;opacity:.7}
.auth-ambient-b{width:470px!important;height:470px!important;right:-210px!important;bottom:-220px!important;opacity:.58}
.auth-shell{width:min(1060px,calc(100vw - 64px))!important;min-height:100vh!important;grid-template-columns:minmax(0,1fr) 420px!important;gap:clamp(52px,7vw,96px)!important;padding:34px 0!important;align-items:center!important}
.auth-presentation{max-width:590px}
.auth-brand{margin:0 0 52px!important;display:flex;align-items:center;gap:13px}
.auth-brand .brand-mark{width:46px!important;height:46px!important;padding:3px!important;border-radius:10px!important;overflow:hidden;font-size:0!important}
.auth-brand .brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
.auth-brand .brand-title{font-size:14px;letter-spacing:.14em}.auth-brand .brand-sub{font-size:8px;letter-spacing:.15em;color:#66748a;margin-top:3px}
.auth-pitch h1{font-size:clamp(54px,6.1vw,80px)!important;line-height:.89!important;margin:12px 0 18px!important;letter-spacing:-.058em!important}
.auth-pitch>p{font-size:13.5px!important;line-height:1.62!important;max-width:530px!important;color:#8d9aaf!important}
.auth-feature-row{margin-top:20px!important}.auth-feature-row span{padding:7px 9px!important;font-size:8px!important;border-radius:5px!important}
.auth-card{padding:27px 29px 22px!important;border-radius:12px!important;box-shadow:0 26px 80px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.035)!important}
.auth-card-top h2{font-size:26px!important;margin:6px 0 5px!important}.auth-card-top p{font-size:13px!important;line-height:1.42!important}
.auth-tabs{margin:19px 0 17px!important}.auth-tabs button{height:36px!important;padding:0 11px!important;font-size:10px!important}
.auth-card form{display:grid;gap:13px}.auth-card label{font-size:9px!important;letter-spacing:.12em!important}
.auth-card input{height:42px!important;margin-top:6px!important;padding:0 12px!important}.auth-card #submitBtn{height:42px!important;margin-top:2px!important}
.auth-message{min-height:12px!important;margin:0!important}
.auth-note{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin-top:17px!important;padding-top:14px!important;font-size:7.4px!important;line-height:1.3!important;color:#58667a!important}.auth-note strong{color:#8b9ab0!important}
@media(max-width:850px){.auth-shell{width:min(450px,calc(100vw - 30px))!important;padding:24px 0 36px!important}.auth-card{padding:24px 23px 21px!important}}

/* v0.10.5 — explicit player presence */
.status-offline{color:#68758a!important}
.profile-activity{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:3px 7px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  color:#98a5b8;
  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
}

/* v0.10.6 — proper circular coin thickness */
.coin,.inspect-coin-model{transform-style:preserve-3d!important}
.coin-edge-stack{position:absolute;inset:0;display:block;transform-style:preserve-3d;pointer-events:none}
.coin-edge-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:50%;backface-visibility:visible;pointer-events:none}
.coin-face.heads{transform:translateZ(var(--coin-half-depth,7px))!important}
.coin-face.tails{transform:rotateY(180deg) translateZ(var(--coin-half-depth,7px))!important}
.coin-face{border:0!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important;overflow:visible!important}
.coin-face:after{display:none!important}
.coin-face .match-coin-model{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.35))}
.inspect-face{border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.inspect-front{transform:translateZ(var(--coin-half-depth,7px))!important}
.inspect-back{transform:rotateY(180deg) translateZ(var(--coin-half-depth,7px))!important}
.inspect-coin-model .coin-edge-stack{inset:0}
.inspect-coin-model .coin-edge-layer{width:100%;height:100%}
.inspect-edge{display:none!important}
/* Flat/icon contexts intentionally remain a single heads texture. */
.user-coin-model,.collection-coin-model,.instance-coin-model,.modal-coin-model{transform:none!important}

/* v0.11.0 — wager validation, social match layer, two-axis victory choreography */
.custom-stake.invalid-wager{
  animation:invalidWagerFlash .68s ease;
  border-color:#ff4655!important;
  box-shadow:0 0 0 2px rgba(255,70,85,.25),0 0 28px rgba(255,70,85,.22)!important;
}
.custom-stake.invalid-wager input{color:#ff8791!important}
@keyframes invalidWagerFlash{0%,100%{transform:translateX(0)}18%{transform:translateX(-7px)}36%{transform:translateX(6px)}54%{transform:translateX(-4px)}72%{transform:translateX(3px)}}
.wager-lock-timer{display:flex;align-items:baseline;justify-content:center;gap:7px;margin:10px 0 13px;padding:9px 12px;border:1px solid #26344a;border-radius:7px;background:#090f18;color:#7f8da3;font-size:9px;font-weight:900;letter-spacing:.1em}
.wager-lock-timer strong{font-size:20px;color:#dce7f8;font-variant-numeric:tabular-nums}
.wager-lock-timer.warning{border-color:#b83b49;background:rgba(120,19,32,.18)}
.wager-lock-timer.warning strong{color:#ff5b68}
.task-stack{display:grid;gap:16px}
.daily-contract-card{border-color:rgba(255,199,83,.18)}
.daily-task{background:linear-gradient(90deg,rgba(255,193,68,.045),#0a1019)}
.daily-task.ready{border-color:rgba(255,195,70,.5)!important}
.match-username{appearance:none;border:0;background:transparent;padding:0;color:inherit;font:inherit;font-weight:950;cursor:pointer}
.match-username:hover{text-decoration:underline;color:#dce9ff}
.match-social{margin:10px 0 4px;border-top:1px solid rgba(255,255,255,.055);padding-top:9px}
.match-spectators,.spectator-count{display:flex;gap:7px;align-items:center;flex-wrap:wrap;color:#77859b;font-size:9px;font-weight:850;letter-spacing:.07em}
.spectator-name,.spectator-count button,.spectator-player button{appearance:none;border:0;background:transparent;color:#a9bad1;padding:0;cursor:pointer;font:inherit;font-weight:850}
.spectator-name:hover,.spectator-count button:hover,.spectator-player button:hover{color:#fff;text-decoration:underline}
.match-emote-feed{display:flex;gap:6px;flex-wrap:wrap;min-height:24px;margin-top:8px}
.match-emote{display:flex;gap:5px;align-items:center;padding:4px 7px;border-radius:999px;background:#101a29;border:1px solid #233149;font-size:9px}
.match-emote strong{color:#9db5d7}.match-emote span{font-weight:900;color:#eef4ff}
.match-emote.spectator-emote{background:#11131d;border-color:#2b2b3d;opacity:.86}
.match-emote-bar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:8px}
.match-emote-bar>span{font-size:8px;color:#65748a;font-weight:900;letter-spacing:.12em;margin-right:3px}
.match-emote-bar button{border:1px solid #26344a;background:#0c131e;color:#9ba9bc;border-radius:5px;padding:5px 7px;font-size:8px;font-weight:900;cursor:pointer}
.match-emote-bar button:hover{border-color:#536b91;color:#fff}
.spectator-panel{margin-top:18px}
.spectator-card{max-width:900px;margin:0 auto}
.spectator-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.spectator-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;margin:28px 0;padding:24px;border:1px solid #202c40;background:radial-gradient(circle at center,rgba(73,112,185,.1),transparent 55%),#080d15;border-radius:10px}
.spectator-player{text-align:center}.spectator-player button,.spectator-player strong{font-size:20px}.spectator-player small{display:block;margin-top:5px;color:#718198}
.spectator-center{text-align:center}.spectator-center small{display:block;color:#6f7d91;font-size:9px;letter-spacing:.1em}.spectator-center strong{display:block;font-size:38px;margin-top:7px}
.spectator-feed{min-height:44px;margin:16px 0}
.profile-spectate-btn{margin-top:16px}
.victory-performance{margin-top:8px;font-size:12px;font-weight:950;letter-spacing:.16em;color:#becde3}
.victory-overlay.perf-flawless .victory-copy{animation:perfFlawless .72s cubic-bezier(.16,.9,.2,1)}
.victory-overlay.perf-dominant .victory-copy{animation:perfDominant .78s cubic-bezier(.2,.8,.2,1)}
.victory-overlay.perf-clutch .victory-copy{animation:perfClutch .9s cubic-bezier(.2,.8,.2,1)}
@keyframes perfFlawless{0%{opacity:0;transform:scale(.72) translateY(25px);filter:blur(8px)}55%{transform:scale(1.09) translateY(-4px)}100%{opacity:1;transform:scale(1);filter:none}}
@keyframes perfDominant{0%{opacity:0;transform:translateX(-90px) skewX(-7deg)}65%{transform:translateX(8px) skewX(1deg)}100%{opacity:1;transform:none}}
@keyframes perfClutch{0%{opacity:0;transform:scale(.9)}28%{opacity:1;transform:scale(1.06)}42%{transform:scale(.98)}58%{transform:scale(1.035)}100%{transform:scale(1)}}
@media(max-width:700px){.spectator-vs{grid-template-columns:1fr;gap:14px}.spectator-center{order:-1}.home-activity-grid{grid-template-columns:1fr!important}}


/* v0.11.1 — login input/autofill readability */
.auth-card input,
.auth-card input[type="text"],
.auth-card input[type="password"]{
  color:#f4f7ff!important;
  caret-color:#f4f7ff!important;
  -webkit-text-fill-color:#f4f7ff!important;
  background:#080d15!important;
}
.auth-card input::placeholder{
  color:#697589!important;
  opacity:1!important;
  -webkit-text-fill-color:#697589!important;
}
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus,
.auth-card input:-webkit-autofill:active{
  -webkit-text-fill-color:#f4f7ff!important;
  caret-color:#f4f7ff!important;
  -webkit-box-shadow:0 0 0 1000px #080d15 inset!important;
  box-shadow:0 0 0 1000px #080d15 inset!important;
  border-color:rgba(255,255,255,.14)!important;
  transition:background-color 9999s ease-out 0s!important;
}
.auth-card input:-webkit-autofill:focus{
  border-color:#6b8dff!important;
  -webkit-box-shadow:0 0 0 1000px #080d15 inset,0 0 0 3px rgba(89,117,255,.11)!important;
  box-shadow:0 0 0 1000px #080d15 inset,0 0 0 3px rgba(89,117,255,.11)!important;
}

/* v0.11.2 — flat coin art uses the coin's own authored rim; no universal gold frame */
.mini-coin{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:inherit!important;
  overflow:visible!important;
}
.mini-coin .collection-coin-model{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.48));
}
.modal-coin{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:inherit!important;
}
.modal-coin .modal-coin-model{width:100%;height:100%;object-fit:contain}

/* Capsule rarity rows are explicitly explorable. */
.odds-table .odds-row{
  appearance:none;
  width:100%;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:10px;
  text-align:left;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:transparent;
  color:inherit;
  padding:9px 5px;
  cursor:pointer;
}
.odds-table .odds-row:hover{
  background:rgba(89,126,255,.07);
  box-shadow:inset 2px 0 #6f8cff;
}
.odds-table .odds-row strong{color:#f1f5ff}
.odds-table .odds-row i{
  font-style:normal;
  color:#617088;
  font-size:7px;
  font-weight:900;
  letter-spacing:.1em;
}
.capsule-pool-panel{width:min(820px,92vw)}
.capsule-pool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}
.capsule-pool-coin{
  display:grid;
  grid-template-columns:78px 1fr;
  align-items:center;
  gap:14px;
  min-height:106px;
  padding:13px;
  border:1px solid rgba(255,255,255,.09);
  border-left:2px solid var(--rarity,#8290a5);
  border-radius:9px;
  background:#090f18;
}
.capsule-pool-coin-art{width:72px;height:72px}
.capsule-pool-coin-model{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.capsule-pool-coin strong{display:block;font-size:15px;margin:3px 0 5px}
.capsule-pool-coin small{display:block;color:#718096;font-size:10px;line-height:1.45}
.capsule-exclusive{
  display:inline-flex;
  margin:1px 0 6px;
  padding:3px 6px;
  border:1px solid color-mix(in srgb,var(--rarity,#fff) 45%,transparent);
  border-radius:4px;
  color:var(--rarity,#fff);
  font-size:7px;
  font-weight:950;
  letter-spacing:.1em;
}
@media(max-width:650px){.capsule-pool-grid{grid-template-columns:1fr}}

/* v0.11.3 rarity-specific display stages */
.shop-item.rarity-common .coin-preview,.collection-type.rarity-common .collection-art{background:radial-gradient(circle,#27313d,#0d141e 48%,#070b11 78%)}
.shop-item.rarity-rare .coin-preview,.collection-type.rarity-rare .collection-art{background:radial-gradient(circle,#174272,#0b1d35 44%,#070b12 78%)}
.shop-item.rarity-epic .coin-preview,.collection-type.rarity-epic .collection-art{background:radial-gradient(circle,#4d286e,#211038 43%,#080a12 78%)}
.shop-item.rarity-legendary .coin-preview,.collection-type.rarity-legendary .collection-art{background:radial-gradient(circle,#654715,#2a1b08 42%,#080a0f 78%)}
.shop-item.rarity-mythic .coin-preview,.collection-type.rarity-mythic .collection-art{background:radial-gradient(circle,#5b2048,#2a1432 37%,#11162c 58%,#070910 80%)}
.shop-item.rarity-relic .coin-preview,.collection-type.rarity-relic .collection-art{background:conic-gradient(from 220deg,#12323e,#38224d,#5a3b16,#12323e)}
.locked-coin-slot{cursor:default!important;border-style:dashed!important;border-color:#232c3b!important}.locked-coin-slot:hover{transform:none!important;box-shadow:none!important}
.locked-coin-slot .collection-art{background:radial-gradient(circle,#111721,#070a10 72%)!important}.coin-silhouette img{filter:brightness(0) drop-shadow(0 8px 15px #000)!important;opacity:.84}.collection-lock{position:absolute;right:12px;bottom:10px;width:28px;height:28px;display:grid;place-items:center;border:1px solid #343d4c;border-radius:50%;background:#070a10;color:#4f5a69;font-weight:1000}.locked-coin-slot h3{color:#697485;letter-spacing:.14em}.locked-coin-slot .collection-footer{color:#586474}

/* compact match leave */
.match-leave-compact{margin-left:auto;padding:5px 9px;border:1px solid rgba(255,82,99,.4);border-radius:5px;background:rgba(91,16,26,.28);color:#ff7b87;font-size:8px;font-weight:950;letter-spacing:.1em;cursor:pointer}.match-meta{align-items:center}

/* reliable 3D gameplay coin */
.coin-shell{perspective:900px!important}.coin,.match-coin{transform-style:preserve-3d!important;will-change:transform}.coin-face,.coin-face img{backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important}.coin-face.heads{transform:translateZ(var(--coin-half-depth,7px))!important}.coin-face.tails{transform:rotateY(180deg) translateZ(var(--coin-half-depth,7px))!important}.coin.show-tails{transform:rotateY(180deg)!important}.coin.flipping-heads{animation:flipHeads3D .92s cubic-bezier(.16,.72,.22,1) forwards!important}.coin.flipping-tails{animation:flipTails3D .92s cubic-bezier(.16,.72,.22,1) forwards!important}
@keyframes flipHeads3D{0%{transform:rotateX(-4deg) rotateY(0) translateY(0) scale(1)}46%{transform:rotateX(14deg) rotateY(1080deg) translateY(-78px) scale(1.13)}100%{transform:rotateX(0) rotateY(2160deg) translateY(0) scale(1)}}
@keyframes flipTails3D{0%{transform:rotateX(-4deg) rotateY(0) translateY(0) scale(1)}46%{transform:rotateX(14deg) rotateY(1170deg) translateY(-78px) scale(1.13)}100%{transform:rotateX(0) rotateY(2340deg) translateY(0) scale(1)}}

/* spatial emotes */
.match-username{position:relative;overflow:visible!important}.username-emote-pop{position:absolute;left:50%;bottom:125%;z-index:25;min-width:48px;height:48px;padding:0 8px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#f7fbff,#8eb7ff 38%,#223c76 72%);border:2px solid #dce9ff;color:#07101f;font-size:19px;font-weight:1000;box-shadow:0 0 34px rgba(99,165,255,.55);pointer-events:none;animation:usernameEmote 2.55s ease-out forwards}
@keyframes usernameEmote{0%{opacity:0;transform:translate(-50%,12px) scale(.35)}14%{opacity:1;transform:translate(-50%,-8px) scale(1.18)}28%{transform:translate(-50%,-4px) scale(1)}72%{opacity:1;transform:translate(-50%,-16px)}100%{opacity:0;transform:translate(-50%,-42px) scale(.78)}}
.spatial-emote{position:absolute;z-index:1;pointer-events:none}.spectator-bg-emote{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(37,53,77,.52);border:1px solid rgba(155,185,230,.22);color:#bac9df;font-size:11px;font-weight:1000;animation:spectatorEmote 2.45s ease-out forwards}
@keyframes spectatorEmote{0%{opacity:0;transform:translateY(15px) scale(.45)}18%{opacity:.7;transform:translateY(0) scale(1)}70%{opacity:.5}100%{opacity:0;transform:translateY(-55px) scale(.72)}}
#matchEmoteFeed,.spectator-feed{min-height:0!important}

/* skippable result overlays */
.victory-overlay{cursor:pointer;pointer-events:auto}.victory-skip-hint{display:block;margin-top:20px;color:#69778b!important;font-size:8px!important;letter-spacing:.16em!important}.victory-overlay.victory-dismiss{opacity:0!important;transition:opacity .16s ease!important}

/* fullscreen gacha cinematic */
.capsule-cinematic{position:fixed;inset:0;z-index:180;display:grid;place-items:center;background:#04070ded;backdrop-filter:blur(11px);opacity:0;transition:opacity .22s ease;cursor:pointer;overflow:hidden}.capsule-cinematic.show{opacity:1}.capsule-cinematic-bg{position:absolute;inset:-15%;background:radial-gradient(circle,#18243d 0,#090d16 38%,#030509 72%)}.capsule-cinematic-rays{position:absolute;width:110vmin;height:110vmin;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.035) 0 2deg,transparent 2deg 10deg);mask-image:radial-gradient(circle,#000 0 38%,transparent 68%);animation:slowSpin 18s linear infinite}.capsule-cinematic-center{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;max-width:900px;padding:30px}.capsule-cinema-orb{width:170px;height:170px;border-radius:50%;display:grid;place-items:center;margin:25px 0;border:2px solid #536681;background:radial-gradient(circle,#1d2b42,#090d15 68%);font-size:66px;box-shadow:0 0 45px rgba(93,132,210,.3)}.capsule-cinema-orb.charging{animation:cinemaCharge 1.05s ease-in-out infinite}
@keyframes cinemaCharge{0%{transform:scale(.82) rotate(0);box-shadow:0 0 25px #536fff55}50%{transform:scale(1.08) rotate(180deg);box-shadow:0 0 110px #b8d5ff88}100%{transform:scale(.82) rotate(360deg);box-shadow:0 0 25px #b053ff55}}
.capsule-cinematic.phase-three .capsule-cinematic-rays{animation-duration:5s}.capsule-cinema-orb.pre-reveal{animation:preRevealPulse .36s ease-in-out infinite alternate}@keyframes preRevealPulse{to{transform:scale(1.22);filter:brightness(2.2)}}.capsule-cinema-orb.revealed{width:260px;height:260px;border:0;background:transparent;box-shadow:none;animation:cinemaReveal .78s cubic-bezier(.12,.9,.18,1.15)}@keyframes cinemaReveal{0%{transform:scale(.08) rotate(-70deg);filter:brightness(5) blur(6px)}65%{transform:scale(1.16) rotate(5deg);filter:brightness(1.5)}100%{transform:scale(1);filter:none}}.capsule-cinema-coin{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 24px 55px rgba(0,0,0,.72))}.capsule-cinema-rarity{font-size:14px;font-weight:1000;letter-spacing:.22em;color:#9daac0}.capsule-cinematic h1{font-size:44px;margin:12px 0 6px}.capsule-cinema-meta{font-size:11px;font-weight:900;letter-spacing:.13em;color:#8997aa}.capsule-cinema-hint{margin-top:26px;font-size:8px;font-weight:900;letter-spacing:.17em;color:#66758b}
.rarity-cinema-rare.revealed .capsule-cinematic-bg{background:radial-gradient(circle,#174b89,#0a1b33 38%,#030509 72%)}.rarity-cinema-epic.revealed .capsule-cinematic-bg{background:radial-gradient(circle,#5d2990,#221038 38%,#030509 72%)}.rarity-cinema-legendary.revealed .capsule-cinematic-bg{background:radial-gradient(circle,#9a6515,#39230b 38%,#030509 72%)}.rarity-cinema-mythic.revealed .capsule-cinematic-bg{background:conic-gradient(#5a1541,#192d66,#4b1738,#5a1541)}.rarity-cinema-relic.revealed .capsule-cinematic-bg{background:conic-gradient(#164854,#512d68,#765217,#164854)}

/* enlarged interactive inspect stage */
.inspect-panel{width:min(1120px,94vw)!important}.inspect-stage{height:520px!important;min-height:520px!important;cursor:grab;touch-action:none;user-select:none}.inspect-stage.dragging{cursor:grabbing}.inspect-coin-model{width:330px!important;height:330px!important}.inspect-controls{justify-content:center!important}.inspect-drag-hint{text-align:center;margin-top:12px;color:#66758b;font-size:8px;font-weight:900;letter-spacing:.13em}

/* v0.11.5 — rank identity system */
.rank-panel,.rank-coin-frame{
  --rank:#8a93a1;--rank2:#4a515d;--rankGlow:rgba(138,147,161,.18);
}
.rank-iron{--rank:#8d98a5;--rank2:#444d58;--rankGlow:rgba(141,152,165,.18)}
.rank-bronze{--rank:#c6814d;--rank2:#65351e;--rankGlow:rgba(198,129,77,.24)}
.rank-silver{--rank:#d5dee8;--rank2:#667484;--rankGlow:rgba(213,222,232,.22)}
.rank-gold{--rank:#f3c64f;--rank2:#8e5e0b;--rankGlow:rgba(243,198,79,.28)}
.rank-platinum{--rank:#6fe6d4;--rank2:#216d70;--rankGlow:rgba(111,230,212,.27)}
.rank-diamond{--rank:#70c9ff;--rank2:#6555d7;--rankGlow:rgba(112,201,255,.3)}
.rank-master{--rank:#d678ff;--rank2:#7829a7;--rankGlow:rgba(214,120,255,.32)}
.rank-grandmaster{--rank:#ff6a58;--rank2:#8e1822;--rankGlow:rgba(255,106,88,.34)}
.rank-coinqueror{--rank:#ffe47e;--rank2:#8b43d7;--rankGlow:rgba(255,228,126,.42)}

.home-rank-card{padding:0!important;overflow:hidden!important;min-height:132px}
.rank-panel{
  position:relative;
  min-height:130px;
  width:100%;
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 21px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--rank) 55%,transparent);
  border-radius:13px;
  background:
    radial-gradient(circle at 16% 45%,var(--rankGlow),transparent 37%),
    linear-gradient(125deg,color-mix(in srgb,var(--rank2) 18%,#111823),#0b111a 62%);
  box-shadow:inset 0 0 36px var(--rankGlow),0 12px 34px rgba(0,0,0,.22);
}
.rank-panel:before,.rank-panel:after{
  content:"";position:absolute;pointer-events:none
}
.rank-panel:before{
  width:160px;height:160px;right:-52px;top:-80px;
  border:1px solid color-mix(in srgb,var(--rank) 28%,transparent);
  transform:rotate(45deg);
  box-shadow:0 0 42px var(--rankGlow)
}
.rank-panel:after{
  left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--rank),transparent)
}
.rank-panel-emblem{
  position:relative;
  width:72px;height:72px;flex:0 0 72px;
  display:grid;place-items:center;
  clip-path:polygon(50% 0,88% 20%,100% 62%,73% 100%,27% 100%,0 62%,12% 20%);
  background:linear-gradient(145deg,var(--rank),var(--rank2));
  filter:drop-shadow(0 0 13px var(--rankGlow))
}
.rank-panel-emblem:before{
  content:"";position:absolute;inset:5px;
  clip-path:inherit;
  background:#0d141e;
}
.rank-panel-emblem span{position:relative;z-index:1;color:var(--rank);font-size:18px;font-weight:1000;letter-spacing:-.05em}
.rank-panel-copy{position:relative;z-index:1;display:grid;gap:2px}
.rank-panel-copy small{font-size:8px!important;letter-spacing:.18em!important;color:color-mix(in srgb,var(--rank) 65%,#8793a5)!important}
.rank-panel-copy strong{font-size:24px!important;line-height:1.05;margin:4px 0!important;color:#f3f6fb;text-shadow:0 0 18px var(--rankGlow)}
.rank-panel-copy span{font-size:10px!important;color:var(--rank)!important;font-weight:900;letter-spacing:.08em}
.rank-panel.rank-coinqueror{background:conic-gradient(from 220deg at 20% 50%,rgba(255,225,105,.13),rgba(137,64,211,.15),#0b111a 58%,rgba(255,225,105,.08))}
.rank-panel.rank-coinqueror .rank-panel-emblem{animation:coinquerorRankPulse 3s ease-in-out infinite alternate}
@keyframes coinquerorRankPulse{to{filter:drop-shadow(0 0 24px var(--rankGlow)) brightness(1.18)}}

/* Public profile rank is a featured identity strip rather than an ordinary stat tile. */
.public-rank-identity{margin:14px 0 12px}
.public-rank-identity .rank-panel{min-height:100px;padding:14px 17px}
.public-rank-identity .rank-panel-emblem{width:56px;height:56px;flex-basis:56px}
.public-rank-identity .rank-panel-copy strong{font-size:20px!important}

/* Rank-shaped mini frame around equipped coin next to usernames. */
.rank-coin-frame{
  position:relative;
  width:44px;height:44px;
  flex:0 0 44px;
  display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--rank) 67%,transparent);
  border-radius:10px;
  background:
    radial-gradient(circle,var(--rankGlow),transparent 65%),
    linear-gradient(145deg,color-mix(in srgb,var(--rank2) 35%,#141c27),#090e15);
  box-shadow:inset 0 0 15px var(--rankGlow),0 0 13px var(--rankGlow);
}
.rank-coin-frame:before,.rank-coin-frame:after{
  content:"";position:absolute;width:7px;height:7px;border-color:var(--rank);opacity:.75
}
.rank-coin-frame:before{left:3px;top:3px;border-left:1px solid;border-top:1px solid}
.rank-coin-frame:after{right:3px;bottom:3px;border-right:1px solid;border-bottom:1px solid}
.rank-coin-frame .user-coin-badge{width:31px!important;height:31px!important;border:0!important;background:transparent!important}
.rank-coin-crown{
  position:absolute;right:-5px;top:-6px;z-index:3;
  min-width:16px;height:16px;padding:0 3px;
  display:grid;place-items:center;
  border:1px solid var(--rank);
  border-radius:4px;
  background:#090d14;
  color:var(--rank);
  font-size:6px;font-weight:1000;letter-spacing:-.02em;
  box-shadow:0 0 9px var(--rankGlow)
}
.public-profile-head .rank-coin-frame{width:60px;height:60px;flex-basis:60px}
.public-profile-head .rank-coin-frame .user-coin-badge{width:44px!important;height:44px!important}
.public-profile-head .rank-coin-crown{min-width:19px;height:19px;font-size:7px}
.leader-player .rank-coin-frame{width:38px;height:38px;flex-basis:38px}
.leader-player .rank-coin-frame .user-coin-badge{width:27px!important;height:27px!important}
.account-pill .rank-coin-frame{width:38px;height:38px;flex-basis:38px}
.account-pill .rank-coin-frame .user-coin-badge{width:27px!important;height:27px!important}

/* Top rank chip uses the same rank colors after JS sets class. */
.rank-chip{position:relative;overflow:hidden}

/* v0.11.6 — solid coin circumference + visible inspector motion */
.coin-edge-stack{transform-style:preserve-3d!important}
.coin-edge-layer{backface-visibility:visible!important;-webkit-backface-visibility:visible!important}
.inspect-coin-model.auto-spinning,.inspect-stage.dragging .inspect-coin-model{transition:none!important}
.inspect-coin-model{will-change:transform}

/* v0.11.7 — flipping VS queue coin + accept/decline confirmation */
.queue-vs-coin-wrap{width:118px;height:118px;margin:0 auto 28px;display:grid;place-items:center;perspective:700px;position:relative}
.queue-vs-coin-wrap:before,.queue-vs-coin-wrap:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(74,200,255,.2);animation:queueCoinPulse 2.4s ease-in-out infinite}
.queue-vs-coin-wrap:before{width:102px;height:102px}.queue-vs-coin-wrap:after{width:116px;height:116px;animation-delay:.4s}
@keyframes queueCoinPulse{0%,100%{transform:scale(.88);opacity:.22}50%{transform:scale(1.08);opacity:.62}}
.queue-vs-coin{width:70px;height:70px;position:relative;transform-style:preserve-3d;animation:queueVsFlip 2.6s cubic-bezier(.3,.68,.24,1) infinite}
.queue-vs-face{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;backface-visibility:hidden;border:2px solid #5ecdf2;background:radial-gradient(circle at 35% 27%,#17354a,#09131d 64%,#03070b);color:#c9f4ff;font-size:17px;font-weight:1000;letter-spacing:-.08em;text-shadow:0 0 12px #35d7ff;box-shadow:inset 0 0 18px rgba(65,214,255,.16),0 0 25px rgba(34,188,255,.12)}
.queue-vs-back{transform:rotateY(180deg);border-color:#d15aff;color:#f0d5ff;text-shadow:0 0 12px #c44aff}
@keyframes queueVsFlip{0%,58%{transform:rotateY(0deg) rotateX(-7deg)}76%{transform:rotateY(540deg) rotateX(9deg) scale(1.08)}100%{transform:rotateY(720deg) rotateX(-7deg)}}
.queue-vs-coin-wrap.match-found .queue-vs-coin{animation:queueFoundFlip .68s cubic-bezier(.15,.85,.2,1) both}.queue-vs-coin-wrap.match-found:before,.queue-vs-coin-wrap.match-found:after{animation-duration:.85s;border-color:rgba(112,239,178,.38)}
@keyframes queueFoundFlip{from{transform:rotateY(0) scale(.85)}to{transform:rotateY(1080deg) scale(1.15)}}
.queue-found-opponent{margin:19px auto 15px;max-width:620px;padding:14px 16px;border:1px solid rgba(104,232,171,.28);border-radius:9px;background:linear-gradient(90deg,rgba(49,138,103,.08),rgba(64,82,138,.07))}
.queue-found-label{text-align:center;color:#70efb2;font-size:8px;font-weight:1000;letter-spacing:.2em;margin-bottom:12px}.queue-found-player{display:flex;align-items:center;justify-content:space-between;gap:22px}.queue-found-player>div:first-child{display:grid;gap:3px;text-align:left}.queue-found-player small{color:#718096;font-size:8px;letter-spacing:.13em}.queue-found-player strong{font-size:20px;color:#f3f6fb}.queue-found-player span{font-size:10px;color:#9aabc1}.queue-found-countdown{text-align:right;display:grid;grid-template-columns:auto auto;column-gap:5px;align-items:baseline}.queue-found-countdown small{grid-column:1/3;text-align:right}.queue-found-countdown strong{font-size:24px;color:#70efb2;font-variant-numeric:tabular-nums}.queue-found-countdown span{color:#70efb2}.decline-match-btn{border-color:#6b2b36!important;color:#ff8590!important;background:#1a0d12!important}

/* v0.11.8 — centered match status + guaranteed real tails face */
.match-meta{
  position:relative!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:12px!important;
  min-height:54px;
  padding:9px 72px!important;
  border-top:1px solid rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.07);
  background:radial-gradient(circle at center,rgba(72,107,171,.095),transparent 56%),#080e16;
}
.match-meta>span:not(.turn-timer){
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 12px;
  border:1px solid rgba(105,132,177,.18);
  border-radius:6px;
  background:#0c1420;
  color:#aebdd3;
  font-size:10px!important;
  font-weight:950;
  letter-spacing:.09em;
}
#modeLabel{color:#8ebcff!important}
#scoreLabel{
  color:#f2f6fd!important;
  font-size:13px!important;
  border-color:rgba(113,157,226,.31)!important;
  box-shadow:0 0 18px rgba(70,119,202,.09)
}
#potLabel{color:#f1cd61!important}
.match-meta .turn-timer{margin:0!important}
.match-leave-compact{
  position:absolute!important;
  right:12px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
}

/* The stored tails texture becomes an unmirrored front-facing plane after a Tails result. */
.coin.show-tails{
  transform:none!important;
}
.coin.show-tails .coin-face.heads{
  visibility:hidden!important;
  opacity:0!important;
}
.coin.show-tails .coin-face.tails{
  visibility:visible!important;
  opacity:1!important;
  transform:translateZ(var(--coin-half-depth,7px))!important;
}
.coin:not(.show-tails):not(.flipping-tails):not(.flipping-heads) .coin-face.heads{
  visibility:visible!important;
  opacity:1!important;
}
.coin:not(.show-tails):not(.flipping-tails):not(.flipping-heads) .coin-face.tails{
  visibility:hidden!important;
}

/* v0.11.9 — smoother Collection staging + vault organization */
.collection-toolbar{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin:14px 0 16px;
}
.collection-toolbar label{
  display:grid;
  gap:6px;
  color:#69778d;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}
.collection-toolbar select{
  min-width:170px;
  height:36px;
  padding:0 30px 0 10px;
  border:1px solid #2b394f;
  border-radius:6px;
  background:#09101a;
  color:#dce5f3;
  font-size:9px;
  font-weight:850;
}
.collection-art{
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 48%,rgba(95,118,155,.11),transparent 34%),
    linear-gradient(145deg,#0b121d,#070b12)!important;
}
.owned-coin-slot .collection-art:before,
.owned-coin-slot .collection-art:after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.owned-coin-slot .collection-art:before{
  width:240px;height:240px;
  background:
    radial-gradient(circle,transparent 35%,color-mix(in srgb,var(--rarity,#fff) 12%,transparent) 52%,transparent 69%),
    conic-gradient(from 0deg,transparent 0 18%,color-mix(in srgb,var(--rarity,#fff) 20%,transparent) 24%,transparent 31% 58%,color-mix(in srgb,var(--rarity,#fff) 16%,transparent) 65%,transparent 73%);
  filter:blur(7px);
  opacity:.62;
  animation:collectionAuraDrift 12s linear infinite;
}
.owned-coin-slot .collection-art:after{
  width:150px;height:150px;
  border:1px solid color-mix(in srgb,var(--rarity,#fff) 16%,transparent);
  box-shadow:0 0 38px color-mix(in srgb,var(--rarity,#fff) 10%,transparent);
  animation:collectionAuraPulse 4.8s ease-in-out infinite;
}
.owned-coin-slot .collection-halo{
  width:190px!important;
  height:190px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,transparent 46%,color-mix(in srgb,var(--rarity,#fff) 16%,transparent) 57%,transparent 69%)!important;
  filter:blur(3px);
  opacity:.55!important;
  animation:collectionHaloBreathe 5.6s ease-in-out infinite!important;
}
@keyframes collectionAuraDrift{
  from{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(180deg) scale(1.045)}
  to{transform:rotate(360deg) scale(1)}
}
@keyframes collectionAuraPulse{
  0%,100%{transform:scale(.94);opacity:.32}
  50%{transform:scale(1.07);opacity:.68}
}
@keyframes collectionHaloBreathe{
  0%,100%{transform:scale(.93);opacity:.34}
  50%{transform:scale(1.08);opacity:.62}
}

/* Unknown slots are intentionally static and readable. */
.locked-coin-slot .collection-art{
  background:
    radial-gradient(circle at 50% 47%,#28313e 0,#1a222d 24%,#0d131c 49%,#070b11 78%)!important;
}
.locked-coin-slot .collection-art:before,
.locked-coin-slot .collection-art:after,
.locked-coin-slot .collection-halo{
  display:none!important;
  animation:none!important;
}
.locked-coin-slot .coin-silhouette{
  position:relative;
  z-index:2;
  filter:drop-shadow(0 0 18px rgba(175,195,222,.08));
}
.locked-coin-slot .coin-silhouette img{
  opacity:.9!important;
  filter:brightness(0) drop-shadow(0 0 1px rgba(255,255,255,.12)) drop-shadow(0 12px 18px #000)!important;
}
.locked-coin-slot{min-height:360px}
.locked-coin-slot .collection-footer{margin-top:auto}

/* Grouped layout */
.collection-group-list{display:grid;gap:24px}
.collection-group{display:grid;gap:11px}
.collection-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 3px 8px;
  border-bottom:1px solid rgba(255,255,255,.075);
}
.collection-group-head span{font-size:10px;font-weight:1000;letter-spacing:.16em;color:#aebbd0}
.collection-group-head small{font-size:8px;color:#647287;letter-spacing:.1em}
.collection-group-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
@media(max-width:1200px){.collection-group-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.collection-group-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-toolbar{justify-content:flex-start;flex-wrap:wrap}}
@media(max-width:620px){.collection-group-grid{grid-template-columns:1fr}.collection-toolbar{display:grid}.collection-toolbar select{width:100%}}

/* v0.12.0 — clickable bot profiles */
.bot-name-link{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  color:#eef3fb;
  font:inherit;
  font-size:18px;
  font-weight:950;
  text-align:left;
  cursor:pointer;
}
.bot-name-link:hover{color:#91bcff;text-decoration:underline}
.bot-profile-emblem{
  width:60px;height:60px;
  display:grid;place-items:center;
  border-radius:12px;
  border:1px solid #4b6489;
  background:radial-gradient(circle,#1d3556,#0b1422 68%);
  color:#9dccff;
  font-size:18px;
  font-weight:1000;
  letter-spacing:.08em;
  box-shadow:inset 0 0 22px rgba(85,150,255,.15),0 0 18px rgba(70,130,220,.12)
}
.bot-profile-head{align-items:center}

/* v0.12.1 — rank typography */
.rank-panel-copy strong{position:relative;width:max-content;max-width:100%;letter-spacing:.015em!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;text-shadow:none!important}
.rank-panel.rank-iron .rank-panel-copy strong{background:linear-gradient(180deg,#f4f6f8,#adb6c1 37%,#65707c 72%,#d8dee4);filter:drop-shadow(0 1px 0 #080b10) drop-shadow(0 0 8px rgba(180,194,210,.18))}
.rank-panel.rank-bronze .rank-panel-copy strong{background:linear-gradient(180deg,#ffd0a4,#d58b50 36%,#8c4725 71%,#e3a16c);filter:drop-shadow(0 0 8px rgba(198,129,77,.25))}
.rank-panel.rank-silver .rank-panel-copy strong{background:linear-gradient(180deg,#fff,#d9e4ef 34%,#8fa0b2 70%,#edf5fb);filter:drop-shadow(0 0 10px rgba(213,222,232,.26))}
.rank-panel.rank-gold .rank-panel-copy strong{background:linear-gradient(180deg,#fff8ba,#f2c94d 35%,#a66b08 72%,#ffe68a);filter:drop-shadow(0 0 11px rgba(243,198,79,.30))}
.rank-panel.rank-platinum .rank-panel-copy strong{background:linear-gradient(180deg,#dffffa,#74e2d3 34%,#2c8988 69%,#a7fff1);filter:drop-shadow(0 0 11px rgba(111,230,212,.30))}
.rank-panel.rank-diamond .rank-panel-copy strong{background:linear-gradient(180deg,#effcff,#7bd5ff 31%,#7a76f5 68%,#d3caff);filter:drop-shadow(0 0 13px rgba(112,201,255,.36))}
.rank-panel.rank-master .rank-panel-copy strong{background:linear-gradient(180deg,#f9dcff,#d986ff 33%,#822bb0 69%,#efb9ff);filter:drop-shadow(0 0 14px rgba(214,120,255,.38))}
.rank-panel.rank-grandmaster .rank-panel-copy strong{background:linear-gradient(180deg,#ffd7ce,#ff745e 33%,#a31e29 69%,#ffaf8f);filter:drop-shadow(0 0 15px rgba(255,106,88,.40))}
.rank-panel.rank-coinqueror .rank-panel-copy strong{background:linear-gradient(100deg,#fff1a6 0%,#ffd75c 24%,#f4b8ff 50%,#9e7aff 72%,#fff1a6 100%);background-size:220% 100%;animation:coinquerorTextShimmer 3.2s linear infinite;filter:drop-shadow(0 0 16px rgba(255,228,126,.44))}
@keyframes coinquerorTextShimmer{to{background-position:-220% 0}}
.rank-panel-emblem span{font-family:Georgia,"Times New Roman",serif!important;font-size:16px!important;letter-spacing:-.05em!important;text-shadow:0 1px 0 rgba(0,0,0,.82),0 0 8px var(--rankGlow)!important}
.rank-coin-crown{font-family:Georgia,"Times New Roman",serif!important;letter-spacing:-.04em!important}

/* v0.12.1 — animated home title */
.home-hero-title{position:relative;display:inline-block;isolation:isolate;margin-bottom:18px!important;color:#f4f7fb!important;text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 18px rgba(87,170,255,.14),0 0 42px rgba(156,74,255,.09)}
.home-hero-title:before{content:"";position:absolute;z-index:-2;left:-3%;right:-3%;top:12%;bottom:-17%;background:radial-gradient(ellipse at 14% 67%,rgba(44,192,255,.22),transparent 30%),radial-gradient(ellipse at 39% 74%,rgba(62,127,255,.18),transparent 31%),radial-gradient(ellipse at 64% 68%,rgba(133,76,255,.16),transparent 30%),radial-gradient(ellipse at 88% 64%,rgba(218,75,255,.18),transparent 28%);filter:blur(19px);opacity:.72;animation:titleAuraBreathe 3.6s ease-in-out infinite alternate}
.home-hero-title:after{content:"";position:absolute;z-index:-1;left:-1%;right:-1%;bottom:-9px;height:25px;background:radial-gradient(ellipse at 7% 100%,rgba(57,217,255,.64) 0 7%,transparent 26%),radial-gradient(ellipse at 24% 100%,rgba(67,132,255,.52) 0 8%,transparent 28%),radial-gradient(ellipse at 48% 100%,rgba(112,77,255,.50) 0 8%,transparent 29%),radial-gradient(ellipse at 69% 100%,rgba(176,69,255,.46) 0 7%,transparent 27%),radial-gradient(ellipse at 89% 100%,rgba(255,94,205,.38) 0 7%,transparent 26%);filter:blur(6px);opacity:.7;transform-origin:center bottom;animation:titleFlameDrift 2.5s ease-in-out infinite alternate}
.home-hero-title span{position:relative;background:linear-gradient(180deg,#fff 5%,#e9f2ff 48%,#c6d3e7 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-hero-title span:last-child{background:linear-gradient(100deg,#fff 0%,#d7ecff 31%,#c9c4ff 58%,#f2ddff 82%,#fff 100%);background-size:180% 100%;-webkit-background-clip:text;background-clip:text;animation:titleTextSheen 5.5s linear infinite}
@keyframes titleAuraBreathe{from{opacity:.45;transform:scale(.97) translateY(1px)}to{opacity:.9;transform:scale(1.025) translateY(-2px)}}
@keyframes titleFlameDrift{0%{transform:scaleX(.96) scaleY(.82) translateY(2px);opacity:.42}50%{transform:scaleX(1.02) scaleY(1.1) translateY(-2px);opacity:.78}100%{transform:scaleX(.98) scaleY(.94);opacity:.58}}
@keyframes titleTextSheen{to{background-position:-180% 0}}
@media(max-width:0px){.home-hero-title:before,.home-hero-title:after,.home-hero-title span:last-child,.rank-panel.rank-coinqueror .rank-panel-copy strong{animation:none!important}}

/* v0.12.2 — inspector rotation reliability */
#inspectCoinModel.auto-spinning,
.inspect-stage.dragging #inspectCoinModel{
  transition:none!important;
}
#coinInspectModal.hidden{pointer-events:none!important}

/* v0.12.3 — capsule storage */
.capsule-stock{display:flex;align-items:center;justify-content:space-between;margin:8px 0 10px;padding:6px 8px;border:1px solid rgba(255,255,255,.08);border-radius:5px;background:#080d14;color:#68768a;font-size:8px;font-weight:900;letter-spacing:.12em}
.capsule-stock strong{font-size:12px;color:#8594aa}.capsule-stock.has-stock{border-color:rgba(93,210,158,.25);background:rgba(39,117,85,.08);color:#77cfa8}.capsule-stock.has-stock strong{color:#9af1c7}

/* v0.12.4 — newly discovered collection types */
.collection-type{position:relative;overflow:hidden}
.collection-type.new-coin-type{
  border-color:rgba(255,207,76,.78)!important;
  box-shadow:0 0 0 1px rgba(255,210,74,.22),0 0 22px rgba(255,184,45,.20),inset 0 0 22px rgba(255,194,56,.06)!important;
}
.new-coin-tag{
  position:absolute;z-index:8;top:9px;left:9px;padding:4px 7px;border-radius:4px;
  border:1px solid rgba(255,224,119,.8);background:linear-gradient(180deg,#ffe88c,#c99221);
  color:#211605;font-size:8px;font-weight:1000;letter-spacing:.13em;
  box-shadow:0 0 12px rgba(255,199,54,.45)
}
.new-coin-sparkles{position:absolute;inset:0;z-index:7;pointer-events:none}
.new-coin-sparkles i{position:absolute;color:#ffe67e;font-style:normal;text-shadow:0 0 8px #ffc53d;animation:newCoinSpark 1.7s ease-in-out infinite}
.new-coin-sparkles i:nth-child(1){left:15%;top:27%;animation-delay:-.2s}.new-coin-sparkles i:nth-child(2){right:12%;top:18%;animation-delay:-.7s}.new-coin-sparkles i:nth-child(3){right:18%;bottom:28%;animation-delay:-1.1s}.new-coin-sparkles i:nth-child(4){left:26%;bottom:18%;animation-delay:-1.4s}
@keyframes newCoinSpark{0%,100%{opacity:.18;transform:scale(.65) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(25deg)}}
.collection-stack-value{display:flex;justify-content:space-between;align-items:center;margin:7px 0;padding:5px 7px;border:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.18);font-size:9px;letter-spacing:.08em;color:#78869a}.collection-stack-value strong{color:#e9c45b;font-size:10px}
.modal-stack-total{margin-top:8px;padding:7px 9px;border:1px solid rgba(231,191,71,.24);background:rgba(140,100,25,.08);display:flex;gap:10px;justify-content:center;align-items:center}.modal-stack-total span{font-size:8px;letter-spacing:.12em;color:#9b8b62}.modal-stack-total strong{color:#f0ce6b}

/* v0.12.4 — admin giveaway */
.giveaway-grid{display:grid;grid-template-columns:1.1fr .8fr .8fr 1.5fr auto;gap:10px;align-items:end;margin-top:14px}
.giveaway-grid label{display:grid;gap:6px;font-size:8px;font-weight:900;letter-spacing:.11em;color:#7f8da0}
.giveaway-grid select,.giveaway-grid input{min-height:34px;background:#080d14;border:1px solid #253247;color:#dbe4ef;padding:7px 8px;border-radius:4px}
.admin-danger-safe{min-height:34px;border:1px solid #8b6a23;background:linear-gradient(180deg,#a67b27,#6f4c16);color:#fff2c6;font-weight:1000;letter-spacing:.08em;cursor:pointer}
.giveaway-status{margin-top:10px;min-height:14px}
@media(max-width:1000px){.giveaway-grid{grid-template-columns:1fr 1fr}.admin-danger-safe{grid-column:1/-1}}

/* v0.12.5 — Unboxing Buy / Storage terminal */
.gacha-tabs{display:flex;gap:8px;margin:14px 0 16px;padding:5px;width:max-content;border:1px solid #263247;background:#080d14;border-radius:7px}
.gacha-tabs button{min-width:130px;border:0;background:transparent;color:#728197;padding:9px 16px;font-weight:1000;letter-spacing:.12em;cursor:pointer}
.gacha-tabs button.active{background:linear-gradient(180deg,#1b2940,#111a29);color:#e7f0fb;box-shadow:inset 0 0 0 1px #3a4d68,0 0 16px rgba(82,149,255,.12)}
.gacha-tabs button span{margin-left:7px;color:#e9c85d}
.capsule-storage-shell{padding:18px;overflow:hidden}
.capsule-storage-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:14px}
.capsule-storage-head h2{margin:4px 0}.capsule-storage-head p{max-width:700px;color:#7e8da2}
.capsule-storage-count{text-align:center;border:1px solid #2b3a50;background:#08111b;padding:8px 18px;min-width:105px}
.capsule-storage-count strong{display:block;font-size:24px;color:#dce9f7}.capsule-storage-count span{font-size:8px;letter-spacing:.14em;color:#77869a}
.capsule-tank{position:relative;height:410px;overflow:hidden;border:1px solid #344c67;border-radius:12px;background:linear-gradient(180deg,rgba(27,62,87,.44),rgba(5,18,29,.86) 62%,rgba(4,12,19,.98));box-shadow:inset 0 0 70px rgba(52,159,210,.08),0 0 28px rgba(32,103,155,.08)}
.capsule-tank:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 2%,rgba(182,235,255,.07) 18%,transparent 31%,transparent 71%,rgba(127,219,255,.04) 83%,transparent 94%);pointer-events:none;z-index:4}
.capsule-tank:after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;background:radial-gradient(ellipse at 50% 100%,rgba(45,145,180,.15),transparent 72%);pointer-events:none}
.capsule-tank-glass{position:absolute;inset:9px;border:1px solid rgba(155,223,255,.09);border-radius:8px;pointer-events:none;z-index:5}
.capsule-tank-contents{position:absolute;inset:0}
.capsule-tank-empty{position:absolute;inset:0;display:grid;place-items:center;color:#456075;font-size:11px;font-weight:1000;letter-spacing:.18em}
.tank-capsule{position:absolute;left:var(--tank-x);top:var(--tank-y);transform:translate(-50%,-50%) scale(var(--tank-scale));width:54px;height:54px;border-radius:50%;border:1px solid rgba(180,223,255,.27);background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.30),rgba(69,105,137,.2) 28%,rgba(8,15,25,.94) 72%);box-shadow:inset 0 0 16px rgba(148,214,255,.12),0 0 15px rgba(55,143,208,.15);color:#eaf6ff;cursor:pointer;animation:tankFloat var(--tank-dur) ease-in-out var(--tank-delay) infinite alternate;z-index:2}
.tank-capsule span{display:block;font-size:25px;line-height:26px;text-shadow:0 0 9px currentColor}.tank-capsule i{display:block;margin-top:3px;font-size:6px;font-style:normal;font-weight:1000;letter-spacing:.07em;opacity:.7}
.tank-capsule-standard{color:#cbd8e6}.tank-capsule-refined{color:#65d9ef;box-shadow:0 0 18px rgba(70,209,233,.18),inset 0 0 14px rgba(70,209,233,.12)}.tank-capsule-prestige{color:#d990ff;box-shadow:0 0 20px rgba(201,96,255,.22),inset 0 0 15px rgba(201,96,255,.13)}.tank-capsule-apex{color:#ffc55d;box-shadow:0 0 23px rgba(255,183,69,.26),inset 0 0 16px rgba(255,188,69,.15)}
.tank-capsule:hover{z-index:7;filter:brightness(1.35);animation-play-state:paused}
@keyframes tankFloat{0%{margin-left:-7px;margin-top:8px;rotate:-7deg}50%{margin-left:5px;margin-top:-8px;rotate:5deg}100%{margin-left:10px;margin-top:6px;rotate:9deg}}
.capsule-batch-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}
.capsule-batch-btn{display:grid;grid-template-columns:1fr auto;gap:2px 8px;text-align:left;padding:10px 12px;border:1px solid #2d3b50;background:#0a111b;color:#cbd8e7;cursor:pointer}
.capsule-batch-btn span{font-size:8px;font-weight:1000;letter-spacing:.08em}.capsule-batch-btn strong{grid-row:1/3;grid-column:2;font-size:12px;color:#e7edf5}.capsule-batch-btn small{font-size:7px;color:#718096}
.capsule-batch-btn:disabled{opacity:.34;cursor:not-allowed}.capsule-batch-btn:not(:disabled):hover{border-color:#607b9d;background:#101b2a}
@media(max-width:900px){.capsule-batch-actions{grid-template-columns:1fr 1fr}.capsule-tank{height:330px}}

/* v0.12.6 — top-right compact rank panel */
.rank-chip.rank-mini-panel{
  min-width:112px;
  height:50px;
  display:flex!important;
  align-items:center;
  gap:10px;
  padding:5px 11px 5px 7px!important;
  border:1px solid rgba(120,143,174,.35)!important;
  border-radius:8px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.035),transparent 38%),
    linear-gradient(180deg,#111927,#09111d)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 4px 14px rgba(0,0,0,.18);
  overflow:hidden;
  position:relative
}
.rank-mini-emblem{
  width:34px;height:34px;flex:0 0 34px;
  display:grid;place-items:center;
  clip-path:polygon(50% 0,88% 20%,100% 61%,72% 100%,28% 100%,0 61%,12% 20%);
  background:#202a39;
  color:#aeb9c7;
  font-family:Georgia,"Times New Roman",serif;
  font-size:11px;font-weight:900;
  text-shadow:0 1px 0 #000,0 0 8px currentColor;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.1)
}
.rank-mini-copy{display:flex;min-width:0;flex-direction:column;gap:2px}
.rank-mini-copy #rankName{
  font-size:11px!important;
  font-weight:1000!important;
  letter-spacing:.025em;
  line-height:1.05;
  color:#dce4ed
}
.rank-mini-copy #lpText{font-size:9px!important;font-weight:900!important;letter-spacing:.04em;color:#9da9b9!important}
.rank-chip.rank-iron{border-color:rgba(137,155,178,.38)!important}.rank-chip.rank-iron .rank-mini-emblem{background:linear-gradient(180deg,#65717e,#242d39);color:#c5cdd6}.rank-chip.rank-iron #rankName{background:linear-gradient(180deg,#fff,#9ca8b5);-webkit-background-clip:text;background-clip:text;color:transparent}
.rank-chip.rank-bronze{border-color:rgba(188,112,63,.48)!important}.rank-chip.rank-bronze .rank-mini-emblem{background:linear-gradient(180deg,#a65e33,#4e2b20);color:#ffd0a4}.rank-chip.rank-bronze #rankName{color:#dfa06d}
.rank-chip.rank-silver{border-color:rgba(194,211,228,.48)!important}.rank-chip.rank-silver .rank-mini-emblem{background:linear-gradient(180deg,#aebdcb,#52606f);color:#fff}.rank-chip.rank-silver #rankName{color:#e7f0f8}
.rank-chip.rank-gold{border-color:rgba(232,185,53,.58)!important;box-shadow:0 0 13px rgba(220,167,35,.12)}.rank-chip.rank-gold .rank-mini-emblem{background:linear-gradient(180deg,#e5b63d,#795011);color:#fff3a5}.rank-chip.rank-gold #rankName{color:#f0cc5e}
.rank-chip.rank-platinum{border-color:rgba(89,215,199,.53)!important}.rank-chip.rank-platinum .rank-mini-emblem{background:linear-gradient(180deg,#55cabd,#245f61);color:#dffffa}.rank-chip.rank-platinum #rankName{color:#82e5d8}
.rank-chip.rank-diamond{border-color:rgba(99,178,255,.58)!important;box-shadow:0 0 15px rgba(91,139,255,.15)}.rank-chip.rank-diamond .rank-mini-emblem{background:linear-gradient(180deg,#67c9ff,#5948bf);color:#ecfbff}.rank-chip.rank-diamond #rankName{color:#9ddcff}
.rank-chip.rank-master{border-color:rgba(199,101,255,.58)!important}.rank-chip.rank-master .rank-mini-emblem{background:linear-gradient(180deg,#cc74f4,#70208d);color:#f9dcff}.rank-chip.rank-master #rankName{color:#dda0ff}
.rank-chip.rank-grandmaster{border-color:rgba(255,96,75,.64)!important;box-shadow:0 0 16px rgba(255,74,58,.14)}.rank-chip.rank-grandmaster .rank-mini-emblem{background:linear-gradient(180deg,#ef6a59,#781d28);color:#ffe1d9}.rank-chip.rank-grandmaster #rankName{color:#ff9684}
.rank-chip.rank-coinqueror{border-color:rgba(255,211,91,.7)!important;box-shadow:0 0 18px rgba(199,117,255,.16),0 0 10px rgba(255,200,65,.12)}.rank-chip.rank-coinqueror .rank-mini-emblem{background:linear-gradient(145deg,#ffd75c,#9c5de5 58%,#5d41c9);color:#fff3b1}.rank-chip.rank-coinqueror #rankName{background:linear-gradient(90deg,#ffe886,#f0b7ff,#a9a0ff,#ffe886);background-size:180% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rankMiniShimmer 3s linear infinite}
@keyframes rankMiniShimmer{to{background-position:-180% 0}}

/* v0.12.10 — rarity-visible undiscovered collection */
.locked-coin-slot .rarity{opacity:.88}
.locked-coin-slot.common{border-color:rgba(161,174,190,.18)}
.locked-coin-slot.rare{border-color:rgba(70,159,226,.22)}
.locked-coin-slot.epic{border-color:rgba(177,89,228,.22)}
.locked-coin-slot.legendary{border-color:rgba(228,156,50,.25)}
.locked-coin-slot.mythic{border-color:rgba(231,72,112,.24)}
.locked-coin-slot.relic{border-color:rgba(239,209,99,.28)}

/* v0.12.10 — compact rank LP readability */
.rank-chip.rank-mini-panel{min-width:132px!important;padding-right:13px!important}
.rank-mini-copy{min-width:72px!important}
.rank-mini-copy #lpText{
  display:inline-flex!important;
  align-items:center;
  width:max-content;
  min-width:42px;
  margin-top:2px;
  padding:2px 5px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:3px;
  background:rgba(0,0,0,.24);
  color:#d7e2ef!important;
  font-size:9px!important;
  font-weight:1000!important;
  line-height:1!important;
  opacity:1!important;
}

/* v0.12.10 — radial emote wheel */
.match-social{position:relative}
.emote-wheel{
  position:relative;
  width:48px;
  height:48px;
  flex:0 0 48px;
  margin:4px auto;
  z-index:25
}
.emote-wheel-toggle{
  position:absolute;
  inset:0;
  z-index:4;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid #425770;
  background:radial-gradient(circle at 35% 28%,#25364b,#0c1420 70%);
  color:#dce8f5;
  box-shadow:0 5px 18px rgba(0,0,0,.28),inset 0 0 12px rgba(110,176,230,.08);
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease
}
.emote-wheel-toggle span{display:block;font-size:19px;line-height:18px}
.emote-wheel-toggle small{display:block;margin-top:3px;font-size:6px;font-weight:1000;letter-spacing:.08em;color:#8292a7}
.emote-wheel.open .emote-wheel-toggle{
  transform:scale(1.06);
  border-color:#7295bd;
  box-shadow:0 0 22px rgba(88,154,220,.22),inset 0 0 14px rgba(110,176,230,.12)
}
.emote-wheel-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  z-index:3;
  pointer-events:none
}
.emote-wheel-ring>button{
  --a:calc((360deg / var(--emote-n)) * var(--emote-i) - 90deg);
  position:absolute;
  left:-24px;
  top:-18px;
  width:48px;
  min-height:36px;
  padding:4px 3px;
  border-radius:18px;
  border:1px solid #40536b;
  background:linear-gradient(180deg,#182638,#0b131f);
  color:#dce6f2;
  font-size:8px;
  font-weight:1000;
  line-height:1.05;
  letter-spacing:.02em;
  opacity:0;
  transform:rotate(var(--a)) translateX(0) rotate(calc(-1 * var(--a))) scale(.3);
  transition:transform .20s cubic-bezier(.2,.8,.2,1),opacity .15s ease,border-color .15s ease,filter .15s ease;
  pointer-events:none;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.26)
}
.emote-wheel.open .emote-wheel-ring>button{
  opacity:1;
  transform:rotate(var(--a)) translateX(91px) rotate(calc(-1 * var(--a))) scale(1);
  pointer-events:auto
}
.emote-wheel-ring>button:hover{
  border-color:#7ba1cc;
  filter:brightness(1.28);
  z-index:6
}
.spectator-emote-wheel{margin:22px auto 8px}
@media(max-width:800px){
  .emote-wheel.open .emote-wheel-ring>button{transform:rotate(var(--a)) translateX(78px) rotate(calc(-1 * var(--a))) scale(.94)}
}

/* v0.12.11 — persistent post-match lobby */
.post-match-lobby .arena-card{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 0 28px rgba(80,130,190,.06)
}
.post-match-lobby-label{
  grid-column:1/-1;
  text-align:center;
  margin-bottom:4px;
  color:#7f91a7;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.14em
}
.post-match-lobby .emote-wheel{
  filter:drop-shadow(0 0 10px rgba(91,151,213,.12))
}

/* v0.12.12 — full-screen promotion ceremony */
.rank-up-overlay{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(34,75,125,.56),rgba(3,7,13,.96) 62%);opacity:0;transition:opacity .24s ease;cursor:pointer}
.rank-up-overlay.hidden{display:none}.rank-up-overlay.show{opacity:1}
.rank-up-rays{position:absolute;width:145vmax;height:145vmax;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.11) 0 1.2deg,transparent 1.2deg 8deg);animation:rankRays 8s linear infinite;mask-image:radial-gradient(circle,#000 0 42%,transparent 72%)}
.rank-up-shockwave{position:absolute;width:18vmin;height:18vmin;border:3px solid rgba(255,255,255,.65);border-radius:50%;animation:rankShock 1.3s cubic-bezier(.1,.7,.2,1) .25s both}
.rank-up-flare{position:absolute;width:42vmin;height:42vmin;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.48),rgba(100,170,255,.16) 25%,transparent 68%);animation:rankPulse .72s ease-in-out infinite alternate}
.rank-up-core{position:relative;z-index:3;text-align:center;filter:drop-shadow(0 10px 35px #000);animation:rankCore .75s cubic-bezier(.15,.85,.15,1.1) both}
.rank-up-kicker{font-size:clamp(13px,1.5vw,22px);font-weight:1000;letter-spacing:.5em;color:#d9e8f8;text-indent:.5em;text-shadow:0 0 18px currentColor}
.rank-up-emblem{display:grid;place-items:center;width:clamp(130px,18vw,240px);height:clamp(130px,18vw,240px);margin:22px auto 14px;border:3px solid currentColor;clip-path:polygon(50% 0,91% 18%,100% 68%,50% 100%,0 68%,9% 18%);background:radial-gradient(circle at 50% 34%,rgba(255,255,255,.24),rgba(13,22,35,.92) 62%);font-family:Georgia,serif;font-size:clamp(42px,7vw,90px);font-weight:1000;color:#dbe7f3;box-shadow:inset 0 0 35px rgba(255,255,255,.12);animation:rankEmblem 1.2s cubic-bezier(.2,.8,.2,1) both}
.rank-up-core h1{margin:0;font-size:clamp(42px,8vw,112px);line-height:.9;letter-spacing:.035em;font-weight:1000;text-transform:uppercase;background:linear-gradient(110deg,#8797aa,#fff 42%,#8295aa 57%,#fff 70%,#76889d);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rankSheen 1.35s linear infinite;text-shadow:none}
.rank-up-sub{margin-top:17px;font-size:clamp(9px,1vw,14px);font-weight:1000;letter-spacing:.25em;color:#9fb1c5}
.rank-up-particle{position:absolute;left:50%;top:55%;width:5px;height:16px;border-radius:4px;background:currentColor;box-shadow:0 0 12px currentColor;animation:rankParticle var(--d) cubic-bezier(.15,.75,.25,1) forwards}
.rank-up-overlay.rank-bronze{color:#c78658}.rank-up-overlay.rank-silver{color:#d8e1ea}.rank-up-overlay.rank-gold{color:#ffd56a}.rank-up-overlay.rank-platinum{color:#87e2dc}.rank-up-overlay.rank-diamond{color:#8ecbff}.rank-up-overlay.rank-master{color:#d899ff}.rank-up-overlay.rank-grandmaster{color:#ff7676}.rank-up-overlay.rank-coinqueror{color:#fff0a0}
@keyframes rankCore{0%{transform:scale(.45);opacity:0;filter:blur(14px)}65%{transform:scale(1.08);opacity:1;filter:blur(0)}100%{transform:scale(1)}}
@keyframes rankEmblem{0%{transform:rotate(-18deg) scale(.25);filter:brightness(4)}60%{transform:rotate(3deg) scale(1.12)}100%{transform:none}}
@keyframes rankShock{0%{transform:scale(.2);opacity:1}100%{transform:scale(9);opacity:0}}
@keyframes rankPulse{from{transform:scale(.86);opacity:.55}to{transform:scale(1.2);opacity:1}}
@keyframes rankRays{to{transform:rotate(360deg)}}@keyframes rankSheen{to{background-position:-220% 0}}
@keyframes rankParticle{to{transform:translate(var(--x),var(--y)) rotate(540deg);opacity:0}}
@media(max-width:0px){.rank-up-rays,.rank-up-flare,.rank-up-core,.rank-up-emblem,.rank-up-core h1,.rank-up-particle,.rank-up-shockwave{animation:none!important}}

/* v0.12.13 — high-energy Casino / Unboxing / Store environments */
#view-casino,#view-gacha,#view-shop{
  position:relative;
  isolation:isolate;
  min-height:calc(100vh - 122px);
  padding:24px;
  margin:-24px;
  overflow:hidden;
}
#view-casino>*,
#view-gacha>*,
#view-shop>*{position:relative;z-index:2}
#view-casino::before,#view-gacha::before,#view-shop::before,
#view-casino::after,#view-gacha::after,#view-shop::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}

/* CASINO — neon jackpot floor / moving marquee glow */
#view-casino{
  background:
    radial-gradient(circle at 50% 5%,rgba(255,57,118,.18),transparent 31%),
    radial-gradient(circle at 14% 62%,rgba(116,50,255,.18),transparent 32%),
    radial-gradient(circle at 88% 74%,rgba(255,181,38,.13),transparent 34%),
    linear-gradient(145deg,#100818 0%,#080b18 48%,#12090f 100%);
}
#view-casino::before{
  inset:-35%;
  background:
    conic-gradient(from 0deg at 50% 50%,transparent 0 9%,rgba(255,65,140,.07) 10%,transparent 11% 20%,rgba(133,86,255,.08) 21%,transparent 22% 100%);
  animation:casinoAuroraSpin 22s linear infinite;
}
#view-casino::after{
  left:-10%;right:-10%;bottom:-120px;height:360px;
  background:
    linear-gradient(rgba(255,85,143,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(115,92,255,.13) 1px,transparent 1px);
  background-size:42px 42px;
  transform:perspective(500px) rotateX(63deg);
  transform-origin:center bottom;
  mask-image:linear-gradient(to top,#000,transparent 86%);
  animation:casinoGridDrift 5s linear infinite;
}
#view-casino .casino-hero{
  border:1px solid rgba(255,95,149,.24);
  background:linear-gradient(100deg,rgba(42,10,31,.78),rgba(15,14,40,.78));
  box-shadow:0 0 45px rgba(227,50,128,.08),inset 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(12px);
}
#view-casino .slots-card{
  border-color:rgba(255,187,72,.28);
  background:linear-gradient(155deg,rgba(28,14,32,.93),rgba(7,12,24,.95));
  box-shadow:0 18px 70px rgba(0,0,0,.34),0 0 35px rgba(255,133,49,.06);
}
#view-casino .slot-reels{
  filter:drop-shadow(0 0 18px rgba(255,115,112,.14));
}

/* UNBOXING — prismatic rarity chamber / drifting color blooms */
#view-gacha{
  background:
    radial-gradient(circle at 16% 15%,rgba(76,166,255,.20),transparent 27%),
    radial-gradient(circle at 80% 20%,rgba(192,67,255,.18),transparent 29%),
    radial-gradient(circle at 54% 90%,rgba(255,67,160,.13),transparent 31%),
    linear-gradient(145deg,#07121f 0%,#0d0920 52%,#07151c 100%);
}
#view-gacha::before{
  width:78vw;height:78vw;left:8%;top:-40%;
  border-radius:50%;
  background:conic-gradient(from 30deg,rgba(59,181,255,.12),rgba(183,64,255,.10),rgba(255,80,169,.10),rgba(81,235,213,.10),rgba(59,181,255,.12));
  filter:blur(45px);
  animation:gachaPrismFloat 9s ease-in-out infinite alternate;
}
#view-gacha::after{
  inset:0;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.35) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(143,207,255,.26) 0 1px,transparent 1.5px);
  background-size:87px 87px,131px 131px;
  background-position:17px 23px,51px 67px;
  opacity:.32;
  animation:gachaStarDrift 16s linear infinite;
}
#view-gacha .casino-hero{
  border:1px solid rgba(134,105,255,.25);
  background:linear-gradient(105deg,rgba(7,29,47,.76),rgba(29,11,47,.72));
  box-shadow:0 0 48px rgba(116,79,255,.09),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(13px);
}
#view-gacha .gacha-tabs{
  background:rgba(6,10,22,.58);
  border:1px solid rgba(128,113,255,.17);
  backdrop-filter:blur(12px);
}
#view-gacha .gacha-card,
#view-gacha .capsule-storage-shell{
  background:linear-gradient(150deg,rgba(15,25,42,.90),rgba(10,10,28,.91));
  backdrop-filter:blur(9px);
  box-shadow:0 16px 50px rgba(0,0,0,.25);
}

/* STORE — luxury exchange / warm metallic spotlights */
#view-shop{
  background:
    radial-gradient(circle at 50% -5%,rgba(255,205,83,.19),transparent 33%),
    radial-gradient(circle at 8% 68%,rgba(255,113,64,.12),transparent 30%),
    radial-gradient(circle at 92% 55%,rgba(104,123,255,.14),transparent 31%),
    linear-gradient(145deg,#16110a 0%,#0b0e17 48%,#0d1019 100%);
}
#view-shop::before{
  width:130%;height:260px;left:-15%;top:-85px;
  background:repeating-linear-gradient(108deg,transparent 0 8%,rgba(255,218,116,.07) 9%,transparent 10% 18%);
  filter:blur(3px);
  transform-origin:50% 0;
  animation:shopSpotlight 8s ease-in-out infinite alternate;
}
#view-shop::after{
  width:70vw;height:70vw;right:-40vw;bottom:-48vw;border-radius:50%;
  border:1px solid rgba(255,211,99,.10);
  box-shadow:0 0 0 55px rgba(255,211,99,.018),0 0 0 110px rgba(255,211,99,.012),0 0 90px rgba(255,187,74,.05);
  animation:shopHalo 7s ease-in-out infinite alternate;
}
#view-shop .section-head{
  padding:18px 20px;
  border:1px solid rgba(255,210,102,.22);
  border-radius:10px;
  background:linear-gradient(100deg,rgba(38,28,12,.76),rgba(11,16,27,.76));
  box-shadow:0 0 42px rgba(255,189,73,.07);
  backdrop-filter:blur(12px);
}
#view-shop .shop-card{
  background:linear-gradient(150deg,rgba(25,23,21,.93),rgba(8,13,22,.94));
  border-color:rgba(255,213,119,.20);
  box-shadow:0 18px 55px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.04);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
#view-shop .shop-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,217,118,.42);
  box-shadow:0 24px 65px rgba(0,0,0,.34),0 0 28px rgba(255,190,78,.09);
}

@keyframes casinoAuroraSpin{to{transform:rotate(360deg)}}
@keyframes casinoGridDrift{to{background-position:0 42px,42px 0}}
@keyframes gachaPrismFloat{from{transform:translate3d(-4%,-1%,0) rotate(-9deg) scale(.92)}to{transform:translate3d(8%,7%,0) rotate(15deg) scale(1.08)}}
@keyframes gachaStarDrift{to{background-position:104px 110px,182px 198px}}
@keyframes shopSpotlight{from{transform:rotate(-4deg) scaleX(.96)}to{transform:rotate(5deg) scaleX(1.05)}}
@keyframes shopHalo{from{transform:scale(.92);opacity:.45}to{transform:scale(1.08);opacity:.9}}

@media(max-width:760px){
  #view-casino,#view-gacha,#view-shop{padding:16px;margin:-16px;min-height:calc(100vh - 100px)}
}
@media(max-width:0px){
  #view-casino::before,#view-casino::after,#view-gacha::before,#view-gacha::after,#view-shop::before,#view-shop::after{animation:none!important}
}

/* v0.12.15 — settings, resolution-aware density, and brighter Store */

/* brighter, more saturated store environment */
#view-shop{
  background:
    radial-gradient(circle at 48% -5%,rgba(255,224,102,.34),transparent 34%),
    radial-gradient(circle at 10% 58%,rgba(255,89,55,.22),transparent 32%),
    radial-gradient(circle at 88% 48%,rgba(109,105,255,.24),transparent 34%),
    radial-gradient(circle at 54% 82%,rgba(255,164,42,.13),transparent 32%),
    linear-gradient(145deg,#21180a 0%,#121526 47%,#17101d 100%);
}
#view-shop::before{
  background:repeating-linear-gradient(108deg,transparent 0 7%,rgba(255,230,139,.13) 8%,transparent 10% 17%);
  filter:blur(2px) saturate(1.3);
}
#view-shop .section-head{
  border-color:rgba(255,220,118,.36);
  background:linear-gradient(100deg,rgba(64,42,12,.84),rgba(18,20,38,.80));
  box-shadow:0 0 56px rgba(255,184,52,.13),inset 0 1px rgba(255,255,255,.08);
}
#view-shop .shop-item{
  border-color:rgba(255,218,122,.27);
  background:linear-gradient(150deg,rgba(37,30,20,.95),rgba(11,16,29,.96));
}

/* settings gear + modal */
.settings-gear{
  width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;
  padding:0;border-radius:10px;border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(180deg,#172131,#0c121c);color:#dce8f5;
  font-size:18px;cursor:pointer;box-shadow:0 8px 22px #0004;
}
.settings-gear:hover{border-color:rgba(105,217,255,.42);color:#8feaff;box-shadow:0 0 24px rgba(61,201,255,.10)}
.settings-modal{position:fixed;inset:0;z-index:4800;display:grid;place-items:start end}
.settings-modal.hidden{display:none}
.settings-backdrop{position:absolute;inset:0;background:rgba(2,6,11,.48);backdrop-filter:blur(4px)}
.settings-panel{
  position:relative;width:min(430px,calc(100vw - 28px));margin:76px 20px 0 0;
  border:1px solid rgba(123,197,255,.23);border-radius:14px;padding:20px;
  background:linear-gradient(160deg,rgba(18,29,45,.98),rgba(8,13,22,.99));
  box-shadow:0 24px 80px #000b,0 0 45px rgba(68,180,255,.08);
}
.settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.settings-head h2{margin:4px 0 0;font-size:25px}
.settings-close{width:32px;height:32px;border-radius:8px;padding:0;font-size:22px}
.settings-group{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.settings-group>label,.settings-label-row label{display:block;font-size:9px;letter-spacing:.13em;color:#91a2b6;font-weight:950}
.settings-label-row{display:flex;justify-content:space-between;align-items:center}
.settings-label-row strong{font-size:12px;color:#8fe8ff}
.settings-group input[type=range]{width:100%;margin:12px 0 6px;accent-color:#5dd8ff}
.settings-group select{width:100%;margin:9px 0 7px}
.settings-group small{display:block;color:#718397;line-height:1.45;font-size:10px}
.settings-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:19px}
.settings-foot span{font-size:9px;letter-spacing:.09em;color:#718397;font-weight:900}

/* Shared safe sizing: no accidental horizontal overflow */
html,body{max-width:100%;overflow-x:hidden}
.main{min-width:0}
.player-summary{min-width:0;flex-wrap:nowrap}
.account-pill{min-width:0}
.view{max-width:100%}
.card,.mode-card,.shop-item,.capsule-tier{min-width:0}

/* Unboxing: keep four purchase tiers in one compact row when desktop width allows it. */
@media(min-width:1100px){
  #view-gacha .gacha-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  #view-gacha .capsule-tier{padding:16px}
  #view-gacha .capsule-tier h2{font-size:20px;margin:7px 0}
  #view-gacha .capsule-tier>p{font-size:11px;line-height:1.35;min-height:30px}
  #view-gacha .capsule-tier-art{height:70px;margin-bottom:9px}
  #view-gacha .capsule-tier-art span{transform:scale(.82)}
  #view-gacha .odds-row{padding:6px 8px;font-size:9px}
  #view-gacha .odds-row i{display:none}
}

/* Low-height desktop density. Targets 720p/768p without clipping match or unboxing UI. */
@media(min-width:861px) and (max-height:800px){
  .topbar{height:64px}
  .main{padding:0 22px 24px}
  .card{padding:16px}
  #view-casino,#view-gacha,#view-shop{min-height:calc(100vh - 82px);padding:16px;margin:-16px}
  .casino-hero{padding:12px 16px;margin-bottom:10px}
  .casino-hero h2{font-size:24px;margin:4px 0}
  #view-gacha .section-copy{font-size:10px;margin-top:4px}
  #view-gacha .gacha-tabs{margin:8px 0 10px}
  #view-gacha .capsule-tier{padding:12px}
  #view-gacha .capsule-tier-art{height:54px;margin-bottom:6px}
  #view-gacha .capsule-tier h2{font-size:17px;margin:4px 0}
  #view-gacha .capsule-tier>p{font-size:9px;min-height:23px;margin:3px 0 7px}
  #view-gacha .odds-row{padding:4px 6px;font-size:8px}
  #view-gacha .capsule-tier .primary.wide{padding:8px}
  #view-shop .section-head{padding:11px 14px;margin-bottom:10px}
  #view-shop .section-head h2{font-size:24px;margin:4px 0}
  #view-shop .shop-grid{gap:11px}
  #view-shop .shop-item{padding:13px}
  #view-shop .coin-preview{height:105px;margin-bottom:8px}
  #view-shop .shop-item p{font-size:10px;min-height:25px}
  #view-shop .item-bottom{margin-top:8px}
  .match-panel{height:calc(100vh - 84px);min-height:0;overflow:hidden}
  .match-header{min-height:46px;padding:7px 10px}
  .arena{min-height:0;height:calc(100vh - 225px)}
  .arena-coin{transform:scale(.82)}
  .choice-area{padding:8px 0}
  .choice{padding:9px 12px}
  .match-result{min-height:30px}
  .pre-match-wager{padding:12px}
  .pre-match-wager-card{padding:18px}
  .pre-match-wager-card h2{font-size:27px}
}

/* Explicit layout targets selected in Settings. These tune density; they do not resize OS display. */
html[data-resolution="1280x720"] .topbar,
html[data-resolution="1366x768"] .topbar{height:64px}
html[data-resolution="1280x720"] .main,
html[data-resolution="1366x768"] .main{padding:0 20px 22px}
html[data-resolution="1280x720"] .card,
html[data-resolution="1366x768"] .card{padding:15px}
html[data-resolution="1280x720"] #view-gacha .gacha-grid,
html[data-resolution="1366x768"] #view-gacha .gacha-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
html[data-resolution="1280x720"] #view-gacha .capsule-tier,
html[data-resolution="1366x768"] #view-gacha .capsule-tier{padding:11px}
html[data-resolution="1280x720"] #view-gacha .capsule-tier-art,
html[data-resolution="1366x768"] #view-gacha .capsule-tier-art{height:52px;margin-bottom:5px}
html[data-resolution="1280x720"] #view-gacha .capsule-tier h2,
html[data-resolution="1366x768"] #view-gacha .capsule-tier h2{font-size:16px;margin:4px 0}
html[data-resolution="1280x720"] #view-gacha .capsule-tier>p,
html[data-resolution="1366x768"] #view-gacha .capsule-tier>p{font-size:9px;line-height:1.25;min-height:22px}
html[data-resolution="1280x720"] #view-gacha .odds-row,
html[data-resolution="1366x768"] #view-gacha .odds-row{padding:4px 5px;font-size:8px}
html[data-resolution="1280x720"] #view-gacha .odds-row i,
html[data-resolution="1366x768"] #view-gacha .odds-row i{display:none}
html[data-resolution="1280x720"] #view-shop .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
html[data-resolution="1280x720"] #view-shop .coin-preview,
html[data-resolution="1366x768"] #view-shop .coin-preview{height:110px}
html[data-resolution="1280x720"] .match-panel,
html[data-resolution="1366x768"] .match-panel{height:calc(100vh - 76px);overflow:hidden}
html[data-resolution="1280x720"] .arena,
html[data-resolution="1366x768"] .arena{min-height:0;height:calc(100vh - 220px)}
html[data-resolution="1600x900"] .main{max-width:1500px}
html[data-resolution="1920x1080"] .main{max-width:1680px}
html[data-resolution="2560x1440"] .main{max-width:1900px}

/* Topbar compression prevents gear/account/rank/currency overflow. */
@media(max-width:1180px){
  .player-summary{gap:7px}
  .rank-chip,.currency{padding:8px 10px}
  .account-pill{padding:7px 9px}
  .client-version{display:none}
}
@media(max-width:980px) and (min-width:861px){
  .rank-mini-panel{display:none}
  .top-subtitle{display:none}
}
@media(max-width:860px){
  .settings-panel{margin:68px 14px 0 14px}
  .settings-gear{width:34px;height:34px}
  .player-summary{gap:6px}
  .currency{padding:7px 9px}
}

/* Store remains intentionally vertically scrollable at all resolutions. */
#view-shop{overflow-y:auto}

/* v0.12.17 — condensed competitive match HUD + reactive Ranked atmosphere */
.arena-card{--match-glow:rgba(66,132,220,.12);--match-hot:rgba(91,151,255,.16);position:relative}
.match-header{position:relative;z-index:6;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);padding:13px 28px;background:linear-gradient(90deg,rgba(19,34,60,.97),rgba(10,16,26,.98) 50%,rgba(48,19,31,.96));box-shadow:0 10px 42px var(--match-glow)}
.competitor{gap:2px;min-width:0}.competitor.bot{align-items:flex-end}
.competitor-mainline{display:flex;align-items:center;gap:12px;min-width:0}.competitor.bot .competitor-mainline{justify-content:flex-end}
.competitor-mainline .match-username{font-size:20px}.header-score{font-size:30px;line-height:1;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 18px currentColor}
.match-competitor-left .header-score{color:#91c7ff}.match-competitor-right .header-score{color:#ff8796}
.competitor-subline{display:flex;align-items:center;gap:14px;min-height:22px}.competitor.bot .competitor-subline{justify-content:flex-end}
.header-call{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid rgba(255,255,255,.09);border-radius:5px;background:#050a11aa}
.header-call small{font-size:7px!important;letter-spacing:.12em;color:#62748a!important}.header-call strong{font-size:10px;letter-spacing:.08em;color:#aeb8c6;min-width:55px}
.header-call strong.call-heads{color:#7bc4ff;text-shadow:0 0 12px #4daeff66}.header-call strong.call-tails{color:#ff8292;text-shadow:0 0 12px #ff526866}
.header-call strong.call-win{filter:brightness(1.45)}.header-call strong.call-loss{opacity:.62}.header-call strong.call-tie{color:#f5d768}
.round-meta-label{color:#fff0a2!important;border-color:rgba(232,193,76,.35)!important;box-shadow:0 0 18px rgba(232,193,76,.08)}
.match-meta{min-height:48px;padding:7px 72px!important}
.match-social{position:relative;z-index:7}
.arena{min-height:470px;transition:background .5s ease,box-shadow .5s ease;isolation:isolate}
.arena:before,.arena:after{content:"";position:absolute;inset:-18%;pointer-events:none;opacity:.0;transition:opacity .45s ease;z-index:-1}
.arena:before{background:radial-gradient(circle at 50% 48%,var(--match-hot),transparent 52%);animation:rankedAtmosphereBreath 2.4s ease-in-out infinite}
.arena:after{background:repeating-conic-gradient(from 0deg,transparent 0 8deg,var(--match-glow) 9deg 10deg,transparent 11deg 19deg);mask-image:radial-gradient(circle,#000 0 20%,transparent 68%);animation:rankedAtmosphereSpin 16s linear infinite}
@keyframes rankedAtmosphereBreath{50%{transform:scale(1.12);filter:brightness(1.5) saturate(1.35)}}@keyframes rankedAtmosphereSpin{to{transform:rotate(360deg)}}

/* Early/neutral: restrained blue tournament lighting. */
.match-state-neutral{--match-glow:rgba(68,132,222,.12);--match-hot:rgba(52,118,214,.15)}
.match-state-neutral .arena{background:radial-gradient(circle at 50% 48%,#183052 0,#0b1422 39%,#060b12 76%)}

/* One side establishes a meaningful lead: bright gold momentum/attention state. */
.match-state-advantage{--match-glow:rgba(255,194,47,.26);--match-hot:rgba(255,187,35,.28)}
.match-state-advantage .arena{background:radial-gradient(circle at 50% 45%,#493812 0,#17180d 35%,#080b0d 76%);box-shadow:inset 0 0 95px rgba(255,187,32,.12)}
.match-state-advantage .arena:before,.match-state-advantage .arena:after{opacity:.82}
.match-state-advantage .arena-rays{filter:sepia(1) saturate(2.4) brightness(1.45);animation-duration:12s}

/* Close mid/late game: hotter magenta-red pressure. */
.match-state-pressure{--match-glow:rgba(255,70,91,.25);--match-hot:rgba(255,51,82,.25)}
.match-state-pressure .arena{background:radial-gradient(circle at 50% 48%,#421523 0,#17101a 38%,#080a10 76%);box-shadow:inset 0 0 105px rgba(255,47,78,.12)}
.match-state-pressure .arena:before,.match-state-pressure .arena:after{opacity:.72}
.match-state-pressure .arena-rays{filter:hue-rotate(120deg) saturate(2.3);animation-duration:9s}

/* Someone is on match point: amber/red urgency pulses. */
.match-state-matchpoint{--match-glow:rgba(255,93,36,.31);--match-hot:rgba(255,118,28,.31)}
.match-state-matchpoint .arena{background:radial-gradient(circle at 50% 48%,#512414 0,#1c1110 38%,#09090d 76%);box-shadow:inset 0 0 120px rgba(255,80,28,.15);animation:matchPointPulse 1.25s ease-in-out infinite}
.match-state-matchpoint .arena:before,.match-state-matchpoint .arena:after{opacity:.92}
@keyframes matchPointPulse{50%{filter:brightness(1.16) saturate(1.18)}}

/* 2–2 final decisive round: maximum red pressure, faster rotating rays + heartbeat. */
.match-state-final{--match-glow:rgba(255,34,61,.42);--match-hot:rgba(255,21,54,.42)}
.match-state-final .match-header{box-shadow:0 10px 58px rgba(255,31,60,.22),inset 0 -1px rgba(255,77,95,.25)}
.match-state-final .arena{background:radial-gradient(circle at 50% 46%,#641524 0,#250b13 37%,#09070b 76%);box-shadow:inset 0 0 150px rgba(255,20,48,.22);animation:finalRoundHeartbeat .72s ease-in-out infinite}
.match-state-final .arena:before,.match-state-final .arena:after{opacity:1}
.match-state-final .arena-rays{filter:hue-rotate(120deg) saturate(4) brightness(1.65);animation-duration:4.5s}
.match-state-final #roundMetaLabel{color:#ff8794!important;border-color:#ff4c60!important;box-shadow:0 0 25px #ff30494f;animation:finalLabelPulse .72s ease-in-out infinite}
@keyframes finalRoundHeartbeat{0%,100%{filter:brightness(1)}48%{filter:brightness(1.22) saturate(1.22)}58%{filter:brightness(1.08)}}@keyframes finalLabelPulse{50%{transform:scale(1.05);filter:brightness(1.45)}}

/* More of the viewport now belongs to the actual coin stage. */
@media(min-width:861px){
  .match-panel{min-height:calc(100vh - 88px)}
  .arena-card{min-height:calc(100vh - 105px)}
  .arena{height:clamp(430px,56vh,720px)}
}
@media(min-width:861px) and (max-height:800px){
  .match-header{padding:8px 22px}.competitor-mainline .match-username{font-size:16px}.header-score{font-size:24px}
  .match-meta{min-height:42px;padding:5px 64px!important}.arena{height:calc(100vh - 265px);min-height:330px}
  .choice-area{padding:8px 20px 12px}.choice{padding:9px 12px}
}
@media(max-width:860px){
  .match-header{padding:10px 12px;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr)}
  .competitor-mainline{gap:7px}.competitor-mainline .match-username{font-size:14px}.header-score{font-size:22px}
  .competitor-subline{gap:6px}.header-call{padding:2px 5px}.header-call strong{min-width:42px;font-size:8px}
  .match-meta{padding:6px 48px!important;gap:6px!important}.match-meta>span{padding:5px 7px!important;font-size:8px!important}
  .arena{min-height:360px}
}
@media(max-width:0px){.match-state-advantage .arena,.match-state-pressure .arena,.match-state-matchpoint .arena,.match-state-final .arena,.arena:before,.arena:after{animation:none!important}}

/* v0.12.18 — post-match cleanup, guaranteed LP, brighter standard-space glow, tighter Store extent */

/* LP must remain visible whenever the compact rank box itself is visible. */
.rank-chip.rank-mini-panel{
  min-width:142px!important;
}
.rank-mini-copy{
  min-width:80px!important;
  overflow:visible!important;
}
.rank-mini-copy #lpText{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  height:auto!important;
  min-height:16px!important;
  width:max-content!important;
  min-width:48px!important;
  margin-top:3px!important;
  padding:2px 6px!important;
  color:#f2f7ff!important;
  background:linear-gradient(180deg,rgba(65,91,124,.48),rgba(11,18,29,.78))!important;
  border:1px solid rgba(153,194,239,.28)!important;
  border-radius:4px!important;
  font-size:10px!important;
  font-weight:1000!important;
  line-height:1.1!important;
  letter-spacing:.04em!important;
  text-shadow:0 0 10px rgba(116,185,255,.32)!important;
}
/* Older low-height rule hid all rank small text; specifically restore LP. */
@media(max-height:650px) and (min-width:861px){
  .rank-chip.rank-mini-panel #lpText{display:inline-flex!important}
}
/* Keep rank box present at intermediate widths; compress other pieces first. */
@media(max-width:980px) and (min-width:861px){
  .rank-mini-panel{display:flex!important}
  .rank-chip.rank-mini-panel{min-width:124px!important}
  .rank-mini-copy{min-width:64px!important}
  .rank-mini-copy #rankName{font-size:9px!important}
  .rank-mini-copy #lpText{font-size:8px!important;min-width:42px!important}
}

/* Plain-client environment: stronger blue/violet/cyan glow rising from the lower screen.
   Commerce views keep their own dedicated backgrounds above this layer. */
body{
  background:
    radial-gradient(ellipse 82% 38% at 52% 108%,rgba(57,115,255,.22),transparent 58%),
    radial-gradient(ellipse 52% 30% at 18% 101%,rgba(28,211,255,.13),transparent 64%),
    radial-gradient(ellipse 50% 32% at 88% 105%,rgba(132,62,255,.15),transparent 62%),
    radial-gradient(circle at 78% 8%,#672cff19,transparent 25%),
    radial-gradient(circle at 18% 78%,#00cfff12,transparent 30%),
    linear-gradient(135deg,#05070d,#09101b 48%,#05070d)!important;
}
body:after{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  left:8vw;right:8vw;bottom:-15vh;
  height:44vh;
  background:
    radial-gradient(ellipse at 50% 70%,rgba(67,135,255,.16),transparent 55%),
    radial-gradient(ellipse at 22% 74%,rgba(39,218,255,.09),transparent 45%),
    radial-gradient(ellipse at 78% 72%,rgba(148,74,255,.10),transparent 46%);
  filter:blur(22px);
  animation:plainBottomGlow 6s ease-in-out infinite alternate;
}
@keyframes plainBottomGlow{
  from{transform:scale(.96);opacity:.72}
  to{transform:scale(1.06);opacity:1}
}

/* Store should end shortly after the last offer row instead of owning a viewport-sized scroll region. */
#view-shop{
  min-height:0!important;
  height:auto!important;
  overflow:visible!important;
  padding-bottom:28px!important;
}
#view-shop .shop-grid{
  margin-bottom:0!important;
}
#view-shop.active{
  overflow:visible!important;
}
@media(max-width:860px){
  #view-shop{padding-bottom:18px!important}
}
@media(max-width:0px){
  body:after{animation:none!important}
}

/* v0.12.19 — intentionally subdued rank-down ceremony */
.rank-down-overlay{
  position:fixed;inset:0;z-index:4995;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%,rgba(90,96,104,.13),transparent 36%),
    linear-gradient(180deg,rgba(10,12,15,.97),rgba(5,7,9,.995));
  opacity:0;transition:opacity .3s ease;cursor:pointer;
  filter:saturate(.42);
}
.rank-down-overlay.hidden{display:none}.rank-down-overlay.show{opacity:1}
.rank-down-vignette{
  position:absolute;inset:-8%;
  background:
    radial-gradient(circle at 50% 48%,transparent 0 23%,rgba(0,0,0,.20) 52%,rgba(0,0,0,.72) 88%),
    linear-gradient(115deg,transparent 0 45%,rgba(255,255,255,.018) 50%,transparent 55%);
  animation:rankDownFade 2.5s ease-in-out both;
}
.rank-down-core{
  position:relative;z-index:2;text-align:center;
  animation:rankDownSettle .85s cubic-bezier(.2,.7,.25,1) both;
}
.rank-down-kicker{
  font-size:clamp(11px,1.1vw,15px);font-weight:900;letter-spacing:.34em;
  color:#7d858e;text-indent:.34em;
}
.rank-down-emblem{
  display:grid;place-items:center;width:clamp(105px,13vw,165px);height:clamp(105px,13vw,165px);
  margin:20px auto 14px;
  clip-path:polygon(50% 0,88% 20%,100% 61%,72% 100%,28% 100%,0 61%,12% 20%);
  border:2px solid #59616a;
  background:linear-gradient(180deg,#30353b,#171b1f);
  color:#a4abb2;font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(34px,5vw,62px);font-weight:900;
  text-shadow:0 1px #000;
  box-shadow:inset 0 0 24px rgba(255,255,255,.025),0 10px 35px rgba(0,0,0,.55);
  animation:rankDownDrop .95s ease-out both;
}
.rank-down-core h1{
  margin:0;font-size:clamp(34px,5.5vw,72px);line-height:.96;
  letter-spacing:.035em;font-weight:1000;text-transform:uppercase;
  color:#9ba2a9;text-shadow:0 2px 0 #000,0 8px 28px rgba(0,0,0,.65);
}
.rank-down-sub{
  margin-top:13px;color:#666e77;font-size:clamp(8px,.85vw,11px);
  font-weight:900;letter-spacing:.18em;
}
@keyframes rankDownSettle{
  0%{opacity:0;transform:translateY(-18px);filter:blur(3px)}
  55%{opacity:1}
  100%{transform:translateY(8px);filter:blur(0)}
}
@keyframes rankDownDrop{
  0%{transform:translateY(-34px) scale(1.05);opacity:0}
  65%{opacity:1}
  100%{transform:translateY(10px) scale(.96);opacity:.9}
}
@keyframes rankDownFade{
  0%{opacity:.35}100%{opacity:1}
}
@media(max-width:0px){
  .rank-down-vignette,.rank-down-core,.rank-down-emblem{animation:none!important}
}

/* v0.12.20 — definitive top-right rank layout fix.
   `.rank-chip` originally sets flex-direction:column; the mini panel never overrode it,
   so the rank/LP copy was being laid out underneath the emblem and clipped by the 50px box. */
.rank-chip.rank-mini-panel{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-width:154px!important;
  width:auto!important;
  height:50px!important;
  overflow:visible!important;
}
.rank-chip.rank-mini-panel .rank-mini-emblem{flex:0 0 38px!important}
.rank-chip.rank-mini-panel .rank-mini-copy{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  min-width:82px!important;
  width:auto!important;
  height:auto!important;
  overflow:visible!important;
}
.rank-chip.rank-mini-panel #rankName{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  white-space:nowrap!important;
}
.rank-chip.rank-mini-panel #lpText{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  white-space:nowrap!important;
}
@media(max-height:650px) and (min-width:861px){
  .rank-chip.rank-mini-panel{height:42px!important;min-width:145px!important;padding-top:3px!important;padding-bottom:3px!important}
  .rank-chip.rank-mini-panel .rank-mini-emblem{width:34px!important;height:34px!important;flex-basis:34px!important}
  .rank-chip.rank-mini-panel #lpText{display:inline-flex!important}
}

/* v0.12.23 — actual-browser-viewport fitting.
   Resolution presets are virtual canvases; Chrome scales them to the real usable viewport. */
html{
  transform-origin:top left;
}
html[data-resolution]:not([data-resolution="auto"]){
  width:var(--virtual-width,100vw);
  min-width:var(--virtual-width,100vw);
  height:var(--virtual-height,100vh);
  min-height:var(--virtual-height,100vh);
}
html[data-resolution]:not([data-resolution="auto"]) body,
html[data-resolution]:not([data-resolution="auto"]) .app-shell{
  width:var(--virtual-width,100vw)!important;
  min-width:var(--virtual-width,100vw)!important;
  height:var(--virtual-height,100vh)!important;
  min-height:var(--virtual-height,100vh)!important;
}

/* The screenshot case is roughly 1324×609 usable Chrome viewport.
   Compact based on ACTUAL height even when the user selected a larger resolution. */
html[data-viewport-height="tiny"] .topbar{
  height:50px!important;
  min-height:50px!important;
  flex-basis:50px!important;
}
html[data-viewport-height="tiny"] .top-title{font-size:15px!important}
html[data-viewport-height="tiny"] .top-subtitle{display:none!important}
html[data-viewport-height="tiny"] .client-version{font-size:8px!important}
html[data-viewport-height="tiny"] .player-summary{gap:7px!important}
html[data-viewport-height="tiny"] .settings-gear{width:34px!important;height:34px!important}
html[data-viewport-height="tiny"] .account-pill{height:38px!important;padding:4px 8px!important}
html[data-viewport-height="tiny"] .rank-chip.rank-mini-panel{height:38px!important;min-height:38px!important}
html[data-viewport-height="tiny"] .rank-mini-emblem{width:30px!important;height:30px!important;flex-basis:30px!important}
html[data-viewport-height="tiny"] .currency{height:38px!important;padding:6px 10px!important}
html[data-viewport-height="tiny"] .main{padding-top:0!important;padding-bottom:10px!important}

/* Unboxing BUY and STORAGE both fit short desktop windows instead of pushing key controls below the fold. */
html[data-viewport-height="tiny"] #view-gacha{
  padding:10px!important;
  margin:-10px!important;
  min-height:0!important;
}
html[data-viewport-height="tiny"] #view-gacha .casino-hero{
  padding:8px 12px!important;
  margin-bottom:6px!important;
}
html[data-viewport-height="tiny"] #view-gacha .casino-hero h2{
  font-size:20px!important;
  margin:2px 0!important;
}
html[data-viewport-height="tiny"] #view-gacha .casino-hero .section-copy{
  font-size:8px!important;
  line-height:1.25!important;
  margin:2px 0!important;
}
html[data-viewport-height="tiny"] #view-gacha .casino-balance strong{font-size:18px!important}
html[data-viewport-height="tiny"] #view-gacha .gacha-tabs{
  height:40px!important;
  margin:5px 0 7px!important;
}
html[data-viewport-height="tiny"] #view-gacha .gacha-tabs button{
  min-height:34px!important;
  padding:5px 12px!important;
}
html[data-viewport-height="tiny"] #view-gacha .capsule-storage-shell{
  padding:10px!important;
  border-radius:9px!important;
}
html[data-viewport-height="tiny"] #view-gacha .capsule-storage-head{
  margin-bottom:6px!important;
}
html[data-viewport-height="tiny"] #view-gacha .capsule-storage-head h2{
  font-size:20px!important;
  margin:2px 0!important;
}
html[data-viewport-height="tiny"] #view-gacha .capsule-storage-head p{
  margin:2px 0!important;
  font-size:9px!important;
}
html[data-viewport-height="tiny"] #view-gacha .capsule-storage-total{
  width:68px!important;height:52px!important;
}
html[data-viewport-height="tiny"] #view-gacha .capsule-tank{
  height:220px!important;
  min-height:220px!important;
}
html[data-viewport-height="tiny"] #view-gacha .capsule-batch-actions{
  margin-top:7px!important;
  gap:6px!important;
}
html[data-viewport-height="tiny"] #view-gacha .capsule-batch-btn{
  min-height:38px!important;
  padding:5px 7px!important;
}

/* BUY tab in the same short window. */
html[data-viewport-height="tiny"] #view-gacha .gacha-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
}
html[data-viewport-height="tiny"] #view-gacha .capsule-tier{
  padding:8px!important;
}
html[data-viewport-height="tiny"] #view-gacha .capsule-tier-art{
  height:38px!important;
  margin-bottom:3px!important;
}
html[data-viewport-height="tiny"] #view-gacha .capsule-tier h2{
  font-size:14px!important;margin:2px 0!important;
}
html[data-viewport-height="tiny"] #view-gacha .capsule-tier>p{
  font-size:7px!important;line-height:1.15!important;min-height:17px!important;margin:2px 0 4px!important;
}
html[data-viewport-height="tiny"] #view-gacha .odds-row{
  padding:3px 4px!important;font-size:7px!important;
}
html[data-viewport-height="tiny"] #view-gacha .odds-row i{display:none!important}
html[data-viewport-height="tiny"] #view-gacha .capsule-tier .primary.wide{
  padding:6px!important;font-size:8px!important;
}

/* Other non-scrollable/core game areas use the actual usable height too. */
html[data-viewport-height="tiny"] #view-play.active{padding-bottom:4px!important}
html[data-viewport-height="tiny"] .arena-card{
  min-height:calc(100vh - 56px)!important;
  height:calc(100vh - 56px)!important;
}
html[data-viewport-height="tiny"] .match-header{padding:5px 14px!important}
html[data-viewport-height="tiny"] .match-meta{min-height:36px!important;padding:3px 58px!important}
html[data-viewport-height="tiny"] .arena{height:calc(100vh - 210px)!important;min-height:245px!important}
html[data-viewport-height="tiny"] .choice-area{padding:5px 14px 8px!important}
html[data-viewport-height="tiny"] .choice{min-height:38px!important;padding:5px 9px!important}

/* Prevent horizontal pressure from the sidebar + HUD at the screenshot's width. */
html[data-viewport-width="compact"] .app-shell{grid-template-columns:220px minmax(0,1fr)}
html[data-viewport-width="compact"] .sidebar{padding-left:14px;padding-right:14px}
html[data-viewport-width="compact"] .main{padding-left:18px;padding-right:18px}
html[data-viewport-width="compact"] .player-summary{gap:8px}
html[data-viewport-width="compact"] .account-pill{max-width:230px}
html[data-viewport-width="compact"] .rank-chip.rank-mini-panel{min-width:138px!important}

/* If Chrome is genuinely narrow, collapse decorative HUD before content clips. */
html[data-viewport-width="narrow"] .app-shell{grid-template-columns:185px minmax(0,1fr)}
html[data-viewport-width="narrow"] .sidebar{padding:14px 10px}
html[data-viewport-width="narrow"] .main{padding-left:12px;padding-right:12px}
html[data-viewport-width="narrow"] .top-subtitle{display:none!important}
html[data-viewport-width="narrow"] .client-version{display:none!important}

/* v0.12.24 — viewport-safe coin inspector */
#coinInspectModal{
  align-items:center!important;
  justify-content:center!important;
  padding:14px!important;
  overflow:hidden!important;
}
#coinInspectModal .modal-panel.inspect-panel{
  width:min(920px,calc(100vw - 28px))!important;
  max-width:920px!important;
  max-height:calc(100vh - 28px)!important;
  height:auto!important;
  overflow:hidden!important;
  padding:18px 20px!important;
  display:flex!important;
  flex-direction:column!important;
}
#coinInspectModal .inspect-panel>.eyebrow{flex:0 0 auto}
#coinInspectModal .inspect-panel>h2{
  flex:0 0 auto;
  margin:5px 0 8px!important;
  font-size:clamp(20px,3vw,30px)!important;
}
#coinInspectModal .inspect-stage{
  flex:1 1 auto!important;
  min-height:180px!important;
  height:min(46vh,390px)!important;
  max-height:390px!important;
  margin:8px 0!important;
}
#coinInspectModal .inspect-coin-model{
  width:min(250px,34vh)!important;
  height:min(250px,34vh)!important;
}
#coinInspectModal .inspect-controls{
  flex:0 0 auto;
  gap:7px!important;
}
#coinInspectModal .inspect-controls button{
  padding:8px 12px!important;
  min-height:34px!important;
}
#coinInspectModal .inspect-drag-hint{
  flex:0 0 auto;
  margin-top:7px!important;
  font-size:7px!important;
  line-height:1.3!important;
}
#coinInspectModal #inspectCoinMeta{
  flex:0 0 auto;
  margin:7px 0 0!important;
  max-height:54px!important;
  overflow:hidden!important;
  font-size:10px!important;
  line-height:1.35!important;
}

/* Short Chrome/laptop windows: keep every inspector element in-view with no modal scrolling. */
@media(max-height:820px){
  #coinInspectModal .modal-panel.inspect-panel{
    max-height:calc(100vh - 18px)!important;
    padding:12px 16px!important;
  }
  #coinInspectModal .inspect-panel>h2{font-size:22px!important;margin:3px 0 5px!important}
  #coinInspectModal .inspect-stage{height:min(40vh,300px)!important;min-height:150px!important;margin:5px 0!important}
  #coinInspectModal .inspect-coin-model{width:min(205px,31vh)!important;height:min(205px,31vh)!important}
  #coinInspectModal .inspect-controls button{padding:6px 10px!important;min-height:30px!important;font-size:9px!important}
  #coinInspectModal .inspect-drag-hint{margin-top:5px!important;font-size:6px!important}
  #coinInspectModal #inspectCoinMeta{margin-top:5px!important;max-height:42px!important;font-size:9px!important}
}

/* Very short windows like ~600px usable height. */
@media(max-height:650px){
  #coinInspectModal{padding:8px!important}
  #coinInspectModal .modal-panel.inspect-panel{
    width:min(760px,calc(100vw - 16px))!important;
    max-height:calc(100vh - 12px)!important;
    padding:8px 12px!important;
  }
  #coinInspectModal .inspect-panel>.eyebrow{font-size:7px!important}
  #coinInspectModal .inspect-panel>h2{font-size:18px!important;margin:2px 0 3px!important}
  #coinInspectModal .inspect-stage{
    height:min(35vh,215px)!important;
    min-height:120px!important;
    max-height:215px!important;
    margin:4px 0!important;
  }
  #coinInspectModal .inspect-coin-model{
    width:min(155px,27vh)!important;
    height:min(155px,27vh)!important;
  }
  #coinInspectModal .inspect-controls{gap:5px!important}
  #coinInspectModal .inspect-controls button{
    min-height:27px!important;
    padding:4px 8px!important;
    font-size:8px!important;
  }
  #coinInspectModal .inspect-drag-hint{
    margin-top:3px!important;
    font-size:5.8px!important;
  }
  #coinInspectModal #inspectCoinMeta{
    margin-top:3px!important;
    max-height:32px!important;
    font-size:8px!important;
    line-height:1.2!important;
  }
  #coinInspectModal .modal-close{
    width:28px!important;height:28px!important;font-size:18px!important;
  }
}

/* Narrow screens: scale by width as well as height. */
@media(max-width:700px){
  #coinInspectModal .modal-panel.inspect-panel{
    width:calc(100vw - 14px)!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  #coinInspectModal .inspect-stage{
    height:min(38vh,230px)!important;
  }
  #coinInspectModal .inspect-coin-model{
    width:min(150px,42vw)!important;
    height:min(150px,42vw)!important;
  }
}

/* v0.12.25 — universal Auto-resolution safe fit */
html[data-auto-fit="on"]{
  width:var(--virtual-width,100vw)!important;
  min-width:var(--virtual-width,100vw)!important;
  height:var(--virtual-height,100vh)!important;
  min-height:var(--virtual-height,100vh)!important;
}
html[data-auto-fit="on"] body,
html[data-auto-fit="on"] .app-shell{
  width:var(--virtual-width,100vw)!important;
  min-width:var(--virtual-width,100vw)!important;
  height:var(--virtual-height,100vh)!important;
  min-height:var(--virtual-height,100vh)!important;
}

/* Keep a small visual safety gutter at the bottom of non-scrollable desktop views. */
html[data-auto-fit="on"] #view-play.active{
  padding-bottom:8px!important;
}
html[data-auto-fit="on"] .arena-card{
  max-height:calc(var(--virtual-height) - 76px)!important;
}
html[data-auto-fit="on"] .choice-area{
  flex:0 0 auto!important;
}
html[data-auto-fit="on"] .match-end-actions{
  flex:0 0 auto!important;
}

/* Auto-fit is only desktop behavior. Mobile remains normal responsive layout. */
@media(max-width:860px){
  html[data-auto-fit="on"]{
    width:100%!important;min-width:100%!important;height:auto!important;min-height:100%!important;
    zoom:1!important;
  }
  html[data-auto-fit="on"] body,
  html[data-auto-fit="on"] .app-shell{
    width:100%!important;min-width:100%!important;height:auto!important;min-height:100vh!important;
  }
}

/* v0.12.26 — guaranteed match-end presentation layer */
#victoryOverlay.victory-overlay{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  min-width:100vw!important;
  min-height:100vh!important;
  z-index:7000!important;
  display:grid;
  place-items:center;
  overflow:hidden!important;
  opacity:1;
  pointer-events:auto;
  isolation:isolate;
}
#victoryOverlay.victory-overlay.hidden{display:none!important}
#victoryOverlay.victory-overlay.show{
  opacity:1!important;
  animation:none!important;
}
#victoryOverlay .victory-copy{
  max-width:min(760px,88vw);
  min-width:min(520px,88vw);
  position:relative;
  z-index:3;
}
#victoryOverlay .victory-burst,#victoryOverlay .victory-rings{pointer-events:none}
@media(max-height:650px){
  #victoryOverlay .victory-copy{
    min-width:min(460px,84vw)!important;
    padding:18px 28px!important;
  }
  #victoryOverlay .victory-copy h1,
  #victoryOverlay.risk-allin .victory-copy h1{
    font-size:clamp(38px,8vh,58px)!important;
    margin:4px 0!important;
  }
  #victoryOverlay .payout-counter{font-size:20px!important;margin-top:8px!important}
  #victoryOverlay .victory-stake{margin:4px!important}
}

/* v0.12.28 — performance pass + reliable Store scrolling */

/* Store must own its vertical scroll region at every desktop resolution/zoom mode. */
#view-shop.active{
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-bottom:34px!important;
  overscroll-behavior:contain;
}
html[data-resolution]:not([data-resolution="auto"]) #view-shop.active,
html[data-auto-fit="on"] #view-shop.active{
  height:calc(var(--virtual-height,100vh) - 72px)!important;
  max-height:calc(var(--virtual-height,100vh) - 72px)!important;
  overflow-y:auto!important;
}
#view-shop .shop-grid{padding-bottom:10px!important}

/* Collection cards are expensive; isolate them and skip off-screen paint/layout work. */
.collection-type,
.collection-group{
  contain:layout paint style;
}
.collection-type{
  content-visibility:auto;
  contain-intrinsic-size:360px 280px;
}
.collection-art{
  contain:paint;
}

/* Reduce always-running collection animation cost while keeping the visual identity. */
.collection-type:not(:hover) .collection-halo,
.collection-type:not(:hover) .collection-art:before,
.collection-type:not(:hover) .collection-art:after{
  animation-play-state:paused!important;
}
.collection-type:hover .collection-halo,
.collection-type:hover .collection-art:before,
.collection-type:hover .collection-art:after{
  animation-play-state:running!important;
}

/* Match performance mode: pause decorative global animation/filter work that does not affect play. */
body.match-locked:after,
body.match-locked:before{
  animation:none!important;
}
body.match-locked .sidebar .brand-mark,
body.match-locked .sidebar .nav button:before{
  animation:none!important;
}
body.match-locked .topbar{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body.match-locked .arena-card,
body.match-locked .arena{
  contain:layout paint;
}
body.match-locked .match-panel{
  will-change:auto!important;
}

/* Constrained/auto-fit Chrome gets an even cheaper match atmosphere. */
html[data-viewport-height="tiny"] body.match-locked .arena:after,
html[data-auto-fit="on"] body.match-locked .arena:after{
  display:none!important;
}
html[data-viewport-height="tiny"] body.match-locked .arena:before,
html[data-auto-fit="on"] body.match-locked .arena:before{
  animation-duration:4s!important;
  filter:none!important;
}

/* v0.12.34 PvP disconnect grace */
.reconnect-banner{display:flex;align-items:center;justify-content:center;gap:14px;margin:7px 0 4px;padding:9px 14px;border:1px solid #ffb44a66;border-radius:9px;background:linear-gradient(90deg,#301b0dbd,#15100be8,#301b0dbd);box-shadow:0 0 28px #ff9d2530,inset 0 0 24px #ffb44a10;color:#ffd28a;letter-spacing:.08em;font-size:10px;font-weight:900}
.reconnect-banner span{font-size:14px;color:#fff0c7}.reconnect-banner b{font-size:18px;color:#ffbd54}.reconnect-banner.hidden{display:none}
body.match-reconnecting .choice-area{opacity:.38;pointer-events:none}
body.match-reconnecting .pre-match-wager{pointer-events:none}

/* v0.12.35 — Match HUD call/score readability */
.match-header .header-score{
  font-size:46px!important;
  line-height:.92!important;
  min-width:38px;
  padding:4px 8px;
  border-radius:8px;
  background:rgba(3,8,15,.62);
  border:1px solid currentColor;
  box-shadow:0 0 20px color-mix(in srgb,currentColor 28%,transparent),inset 0 0 16px rgba(255,255,255,.035);
  font-weight:950;
  letter-spacing:-.035em;
  text-align:center;
}
.match-competitor-left .header-score{color:#9bd1ff!important}
.match-competitor-right .header-score{color:#ff93a1!important}

.match-header .header-call{
  gap:8px;
  padding:6px 11px;
  min-height:34px;
  border-radius:8px;
  border-color:rgba(255,255,255,.18);
  background:rgba(3,8,15,.82);
  box-shadow:0 0 18px rgba(0,0,0,.35),inset 0 0 12px rgba(255,255,255,.025);
}
.match-header .header-call small{
  font-size:8px!important;
  font-weight:900;
  letter-spacing:.16em;
  color:#8193a8!important;
}
.match-header .header-call strong{
  font-size:17px!important;
  line-height:1!important;
  min-width:86px;
  font-weight:950;
  letter-spacing:.1em;
  text-align:center;
  color:#d9e1eb;
}
.match-header .header-call strong.call-heads{
  color:#85cbff!important;
  text-shadow:0 0 8px #4daeffaa,0 0 20px #4daeff66;
}
.match-header .header-call strong.call-tails{
  color:#ff8b9a!important;
  text-shadow:0 0 8px #ff5268aa,0 0 20px #ff526866;
}
.match-header .header-call strong.call-tie{
  color:#ffe779!important;
  text-shadow:0 0 14px rgba(245,215,104,.55);
}

/* Keep the larger HUD usable on shorter/narrower desktop layouts. */
@media (max-width:1100px),(max-height:720px){
  .match-header .header-score{font-size:38px!important;padding:3px 7px}
  .match-header .header-call{padding:5px 9px;min-height:30px}
  .match-header .header-call strong{font-size:14px!important;min-width:72px}
}

/* v0.12.36 — completion and bankroll feedback */
.player-summary .currency{position:relative;overflow:visible}.chip-gain-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:8000;padding:5px 9px;border-radius:7px;border:1px solid rgba(255,220,92,.55);background:rgba(20,16,4,.94);box-shadow:0 0 22px rgba(255,205,42,.34);color:#ffe36e;font-size:15px;font-weight:950;letter-spacing:.04em;white-space:nowrap;opacity:0;transform:translateY(7px) scale(.94);pointer-events:none;transition:opacity .2s ease,transform .2s ease}.chip-gain-pop.show{opacity:1;transform:translateY(0) scale(1);animation:chipGainFloat 1.9s ease forwards}@keyframes chipGainFloat{0%,58%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-18px)}}
.task-complete-stack{position:fixed;right:18px;top:92px;z-index:8500;display:flex;flex-direction:column;gap:10px;width:min(340px,calc(100vw - 36px));pointer-events:none}.task-complete-popup{padding:13px 15px;border:1px solid rgba(103,211,255,.42);border-radius:10px;background:linear-gradient(135deg,rgba(8,24,40,.97),rgba(12,14,26,.98));box-shadow:0 10px 38px rgba(0,0,0,.42),0 0 28px rgba(64,179,255,.16);opacity:0;transform:translateX(28px);transition:opacity .24s ease,transform .24s ease}.task-complete-popup.show{opacity:1;transform:translateX(0)}.task-complete-popup small{display:block;color:#77d6ff;font-size:9px;font-weight:950;letter-spacing:.15em;margin-bottom:5px}.task-complete-popup strong{display:block;color:#fff;font-size:14px;line-height:1.25;margin-bottom:4px}.task-complete-popup span{display:block;color:#aebdca;font-size:10px}

/* v0.12.37 */
.slot-paytable div{font-size:12px!important;line-height:1.35;padding:3px 2px}.slot-paytable strong{font-size:12px!important}
.slot-reels.spinning span{animation:none!important;will-change:transform,filter}.slot-reels span{transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .16s ease,border-color .25s,box-shadow .25s}
.coin-shell.coin-toss-active:before{animation:matchTossHalo 1.28s cubic-bezier(.2,.7,.2,1)}@keyframes matchTossHalo{0%,100%{transform:scale(1);opacity:.55}48%{transform:scale(1.28);opacity:1;filter:blur(20px)}}.match-coin.coin-reveal-snap{transition:transform .26s cubic-bezier(.16,.9,.25,1.15)!important}
.chip-gain-pop.spend{color:#ff8796!important;border-color:rgba(255,101,119,.55)!important;background:rgba(30,8,12,.96)!important;box-shadow:0 0 22px rgba(255,72,96,.25)!important}

/* v0.12.38 — match information readability */
.match-header{font-size:14px}
.match-header .competitor-name{font-size:16px!important;line-height:1.1;font-weight:950!important;letter-spacing:.045em}
.match-header .competitor-rank{font-size:11px!important;font-weight:850!important;letter-spacing:.08em}
.match-meta{font-size:12px!important;gap:14px!important}
.match-meta>span{font-size:12px!important;font-weight:900!important;letter-spacing:.075em;padding:5px 8px;border-radius:6px;background:rgba(3,8,15,.42)}
.match-meta .round-meta-label{font-size:13px!important}
.match-meta .turn-timer,.match-meta .turn-timer b{font-size:15px!important}
.match-leave-compact{font-size:11px!important;padding:7px 11px!important}
.match-result{font-size:16px!important;line-height:1.25!important;font-weight:950!important;letter-spacing:.065em}
.match-instruction,.match-subtitle,.arena-note{font-size:12px!important;line-height:1.4!important}
.match-choice .choice-title,.choice-area .choice-title{font-size:23px!important;font-weight:950!important;letter-spacing:.08em}
.match-choice .choice-sub,.choice-area .choice-sub{font-size:11px!important}
.match-spectator-count,.match-emote-label{font-size:11px!important}
.reconnect-banner{font-size:12px!important}.reconnect-banner span{font-size:16px!important}
@media (max-width:1100px),(max-height:720px){
 .match-header .competitor-name{font-size:14px!important}.match-header .competitor-rank{font-size:10px!important}
 .match-meta,.match-meta>span{font-size:10px!important}.match-meta .round-meta-label{font-size:11px!important}
 .match-result{font-size:14px!important}.match-choice .choice-title,.choice-area .choice-title{font-size:19px!important}
}

/* v0.12.39 — lively capsule reservoir physics */
.capsule-tank-contents{overflow:hidden}
.tank-capsule{left:0!important;top:0!important;animation:none!important;will-change:transform;transition:filter .12s ease,box-shadow .12s ease;transform-origin:center}
.tank-capsule:hover{z-index:8;filter:brightness(1.42) saturate(1.16);animation:none!important}
.capsule-overflow-note{position:absolute;right:12px;bottom:10px;z-index:6;padding:5px 8px;border:1px solid rgba(145,205,236,.18);border-radius:6px;background:rgba(4,12,19,.82);color:#7ea5ba;font-size:8px;font-weight:900;letter-spacing:.09em;pointer-events:none}

/* v0.13.0 — collectible player color sets */
:root{--player-theme-bg:#07111d;--player-theme-bg2:#0b1d31;--player-theme-accent:#77c9ff;--player-theme-accent2:#8a7dff;--player-theme-glow:rgba(78,177,255,.34);--player-theme-panel:rgba(9,24,40,.86)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 72% 14%,var(--player-theme-glow),transparent 30%),radial-gradient(circle at 16% 86%,color-mix(in srgb,var(--player-theme-accent2) 16%,transparent),transparent 34%),linear-gradient(145deg,var(--player-theme-bg),var(--player-theme-bg2));transition:background .45s ease}
body[data-player-theme] .topbar,body[data-player-theme] .card{border-color:color-mix(in srgb,var(--player-theme-accent) 24%,#243449)}
body[data-player-theme] .primary{background:linear-gradient(135deg,color-mix(in srgb,var(--player-theme-accent) 68%,#1c5f99),color-mix(in srgb,var(--player-theme-accent2) 62%,#303680))}
body[data-player-theme] #nav button.active{color:var(--player-theme-accent);border-color:color-mix(in srgb,var(--player-theme-accent) 55%,transparent);box-shadow:0 0 18px var(--player-theme-glow)}
body[data-player-theme] .profile-hero{background:radial-gradient(circle at 85% 20%,var(--player-theme-glow),transparent 36%),linear-gradient(135deg,var(--player-theme-panel),color-mix(in srgb,var(--player-theme-bg2) 84%,#071019));box-shadow:0 0 32px color-mix(in srgb,var(--player-theme-glow) 70%,transparent)}
.profile-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.profile-icon-btn{width:30px;height:30px;border-radius:8px;border:1px solid color-mix(in srgb,var(--player-theme-accent) 32%,#31465c);background:rgba(7,15,25,.72);color:var(--player-theme-accent);font-size:17px;display:grid;place-items:center;cursor:pointer;padding:0}.profile-icon-btn:hover{transform:translateY(-1px) scale(1.05);box-shadow:0 0 18px var(--player-theme-glow)}.profile-icon-btn.droplet{font-size:14px}
.profile-customize-panel{width:min(760px,calc(100vw - 30px));max-height:min(760px,calc(100vh - 30px));overflow:auto}.profile-edit-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:16px}.theme-set-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.theme-set-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;border:1px solid #304359;border-radius:10px;background:rgba(6,13,22,.78);color:#dce9f5;text-align:left;cursor:pointer}.theme-set-card.equipped{border-color:var(--swatch-a);box-shadow:0 0 22px color-mix(in srgb,var(--swatch-a) 30%,transparent)}.theme-set-card.locked{opacity:.42;cursor:not-allowed}.theme-set-card strong{font-size:12px}.theme-set-card small{font-size:9px;letter-spacing:.08em}
.theme-swatch,.theme-shop-preview{position:relative;width:100%;height:52px;overflow:hidden;border-radius:8px;background:radial-gradient(circle at 72% 22%,color-mix(in srgb,var(--swatch-a) 52%,transparent),transparent 35%),linear-gradient(135deg,var(--swatch-bg),color-mix(in srgb,var(--swatch-b) 28%,#08111c));border:1px solid color-mix(in srgb,var(--swatch-a) 42%,transparent)}.theme-swatch i,.theme-shop-preview i{position:absolute;width:44px;height:44px;border-radius:50%;right:12%;top:5px;background:radial-gradient(circle at 35% 30%,#fff,var(--swatch-a) 28%,var(--swatch-b) 75%);box-shadow:0 0 24px color-mix(in srgb,var(--swatch-a) 55%,transparent)}.theme-shop-preview{height:126px;margin-bottom:10px}
#publicProfileBody{border-radius:10px;background:radial-gradient(circle at 90% 4%,var(--public-theme-glow),transparent 35%),linear-gradient(145deg,color-mix(in srgb,var(--public-theme-bg) 92%,#08111c),#071019);padding:12px}#publicProfileBody .public-profile-head h2{color:var(--public-theme-accent,#dce9f5)}
@media(max-width:700px){.theme-set-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-edit-row{grid-template-columns:1fr}}

/* v0.13.1 — accuracy significance + match presentation timing */
.stat-card.accuracy-neutral #statFlipAcc{color:var(--text)}
.stat-card.accuracy-notable{border-color:rgba(94,194,255,.42);box-shadow:0 0 22px rgba(73,170,255,.10)}
.stat-card.accuracy-notable #statFlipAcc{color:#79d1ff;text-shadow:0 0 14px rgba(82,190,255,.35)}
.stat-card.accuracy-strong{border-color:rgba(255,194,84,.54);box-shadow:0 0 28px rgba(255,178,55,.16)}
.stat-card.accuracy-strong #statFlipAcc{color:#ffd071;text-shadow:0 0 18px rgba(255,177,55,.48)}
.stat-card.accuracy-extreme{border-color:rgba(255,103,55,.74);box-shadow:0 0 34px rgba(255,80,32,.24),inset 0 0 22px rgba(255,142,42,.06);overflow:visible}
.stat-card.accuracy-extreme #statFlipAcc{color:#fff0a8;text-shadow:0 0 7px #fff,0 0 16px #ffb52f,0 0 28px #ff4b21;animation:accuracyFire 1.05s ease-in-out infinite alternate}
.stat-card.accuracy-extreme:before{content:"";position:absolute;left:18%;right:18%;bottom:-5px;height:26px;background:radial-gradient(ellipse at 50% 100%,#ffda4fbb,transparent 46%),radial-gradient(ellipse at 32% 100%,#ff5b22aa,transparent 52%),radial-gradient(ellipse at 70% 100%,#ff781faa,transparent 50%);filter:blur(5px);opacity:.8;animation:accuracyFlame .72s ease-in-out infinite alternate;pointer-events:none}
.stat-card.accuracy-below.accuracy-notable #statFlipAcc{color:#ff9a9f;text-shadow:0 0 14px rgba(255,91,104,.34)}
.stat-card.accuracy-below.accuracy-strong #statFlipAcc{color:#ff746f;text-shadow:0 0 18px rgba(255,65,70,.44)}
.stat-card.accuracy-below.accuracy-extreme #statFlipAcc{color:#ffd0c1}
@keyframes accuracyFire{from{transform:translateY(0) scale(1);filter:brightness(1)}to{transform:translateY(-1px) scale(1.035);filter:brightness(1.28)}}
@keyframes accuracyFlame{from{transform:translateY(1px) scaleX(.92);opacity:.55}to{transform:translateY(-3px) scaleX(1.08);opacity:1}}
.match-coin{transition:transform .22s cubic-bezier(.18,.82,.2,1)}
@media (max-width:0px){.stat-card.accuracy-extreme #statFlipAcc,.stat-card.accuracy-extreme:before{animation:none!important}}

/* v0.13.2 — shared accuracy presentation + rotating home coin */
.hero-stat{position:relative;border-radius:10px;padding:6px 10px;transition:.2s}
.hero-stat.accuracy-notable strong{color:#79d1ff;text-shadow:0 0 14px rgba(82,190,255,.42)}
.hero-stat.accuracy-strong strong{color:#ffd071;text-shadow:0 0 18px rgba(255,177,55,.55)}
.hero-stat.accuracy-extreme strong{color:#fff0a8;text-shadow:0 0 7px #fff,0 0 16px #ffb52f,0 0 28px #ff4b21;animation:accuracyFire 1.05s ease-in-out infinite alternate}
.hero-stat.accuracy-extreme:after{content:"";position:absolute;left:28%;right:8%;bottom:-5px;height:22px;background:radial-gradient(ellipse at 50% 100%,#ffda4fbb,transparent 46%),radial-gradient(ellipse at 30% 100%,#ff5b22aa,transparent 52%),radial-gradient(ellipse at 72% 100%,#ff781faa,transparent 50%);filter:blur(5px);animation:accuracyFlame .72s ease-in-out infinite alternate;pointer-events:none}
.hero-stat.accuracy-below.accuracy-notable strong{color:#ff9a9f}.hero-stat.accuracy-below.accuracy-strong strong{color:#ff746f}
@media(max-width:0px){.home-view-coin .coin,.hero-stat.accuracy-extreme strong,.hero-stat.accuracy-extreme:after{animation:none!important}}

/* v0.14.0 — animated high-rarity coins */
.rarity-legendary .coin-asset,.rarity-legendary .market-coin-art,.coin-shell.rarity-legendary .coin{filter:drop-shadow(0 0 7px #ffb347) drop-shadow(0 0 15px #ff7b31);animation:legendaryCoinGlow 2.2s ease-in-out infinite alternate}
.rarity-mythic .coin-asset,.rarity-mythic .market-coin-art,.coin-shell.rarity-mythic .coin{filter:drop-shadow(0 0 8px #b96cff) drop-shadow(0 0 18px #53d8ff);animation:mythicCoinGlow 1.7s ease-in-out infinite alternate}
.rarity-relic .coin-asset,.rarity-relic .market-coin-art,.coin-shell.rarity-relic .coin{filter:drop-shadow(0 0 9px #fff0a8) drop-shadow(0 0 22px #ffca4c);animation:relicCoinGlow 1.45s ease-in-out infinite alternate}
@keyframes legendaryCoinGlow{to{filter:drop-shadow(0 0 11px #ffd479) drop-shadow(0 0 25px #ff7437);brightness:1.12}}
@keyframes mythicCoinGlow{to{filter:drop-shadow(0 0 13px #db8cff) drop-shadow(0 0 30px #42dcff);brightness:1.2}}
@keyframes relicCoinGlow{to{filter:drop-shadow(0 0 15px #fffbd1) drop-shadow(0 0 34px #ffb11c);brightness:1.25}}
[data-coin-id="solar"].rarity-mythic,.coin-shell[data-coin-id="solar"]{position:relative}
[data-coin-id="solar"].rarity-mythic:before,.coin-shell[data-coin-id="solar"]:before{content:"";position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(ellipse at 50% 80%,#ffd85cbb 0 12%,#ff6a23a0 25%,#e52c2144 43%,transparent 68%);filter:blur(7px);animation:solarFlame 1s ease-in-out infinite alternate;z-index:-1;pointer-events:none}
@keyframes solarFlame{from{transform:scale(.9) translateY(5px);opacity:.55}to{transform:scale(1.12) translateY(-5px);opacity:1}}

/* Public profile Career Accuracy */
.public-accuracy{position:relative;overflow:visible}
.public-accuracy.accuracy-notable strong{color:#79d1ff;text-shadow:0 0 14px #52beff66}
.public-accuracy.accuracy-strong strong{color:#ffd071;text-shadow:0 0 18px #ffb13788}
.public-accuracy.accuracy-extreme strong{color:#fff0a8;text-shadow:0 0 7px #fff,0 0 16px #ffb52f,0 0 28px #ff4b21;animation:accuracyFire 1.05s ease-in-out infinite alternate}
.public-accuracy.accuracy-extreme:after{content:"";position:absolute;left:20%;right:20%;bottom:-4px;height:20px;background:radial-gradient(ellipse at 50% 100%,#ffda4fbb,transparent 46%),radial-gradient(ellipse at 30% 100%,#ff5b22aa,transparent 52%);filter:blur(5px);animation:accuracyFlame .72s ease-in-out infinite alternate}
.public-accuracy.accuracy-below.accuracy-notable strong{color:#ff9a9f}.public-accuracy.accuracy-below.accuracy-strong strong{color:#ff746f}

/* Market */
.market-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:14px;background:radial-gradient(circle at 85% 20%,#54d7ff18,transparent 35%),linear-gradient(135deg,#0a111d,#0b1524)}
.market-hero h2{font-size:30px;margin:4px 0}.market-hero p{max-width:680px;color:var(--muted)}
.market-hero-metrics{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:8px}.market-hero-metrics div{padding:12px;border:1px solid #ffffff12;background:#050a12aa;border-radius:8px}.market-hero-metrics small{display:block;color:var(--muted);font-size:9px}.market-hero-metrics strong{display:block;margin-top:5px}
.market-tabs{display:flex;gap:8px;margin-bottom:12px}.market-tabs button{background:#08111d;border:1px solid #ffffff16;color:var(--muted);padding:9px 16px;border-radius:7px;font-weight:900}.market-tabs button.active{color:#fff;border-color:var(--accent);box-shadow:0 0 16px #4bbcff22}
.market-toolbar{display:grid;grid-template-columns:1fr 160px 160px auto;gap:8px;margin-bottom:10px}.market-toolbar input,.market-toolbar select,.market-sell-card select,.market-price-row input{background:#060c15;border:1px solid #ffffff18;color:var(--text);border-radius:6px;padding:10px}
.market-ticker{display:flex;gap:7px;overflow:auto;padding:2px 0 10px}.market-ticker>div{min-width:150px;padding:8px 10px;background:#07101b;border:1px solid #ffffff12;border-radius:7px}.market-ticker small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.market-ticker strong{margin-right:7px}
.market-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.market-listing{display:grid;grid-template-columns:82px 1fr auto;align-items:center;gap:12px;min-height:112px;position:relative;overflow:visible}.market-coin-visual{width:74px;height:74px;display:grid;place-items:center;position:relative}.market-coin-visual img{width:70px;height:70px;object-fit:contain}.market-listing-copy small,.market-listing-copy span{display:block;color:var(--muted);font-size:9px}.market-listing-copy strong{display:block;font-size:15px;margin:4px 0}.market-listing-price{text-align:right}.market-listing-price strong,.market-listing-price small{display:block}.market-listing-price small{color:var(--muted);margin:3px 0 8px}
.market-sell-card{max-width:760px;margin-bottom:12px}.market-price-row{display:grid;grid-template-columns:1fr 180px;gap:12px;align-items:end;margin:12px 0}.market-price-row label{font-size:10px;color:var(--muted)}.market-price-row input{display:block;width:100%;margin-top:5px}.market-price-row small{display:block;color:var(--muted)}.market-price-row strong{font-size:18px}.market-list{display:grid;gap:7px}.market-row{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #ffffff10;border-radius:7px;background:#07101a}.market-row>span{flex:1}.market-row small{display:block;color:var(--muted);font-size:9px;margin-top:3px}
@media(max-width:1000px){.market-grid{grid-template-columns:1fr}.market-hero{align-items:flex-start;flex-direction:column}.market-hero-metrics{width:100%}.market-toolbar{grid-template-columns:1fr 1fr}.market-hero-metrics{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:0px){.rarity-legendary .coin-asset,.rarity-mythic .coin-asset,.rarity-relic .coin-asset,.public-accuracy.accuracy-extreme strong,.public-accuracy.accuracy-extreme:after,[data-coin-id="solar"]:before{animation:none!important}}

/* v0.14.1 market history */
.market-chart-card{margin:0 0 12px;padding:14px}.market-chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.market-chart-head small{display:block;color:var(--muted);font-size:9px}.market-chart-head strong{display:block;margin-top:3px}.market-chart-head select{background:#060c15;border:1px solid #ffffff18;color:var(--text);border-radius:6px;padding:8px;min-width:210px}.market-chart-card canvas{display:block;width:100%;height:220px}.market-chart-empty{text-align:center;color:var(--muted);padding:70px 10px;position:absolute;left:0;right:0}.market-chart-card{position:relative}

/* v0.14.2 — market pins + exact instance picker */
.market-pin-btn,.market-ticker-pin{border:0;background:transparent;color:#708198;font-size:19px;cursor:pointer;padding:2px 5px}.market-pin-btn.pinned,.market-ticker-pin.pinned{color:#ffd65a;text-shadow:0 0 10px #ffca3b88}.market-ticker>div{position:relative}.market-ticker-pin{position:absolute;right:5px;top:3px;font-size:15px}.market-instance-picker-btn{margin:10px 0}.market-chosen-instance{min-height:66px;border:1px solid #ffffff14;background:#060c15;border-radius:8px;padding:10px;display:flex;gap:10px;align-items:center;color:var(--muted)}.market-chosen-instance .instance-icon{width:48px;height:48px}.market-chosen-instance .instance-icon img{width:46px;height:46px}.market-chosen-instance small,.market-chosen-instance span{display:block;color:var(--muted);font-size:9px}.market-chosen-instance strong{display:block;color:var(--text);margin:3px 0}.market-instance-modal-card{width:min(980px,92vw);max-height:86vh;overflow:auto}.market-instance-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.market-instance-type{display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center;padding:10px}.market-instance-type .mini-coin img{width:52px;height:52px}.market-instance-type small,.market-instance-type span{display:block;color:var(--muted);font-size:9px}.market-instance-type strong{display:block;margin:3px 0}.market-instance-copies{margin-top:12px;display:grid;gap:7px}.market-instance-copy-head{display:flex;gap:12px;align-items:center;margin-bottom:4px}.market-instance-copy-head strong{flex:1}.market-instance-copies .instance-row{grid-template-columns:58px 1fr auto}
@media(max-width:900px){.market-instance-type-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.market-instance-type-grid{grid-template-columns:1fr}}

/* v0.14.5 — store rotation stock + market pulse/graph visibility */
.shop-cap-line{display:flex;justify-content:space-between;gap:10px;margin:8px 0 2px;padding:7px 8px;border:1px solid #ffffff12;border-radius:6px;background:#050b13}.shop-cap-line span{font-size:8px;color:var(--muted);letter-spacing:.11em}.shop-cap-line strong{font-size:9px}
.market-chart-feature{min-height:430px}.market-chart-stage{position:relative;min-height:310px;border:1px solid #ffffff12;border-radius:8px;background:#040a12;overflow:hidden}.market-chart-stage canvas{display:block;width:100%;height:300px}.market-chart-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.market-chart-stats>div{padding:9px 10px;border:1px solid #ffffff12;border-radius:7px;background:#050b13}.market-chart-stats small{display:block;color:var(--muted);font-size:8px}.market-chart-stats strong{display:block;margin-top:3px}.market-chart-empty{pointer-events:none;position:absolute;left:0;right:0;bottom:10px;text-align:center;padding:5px;color:var(--muted);font-size:9px;letter-spacing:.08em}.market-chart-note{margin-top:9px}.market-ticker-name{appearance:none;border:0;background:transparent;color:inherit;font:inherit;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:#ffffff22;text-underline-offset:2px}
@media(max-width:700px){.market-chart-stats{grid-template-columns:1fr}.market-chart-stage{min-height:270px}.market-chart-stage canvas{height:260px}}

/* v0.14.6 — true two-sided 3D match flip */
.coin-shell{perspective:900px}.match-coin{transform-style:preserve-3d;will-change:transform;transform-origin:50% 50%}
.match-coin .coin-face{backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;overflow:hidden}
.match-coin .coin-face.heads{transform:translateZ(var(--coin-half-depth,7px)) rotateX(0deg)}
.match-coin .coin-face.tails{transform:translateZ(var(--coin-half-depth-neg,-7px)) rotateX(180deg)}
.match-coin .coin-face img{width:100%;height:100%;object-fit:contain;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.match-coin .coin-edge-stack{transform-style:preserve-3d}
.match-coin.show-tails{transform:rotateX(180deg)}

/* v0.14.9 — larger, draggable capsule tank objects */
.tank-capsule{width:66px;height:66px;user-select:none;-webkit-user-select:none;touch-action:none;cursor:grab}
.tank-capsule span{font-size:31px;line-height:32px}
.tank-capsule i{font-size:7px;margin-top:4px}
.tank-capsule.dragging{cursor:grabbing!important;z-index:20!important;filter:brightness(1.35);box-shadow:0 0 28px rgba(120,205,255,.32),inset 0 0 18px rgba(180,230,255,.16)}

/* v0.14.10 market activity + change-basis clarity */
#marketTicker .market-change-none,.market-change-none{color:var(--muted)}
#marketTicker span small,.market-listing-price small small{font-size:7px;letter-spacing:.08em;color:var(--muted);margin-left:3px}
.market-activity-note{color:var(--muted);font-size:10px;margin:-7px 0 14px}
.market-activity-row span>strong{font-size:10px;letter-spacing:.07em}
.market-activity-row.simulated{border-left:2px solid rgba(100,200,255,.36);padding-left:10px}

/* v0.14.11 centered toss: shell owns translation, coin owns axial rotation */
#matchCoinShell.coin-toss-active{will-change:transform}
.match-coin .coin-face{transform-origin:50% 50%}

/* v0.14.14 — special dopamine pages ignore the player's equipped color theme */
#view-shop,#view-casino,#view-gacha,#view-market{
  position:relative;isolation:isolate;overflow:hidden;border-radius:18px;
  --special-bg:#090713;--special-a:#ff4fc8;--special-b:#7c5cff;--special-c:#00e6ff
}
#view-shop{--special-bg:#160b05;--special-a:#ffbf3f;--special-b:#ff5f36;--special-c:#fff07a}
#view-casino{--special-bg:#110409;--special-a:#ff315f;--special-b:#8d35ff;--special-c:#ffd44f}
#view-gacha{--special-bg:#07101a;--special-a:#00d9ff;--special-b:#a94cff;--special-c:#ff4fa3}
#view-market{--special-bg:#03130e;--special-a:#22ffc1;--special-b:#00a8ff;--special-c:#ffd84a}
#view-shop:before,#view-casino:before,#view-gacha:before,#view-market:before{
  content:"";position:absolute;inset:-18%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 18% 24%,color-mix(in srgb,var(--special-a) 52%,transparent),transparent 28%),
    radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--special-b) 48%,transparent),transparent 30%),
    radial-gradient(circle at 64% 82%,color-mix(in srgb,var(--special-c) 42%,transparent),transparent 29%),
    linear-gradient(135deg,var(--special-bg),#020409 75%);
  filter:saturate(1.35);
  animation:specialPageDrift 10s ease-in-out infinite alternate
}
#view-shop:after,#view-casino:after,#view-gacha:after,#view-market:after{
  content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;opacity:.48;
  background:
    conic-gradient(from 0deg at 50% 50%,transparent 0 16%,color-mix(in srgb,var(--special-a) 24%,transparent) 22%,transparent 31% 52%,color-mix(in srgb,var(--special-b) 22%,transparent) 61%,transparent 72%),
    repeating-linear-gradient(115deg,transparent 0 60px,rgba(255,255,255,.025) 61px 62px);
  animation:specialPageSpin 24s linear infinite
}
#view-shop .card,#view-casino .card,#view-gacha .card,#view-market .card{
  backdrop-filter:blur(13px) saturate(1.16);
  background:linear-gradient(145deg,rgba(8,11,20,.80),rgba(10,14,24,.64))!important;
  border-color:color-mix(in srgb,var(--special-a) 27%,rgba(255,255,255,.12))!important
}
#view-market .market-hero,#view-shop .shop-hero,#view-casino .casino-hero,#view-gacha .gacha-hero{
  box-shadow:0 0 50px color-mix(in srgb,var(--special-a) 20%,transparent),inset 0 0 50px rgba(255,255,255,.02)
}
@keyframes specialPageDrift{
  0%{transform:translate3d(-2%,-1%,0) scale(1.02)}
  50%{transform:translate3d(2%,2%,0) scale(1.08)}
  100%{transform:translate3d(1%,-2%,0) scale(1.04)}
}
@keyframes specialPageSpin{to{transform:rotate(360deg)}}

/* Player's own Profile page: much brighter, theme-colored animated ambience. */
#view-stats{position:relative;isolation:isolate;overflow:hidden;border-radius:18px}
#view-stats:before{
  content:"";position:absolute;inset:-20%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 20% 25%,var(--player-theme-accent,#77c9ff) 0,transparent 29%),
    radial-gradient(circle at 82% 22%,var(--player-theme-accent2,#8a7dff) 0,transparent 31%),
    radial-gradient(circle at 55% 88%,var(--player-theme-glow,rgba(78,177,255,.34)) 0,transparent 35%),
    linear-gradient(145deg,var(--player-theme-bg2,#0b1d31),var(--player-theme-bg,#07111d));
  opacity:.58;filter:saturate(1.7) brightness(1.16) blur(1px);
  animation:profileAurora 8s ease-in-out infinite alternate
}
#view-stats:after{
  content:"";position:absolute;inset:-35%;z-index:-1;pointer-events:none;opacity:.30;
  background:conic-gradient(from 20deg,transparent 0 18%,var(--player-theme-accent,#77c9ff) 24%,transparent 31% 55%,var(--player-theme-accent2,#8a7dff) 64%,transparent 72%);
  animation:profileOrbit 28s linear infinite
}
#view-stats .card{background:linear-gradient(145deg,color-mix(in srgb,var(--player-theme-panel,rgba(9,24,40,.86)) 88%,transparent),rgba(5,8,15,.70))!important;backdrop-filter:blur(12px) saturate(1.25);border-color:color-mix(in srgb,var(--player-theme-accent,#77c9ff) 25%,rgba(255,255,255,.10))!important}
@keyframes profileAurora{0%{transform:translate(-3%,-2%) scale(1.02)}100%{transform:translate(3%,3%) scale(1.10)}}
@keyframes profileOrbit{to{transform:rotate(360deg)}}

/* Public player card/modal adopts that player's theme, not the viewer's. */
.player-profile-panel{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(145deg,var(--public-theme-panel,rgba(9,24,40,.92)),rgba(4,8,15,.92))!important;
  border-color:color-mix(in srgb,var(--public-theme-accent,#77c9ff) 48%,rgba(255,255,255,.12))!important;
  box-shadow:0 0 64px var(--public-theme-glow,rgba(78,177,255,.3)),0 28px 90px rgba(0,0,0,.62)
}
.player-profile-panel:before{
  content:"";position:absolute;inset:-35%;z-index:-2;pointer-events:none;opacity:.67;
  background:
    radial-gradient(circle at 25% 28%,var(--public-theme-accent,#77c9ff),transparent 24%),
    radial-gradient(circle at 78% 20%,var(--public-theme-accent2,#8a7dff),transparent 27%),
    radial-gradient(circle at 58% 80%,var(--public-theme-glow,rgba(78,177,255,.3)),transparent 32%);
  filter:saturate(1.7) blur(7px);animation:publicProfilePulse 7s ease-in-out infinite alternate
}
.player-profile-panel:after{
  content:"";position:absolute;inset:-45%;z-index:-1;pointer-events:none;opacity:.22;
  background:conic-gradient(from 0deg,transparent 0 22%,var(--public-theme-accent,#77c9ff) 30%,transparent 40% 64%,var(--public-theme-accent2,#8a7dff) 72%,transparent 82%);
  animation:publicProfileSpin 22s linear infinite
}
#publicProfileBody{position:relative;z-index:2}
#publicProfileBody .profile-grid>div,#publicProfileBody .public-equipped{
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border-color:color-mix(in srgb,var(--public-theme-accent,#77c9ff) 26%,rgba(255,255,255,.10))
}
@keyframes publicProfilePulse{0%{transform:translate(-2%,-2%) scale(1)}100%{transform:translate(3%,2%) scale(1.12)}}
@keyframes publicProfileSpin{to{transform:rotate(360deg)}}

@media(max-width:0px){
  #view-shop:before,#view-casino:before,#view-gacha:before,#view-market:before,
  #view-shop:after,#view-casino:after,#view-gacha:after,#view-market:after,
  #view-stats:before,#view-stats:after,.player-profile-panel:before,.player-profile-panel:after{animation:none!important}
}

/* v0.14.15 — three-tier market purchase dopamine animation */
.market-purchase-overlay{position:fixed;inset:0;z-index:170;display:grid;place-items:center;pointer-events:none;overflow:hidden;background:rgba(1,7,8,.30);opacity:0}
.market-purchase-overlay.hidden{display:none}
.market-purchase-overlay.show{opacity:1}
.market-purchase-glow,.market-purchase-rays{position:absolute;inset:-20%;pointer-events:none}
.market-purchase-glow{background:radial-gradient(circle at 50% 50%,rgba(41,255,192,.26),rgba(0,169,255,.10) 32%,transparent 63%);animation:marketBuyGlow 1.15s ease-out both}
.market-purchase-rays{opacity:.45;background:conic-gradient(from 0deg,transparent 0 8%,rgba(57,255,201,.24) 11%,transparent 16% 27%,rgba(0,185,255,.20) 31%,transparent 36% 58%,rgba(255,222,77,.16) 62%,transparent 68%);animation:marketBuyRays 2.3s ease-out both}
.market-purchase-copy{position:relative;z-index:2;display:grid;place-items:center;min-width:280px;padding:26px 42px;border:1px solid rgba(91,255,214,.34);border-radius:18px;background:linear-gradient(145deg,rgba(3,22,20,.92),rgba(4,10,18,.88));box-shadow:0 0 42px rgba(35,255,195,.18),inset 0 0 36px rgba(255,255,255,.03);animation:marketBuyCopy .72s cubic-bezier(.12,.88,.2,1.1) both}
.market-purchase-copy small{font-size:10px;letter-spacing:.18em;color:#78ffe1;font-weight:1000}
.market-purchase-copy h2{margin:9px 0 2px;font-size:25px;letter-spacing:.04em}
.market-purchase-copy>strong{font-size:28px;color:#ffe26b}
.market-purchase-copy>span{margin-top:6px;color:#b9ccd0;font-weight:800}
.market-purchase-coin{width:88px;height:88px;margin:13px 0 3px;display:grid;place-items:center;border-radius:50%;filter:drop-shadow(0 0 16px rgba(77,255,214,.38));animation:marketBuyCoin .9s cubic-bezier(.15,.8,.2,1) both}
.market-purchase-coin-img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.market-purchase-particle{position:absolute;left:50%;top:56%;width:5px;height:5px;border-radius:50%;background:#92ffe5;box-shadow:0 0 10px currentColor;animation:marketBuyParticle var(--pd) ease-out forwards}
.market-purchase-overlay.tier-medium .market-purchase-glow{background:radial-gradient(circle at 50% 50%,rgba(52,255,200,.39),rgba(0,170,255,.20) 32%,rgba(151,77,255,.10) 50%,transparent 68%)}
.market-purchase-overlay.tier-medium .market-purchase-copy{transform:scale(1.04);box-shadow:0 0 58px rgba(31,255,196,.30),0 0 90px rgba(34,155,255,.14),inset 0 0 42px rgba(255,255,255,.045)}
.market-purchase-overlay.tier-medium .market-purchase-coin{width:104px;height:104px;filter:drop-shadow(0 0 25px rgba(92,255,216,.58))}
.market-purchase-overlay.tier-large{background:rgba(1,7,8,.42)}
.market-purchase-overlay.tier-large .market-purchase-glow{background:radial-gradient(circle at 50% 50%,rgba(72,255,210,.55),rgba(0,166,255,.28) 28%,rgba(164,66,255,.17) 48%,transparent 70%);animation-duration:1.45s}
.market-purchase-overlay.tier-large .market-purchase-rays{opacity:.73;animation-duration:2.7s}
.market-purchase-overlay.tier-large .market-purchase-copy{padding:31px 52px;transform:scale(1.08);border-color:rgba(255,227,91,.48);box-shadow:0 0 75px rgba(37,255,199,.37),0 0 120px rgba(29,152,255,.20),inset 0 0 50px rgba(255,231,102,.05)}
.market-purchase-overlay.tier-large .market-purchase-coin{width:122px;height:122px;filter:drop-shadow(0 0 34px rgba(83,255,214,.72))}
.market-purchase-overlay.tier-large .market-purchase-copy h2{font-size:31px}
.market-purchase-overlay.tier-large .market-purchase-copy>strong{font-size:35px}
.market-purchase-overlay.tier-large .market-purchase-particle{width:6px;height:6px;background:#ffe777}
@keyframes marketBuyGlow{0%{opacity:0;transform:scale(.3)}32%{opacity:1;transform:scale(1.04)}100%{opacity:.42;transform:scale(1.22)}}
@keyframes marketBuyRays{0%{opacity:0;transform:rotate(-18deg) scale(.45)}35%{opacity:.65}100%{opacity:.18;transform:rotate(34deg) scale(1.18)}}
@keyframes marketBuyCopy{0%{opacity:0;transform:translateY(20px) scale(.62);filter:blur(8px) brightness(2)}65%{opacity:1;transform:translateY(-2px) scale(1.06);filter:none}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes marketBuyCoin{0%{opacity:0;transform:rotateY(-100deg) scale(.45)}62%{opacity:1;transform:rotateY(18deg) scale(1.13)}100%{opacity:1;transform:rotateY(0) scale(1)}}
@keyframes marketBuyParticle{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py))) scale(.15)}}
@media(max-width:0px){.market-purchase-overlay *{animation:none!important}}

/* v0.14.16 — subtle special-color Hub navigation */
#nav [data-view="casino"]{color:#ff8ca8;border-left:2px solid rgba(255,49,95,.38)}
#nav [data-view="gacha"]{color:#c798ff;border-left:2px solid rgba(169,76,255,.40)}
#nav [data-view="shop"]{color:#ffd170;border-left:2px solid rgba(255,191,63,.38)}
#nav [data-view="market"]{color:#74eec9;border-left:2px solid rgba(34,255,193,.34)}
#nav [data-view="casino"]:hover,#nav [data-view="gacha"]:hover,#nav [data-view="shop"]:hover,#nav [data-view="market"]:hover{filter:brightness(1.13)}
#nav .nav-tournament{position:relative;color:#aab5c5;margin-top:-2px}
#nav .nav-tournament small{float:right;margin-top:1px;font-size:6px;letter-spacing:.10em;color:#6f7b8d;border:1px solid #ffffff14;border-radius:4px;padding:2px 4px}

/* Tournament placeholder */
#view-tournament{position:relative;overflow:hidden;border-radius:18px}
.tournament-coming-soon{min-height:560px;display:grid;place-items:center;align-content:center;text-align:center;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(106,91,255,.17),transparent 32%),linear-gradient(145deg,#080b14,#101120)!important}
.tournament-coming-soon .tournament-mark{font-size:82px;color:#b9b4ff;text-shadow:0 0 34px rgba(124,108,255,.52)}
.tournament-coming-soon h1{font-size:58px;margin:8px 0 0;letter-spacing:.08em}
.tournament-coming-soon>strong{font-size:15px;letter-spacing:.24em;color:#8e96a8;margin:4px 0 18px}
.tournament-coming-soon p{max-width:650px;color:#8f9bb0;line-height:1.65}
.tournament-preview-row{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:20px}.tournament-preview-row span{padding:8px 12px;border:1px solid #ffffff14;border-radius:20px;color:#8f99aa;font-size:8px;letter-spacing:.10em}
.tournament-orbit{position:absolute;border:1px solid rgba(137,124,255,.15);border-radius:50%;pointer-events:none}.orbit-a{width:520px;height:220px;transform:rotate(18deg);animation:tournamentOrbitA 14s linear infinite}.orbit-b{width:360px;height:500px;transform:rotate(-31deg);animation:tournamentOrbitB 18s linear infinite}
@keyframes tournamentOrbitA{to{transform:rotate(378deg)}}@keyframes tournamentOrbitB{to{transform:rotate(329deg)}}

/* Queue Versus Token: actual obtainable coin + stronger aura */
.queue-vs-coin-wrap{position:relative}
.queue-vs-aura{position:absolute;left:50%;top:50%;width:128px;height:128px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(89,242,255,.42) 0,rgba(94,122,255,.22) 37%,rgba(174,81,255,.10) 56%,transparent 73%);filter:blur(4px);animation:versusQueueAura 1.8s ease-in-out infinite alternate;pointer-events:none}
.queue-vs-coin{filter:drop-shadow(0 0 14px rgba(100,235,255,.56)) drop-shadow(0 0 28px rgba(112,92,255,.26))}
.queue-vs-face{overflow:hidden;background:#07111c!important}.queue-vs-face img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
@keyframes versusQueueAura{0%{opacity:.52;transform:translate(-50%,-50%) scale(.82)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}}

/* Versus Token collection/match aura follows the actual coin everywhere */
[data-coin-id="versus"],.rarity-rare [data-coin-id="versus"]{position:relative}
[data-coin-id="versus"]{filter:drop-shadow(0 0 11px rgba(91,237,255,.50)) drop-shadow(0 0 20px rgba(116,87,255,.25));animation:versusTokenGlow 1.9s ease-in-out infinite alternate}
@keyframes versusTokenGlow{0%{filter:drop-shadow(0 0 8px rgba(91,237,255,.40)) drop-shadow(0 0 14px rgba(116,87,255,.18))}100%{filter:drop-shadow(0 0 17px rgba(91,237,255,.75)) drop-shadow(0 0 30px rgba(116,87,255,.40))}}
@media(max-width:0px){.queue-vs-aura,[data-coin-id="versus"],.tournament-orbit{animation:none!important}}

/* v0.14.17 — Home equipped coin: true continuous 3D turn on a separate transform layer */
#heroCoinShell.home-view-coin{
  perspective:900px;
  transform-style:preserve-3d;
  animation:homeCoinShell3DTurn 7.2s linear infinite;
  will-change:transform
}
#heroCoinShell.home-view-coin>.coin{
  transform-style:preserve-3d;
  animation:none;
  transform:rotateX(-9deg)
}
#heroCoinShell.home-view-coin .coin-face,
#heroCoinShell.home-view-coin .coin-edge-stack{backface-visibility:hidden}
@keyframes homeCoinShell3DTurn{
  0%{transform:rotateX(-7deg) rotateY(0deg)}
  25%{transform:rotateX(-4deg) rotateY(90deg)}
  50%{transform:rotateX(-8deg) rotateY(180deg)}
  75%{transform:rotateX(-5deg) rotateY(270deg)}
  100%{transform:rotateX(-7deg) rotateY(360deg)}
}

/* Market Browse listings get their own scroll surface so long seller/listing sets are never clipped. */
#marketBrowsePanel{min-height:0;overflow:visible}
#marketBrowsePanel #marketListings{
  max-height:min(58vh,620px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  padding-right:8px;
  padding-bottom:10px;
  scrollbar-gutter:stable
}
#marketBrowsePanel #marketListings::-webkit-scrollbar{width:9px}
#marketBrowsePanel #marketListings::-webkit-scrollbar-track{background:#03100d;border-radius:8px}
#marketBrowsePanel #marketListings::-webkit-scrollbar-thumb{background:linear-gradient(#29e6ba,#168bc4);border-radius:8px;border:2px solid #03100d}

/* Make theme acquisition discoverable rather than hidden behind the droplet icon. */
.theme-acquisition-card{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--player-theme-accent) 12%,rgba(6,12,22,.90)),rgba(7,10,18,.82))!important}
.theme-acquisition-card h3{margin:4px 0 5px;font-size:22px}.theme-acquisition-card p{margin:0;color:var(--muted);font-size:11px}
.theme-source-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.theme-source-row span{padding:6px 8px;border:1px solid #ffffff12;border-radius:6px;background:#050a12aa;color:#8e9bb0;font-size:8px;letter-spacing:.07em}.theme-source-row b{color:#d9f7ff}
.theme-drop-banner{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;margin-bottom:12px;padding:10px 13px!important;border-color:rgba(185,112,255,.24)!important}.theme-drop-banner span{font-size:8px;letter-spacing:.12em;color:#d6a6ff;font-weight:900}.theme-drop-banner strong{font-size:9px}.theme-drop-banner small{grid-column:1/-1;color:var(--muted);font-size:8px}
@media(max-width:760px){.theme-acquisition-card{align-items:flex-start;flex-direction:column}.theme-source-row{gap:5px}}
@media(max-width:0px){#heroCoinShell.home-view-coin{animation:none!important}}

/* v0.14.18 — match coin uses the complete two-sided 3D model during X-axis tosses */
#matchCoin{transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform}
#matchCoin .coin-face.heads{transform:translateZ(var(--coin-half-depth,7px)) rotateX(0deg);backface-visibility:hidden}
#matchCoin .coin-face.tails{transform:translateZ(var(--coin-half-depth-neg,-7px)) rotateX(180deg);backface-visibility:hidden}
#matchCoin .coin-edge-stack{transform-style:preserve-3d}
#matchCoinShell{perspective:950px;transform-style:preserve-3d}

/* v0.14.18 — Collection performance pass */
#view-inventory .collection-grid,
#view-inventory .collection-group-grid{contain:layout paint style}
#view-inventory .collection-type{
  content-visibility:auto;
  contain-intrinsic-size:320px 250px;
  transform:translateZ(0)
}
#view-inventory .collection-type .coin-asset,
#view-inventory .collection-type .collection-coin-model,
#view-inventory [data-coin-id="versus"]{
  animation:none!important;
  will-change:auto!important
}
#view-inventory .rarity-legendary .coin-asset{filter:drop-shadow(0 0 8px #ffb347)}
#view-inventory .rarity-mythic .coin-asset{filter:drop-shadow(0 0 9px #b96cff)}
#view-inventory .rarity-relic .coin-asset{filter:drop-shadow(0 0 10px #fff0a8)}

/* v0.14.19 — Market Browse scroll + Home full-model rotation fixes */
#view-market{overflow:visible!important;padding-bottom:28px}
#view-market:before,#view-market:after{border-radius:18px}
#marketBrowsePanel{overflow:visible!important;padding-bottom:18px}
#marketBrowsePanel #marketListings{
  height:min(58vh,620px);
  max-height:none;
  overflow-y:scroll;
  padding-bottom:34px;
  scroll-padding-bottom:34px
}
#marketBrowsePanel #marketListings:after{
  content:"";display:block;grid-column:1/-1;height:20px
}

/* Rotate the complete prepared model, not a flat face. */
#heroCoinShell.home-view-coin{perspective:1000px!important;transform-style:preserve-3d!important;animation:none!important}
#heroCoinShell.home-view-coin>.coin{
  animation:homeFullModelTurn 7.2s linear infinite!important;
  transform-style:preserve-3d!important;
  transform-origin:50% 50%;
  will-change:transform
}
#heroCoinShell.home-view-coin>.coin>.coin-face.heads{
  transform:translateZ(var(--coin-half-depth,7px)) rotateY(0deg)!important
}
#heroCoinShell.home-view-coin>.coin>.coin-face.tails{
  transform:rotateY(180deg) translateZ(var(--coin-half-depth,7px))!important
}
#heroCoinShell.home-view-coin>.coin>.coin-edge-stack{display:block!important;transform-style:preserve-3d!important}
@keyframes homeFullModelTurn{
  0%{transform:rotateX(-8deg) rotateY(0deg)}
  25%{transform:rotateX(-6deg) rotateY(90deg)}
  50%{transform:rotateX(-8deg) rotateY(180deg)}
  75%{transform:rotateX(-6deg) rotateY(270deg)}
  100%{transform:rotateX(-8deg) rotateY(360deg)}
}
@media(max-width:0px){#heroCoinShell.home-view-coin>.coin{animation:none!important}}

/* v0.14.20 — hard-center match result presentation */
.victory-overlay{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  justify-content:center!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
}
.victory-overlay.hidden{display:none!important}
.victory-overlay .victory-copy{
  position:relative;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  margin:0 auto!important;
  transform-origin:center center!important;
  text-align:center
}

#matchCoin .coin-face.heads{
  transform:translateZ(var(--coin-half-depth,7px)) rotateY(0deg)!important;
  backface-visibility:hidden!important
}
#matchCoin .coin-face.tails{
  transform:rotateY(180deg) translateZ(var(--coin-half-depth,7px))!important;
  backface-visibility:hidden!important
}

/* v0.14.21 — viewport-fit / clipping pass across full-page views */

/* Page-level content must remain vertically reachable. Special animated pages previously
   clipped descendants because their ambient background wrapper used overflow:hidden. */
html,body{overflow-y:auto!important}
.main{min-width:0;padding-bottom:max(44px,env(safe-area-inset-bottom))}
.view.active{min-width:0}
#view-shop,#view-casino,#view-gacha,#view-market{
  overflow:visible!important;
  padding-bottom:28px
}

/* Keep the animated special-page ambience visually bounded without using the page itself
   as the clipping container. */
#view-shop:before,#view-shop:after,
#view-casino:before,#view-casino:after,
#view-gacha:before,#view-gacha:after,
#view-market:before,#view-market:after{
  border-radius:18px;
  pointer-events:none
}

/* Unboxing Storage now sizes its tank from the usable viewport instead of assuming a tall
   desktop. This keeps the per-capsule OPEN / OPEN 5× controls below it reachable. */
#view-gacha .capsule-storage-shell{
  overflow:visible!important;
  padding-bottom:22px
}
#view-gacha .capsule-tank{
  height:clamp(260px,calc(100vh - 500px),410px)!important;
  min-height:260px
}
#view-gacha .capsule-batch-actions{
  position:relative;
  z-index:8;
  margin-bottom:8px
}

/* At shorter supported resolutions compress nonessential vertical whitespace rather than
   letting controls fall below an unreachable clipped edge. */
@media(max-height:850px){
  .main{padding-bottom:28px}
  #view-gacha .gacha-tabs{margin:9px 0 10px}
  #view-gacha .theme-drop-banner{margin-bottom:8px}
  #view-gacha .capsule-storage-shell{padding:14px}
  #view-gacha .capsule-storage-head{margin-bottom:9px}
  #view-gacha .capsule-storage-head p{margin:5px 0}
  #view-gacha .capsule-tank{height:clamp(250px,calc(100vh - 485px),330px)!important}
}
@media(max-height:720px){
  .topbar{height:76px}
  #view-gacha .capsule-storage-head p{display:none}
  #view-gacha .capsule-tank{height:250px!important}
  #view-gacha .capsule-batch-btn{padding:8px 10px}
}

/* Generic safety: long grids/panels can grow the document instead of being masked by a
   page wrapper at any supported resolution. */
#view-inventory,#view-bots,#view-leaderboard,#view-stats,#view-tournament,#view-play{
  overflow:visible
}

/* v0.14.22 — real two-sided match coin. The toss rotates around X, so the two image
   planes are opposed around X as well. This prevents the head SVG's backface from
   masquerading as tails. */
#matchCoin .coin-face.heads{
  transform:translateZ(var(--coin-half-depth,7px)) rotateX(0deg)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important
}
#matchCoin .coin-face.tails{
  transform:translateZ(var(--coin-half-depth-neg,-7px)) rotateX(180deg)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important
}
#matchCoin .coin-face.heads>img,
#matchCoin .coin-face.tails>img{
  transform:none!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important
}
#matchCoin .coin-face.tails:after{transform:none!important}

/* v0.14.23 — Home coin uses the actual complete 3D asset with a correctly positioned back face. */
#heroCoinShell.home-view-coin>.coin>.coin-face.heads{
  transform:translateZ(var(--coin-half-depth,7px)) rotateY(0deg)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important
}
#heroCoinShell.home-view-coin>.coin>.coin-face.tails{
  transform:translateZ(var(--coin-half-depth-neg,-7px)) rotateY(180deg)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important
}
#heroCoinShell.home-view-coin>.coin>.coin-face.heads>img,
#heroCoinShell.home-view-coin>.coin>.coin-face.tails>img{
  transform:none!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important
}
#heroCoinShell.home-view-coin>.coin>.coin-edge-stack{
  display:block!important;
  transform-style:preserve-3d!important
}

/* v0.14.24 — all long Market tabs get reachable internal scroll surfaces */
#marketSellPanel,#marketPinnedPanel,#marketActivityPanel{
  min-height:0;
  overflow:visible!important;
  padding-bottom:18px
}
#marketSellPanel{
  max-height:min(66vh,700px);
  overflow-y:auto!important;
  padding-right:8px;
  padding-bottom:30px;
  scrollbar-gutter:stable
}
#marketPinnedPanel #marketPinnedCoins,
#marketActivityPanel #marketTrades{
  max-height:min(64vh,680px);
  overflow-y:auto!important;
  overflow-x:hidden;
  overscroll-behavior:contain;
  padding-right:8px;
  padding-bottom:28px;
  scroll-padding-bottom:28px;
  scrollbar-gutter:stable
}
#marketSellPanel::-webkit-scrollbar,
#marketPinnedPanel #marketPinnedCoins::-webkit-scrollbar,
#marketActivityPanel #marketTrades::-webkit-scrollbar{width:9px}
#marketSellPanel::-webkit-scrollbar-track,
#marketPinnedPanel #marketPinnedCoins::-webkit-scrollbar-track,
#marketActivityPanel #marketTrades::-webkit-scrollbar-track{background:#03100d;border-radius:8px}
#marketSellPanel::-webkit-scrollbar-thumb,
#marketPinnedPanel #marketPinnedCoins::-webkit-scrollbar-thumb,
#marketActivityPanel #marketTrades::-webkit-scrollbar-thumb{
  background:linear-gradient(#29e6ba,#168bc4);border-radius:8px;border:2px solid #03100d
}

/* v0.14.25 — deterministic two-face rendering for Home + Match.
   We still rotate the complete model and edge stack; opacity merely prevents browser
   backface-compositing bugs from displaying a mirrored head instead of the actual tails SVG. */
#heroCoinShell.home-view-coin>.coin>.coin-face,
#matchCoin>.coin-face{
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important
}
#heroCoinShell.home-view-coin>.coin>.coin-face.heads{
  transform:translateZ(var(--coin-half-depth,7px))!important;
  animation:homeHeadsVisible 7.2s linear infinite!important
}
#heroCoinShell.home-view-coin>.coin>.coin-face.tails{
  transform:translateZ(var(--coin-half-depth-neg,-7px)) rotateY(180deg)!important;
  animation:homeTailsVisible 7.2s linear infinite!important
}
@keyframes homeHeadsVisible{
  0%,18%{opacity:1}
  24%,76%{opacity:0}
  82%,100%{opacity:1}
}
@keyframes homeTailsVisible{
  0%,18%{opacity:0}
  24%,76%{opacity:1}
  82%,100%{opacity:0}
}
#matchCoin>.coin-face.heads,#matchCoin>.coin-face.tails{transition:none!important}
#matchCoin>.coin-face.heads{transform:translateZ(var(--coin-half-depth,7px)) rotateX(0deg)!important}
#matchCoin>.coin-face.tails{transform:translateZ(var(--coin-half-depth-neg,-7px)) rotateX(180deg)!important}

/* v0.14.25 — Market layout reset. Keep every control aligned to the same content width,
   and make Browse itself the one scroll container instead of relying on page/body scroll. */
#view-market{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  padding-bottom:10px!important
}
#view-market>*{min-width:0;max-width:100%}
#view-market .market-tabs,
#view-market .market-panel,
#view-market .market-hero,
#view-market .market-toolbar,
#view-market .market-ticker{
  width:100%;
  margin-left:0!important;
  margin-right:0!important
}
#marketBrowsePanel{
  min-width:0!important;
  width:100%!important;
  overflow:hidden!important;
  padding-bottom:0!important
}
#marketBrowsePanel #marketListings{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  min-width:0!important;
  height:clamp(250px,calc(100vh - 405px),610px)!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  align-content:start!important;
  gap:10px!important;
  padding:0 8px 34px 0!important;
  margin:0!important;
  scrollbar-gutter:stable!important;
  overscroll-behavior:contain
}
#marketBrowsePanel #marketListings>.market-listing{
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important
}
#marketBrowsePanel #marketListings:after{
  content:"";display:block;grid-column:1/-1;height:26px
}
.market-toolbar{grid-template-columns:minmax(220px,1fr) 160px 160px auto!important}
.market-ticker{min-width:0!important;overflow-x:auto!important}
@media(max-width:1000px){
  #marketBrowsePanel #marketListings{grid-template-columns:1fr!important}
  .market-toolbar{grid-template-columns:minmax(0,1fr) minmax(130px,.4fr)!important}
}
@media(max-height:760px){
  #marketBrowsePanel #marketListings{height:calc(100vh - 355px)!important;min-height:220px}
}

/* v0.14.26 — hide choice controls completely after a call and during the toss */
.choice-area.choice-area-hidden{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.choice-area{
  transition:opacity .14s ease;
}

/* v0.14.27 — authoritative coin rendering fix.
   Root cause fixed: edge textures used to be full opaque discs at every Z-depth, which
   covered the actual tails plane. They are now rim-only slices. */
.coin-edge-layer{
  -webkit-mask-image:radial-gradient(circle at center,transparent 0 81%,#000 83% 100%)!important;
  mask-image:radial-gradient(circle at center,transparent 0 81%,#000 83% 100%)!important;
  -webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;pointer-events:none!important
}
#heroCoinShell .coin-face,#matchCoin .coin-face{
  border:0!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important;
  padding:0!important;overflow:visible!important;transform-style:preserve-3d!important;
  backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important
}
#heroCoinShell .coin-face:after,#matchCoin .coin-face:after{display:none!important}
#heroCoinShell .coin-face>img,#matchCoin .coin-face>img{
  display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;
  transform:none!important;opacity:1!important
}

/* HOME: complete 3D model with real tails asset on the back plane. */
#heroCoinShell.home-view-coin{position:relative;perspective:1000px!important;transform-style:preserve-3d!important}
#heroCoinShell.home-view-coin>.coin{
  animation:homeTrue3DSpin 7.2s linear infinite!important;transform-style:preserve-3d!important;
  transform-origin:50% 50%!important
}
#heroCoinShell.home-view-coin>.coin>.coin-face.heads{transform:translateZ(var(--coin-half-depth,7px))!important;animation:none!important}
#heroCoinShell.home-view-coin>.coin>.coin-face.tails{transform:translateZ(var(--coin-half-depth-neg,-7px)) rotateY(180deg)!important;animation:none!important}
@keyframes homeTrue3DSpin{
  0%{transform:rotateX(-8deg) rotateY(0deg)}
  25%{transform:rotateX(-6deg) rotateY(90deg)}
  50%{transform:rotateX(-8deg) rotateY(180deg)}
  75%{transform:rotateX(-6deg) rotateY(270deg)}
  100%{transform:rotateX(-8deg) rotateY(360deg)}
}

/* MATCH: same approved X-axis toss, real tails asset on the physical opposite X plane. */
#matchCoinShell{position:relative;perspective:950px!important;transform-style:preserve-3d!important}
#matchCoin{transform-style:preserve-3d!important;transform-origin:50% 50%!important}
#matchCoin>.coin-face.heads{transform:translateZ(var(--coin-half-depth,7px))!important}
#matchCoin>.coin-face.tails{transform:translateZ(var(--coin-half-depth-neg,-7px)) rotateX(180deg)!important}
#matchCoin>.coin-edge-stack,#heroCoinShell.home-view-coin>.coin>.coin-edge-stack{display:block!important;transform-style:preserve-3d!important}

/* All coin aura/glow layers are strictly behind coin artwork/model. */
.coin-shell:before{z-index:0!important;pointer-events:none!important}
.coin-shell>.coin{position:relative!important;z-index:2!important}
.collection-art,.coin-preview,.market-coin-visual,.modal-coin,.instance-icon{isolation:isolate}
.collection-halo,.rarity-beam{z-index:0!important;pointer-events:none!important}
.collection-art .mini-coin,.coin-preview .mini-coin,.market-coin-visual>img,.modal-coin>img,.instance-icon>img{position:relative!important;z-index:2!important}

/* Inspector aura behind the complete 3D model. */
.inspect-stage{position:relative!important;isolation:isolate!important}
.inspect-stage:before{
  content:"";position:absolute;left:50%;top:50%;width:min(310px,44vh);height:min(310px,44vh);
  transform:translate(-50%,-50%);border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,var(--inspect-aura,rgba(99,179,255,.30)) 0,rgba(99,179,255,.12) 40%,transparent 70%);
  filter:blur(16px)
}
.inspect-coin-model{position:relative!important;z-index:2!important}

/* Collection page owns vertical scrolling in desktop auto-fit/fixed-resolution mode. */
#view-inventory.active{
  min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
  padding-bottom:36px!important;overscroll-behavior:contain
}
html[data-resolution]:not([data-resolution="auto"]) #view-inventory.active,
html[data-auto-fit="on"] #view-inventory.active{
  height:calc(var(--virtual-height,100vh) - 72px)!important;
  max-height:calc(var(--virtual-height,100vh) - 72px)!important
}
#view-inventory #inventoryGrid{padding-bottom:30px!important}
@media(max-width:860px){#view-inventory.active{height:auto!important;max-height:none!important;overflow:visible!important}}
@media(max-width:0px){#heroCoinShell.home-view-coin>.coin{animation:none!important}}

/* v0.14.28 — Home and match now literally use the same 3D model structure as View Coin. */
.runtime-coin-model{
  position:relative!important;
  transform-style:preserve-3d!important;
  transition:none;
}
.home-runtime-model{width:180px!important;height:180px!important}
.match-runtime-model{width:170px!important;height:170px!important}
.runtime-coin-model .inspect-face{
  position:absolute!important;inset:0!important;border:0!important;background:transparent!important;
  box-shadow:none!important;overflow:visible!important;backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;transform-style:preserve-3d!important
}
.runtime-coin-model .runtime-heads{transform:translateZ(var(--coin-half-depth,7px))!important}
.runtime-coin-model .runtime-coin-asset{display:block;width:100%;height:100%;object-fit:contain;transform:none!important}

/* Home rotates exactly the inspector-style model, with a Y-opposed real Tails face. */
#heroCoinModel .runtime-tails{transform:translateZ(var(--coin-half-depth-neg,-7px)) rotateY(180deg)!important}
#heroCoinModel{animation:homeInspectorModelSpin 7.2s linear infinite!important;transform-origin:50% 50%!important}
@keyframes homeInspectorModelSpin{
  0%{transform:rotateX(-8deg) rotateY(0deg)}
  25%{transform:rotateX(-6deg) rotateY(90deg)}
  50%{transform:rotateX(-8deg) rotateY(180deg)}
  75%{transform:rotateX(-6deg) rotateY(270deg)}
  100%{transform:rotateX(-8deg) rotateY(360deg)}
}

/* Match keeps the approved X-axis toss, therefore its real Tails face is X-opposed. */
#matchCoin .runtime-tails{transform:translateZ(var(--coin-half-depth-neg,-7px)) rotateX(180deg)!important}
#matchCoin{transform-origin:50% 50%!important;will-change:transform}
#matchCoinShell{perspective:950px!important;transform-style:preserve-3d!important}

/* Use the same solid edge presentation as the inspector, but make it narrow enough not to cover faces. */
.runtime-coin-model .coin-edge-stack{position:absolute!important;inset:0!important;display:block!important;transform-style:preserve-3d!important;pointer-events:none!important}
.runtime-coin-model .coin-edge-layer{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;
  border-radius:50%!important;pointer-events:none!important;
  -webkit-mask-image:radial-gradient(circle at center,transparent 0 88%,#000 89% 100%)!important;
  mask-image:radial-gradient(circle at center,transparent 0 88%,#000 89% 100%)!important
}

/* Aura is a separate backdrop behind both the static/flat artwork and the true 3D model. */
.coin-shell{isolation:isolate!important}
.coin-shell:before{z-index:0!important;pointer-events:none!important}
.coin-shell>.runtime-coin-model,.coin-shell>.coin{z-index:2!important;position:relative!important}
.collection-art,.coin-preview,.market-coin-visual,.modal-coin,.instance-icon,.inspect-stage{isolation:isolate!important}
.collection-halo,.rarity-beam,.inspect-stage:before{z-index:0!important;pointer-events:none!important}
.collection-art .mini-coin,.coin-preview .mini-coin,.market-coin-visual>img,.modal-coin>img,.instance-icon>img,#inspectCoinModel{position:relative!important;z-index:2!important}

/* Collection scroll: make the content pane independently reachable in the fixed virtual canvas. */
#view-inventory.active{
  display:block!important;
  height:calc(100vh - 92px)!important;
  max-height:calc(100vh - 92px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:8px!important;
  padding-bottom:56px!important;
  scrollbar-gutter:stable!important;
}
#view-inventory #inventoryGrid{padding-bottom:46px!important}
@media(max-height:760px){#view-inventory.active{height:calc(100vh - 76px)!important;max-height:calc(100vh - 76px)!important}}
@media(max-width:860px){#view-inventory.active{height:auto!important;max-height:none!important;overflow:visible!important}}
@media(max-width:0px){#heroCoinModel{animation:none!important}}

/* v0.14.29 — true short-cylinder coin side wall */
.coin-edge-stack{
  position:absolute!important;
  inset:0!important;
  transform-style:preserve-3d!important;
  pointer-events:none!important;
  z-index:1!important
}
.coin-side-segment{
  position:absolute;
  left:var(--x);
  top:50%;
  width:max(2px,calc(var(--t) * .36));
  height:100%;
  transform-origin:50% 50%;
  transform:
    translate(-50%,-50%)
    translateZ(calc(var(--z) * .01))
    rotateY(var(--a));
  transform-style:preserve-3d;
  overflow:hidden;
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
  pointer-events:none
}
.coin-side-segment>img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
  filter:brightness(.78) saturate(.9)
}
/* Give the side wall actual short-cylinder depth in 3D. */
#heroCoinModel .coin-side-segment,
#matchCoin .coin-side-segment,
.inspect-coin-model .coin-side-segment{
  transform:
    translate(-50%,-50%)
    rotateY(var(--a))
    translateZ(calc(var(--t) * .5))
}
#heroCoinModel .inspect-front,#heroCoinModel .inspect-back,
#matchCoin .inspect-front,#matchCoin .inspect-back,
.inspect-coin-model .inspect-front,.inspect-coin-model .inspect-back{
  z-index:2!important
}

/* v0.14.30 — repair the coin rim after the experimental segmented-wall renderer.
   The previous 48 vertical panels were visible as rectangular "shreds". Use a compact
   stack of circular rim-only slices instead: visually a short extruded cylinder. */
.coin-side-segment{display:none!important}

.coin-edge-stack{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform-style:preserve-3d!important;
  pointer-events:none!important;
  z-index:1!important
}
.coin-edge-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  border-radius:50%!important;
  pointer-events:none!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;

  /* Only the outer rim participates in the extrusion. */
  -webkit-mask-image:radial-gradient(circle at center,transparent 0 78%,#000 81% 100%)!important;
  mask-image:radial-gradient(circle at center,transparent 0 78%,#000 81% 100%)!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;

  /* Slightly darken the rim so it reads as metal thickness instead of another face. */
  filter:brightness(.78) saturate(.9)!important
}

/* Faces sit just outside the rim stack, producing front + short side wall + back. */
#heroCoinModel .inspect-front,
#matchCoin .inspect-front,
.inspect-coin-model .inspect-front{
  transform:translateZ(var(--coin-half-depth,7px))!important;
  z-index:2!important
}
#heroCoinModel .inspect-back,
.inspect-coin-model .inspect-back{
  transform:translateZ(var(--coin-half-depth-neg,-7px)) rotateY(180deg)!important;
  z-index:2!important
}
#matchCoin .inspect-back{
  transform:translateZ(var(--coin-half-depth-neg,-7px)) rotateX(180deg)!important;
  z-index:2!important
}

/* v0.14.32 — restore visible coin thickness.
   The inspector originally looked correct because it used many full circular depth slices.
   Re-enable that method, but keep every slice BETWEEN the front/back artwork planes. */
.coin-edge-stack{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  transform-style:preserve-3d!important;
  pointer-events:none!important;
  z-index:1!important
}
.coin-edge-layer{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  border-radius:50%!important;
  pointer-events:none!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:none!important
}

/* Faces sit just beyond the outermost depth slice. The transform order here matches the
   older inspector implementation that visibly showed a proper short-cylinder edge. */
.inspect-coin-model .inspect-front,
#heroCoinModel .inspect-front,
#matchCoin .inspect-front{
  transform:translateZ(calc(var(--coin-half-depth,7px) + .5px))!important;
  z-index:3!important
}
.inspect-coin-model .inspect-back,
#heroCoinModel .inspect-back{
  transform:rotateY(180deg) translateZ(calc(var(--coin-half-depth,7px) + .5px))!important;
  z-index:3!important
}
#matchCoin .inspect-back{
  transform:rotateX(180deg) translateZ(calc(var(--coin-half-depth,7px) + .5px))!important;
  z-index:3!important
}

/* Keep the coin as a short cylinder: model thickness is ~14px on most coins, 16px on
   Versus Token, against ~170–240px diameter depending on context. */
.runtime-coin-model,
.inspect-coin-model{
  transform-style:preserve-3d!important
}

/* v0.14.33 — runtime thickness specificity fix.
   Home + Match use .runtime-coin-model, whose old selector was more specific than the
   generic v0.14.32 thickness rule. Override that exact selector so runtime models use
   the same visible full depth stack as Inspect/Admin. */
.runtime-coin-model .coin-edge-stack{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  transform-style:preserve-3d!important;
  pointer-events:none!important;
  z-index:1!important;
  overflow:visible!important
}
.runtime-coin-model .coin-edge-layer{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  border-radius:50%!important;
  pointer-events:none!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:none!important;
  opacity:1!important
}

/* Keep runtime face planes just beyond the thickness stack. */
#heroCoinModel.runtime-coin-model .inspect-front{
  transform:translateZ(calc(var(--coin-half-depth,7px) + .5px))!important
}
#heroCoinModel.runtime-coin-model .inspect-back{
  transform:rotateY(180deg) translateZ(calc(var(--coin-half-depth,7px) + .5px))!important
}
#matchCoin.runtime-coin-model .inspect-front{
  transform:translateZ(calc(var(--coin-half-depth,7px) + .5px))!important
}
#matchCoin.runtime-coin-model .inspect-back{
  transform:rotateX(180deg) translateZ(calc(var(--coin-half-depth,7px) + .5px))!important
}

/* Perspective needs to be on the shell/scene, not flattened by an ancestor. */
#heroCoinShell,#matchCoinShell{
  transform-style:preserve-3d!important;
  overflow:visible!important
}
#heroCoinShell{perspective:1000px!important}
#matchCoinShell{perspective:950px!important}

/* v0.15.64 — Versus Token normalized to the standard coin model.
   Its special aura remains, but the artwork/model itself is no longer filter-animated. */
[data-coin-id="versus"]{
  animation:none!important;
  filter:none!important
}
.coin-shell[data-coin-id="versus"]:before,
.collection-type [data-coin-id="versus"]::before{
  animation:versusAuraPulse 1.9s ease-in-out infinite alternate!important
}
.versus-token-asset{
  animation:none!important;
  filter:none!important
}
@keyframes versusAuraPulse{
  from{opacity:.48;transform:scale(.92)}
  to{opacity:.86;transform:scale(1.08)}
}

/* v0.15.64 — queue Versus Token uses an explicit flat Heads/Tails flip.
   It is intentionally simpler than the full 3D gameplay model. */
.queue-vs-coin{
  position:relative!important;
  width:70px!important;
  height:70px!important;
  transform-style:preserve-3d!important;
}
.queue-vs-face{
  position:absolute!important;
  inset:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transform-style:preserve-3d!important;
}
.queue-vs-front{transform:rotateY(0deg)!important}
.queue-vs-back{transform:rotateY(180deg)!important}
.queue-vs-face img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  border-radius:50%!important;
  transform:none!important;
  opacity:1!important
}
/* Preserve special aura behind the flat queue token. */
.queue-vs-aura{z-index:0!important}
.queue-vs-coin{z-index:2!important}

/* Coin cosmetic FX roster:
   Legendary: animated warm-gold/orange glow.
   Mythic: animated purple/cyan glow.
   Relic: animated bright gold/white glow.
   Solar Sovereign: Mythic glow + animated solar/flame background aura.
   Versus Token: Epic coin + animated cyan/violet background aura.
   Common/Rare/Epic (other than Versus): no special animated aura by default. */

/* v0.15.64 — authoritative Market Browse scroll fix. */
#view-market{overflow:visible!important;min-height:0!important;padding-bottom:28px!important}
#marketBrowsePanel{display:block;min-height:0!important;overflow:visible!important;padding-bottom:18px!important}
#marketBrowsePanel.hidden{display:none!important}
#marketBrowsePanel #marketListings{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  height:clamp(300px,calc(100vh - 385px),650px)!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  align-content:start!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
  padding:0 10px 56px 0!important;
  scroll-padding-bottom:56px!important
}
#marketBrowsePanel #marketListings>.market-listing{min-width:0!important;width:auto!important;margin:0!important}
#marketBrowsePanel #marketListings:after{content:"";display:block;height:36px;grid-column:1/-1}
@media(max-width:1000px){#marketBrowsePanel #marketListings{grid-template-columns:1fr!important}}
@media(max-height:760px){
  #marketBrowsePanel #marketListings{height:calc(100vh - 335px)!important;min-height:260px!important}
}

/* v0.15.64 — server restart/update notice */
.server-restart-modal{z-index:220!important}
.server-restart-panel{
  width:min(520px,calc(100vw - 36px))!important;text-align:center;padding:34px 36px!important;
  border-color:rgba(103,203,255,.32)!important;
  background:radial-gradient(circle at 50% 0%,rgba(78,185,255,.16),transparent 42%),linear-gradient(150deg,#101a29,#080d15)!important;
  box-shadow:0 36px 120px #000d,0 0 70px rgba(66,183,255,.12)!important
}
.server-restart-icon{
  width:72px;height:72px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  font-size:42px;font-weight:900;color:#9ee5ff;border:1px solid rgba(126,224,255,.34);
  background:rgba(34,113,158,.12);box-shadow:0 0 32px rgba(69,201,255,.16)
}
.server-restart-panel h2{font-size:30px;margin:7px 0 10px}
.server-restart-panel .section-copy{margin:0 auto 22px;max-width:410px}

/* v0.15.64 — app-level scrolling and true page backgrounds */
html,body{
  width:100%;height:100%;min-height:100%;
  overflow:hidden!important;
  background:#05070b!important
}
body{
  --page-a:#17213a;--page-b:#090d15;--page-c:#05070b;
  --special-a:#4e9cff;--special-b:#7b5cff;--special-c:#4de0ff;
  background:radial-gradient(circle at 78% 0,var(--page-a) 0,var(--page-b) 35%,var(--page-c) 80%)!important;
  transition:background .35s ease;
  position:relative
}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0}
body[data-active-view="casino"]{--page-a:#410716;--page-b:#1a0715;--page-c:#09050c;--special-a:#ff315f;--special-b:#8536ff;--special-c:#ffd84a}
body[data-active-view="gacha"]{--page-a:#063e57;--page-b:#160b39;--page-c:#050914;--special-a:#25e5ff;--special-b:#a54dff;--special-c:#ff4fa9}
body[data-active-view="shop"]{--page-a:#4c2b08;--page-b:#211108;--page-c:#090604;--special-a:#ffc84b;--special-b:#ff6b39;--special-c:#fff08a}
body[data-active-view="market"]{--page-a:#064431;--page-b:#07233a;--page-c:#040a0a;--special-a:#29ffc5;--special-b:#19aaff;--special-c:#ffd94d}
body[data-active-view="casino"]::before,body[data-active-view="gacha"]::before,
body[data-active-view="shop"]::before,body[data-active-view="market"]::before{
  opacity:.64;
  background:
    radial-gradient(circle at 15% 20%,color-mix(in srgb,var(--special-a) 48%,transparent),transparent 30%),
    radial-gradient(circle at 82% 16%,color-mix(in srgb,var(--special-b) 45%,transparent),transparent 31%),
    radial-gradient(circle at 66% 84%,color-mix(in srgb,var(--special-c) 38%,transparent),transparent 30%);
  animation:pageAmbientDrift 10s ease-in-out infinite alternate
}
body[data-active-view="casino"]::after,body[data-active-view="gacha"]::after,
body[data-active-view="shop"]::after,body[data-active-view="market"]::after{
  opacity:.25;
  background:conic-gradient(from 0deg at 54% 46%,transparent 0 19%,color-mix(in srgb,var(--special-a) 22%,transparent) 24%,transparent 33% 55%,color-mix(in srgb,var(--special-b) 20%,transparent) 63%,transparent 74%);
  animation:pageAmbientSpin 27s linear infinite
}
@keyframes pageAmbientDrift{from{transform:translate3d(-2%,-1%,0) scale(1.03)}to{transform:translate3d(2%,2%,0) scale(1.09)}}
@keyframes pageAmbientSpin{to{transform:rotate(360deg)}}

/* One flush scrolling surface for the whole content area. Wheel scrolling works over gaps,
   cards, headings, and grid margins instead of only when hovering an inner "window". */
.app-shell{
  position:relative;z-index:1;
  height:var(--virtual-height,100vh)!important;
  min-height:var(--virtual-height,100vh)!important;
  overflow:hidden!important
}
.sidebar{
  position:relative!important;top:auto!important;
  height:100%!important;min-height:100%!important;
  align-self:stretch!important;z-index:100!important
}
.main{
  position:relative!important;z-index:2!important;
  height:100%!important;min-height:0!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  overscroll-behavior:contain;
  max-width:none!important;margin:0!important;
  padding-bottom:72px!important;
  scrollbar-gutter:stable
}
.view,.view.active{
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important
}
#view-inventory.active,#view-stats.active{
  height:auto!important;max-height:none!important;overflow:visible!important;
  padding-bottom:36px!important
}

/* HUD is a separate opaque-ish layer above every page background/content. */
.topbar{
  position:sticky!important;top:0!important;z-index:90!important;
  background:linear-gradient(180deg,rgba(7,11,18,.985),rgba(7,11,18,.94))!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.30)!important;
  backdrop-filter:blur(16px) saturate(1.2);
  margin:0 -10px 14px!important;padding:0 10px!important
}

/* Special sections are content only; the actual page background now belongs to the app. */
#view-shop,#view-casino,#view-gacha,#view-market{
  background:transparent!important;border-radius:0!important;isolation:auto!important
}
#view-shop::before,#view-shop::after,#view-casino::before,#view-casino::after,
#view-gacha::before,#view-gacha::after,#view-market::before,#view-market::after{
  display:none!important
}

/* Profile theme decoration cannot tint/cover the HUD. */
#view-stats{z-index:1!important}
#view-stats::before,#view-stats::after{z-index:-1!important}

/* Keep only the droplet selector; use it as a NEW-theme inbox indicator. */
.theme-acquisition-card,.theme-drop-banner{display:none!important}
.profile-icon-btn.droplet{position:relative!important;overflow:visible!important}
.profile-icon-btn.droplet.has-new-theme{
  border-color:#ffd95a!important;
  box-shadow:0 0 0 1px rgba(255,217,90,.30),0 0 18px rgba(255,197,55,.40)!important
}
.profile-icon-btn.droplet.has-new-theme::after{
  content:"NEW";position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);
  padding:3px 5px;border-radius:4px;background:#ffd95a;color:#211708;
  font-size:7px;font-weight:1000;letter-spacing:.08em;box-shadow:0 0 12px rgba(255,204,64,.36)
}

/* Theme drops are now loot-table entries rather than independent capsule bonuses. */
.theme-loot-row{
  border-color:rgba(200,130,255,.30)!important;
  background:linear-gradient(90deg,rgba(153,75,255,.12),rgba(58,209,255,.07))!important
}
.theme-loot-row span{color:#dfc0ff!important}
.capsule-loot-note{display:block;color:var(--muted);font-size:8px;line-height:1.4;margin:-3px 0 10px}
.theme-cinema-drop{
  width:118px;height:118px;border-radius:50%;display:grid;place-items:center;font-size:54px;
  color:var(--ta,#a7f4ff);
  background:radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--ta) 44%,white),var(--tbg,#0a2030) 52%,#050912 78%);
  border:3px solid var(--ta,#a7f4ff);
  box-shadow:0 0 28px color-mix(in srgb,var(--ta) 52%,transparent),0 0 52px color-mix(in srgb,var(--tb) 35%,transparent)
}

@media(max-width:860px){
  html,body{height:auto;min-height:100%;overflow-y:auto!important}
  .app-shell{height:auto!important;min-height:100vh!important;overflow:visible!important}
  .sidebar{min-height:100vh!important}
  .main{height:auto!important;overflow:visible!important}
}
@media(max-width:0px){body::before,body::after{animation:none!important}}

/* v0.15.64 — scroll ownership + alignment cleanup */

/* Top HUD spans the full main-content width with no inset gaps. */
.topbar{
  margin-left:-34px!important;
  margin-right:-34px!important;
  padding-left:34px!important;
  padding-right:34px!important;
  width:calc(100% + 68px)!important;
  border-radius:0!important
}

/* Market: the page shell itself stays fixed. Only the intended tab list windows scroll. */
body[data-active-view="market"] .main{
  overflow:hidden!important;
}
body[data-active-view="market"] #view-market.active{
  height:calc(100% - 106px)!important;
  max-height:calc(100% - 106px)!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
}
body[data-active-view="market"] #view-market>.market-hero,
body[data-active-view="market"] #view-market>.market-tabs,
body[data-active-view="market"] #view-market>.market-panel{
  flex:0 0 auto
}
body[data-active-view="market"] #marketBrowsePanel,
body[data-active-view="market"] #marketPinnedPanel,
body[data-active-view="market"] #marketActivityPanel{
  min-height:0!important;
  overflow:hidden!important
}

/* Browse listing window is the only scroll area on Browse. */
body[data-active-view="market"] #marketBrowsePanel #marketListings{
  flex:1 1 auto!important;
  min-height:220px!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-content:start!important;
  gap:10px!important;
  padding:0 12px 44px 0!important;
  scrollbar-gutter:stable!important
}

/* Force consistent card geometry/alignment. */
body[data-active-view="market"] #marketBrowsePanel #marketListings>.market-listing{
  display:grid!important;
  grid-template-columns:86px minmax(0,1fr) auto!important;
  align-items:center!important;
  min-height:110px!important;
  width:100%!important;
  min-width:0!important;
  gap:14px!important;
  padding:16px 18px!important;
  margin:0!important
}
body[data-active-view="market"] .market-listing .listing-coin,
body[data-active-view="market"] .market-listing .market-listing-coin{
  justify-self:center!important
}
body[data-active-view="market"] .market-listing .listing-main,
body[data-active-view="market"] .market-listing .market-listing-info{
  min-width:0!important
}
body[data-active-view="market"] .market-listing .listing-buy,
body[data-active-view="market"] .market-listing .market-listing-actions{
  justify-self:end!important;
  text-align:right!important;
  min-width:122px!important
}

/* Pinned + Activity get their own internal list scroll only. */
body[data-active-view="market"] #marketPinnedPanel #marketPinnedCoins,
body[data-active-view="market"] #marketActivityPanel #marketTrades{
  max-height:none!important;
  height:calc(100vh - 360px)!important;
  min-height:220px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:10px!important;
  padding-bottom:36px!important;
  scrollbar-gutter:stable!important
}

/* Sell and Graph remain non-page-scroll panels. */
body[data-active-view="market"] #marketSellPanel,
body[data-active-view="market"] #marketGraphPanel{
  overflow:auto!important;
  max-height:calc(100vh - 350px)!important
}

/* Profile background animation must not change layout dimensions. */
#view-stats::before,#view-stats::after{
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  transform-origin:center!important;
  contain:paint!important
}
#view-stats{
  position:relative!important;
  overflow:visible!important
}

/* Home gets enough trailing space so Contracts can always be fully reached. */
body[data-active-view="home"] #view-home.active{
  padding-bottom:120px!important
}
body[data-active-view="home"] .main{
  padding-bottom:120px!important
}

/* Fixed/auto-resolution sidebar always reaches the visual bottom. */
.sidebar{
  height:var(--virtual-height,100vh)!important;
  min-height:var(--virtual-height,100vh)!important
}

@media(max-width:1000px){
  body[data-active-view="market"] #marketBrowsePanel #marketListings{
    grid-template-columns:1fr!important
  }
}

/* v0.15.64 — corrective scroll/layout patch.
   This deliberately overrides the v0.15.1/0.15.24 rules that assigned scroll ownership
   incorrectly instead of adding another nested page scroller. */

/* HOME
   Use a real trailing layout spacer inside the Home view. This contributes to scrollHeight,
   unlike relying only on padding on a fixed-height .main element. */
body[data-active-view="home"] .main{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-bottom:0!important
}
#view-home.active{
  overflow:visible!important;
  padding-bottom:0!important
}
#view-home.active::after{
  content:"";
  display:block;
  width:100%;
  height:180px;
  flex:0 0 180px;
  pointer-events:none
}

/* PROFILE
   The old pseudo-elements were oversized and animated with transform: scale/rotate.
   Transformed overflow can change a scroll container's overflow bounds even though the
   layer is absolutely positioned. Keep the ambience animated, but animate only
   background-position/opacity inside the exact page bounds. */
#view-stats{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important
}
#view-stats::before,
#view-stats::after{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  transform:none!important;
  transform-origin:center!important;
  contain:paint!important;
  pointer-events:none!important
}
#view-stats::before{
  background-size:125% 125%,130% 130%,135% 135%,100% 100%!important;
  animation:profileBackdropDriftStable 8s ease-in-out infinite alternate!important
}
#view-stats::after{
  background-size:145% 145%!important;
  animation:profileBackdropOrbitStable 12s ease-in-out infinite alternate!important
}
@keyframes profileBackdropDriftStable{
  0%{background-position:0% 0%,100% 0%,50% 100%,0 0;opacity:.54}
  100%{background-position:8% 5%,92% 7%,55% 92%,0 0;opacity:.64}
}
@keyframes profileBackdropOrbitStable{
  0%{background-position:0% 50%;opacity:.22}
  100%{background-position:100% 50%;opacity:.34}
}

/* MARKET
   Keep Coin Exchange/header/tabs/filters/ticker stationary. The selected data list owns
   the available remaining height. The key fix is making the active market panel flexible;
   v0.15.1 accidentally forced every .market-panel to flex:0, leaving Browse with no
   computed height to scroll inside. */
body[data-active-view="market"] .main{
  overflow:hidden!important
}
body[data-active-view="market"] #view-market.active{
  display:flex!important;
  flex-direction:column!important;
  height:calc(100% - 106px)!important;
  max-height:calc(100% - 106px)!important;
  min-height:0!important;
  overflow:hidden!important
}
body[data-active-view="market"] #view-market>.market-hero,
body[data-active-view="market"] #view-market>.market-tabs{
  flex:0 0 auto!important
}
body[data-active-view="market"] #view-market>.market-panel:not(.hidden){
  flex:1 1 auto!important;
  min-height:0!important
}
body[data-active-view="market"] #marketBrowsePanel:not(.hidden){
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important
}
body[data-active-view="market"] #marketBrowsePanel .market-toolbar,
body[data-active-view="market"] #marketBrowsePanel .market-ticker{
  flex:0 0 auto!important
}
body[data-active-view="market"] #marketBrowsePanel #marketListings{
  flex:1 1 0!important;
  min-height:180px!important;
  height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
  scroll-padding-bottom:48px!important;
  padding:0 10px 48px 0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  align-content:start!important
}

/* Match the actual markup produced by renderMarket(). */
body[data-active-view="market"] #marketListings>.market-listing{
  display:grid!important;
  grid-template-columns:82px minmax(0,1fr) 150px!important;
  align-items:center!important;
  column-gap:16px!important;
  min-height:110px!important;
  width:100%!important;
  min-width:0!important;
  padding:15px 18px!important;
  margin:0!important
}
body[data-active-view="market"] #marketListings>.market-listing .market-coin-visual{
  justify-self:center!important;
  align-self:center!important;
  margin:0!important
}
body[data-active-view="market"] #marketListings>.market-listing .market-listing-copy{
  min-width:0!important;
  align-self:center!important
}
body[data-active-view="market"] #marketListings>.market-listing .market-listing-price{
  justify-self:stretch!important;
  align-self:center!important;
  min-width:0!important;
  width:150px!important;
  display:grid!important;
  justify-items:end!important;
  align-content:center!important
}
body[data-active-view="market"] #marketListings>.market-listing .market-listing-price button{
  max-width:100%!important
}

/* Pinned and Activity use the same remaining-height model instead of viewport guesses. */
body[data-active-view="market"] #marketPinnedPanel:not(.hidden),
body[data-active-view="market"] #marketActivityPanel:not(.hidden){
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important
}
body[data-active-view="market"] #marketPinnedPanel #marketPinnedCoins,
body[data-active-view="market"] #marketActivityPanel #marketTrades{
  flex:1 1 0!important;
  height:0!important;
  min-height:180px!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 10px 42px 0!important;
  scrollbar-gutter:stable!important
}

@media(max-width:1000px){
  body[data-active-view="market"] #marketBrowsePanel #marketListings{
    grid-template-columns:1fr!important
  }
  body[data-active-view="market"] #marketListings>.market-listing{
    grid-template-columns:76px minmax(0,1fr) 138px!important
  }
  body[data-active-view="market"] #marketListings>.market-listing .market-listing-price{
    width:138px!important
  }
}
@media(max-width:0px){
  #view-stats::before,#view-stats::after{animation:none!important}
}

/* v0.15.64 — Market list-window sizing and alignment. */

/* The Market page remains fixed; active data panels consume the full remainder beneath tabs. */
body[data-active-view="market"] #view-market.active{padding-bottom:12px!important}
body[data-active-view="market"] #marketBrowsePanel:not(.hidden),
body[data-active-view="market"] #marketPinnedPanel:not(.hidden),
body[data-active-view="market"] #marketActivityPanel:not(.hidden){
  flex:1 1 0!important;
  min-height:0!important;
  height:0!important;
  overflow:hidden!important
}

/* Shared visual shell for all three scrolling Market lists. */
body[data-active-view="market"] .market-scroll-window{
  min-height:0!important;
  overflow:hidden!important;
  border-radius:12px!important;
  border:1px solid rgba(53,210,174,.42)!important;
  background:linear-gradient(145deg,rgba(4,13,22,.91),rgba(5,10,19,.87))!important;
  box-shadow:inset 0 0 34px rgba(43,205,187,.025)!important
}

/* Browse: toolbar/ticker stay fixed; the dedicated listing window fills the rest. */
body[data-active-view="market"] #marketBrowsePanel:not(.hidden){
  display:flex!important;
  flex-direction:column!important
}
body[data-active-view="market"] #marketBrowsePanel .market-toolbar,
body[data-active-view="market"] #marketBrowsePanel .market-ticker{flex:0 0 auto!important}
body[data-active-view="market"] #marketBrowsePanel .market-browse-window{
  flex:1 1 0!important;
  height:0!important;
  min-height:230px!important;
  margin:0!important;
  padding:10px 10px 8px 12px!important;
  display:flex!important;
  flex-direction:column!important
}
body[data-active-view="market"] #marketBrowsePanel #marketListings{
  flex:1 1 0!important;
  height:0!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-content:start!important;
  gap:10px!important;
  padding:0 8px 38px 0!important;
  scrollbar-gutter:stable!important;
  overscroll-behavior:contain!important
}

/* Pinned + Activity: outer card fills nearly all the remaining height. */
body[data-active-view="market"] #marketPinnedPanel:not(.hidden),
body[data-active-view="market"] #marketActivityPanel:not(.hidden){
  display:flex!important;
  flex-direction:column!important;
  padding-bottom:4px!important
}
body[data-active-view="market"] #marketPinnedPanel .market-pinned-window,
body[data-active-view="market"] #marketActivityPanel .market-activity-window{
  flex:1 1 0!important;
  height:0!important;
  min-height:260px!important;
  margin:0!important;
  padding:20px 22px 10px!important;
  display:flex!important;
  flex-direction:column!important
}
body[data-active-view="market"] #marketPinnedPanel .section-title,
body[data-active-view="market"] #marketPinnedPanel .section-copy,
body[data-active-view="market"] #marketActivityPanel .section-title,
body[data-active-view="market"] #marketActivityPanel .market-activity-note{flex:0 0 auto!important}
body[data-active-view="market"] #marketPinnedCoins,
body[data-active-view="market"] #marketTrades{
  flex:1 1 0!important;
  height:0!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 8px 34px 0!important;
  scrollbar-gutter:stable!important;
  align-content:start!important
}

/* Browse and Pinned use identical, explicit card columns based on real renderMarket() markup. */
body[data-active-view="market"] #marketListings>.market-listing,
body[data-active-view="market"] #marketPinnedCoins>.market-listing{
  display:grid!important;
  grid-template-columns:84px minmax(0,1fr) 168px!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  gap:16px!important;
  min-height:112px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:14px 18px!important;
  overflow:visible!important
}
body[data-active-view="market"] #marketListings>.market-listing .market-coin-visual,
body[data-active-view="market"] #marketPinnedCoins>.market-listing .market-coin-visual{
  grid-column:1!important;
  justify-self:center!important;
  align-self:center!important;
  width:74px!important;
  height:74px!important;
  margin:0!important
}
body[data-active-view="market"] #marketListings>.market-listing .market-listing-copy,
body[data-active-view="market"] #marketPinnedCoins>.market-listing .market-listing-copy{
  grid-column:2!important;
  min-width:0!important;
  align-self:center!important;
  text-align:left!important
}
body[data-active-view="market"] #marketListings>.market-listing .market-listing-price,
body[data-active-view="market"] #marketPinnedCoins>.market-listing .market-listing-price{
  grid-column:3!important;
  width:168px!important;
  min-width:168px!important;
  justify-self:end!important;
  align-self:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:center!important;
  text-align:right!important;
  gap:3px!important
}
body[data-active-view="market"] #marketListings>.market-listing .market-listing-price button,
body[data-active-view="market"] #marketPinnedCoins>.market-listing .market-listing-price button{margin-top:4px!important}
body[data-active-view="market"] #marketPinnedCoins>.market-listing .market-listing-price .secondary{min-width:116px!important}
body[data-active-view="market"] #marketPinnedCoins>.market-listing .market-pin-btn{
  position:static!important;
  align-self:flex-end!important
}

/* Activity uses the taller window cleanly. */
body[data-active-view="market"] #marketTrades{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important
}
body[data-active-view="market"] #marketTrades>.market-row{
  width:100%!important;
  min-width:0!important;
  margin:0!important
}

html[data-viewport-height="tiny"] body[data-active-view="market"] .market-browse-window,
html[data-viewport-height="tiny"] body[data-active-view="market"] .market-pinned-window,
html[data-viewport-height="tiny"] body[data-active-view="market"] .market-activity-window{
  min-height:210px!important
}

@media(max-width:1050px){
  body[data-active-view="market"] #marketBrowsePanel #marketListings,
  body[data-active-view="market"] #marketPinnedCoins{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  body[data-active-view="market"] #marketListings>.market-listing,
  body[data-active-view="market"] #marketPinnedCoins>.market-listing{
    grid-template-columns:70px minmax(0,1fr) 138px!important;
    gap:10px!important;
    padding:12px!important
  }
  body[data-active-view="market"] #marketListings>.market-listing .market-listing-price,
  body[data-active-view="market"] #marketPinnedCoins>.market-listing .market-listing-price{
    width:138px!important;
    min-width:138px!important
  }
}

/* v0.15.64 — Market coin-row rebuild.
   The prior three alignment attempts kept all buttons inside .market-listing-price.
   That column became taller than the card and caused the exact clipping/overlap visible
   in Browse and Pinned. v0.15.64 separates price data from controls in the markup. */

/* Use more of the actual available Market height. */
body[data-active-view="market"] #view-market.active{
  height:calc(100% - 76px)!important;
  max-height:calc(100% - 76px)!important;
  padding-bottom:6px!important
}
body[data-active-view="market"] #marketBrowsePanel .market-browse-window,
body[data-active-view="market"] #marketPinnedPanel .market-pinned-window,
body[data-active-view="market"] #marketActivityPanel .market-activity-window{
  margin-bottom:4px!important
}

/* Browse window reaches the same bottom line as Pinned/Activity. */
body[data-active-view="market"] #marketBrowsePanel .market-browse-window{
  min-height:260px!important
}

/* Canonical row geometry: coin | identity | price, with a dedicated controls strip.
   Controls occupy the right side of the second row and never change the content row height. */
body[data-active-view="market"] #marketListings>.market-coin-row,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:82px minmax(0,1fr) 132px!important;
  grid-template-rows:minmax(62px,1fr) 36px!important;
  column-gap:14px!important;
  row-gap:4px!important;
  align-items:center!important;
  min-height:126px!important;
  height:126px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:10px 14px!important;
  overflow:hidden!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-coin-visual,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-coin-visual{
  grid-column:1!important;
  grid-row:1 / 3!important;
  justify-self:center!important;
  align-self:center!important;
  width:70px!important;
  height:70px!important;
  margin:0!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-coin-visual img,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-coin-visual img{
  width:66px!important;
  height:66px!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-copy,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-copy{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
  align-self:end!important;
  padding-bottom:2px!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-copy small,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-copy small{
  line-height:1.1!important;
  margin:0!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-copy strong,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-copy strong{
  line-height:1.15!important;
  margin:4px 0 3px!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-copy span,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-copy span{
  line-height:1.1!important;
  margin:0!important
}

body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-price,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-price{
  grid-column:3!important;
  grid-row:1!important;
  width:auto!important;
  min-width:0!important;
  align-self:end!important;
  justify-self:stretch!important;
  display:block!important;
  text-align:right!important;
  padding-bottom:2px!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-price strong,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-price strong{
  display:block!important;
  line-height:1.1!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-price small,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-price small{
  display:block!important;
  margin-top:4px!important;
  margin-bottom:0!important;
  line-height:1.1!important
}

/* New dedicated controls strip. */
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-controls,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-controls{
  grid-column:2 / 4!important;
  grid-row:2!important;
  min-width:0!important;
  height:36px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  align-self:center!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-pin-btn,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-pin-btn{
  position:static!important;
  flex:0 0 32px!important;
  width:32px!important;
  height:32px!important;
  padding:0!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  align-self:center!important;
  line-height:1!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-row-action,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-row-action{
  flex:0 0 auto!important;
  min-width:104px!important;
  height:34px!important;
  margin:0!important;
  padding:0 14px!important;
  white-space:nowrap!important
}

/* Pinned rows use the same exact geometry; VIEW GRAPH is no longer allowed to overlap
   the price, coin, or next card. */
body[data-active-view="market"] #marketPinnedCoins>.market-pinned-row .market-row-action{
  min-width:122px!important
}

/* Keep two-column cards aligned row-for-row. */
body[data-active-view="market"] #marketListings,
body[data-active-view="market"] #marketPinnedCoins{
  grid-auto-rows:126px!important;
  align-items:stretch!important
}
body[data-active-view="market"] #marketListings>.market-coin-row,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row{
  align-self:stretch!important
}

@media(max-width:1050px){
  body[data-active-view="market"] #marketListings,
  body[data-active-view="market"] #marketPinnedCoins{
    grid-template-columns:1fr!important
  }
}
@media(max-width:720px){
  body[data-active-view="market"] #marketListings>.market-coin-row,
  body[data-active-view="market"] #marketPinnedCoins>.market-coin-row{
    grid-template-columns:68px minmax(0,1fr) 112px!important;
    grid-template-rows:minmax(58px,1fr) 34px!important;
    height:120px!important;
    min-height:120px!important;
    padding:9px 10px!important
  }
  body[data-active-view="market"] #marketListings,
  body[data-active-view="market"] #marketPinnedCoins{grid-auto-rows:120px!important}
  body[data-active-view="market"] #marketListings>.market-coin-row .market-row-action,
  body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-row-action{
    min-width:92px!important
  }
}

/* v0.15.64 — horizontal Market actions.
   Browse and Pinned now both use:
   [coin] [identity] [price/ref] [pin] [primary action],
   with the action button flush to the far-right edge. */
body[data-active-view="market"] #marketListings>.market-coin-row,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row{
  grid-template-columns:82px minmax(0,1fr) auto!important;
  grid-template-rows:1fr!important;
  height:112px!important;
  min-height:112px!important;
  padding:12px 14px!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-coin-visual,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-coin-visual{
  grid-column:1!important;
  grid-row:1!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-copy,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-copy{
  grid-column:2!important;
  grid-row:1!important;
  align-self:center!important;
  padding:0!important
}

/* Right-side horizontal action cluster. */
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-actions,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-actions{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:center!important;
  display:grid!important;
  grid-template-columns:auto 34px auto!important;
  align-items:center!important;
  column-gap:10px!important;
  min-width:0!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-price,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-price{
  width:auto!important;
  min-width:88px!important;
  display:block!important;
  text-align:right!important;
  padding:0!important;
  margin:0!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-price strong,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-price strong{
  display:block!important;
  margin:0!important;
  line-height:1.1!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-price small,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-price small{
  display:block!important;
  margin:5px 0 0!important;
  line-height:1.1!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-pin-btn,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-pin-btn{
  position:static!important;
  width:34px!important;
  height:34px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  align-self:center!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-row-action,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-row-action{
  height:38px!important;
  min-width:104px!important;
  margin:0!important;
  padding:0 16px!important;
  white-space:nowrap!important;
  justify-self:end!important
}
body[data-active-view="market"] #marketPinnedCoins>.market-pinned-row .market-row-action{
  min-width:126px!important
}

/* Equal row heights in both two-column lists. */
body[data-active-view="market"] #marketListings,
body[data-active-view="market"] #marketPinnedCoins{
  grid-auto-rows:112px!important
}

/* Disable the v0.15.64 second-row controls layout now that controls are inline. */
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-controls,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-controls{
  display:none!important
}

@media(max-width:900px){
  body[data-active-view="market"] #marketListings>.market-coin-row,
  body[data-active-view="market"] #marketPinnedCoins>.market-coin-row{
    grid-template-columns:70px minmax(0,1fr) auto!important;
    height:108px!important;
    min-height:108px!important
  }
  body[data-active-view="market"] #marketListings,
  body[data-active-view="market"] #marketPinnedCoins{grid-auto-rows:108px!important}
  body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-actions,
  body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-actions{
    column-gap:7px!important
  }
}

/* v0.15.64 — final Browse/Pinned action order + tighter list window. */

/* Make right-side order explicit and impossible for legacy rules to invert:
   PRICE / REF  |  STAR  |  BUY (far right) */
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-actions,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-actions{
  display:grid!important;
  grid-template-columns:max-content 34px max-content!important;
  grid-template-areas:"price pin primary"!important;
  align-items:center!important;
  justify-content:end!important;
  column-gap:10px!important;
  width:auto!important;
  min-width:0!important
}
body[data-active-view="market"] .market-listing-actions .market-action-price{
  grid-area:price!important;
  justify-self:end!important
}
body[data-active-view="market"] .market-listing-actions .market-action-pin{
  grid-area:pin!important;
  justify-self:center!important;
  display:grid!important;
  place-items:center!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  visibility:visible!important;
  opacity:1!important;
  color:#7f91a9!important
}
body[data-active-view="market"] .market-listing-actions .market-action-pin.pinned{
  color:#ffd65a!important;
  text-shadow:0 0 10px #ffca3b88!important
}
body[data-active-view="market"] .market-listing-actions .market-action-primary{
  grid-area:primary!important;
  justify-self:end!important
}

/* Reduce the overly tall Browse list window.
   It still aligns visually with Pinned/Activity, but no longer leaves a large empty lower field. */
body[data-active-view="market"] #marketBrowsePanel .market-browse-window{
  flex:0 1 auto!important;
  height:clamp(300px,calc(100vh - 420px),500px)!important;
  min-height:300px!important;
  max-height:500px!important
}
body[data-active-view="market"] #marketBrowsePanel #marketListings{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important
}

/* Keep Pinned/Activity slightly taller than Browse as intended. */
body[data-active-view="market"] #marketPinnedPanel .market-pinned-window,
body[data-active-view="market"] #marketActivityPanel .market-activity-window{
  min-height:320px!important
}

@media(max-height:780px){
  body[data-active-view="market"] #marketBrowsePanel .market-browse-window{
    height:calc(100vh - 365px)!important;
    min-height:250px!important
  }
}

/* v0.15.64 — restore Browse/Pinned price/action layout and content-sized Browse window.
   The regression came from old v0.15.5 selectors still assigning grid-column/grid-row
   directly to .market-listing-price after v0.15.6 nested it inside .market-listing-actions.
   Those stale rules pushed the nested price block out of the intended right-side cluster. */

/* Canonical right-side action cluster for BOTH Browse and Pinned:
   PRICE/REF (or change) | STAR | BUY / VIEW GRAPH */
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-actions,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-actions{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:center!important;
  display:grid!important;
  grid-template-columns:max-content 34px max-content!important;
  grid-template-areas:"price pin primary"!important;
  align-items:center!important;
  justify-content:end!important;
  column-gap:10px!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important
}

/* Reset every stale top-level grid placement on the now-NESTED price block. */
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-actions .market-listing-price,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-actions .market-listing-price{
  grid-column:auto!important;
  grid-row:auto!important;
  grid-area:price!important;
  position:static!important;
  width:auto!important;
  min-width:92px!important;
  display:block!important;
  justify-self:end!important;
  align-self:center!important;
  text-align:right!important;
  visibility:visible!important;
  opacity:1!important;
  padding:0!important;
  margin:0!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-actions .market-listing-price strong,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-actions .market-listing-price strong{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  color:var(--text)!important;
  line-height:1.1!important;
  margin:0!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-actions .market-listing-price small,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-actions .market-listing-price small{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  color:var(--muted)!important;
  line-height:1.1!important;
  margin:5px 0 0!important
}

/* Star is always present between price and action. */
body[data-active-view="market"] #marketListings>.market-coin-row .market-action-pin,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-action-pin{
  grid-area:pin!important;
  grid-column:auto!important;
  grid-row:auto!important;
  position:static!important;
  display:grid!important;
  place-items:center!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  margin:0!important;
  padding:0!important;
  visibility:visible!important;
  opacity:1!important;
  align-self:center!important;
  justify-self:center!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-action-pin:not(.pinned){
  color:#7f91a9!important;
  text-shadow:none!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-action-pin.pinned,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-action-pin.pinned{
  color:#ffd65a!important;
  text-shadow:0 0 10px #ffca3b88!important
}

/* Primary action is always the farthest-right item. */
body[data-active-view="market"] #marketListings>.market-coin-row .market-action-primary,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-action-primary{
  grid-area:primary!important;
  grid-column:auto!important;
  grid-row:auto!important;
  justify-self:end!important;
  align-self:center!important;
  height:38px!important;
  margin:0!important;
  white-space:nowrap!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-action-primary{
  min-width:104px!important
}
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-action-primary{
  min-width:126px!important
}

/* Keep the identity side of both cards stable and vertically centered. */
body[data-active-view="market"] #marketListings>.market-coin-row,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row{
  grid-template-columns:82px minmax(0,1fr) auto!important;
  grid-template-rows:1fr!important;
  height:112px!important;
  min-height:112px!important;
  overflow:hidden!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-coin-visual,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-coin-visual{
  grid-column:1!important;
  grid-row:1!important;
  align-self:center!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-copy,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-copy{
  grid-column:2!important;
  grid-row:1!important;
  align-self:center!important;
  padding:0!important
}
body[data-active-view="market"] #marketListings,
body[data-active-view="market"] #marketPinnedCoins{
  grid-auto-rows:112px!important
}

/* Browse window now sizes to its content when there are only a few visible rows,
   but still caps itself and becomes scrollable once there are many rows. */
body[data-active-view="market"] #marketBrowsePanel .market-browse-window{
  flex:0 0 auto!important;
  height:min(calc(var(--browse-rows,1) * 122px + 18px),calc(100vh - 350px))!important;
  min-height:140px!important;
  max-height:calc(100vh - 350px)!important;
  margin-bottom:4px!important
}
body[data-active-view="market"] #marketBrowsePanel #marketListings{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow-y:auto!important;
  padding-bottom:8px!important
}

/* Pinned stays at the taller, previously-good panel height and only fixes its internal rows. */
body[data-active-view="market"] #marketPinnedPanel .market-pinned-window{
  min-height:320px!important
}

@media(max-height:760px){
  body[data-active-view="market"] #marketBrowsePanel .market-browse-window{
    height:min(calc(var(--browse-rows,1) * 118px + 16px),calc(100vh - 320px))!important;
    min-height:132px!important;
    max-height:calc(100vh - 320px)!important
  }
}

/* v0.15.64 — Browse bottom-edge repair + action order adjustment. */

/* New explicit horizontal order:
   STAR | PRICE/REF | BUY/VIEW GRAPH */
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-actions,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-actions{
  grid-template-columns:34px max-content max-content!important;
  grid-template-areas:"pin price primary"!important
}

/* Browse was losing the bottom border because the inner list height matched the card
   too tightly while scroll padding extended beyond it. Keep a real inner inset/bottom gap. */
body[data-active-view="market"] #marketBrowsePanel .market-browse-window{
  box-sizing:border-box!important;
  overflow:hidden!important;
  padding:10px 10px 12px 12px!important
}
body[data-active-view="market"] #marketBrowsePanel #marketListings{
  box-sizing:border-box!important;
  height:calc(100% - 2px)!important;
  max-height:calc(100% - 2px)!important;
  padding:0 8px 20px 0!important;
  scroll-padding-bottom:20px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important
}

/* Reserve enough computed height for the final row plus the visible lower border. */
body[data-active-view="market"] #marketBrowsePanel .market-browse-window{
  height:min(calc(var(--browse-rows,1) * 122px + 34px),calc(100vh - 350px))!important
}

@media(max-height:760px){
  body[data-active-view="market"] #marketBrowsePanel .market-browse-window{
    height:min(calc(var(--browse-rows,1) * 118px + 30px),calc(100vh - 320px))!important
  }
}

/* v0.15.64 — Browse border containment + left-side pin placement.
   The outer list card must ALWAYS remain fully visible. Only its inner listing viewport
   is allowed to clip/scroll. */

/* Constrain the Browse window itself to the visible market remainder.
   The border belongs to this fixed shell and never enters the scrolling region. */
body[data-active-view="market"] #marketBrowsePanel:not(.hidden){
  flex:1 1 0!important;
  min-height:0!important;
  overflow:hidden!important
}
body[data-active-view="market"] #marketBrowsePanel .market-browse-window{
  box-sizing:border-box!important;
  flex:1 1 0!important;
  height:auto!important;
  min-height:220px!important;
  max-height:none!important;
  margin:0 0 8px!important;
  padding:10px!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important
}

/* This is the ONLY clipped/scrolling Browse surface. The outer border stays outside it. */
body[data-active-view="market"] #marketBrowsePanel #marketListings{
  box-sizing:border-box!important;
  flex:1 1 0!important;
  height:0!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 8px 14px 0!important;
  margin:0!important;
  scroll-padding-bottom:14px!important;
  scrollbar-gutter:stable!important
}

/* New card geometry:
   PIN | COIN | IDENTITY | PRICE + ACTION
   The pin is physically left of the coin rather than part of the price/action cluster. */
body[data-active-view="market"] #marketListings>.market-coin-row,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row{
  display:grid!important;
  grid-template-columns:34px 82px minmax(0,1fr) auto!important;
  grid-template-rows:1fr!important;
  column-gap:12px!important;
  align-items:center!important;
  height:112px!important;
  min-height:112px!important;
  padding:12px 14px!important
}

body[data-active-view="market"] #marketListings>.market-coin-row .market-left-pin,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-left-pin{
  grid-column:1!important;
  grid-row:1!important;
  position:static!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  padding:0!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  justify-self:center!important;
  align-self:center!important;
  visibility:visible!important;
  opacity:1!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-left-pin:not(.pinned){
  color:#7f91a9!important;
  text-shadow:none!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-left-pin.pinned,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-left-pin.pinned{
  color:#ffd65a!important;
  text-shadow:0 0 10px #ffca3b88!important
}

body[data-active-view="market"] #marketListings>.market-coin-row .market-coin-visual,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-coin-visual{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:center!important;
  align-self:center!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-copy,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-copy{
  grid-column:3!important;
  grid-row:1!important;
  align-self:center!important;
  min-width:0!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-actions,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-actions{
  grid-column:4!important;
  grid-row:1!important;
  display:grid!important;
  grid-template-columns:max-content max-content!important;
  grid-template-areas:"price primary"!important;
  align-items:center!important;
  justify-content:end!important;
  column-gap:12px!important;
  justify-self:end!important;
  align-self:center!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-actions .market-action-price,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-actions .market-action-price{
  grid-area:price!important;
  min-width:90px!important;
  text-align:right!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-actions .market-action-primary,
body[data-active-view="market"] #marketPinnedCoins>.market-coin-row .market-listing-actions .market-action-primary{
  grid-area:primary!important;
  justify-self:end!important
}

/* Old right-side star slot is no longer used. */
body[data-active-view="market"] .market-action-pin{display:none!important}

/* Ensure the Market page leaves a visible lower gutter outside the Browse shell. */
body[data-active-view="market"] #view-market.active{
  padding-bottom:10px!important
}

@media(max-width:900px){
  body[data-active-view="market"] #marketListings>.market-coin-row,
  body[data-active-view="market"] #marketPinnedCoins>.market-coin-row{
    grid-template-columns:30px 70px minmax(0,1fr) auto!important;
    column-gap:8px!important
  }
}

/* v0.15.64 — Market Browse proportions.
   Keep the v0.15.64 containment fix; only reclaim a little more vertical space and
   bias the identity cluster toward the left edge. */
body[data-active-view="market"] #view-market.active{
  padding-bottom:4px!important
}
body[data-active-view="market"] #marketBrowsePanel .market-browse-window{
  margin-bottom:2px!important
}

/* Left-biased listing geometry:
   STAR | COIN | IDENTITY ........ PRICE | BUY
   Fixed narrow star/coin columns stop the identity block drifting toward card center. */
body[data-active-view="market"] #marketListings>.market-coin-row{
  grid-template-columns:28px 68px minmax(190px,1fr) auto!important;
  column-gap:8px!important;
  padding-left:10px!important;
  padding-right:14px!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-left-pin{
  justify-self:start!important;
  transform:translateX(-2px)!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-coin-visual{
  width:62px!important;
  height:62px!important;
  justify-self:start!important;
  margin:0!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-coin-visual img{
  width:58px!important;
  height:58px!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-copy{
  justify-self:start!important;
  width:auto!important;
  text-align:left!important;
  padding-left:0!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-actions{
  justify-self:end!important
}

/* v0.15.64 — Browse bottom-fill + tighter left identity placement.
   Keep v0.15.10 containment: outer border is fixed, only #marketListings scrolls.
   Remove the extra inner vertical slack that appeared after scrolling to the final row. */

/* The outer Browse shell should consume the intended remaining Market height,
   but the inner grid should not manufacture extra scrollable blank space. */
body[data-active-view="market"] #marketBrowsePanel .market-browse-window{
  flex:1 1 0!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 0 6px!important;
  padding:10px!important;
  overflow:hidden!important
}
body[data-active-view="market"] #marketBrowsePanel #marketListings{
  flex:1 1 0!important;
  height:0!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  align-content:start!important;
  padding:0 8px 8px 0!important;
  scroll-padding-bottom:8px!important;
  margin:0!important
}
/* No generated spacer at the end of the Browse grid. */
body[data-active-view="market"] #marketBrowsePanel #marketListings::after{
  display:none!important;
  content:none!important;
  height:0!important
}

/* Move the left-side identity group back toward the card edge while preserving
   a dedicated star column with a clean gap before the coin. */
body[data-active-view="market"] #marketListings>.market-coin-row{
  grid-template-columns:26px 62px minmax(180px,1fr) auto!important;
  column-gap:7px!important;
  padding-left:8px!important;
  padding-right:14px!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-left-pin{
  justify-self:start!important;
  transform:translateX(-1px)!important;
  margin:0!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-coin-visual{
  width:58px!important;
  height:58px!important;
  justify-self:start!important;
  margin-left:0!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-coin-visual img{
  width:56px!important;
  height:56px!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-copy{
  justify-self:start!important;
  align-self:center!important;
  width:auto!important;
  min-width:0!important;
  padding-left:0!important;
  margin-left:0!important;
  text-align:left!important
}

/* Slightly reduce card side padding so the star/coin/name cluster visually matches
   the pre-left-pin placement rather than sitting near the center. */
body[data-active-view="market"] #marketListings>.market-coin-row{
  padding-top:10px!important;
  padding-bottom:10px!important
}

/* v0.15.64 — structurally group Browse coin + identity at the left.
   Previous CSS-only column tweaks still let inherited grid placement separate the image
   and text visually. The image and name now share one explicit flex container. */
body[data-active-view="market"] #marketListings>.market-coin-row{
  grid-template-columns:30px minmax(0,1fr) auto!important;
  grid-template-rows:1fr!important;
  column-gap:10px!important;
  padding-left:10px!important;
  padding-right:14px!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-left-pin{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:center!important;
  transform:none!important;
  margin:0!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-left-identity{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  min-width:0!important;
  width:auto!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-left-identity .market-coin-visual{
  grid-column:auto!important;
  grid-row:auto!important;
  flex:0 0 58px!important;
  width:58px!important;
  height:58px!important;
  justify-self:auto!important;
  align-self:center!important;
  margin:0!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-left-identity .market-coin-visual img{
  width:56px!important;
  height:56px!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-left-identity .market-listing-copy{
  grid-column:auto!important;
  grid-row:auto!important;
  flex:0 1 auto!important;
  justify-self:auto!important;
  align-self:center!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-listing-actions{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:center!important
}

/* v0.15.64 — small Browse identity nudge left. */
body[data-active-view="market"] #marketListings>.market-coin-row{
  grid-template-columns:24px minmax(0,1fr) auto!important;
  column-gap:7px!important;
  padding-left:6px!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-left-identity{
  transform:translateX(-3px)!important
}

/* v0.15.64 — keep the pin fixed; pull only the coin + identity toward it.
   Undo v0.15.64's star-column/padding nudge, then move market-left-identity alone. */
body[data-active-view="market"] #marketListings>.market-coin-row{
  grid-template-columns:30px minmax(0,1fr) auto!important;
  column-gap:10px!important;
  padding-left:10px!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-left-pin{
  transform:none!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-left-identity{
  transform:translateX(-12px)!important
}

/* v0.15.64 — match the old compact left-side spacing.
   Pin stays fixed. Only the grouped coin visual + name/info block moves toward it. */
body[data-active-view="market"] #marketListings>.market-coin-row .market-left-pin{
  transform:none!important
}
body[data-active-view="market"] #marketListings>.market-coin-row .market-left-identity{
  transform:translateX(-40px)!important
}

/* v0.15.64 — restart/update notice must sit above every game overlay. */
#serverRestartModal{
  position:fixed!important;
  inset:0!important;
  z-index:10000!important
}
#serverRestartModal.hidden{display:none!important}
#serverRestartModal:not(.hidden){display:flex!important}
#serverRestartModal .modal-backdrop{
  position:absolute!important;
  inset:0!important;
  background:rgba(0,0,0,.78)!important;
  pointer-events:auto!important
}
#serverRestartModal .server-restart-panel{
  position:relative!important;
  z-index:1!important;
  margin:auto!important
}

/* v0.15.64 — default background lift + Casino visual identity boost. */

/* Default app background: brighter/richer than v0.15.x's near-black state,
   but still restrained compared with special commerce/Profile pages. */
body{
  --page-a:#22345d!important;
  --page-b:#111a2b!important;
  --page-c:#070b12!important;
  background:
    radial-gradient(circle at 78% 5%,rgba(70,98,177,.32) 0,rgba(21,31,54,.18) 27%,transparent 48%),
    radial-gradient(circle at 18% 82%,rgba(23,117,146,.18) 0,transparent 38%),
    linear-gradient(135deg,#11192a 0%,#0b1020 46%,#070b12 100%)!important
}
body::before{
  background:
    radial-gradient(circle at 72% 24%,rgba(91,101,255,.11),transparent 34%),
    radial-gradient(circle at 20% 78%,rgba(39,193,222,.08),transparent 38%)!important
}

/* Casino gets a much more vivid, satisfying animated base while remaining readable.
   Red/pink jackpot energy + violet motion + warm gold payoff accents. */
body[data-active-view="casino"]{
  --page-a:#6d0a27!important;
  --page-b:#29103f!important;
  --page-c:#09070f!important;
  --special-a:#ff2c62!important;
  --special-b:#9c3cff!important;
  --special-c:#ffd44d!important;
  background:
    radial-gradient(circle at 12% 16%,rgba(255,38,93,.72) 0,rgba(121,10,55,.34) 25%,transparent 48%),
    radial-gradient(circle at 84% 18%,rgba(141,55,255,.65) 0,rgba(70,21,133,.32) 27%,transparent 50%),
    radial-gradient(circle at 74% 84%,rgba(255,197,45,.38) 0,rgba(147,78,9,.18) 26%,transparent 46%),
    linear-gradient(135deg,#2b0715 0%,#220c31 48%,#09070f 100%)!important
}
body[data-active-view="casino"]::before{
  opacity:.78!important;
  background:
    radial-gradient(circle at 16% 24%,rgba(255,60,107,.62),transparent 30%),
    radial-gradient(circle at 82% 18%,rgba(154,66,255,.55),transparent 32%),
    radial-gradient(circle at 68% 82%,rgba(255,214,75,.44),transparent 28%),
    radial-gradient(circle at 42% 46%,rgba(255,91,169,.22),transparent 36%)!important;
  animation:casinoGlowDrift 7.5s ease-in-out infinite alternate!important
}
body[data-active-view="casino"]::after{
  opacity:.38!important;
  background:
    conic-gradient(from 0deg at 52% 46%,
      transparent 0 12%,
      rgba(255,70,116,.16) 17%,
      transparent 25% 43%,
      rgba(164,75,255,.18) 49%,
      transparent 57% 72%,
      rgba(255,214,74,.15) 78%,
      transparent 86% 100%)!important;
  animation:casinoSweep 18s linear infinite!important
}
@keyframes casinoGlowDrift{
  0%{transform:translate3d(-2%,-1%,0) scale(1.04);filter:saturate(1.05) brightness(.98)}
  50%{transform:translate3d(1%,1%,0) scale(1.09);filter:saturate(1.20) brightness(1.06)}
  100%{transform:translate3d(2%,-1%,0) scale(1.06);filter:saturate(1.12) brightness(1.02)}
}
@keyframes casinoSweep{
  0%{transform:rotate(0deg) scale(1.02)}
  50%{transform:rotate(180deg) scale(1.08)}
  100%{transform:rotate(360deg) scale(1.02)}
}

/* Extra casino-only ambient streaks in content cards without overpowering text. */
body[data-active-view="casino"] #view-casino{
  position:relative!important;
  isolation:isolate!important
}
body[data-active-view="casino"] #view-casino::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:-1!important;
  background:
    linear-gradient(110deg,transparent 0 26%,rgba(255,255,255,.035) 31%,transparent 36% 58%,rgba(255,205,74,.035) 64%,transparent 70%)!important;
  background-size:180% 100%!important;
  animation:casinoSheen 6.5s ease-in-out infinite!important
}
@keyframes casinoSheen{
  0%,100%{background-position:140% 0}
  50%{background-position:-40% 0}
}

@media(max-width:0px){
  body[data-active-view="casino"]::before,
  body[data-active-view="casino"]::after,
  body[data-active-view="casino"] #view-casino::before{
    animation:none!important
  }
}

/* v0.15.64 — separate music/SFX controls. */
.settings-panel{
  max-height:min(92vh,760px)!important;
  overflow-y:auto!important
}
.settings-audio-split{
  padding-top:10px!important;
  padding-bottom:10px!important
}
.settings-group input[type="range"]{
  width:100%!important
}

/* v0.15.64 — Queue Versus Token: guaranteed flat Heads/Tails flip.
   The queue token intentionally uses a 2D face swap at the narrow edge of the flip.
   This avoids browser backface/compositing behavior that kept showing mirrored Heads. */
.queue-vs-coin{
  transform-style:flat!important;
  animation:queueVsFlatFaceFlip 2.6s cubic-bezier(.3,.68,.24,1) infinite!important;
}
.queue-vs-face{
  opacity:0;
  transform:none!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  transform-style:flat!important;
}
.queue-vs-front{
  transform:none!important;
  animation:queueVsHeadsVisibility 2.6s step-end infinite!important
}
.queue-vs-back{
  transform:none!important;
  animation:queueVsTailsVisibility 2.6s step-end infinite!important
}

/* Hold Heads, compress to edge, show the real Tails texture, then flip back. */
@keyframes queueVsFlatFaceFlip{
  0%,54%{transform:scaleX(1) rotateX(-7deg)}
  62%{transform:scaleX(.055) rotateX(0deg)}
  63%,80%{transform:scaleX(1) rotateX(7deg)}
  88%{transform:scaleX(.055) rotateX(0deg)}
  89%,100%{transform:scaleX(1) rotateX(-7deg)}
}
@keyframes queueVsHeadsVisibility{
  0%,62%{opacity:1;visibility:visible}
  63%,88%{opacity:0;visibility:hidden}
  89%,100%{opacity:1;visibility:visible}
}
@keyframes queueVsTailsVisibility{
  0%,62%{opacity:0;visibility:hidden}
  63%,88%{opacity:1;visibility:visible}
  89%,100%{opacity:0;visibility:hidden}
}

/* Match-found pulse uses the same explicit face swap, just faster and more energetic. */
.queue-vs-coin-wrap.match-found .queue-vs-coin{
  animation:queueFoundFlatFaceFlip .82s cubic-bezier(.16,.82,.2,1) both!important
}
.queue-vs-coin-wrap.match-found .queue-vs-front{
  animation:queueFoundHeadsVisibility .82s step-end both!important
}
.queue-vs-coin-wrap.match-found .queue-vs-back{
  animation:queueFoundTailsVisibility .82s step-end both!important
}
@keyframes queueFoundFlatFaceFlip{
  0%{transform:scaleX(.86) scale(.92)}
  20%{transform:scaleX(.05) scale(1.02)}
  21%,47%{transform:scaleX(1) scale(1.10)}
  54%{transform:scaleX(.05) scale(1.08)}
  55%,74%{transform:scaleX(1) scale(1.14)}
  81%{transform:scaleX(.05) scale(1.10)}
  82%,100%{transform:scaleX(1) scale(1.15)}
}
@keyframes queueFoundHeadsVisibility{
  0%,20%{opacity:1;visibility:visible}
  21%,54%{opacity:0;visibility:hidden}
  55%,81%{opacity:1;visibility:visible}
  82%,100%{opacity:0;visibility:hidden}
}
@keyframes queueFoundTailsVisibility{
  0%,20%{opacity:0;visibility:hidden}
  21%,54%{opacity:1;visibility:visible}
  55%,81%{opacity:0;visibility:hidden}
  82%,100%{opacity:1;visibility:visible}
}

/* Both queue faces keep the same light-blue rim treatment. */
.queue-vs-front img,
.queue-vs-back img{
  filter:drop-shadow(0 0 2px rgba(112,234,255,.92)) drop-shadow(0 0 8px rgba(70,214,255,.20))!important
}

/* v0.15.64 — Market instance-picker layout repair.
   Coin-type cards and exact-instance rows get their own explicit layout, and the
   copies view is an opaque foreground surface instead of rendering behind the type grid. */

#marketInstanceModal{
  z-index:500!important
}
#marketInstanceModal .modal-panel{
  position:relative!important;
  width:min(980px,calc(100vw - 42px))!important;
  max-height:min(86vh,760px)!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  background:linear-gradient(150deg,#0d1623,#080e17)!important
}

/* Type grid */
#marketInstanceTypeGrid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:4px 6px 14px 2px!important;
  min-height:0!important
}
.market-instance-type{
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:12px!important;
  min-height:112px!important;
  padding:12px 12px!important;
  overflow:hidden!important
}
.market-instance-type .mini-coin{
  width:64px!important;
  height:64px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important
}
.market-instance-type .mini-coin img{
  width:60px!important;
  height:60px!important;
  object-fit:contain!important
}
.market-instance-type>div:nth-child(2){
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  text-align:left!important;
  gap:3px!important;
  overflow:hidden!important
}
.market-instance-type>div:nth-child(2) small,
.market-instance-type>div:nth-child(2) strong,
.market-instance-type>div:nth-child(2) span{
  position:static!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
  line-height:1.15!important;
  max-width:100%!important
}
.market-instance-type>div:nth-child(2) strong{
  white-space:normal!important;
  overflow-wrap:anywhere!important
}
.market-instance-type>button{
  position:static!important;
  justify-self:end!important;
  align-self:center!important;
  min-width:78px!important;
  margin:0!important
}

/* Exact copies view sits over the grid and fully hides it while open. */
#marketInstanceCopies{
  position:absolute!important;
  inset:74px 18px 18px 18px!important;
  z-index:20!important;
  background:linear-gradient(150deg,#0c1521 0%,#080d15 100%)!important;
  border:1px solid rgba(103,203,255,.24)!important;
  border-radius:12px!important;
  box-shadow:0 20px 70px rgba(0,0,0,.55)!important;
  padding:14px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important
}
#marketInstanceCopies.hidden{
  display:none!important
}
.market-instance-copy-head{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:4px 0 12px!important;
  margin-bottom:8px!important;
  background:linear-gradient(#0c1521 75%,transparent)!important
}
#marketInstanceCopies .instance-row{
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  min-height:96px!important;
  padding:12px!important;
  margin-bottom:10px!important;
  border:1px solid rgba(116,147,191,.20)!important;
  border-radius:10px!important;
  background:#0a111c!important
}
#marketInstanceCopies .instance-icon{
  width:60px!important;
  height:60px!important;
  display:grid!important;
  place-items:center!important
}
#marketInstanceCopies .instance-icon img{
  width:56px!important;
  height:56px!important;
  object-fit:contain!important
}
#marketInstanceCopies .instance-main{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:4px!important
}
#marketInstanceCopies .instance-main>*{
  position:static!important;
  transform:none!important
}
#marketInstanceCopies .instance-row>button{
  position:static!important;
  justify-self:end!important;
  align-self:center!important;
  min-width:92px!important
}

@media(max-width:900px){
  #marketInstanceTypeGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
  #marketInstanceTypeGrid{grid-template-columns:1fr!important}
  .market-instance-type{grid-template-columns:64px minmax(0,1fr) auto!important}
  #marketInstanceCopies .instance-row{grid-template-columns:58px minmax(0,1fr)!important}
  #marketInstanceCopies .instance-row>button{grid-column:2!important;justify-self:start!important}
}


/* v0.15.64 — Chrome short-viewport / AUTO-fit repair.
   Fullscreen match and result surfaces follow the virtual canvas created by applyViewportFit. */
html[data-auto-fit="on"] body{
  width:var(--virtual-width)!important;
  min-width:var(--virtual-width)!important;
  height:var(--virtual-height)!important;
  min-height:var(--virtual-height)!important;
}
html[data-auto-fit="on"] .app-shell{min-height:var(--virtual-height)!important}
html[data-auto-fit="on"] .match-end-overlay,
html[data-auto-fit="on"] .rank-up-overlay,
html[data-auto-fit="on"] .rank-down-overlay{
  width:var(--virtual-width)!important;
  height:var(--virtual-height)!important;
}
html[data-viewport-height="tiny"] .match-shell{min-height:0!important}
html[data-viewport-height="tiny"] .match-layout{min-height:0!important}


/* v0.15.64 — AUTO-fit viewport-unit root-cause fix.
   Under CSS zoom, Chrome's 100vh/100vw still refer to the physical content viewport.
   Those values were then zoomed again, making match-specific vh heights too short.
   AUTO-fit surfaces now size from the inverse virtual canvas instead. */
html[data-auto-fit="on"] body,
html[data-auto-fit="on"] .app-shell{
  width:var(--virtual-width)!important;
  min-width:var(--virtual-width)!important;
  height:var(--virtual-height)!important;
  min-height:var(--virtual-height)!important
}
html[data-auto-fit="on"] .sidebar{
  height:var(--virtual-height)!important;
  min-height:var(--virtual-height)!important
}
html[data-auto-fit="on"] .main{
  min-height:var(--virtual-height)!important
}
html[data-auto-fit="on"] .match-panel{
  height:calc(var(--virtual-height) - 84px)!important;
  min-height:0!important;
  overflow:hidden!important
}
html[data-auto-fit="on"] .arena-card{
  min-height:calc(var(--virtual-height) - 105px)!important
}
html[data-auto-fit="on"] .arena{
  height:calc(var(--virtual-height) - 265px)!important;
  min-height:330px!important;
  max-height:720px!important
}
html[data-auto-fit="on"] .match-intro,
html[data-auto-fit="on"] .victory-overlay,
html[data-auto-fit="on"] .match-end-overlay,
html[data-auto-fit="on"] .rank-up-overlay,
html[data-auto-fit="on"] .rank-down-overlay,
html[data-auto-fit="on"] .capsule-cinematic{
  width:var(--virtual-width)!important;
  height:var(--virtual-height)!important
}

/* At very short Chrome heights, preserve the full choice/result area instead of
   letting older fixed min-heights consume the virtual match canvas. */
html[data-auto-fit="on"][data-viewport-height="tiny"] .arena{
  min-height:285px!important
}
html[data-auto-fit="on"][data-viewport-height="tiny"] .choice-area{
  flex:0 0 auto!important;
  padding:6px 14px 8px!important
}


/* v0.15.64 — responsive victory / defeat / draw presentation.
   This intentionally uses the exact ID selector to override the old v0.12.26
   100vw/100vh safety rule, whose higher specificity defeated later AUTO-fit rules. */
html[data-auto-fit="on"] #victoryOverlay.victory-overlay{
  width:var(--virtual-width)!important;
  min-width:var(--virtual-width)!important;
  max-width:var(--virtual-width)!important;
  height:var(--virtual-height)!important;
  min-height:var(--virtual-height)!important;
  max-height:var(--virtual-height)!important;
  inset:0 auto auto 0!important;
}
html[data-auto-fit="on"] #victoryOverlay .victory-copy{
  width:min(760px,88%)!important;
  min-width:0!important;
  max-width:88%!important;
  padding:clamp(18px,3vh,34px) clamp(28px,4vw,50px)!important
}
html[data-auto-fit="on"] #victoryOverlay .victory-copy h1,
html[data-auto-fit="on"] #victoryOverlay.risk-allin .victory-copy h1{
  font-size:clamp(42px,8vh,88px)!important
}
html[data-auto-fit="on"] #victoryOverlay .victory-burst{
  width:min(1000px,92vmin)!important;
  height:min(1000px,92vmin)!important
}
html[data-auto-fit="on"] #victoryOverlay .victory-rings{
  width:min(520px,58vmin)!important;
  height:min(520px,58vmin)!important
}

/* Manual virtual-resolution targets get the same malleable end screen. */
html[data-resolution]:not([data-resolution="auto"]) #victoryOverlay.victory-overlay{
  width:var(--virtual-width)!important;
  min-width:var(--virtual-width)!important;
  height:var(--virtual-height)!important;
  min-height:var(--virtual-height)!important;
  inset:0 auto auto 0!important
}


/* v0.15.64 — global AUTO-fit viewport audit.
   Any full-screen/modal/scroll surface that previously depended on physical vw/vh
   now follows the same inverse virtual canvas used by the fitted client. */

/* Generic modals + settings + restart notice */
html[data-auto-fit="on"] .modal,
html[data-auto-fit="on"] .settings-modal,
html[data-auto-fit="on"] #serverRestartModal{
  width:var(--virtual-width)!important;
  height:var(--virtual-height)!important;
  min-width:var(--virtual-width)!important;
  min-height:var(--virtual-height)!important;
  inset:0 auto auto 0!important
}
html[data-auto-fit="on"] .modal-panel{
  width:min(1000px,90%)!important;
  max-height:86%!important
}
html[data-auto-fit="on"] .settings-panel{
  width:min(430px,calc(100% - 28px))!important;
  max-height:min(92%,760px)!important
}
html[data-auto-fit="on"] .server-restart-panel{
  width:min(520px,calc(100% - 36px))!important
}
html[data-auto-fit="on"] #marketInstanceModal .modal-panel{
  width:min(980px,calc(100% - 42px))!important;
  max-height:min(86%,760px)!important
}

/* Match intro and gacha cinematic internals */
html[data-auto-fit="on"] .match-intro,
html[data-auto-fit="on"] .capsule-cinematic{
  width:var(--virtual-width)!important;
  height:var(--virtual-height)!important;
  inset:0 auto auto 0!important
}
html[data-auto-fit="on"] .intro-line{width:min(720px,78%)!important}
html[data-auto-fit="on"] .intro-vs{width:min(860px,88%)!important}
html[data-auto-fit="on"] .capsule-cinematic-rays{
  width:min(var(--virtual-width),var(--virtual-height))!important;
  height:min(var(--virtual-width),var(--virtual-height))!important
}

/* Collection scroll surface */
html[data-auto-fit="on"] #view-inventory.active{
  height:calc(var(--virtual-height) - 92px)!important;
  max-height:calc(var(--virtual-height) - 92px)!important
}
html[data-auto-fit="on"][data-viewport-height="tiny"] #view-inventory.active,
html[data-auto-fit="on"][data-viewport-height="short"] #view-inventory.active{
  height:calc(var(--virtual-height) - 76px)!important;
  max-height:calc(var(--virtual-height) - 76px)!important
}

/* Market internal scroll regions */
html[data-auto-fit="on"] #marketBrowsePanel #marketListings{
  height:clamp(300px,calc(var(--virtual-height) - 385px),650px)!important
}
html[data-auto-fit="on"] body[data-active-view="market"] #marketPinnedPanel #marketPinnedCoins,
html[data-auto-fit="on"] body[data-active-view="market"] #marketActivityPanel #marketTrades{
  height:calc(var(--virtual-height) - 360px)!important
}
html[data-auto-fit="on"] body[data-active-view="market"] #marketSellPanel,
html[data-auto-fit="on"] body[data-active-view="market"] #marketGraphPanel{
  max-height:calc(var(--virtual-height) - 350px)!important
}
html[data-auto-fit="on"] body[data-active-view="market"] #marketBrowsePanel .market-browse-window{
  height:min(calc(var(--browse-rows,1) * 122px + 34px),calc(var(--virtual-height) - 350px))!important;
  max-height:calc(var(--virtual-height) - 350px)!important
}
html[data-auto-fit="on"][data-viewport-height="tiny"] body[data-active-view="market"] #marketBrowsePanel .market-browse-window,
html[data-auto-fit="on"][data-viewport-height="short"] body[data-active-view="market"] #marketBrowsePanel .market-browse-window{
  height:min(calc(var(--browse-rows,1) * 118px + 30px),calc(var(--virtual-height) - 320px))!important;
  max-height:calc(var(--virtual-height) - 320px)!important
}

/* Fixed decorative page layers */
html[data-auto-fit="on"] body::before,
html[data-auto-fit="on"] body::after{
  width:var(--virtual-width)!important;
  height:var(--virtual-height)!important;
  inset:0 auto auto 0!important
}

/* Manual virtual-resolution targets receive the same viewport-safe treatment. */
html[data-resolution]:not([data-resolution="auto"]) .modal,
html[data-resolution]:not([data-resolution="auto"]) .settings-modal,
html[data-resolution]:not([data-resolution="auto"]) #serverRestartModal,
html[data-resolution]:not([data-resolution="auto"]) .match-intro,
html[data-resolution]:not([data-resolution="auto"]) .capsule-cinematic{
  width:var(--virtual-width)!important;
  height:var(--virtual-height)!important;
  inset:0 auto auto 0!important
}


/* v0.15.64 — strict match-end containment, especially Ranked defeat. */
#victoryOverlay.victory-overlay{
  box-sizing:border-box!important;
  padding:clamp(14px,3vh,34px)!important;
  overflow:hidden!important
}
#victoryOverlay .victory-copy{
  box-sizing:border-box!important;
  width:min(760px,92%)!important;
  min-width:0!important;
  max-width:760px!important;
  max-height:calc(100% - 28px)!important;
  overflow:visible!important;
  padding:clamp(16px,3vh,34px) clamp(20px,4vw,50px)!important;
  margin:auto!important
}
#victoryOverlay .victory-copy h1,
#victoryOverlay.risk-allin .victory-copy h1{
  font-size:clamp(38px,8vmin,88px)!important;
  line-height:.98!important;
  margin:clamp(4px,1.2vh,10px) 0!important;
  max-width:100%!important;
  overflow:visible!important
}
#victoryOverlay.loss .victory-copy{
  transform-origin:center center!important
}
#victoryOverlay .risk-callout,
#victoryOverlay .victory-stake,
#victoryOverlay .victory-performance,
#victoryOverlay .payout-counter,
#victoryOverlay .victory-copy p{
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important
}
@media(max-height:700px){
  #victoryOverlay.victory-overlay{padding:10px!important}
  #victoryOverlay .victory-copy{padding:14px 22px!important;max-height:calc(100% - 16px)!important}
  #victoryOverlay .victory-copy h1,#victoryOverlay.risk-allin .victory-copy h1{font-size:clamp(34px,7.5vmin,58px)!important}
  #victoryOverlay .victory-stake,#victoryOverlay .victory-performance{margin-top:4px!important;font-size:10px!important}
  #victoryOverlay .payout-counter{font-size:18px!important;margin-top:6px!important}
}

/* Profile activity + shared chart controls. */
.profile-history-card{margin-top:16px;overflow:hidden}
.profile-history-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.profile-history-controls{display:grid;gap:8px;justify-items:end}
.profile-metric-tabs,.chart-range-tabs{display:flex;gap:5px;flex-wrap:wrap}
.profile-metric-tabs button,.chart-range-tabs button{
  border:1px solid #26364d;background:#09111c;color:#7f91a8;border-radius:5px;padding:6px 9px;
  font-size:8px;font-weight:950;letter-spacing:.08em;cursor:pointer
}
.profile-metric-tabs button.active,.chart-range-tabs button.active{
  color:#dff7ff;border-color:#55c8ff88;background:#12304a;box-shadow:0 0 14px #38bfff17
}
.profile-history-stage{position:relative;margin-top:14px;height:320px;min-height:280px}
#profileHistoryChart{display:block;width:100%;height:100%}
.profile-history-foot{display:flex;align-items:baseline;gap:12px;margin-top:10px;border-top:1px solid #ffffff0d;padding-top:10px}
.profile-history-foot span{font-size:8px;letter-spacing:.12em;color:#71839a;font-weight:950}
.profile-history-foot strong{font-size:16px;color:#dcecff}.profile-history-foot small{color:#687990}
.chart-control-stack{display:grid;gap:7px;justify-items:end}
@media(max-width:850px){
  .profile-history-head{display:grid}.profile-history-controls,.chart-control-stack{justify-items:start}
  .profile-history-stage{height:280px}
}

/* v0.15.64 — continuous slot reels + win feedback */
.slot-reels span{position:relative!important;display:block!important;height:150px!important;overflow:hidden!important;padding:0!important;isolation:isolate}
.slot-reels span:before,.slot-reels span:after{content:"";position:absolute;left:0;right:0;height:34%;z-index:3;pointer-events:none}
.slot-reels span:before{top:0;background:linear-gradient(#020307e8,transparent)}.slot-reels span:after{bottom:0;background:linear-gradient(transparent,#020307e8)}
.slot-reel-strip{position:absolute;inset:0 0 auto;will-change:transform}.slot-symbol{height:150px;display:grid;place-items:center;font-size:60px;font-weight:950;line-height:1;text-shadow:0 0 18px rgba(255,224,145,.18);background:radial-gradient(circle at center,rgba(255,255,255,.035),transparent 58%)}
.slot-reels.spinning span{animation:none!important}.slot-reels.spinning span:not(.locked){border-color:rgba(255,202,91,.34);box-shadow:inset 0 0 35px #000,0 0 24px rgba(255,158,64,.10)}
.slot-reels span.locked{transform:none!important;border-color:#ffd166!important;box-shadow:inset 0 0 35px #000,0 0 30px #ffd1662f!important}
.slots-card.slot-win-flash{animation:slotWinCardFlash .72s cubic-bezier(.15,.75,.2,1)}.slots-card.slot-jackpot-flash{animation:slotJackpotCardFlash 1.05s cubic-bezier(.15,.75,.2,1)}
@keyframes slotWinCardFlash{0%,100%{box-shadow:0 18px 70px rgba(0,0,0,.34),0 0 35px rgba(255,133,49,.06)}18%{box-shadow:0 0 0 2px rgba(255,220,103,.72),0 0 85px rgba(255,184,66,.45),inset 0 0 65px rgba(255,197,72,.12)}48%{box-shadow:0 0 0 1px rgba(255,220,103,.32),0 0 45px rgba(255,184,66,.20)}}
@keyframes slotJackpotCardFlash{0%,100%{filter:none}12%{filter:brightness(1.55) saturate(1.45);box-shadow:0 0 0 3px rgba(255,232,125,.92),0 0 130px rgba(255,183,49,.62),0 0 190px rgba(213,72,255,.26)}34%{filter:brightness(1.12) saturate(1.25)}52%{filter:brightness(1.35) saturate(1.35)}}
.slot-win-particle{position:fixed;width:7px;height:15px;border-radius:2px;z-index:9000;pointer-events:none;background:linear-gradient(#fff7bd,#ffbc42);box-shadow:0 0 14px #ffd95d;animation:slotParticlePop 1.15s cubic-bezier(.1,.65,.2,1) forwards}.slot-win-particle.spark-star{width:10px;height:10px;transform:rotate(45deg);background:linear-gradient(135deg,#fff,#ffe36c);box-shadow:0 0 20px #fff09a}
@keyframes slotParticlePop{0%{opacity:0;transform:translate(0,0) scale(.35) rotate(0)}12%{opacity:1;transform:translate(0,-12px) scale(1.15) rotate(40deg)}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.65) rotate(var(--sr))}}
@media(max-width:0px){.slot-win-particle{animation-duration:.25s!important}.slots-card.slot-win-flash,.slots-card.slot-jackpot-flash{animation:none!important}}


/* v0.15.64 — match screen has zero page scrolling + result text is independent of its backdrop. */

/* The result copy is no longer clipped by the decorative box.
   Text is centered relative to the box, but the box itself is a pseudo-element behind it. */
#victoryOverlay .victory-copy{
  position:relative!important;
  isolation:isolate!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  width:min(720px,86%)!important;
  max-width:720px!important;
  min-width:0!important;
  max-height:none!important;
  padding:clamp(22px,4vh,42px) clamp(22px,4vw,52px)!important;
  text-align:center!important
}
#victoryOverlay .victory-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:100%;
  height:100%;
  min-height:230px;
  background:linear-gradient(180deg,#0b1612bd,#080c0bdb);
  border-top:1px solid #ffe99842;
  border-bottom:1px solid #ffe99842;
  box-shadow:0 0 100px #f9cf4930;
  pointer-events:none
}
#victoryOverlay.loss .victory-copy::before{
  background:linear-gradient(180deg,#171012dc,#0d090bdd);
  border-color:#ff607653;
  box-shadow:0 0 80px #ff344023
}
#victoryOverlay.draw .victory-copy::before{
  background:linear-gradient(180deg,#111522dc,#090d15df)
}
#victoryOverlay .victory-copy h1,
#victoryOverlay.risk-allin .victory-copy h1{
  display:block!important;
  overflow:visible!important;
  line-height:1.12!important;
  padding:.03em .02em .10em!important;
  margin:clamp(2px,1vh,9px) auto!important;
  max-width:none!important;
  white-space:nowrap!important;
  font-size:clamp(40px,8vmin,88px)!important
}
#victoryOverlay .victory-copy>*{
  position:relative;
  z-index:1
}
#victoryOverlay .risk-callout,
#victoryOverlay .victory-stake,
#victoryOverlay .victory-performance,
#victoryOverlay .victory-copy p,
#victoryOverlay .payout-counter{
  overflow:visible!important;
  max-width:none!important
}
@media(max-width:620px){
  #victoryOverlay .victory-copy{width:82%!important;padding:18px 8px!important}
  #victoryOverlay .victory-copy h1,#victoryOverlay.risk-allin .victory-copy h1{
    font-size:clamp(34px,11vw,56px)!important
  }
}
@media(max-height:650px){
  #victoryOverlay .victory-copy{padding:14px 20px!important}
  #victoryOverlay .victory-copy::before{min-height:190px!important}
  #victoryOverlay .victory-copy h1,#victoryOverlay.risk-allin .victory-copy h1{
    line-height:1.12!important;padding-bottom:.10em!important
  }
}

/* A live match is a fixed game canvas, not a document.
   No body/main/view/card scrollbars are allowed while match-locked. */
html:has(body.match-locked),
html:has(body.match-locked) body{
  overflow:hidden!important;
  overscroll-behavior:none!important
}
body.match-locked{
  height:var(--virtual-height,100vh)!important;
  min-height:0!important;
  max-height:var(--virtual-height,100vh)!important
}
body.match-locked .app-shell{
  height:var(--virtual-height,100vh)!important;
  min-height:0!important;
  max-height:var(--virtual-height,100vh)!important;
  overflow:hidden!important
}
body.match-locked .main{
  height:var(--virtual-height,100vh)!important;
  min-height:0!important;
  max-height:var(--virtual-height,100vh)!important;
  padding-bottom:0!important;
  overflow:hidden!important
}
body.match-locked #view-play.active{
  display:flex!important;
  flex-direction:column!important;
  height:calc(var(--virtual-height,100vh) - 72px)!important;
  min-height:0!important;
  max-height:calc(var(--virtual-height,100vh) - 72px)!important;
  padding:0!important;
  overflow:hidden!important
}
body.match-locked #matchPanel{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 0!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important
}
body.match-locked #matchPanel>.arena-card{
  flex:1 1 0!important;
  display:flex!important;
  flex-direction:column!important;
  height:auto!important;
  min-height:0!important;
  max-height:100%!important;
  margin:0!important;
  padding:clamp(10px,1.7vh,18px) clamp(12px,1.8vw,22px)!important;
  overflow:hidden!important
}
body.match-locked .match-header,
body.match-locked .match-meta,
body.match-locked .reconnect-banner,
body.match-locked .match-social,
body.match-locked .choice-area,
body.match-locked .match-end-actions{
  flex:0 0 auto!important
}
body.match-locked .match-social{
  min-height:34px!important;
  max-height:58px!important;
  overflow:visible!important
}
body.match-locked .arena{
  flex:1 1 0!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  overflow:hidden!important
}
body.match-locked .choice-area{
  position:relative!important;
  bottom:auto!important;
  margin:0!important;
  padding:clamp(5px,1vh,10px) 0 0!important
}
body.match-locked .match-end-actions{
  margin:4px 0 0!important
}
body.match-locked .match-panel,
body.match-locked .arena-card,
body.match-locked .arena,
body.match-locked #view-play.active{
  scrollbar-width:none!important
}
body.match-locked .match-panel::-webkit-scrollbar,
body.match-locked .arena-card::-webkit-scrollbar,
body.match-locked .arena::-webkit-scrollbar,
body.match-locked #view-play.active::-webkit-scrollbar{
  display:none!important
}

/* Short desktop windows compress decorative/secondary HUD before the play area. */
@media(min-width:861px) and (max-height:760px){
  body.match-locked #view-play.active{height:calc(var(--virtual-height,100vh) - 62px)!important}
  body.match-locked .match-header{padding-top:2px!important;padding-bottom:4px!important}
  body.match-locked .match-header .header-score{font-size:36px!important}
  body.match-locked .match-header .header-call{min-height:28px!important;padding:4px 8px!important}
  body.match-locked .match-header .header-call strong{font-size:13px!important}
  body.match-locked .match-social{min-height:28px!important;max-height:42px!important;margin:2px 0!important}
  body.match-locked .arena .coin-shell{transform:scale(.88)}
  body.match-locked .choice{min-height:46px!important;padding:8px 12px!important}
}


/* v0.15.64 — high-energy Store / Unboxing / Market ambience.
   Casino remains the most aggressive page, while these now carry their own vivid animated identities. */

/* STORE — cyan/gold/violet premium storefront */
body[data-active-view="shop"]{
  background:
    radial-gradient(circle at 18% 18%,rgba(36,210,255,.48),transparent 33%),
    radial-gradient(circle at 82% 14%,rgba(145,76,255,.48),transparent 34%),
    radial-gradient(circle at 70% 82%,rgba(255,205,66,.32),transparent 31%),
    linear-gradient(135deg,#071825 0%,#12102c 48%,#090a13 100%)!important
}
body[data-active-view="shop"]::before{
  opacity:.62!important;
  background:
    radial-gradient(circle at 12% 35%,rgba(67,226,255,.46),transparent 30%),
    radial-gradient(circle at 86% 22%,rgba(163,82,255,.42),transparent 31%),
    radial-gradient(circle at 72% 78%,rgba(255,214,82,.35),transparent 29%)!important;
  animation:shopGlowDrift 8.5s ease-in-out infinite alternate!important
}
body[data-active-view="shop"]::after{
  opacity:.29!important;
  background:
    conic-gradient(from 30deg at 54% 46%,transparent 0 17%,rgba(71,219,255,.15) 22%,transparent 29% 48%,rgba(255,216,89,.14) 54%,transparent 62% 78%,rgba(158,77,255,.16) 84%,transparent 92%)!important;
  animation:specialPageSweep 22s linear infinite!important
}
body[data-active-view="shop"] #view-shop{
  position:relative!important;isolation:isolate!important
}
body[data-active-view="shop"] #view-shop::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(108deg,transparent 0 27%,rgba(255,255,255,.035) 32%,transparent 37% 61%,rgba(80,220,255,.035) 67%,transparent 73%);
  background-size:190% 100%;animation:specialPageSheen 7.5s ease-in-out infinite
}

/* UNBOXING — magenta/cyan/gold reveal-energy */
body[data-active-view="gacha"]{
  background:
    radial-gradient(circle at 20% 18%,rgba(255,65,171,.50),transparent 34%),
    radial-gradient(circle at 82% 20%,rgba(60,205,255,.46),transparent 34%),
    radial-gradient(circle at 55% 82%,rgba(255,191,48,.34),transparent 34%),
    linear-gradient(135deg,#22091e 0%,#0b1930 52%,#0b0912 100%)!important
}
body[data-active-view="gacha"]::before{
  opacity:.68!important;
  background:
    radial-gradient(circle at 16% 28%,rgba(255,78,183,.52),transparent 30%),
    radial-gradient(circle at 84% 23%,rgba(71,224,255,.48),transparent 31%),
    radial-gradient(circle at 53% 82%,rgba(255,205,69,.38),transparent 28%)!important;
  animation:gachaGlowDrift 7s ease-in-out infinite alternate!important
}
body[data-active-view="gacha"]::after{
  opacity:.34!important;
  background:
    conic-gradient(from 0deg at 50% 48%,transparent 0 12%,rgba(255,77,177,.17) 18%,transparent 25% 42%,rgba(69,216,255,.17) 48%,transparent 56% 73%,rgba(255,209,67,.15) 80%,transparent 88%)!important;
  animation:specialPageSweep 17s linear infinite!important
}
body[data-active-view="gacha"] #view-gacha{
  position:relative!important;isolation:isolate!important
}
body[data-active-view="gacha"] #view-gacha::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(112deg,transparent 0 24%,rgba(255,255,255,.04) 30%,transparent 36% 57%,rgba(255,91,194,.04) 64%,transparent 71%);
  background-size:185% 100%;animation:specialPageSheen 6.4s ease-in-out infinite
}

/* MARKET — electric blue/emerald/violet trading-floor energy */
body[data-active-view="market"]{
  background:
    radial-gradient(circle at 14% 20%,rgba(41,185,255,.46),transparent 34%),
    radial-gradient(circle at 84% 16%,rgba(120,73,255,.43),transparent 34%),
    radial-gradient(circle at 65% 84%,rgba(49,255,175,.25),transparent 32%),
    linear-gradient(135deg,#071727 0%,#10142c 50%,#07100e 100%)!important
}
body[data-active-view="market"]::before{
  opacity:.61!important;
  background:
    radial-gradient(circle at 18% 30%,rgba(54,194,255,.45),transparent 31%),
    radial-gradient(circle at 84% 21%,rgba(140,77,255,.40),transparent 30%),
    radial-gradient(circle at 65% 82%,rgba(48,255,177,.29),transparent 29%)!important;
  animation:marketGlowDrift 9s ease-in-out infinite alternate!important
}
body[data-active-view="market"]::after{
  opacity:.28!important;
  background:
    conic-gradient(from 18deg at 52% 46%,transparent 0 14%,rgba(55,194,255,.14) 20%,transparent 27% 47%,rgba(48,255,177,.12) 53%,transparent 61% 78%,rgba(139,79,255,.14) 84%,transparent 92%)!important;
  animation:specialPageSweep 24s linear infinite!important
}
body[data-active-view="market"] #view-market{
  position:relative!important;isolation:isolate!important
}
body[data-active-view="market"] #view-market::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(110deg,transparent 0 27%,rgba(255,255,255,.028) 32%,transparent 37% 59%,rgba(66,226,255,.032) 65%,transparent 71%);
  background-size:190% 100%;animation:specialPageSheen 8.2s ease-in-out infinite
}

@keyframes shopGlowDrift{
  0%{transform:translate3d(-1.5%,-1%,0) scale(1.03);filter:saturate(1.05)}
  100%{transform:translate3d(1.8%,1%,0) scale(1.09);filter:saturate(1.22) brightness(1.07)}
}
@keyframes gachaGlowDrift{
  0%{transform:translate3d(-2%,0,0) scale(1.04);filter:saturate(1.08)}
  100%{transform:translate3d(2%,-1%,0) scale(1.10);filter:saturate(1.28) brightness(1.08)}
}
@keyframes marketGlowDrift{
  0%{transform:translate3d(-1.5%,-.7%,0) scale(1.03);filter:saturate(1.04)}
  100%{transform:translate3d(1.5%,1%,0) scale(1.08);filter:saturate(1.20) brightness(1.06)}
}
@keyframes specialPageSweep{
  from{transform:rotate(0deg) scale(1.02)}
  50%{transform:rotate(180deg) scale(1.08)}
  to{transform:rotate(360deg) scale(1.02)}
}
@keyframes specialPageSheen{
  0%,100%{background-position:140% 0}
  50%{background-position:-40% 0}
}
@media(max-width:0px){
  body[data-active-view="shop"]::before,body[data-active-view="shop"]::after,body[data-active-view="shop"] #view-shop::before,
  body[data-active-view="gacha"]::before,body[data-active-view="gacha"]::after,body[data-active-view="gacha"] #view-gacha::before,
  body[data-active-view="market"]::before,body[data-active-view="market"]::after,body[data-active-view="market"] #view-market::before{
    animation:none!important
  }
}


/* v0.15.64 — full VICTORY title + true no-scroll live match viewport. */

/* VICTORY is the intended word. Keep the full word inside the centered result composition. */
#victoryOverlay #victoryTitle{
  display:block!important;
  width:max-content!important;
  max-width:calc(100% - 12px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:.04em .08em .12em!important;
  font-size:clamp(38px,6.6vmin,74px)!important;
  line-height:1.08!important;
  letter-spacing:.035em!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-align:center!important
}
#victoryOverlay.risk-allin #victoryTitle{
  font-size:clamp(38px,6.9vmin,78px)!important
}
@media(max-width:700px),(max-height:650px){
  #victoryOverlay #victoryTitle,
  #victoryOverlay.risk-allin #victoryTitle{
    font-size:clamp(34px,6.2vmin,58px)!important;
    letter-spacing:.025em!important
  }
}

/* Treat the live match as a viewport-sized application panel.
   The main pane is flexed under the top bar, and the match card leaves visible breathing room
   above the physical bottom edge instead of filling/overflowing it. */
body.match-locked .app-shell{
  position:fixed!important;
  inset:0!important;
  width:var(--virtual-width,100vw)!important;
  height:var(--virtual-height,100vh)!important;
  min-height:0!important;
  max-height:var(--virtual-height,100vh)!important;
  overflow:hidden!important
}
body.match-locked .main{
  display:flex!important;
  flex-direction:column!important;
  align-self:stretch!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  padding:0 34px 12px!important;
  overflow:hidden!important;
  box-sizing:border-box!important
}
body.match-locked .topbar{
  flex:0 0 auto!important
}
body.match-locked #view-play.active{
  flex:1 1 0!important;
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:0 0 10px!important;
  margin:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important
}
body.match-locked #matchPanel{
  flex:1 1 0!important;
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important
}
body.match-locked #matchPanel>.arena-card{
  height:calc(100% - 8px)!important;
  min-height:0!important;
  max-height:calc(100% - 8px)!important;
  margin:0 0 8px!important;
  overflow:hidden!important;
  box-sizing:border-box!important
}
body.match-locked .arena{
  min-height:0!important;
  overflow:hidden!important
}
body.match-locked,
body.match-locked *{
  overscroll-behavior:none!important
}
body.match-locked::-webkit-scrollbar,
body.match-locked .main::-webkit-scrollbar,
body.match-locked #view-play::-webkit-scrollbar,
body.match-locked #matchPanel::-webkit-scrollbar{
  display:none!important
}
@media(min-width:861px) and (max-height:800px){
  body.match-locked .main{padding-left:22px!important;padding-right:22px!important;padding-bottom:10px!important}
  body.match-locked #view-play.active{padding-bottom:8px!important}
  body.match-locked #matchPanel>.arena-card{height:calc(100% - 6px)!important;max-height:calc(100% - 6px)!important;margin-bottom:6px!important}
}


/* v0.15.64 — Server Info dashboard */
.server-info-view{padding-bottom:60px}
.server-circulation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.server-chart-card{overflow:hidden}
.server-chart-stage{position:relative;height:260px;margin-top:10px}
.server-chart-stage canvas{display:block;width:100%;height:100%}
.server-chart-foot{display:flex;align-items:baseline;gap:10px;border-top:1px solid #ffffff0d;padding-top:10px;margin-top:8px}
.server-chart-foot strong{font-size:20px}.server-chart-foot small{color:var(--muted)}
.server-recent-card{margin-bottom:24px}
.server-recent-card .history-list{max-height:340px;overflow:hidden}
.server-bot-head{margin-top:8px}
@media(max-width:950px){.server-circulation-grid{grid-template-columns:1fr}}


/* v0.15.64 — victory title is the top layer, centered, and cannot clip */
#victoryOverlay .victory-copy{
  overflow:visible!important;text-align:center!important;display:flex!important;
  flex-direction:column!important;align-items:center!important;justify-content:center!important;
  width:min(820px,94vw)!important;max-width:min(820px,94vw)!important;min-width:0!important;z-index:20!important;
}
#victoryOverlay #victoryTitle{
  position:relative!important;z-index:50!important;display:block!important;width:100%!important;
  max-width:none!important;overflow:visible!important;white-space:nowrap!important;text-align:center!important;
  margin-left:auto!important;margin-right:auto!important;padding:0 .16em .08em!important;line-height:1.08!important;
  box-sizing:border-box!important;font-size:clamp(48px,8vw,88px)!important;
}
#victoryOverlay.risk-allin #victoryTitle{font-size:clamp(52px,9vw,100px)!important}
#victoryOverlay .victory-burst{z-index:1!important}
#victoryOverlay .victory-rings{z-index:2!important}
#victoryOverlay .payoff-sparks{z-index:3!important}
@media(max-width:700px){
  #victoryOverlay #victoryTitle,#victoryOverlay.risk-allin #victoryTitle{
    font-size:clamp(38px,11vw,64px)!important;letter-spacing:.045em!important
  }
}


/* v0.15.64 — Server-wide recent match presentation + calendar-day graph endpoint fix. */
.server-recent-card{
  overflow:hidden!important;
}
.server-recent-card .history-list{
  max-height:none!important;
  overflow:hidden!important;
  display:grid!important;
  gap:8px!important;
}
.server-history-item{
  min-height:58px!important;
  padding:10px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  overflow:hidden!important;
}
.server-match-copy{
  min-width:0!important;
  display:grid!important;
  gap:5px!important;
}
.server-match-copy>strong{
  color:#edf3fb!important;
  font-size:13px!important;
  line-height:1.1!important;
}
.server-match-copy>small{
  display:block!important;
  font-size:11px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.server-player-win{color:#56efb0!important;font-weight:900!important}
.server-player-loss{color:#ff6d88!important;font-weight:900!important}
.server-player-draw{color:#ffd96a!important;font-weight:900!important}
.server-vs{color:#7f8da2!important}
.server-match-time{
  flex:0 0 auto!important;
  margin-left:14px!important;
  color:#8d9aac!important;
  font-size:10px!important;
  font-weight:800!important
}
.server-recent-card{
  max-height:none!important;
  padding-bottom:14px!important
}
.server-recent-card .history-list>.history-item:last-child{
  margin-bottom:0!important
}

.time-graph-tooltip{position:fixed;z-index:12000;pointer-events:none;min-width:170px;max-width:280px;padding:9px 11px;border:1px solid rgba(113,207,255,.35);border-radius:7px;background:rgba(5,10,17,.96);box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 22px rgba(76,194,255,.10);color:#eaf5ff;font-size:10px;line-height:1.35}.time-graph-tooltip.hidden{display:none!important}.time-graph-tooltip strong{display:block;font-size:11px;color:#f4f8ff}.time-graph-tooltip span{display:block;margin-top:3px;color:#8294aa;font-size:9px;letter-spacing:.04em}
.market-instance-toolbar{position:sticky;top:56px;z-index:3;display:grid;grid-template-columns:1fr 1fr minmax(300px,1.2fr);gap:10px;padding:10px;margin:0 0 10px;background:#09111bdc;border:1px solid rgba(105,190,240,.13);border-radius:8px;backdrop-filter:blur(12px)}.market-instance-toolbar label{display:grid;gap:5px;color:#7e90a8;font-size:8px;font-weight:900;letter-spacing:.08em}.market-instance-toolbar select,.market-instance-toolbar input{width:100%;min-width:0}.market-bulk-select{display:grid;grid-template-columns:90px 1fr auto;gap:7px;align-items:end}.market-instance-list{display:grid;gap:9px;padding-bottom:76px}#marketInstanceCopies .market-instance-selectable{width:100%;grid-template-columns:30px 64px minmax(0,1fr)!important;text-align:left!important;color:inherit!important;cursor:pointer!important}.market-instance-selectable .instance-check{width:22px;height:22px;display:grid;place-items:center;border:1px solid #3a4d64;border-radius:5px;background:#07101a;color:#66f0bb;font-weight:950}.market-instance-selectable.selected{border-color:rgba(75,225,178,.65)!important;background:linear-gradient(90deg,rgba(32,122,93,.18),#0a111c)!important;box-shadow:inset 0 0 0 1px rgba(75,225,178,.10)!important}.market-instance-footer{position:sticky;bottom:-14px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -14px -14px;padding:12px 14px;background:linear-gradient(transparent,#08101a 25%,#08101a 100%);border-top:1px solid rgba(255,255,255,.07)}.market-instance-footer>span{color:#8ea0b7;font-size:9px;font-weight:900;letter-spacing:.08em}@media(max-width:900px){.market-instance-toolbar{grid-template-columns:1fr 1fr}.market-bulk-select{grid-column:1/-1}}@media(max-width:620px){.market-instance-toolbar{grid-template-columns:1fr}.market-bulk-select{grid-column:auto;grid-template-columns:80px 1fr}.market-bulk-select button:last-child{grid-column:1/-1}}


/* v0.15.64 — point-anchored graph hover. */
.time-graph-tooltip{
  transition:opacity .08s ease!important;
}
.time-graph-hover-point{
  position:fixed;
  z-index:11999;
  width:15px;
  height:15px;
  border:2px solid #eafaff;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  background:rgba(87,210,255,.22);
  box-shadow:0 0 0 4px rgba(77,205,255,.14),0 0 17px rgba(98,222,255,.75);
}
.time-graph-hover-point.hidden{display:none!important}

/* Market instance controls use the same dark/select language as Collection. */
.market-instance-toolbar{
  grid-template-columns:minmax(315px,.9fr) minmax(230px,1fr) minmax(230px,1fr)!important;
  align-items:end!important;
  gap:12px!important;
  padding:12px!important;
}
.market-instance-toolbar>label,
.market-bulk-select label{
  color:#69778d!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
}
.market-instance-toolbar select,
.market-instance-toolbar input[type="number"]{
  height:36px!important;
  padding:0 32px 0 11px!important;
  border:1px solid #2b394f!important;
  border-radius:6px!important;
  background:#09101a!important;
  color:#dce5f3!important;
  font-size:9px!important;
  font-weight:850!important;
  outline:none!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.01)!important;
}
.market-instance-toolbar select:focus,
.market-instance-toolbar input[type="number"]:focus{
  border-color:#52789f!important;
  box-shadow:0 0 0 2px rgba(78,164,232,.12)!important;
}
.market-bulk-select{
  grid-template-columns:82px minmax(145px,190px) auto!important;
  justify-content:start!important;
  align-items:end!important;
  gap:8px!important;
}
.market-bulk-select label{width:82px!important}
.market-bulk-select button{
  height:36px!important;
  min-width:145px!important;
  padding:0 14px!important;
}
.market-clear-instance-selection{
  min-width:72px!important;
  width:auto!important;
}

/* Exact-copy coin ring + art share one center. */
#marketInstanceCopies .market-instance-selectable .instance-icon{
  position:relative!important;
  width:60px!important;
  height:60px!important;
  min-width:60px!important;
  min-height:60px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  margin:0!important;
  border:1px solid rgba(190,218,244,.58)!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  transform:none!important;
}
#marketInstanceCopies .market-instance-selectable .instance-icon::before,
#marketInstanceCopies .market-instance-selectable .instance-icon::after{
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center!important;
}
#marketInstanceCopies .market-instance-selectable .instance-icon img,
#marketInstanceCopies .market-instance-selectable .instance-icon .coin-asset,
#marketInstanceCopies .market-instance-selectable .instance-icon .instance-coin-model{
  position:static!important;
  display:block!important;
  width:52px!important;
  height:52px!important;
  max-width:52px!important;
  max-height:52px!important;
  margin:auto!important;
  inset:auto!important;
  transform:none!important;
  object-fit:contain!important;
  transform-origin:center!important;
}

/* The selected bundle preview uses the same concentric alignment. */
.market-chosen-instance .instance-icon{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:48px!important;
  height:48px!important;
  padding:0!important;
  border:1px solid rgba(190,218,244,.48)!important;
  border-radius:50%!important;
  box-sizing:border-box!important
}
.market-chosen-instance .instance-icon img{
  position:static!important;
  width:42px!important;
  height:42px!important;
  margin:auto!important;
  transform:none!important;
  object-fit:contain!important
}

@media(max-width:1050px){
  .market-instance-toolbar{grid-template-columns:1fr 1fr!important}
  .market-bulk-select{grid-column:1/-1!important}
}
@media(max-width:680px){
  .market-instance-toolbar{grid-template-columns:1fr!important}
  .market-bulk-select{grid-column:auto!important;grid-template-columns:78px 1fr auto!important}
}


/* v0.15.64 — graph hover precision + clearer selected point */
.time-graph-hover-point{
  width:17px!important;
  height:17px!important;
  border-width:2px!important;
  background:rgba(96,225,255,.28)!important;
  box-shadow:
    0 0 0 4px rgba(77,205,255,.16),
    0 0 0 7px rgba(77,205,255,.06),
    0 0 20px rgba(98,222,255,.92)!important;
}


/* v0.15.64 — Server telemetry relocation, instance footer stacking, unified scrollbars. */

/* The multi-select footer owns a fixed visual lane inside the scrollable modal.
   Rows stop above it instead of sliding underneath it. */
#marketInstanceCopies{
  position:relative!important;
  overflow:visible!important;
}
#marketInstanceCopies .market-instance-list{
  position:relative!important;
  z-index:1!important;
  padding-bottom:112px!important;
}
#marketInstanceCopies .market-instance-footer{
  position:sticky!important;
  bottom:0!important;
  z-index:30!important;
  min-height:70px!important;
  margin:0!important;
  padding:14px 16px!important;
  background:
    linear-gradient(180deg,rgba(8,16,26,.97),rgba(6,13,22,.995))!important;
  border-top:1px solid rgba(120,198,255,.23)!important;
  box-shadow:
    0 -14px 28px rgba(0,0,0,.42),
    0 -1px 0 rgba(255,255,255,.025) inset!important;
  backdrop-filter:blur(14px)!important;
}
#marketInstanceCopies .market-instance-footer::before{
  content:"";
  position:absolute;
  left:0;right:0;top:-18px;
  height:18px;
  background:linear-gradient(180deg,transparent,rgba(8,16,26,.93));
  pointer-events:none;
}
#marketInstanceCopies .market-instance-footer .primary{
  position:relative!important;
  z-index:2!important;
}

/* Keep the modal's scroll area above the sticky footer and prevent the last card from clipping. */
.market-instance-modal-card{
  padding-bottom:0!important;
}
.market-instance-modal-card #marketInstanceCopies{
  padding-bottom:0!important;
}
.market-instance-modal-card .market-instance-list>.market-instance-selectable:last-child{
  margin-bottom:8px!important;
}

/* Server Info owns the local economy telemetry now. */
.server-info-view .economy-card{
  margin:0 0 24px!important;
}

/* Shared game scrollbar skin. */
:root{
  scrollbar-color:#456580 #08111c;
  scrollbar-width:thin;
}
*{
  scrollbar-width:thin;
  scrollbar-color:#456580 #08111c;
}
*::-webkit-scrollbar{
  width:10px;
  height:10px;
}
*::-webkit-scrollbar-track{
  background:#07101a;
  border-left:1px solid rgba(255,255,255,.025);
  border-radius:10px;
}
*::-webkit-scrollbar-thumb{
  background:
    linear-gradient(180deg,#4f7897,#2d506d);
  border:2px solid #07101a;
  border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(153,219,255,.12);
}
*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#6b9ec2,#3d6788);
}
*::-webkit-scrollbar-thumb:active{
  background:linear-gradient(180deg,#7db9db,#4c7da0);
}
*::-webkit-scrollbar-corner{
  background:#07101a;
}

/* Slightly brighter scrollbars on high-energy commerce pages. */
body[data-active-view="market"] *::-webkit-scrollbar-thumb,
body[data-active-view="shop"] *::-webkit-scrollbar-thumb,
body[data-active-view="gacha"] *::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#59a9ce,#4a5e9e);
  box-shadow:inset 0 0 0 1px rgba(173,233,255,.16),0 0 10px rgba(81,194,255,.08);
}


/* v0.15.64 — graph hover lives in the chart's own coordinate system. */
.time-graph-tooltip.local{
  position:absolute!important;
  z-index:25!important;
}
.time-graph-hover-point.local{
  position:absolute!important;
  z-index:24!important;
}
.market-chart-stage,
.profile-history-stage,
.server-chart-stage{
  position:relative!important;
  overflow:hidden!important;
}

/* Graph tab is a fixed panel, never its own scroll surface. */
body[data-active-view="market"] #marketGraphPanel,
html[data-auto-fit="on"] body[data-active-view="market"] #marketGraphPanel{
  overflow:hidden!important;
  max-height:none!important;
  height:auto!important;
}

/* v0.15.64 — type selection and exact-instance selection are two distinct screens. */
#marketInstanceModal.showing-copies .market-instance-modal-card>.eyebrow,
#marketInstanceModal.showing-copies .market-instance-modal-card>h2,
#marketInstanceModal.showing-copies .market-instance-modal-card>p.section-copy,
#marketInstanceModal.showing-copies #marketInstanceTypeGrid{
  display:none!important;
}
#marketInstanceModal.showing-copies .market-instance-modal-card{
  width:min(1120px,calc(100vw - 42px))!important;
  max-height:min(88vh,820px)!important;
}
#marketInstanceModal.showing-copies #marketInstanceCopies{
  position:relative!important;
  inset:auto!important;
  z-index:1!important;
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:14px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
#marketInstanceModal.showing-copies .market-instance-copy-head{
  flex:0 0 auto!important;
  position:relative!important;
  top:auto!important;
}
#marketInstanceModal.showing-copies .market-instance-toolbar{
  flex:0 0 auto!important;
  position:relative!important;
  top:auto!important;
}
#marketInstanceModal.showing-copies .market-instance-list{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:4px 8px 18px 0!important;
  margin:0!important;
}
#marketInstanceModal.showing-copies .market-instance-footer{
  flex:0 0 auto!important;
  position:relative!important;
  bottom:auto!important;
  margin:8px 0 0!important;
  z-index:5!important;
}


/* v0.15.64 — instance selector: only the instance list scrolls.
   Header, tools, selected count, and USE button remain permanently visible. */
#marketInstanceModal.showing-copies .market-instance-modal-card{
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  height:min(88vh,820px)!important;
  max-height:min(88vh,820px)!important;
}
#marketInstanceModal.showing-copies #marketInstanceCopies{
  flex:1 1 0!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}
#marketInstanceModal.showing-copies .market-instance-copy-head,
#marketInstanceModal.showing-copies .market-instance-toolbar{
  flex:0 0 auto!important;
}
#marketInstanceModal.showing-copies .market-instance-list{
  flex:1 1 0!important;
  height:0!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:4px 8px 12px 0!important;
  margin:0!important;
  scrollbar-gutter:stable!important;
}
#marketInstanceModal.showing-copies .market-instance-footer{
  flex:0 0 auto!important;
  position:relative!important;
  inset:auto!important;
  bottom:auto!important;
  min-height:64px!important;
  margin:8px 0 0!important;
  padding:12px 14px!important;
  z-index:10!important;
  background:linear-gradient(180deg,#0a1420,#07101a)!important;
  border:1px solid rgba(112,190,240,.20)!important;
  border-radius:9px!important;
  box-shadow:0 -8px 22px rgba(0,0,0,.22)!important;
}
#marketInstanceModal.showing-copies .market-instance-footer::before{
  display:none!important;
}


/* v0.15.64 — seller-side Market sale notifications. */
.market-sale-notifications{
  position:fixed;
  z-index:14000;
  right:18px;
  top:86px;
  width:min(330px,calc(100vw - 32px));
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.market-sale-popup{
  width:100%;
  min-height:94px;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid rgba(91,219,180,.42);
  border-radius:10px;
  background:
    radial-gradient(circle at 8% 50%,rgba(54,213,165,.14),transparent 35%),
    linear-gradient(145deg,rgba(10,25,31,.98),rgba(7,14,23,.985));
  box-shadow:0 18px 42px rgba(0,0,0,.46),0 0 24px rgba(62,215,170,.09);
  opacity:0;
  transform:translateX(calc(100% + 34px));
  transition:transform .32s cubic-bezier(.2,.82,.28,1),opacity .25s ease;
  overflow:hidden;
}
.market-sale-popup::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 0 42%,rgba(125,255,213,.07) 50%,transparent 58%);
  transform:translateX(-100%);
  animation:marketSaleSheen 1.1s ease .22s 1;
}
.market-sale-popup.show{opacity:1;transform:translateX(0)}
.market-sale-popup.leaving{opacity:0;transform:translateX(calc(100% + 34px))}
.market-sale-popup-icon{
  width:60px;height:60px;display:grid;place-items:center;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.42));
}
.market-sale-popup-coin{width:56px!important;height:56px!important;object-fit:contain!important}
.market-sale-popup-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;gap:2px}
.market-sale-popup-copy small{font-size:8px;font-weight:950;letter-spacing:.16em;color:#65efbd}
.market-sale-popup-copy strong{font-size:14px;color:#f2f7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.market-sale-popup-copy span{font-size:12px;font-weight:900;color:#ffd65c}
.market-sale-popup-copy em{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.08em;color:#8494aa}
@keyframes marketSaleSheen{to{transform:translateX(100%)}}
@media(max-width:0px){
  .market-sale-popup{transition:opacity .15s ease!important;transform:none!important}
  .market-sale-popup::after{animation:none!important}
}


/* v0.15.64 — compact Market bulk controls + shared acquired-date filters. */
#marketInstanceModal.showing-copies .market-instance-toolbar{
  grid-template-columns:minmax(265px,330px) minmax(220px,1fr) minmax(220px,1fr)!important;
  gap:10px!important;
}
#marketInstanceModal.showing-copies .market-bulk-select{
  grid-template-columns:66px 130px 68px!important;
  gap:7px!important;
  min-width:0!important;
  align-items:end!important;
}
#marketInstanceModal.showing-copies .market-bulk-select label{width:66px!important;min-width:0!important}
#marketInstanceModal.showing-copies .market-bulk-select button{
  min-width:0!important;width:100%!important;height:36px!important;padding:0 8px!important;
  white-space:nowrap!important;font-size:8.5px!important;line-height:1!important;letter-spacing:.015em!important;
  overflow:hidden!important;text-overflow:clip!important
}
#marketInstanceModal.showing-copies [data-market-select-top]{min-width:130px!important}
#marketInstanceModal.showing-copies .market-clear-instance-selection{min-width:68px!important}

.instance-date-filter{
  flex:0 0 auto!important;display:grid!important;
  grid-template-columns:minmax(190px,.75fr) minmax(210px,1fr) minmax(210px,1fr)!important;
  gap:10px!important;align-items:end!important;padding:10px 12px!important;margin:0 0 10px!important;
  border:1px solid rgba(105,190,240,.13)!important;border-radius:8px!important;background:rgba(7,15,25,.82)!important
}
.instance-date-filter label{
  display:grid!important;gap:5px!important;color:#69778d!important;font-size:8px!important;
  font-weight:900!important;letter-spacing:.11em!important
}
.instance-date-filter select,.instance-date-filter input{
  width:100%!important;height:36px!important;min-width:0!important;padding:0 10px!important;
  border:1px solid #2b394f!important;border-radius:6px!important;background:#09101a!important;
  color:#dce5f3!important;font-size:9px!important;font-weight:800!important;color-scheme:dark!important;outline:none!important
}
.instance-date-filter select:focus,.instance-date-filter input:focus{
  border-color:#52789f!important;box-shadow:0 0 0 2px rgba(78,164,232,.12)!important
}
.collection-instance-date-filter{margin:0 0 12px!important}
#coinDetailModal .instance-date-filter{margin:0 0 12px!important}
@media(max-width:920px){
  #marketInstanceModal.showing-copies .market-instance-toolbar{grid-template-columns:1fr 1fr!important}
  #marketInstanceModal.showing-copies .market-bulk-select{grid-column:1/-1!important}
  .instance-date-filter{grid-template-columns:1fr 1fr!important}
  .instance-date-filter>label:first-child{grid-column:1/-1!important}
}
@media(max-width:620px){
  .instance-date-filter{grid-template-columns:1fr!important}
  .instance-date-filter>label:first-child{grid-column:auto!important}
}


/* v0.15.64 — date/time range controls only appear after choosing a date filter. */
.instance-date-filter{
  grid-template-columns:minmax(190px,260px)!important;
}
.instance-date-filter.date-filter-active{
  grid-template-columns:minmax(190px,260px) minmax(0,1fr)!important;
}
.instance-date-range{
  display:grid;
  grid-template-columns:repeat(2,minmax(210px,1fr));
  gap:10px;
  align-items:end;
}
.instance-date-range.hidden{
  display:none!important;
}
.instance-date-range>label.hidden{
  display:none!important;
}
@media(max-width:920px){
  .instance-date-filter,
  .instance-date-filter.date-filter-active{
    grid-template-columns:1fr!important;
  }
  .instance-date-range{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:620px){
  .instance-date-range{
    grid-template-columns:1fr;
  }
}


/* v0.15.64 — DATE / TIME RANGE lives under FILTER. */
.instance-date-filter,.instance-date-range,.collection-instance-date-filter{display:none!important}
.instance-time-range-editor{
  flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;
  padding:11px 12px;margin:0 0 10px;border:1px solid rgba(105,190,240,.15);
  border-radius:8px;background:rgba(7,15,25,.86)
}
.partial-time-block{display:grid;gap:6px;min-width:0}
.partial-time-block>small{color:#6f8199;font-size:8px;font-weight:950;letter-spacing:.12em}
.partial-time-fields{display:grid;grid-template-columns:58px 58px 82px 58px 62px 64px;gap:6px;align-items:center}
.partial-time-fields select,.partial-time-fields input{
  width:100%;height:34px;min-width:0;padding:0 7px;border:1px solid #2b394f;border-radius:6px;
  background:#09101a;color:#dce5f3;font-size:8.5px;font-weight:850;color-scheme:dark;outline:none
}
.partial-time-fields select:focus,.partial-time-fields input:focus{border-color:#52789f;box-shadow:0 0 0 2px rgba(78,164,232,.12)}
.instance-time-range-hint{grid-column:1/-1;color:#617189;font-size:8px;line-height:1.4;letter-spacing:.02em}
#coinDetailModal #collectionInstanceTimeRange{margin:0 0 12px}
#coinDetailModal .modal-toolbar{gap:12px}
#coinDetailModal .modal-toolbar>label{min-width:200px}
@media(max-width:1000px){.instance-time-range-editor{grid-template-columns:1fr}.instance-time-range-hint{grid-column:auto}}
@media(max-width:650px){.partial-time-fields{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* v0.15.64 — distinguish acquired vs minted time-range filters. */
.instance-time-range-title{
  grid-column:1/-1;
  color:#9fb9d4;
  font-size:8px;
  font-weight:950;
  letter-spacing:.14em;
  margin-bottom:-2px;
}


/* v0.15.64 — clean ordinary instances; unique/modifier metadata lives on the right. */
.instance-row{
  position:relative;
}
.instance-main{
  min-width:0;
}
.instance-main>strong{
  display:block;
}
.instance-special-name{
  color:#ffd85f!important;
  text-shadow:0 0 10px rgba(255,209,73,.16);
}
.instance-extra-info{
  margin-left:auto;
  min-width:150px;
  max-width:230px;
  display:grid;
  gap:5px;
  padding:5px 8px 5px 14px;
  border-left:1px solid rgba(255,214,92,.18);
  text-align:right;
  align-self:stretch;
  align-content:center;
}
.instance-extra-info>div{
  display:flex;
  justify-content:flex-end;
  align-items:baseline;
  gap:7px;
}
.instance-extra-info small{
  color:#80775d;
  font-size:7px;
  font-weight:900;
  letter-spacing:.10em;
  white-space:nowrap;
}
.instance-extra-info strong{
  color:#e8c85f;
  font-size:8px;
  font-weight:900;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.market-instance-selectable .instance-extra-info{
  padding-right:4px;
}
#coinDetailModal .instance-row .instance-extra-info + button{
  margin-left:10px;
}
@media(max-width:760px){
  .instance-extra-info{
    min-width:115px;
    max-width:160px;
  }
  .instance-extra-info>div{
    display:grid;
    gap:1px;
  }
}


/* v0.15.64 — robust match-end composition, interactive notifications, queue status, centered slots. */
#victoryOverlay.victory-overlay{
  place-items:center!important;overflow:hidden!important;
  padding:clamp(16px,3vmin,34px)!important;box-sizing:border-box!important
}
#victoryOverlay .victory-copy{
  position:relative!important;width:min(860px,calc(100% - 32px))!important;
  max-width:min(860px,calc(100% - 32px))!important;min-width:0!important;
  margin:auto!important;padding:clamp(18px,3vmin,34px) clamp(28px,5vw,64px)!important;
  box-sizing:border-box!important;overflow:visible!important;transform-origin:center center!important
}
#victoryOverlay #victoryTitle,#victoryOverlay.risk-allin #victoryTitle{
  display:block!important;position:relative!important;width:100%!important;max-width:100%!important;
  min-width:0!important;box-sizing:border-box!important;margin:.04em auto .08em!important;
  padding:.03em .16em .12em!important;font-size:min(var(--result-title-size,78px),9vmin)!important;
  line-height:1.04!important;letter-spacing:.02em!important;text-align:center!important;
  white-space:nowrap!important;overflow:visible!important;text-rendering:geometricPrecision!important
}
#victoryOverlay.loss #victoryTitle{letter-spacing:.012em!important}
#victoryOverlay .victory-copy>*{max-width:100%!important;text-align:center!important;box-sizing:border-box!important}
@media(max-width:620px),(max-height:620px){
  #victoryOverlay .victory-copy{width:calc(100% - 18px)!important;max-width:calc(100% - 18px)!important;padding:14px 22px!important}
  #victoryOverlay #victoryTitle,#victoryOverlay.risk-allin #victoryTitle{font-size:min(var(--result-title-size,58px),8vmin)!important}
}

.queue-floating-popup{
  position:fixed;right:18px;bottom:22px;z-index:13950;width:min(300px,calc(100vw - 36px));min-height:78px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:12px 15px;
  border:1px solid rgba(88,184,255,.42);border-radius:10px;
  background:linear-gradient(145deg,rgba(8,20,34,.985),rgba(7,12,22,.985));
  box-shadow:0 16px 42px rgba(0,0,0,.42),0 0 22px rgba(69,167,255,.11);
  color:#eef8ff;text-align:left;cursor:pointer;pointer-events:auto;
  transition:border-color .2s ease,box-shadow .2s ease,transform .18s ease
}
.queue-floating-popup:hover{transform:translateY(-2px);box-shadow:0 19px 48px rgba(0,0,0,.48),0 0 28px rgba(69,167,255,.18)}
.queue-floating-popup small{font-size:8px;font-weight:950;letter-spacing:.16em;color:#76cfff}
.queue-floating-popup strong{font-size:14px;letter-spacing:.055em}
.queue-floating-popup span{font-size:8px;letter-spacing:.1em;color:#8294aa}
.queue-floating-popup.match-found{
  border-color:rgba(92,244,164,.92);
  box-shadow:0 16px 46px rgba(0,0,0,.48),0 0 0 1px rgba(92,244,164,.22),0 0 34px rgba(62,238,153,.28);
  animation:queueFloatingFound 1s ease-in-out infinite alternate
}
.queue-floating-popup.match-found small,.queue-floating-popup.match-found span{color:#75f0b5}
.queue-floating-popup.hidden{display:none!important}
@keyframes queueFloatingFound{from{filter:brightness(1)}to{filter:brightness(1.18)}}

.task-complete-stack,.market-sale-notifications{pointer-events:none}
.task-complete-popup,.market-sale-popup{pointer-events:auto!important;cursor:pointer!important}
.task-complete-popup:hover,.market-sale-popup:hover{filter:brightness(1.12)}
.task-complete-popup:focus-visible,.market-sale-popup:focus-visible,.queue-floating-popup:focus-visible{outline:2px solid #8ee5ff;outline-offset:3px}

#view-casino .slot-reels{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:center!important;justify-items:stretch!important
}
#view-casino .slot-reels span{display:grid!important;place-items:center!important;text-align:center!important;line-height:1!important}
#view-casino .slot-symbol{
  width:100%!important;height:150px!important;display:grid!important;place-items:center!important;
  text-align:center!important;line-height:1!important;box-sizing:border-box!important
}
#view-casino .slot-symbol-stopped{position:absolute!important;inset:0!important;height:100%!important}


/* v0.15.64 — compact custom TOP N number steppers. */
#marketInstanceModal.showing-copies .market-top-n-control{
  position:relative!important;
  width:66px!important;
  height:36px!important
}
#marketInstanceModal.showing-copies #marketBulkSelectCount{
  width:100%!important;
  height:36px!important;
  padding:0 25px 0 10px!important;
  appearance:textfield!important;
  -moz-appearance:textfield!important
}
#marketInstanceModal.showing-copies #marketBulkSelectCount::-webkit-inner-spin-button,
#marketInstanceModal.showing-copies #marketBulkSelectCount::-webkit-outer-spin-button{
  -webkit-appearance:none!important;
  appearance:none!important;
  margin:0!important
}
#marketInstanceModal.showing-copies .market-top-n-steppers{
  position:absolute!important;
  right:4px!important;
  top:4px!important;
  bottom:4px!important;
  width:17px!important;
  display:grid!important;
  grid-template-rows:1fr 1fr!important;
  gap:1px!important;
  border-left:1px solid rgba(112,144,178,.16)!important;
  padding-left:3px!important;
  box-sizing:border-box!important
}
#marketInstanceModal.showing-copies .market-top-n-steppers button{
  all:unset!important;
  display:grid!important;
  place-items:center!important;
  width:13px!important;
  min-width:13px!important;
  height:auto!important;
  padding:0!important;
  color:rgba(169,190,214,.42)!important;
  background:transparent!important;
  border-radius:2px!important;
  font-size:7px!important;
  line-height:1!important;
  cursor:pointer!important;
  transition:color .12s ease,background .12s ease!important
}
#marketInstanceModal.showing-copies .market-top-n-steppers button:hover{
  color:rgba(211,229,246,.86)!important;
  background:rgba(91,145,190,.10)!important
}


/* v0.15.64 — live server reachability indicator. */
#serverConnectionStatus.server-dot{
  transition:color .18s ease,text-shadow .18s ease,opacity .18s ease
}
#serverConnectionStatus.server-dot.online{
  color:#61e6a6!important;
  text-shadow:0 0 10px rgba(72,230,157,.28)!important
}
#serverConnectionStatus.server-dot.offline{
  color:#ff6f78!important;
  text-shadow:0 0 10px rgba(255,82,96,.24)!important
}
#serverConnectionStatus.server-dot.checking{
  color:#8292a8!important;
  text-shadow:none!important;
  opacity:.8!important
}


/* v0.15.64 — per-unit market pricing + special-instance warning. */
#marketSellPanel .market-unit-price-row{
  display:grid!important;
  grid-template-columns:minmax(180px,1fr) minmax(150px,.8fr) minmax(190px,1fr)!important;
  align-items:end!important;
  gap:12px!important
}
#marketSellPanel .market-unit-price-row>div{
  min-height:58px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  gap:5px!important
}
#marketSellPanel .market-unit-price-row>div small{
  color:#71839a!important;font-size:8px!important;font-weight:900!important;letter-spacing:.10em!important
}
#marketSellPanel .market-unit-price-row>div strong{
  font-size:16px!important;line-height:36px!important;white-space:nowrap!important
}
.market-unique-mix-warning{
  margin:10px 0 12px!important;padding:10px 12px!important;
  border:1px solid rgba(244,190,77,.42)!important;border-radius:7px!important;
  background:linear-gradient(90deg,rgba(121,82,18,.18),rgba(54,39,12,.08))!important;
  display:grid!important;gap:4px!important
}
.market-unique-mix-warning strong{color:#f3c76b!important;font-size:9px!important;letter-spacing:.08em!important}
.market-unique-mix-warning span{color:#b8a47e!important;font-size:9px!important;line-height:1.45!important}
.market-unique-mix-warning.hidden{display:none!important}
@media(max-width:820px){
  #marketSellPanel .market-unit-price-row{grid-template-columns:1fr 1fr!important}
  #marketSellPanel .market-unit-price-row>label{grid-column:1/-1}
}

/* v0.15.66 — Casual mode selector + scalable team match presentation */
.casual-mode-select{width:100%;padding:4px 0 18px}.casual-select-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.casual-select-head h2{margin:4px 0 5px;font-size:32px;letter-spacing:.06em}.casual-select-head p{margin:0;color:var(--muted);max-width:720px}.casual-format-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.casual-format-card{min-height:240px;padding:22px;display:flex;flex-direction:column;position:relative;overflow:hidden}.casual-format-card.available{border-color:rgba(113,161,255,.28)}.casual-format-card.team-format{background:linear-gradient(145deg,rgba(18,37,68,.96),rgba(9,14,24,.98))}.casual-format-card.event-format{background:linear-gradient(145deg,rgba(48,31,68,.8),rgba(9,14,24,.98))}.casual-format-card.locked{opacity:.72}.casual-format-card h3{font-size:34px;margin:12px 0 8px;letter-spacing:.06em}.casual-format-card p{color:var(--muted);line-height:1.55;margin:0;max-width:620px}.format-badge{font-size:10px;font-weight:950;letter-spacing:.17em;color:var(--accent)}.format-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:22px}.format-footer span{font-size:11px;font-weight:900;letter-spacing:.1em;color:var(--muted)}.format-footer strong{color:var(--text)}
.team-competitor{display:flex;flex-direction:column;justify-content:center}.team-scoreline{display:flex;align-items:center;gap:12px;margin:2px 0 5px}.team-scoreline>span{font-size:10px;font-weight:950;letter-spacing:.14em;color:var(--muted)}.opponent-scoreline{justify-content:flex-end}.match-team-roster{display:flex;flex-direction:column;gap:4px;min-width:0}.team-player-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:4px 7px;border:1px solid rgba(255,255,255,.07);border-radius:7px;background:rgba(4,8,14,.36)}.team-player-row.self{border-color:rgba(104,174,255,.34);background:rgba(40,89,153,.13)}.opponent-roster .team-player-row{flex-direction:row-reverse}.team-player-identity{display:flex;align-items:baseline;gap:7px;min-width:0}.opponent-roster .team-player-identity{flex-direction:row-reverse}.team-player-name{font-size:12px!important;font-weight:950!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}.team-player-identity small{font-size:8px!important;letter-spacing:.08em;color:var(--muted)}.team-player-call{min-width:54px;padding:3px 5px;border-radius:5px;text-align:center;font-size:8px;font-weight:950;letter-spacing:.07em;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}.team-player-call.call-heads{color:#d8e9ff;border-color:rgba(106,169,255,.36)}.team-player-call.call-tails{color:#ffdce2;border-color:rgba(255,103,126,.34)}.team-player-call.call-win{box-shadow:0 0 12px rgba(103,239,172,.18);color:var(--good)}.team-player-call.call-loss{color:var(--bad)}.legacy-call-summary{margin-top:4px}.team-competitor .match-username.hidden,.team-competitor small.hidden{display:none!important}
@media(max-width:860px){.casual-format-grid{grid-template-columns:1fr}.casual-select-head{align-items:flex-start;flex-direction:column}.team-player-name{max-width:100px}.team-player-row{padding:3px 4px}.team-player-call{min-width:44px;font-size:7px}}
.spectator-player{display:flex;flex-direction:column;gap:6px}.spectator-team-member{display:flex;flex-direction:column;gap:1px}.spectator-team-member button,.spectator-team-member strong{font-weight:950}.spectator-team-member small{color:var(--muted);font-size:9px}

/* v0.15.68 parties, notifications, team queue preview */
.notification-btn{position:relative;min-width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}.notification-badge{position:absolute;right:-5px;top:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:#fff;color:#090b10;font-size:10px;font-weight:900;display:grid;place-items:center}.notification-popover{position:fixed;z-index:130;right:22px;top:68px;width:min(390px,calc(100vw - 32px));max-height:520px;overflow:hidden;background:rgba(10,13,20,.98);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 22px 60px rgba(0,0,0,.45)}.notification-head,.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.notification-list{display:grid;gap:8px}.notification-row{display:flex;justify-content:space-between;gap:10px;padding:11px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.025)}.notification-row.unread{background:rgba(255,255,255,.07)}.notification-row>div{display:grid;gap:3px}.notification-row span{font-size:12px;color:var(--muted)}.notification-row small{font-size:10px;opacity:.55}.notification-all-list{max-height:65vh;overflow:auto;padding-right:4px}.notification-modal-card,.party-modal-card{width:min(680px,calc(100vw - 32px));max-height:85vh;overflow:auto}.party-summary{display:flex;align-items:center;gap:9px;margin-top:10px;padding:9px 11px;border:1px solid var(--line);border-radius:10px}.party-summary span{flex:1;color:var(--muted);font-size:12px}.party-members{display:grid;gap:8px;margin:12px 0}.party-member{display:flex;justify-content:space-between;padding:11px;border:1px solid var(--line);border-radius:10px}.party-member span{color:var(--muted);font-size:11px}.party-invite-row{display:flex;gap:8px;margin:14px 0}.party-invite-row input{flex:1;min-width:0}.queue-team-preview{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;width:min(720px,100%);margin:14px auto}.queue-team-preview>div{padding:10px;border:1px solid var(--line);border-radius:12px}.queue-team-preview>span{align-self:center;font-weight:900;opacity:.55}.queue-team-list{display:grid;gap:6px;margin-top:7px}.queue-team-list span{padding:7px 8px;border-radius:8px;background:rgba(255,255,255,.05);font-size:12px;font-weight:800}.queue-team-list span.empty{opacity:.4;border:1px dashed var(--line);background:transparent}.queue-bot-vote{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:12px auto}.queue-bot-vote span{font-size:12px;color:var(--muted)}
.party-search-results{display:grid;gap:7px;margin-bottom:12px}.party-search-player{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:9px}.party-search-player>div{display:grid;gap:2px}.party-search-player small{color:var(--muted)}

/* v0.15.69 — centered standalone overlays for Party / Notifications */
.standalone-modal{
  position:fixed;
  inset:0;
  z-index:145;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(2,4,11,.86);
  backdrop-filter:blur(10px);
  overflow:auto;
}
.standalone-modal>.card{
  position:relative;
  width:min(680px,100%);
  max-height:min(85vh,760px);
  overflow:auto;
  margin:auto;
  box-shadow:0 40px 120px rgba(0,0,0,.78),0 0 70px rgba(103,79,255,.10);
}
.party-modal-card .modal-head,.notification-modal-card .modal-head{
  display:flex;
  grid-template-columns:none;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:14px;
  margin-bottom:14px;
}
.party-modal-card .modal-head h2,.notification-modal-card .modal-head h2{
  margin:4px 0 0;
  font-size:30px;
}
.party-modal-card{padding:22px;}
.party-modal-card>small{display:block;color:var(--muted);line-height:1.5;margin:4px 0 14px;}
.party-invite-row input{
  background:#09101a;
  color:var(--text);
  border:1px solid #34425a;
  border-radius:8px;
  padding:11px 12px;
  outline:none;
}
.party-invite-row input:focus{border-color:#6b7d99;box-shadow:0 0 0 3px rgba(107,125,153,.12);}
@media(max-width:640px){
  .standalone-modal{padding:12px;}
  .standalone-modal>.card{max-height:92vh;}
  .party-invite-row{flex-direction:column;}
  .party-invite-row .secondary{width:100%;}
}


/* v0.15.70 — Party username autocomplete results */
.party-search-results{max-height:236px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-gutter:stable;}
.party-search-results::-webkit-scrollbar{width:8px}.party-search-results::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:999px}.party-search-results::-webkit-scrollbar-track{background:transparent}
.party-search-player{min-height:54px;background:rgba(255,255,255,.025);transition:border-color .12s ease,background .12s ease}
.party-search-player:hover{background:rgba(255,255,255,.05);border-color:rgba(124,161,220,.32)}
.party-search-identity{min-width:0}.party-search-identity strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.party-search-hint,.party-search-empty{padding:14px 10px;color:var(--muted);font-size:12px;text-align:center;border:1px dashed rgba(255,255,255,.09);border-radius:9px}.party-search-results .mini{flex:0 0 auto}

/* v0.15.73 party leader controls */
.party-member>div{display:grid;gap:3px;min-width:0}.party-kick-btn{align-self:center;flex:0 0 auto}


/* v0.15.74 — unified persistent notification feed + animated event toasts */
.notification-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center}
.notification-row-icon{width:28px;height:28px;border-radius:8px;display:grid!important;place-items:center;font-weight:1000;background:rgba(255,255,255,.06);color:#dbe7ff}
.notification-row-copy{min-width:0}.notification-row-copy strong,.notification-row-copy span,.notification-row-copy small{display:block}
.notification-kind-market_sale .notification-row-icon{color:#75efbd;background:rgba(80,230,174,.1)}
.notification-kind-pinned_market_listing .notification-row-icon{color:#ffd867;background:rgba(255,205,78,.1)}
.notification-kind-quest_complete .notification-row-icon,.notification-kind-contract_complete .notification-row-icon{color:#ffe078;background:rgba(255,211,80,.1)}
.notification-kind-party_invite .notification-row-icon{color:#c7a8ff;background:rgba(162,112,255,.12)}
.notification-kind-dm_message .notification-row-icon{color:#8de8ff;background:rgba(77,204,255,.1)}
.notification-kind-friend_invite .notification-row-icon{color:#9dbdff;background:rgba(91,140,255,.1)}
.notification-toast{position:relative;width:100%;min-height:92px;display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(129,154,196,.4);border-radius:11px;background:linear-gradient(145deg,rgba(10,17,29,.985),rgba(7,12,20,.99));box-shadow:0 18px 42px rgba(0,0,0,.5),0 0 28px rgba(97,142,220,.09);opacity:0;transform:translateX(calc(100% + 34px)) scale(.97);transition:transform .34s cubic-bezier(.2,.82,.28,1),opacity .25s ease;overflow:hidden;pointer-events:auto;cursor:pointer}
.notification-toast.show{opacity:1;transform:translateX(0) scale(1)}.notification-toast.leaving{opacity:0;transform:translateX(calc(100% + 28px)) scale(.98)}
.notification-toast-symbol{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:1000;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.notification-toast-coin{width:54px;height:54px;display:grid;place-items:center}.notification-toast-coin img{width:52px;height:52px;object-fit:contain}
.notification-toast-copy{min-width:0}.notification-toast-copy small{display:block;font-size:8px;letter-spacing:.16em;font-weight:1000;color:#9eb1cf}.notification-toast-copy strong{display:block;margin:4px 0;font-size:12px;line-height:1.35;color:#f7faff}.notification-toast-copy span{display:block;font-size:8px;letter-spacing:.1em;color:#718096;font-weight:900}
.notification-toast-market_sale{border-color:rgba(91,219,180,.5);box-shadow:0 18px 42px rgba(0,0,0,.5),0 0 32px rgba(62,215,170,.12)}.notification-toast-market_sale::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 0 42%,rgba(125,255,213,.09) 50%,transparent 58%);transform:translateX(-100%);animation:marketSaleSheen 1.1s ease .22s 1}.notification-toast-market_sale .notification-toast-copy small{color:#70eeb8}
.notification-toast-pinned_market_listing{border-color:rgba(255,209,83,.45)}.notification-toast-pinned_market_listing .notification-toast-symbol{color:#ffd96c;animation:notifStarPulse 1.05s ease 2}.notification-toast-pinned_market_listing .notification-toast-copy small{color:#ffd96c}
.notification-toast-quest_complete,.notification-toast-contract_complete{border-color:rgba(255,213,91,.45);background:linear-gradient(145deg,rgba(32,26,10,.985),rgba(14,15,18,.99))}.notification-toast-quest_complete .notification-toast-symbol,.notification-toast-contract_complete .notification-toast-symbol{color:#ffe17d;animation:notifCheckPop .55s cubic-bezier(.2,1.5,.4,1) both}.notification-toast-quest_complete .notification-toast-copy small,.notification-toast-contract_complete .notification-toast-copy small{color:#ffe17d}
.notification-toast-party_invite{border-color:rgba(173,119,255,.48)}.notification-toast-party_invite .notification-toast-symbol{color:#d6b6ff;animation:notifInvitePop .7s cubic-bezier(.2,1.35,.35,1) both}.notification-toast-party_invite .notification-toast-copy small{color:#cda8ff}
.notification-toast-dm_message{border-color:rgba(86,210,255,.46)}.notification-toast-dm_message .notification-toast-symbol{color:#91e8ff;animation:notifMessageBlink 1s ease 2}.notification-toast-friend_invite{border-color:rgba(105,151,255,.46)}
@keyframes notifStarPulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.18) rotate(10deg);filter:drop-shadow(0 0 8px #ffd85c)}}
@keyframes notifCheckPop{0%{transform:scale(.45) rotate(-18deg);opacity:.15}70%{transform:scale(1.2) rotate(3deg)}100%{transform:scale(1);opacity:1}}
@keyframes notifInvitePop{0%{transform:translateY(8px) scale(.6);opacity:.2}70%{transform:translateY(-2px) scale(1.16)}100%{transform:none;opacity:1}}
@keyframes notifMessageBlink{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}50%{box-shadow:inset 0 0 0 1px rgba(113,225,255,.5),0 0 16px rgba(91,213,255,.25)}}


/* v0.15.76 — stable team previews + competitive match HUD refresh */
.match-header{
  grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)!important;
  align-items:stretch;
  padding:12px 24px 14px!important;
  border:1px solid rgba(122,169,225,.14);
  border-radius:12px 12px 0 0;
  overflow:hidden
}
.team-competitor{justify-content:flex-start;gap:5px!important}
.team-scoreline{margin:0 0 6px!important;min-height:38px}
.match-header .header-score{
  min-width:46px;padding:4px 10px;border-radius:10px;
  background:rgba(4,9,17,.48);border:1px solid rgba(255,255,255,.09);
  font-size:34px!important;text-align:center
}
.match-competitor-left .header-score{box-shadow:0 0 24px rgba(91,162,255,.13)}
.match-competitor-right .header-score{box-shadow:0 0 24px rgba(255,89,112,.12)}
.team-scoreline>span{font-size:9px!important;letter-spacing:.16em!important}
.match-team-roster{gap:5px!important}
.team-player-row{
  min-height:31px;padding:5px 8px!important;border-radius:7px!important;
  background:linear-gradient(90deg,rgba(15,30,52,.72),rgba(5,10,18,.54))!important
}
.opponent-roster .team-player-row{background:linear-gradient(270deg,rgba(54,18,28,.68),rgba(5,10,18,.54))!important}
.team-player-name{font-size:13px!important;max-width:210px!important}
.team-player-identity small{font-size:8px!important}
.team-player-call{min-width:64px!important;padding:4px 7px!important;font-size:9px!important}
.team-player-call:not(.call-heads):not(.call-tails){letter-spacing:.09em}
.legacy-call-summary{display:none!important}
.match-header>.versus{align-self:center;font-size:14px;letter-spacing:.12em;color:#ff6074;text-shadow:0 0 15px rgba(255,66,92,.28)}

.match-meta{min-height:40px!important;padding:6px 22px!important;margin:0!important;border-bottom:0!important}
.match-meta>span:not(.turn-timer){padding:6px 12px!important;border-radius:7px!important}
.match-timer-stage{
  position:relative;z-index:8;display:flex;justify-content:center;align-items:center;
  min-height:66px;margin:0;border-top:1px solid rgba(255,255,255,.035);
  border-bottom:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg,rgba(5,10,18,.88),rgba(6,12,21,.54))
}
.match-timer-stage .turn-timer{
  display:flex!important;align-items:baseline;justify-content:center;gap:6px;
  min-width:190px;margin:0!important;padding:5px 20px!important;border:0!important;background:transparent!important;
  font-variant-numeric:tabular-nums
}
.match-timer-stage .turn-timer.hidden{visibility:hidden!important;display:flex!important}
.match-timer-stage .turn-timer small{font-size:7px;font-style:normal;font-weight:950;letter-spacing:.18em;color:#667a94;margin-right:7px}
.match-timer-stage .turn-timer b{font-size:38px!important;line-height:1;color:#f5f8ff;text-shadow:0 0 20px rgba(120,177,255,.2)}
.match-timer-stage .turn-timer em{font-size:8px;font-style:normal;font-weight:950;letter-spacing:.12em;color:#718299}
.match-timer-stage .turn-timer.warning b{color:#ff6577;text-shadow:0 0 24px rgba(255,73,97,.38)}
.match-social{margin:0!important;padding:7px 0 6px!important;min-height:32px!important;border-top:0!important}
.match-spectators{min-height:18px}

.match-emote-dock{
  position:relative;z-index:30;display:flex;justify-content:center;align-items:flex-end;
  height:58px;margin-top:-4px;padding-top:4px;overflow:visible
}
.match-emote-dock .emote-wheel{margin:0 auto;width:46px;height:46px;flex-basis:46px}
.match-emote-dock .emote-wheel-toggle{width:46px;height:46px}
.match-emote-dock .emote-wheel-ring{top:50%;left:50%}
.match-emote-dock .emote-wheel-ring>button{
  --a:calc(-180deg + (180deg / (var(--emote-n) - 1)) * var(--emote-i));
  width:46px;min-height:34px;left:-23px;top:-17px;border-radius:16px
}
.match-emote-dock .emote-wheel.open .emote-wheel-ring>button{
  transform:rotate(var(--a)) translateX(150px) rotate(calc(-1 * var(--a))) scale(1)
}
.choice-area{position:relative;z-index:18}

@media(max-width:900px){
  .match-header{padding:8px 10px 10px!important;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)!important}
  .match-header .header-score{font-size:28px!important;min-width:38px;padding:3px 7px}
  .team-player-name{font-size:11px!important;max-width:120px!important}
  .team-player-call{min-width:50px!important;font-size:8px!important;padding:3px 5px!important}
  .match-timer-stage{min-height:54px}.match-timer-stage .turn-timer b{font-size:31px!important}
  .match-emote-dock .emote-wheel.open .emote-wheel-ring>button{transform:rotate(var(--a)) translateX(108px) rotate(calc(-1 * var(--a))) scale(.9)}
}


/* v0.15.76 — Casual reward summaries + notification bell polish. */
.casual-rewards{margin-top:14px;padding:10px 12px;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:rgba(0,0,0,.16);display:grid;gap:4px}
.casual-rewards strong{font-size:10px;letter-spacing:.16em;opacity:.7}
.casual-rewards span{font-size:12px;font-weight:800}
.casual-rewards small{font-size:10px;line-height:1.45;opacity:.72}
.notification-btn{font-size:17px;line-height:1}

/* v0.15.77 — compact match information bar + spectator popover */
.match-header{
  grid-template-columns:minmax(0,1fr) minmax(210px,260px) minmax(0,1fr)!important;
  gap:16px!important;
  align-items:stretch!important;
  padding:10px 20px 11px!important
}
.match-center-info{
  position:relative;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:0;padding:0 4px
}
.match-center-info .match-meta{
  display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;flex-wrap:wrap;
  width:100%;min-height:0!important;padding:0!important;margin:0 0 2px!important;border:0!important;background:none!important
}
.match-center-info .match-meta>span{
  padding:3px 6px!important;border-radius:5px!important;font-size:8px!important;line-height:1.1!important;
  background:rgba(3,8,15,.48)!important;border:1px solid rgba(255,255,255,.055)
}
.match-center-info .match-meta .round-meta-label{font-size:9px!important}
.match-center-info>.versus{
  align-self:center!important;margin:1px 0 0;font-size:17px!important;line-height:1!important;letter-spacing:.14em!important;
  color:#ff6074;text-shadow:0 0 15px rgba(255,66,92,.28)
}
.match-center-info .match-timer-stage{
  min-height:0!important;height:auto!important;margin:1px 0 0!important;border:0!important;background:none!important
}
.match-center-info .match-timer-stage .turn-timer{
  min-width:0!important;padding:0!important;gap:4px!important
}
.match-center-info .match-timer-stage .turn-timer small{font-size:6px!important;margin-right:3px!important}
.match-center-info .match-timer-stage .turn-timer b{font-size:32px!important;line-height:.95!important}
.match-center-info .match-timer-stage .turn-timer em{font-size:7px!important}
.match-spectator-wrap{position:relative;margin-top:4px}
.match-spectator-toggle{
  appearance:none;border:1px solid rgba(255,255,255,.075);border-radius:999px;background:rgba(4,9,16,.46);color:#75869e;
  padding:3px 7px;font-size:7px;font-weight:950;letter-spacing:.09em;cursor:pointer
}
.match-spectator-toggle:hover,.match-spectator-toggle[aria-expanded="true"]{color:#dce8f7;border-color:rgba(132,174,231,.28);background:rgba(17,31,51,.72)}
.match-spectators-popover{
  position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);z-index:80;width:210px;max-height:180px;overflow:auto;
  padding:8px;border:1px solid rgba(126,165,219,.2);border-radius:9px;background:rgba(6,11,19,.98);box-shadow:0 18px 50px rgba(0,0,0,.46)
}
.match-spectator-popover-title{padding:2px 4px 7px;color:#6f819a;font-size:7px;font-weight:950;letter-spacing:.14em}
.match-spectators-popover .spectator-name{display:block;width:100%;padding:6px 7px!important;text-align:left;border-radius:5px!important}
.match-spectators-popover .spectator-name:hover{background:rgba(255,255,255,.05)}
.match-spectator-empty{padding:7px;color:#64738a;font-size:9px;text-align:center}
.match-center-info .match-leave-compact{position:absolute;right:-5px;top:-2px;margin:0!important;padding:3px 5px!important;font-size:6px!important;opacity:.72}
.match-center-info .match-emote-feed{display:none!important}
/* The old lower-right bot/server readout was redundant with roster + mode information and is intentionally removed. */
.bot-readout{display:none!important}
/* Recover the vertical space formerly consumed by the separate metadata, timer and spectator rows. */
body.match-locked .arena{height:calc(100vh - 205px)!important;min-height:390px!important}
@media(max-width:900px){
  .match-header{grid-template-columns:minmax(0,1fr) 165px minmax(0,1fr)!important;gap:8px!important;padding:8px 9px!important}
  .match-center-info .match-meta>span{font-size:6px!important;padding:2px 4px!important}
  .match-center-info .match-meta .round-meta-label{font-size:7px!important}
  .match-center-info .match-timer-stage .turn-timer b{font-size:26px!important}
  .match-center-info>.versus{font-size:14px!important}
  .match-spectator-toggle{font-size:6px!important;padding:2px 5px!important}
  body.match-locked .arena{min-height:340px!important}
}
@media(max-width:680px){
  .match-header{grid-template-columns:minmax(0,1fr) 105px minmax(0,1fr)!important;gap:5px!important}
  .match-center-info .match-meta{gap:2px!important}
  .match-center-info .match-meta>span{padding:2px 3px!important;font-size:5px!important}
  .match-center-info .match-timer-stage .turn-timer small,.match-center-info .match-timer-stage .turn-timer em{display:none!important}
  .match-center-info .match-timer-stage .turn-timer b{font-size:23px!important}
  .match-spectator-toggle{max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* v0.15.79 — presence + leaderboard wealth taxonomy */
.status-good{color:#63f4bb!important;font-weight:800}.status-offline{color:#68758a!important}.leader-player small .status-good,.party-member .status-good{color:#63f4bb!important}.leaderboard-tabs{flex-wrap:wrap}

/* v0.15.79 — queue, spectator, match-HUD and notification polish */
.notification-btn .notification-bell{display:inline-block;filter:grayscale(1) brightness(2.4);opacity:.95;transition:filter .18s ease,transform .18s ease,text-shadow .18s ease}
.notification-btn.has-unread .notification-bell{filter:none;transform:rotate(-8deg) scale(1.08);text-shadow:0 0 13px rgba(255,211,82,.55)}
.notification-btn.has-unread{border-color:rgba(255,211,82,.34);box-shadow:inset 0 0 15px rgba(255,211,82,.06)}

/* More continuous queue token motion: float, tilt, edge-pass and settle instead of hard squash/hold. */
.queue-vs-coin{animation:queueVsNaturalFlip 3.15s cubic-bezier(.45,.02,.2,1) infinite!important;will-change:transform,filter}
.queue-vs-front{animation:queueVsNaturalHeads 3.15s ease-in-out infinite!important}
.queue-vs-back{animation:queueVsNaturalTails 3.15s ease-in-out infinite!important}
.queue-vs-aura{animation:queueAuraBreathe 3.15s ease-in-out infinite!important}
@keyframes queueVsNaturalFlip{
  0%{transform:translateY(0) rotateZ(-2deg) rotateX(-5deg) scaleX(1) scale(1);filter:brightness(1)}
  18%{transform:translateY(-8px) rotateZ(2deg) rotateX(-2deg) scaleX(.82) scale(1.035);filter:brightness(1.08)}
  29%{transform:translateY(-13px) rotateZ(4deg) rotateX(1deg) scaleX(.075) scale(1.06);filter:brightness(1.23)}
  40%{transform:translateY(-8px) rotateZ(1deg) rotateX(4deg) scaleX(.84) scale(1.035);filter:brightness(1.08)}
  50%{transform:translateY(0) rotateZ(-2deg) rotateX(5deg) scaleX(1) scale(1);filter:brightness(1)}
  68%{transform:translateY(-8px) rotateZ(-5deg) rotateX(2deg) scaleX(.82) scale(1.035);filter:brightness(1.08)}
  79%{transform:translateY(-13px) rotateZ(-2deg) rotateX(-1deg) scaleX(.075) scale(1.06);filter:brightness(1.23)}
  90%{transform:translateY(-7px) rotateZ(1deg) rotateX(-4deg) scaleX(.84) scale(1.03);filter:brightness(1.07)}
  100%{transform:translateY(0) rotateZ(-2deg) rotateX(-5deg) scaleX(1) scale(1);filter:brightness(1)}
}
@keyframes queueVsNaturalHeads{0%,27%{opacity:1;visibility:visible}31%,77%{opacity:0;visibility:hidden}81%,100%{opacity:1;visibility:visible}}
@keyframes queueVsNaturalTails{0%,27%{opacity:0;visibility:hidden}31%,77%{opacity:1;visibility:visible}81%,100%{opacity:0;visibility:hidden}}
@keyframes queueAuraBreathe{0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.58}30%,80%{transform:translate(-50%,-50%) scale(1.12);opacity:1}50%{transform:translate(-50%,-50%) scale(.98);opacity:.72}}
.queue-vs-coin-wrap.match-found .queue-vs-coin{animation:queueFoundNaturalFlip .9s cubic-bezier(.16,.8,.18,1) both!important}
@keyframes queueFoundNaturalFlip{0%{transform:translateY(0) scale(.88) rotateZ(-4deg)}28%{transform:translateY(-16px) scaleX(.08) scale(1.07) rotateZ(5deg)}52%{transform:translateY(-8px) scaleX(1) scale(1.14) rotateZ(-2deg)}72%{transform:translateY(-4px) scale(1.08)}100%{transform:translateY(0) scale(1.12)}}

/* Bot-fill controls live beside Leave Queue; the vote count sits directly over the action. */
.queue-search-actions{align-items:flex-end!important;justify-content:center!important;gap:10px!important}
.queue-search-actions>#playBotInsteadBtn,.queue-search-actions>#cancelQueueBtn,.queue-search-actions>.queue-bot-vote{width:min(230px,31vw)}
.queue-bot-vote{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:5px!important;margin:0!important}
.queue-bot-vote.hidden{display:none!important}
.queue-bot-vote>span{text-align:center;font-size:9px!important;font-weight:950!important;letter-spacing:.11em;color:#8290a5!important;line-height:1}
.queue-bot-vote>#voteStartBotsBtn{width:100%;height:43px;padding:10px 12px!important}
.queue-search-actions>#cancelQueueBtn,.queue-search-actions>#playBotInsteadBtn{height:43px}

/* Stable-height match information bar. Calls face inward toward VS on both teams. */
.match-header{min-height:158px!important;max-height:158px!important;grid-template-columns:minmax(0,1fr) minmax(235px,275px) minmax(0,1fr)!important;gap:18px!important;padding:10px 20px!important}
.team-competitor{min-height:0;overflow:hidden}
.team-scoreline{min-height:43px!important;margin-bottom:5px!important}
.match-header .header-score{font-size:40px!important;min-width:53px!important;padding:3px 10px!important}
.team-scoreline>span{font-size:10px!important}
.match-team-roster{width:min(100%,520px);display:grid!important;grid-template-columns:minmax(0,1fr);grid-auto-flow:row;gap:5px!important;min-width:0}
.match-competitor-left .match-team-roster{margin-right:auto}.match-competitor-right .match-team-roster{margin-left:auto}
.match-team-roster.multi-column{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));grid-auto-flow:column}
.team-player-row{width:100%;min-height:34px!important;padding:5px 8px!important;gap:7px!important}
.team-player-name{position:relative;overflow:visible!important;font-size:14px!important;max-width:220px!important}
.team-player-identity small{font-size:8.5px!important}
.team-player-call{min-width:72px!important;padding:5px 7px!important;font-size:9.5px!important;flex:0 0 auto}
.match-center-info{justify-content:flex-start!important;padding-top:0!important}
.match-center-info .match-meta{position:relative;top:-1px;margin-bottom:4px!important}
.match-center-info .match-meta>span{font-size:8.5px!important;padding:3px 7px!important}.match-center-info .match-meta .round-meta-label{font-size:9.5px!important}
.match-center-info>.versus{font-size:19px!important;margin:0 0 3px!important}
.match-center-info .match-timer-stage{margin-top:3px!important;transform:translateY(1px)}
.match-center-info .match-timer-stage .turn-timer b{font-size:35px!important}
.match-spectator-wrap{margin-top:8px!important;transform:translateY(2px)}
.match-spectator-toggle{font-size:8.5px!important;padding:4px 9px!important}
.match-center-info .match-leave-compact{right:-3px!important;top:1px!important}

/* Spectator mode deliberately shares the same visual grammar and sizing as the player HUD. */
.spectator-panel{height:100%;min-height:0}.spectator-arena-card{height:calc(100vh - 118px);min-height:650px;display:flex;flex-direction:column;overflow:hidden;padding:18px 22px}
.spectator-match-header{flex:0 0 158px}.spectator-arena{flex:1;min-height:390px!important}
.spectator-emote-dock{height:72px!important}.spectator-emote-dock .emote-wheel{width:56px!important;height:56px!important;flex-basis:56px!important}.spectator-emote-dock .emote-wheel-toggle{width:56px!important;height:56px!important}.spectator-emote-dock .emote-wheel-toggle span{font-size:23px!important}.spectator-emote-dock .emote-wheel-ring>button{width:50px!important;min-height:38px!important;left:-25px!important;top:-19px!important}.spectator-emote-dock .emote-wheel.open .emote-wheel-ring>button{transform:rotate(var(--a)) translateX(158px) rotate(calc(-1 * var(--a))) scale(1)!important}
.spectator-leave-btn{color:#ff8b9a!important;border-color:rgba(255,100,120,.22)!important}
.username-emote-pop{z-index:120!important}.team-player-name .username-emote-pop{left:50%;bottom:135%}

@media(max-width:900px){
 .match-header,.spectator-match-header{min-height:148px!important;max-height:148px!important;grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr)!important;gap:8px!important}
 .match-header .header-score{font-size:30px!important}.team-player-name{font-size:11px!important;max-width:105px!important}.team-player-call{min-width:52px!important;font-size:8px!important;padding:4px!important}
 .spectator-emote-dock .emote-wheel.open .emote-wheel-ring>button{transform:rotate(var(--a)) translateX(116px) rotate(calc(-1 * var(--a))) scale(.9)!important}
}
.queue-vs-front{animation:queueVsNaturalHeads 3.15s ease-in-out infinite!important}
.queue-vs-back{animation:queueVsNaturalTails 3.15s ease-in-out infinite!important}
.queue-vs-coin-wrap.match-found .queue-vs-front{animation:queueFoundHeadsVisibility .9s step-end both!important}
.queue-vs-coin-wrap.match-found .queue-vs-back{animation:queueFoundTailsVisibility .9s step-end both!important}

/* v0.15.80 — compact/actionable notification inbox */
.notification-popover{max-height:none}
#notificationShortList{display:grid;gap:8px;max-height:none;overflow:visible}
.notification-popover #showAllNotifications{margin-top:12px}
.notification-row.notification-actionable{cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.notification-row.notification-actionable:hover{border-color:rgba(129,164,221,.62);background:rgba(255,255,255,.07);transform:translateY(-1px)}
.notification-row.notification-actionable:focus-visible{outline:2px solid rgba(123,185,255,.75);outline-offset:2px}
.notification-row [data-party-join]{position:relative;z-index:1}


/* v0.15.85 — roster presentation reapplied on v0.15.80 base */
.team-player-row{justify-content:flex-start!important}
.team-player-identity{flex:1 1 auto!important;min-width:0;justify-content:flex-start!important;gap:7px!important}
.opponent-roster .team-player-row{flex-direction:row-reverse!important}
.opponent-roster .team-player-identity{flex-direction:row-reverse!important;justify-content:flex-start!important}
.team-player-call{order:0!important}.team-player-identity{order:1!important}.opponent-roster .team-player-call{order:0!important}.opponent-roster .team-player-identity{order:1!important}
.match-rank-icon{width:22px;height:22px;flex:0 0 22px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid rgba(255,255,255,.16);font-family:Georgia,"Times New Roman",serif;font-size:9px;font-weight:1000;line-height:1;color:#dce6f4;background:linear-gradient(180deg,#65717e,#242d39);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 2px 8px rgba(0,0,0,.25)}
.match-rank-icon.rank-bronze{background:linear-gradient(180deg,#a65e33,#4e2b20);color:#ffd0a4}.match-rank-icon.rank-silver{background:linear-gradient(180deg,#aebdcb,#52606f);color:#fff}.match-rank-icon.rank-gold{background:linear-gradient(180deg,#e5b63d,#795011);color:#fff3a5}.match-rank-icon.rank-platinum{background:linear-gradient(180deg,#55cabd,#245f61);color:#dffffa}.match-rank-icon.rank-diamond{background:linear-gradient(180deg,#67c9ff,#5948bf);color:#ecfbff}.match-rank-icon.rank-master{background:linear-gradient(180deg,#cc74f4,#70208d);color:#f9dcff}.match-rank-icon.rank-grandmaster{background:linear-gradient(180deg,#ef6a59,#781d28);color:#ffe1d9}.match-rank-icon.rank-coinqueror{background:linear-gradient(145deg,#ffd75c,#9c5de5 58%,#5d41c9);color:#fff3b1}.match-rank-icon.rank-unranked{background:#202938;color:#9cabbd}
.team-player-name{flex:0 1 auto!important}

/* v0.15.86 — queue alignment + 3v3 HUD fit + canonical rank emblems */
.queue-search-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,230px))!important;
  justify-content:center!important;
  align-items:end!important;
  column-gap:18px!important;
  row-gap:8px!important;
  width:100%!important;
}
.queue-search-actions>#playBotInsteadBtn,
.queue-search-actions>#cancelQueueBtn,
.queue-search-actions>.queue-bot-vote{
  width:100%!important;
  max-width:230px!important;
  min-width:0!important;
  justify-self:stretch!important;
}
.queue-search-actions>#playBotInsteadBtn.hidden,
.queue-search-actions>.queue-bot-vote.hidden{display:none!important}

/* Three players remain one clean vertical stack. Only 4+ per side becomes multi-column. */
.match-header,
.spectator-match-header{
  min-height:184px!important;
  max-height:184px!important;
  padding-top:9px!important;
  padding-bottom:9px!important;
}
.team-scoreline{min-height:37px!important;margin:1px 0 4px!important}
.match-header .header-score{font-size:38px!important;min-width:50px!important;padding:2px 9px!important}
.match-team-roster{gap:4px!important}
.team-player-row{min-height:31px!important;padding:4px 7px!important}
.team-player-name{font-size:14px!important;line-height:1.05!important}
.team-player-call{min-width:70px!important;padding:4px 7px!important;font-size:9.5px!important}
.match-team-roster.multi-column{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
  grid-auto-flow:column!important;
}

/* Same shield/emblem language as the persistent top-right rank HUD. */
.match-rank-emblem{
  width:25px;height:25px;flex:0 0 25px;
  display:grid;place-items:center;
  clip-path:polygon(50% 0,88% 20%,100% 61%,72% 100%,28% 100%,0 61%,12% 20%);
  background:#202a39;color:#aeb9c7;
  font-family:Georgia,"Times New Roman",serif;
  font-size:8px;font-weight:900;line-height:1;
  text-shadow:0 1px 0 #000,0 0 7px currentColor;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.1);
}
.match-rank-emblem.rank-iron{background:linear-gradient(180deg,#65717e,#242d39);color:#c5cdd6}
.match-rank-emblem.rank-bronze{background:linear-gradient(180deg,#a65e33,#4e2b20);color:#ffd0a4}
.match-rank-emblem.rank-silver{background:linear-gradient(180deg,#aebdcb,#52606f);color:#fff}
.match-rank-emblem.rank-gold{background:linear-gradient(180deg,#e5b63d,#795011);color:#fff3a5}
.match-rank-emblem.rank-platinum{background:linear-gradient(180deg,#55cabd,#245f61);color:#dffffa}
.match-rank-emblem.rank-diamond{background:linear-gradient(180deg,#67c9ff,#5948bf);color:#ecfbff}
.match-rank-emblem.rank-master{background:linear-gradient(180deg,#cc74f4,#70208d);color:#f9dcff}
.match-rank-emblem.rank-grandmaster{background:linear-gradient(180deg,#ef6a59,#781d28);color:#ffe1d9}
.match-rank-emblem.rank-coinqueror{background:linear-gradient(145deg,#ffd75c,#9c5de5 58%,#5d41c9);color:#fff3b1}
.match-rank-emblem.rank-unranked{background:#202938;color:#9cabbd}
.match-rank-emblem.bot-rank-emblem{clip-path:polygon(50% 0,88% 20%,100% 61%,72% 100%,28% 100%,0 61%,12% 20%);background:linear-gradient(180deg,#547ba9,#23384f);color:#d9efff;font-size:7px}

/* Leave Match is a deliberate secondary control, not a floating chip beside the timer. */
.match-center-info{position:relative!important}
.match-center-info .match-leave-compact{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:2px!important;
  transform:translateX(-50%)!important;
  min-width:86px!important;
  height:25px!important;
  padding:3px 10px!important;
  border-radius:6px!important;
  font-size:7px!important;
  letter-spacing:.11em!important;
  color:#ff9aa8!important;
  border-color:rgba(255,108,128,.28)!important;
  background:rgba(63,12,22,.22)!important;
}
.match-spectator-wrap{margin-top:6px!important;transform:none!important}

@media(max-width:900px){
  .match-header,.spectator-match-header{min-height:176px!important;max-height:176px!important}
  .team-player-row{min-height:29px!important;padding:3px 5px!important}
  .team-player-name{font-size:11px!important}
  .team-player-call{min-width:50px!important;font-size:8px!important;padding:3px!important}
  .match-rank-emblem{width:21px;height:21px;flex-basis:21px;font-size:7px}
  .queue-search-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:10px!important}
}

/* v0.15.86 — first-view notification emphasis */
.notification-row.newly-viewed{
  border-color:rgba(255,211,91,.72)!important;
  background:linear-gradient(90deg,rgba(255,205,74,.13),rgba(255,255,255,.055))!important;
  box-shadow:inset 3px 0 0 rgba(255,211,91,.9),0 0 18px rgba(255,196,61,.08);
  animation:notificationFirstViewPulse .5s ease-out both;
}
@keyframes notificationFirstViewPulse{from{transform:translateX(4px);filter:brightness(1.16)}to{transform:none;filter:none}}


/* v0.15.88 — match HUD hierarchy, adaptive rosters, single casual 1v1 bot action */
.match-center-info{position:relative!important;display:grid!important;grid-template-rows:auto auto auto auto!important;justify-items:center!important;align-content:start!important;gap:2px!important}
.match-meta{font-size:10px!important;gap:8px!important;transform:translateY(-2px)}
.match-meta>span{padding:6px 10px!important;font-size:9.5px!important}
.match-center-info .match-leave-compact{position:static!important;margin:1px 0 0!important;padding:3px 10px!important;min-width:48px!important;font-size:8px!important;line-height:1.15!important;transform:none!important}
.match-center-info .versus{font-size:22px!important;line-height:1!important;margin:1px 0!important;align-self:center!important}
.match-timer-stage{min-height:35px!important;margin-top:2px!important;display:grid!important;place-items:center!important}
.turn-timer{display:grid!important;place-items:center!important;min-width:72px!important;padding:0!important;background:transparent!important;border:0!important}
.turn-timer b{font-size:28px!important;line-height:1!important;letter-spacing:.02em!important}
.turn-timer small,.turn-timer em{display:none!important}
.arena{position:relative}
.arena-spectator-control{position:absolute!important;right:14px!important;top:12px!important;z-index:12!important;margin:0!important}
.arena-spectator-control .match-spectators-popover{right:0!important;left:auto!important;top:calc(100% + 6px)!important}
.match-spectator-toggle{font-size:9px!important;padding:6px 10px!important;background:rgba(5,12,22,.75)!important;backdrop-filter:blur(8px)}
.team-competitor{display:flex!important;flex-direction:column!important;min-height:0!important}
.match-team-roster{flex:1 1 auto!important;min-height:0!important;display:grid!important;grid-template-rows:repeat(var(--roster-count,1),minmax(0,1fr))!important;align-content:stretch!important}
.match-team-roster:not(.multi-column) .team-player-row{height:auto!important;min-height:0!important;align-self:stretch!important;display:flex!important;align-items:center!important}
.match-team-roster:not(.multi-column)[style*="--roster-count: 1"] .team-player-row{font-size:1.08em!important}
.match-team-roster:not(.multi-column)[style*="--roster-count: 1"] .team-player-name{font-size:17px!important}
.match-team-roster:not(.multi-column)[style*="--roster-count: 1"] .team-player-call{font-size:11px!important;padding:7px 10px!important}
.match-team-roster:not(.multi-column)[style*="--roster-count: 2"] .team-player-name{font-size:15px!important}
.match-team-roster.multi-column{grid-template-rows:repeat(3,minmax(0,1fr))!important}
#playerPickValue,#botPickValue,#opponentCallLabel{display:none!important}
.queue-search-actions{grid-template-columns:repeat(2,minmax(0,230px))!important}
.queue-search-actions>#playBotInsteadBtn,.queue-search-actions>#cancelQueueBtn,.queue-search-actions>.queue-bot-vote{justify-self:stretch!important}


/* v0.15.90 — clearer match hierarchy, roster-aware typography, result-overlay containment */
/* Make the three round-context chips readable at a glance. */
.match-center-info .match-meta{
  gap:9px!important;
  margin:0!important;
  transform:translateY(-3px)!important;
}
.match-center-info .match-meta>span,
.match-center-info .match-meta .round-meta-label{
  padding:7px 11px!important;
  font-size:11.5px!important;
  line-height:1!important;
  letter-spacing:.075em!important;
  font-weight:950!important;
}

/* Center stack: context -> leave -> seconds -> VS.  VS lands on the roster's visual centerline. */
.match-center-info{
  grid-template-rows:auto auto auto 1fr!important;
  align-content:stretch!important;
  min-height:100%!important;
  gap:2px!important;
}
.match-center-info .match-leave-compact{
  order:2!important;
  margin:0!important;
  min-width:62px!important;
  padding:4px 11px!important;
  font-size:9.5px!important;
  line-height:1.05!important;
}
.match-center-info .match-timer-stage{
  order:3!important;
  min-height:31px!important;
  margin:1px 0 0!important;
  align-self:start!important;
}
.match-center-info .turn-timer b{
  font-size:30px!important;
  line-height:.96!important;
  font-weight:950!important;
}
.match-center-info>.versus{
  order:4!important;
  align-self:center!important;
  justify-self:center!important;
  margin:0!important;
  padding:0 0 5px!important;
  font-size:28px!important;
  line-height:1!important;
  letter-spacing:.08em!important;
}

/* Scale the actual roster CONTENT with row count, not just the row rectangle. */
.match-team-roster.roster-count-1 .team-player-row{
  padding:11px 14px!important;
  gap:13px!important;
}
.match-team-roster.roster-count-1 .team-player-name{
  font-size:19px!important;
  line-height:1.05!important;
  max-width:min(330px,72%)!important;
}
.match-team-roster.roster-count-1 .team-player-call{
  min-width:86px!important;
  padding:9px 13px!important;
  border-radius:7px!important;
  font-size:12.5px!important;
  line-height:1!important;
}
.match-team-roster.roster-count-1 .match-rank-emblem{
  width:31px!important;height:31px!important;flex-basis:31px!important;
  font-size:9px!important;
}
.match-team-roster.roster-count-1 .team-player-identity{gap:10px!important}

.match-team-roster.roster-count-2 .team-player-row{padding:7px 10px!important;gap:10px!important}
.match-team-roster.roster-count-2 .team-player-name{font-size:15px!important;max-width:245px!important}
.match-team-roster.roster-count-2 .team-player-call{min-width:70px!important;padding:6px 9px!important;font-size:10px!important}
.match-team-roster.roster-count-2 .match-rank-emblem{width:26px!important;height:26px!important;flex-basis:26px!important;font-size:8px!important}

.match-team-roster.roster-count-3 .team-player-row{padding:4px 8px!important;gap:8px!important}
.match-team-roster.roster-count-3 .team-player-name{font-size:12.5px!important;max-width:205px!important}
.match-team-roster.roster-count-3 .team-player-call{min-width:59px!important;padding:4px 7px!important;font-size:8.5px!important}
.match-team-roster.roster-count-3 .match-rank-emblem{width:22px!important;height:22px!important;flex-basis:22px!important;font-size:7px!important}

/* Result presentation must sit above task/notification popups and stay inside the visible canvas. */
#victoryOverlay.victory-overlay{
  z-index:30000!important;
  inset:0!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
  padding:clamp(20px,4vmin,48px)!important;
  box-sizing:border-box!important;
  place-items:center!important;
}
#victoryOverlay .victory-copy{
  width:min(760px,calc(100% - 40px))!important;
  max-width:calc(100% - 40px)!important;
  min-width:0!important;
  max-height:calc(100% - 40px)!important;
  overflow:visible!important;
  margin:auto!important;
  padding:clamp(18px,3vmin,34px) clamp(24px,4vw,50px)!important;
}
#victoryOverlay #victoryTitle,
#victoryOverlay.risk-allin #victoryTitle{
  font-size:clamp(42px,min(var(--result-title-size,78px),9vmin),88px)!important;
  max-width:100%!important;
}
html[data-auto-fit="on"] #victoryOverlay.victory-overlay,
html[data-resolution]:not([data-resolution="auto"]) #victoryOverlay.victory-overlay{
  inset:0!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
}
@media(max-height:650px){
  #victoryOverlay.victory-overlay{padding:14px!important}
  #victoryOverlay .victory-copy{max-height:calc(100% - 16px)!important;padding:14px 24px!important}
  #victoryOverlay #victoryTitle,#victoryOverlay.risk-allin #victoryTitle{font-size:clamp(36px,8vmin,64px)!important}
}


/* v0.15.92 — visible match-header hierarchy and true roster scaling */
.match-header{
  grid-template-columns:minmax(0,1fr) minmax(320px,360px) minmax(0,1fr)!important;
  align-items:stretch!important;
}
.match-center-info{
  display:grid!important;
  grid-template-rows:auto auto minmax(42px,1fr) auto!important;
  align-items:center!important;
  justify-items:center!important;
  align-self:stretch!important;
  padding:2px 8px 4px!important;
  gap:3px!important;
}
.match-center-info .match-meta{
  grid-row:1!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:100%!important;
  margin:0!important;
}
.match-center-info .match-meta>span,
.match-center-info .match-meta .round-meta-label{
  font-size:12px!important;
  padding:6px 11px!important;
  line-height:1!important;
  letter-spacing:.075em!important;
  white-space:nowrap!important;
  font-weight:950!important;
}
.match-center-info .match-leave-compact{
  grid-row:2!important;
  position:static!important;
  margin:2px 0 0!important;
  min-width:76px!important;
  padding:6px 13px!important;
  font-size:11px!important;
  line-height:1!important;
}
.match-center-info>.versus{
  grid-row:3!important;
  align-self:center!important;
  justify-self:center!important;
  margin:0!important;
  padding:0!important;
  font-size:36px!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  font-weight:1000!important;
}
.match-center-info .match-timer-stage{
  grid-row:4!important;
  align-self:end!important;
  justify-self:center!important;
  margin:0 0 1px!important;
  min-height:38px!important;
  display:grid!important;
  place-items:center!important;
}
.match-center-info .turn-timer b{
  font-size:34px!important;
  line-height:1!important;
  font-weight:950!important;
}

/* 1v1: use the available card height for the actual readable content. */
.match-team-roster.roster-count-1 .team-player-row{
  min-height:92px!important;
  padding:16px 18px!important;
  gap:18px!important;
  align-items:center!important;
}
.match-team-roster.roster-count-1 .team-player-name{
  font-size:25px!important;
  line-height:1!important;
  max-width:min(390px,72%)!important;
  font-weight:1000!important;
}
.match-team-roster.roster-count-1 .team-player-call{
  min-width:112px!important;
  padding:13px 16px!important;
  border-radius:9px!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:1000!important;
}
.match-team-roster.roster-count-1 .match-rank-emblem{
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
}
.match-team-roster.roster-count-1 .team-player-identity{gap:14px!important}
.match-team-roster.roster-count-1 .username-emote-pop{font-size:20px!important}

/* 2v2 / 3v3 step down proportionally while filling the same roster area. */
.match-team-roster.roster-count-2 .team-player-row{padding:9px 12px!important;gap:11px!important}
.match-team-roster.roster-count-2 .team-player-name{font-size:17px!important}
.match-team-roster.roster-count-2 .team-player-call{min-width:78px!important;padding:7px 10px!important;font-size:11px!important}
.match-team-roster.roster-count-2 .match-rank-emblem{width:29px!important;height:29px!important;flex:0 0 29px!important}
.match-team-roster.roster-count-3 .team-player-row{padding:5px 9px!important;gap:8px!important}
.match-team-roster.roster-count-3 .team-player-name{font-size:14px!important}
.match-team-roster.roster-count-3 .team-player-call{min-width:64px!important;padding:5px 8px!important;font-size:9px!important}
.match-team-roster.roster-count-3 .match-rank-emblem{width:24px!important;height:24px!important;flex:0 0 24px!important}

/* Result overlay safety retained from v0.15.91, now as valid CSS. */
#victoryOverlay.victory-overlay{padding-inline:max(28px,4vw)!important;z-index:30000!important;overflow:hidden!important}
#victoryOverlay .victory-copy{overflow:visible!important;max-width:calc(100% - 64px)!important}
#victoryOverlay #victoryTitle,#victoryOverlay.risk-allin #victoryTitle{
  width:auto!important;max-width:100%!important;box-sizing:border-box!important;
  padding-left:.08em!important;padding-right:.08em!important;
  white-space:nowrap!important;overflow:visible!important;
}
@media(max-width:900px){
  .match-header{grid-template-columns:minmax(0,1fr) 240px minmax(0,1fr)!important}
  .match-center-info .match-meta{gap:4px!important}
  .match-center-info .match-meta>span,.match-center-info .match-meta .round-meta-label{font-size:8px!important;padding:4px 6px!important}
  .match-center-info>.versus{font-size:28px!important}
  .match-center-info .turn-timer b{font-size:28px!important}
  .match-team-roster.roster-count-1 .team-player-name{font-size:18px!important}
  .match-team-roster.roster-count-1 .team-player-call{min-width:80px!important;font-size:11px!important;padding:8px 10px!important}
  .match-team-roster.roster-count-1 .match-rank-emblem{width:30px!important;height:30px!important;flex-basis:30px!important}
}

/* v0.15.93 — final pre-refactor match-info layout */
#matchPanel .match-header{
  grid-template-columns:minmax(0,1fr) minmax(390px,430px) minmax(0,1fr)!important;
}
#matchPanel .match-center-info{
  display:grid!important;
  grid-template-rows:auto auto minmax(42px,1fr) auto!important;
  align-items:center!important;
  justify-items:center!important;
  align-self:stretch!important;
  min-height:100%!important;
  padding:0 8px 4px!important;
  gap:5px!important;
}
#matchPanel .match-center-info .match-meta{
  grid-row:1!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  gap:10px!important;
  margin:0!important;
  transform:none!important;
}
#matchPanel .match-center-info .match-meta>span,
#matchPanel .match-center-info .match-meta .round-meta-label{
  flex:0 0 auto!important;
  padding:9px 15px!important;
  font-size:13.5px!important;
  line-height:1!important;
  letter-spacing:.075em!important;
  white-space:nowrap!important;
  font-weight:950!important;
  border-radius:7px!important;
}
#matchPanel .match-center-info .match-timer-stage{
  grid-row:2!important;
  align-self:start!important;
  justify-self:center!important;
  min-height:39px!important;
  margin:1px 0 0!important;
  display:grid!important;
  place-items:center!important;
}
#matchPanel .match-center-info .turn-timer b{
  font-size:34px!important;
  line-height:1!important;
  font-weight:950!important;
}
#matchPanel .match-center-info>.versus{
  grid-row:3!important;
  align-self:center!important;
  justify-self:center!important;
  margin:0!important;
  padding:0!important;
  font-size:36px!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  font-weight:1000!important;
}
#matchPanel .match-center-info .match-leave-compact{
  grid-row:4!important;
  align-self:end!important;
  justify-self:center!important;
  position:static!important;
  margin:0!important;
  min-width:82px!important;
  padding:6px 14px!important;
  font-size:10px!important;
  line-height:1!important;
}
@media(max-width:1100px){
  #matchPanel .match-header{grid-template-columns:minmax(0,1fr) minmax(315px,350px) minmax(0,1fr)!important}
  #matchPanel .match-center-info .match-meta{gap:6px!important}
  #matchPanel .match-center-info .match-meta>span,
  #matchPanel .match-center-info .match-meta .round-meta-label{padding:7px 9px!important;font-size:10.5px!important}
}

/* v0.15.97 — split team round scoring around the coin + restore large result titles. */
#matchPanel .arena .round-score-callout{
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:8!important;
  width:min(28%,360px)!important;
  padding:10px 14px!important;
  border-radius:9px!important;
  font-size:clamp(16px,1.55vw,24px)!important;
  line-height:1!important;
  letter-spacing:.065em!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  text-align:center!important;
  pointer-events:none!important;
  backdrop-filter:blur(5px)!important;
}
#matchPanel .arena .round-score-left{
  left:clamp(24px,7vw,120px)!important;
  color:#a9d7ff!important;
  border:1px solid rgba(99,174,255,.38)!important;
  background:rgba(16,54,96,.48)!important;
  box-shadow:0 0 28px rgba(86,163,255,.12)!important;
}
#matchPanel .arena .round-score-right{
  right:clamp(24px,7vw,120px)!important;
  color:#ffacb8!important;
  border:1px solid rgba(255,103,126,.34)!important;
  background:rgba(92,24,38,.44)!important;
  box-shadow:0 0 28px rgba(255,89,112,.11)!important;
}
#matchPanel .arena .round-score-callout.hidden{display:none!important}
@media(max-width:900px){
  #matchPanel .arena .round-score-callout{width:25%!important;padding:8px!important;font-size:clamp(11px,2vw,15px)!important}
  #matchPanel .arena .round-score-left{left:12px!important}
  #matchPanel .arena .round-score-right{right:12px!important}
}

#victoryOverlay #victoryTitle,
#victoryOverlay.risk-allin #victoryTitle{
  font-size:clamp(64px,11vmin,118px)!important;
  line-height:1.01!important;
  padding-left:.06em!important;
  padding-right:.06em!important;
}
@media(max-width:700px),(max-height:650px){
  #victoryOverlay #victoryTitle,
  #victoryOverlay.risk-allin #victoryTitle{font-size:clamp(48px,10vmin,82px)!important}
}


/* v0.15.97 — persistent Unboxing inventory count in the sidebar. */
#nav [data-view="gacha"] .nav-capsule-count{
  display:inline-grid;place-items:center;min-width:20px;height:18px;margin-left:auto;padding:0 6px;border-radius:999px;
  background:rgba(185,119,255,.16);border:1px solid rgba(199,152,255,.42);color:#ddbaff;
  font-size:9px;font-weight:1000;line-height:1;letter-spacing:0;box-shadow:0 0 12px rgba(173,92,255,.12)
}
#nav [data-view="gacha"] .nav-capsule-count.hidden{display:none}

/* v0.17.1 — proposal state must fully replace search controls. */
.queue-search-actions.hidden{display:none!important}

/* v0.22.0 — keep the round badge geometrically centered in the match info column. */
#matchPanel .match-center-info .match-meta{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  justify-content:stretch!important;
  width:100%!important;
}
#matchPanel .match-center-info .match-meta>span:first-child{justify-self:end!important}
#matchPanel .match-center-info .match-meta .round-meta-label{justify-self:center!important}
#matchPanel .match-center-info .match-meta>span:last-child{justify-self:start!important}

/* v0.26.5 custom Ranked wager unit selector */
.wager-custom-modes{display:grid;grid-template-columns:52px 78px;gap:6px}.wager-custom-modes button{min-height:40px}.wager-custom-modes button.active{border-color:var(--cyan2);color:var(--cyan2);box-shadow:0 0 0 2px #19d3ff18 inset}

/* v0.26.11 — editable call + one-use tactical controls */
.choice-area{grid-template-columns:1fr!important}
.call-selector{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tactical-selector{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice.selected{border-color:var(--accent);box-shadow:inset 0 0 30px #63b3ff20,0 0 0 1px var(--accent)}
.tactical-choice.active{border-color:var(--accent);color:var(--accent);background:#63b3ff18;box-shadow:inset 0 0 24px #63b3ff28,0 0 0 2px var(--accent),0 0 18px #63b3ff30;transform:translateX(2px)}
.tactical-choice.used{opacity:.32;text-decoration:line-through}
.tactical-choice small{margin-left:6px}
.lock-call{width:100%;min-height:46px;font-weight:950;letter-spacing:.12em}

/* v0.26.11 — tactical controls live together on the arena's left rail.
   Keep the center/coin halo and team score-callout lanes clear for match FX. */
#matchPanel .arena{--tactical-rail-width:164px;--arena-fx-gutter:clamp(184px,17vw,244px)}
#matchPanel .arena-tactical-panel{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:10;width:var(--tactical-rail-width);display:grid;gap:9px;padding:13px;border:1px solid rgba(93,132,188,.25);border-radius:10px;background:rgba(7,13,23,.72);box-shadow:0 10px 30px rgba(0,0,0,.25);backdrop-filter:blur(6px)}
#matchPanel .arena-tactical-label{font-size:10px;letter-spacing:.18em;font-weight:950;color:var(--muted);text-align:center}
#matchPanel .arena-tactical-panel .tactical-selector{display:grid;grid-template-columns:1fr;gap:9px}
#matchPanel .arena-tactical-panel .tactical-choice{min-height:48px;padding:10px 11px;font-size:10px;line-height:1.05;white-space:normal}
#matchPanel .arena-tactical-panel .tactical-choice small{display:block;margin:4px 0 0;font-size:9px;letter-spacing:.08em}
/* Team score popups start beyond the tactical rail and retain a protected gap around the coin. */
#matchPanel .arena .round-score-callout{width:min(23%,300px)!important}
#matchPanel .arena .round-score-left{left:var(--arena-fx-gutter)!important}
#matchPanel .arena .round-score-right{right:clamp(24px,7vw,120px)!important}
#matchPanel .choice-area{grid-template-columns:1fr!important}
#matchPanel .lock-call{order:1;max-width:420px;justify-self:center}
#matchPanel .call-selector{order:2;width:100%}
@media(max-width:900px){
  #matchPanel .arena{--tactical-rail-width:124px;--arena-fx-gutter:140px}
  #matchPanel .arena-tactical-panel{left:8px;width:var(--tactical-rail-width);padding:7px}
  #matchPanel .arena-tactical-panel .tactical-choice{min-height:40px;padding:7px;font-size:9px}
  #matchPanel .arena .round-score-callout{width:20%!important;font-size:clamp(10px,1.8vw,14px)!important}
  #matchPanel .arena .round-score-left{left:var(--arena-fx-gutter)!important}
  #matchPanel .arena .round-score-right{right:8px!important}
}
@media(max-width:620px){
  /* On narrow phones, keep the coin lane usable by docking tactics in the arena corner. */
  #matchPanel .arena-tactical-panel{top:8px;bottom:auto;transform:none;width:108px}
  #matchPanel .arena-tactical-label{display:none}
  #matchPanel .arena .round-score-left{left:122px!important}
  #matchPanel .arena .round-score-callout{top:62%!important;width:22%!important}
}


/* v0.26.15 achievements */
.profile-achievements-btn{margin-top:12px;min-width:150px}.achievements-panel{width:min(760px,94vw);max-height:82vh;overflow:auto}.achievements-list{display:grid;gap:10px}.achievement-card{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:15px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.025)}.achievement-card.ready{border-color:rgba(99,244,187,.5);box-shadow:0 0 24px rgba(99,244,187,.08)}.achievement-card.claimed{opacity:.72}.achievement-card small{display:block;color:#8993b5;letter-spacing:.12em}.achievement-card strong{display:block;margin:4px 0}.achievement-card p{margin:0 0 5px;color:#aab4d6;font-size:13px}.achievement-reward{white-space:nowrap;font-weight:800}
\n\n/* v0.26.15 tactical resolution FX + per-player participation */\n#matchPanel .arena{--tactical-fx-gap:clamp(72px,10vw,150px)}\n.tactical-fx-lane{position:absolute;top:31%;z-index:8;display:flex;gap:10px;align-items:center;pointer-events:none;max-width:25%;flex-wrap:wrap}.tactical-fx-left{left:var(--tactical-fx-gap)}.tactical-fx-right{right:var(--tactical-fx-gap);justify-content:flex-end}.tactical-fx{display:grid;place-items:center;width:48px;height:48px;font-size:30px;font-weight:1000;filter:drop-shadow(0 0 10px rgba(130,205,255,.55));animation:tacticalAppear .2s ease-out both}.tactical-double b{font-family:system-ui;letter-spacing:-8px;transform:translateX(-4px);color:#ffd45e}.tactical-guard b{font-size:31px}.tactical-success{animation:tacticalRise 1.05s .55s ease-in forwards}.tactical-fail{animation:tacticalFall 1.05s .55s ease-in forwards;filter:drop-shadow(0 0 11px rgba(255,70,90,.8));color:#ff6679}.tactical-cracked{animation:tacticalCrackFall 1.1s .45s ease-in forwards;filter:drop-shadow(0 0 12px rgba(255,55,70,.9));color:#ff596d}.round-participation{margin-left:auto;font-size:12px;font-weight:1000;min-width:24px;text-align:right}.round-participation.good{color:var(--good)}.round-participation.bad{color:var(--bad)}.round-participation.neutral{color:var(--muted)}\n@keyframes tacticalAppear{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}@keyframes tacticalRise{to{opacity:0;transform:translateY(-42px) scale(1.15);filter:drop-shadow(0 0 18px rgba(120,240,190,.9))}}@keyframes tacticalFall{to{opacity:0;transform:translateY(46px) rotate(12deg) scale(.8)}}@keyframes tacticalCrackFall{35%{transform:scale(1.18) rotate(-5deg)}to{opacity:0;transform:translateY(52px) rotate(24deg) scale(.65)}}\n@media(max-width:900px){.tactical-fx-lane{top:28%;gap:4px}.tactical-fx-left{left:118px}.tactical-fx-right{right:12px}.tactical-fx{width:36px;height:36px;font-size:23px}}\n

/* v0.26.15 — public player cards fully inherit the viewed player's color set. */
.player-profile-panel{
  background:
    radial-gradient(circle at 16% 18%,color-mix(in srgb,var(--public-theme-accent,#77c9ff) 24%,transparent),transparent 34%),
    radial-gradient(circle at 86% 82%,color-mix(in srgb,var(--public-theme-accent2,#8a7dff) 20%,transparent),transparent 38%),
    linear-gradient(145deg,color-mix(in srgb,var(--public-theme-panel,rgba(9,24,40,.92)) 88%,var(--public-theme-bg,#0b1d31)),color-mix(in srgb,var(--public-theme-bg,#0b1d31) 78%,#04080f))!important;
}
#publicProfileBody.themed-public-profile{
  background:linear-gradient(145deg,color-mix(in srgb,var(--public-theme-bg,#0b1d31) 42%,transparent),color-mix(in srgb,var(--public-theme-panel,rgba(9,24,40,.86)) 62%,transparent))!important;
  border:1px solid color-mix(in srgb,var(--public-theme-accent,#77c9ff) 18%,transparent);
  animation:publicProfileBodyBreathe 8s ease-in-out infinite alternate;
}
.player-profile-panel>.modal-close{z-index:20;isolation:isolate;box-shadow:0 4px 18px rgba(0,0,0,.5);}
@keyframes publicProfileBodyBreathe{from{box-shadow:inset 0 0 22px color-mix(in srgb,var(--public-theme-accent,#77c9ff) 5%,transparent)}to{box-shadow:inset 0 0 46px color-mix(in srgb,var(--public-theme-accent2,#8a7dff) 12%,transparent)}}
@media(max-width:0px){#publicProfileBody.themed-public-profile{animation:none}}

/* v0.26.16 performance pass: keep menu/profile composition local and avoid full-page repaint cascades. */
.sidebar{contain:layout paint;transform:translateZ(0);backface-visibility:hidden}
.main>.view{contain:layout paint style}
#view-stats{padding-bottom:48px;contain:layout paint style}
#view-stats .card{content-visibility:auto;contain-intrinsic-size:320px}
.profile-history-card{margin-bottom:28px}
.history-profile-link{font-size:inherit;padding:0;border:0;background:none;vertical-align:baseline}

/* v0.26.18 tactical-side readability + split blocked-DD resolution */
.tactical-fx-left{justify-content:flex-start}.tactical-fx-right{justify-content:flex-end}
.tactical-fail{animation:tacticalFallSide 1.12s .52s cubic-bezier(.45,.05,.75,.35) forwards}
.tactical-success{animation:tacticalRiseGlow 1.08s .52s ease-out forwards}
.tactical-cracked{animation:none!important;filter:none!important;color:#ff6679}
.tactical-cracked b{opacity:0}
.tactical-cracked::before,.tactical-cracked::after{content:attr(data-glyph);position:absolute;inset:0;display:grid;place-items:center;font:inherit;font-weight:1000;color:#ff6679;filter:drop-shadow(0 0 9px rgba(255,70,90,.7))}
.tactical-cracked::before{clip-path:polygon(0 0,52% 0,45% 42%,54% 48%,43% 100%,0 100%);animation:tacticalCrackLeft 1.15s .38s cubic-bezier(.45,.05,.8,.35) forwards}
.tactical-cracked::after{clip-path:polygon(52% 0,100% 0,100% 100%,43% 100%,54% 48%,45% 42%);animation:tacticalCrackRight 1.15s .38s cubic-bezier(.45,.05,.8,.35) forwards}
@keyframes tacticalFallSide{25%{color:#ff7b87;filter:drop-shadow(0 0 10px rgba(255,80,95,.62))}to{opacity:0;color:#ff596d;transform:translate(15px,55px) rotate(24deg) scale(.76);filter:drop-shadow(0 0 5px rgba(255,55,70,.45))}}
@keyframes tacticalRiseGlow{35%{filter:drop-shadow(0 0 14px rgba(135,245,195,.75)) brightness(1.12)}to{opacity:0;transform:translateY(-45px) scale(1.12);filter:drop-shadow(0 0 20px rgba(135,245,195,.18)) brightness(1.2)}}
@keyframes tacticalCrackLeft{18%{transform:translate(-2px,1px) rotate(-5deg)}to{opacity:0;transform:translate(-18px,58px) rotate(-31deg) scale(.72)}}
@keyframes tacticalCrackRight{18%{transform:translate(2px,1px) rotate(5deg)}to{opacity:0;transform:translate(20px,58px) rotate(34deg) scale(.72)}}

/* v0.26.18 scroll + presentation performance corrections */
/* The main element is the single page scroll owner. Do not paint-contain child views: paint containment clips long Home/Profile content. */
.main>.view,#view-stats{contain:none!important}
#view-home,#view-stats{overflow:visible!important;max-height:none!important;height:auto!important}
#view-stats{padding-bottom:88px!important}
.profile-history-card{margin-bottom:48px!important}
/* Avoid animating the grid track itself; that forces full layout on every frame. Only composite the HUD transform/opacity. */
@media(min-width:861px){.app-shell{transition:none!important}.sidebar{transition:transform .22s cubic-bezier(.22,.75,.18,1),opacity .16s ease!important;will-change:transform,opacity}}
/* Achievement modal owns one bounded scroll surface and avoids expensive full-screen backdrop blur. */
#achievementsModal .modal-backdrop{backdrop-filter:none!important;background:rgba(2,4,11,.92)!important}
.achievements-panel{overflow:hidden!important;display:flex;flex-direction:column;max-height:min(82vh,760px)!important;contain:layout paint}
.achievements-panel>h2,.achievements-panel>.eyebrow,.achievements-panel>.section-copy{flex:0 0 auto}
.achievements-list{overflow-y:auto;min-height:0;padding-right:6px;overscroll-behavior:contain;contain:content}
.achievement-card{content-visibility:auto;contain-intrinsic-size:92px;contain:layout paint style}


/* v0.26.21 focused Home/Profile/Achievements performance pass.
   Keep expensive animated paint out of the two hottest menu surfaces. */
body[data-active-view="stats"] #view-stats::before,
body[data-active-view="stats"] #view-stats::after{animation:none!important;filter:none!important}
body[data-active-view="stats"] #view-stats::before{background-position:4% 3%,96% 4%,52% 96%,0 0!important;opacity:.58!important}
body[data-active-view="stats"] #view-stats::after{background-position:50% 50%!important;opacity:.25!important}
/* Profile cards stay normal layout objects; per-card content-visibility caused scroll/jank on some Chromium builds. */
#view-stats .card{content-visibility:visible!important;contain:none!important}
/* Real trailing layout clearance after the history card. */
#view-stats.active::marker{content:""}
#view-stats.active{padding-bottom:0!important}
#view-stats.active>.profile-history-card{margin-bottom:0!important}
#view-stats.active::after{content:""!important;display:block!important;position:static!important;width:100%!important;height:180px!important;min-height:180px!important;max-height:180px!important;background:none!important;animation:none!important;opacity:1!important;contain:none!important;pointer-events:none!important}

/* Home: retain the 3D coin motion, but stop continuously repainting blurred title/aura/scan layers. */
body[data-active-view="home"] #view-home .scanline{display:none!important}
body[data-active-view="home"] .home-hero-title::before,
body[data-active-view="home"] .home-hero-title::after,
body[data-active-view="home"] .home-hero-title span:last-child{animation:none!important}
body[data-active-view="home"] .home-hero-title::before{filter:blur(12px)!important;opacity:.62!important}
body[data-active-view="home"] .home-hero-title::after{filter:blur(4px)!important;opacity:.62!important}
body[data-active-view="home"] .hero.card{contain:layout paint style;transform:translateZ(0)}
body[data-active-view="home"] #heroCoinModel{will-change:transform}

/* Achievements: modal is deliberately cheap. The obscured Profile is not painted while open. */
body.achievements-open #view-stats{visibility:hidden!important}
#achievementsModal{contain:strict}
#achievementsModal .modal-backdrop{backdrop-filter:none!important;filter:none!important;background:#02040bf2!important}
.achievements-panel{contain:layout paint style!important;box-shadow:0 24px 70px rgba(0,0,0,.72)!important}
.achievements-list{contain:layout paint style!important;content-visibility:visible!important;scrollbar-gutter:stable}
.achievement-card{content-visibility:visible!important;contain:layout style!important;box-shadow:none!important;transform:none!important;transition:border-color .12s ease,background-color .12s ease!important}
.achievement-card.ready{box-shadow:none!important;background:rgba(99,244,187,.045)!important}
/* v0.26.27 — reusable long-form notification/news reader. */
.article-reader-card{width:min(720px,calc(100vw - 32px));max-height:85vh;display:flex;flex-direction:column}.article-reader-meta{display:flex;justify-content:space-between;gap:16px;padding:10px 0 14px;border-bottom:1px solid var(--line)}.article-reader-meta strong{font-size:13px}.article-reader-meta small{color:var(--muted);white-space:nowrap}.article-reader-scroll{margin-top:14px;min-height:120px;max-height:55vh;overflow:auto;padding:4px 10px 18px 0;line-height:1.65;color:var(--text);white-space:normal}

/* v0.26.27 — theme picker groups */
.theme-picker-section{display:grid;gap:10px;margin:8px 0 18px}.theme-picker-heading{font-size:10px;font-weight:1000;letter-spacing:.16em;opacity:.72}.theme-picker-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}

/* v0.26.27 — roster-aligned tactical action lanes and explicit success/fail/break states. */
#matchPanel .arena{--tactical-coin-clearance:clamp(104px,10vw,146px)}
#matchPanel .arena .tactical-fx-lane{
  top:50%!important;
  transform:translateY(-50%);
  display:grid!important;
  grid-template-rows:repeat(3,44px);
  grid-auto-flow:column;
  grid-auto-columns:44px;
  gap:5px 7px;
  width:auto;
  max-width:none;
  align-items:center;
  justify-items:center;
  z-index:9;
}
#matchPanel .arena .tactical-fx-left{left:auto!important;right:calc(50% + var(--tactical-coin-clearance));justify-content:end}
#matchPanel .arena .tactical-fx-right{right:auto!important;left:calc(50% + var(--tactical-coin-clearance));justify-content:start}
.tactical-fx-slot{width:44px;height:44px;display:grid;place-items:center;position:relative}
.tactical-fx-slot .tactical-fx{position:relative;width:42px;height:42px;font-size:27px}
.tactical-fx.tactical-break{animation:none!important;filter:none!important;color:#ff6679}
.tactical-fx.tactical-break b{opacity:0}
.tactical-fx.tactical-break::before,.tactical-fx.tactical-break::after{content:attr(data-glyph);position:absolute;inset:0;display:grid;place-items:center;font:inherit;font-weight:1000;color:#ff6679;filter:drop-shadow(0 0 9px rgba(255,70,90,.7))}
.tactical-fx.tactical-break::before{clip-path:polygon(0 0,52% 0,45% 42%,54% 48%,43% 100%,0 100%);animation:tacticalCrackLeft 1.15s .38s cubic-bezier(.45,.05,.8,.35) forwards}
.tactical-fx.tactical-break::after{clip-path:polygon(52% 0,100% 0,100% 100%,43% 100%,54% 48%,45% 42%);animation:tacticalCrackRight 1.15s .38s cubic-bezier(.45,.05,.8,.35) forwards}
#matchPanel .arena .tactical-fx-left .tactical-fail{animation-name:tacticalFallLeft}
#matchPanel .arena .tactical-fx-right .tactical-fail{animation-name:tacticalFallRight}
@keyframes tacticalFallLeft{25%{color:#ff7b87;filter:drop-shadow(0 0 10px rgba(255,80,95,.62))}to{opacity:0;color:#ff596d;transform:translate(-15px,55px) rotate(-24deg) scale(.76);filter:drop-shadow(0 0 5px rgba(255,55,70,.45))}}
@keyframes tacticalFallRight{25%{color:#ff7b87;filter:drop-shadow(0 0 10px rgba(255,80,95,.62))}to{opacity:0;color:#ff596d;transform:translate(15px,55px) rotate(24deg) scale(.76);filter:drop-shadow(0 0 5px rgba(255,55,70,.45))}}
@media(max-width:900px){
 #matchPanel .arena{--tactical-coin-clearance:86px}
 #matchPanel .arena .tactical-fx-lane{grid-template-rows:repeat(3,34px);grid-auto-columns:34px;gap:3px 4px}
 .tactical-fx-slot{width:34px;height:34px}.tactical-fx-slot .tactical-fx{width:32px;height:32px;font-size:21px}
}

/* v0.26.32 achievement completion metadata */
.achievement-completed-at{display:block;margin-top:5px;font-size:10px;letter-spacing:.06em;color:rgba(210,220,235,.58)}

/* v0.26.32 — keep the arena focal plane centered independently of result text/tactical rails. */
#matchPanel .arena{position:relative!important;display:block!important}
#matchPanel .arena #matchCoinShell{position:absolute!important;left:50%!important;top:45%!important;transform:translate(-50%,-50%)!important;margin:0!important}
#matchPanel .arena .round-score-callout{top:45%!important}
#matchPanel .arena #resultBanner{position:absolute!important;left:50%!important;top:calc(45% + 118px)!important;transform:translateX(-50%)!important;width:min(620px,72%)!important;text-align:center!important;margin:0!important;white-space:normal!important}
@media(max-width:900px){
  #matchPanel .arena #resultBanner{top:calc(45% + 92px)!important}
}
@media(max-width:620px){
  #matchPanel .arena #matchCoinShell{top:43%!important}
  #matchPanel .arena .round-score-callout{top:43%!important}
  #matchPanel .arena #resultBanner{top:calc(43% + 76px)!important}
}

/* v0.26.32 — theme collection sections occupy full rows; cards grid within each section. */
.theme-set-grid{display:block!important;width:100%}
.theme-picker-section{display:block!important;width:100%;margin:8px 0 22px}
.theme-picker-heading{display:block;width:100%;margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid color-mix(in srgb,var(--player-theme-accent) 20%,transparent)}
.theme-picker-list{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}

/* v0.26.32 — fixed-size row-first theme collection + compact rewards bonus control. */
.theme-picker-list{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,160px))!important;
  grid-auto-flow:row;
  justify-content:start;
  align-items:stretch;
  gap:10px;
}
.theme-set-card{width:160px;min-width:160px;max-width:160px}
.casual-rewards{position:relative;padding-right:92px}
.casual-bonuses-btn{position:absolute;right:12px;top:10px;width:auto!important;min-width:92px!important;padding:8px 14px!important;font-size:10px!important;letter-spacing:.08em;line-height:1.1}
.article-reader-card{position:relative;padding-top:24px}
.article-reader-card .modal-head{padding-right:38px}
.article-reader-close{
  position:absolute;right:14px;top:14px;width:30px;height:30px;padding:0!important;
  display:grid;place-items:center;border-radius:50%!important;font-size:18px!important;line-height:1;
}
@media(max-width:760px){.theme-picker-list{grid-template-columns:repeat(2,minmax(0,160px))!important}}
@media(max-width:390px){.theme-picker-list{grid-template-columns:minmax(0,160px)!important}}

/* v0.26.36 structured article/card bonus rows */
.article-reader-block{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.article-reader-block:last-child{border-bottom:0}
.article-reader-block-title{color:#ffd84d;font-weight:800;font-size:13px;letter-spacing:.055em}
.article-reader-block-reward{margin-top:3px;color:#ffd84d;font-weight:750;font-size:12px}
.article-reader-block-description{margin-top:4px;color:#fff;font-size:11px;font-weight:400;line-height:1.45;opacity:.9}

/* v0.26.36 — keep tactical resolution icons strictly in side lanes beside the coin. */
#matchPanel .arena{--tactical-coin-clearance:clamp(142px,13vw,184px)}
#matchPanel .arena .tactical-fx-lane{top:45%!important;bottom:auto!important;transform:translateY(-50%)!important;position:absolute!important;z-index:9!important}
#matchPanel .arena .tactical-fx-left{left:auto!important;right:calc(50% + var(--tactical-coin-clearance))!important}
#matchPanel .arena .tactical-fx-right{right:auto!important;left:calc(50% + var(--tactical-coin-clearance))!important}
@media(max-width:900px){#matchPanel .arena{--tactical-coin-clearance:112px}}
@media(max-width:620px){#matchPanel .arena{--tactical-coin-clearance:88px}#matchPanel .arena .tactical-fx-lane{top:43%!important}}

/* v0.26.36 — slot result badge + readable payout burst */
.slot-machine-stage{position:relative;margin:24px 0;overflow:visible}
.slot-machine-stage .slot-reels{margin:0}
.slot-result-box{position:absolute;right:10px;top:10px;z-index:8;min-width:96px;padding:7px 10px;border-radius:7px;border:1px solid #ffffff35;background:#f4f6f9;color:#20242b;font-size:12px;font-weight:950;letter-spacing:.06em;text-align:center;box-shadow:0 6px 18px #0007;transition:background .18s,color .18s,box-shadow .18s}
.slot-result-box.payout{background:#ffd65a;color:#261c00;border-color:#ffe793}.slot-result-box.triple{animation:slotResultTriple 1.35s ease-in-out 2}
@keyframes slotResultTriple{0%,100%{background:#ffd65a;box-shadow:0 6px 18px #0007}50%{background:#6cef9b;box-shadow:0 0 28px #6cef9b88}}
.slot-payout-burst{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:visible}
.slot-payout-number{position:absolute;left:50%;top:38%;font-size:32px;font-weight:1000;color:#ffe47c;text-shadow:0 2px 3px #000,0 0 18px #ffca4c;white-space:nowrap;animation:slotPayoutNumber 2.35s cubic-bezier(.15,.7,.2,1) forwards}
@keyframes slotPayoutNumber{0%{opacity:0;transform:translate(-50%,0) scale(.55) rotate(-2deg)}15%{opacity:1;transform:translate(-50%,-32px) scale(1.12) rotate(1deg)}62%{opacity:1;transform:translate(calc(-50% + var(--drift,0px)),28px) scale(1) rotate(var(--tilt,2deg))}100%{opacity:0;transform:translate(calc(-50% + var(--drift,0px)),125px) scale(.9) rotate(var(--tilt,2deg))}}

/* v0.26.38 — slots result belongs to the machine card, not a reel cell. */
#view-casino .slots-card{position:relative}
#view-casino .slots-card>.slot-result-box{position:absolute;right:24px;top:24px;z-index:14;min-width:132px;padding:10px 14px;font-size:16px;border-radius:9px}
#view-casino .slot-result-box.triple{animation:slotResultTriplePersistent 1.15s ease-in-out infinite}
@keyframes slotResultTriplePersistent{0%,100%{background:#ffd65a;color:#261c00;border-color:#ffe793;box-shadow:0 6px 18px #0007}50%{background:#6cef9b;color:#07180d;border-color:#9cffbd;box-shadow:0 0 28px #6cef9b88}}
@media(max-width:700px){#view-casino .slots-card>.slot-result-box{right:16px;top:16px;min-width:112px;font-size:14px}}

/* v0.26.38 — Profile performance + full theme surface.
   Profile owns the main viewport background instead of layering theme ambience over the
   default blue shell. Keep the page static/compositor-cheap: no full-page filters,
   backdrop blurs, or continuously animated giant pseudo-elements. */
body[data-active-view="stats"] .main{
  background:
    radial-gradient(circle at 18% 18%,color-mix(in srgb,var(--player-theme-accent) 22%,transparent),transparent 30%),
    radial-gradient(circle at 82% 24%,color-mix(in srgb,var(--player-theme-accent2) 18%,transparent),transparent 34%),
    radial-gradient(circle at 55% 88%,var(--player-theme-glow),transparent 38%),
    linear-gradient(145deg,var(--player-theme-bg),var(--player-theme-bg2))!important;
  background-attachment:local!important;
}
body[data-active-view="stats"] #view-stats::before,
body[data-active-view="stats"] #view-stats::after{display:none!important}
body[data-active-view="stats"] #view-stats .card{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:linear-gradient(145deg,var(--player-theme-panel),color-mix(in srgb,var(--player-theme-bg2) 88%,#05080f))!important;
  box-shadow:0 10px 30px rgba(0,0,0,.16)!important;
}
body[data-active-view="stats"] #view-stats .profile-history-card{contain:layout style!important}
/* Equipped color theme extends into the persistent chrome without recoloring the whole topbar. */
body[data-player-theme] .sidebar{
  background:linear-gradient(180deg,color-mix(in srgb,var(--player-theme-bg2) 90%,#05070d),color-mix(in srgb,var(--player-theme-bg) 94%,#030509))!important;
  box-shadow:18px 0 60px rgba(0,0,0,.34),inset -1px 0 color-mix(in srgb,var(--player-theme-accent) 22%,transparent)!important;
}
body[data-player-theme] .topbar{
  border-bottom:1px solid color-mix(in srgb,var(--player-theme-accent) 48%,rgba(255,255,255,.08))!important;
  box-shadow:0 1px 0 color-mix(in srgb,var(--player-theme-accent2) 15%,transparent)!important;
}

/* v0.26.39 — tactical actions stay neutral until the coin lands; only blocked DD uses break FX. */
#matchPanel .tactical-fx{color:#f7fbff!important;filter:drop-shadow(0 0 7px rgba(255,255,255,.28));animation:tacticalAppear .2s ease-out both}
#matchPanel .tactical-double b{font-family:Arial,sans-serif;letter-spacing:-.06em;transform:none;color:inherit;font-size:.98em;line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.16)}
#matchPanel .tactical-guard b{color:inherit}
#matchPanel .tactical-fx.tactical-success{color:#fff!important;animation:tacticalRiseGlow 1.08s ease-out forwards}
#matchPanel .tactical-fx.tactical-fail{color:#fff!important;animation-duration:1.12s;animation-delay:0s}
#matchPanel .tactical-fx.tactical-break{color:#fff!important}
#matchPanel .tactical-fx.tactical-break::before,#matchPanel .tactical-fx.tactical-break::after{animation-delay:0s}
.round-participation.double-success{color:#ffd45e;text-shadow:0 0 8px rgba(255,212,94,.34)}


/* v0.26.40 — a Guard-broken Double Down that was also an incorrect call breaks neutrally, not as a red failure. */
#matchPanel .tactical-fx.tactical-break.tactical-break-neutral::before,
#matchPanel .tactical-fx.tactical-break.tactical-break-neutral::after{color:#f7fbff!important;filter:drop-shadow(0 0 7px rgba(255,255,255,.3))!important}

/* v0.26.42 — shared overlay taxonomy + themed public player cards. */
.overlay-card,.overlay-menu{isolation:isolate}
.overlay-card:not(.hidden),.overlay-menu:not(.hidden){overscroll-behavior:contain}
.overlay-card .modal-panel,.overlay-card>.card,.overlay-menu .modal-panel,.overlay-menu .modal-card,.overlay-menu>.card{position:relative}
.overlay-card .modal-close,.overlay-menu .modal-close,.overlay-menu .modal-x{z-index:25}
.overlay-popover{isolation:isolate}
.overlay-toast{isolation:isolate}

/* A player's equipped Color Theme owns the public card's surface, accents and ambience. */
#publicProfileBody.themed-public-profile{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid color-mix(in srgb,var(--public-theme-accent,#77c9ff) 30%,rgba(255,255,255,.08));
  background:
    radial-gradient(circle at 88% 8%,var(--public-theme-glow,rgba(78,177,255,.3)),transparent 34%),
    radial-gradient(circle at 12% 92%,color-mix(in srgb,var(--public-theme-accent2,#8a7dff) 18%,transparent),transparent 36%),
    linear-gradient(145deg,var(--public-theme-bg,#0b1d31),color-mix(in srgb,var(--public-theme-bg,#0b1d31) 72%,#03070c))!important;
  box-shadow:0 20px 55px rgba(0,0,0,.42),0 0 34px color-mix(in srgb,var(--public-theme-glow,rgba(78,177,255,.3)) 60%,transparent);
}
#publicProfileBody.themed-public-profile::before{content:"";position:absolute;inset:-35%;z-index:-1;pointer-events:none;background:conic-gradient(from 15deg,transparent 0 20%,color-mix(in srgb,var(--public-theme-accent,#77c9ff) 14%,transparent) 27%,transparent 34% 62%,color-mix(in srgb,var(--public-theme-accent2,#8a7dff) 12%,transparent) 69%,transparent 77%);animation:playerCardThemeDrift 14s linear infinite}
#publicProfileBody.themed-public-profile .public-equipped,#publicProfileBody.themed-public-profile .public-rank-identity,#publicProfileBody.themed-public-profile .profile-grid>div{background:color-mix(in srgb,var(--public-theme-panel,rgba(9,24,40,.86)) 90%,transparent);border-color:color-mix(in srgb,var(--public-theme-accent,#77c9ff) 18%,rgba(255,255,255,.08))}
#publicProfileBody.themed-public-profile .eyebrow,#publicProfileBody.themed-public-profile .profile-presence,#publicProfileBody.themed-public-profile .profile-grid small,#publicProfileBody.themed-public-profile .public-equipped small{color:color-mix(in srgb,var(--public-theme-accent,#77c9ff) 72%,#d9e4ef)}
@keyframes playerCardThemeDrift{to{transform:rotate(360deg)}}

/* The Admin reuses the same player-card theme language; only its side tools remain Admin-specific. */
.admin-shared-profile.themed-admin-player-card{position:relative;overflow:hidden;border-radius:12px;padding:14px;border:1px solid color-mix(in srgb,var(--public-theme-accent,#77c9ff) 28%,rgba(255,255,255,.08));background:radial-gradient(circle at 88% 8%,var(--public-theme-glow,rgba(78,177,255,.3)),transparent 35%),linear-gradient(145deg,var(--public-theme-bg,#0b1d31),#060b12);box-shadow:0 16px 42px rgba(0,0,0,.34)}

/* v0.26.45 — theme rarity language + capsule rarity-pool integration. */
/* Standard/Epic cards are static. Legendary authored themes opt into ambience explicitly. */
#publicProfileBody.themed-public-profile::before{display:none!important;animation:none!important}
#publicProfileBody.themed-public-profile.theme-animated::before{display:block!important;animation:playerCardThemeDrift 14s linear infinite!important}
.admin-shared-profile.themed-admin-player-card::before{display:none}
.admin-shared-profile.themed-admin-player-card.theme-animated::before{content:"";position:absolute;inset:-35%;pointer-events:none;background:conic-gradient(from 15deg,transparent 0 20%,color-mix(in srgb,var(--public-theme-accent,#77c9ff) 13%,transparent) 27%,transparent 35% 62%,color-mix(in srgb,var(--public-theme-accent2,#8a7dff) 11%,transparent) 70%,transparent 78%);animation:playerCardThemeDrift 14s linear infinite}
body[data-active-view="stats"][data-theme-motion="animated"] .main{background-image:radial-gradient(circle at 18% 18%,color-mix(in srgb,var(--player-theme-accent) 28%,transparent),transparent 30%),radial-gradient(circle at 82% 24%,color-mix(in srgb,var(--player-theme-accent2) 24%,transparent),transparent 34%),radial-gradient(circle at 55% 88%,var(--player-theme-glow),transparent 38%),linear-gradient(145deg,var(--player-theme-bg),var(--player-theme-bg2))!important}
.capsule-pool-theme .capsule-theme-swatch{width:70px;height:70px;border-radius:14px;border:1px solid color-mix(in srgb,var(--pool-theme-a) 50%,#fff);background:radial-gradient(circle at 70% 25%,var(--pool-theme-b),transparent 42%),linear-gradient(145deg,var(--pool-theme-bg),var(--pool-theme-a));box-shadow:0 0 20px color-mix(in srgb,var(--pool-theme-a) 28%,transparent)}
\n\n/* v0.26.45 — Queue Versus Token asset repair + compositor-friendly smooth flip. */
.queue-vs-coin{
  transform-style:flat!important;
  animation:queueVsSmoothFlip 3.4s cubic-bezier(.42,0,.22,1) infinite!important;
  will-change:transform;
  filter:drop-shadow(0 0 14px rgba(100,235,255,.56)) drop-shadow(0 0 28px rgba(112,92,255,.26));
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
}
.queue-vs-face{will-change:opacity;transform:translateZ(0)!important}
.queue-vs-front{animation:queueVsSmoothHeads 3.4s linear infinite!important}
.queue-vs-back{animation:queueVsSmoothTails 3.4s linear infinite!important}
.queue-vs-aura{animation:queueAuraSmooth 3.4s ease-in-out infinite!important;will-change:transform,opacity}
@keyframes queueVsSmoothFlip{
  0%{transform:translate3d(0,0,0) rotateZ(-1.5deg) scaleX(1)}
  20%{transform:translate3d(0,-7px,0) rotateZ(1deg) scaleX(.78)}
  29.5%{transform:translate3d(0,-11px,0) rotateZ(2deg) scaleX(.055)}
  39%{transform:translate3d(0,-7px,0) rotateZ(.5deg) scaleX(.78)}
  50%{transform:translate3d(0,0,0) rotateZ(-1.5deg) scaleX(1)}
  70%{transform:translate3d(0,-7px,0) rotateZ(-2deg) scaleX(.78)}
  79.5%{transform:translate3d(0,-11px,0) rotateZ(-1deg) scaleX(.055)}
  89%{transform:translate3d(0,-6px,0) rotateZ(.5deg) scaleX(.78)}
  100%{transform:translate3d(0,0,0) rotateZ(-1.5deg) scaleX(1)}
}
@keyframes queueVsSmoothHeads{0%,28.5%{opacity:1}30.5%,78.5%{opacity:0}80.5%,100%{opacity:1}}
@keyframes queueVsSmoothTails{0%,28.5%{opacity:0}30.5%,78.5%{opacity:1}80.5%,100%{opacity:0}}
@keyframes queueAuraSmooth{0%,100%{transform:translate3d(-50%,-50%,0) scale(.94);opacity:.62}50%{transform:translate3d(-50%,-50%,0) scale(1.08);opacity:.92}}
.queue-vs-coin-wrap.match-found .queue-vs-coin{animation:queueFoundSmoothFlip .92s cubic-bezier(.18,.76,.22,1) both!important}
@keyframes queueFoundSmoothFlip{0%{transform:translate3d(0,0,0) scale(.9) scaleX(1)}35%{transform:translate3d(0,-13px,0) scale(1.05) scaleX(.06)}65%{transform:translate3d(0,-6px,0) scale(1.13) scaleX(1)}100%{transform:translate3d(0,0,0) scale(1.1)}}

/* v0.26.48 — Queue Versus Token guaranteed face swap.
   Deliberately use a flat edge-flip instead of browser backface compositing: the
   wrapper becomes edge-on, then the artwork swaps while its width is ~zero. */
.queue-vs-coin{
  transform-style:flat!important;
  animation:queueVsGuaranteedFlip 2.15s linear infinite!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  will-change:transform;
}
.queue-vs-face{
  transform:none!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  will-change:opacity;
}
.queue-vs-front{animation:queueVsGuaranteedHeads 2.15s step-end infinite!important}
.queue-vs-back{animation:queueVsGuaranteedTails 2.15s step-end infinite!important}
@keyframes queueVsGuaranteedFlip{
  0%{transform:translate3d(0,0,0) scaleX(1)}
  25%{transform:translate3d(0,0,0) scaleX(.015)}
  50%{transform:translate3d(0,0,0) scaleX(1)}
  75%{transform:translate3d(0,0,0) scaleX(.015)}
  100%{transform:translate3d(0,0,0) scaleX(1)}
}
@keyframes queueVsGuaranteedHeads{0%,24.999%{opacity:1}25%,74.999%{opacity:0}75%,100%{opacity:1}}
@keyframes queueVsGuaranteedTails{0%,24.999%{opacity:0}25%,74.999%{opacity:1}75%,100%{opacity:0}}
.queue-vs-coin-wrap.match-found .queue-vs-coin{animation:queueFoundGuaranteedFlip .95s linear both!important}
.queue-vs-coin-wrap.match-found .queue-vs-front{animation:queueFoundGuaranteedHeads .95s step-end both!important}
.queue-vs-coin-wrap.match-found .queue-vs-back{animation:queueFoundGuaranteedTails .95s step-end both!important}
@keyframes queueFoundGuaranteedFlip{0%{transform:scale(1) scaleX(1)}25%{transform:scale(1.05) scaleX(.015)}50%{transform:scale(1.08) scaleX(1)}75%{transform:scale(1.1) scaleX(.015)}100%{transform:scale(1.1) scaleX(1)}}
@keyframes queueFoundGuaranteedHeads{0%,24.999%{opacity:1}25%,74.999%{opacity:0}75%,100%{opacity:1}}
@keyframes queueFoundGuaranteedTails{0%,24.999%{opacity:0}25%,74.999%{opacity:1}75%,100%{opacity:0}}


/* v0.26.54 — short-Chrome match control persistence.
   Keep the call controls mounted and visible while a submitted call resolves.
   Older v0.14.26 hid the whole choice area, causing a layout collapse/reflow on
   short AUTO-fit Chrome viewports (e.g. 1366x599) and the controls could remain
   visually below the clipped match canvas after round one.  The controls now
   stay in their reserved flex slot, visibly locked, then reactivate next round. */
body.match-locked .choice-area.choice-area-hidden{
  visibility:visible!important;
  opacity:.38!important;
  pointer-events:none!important;
}
body.match-locked .choice-area.choice-area-hidden .choice,
body.match-locked .choice-area.choice-area-hidden .lock-call{
  filter:saturate(.55) brightness(.78);
}
@media(min-width:861px) and (max-height:700px){
  body.match-locked .match-emote-dock{height:46px!important;margin-top:-8px!important;padding-top:0!important}
  body.match-locked .match-emote-dock .emote-wheel,
  body.match-locked .match-emote-dock .emote-wheel-toggle{width:40px!important;height:40px!important;flex-basis:40px!important}
  body.match-locked .choice-area{padding-top:3px!important}
  body.match-locked #matchPanel .lock-call{min-height:40px!important}
  body.match-locked #matchPanel .choice{min-height:42px!important;padding:6px 10px!important}
}

/* v0.26.58 — round-based tactical cooldown readouts. */
.tactical-choice.used{opacity:.58;text-decoration:none;cursor:not-allowed}
.tactical-choice.used small{color:var(--accent);font-weight:950}
.team-tactical-status{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;margin-left:auto}
.opponent-roster .team-tactical-status{margin-left:0;margin-right:auto}
.tactical-status-icon{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border:1px solid rgba(255,255,255,.16);border-radius:5px;background:rgba(3,8,15,.72);font-size:8px;font-weight:950;line-height:1;color:#dbe8f7;box-shadow:inset 0 0 10px rgba(255,255,255,.025)}
.tactical-status-double{color:#ffd78a;border-color:rgba(255,199,89,.28)}
.tactical-status-guard{color:#9ed8ff;border-color:rgba(99,179,255,.3)}
@media(max-width:860px){.tactical-status-icon{min-width:17px;height:17px;padding:0 3px;font-size:7px}.team-tactical-status{gap:2px}}


/* v0.26.59 — tactical readiness roster symbols + stable cooldown button labels. */
.team-player-row{position:relative!important}
.team-tactical-status{position:absolute!important;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:5px;margin:0!important;z-index:2}
.own-roster .team-tactical-status{right:9px!important;left:auto!important}
.opponent-roster .team-tactical-status{left:9px!important;right:auto!important}
.tactical-status-icon{display:inline-grid;place-items:center;width:18px;min-width:18px;height:18px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:14px;font-weight:1000;line-height:1}
.tactical-status-icon b{display:block;line-height:1}
.tactical-status-double{color:#ffd45e}
.tactical-status-double b{font-family:Arial,sans-serif;letter-spacing:-.12em;transform:translateX(-1px);font-size:14px}
.tactical-status-guard{color:#f2f7ff;filter:grayscale(1) brightness(1.8)}
.tactical-status-guard b{font-size:14px}
#matchPanel .arena-tactical-panel .tactical-choice{display:grid;grid-template-rows:auto 11px;align-content:center;justify-items:center;row-gap:2px}
#matchPanel .arena-tactical-panel .tactical-choice-name{display:block;line-height:1.05}
#matchPanel .arena-tactical-panel .tactical-choice small{display:block!important;min-height:11px;height:11px;margin:0;font-size:9px;line-height:11px;letter-spacing:.08em}
#matchPanel .arena-tactical-panel .tactical-choice small.cooldown-empty{visibility:hidden}
@media(max-width:860px){.own-roster .team-tactical-status{right:5px!important}.opponent-roster .team-tactical-status{left:5px!important}.tactical-status-icon{width:15px;min-width:15px;height:15px;font-size:12px}.tactical-status-double b,.tactical-status-guard b{font-size:12px}}


/* v0.26.62 — tactical readiness side correction + boxed mini glyphs. */
/* Left-side rosters explicitly carry .own-roster; reserve the outer edge for ready tacticals. */
.own-roster .team-player-row{padding-right:58px!important}
.opponent-roster .team-player-row{padding-left:58px!important}
.own-roster .team-tactical-status{right:9px!important;left:auto!important}
.opponent-roster .team-tactical-status{left:9px!important;right:auto!important}
.tactical-status-icon{
  display:inline-grid;place-items:center;width:20px;min-width:20px;height:20px;padding:0;
  border:1px solid rgba(255,255,255,.16);border-radius:5px;background:rgba(3,8,15,.72);
  box-shadow:inset 0 0 10px rgba(255,255,255,.025);font-size:13px;font-weight:1000;line-height:1
}
.tactical-status-double{color:#ffd45e;border-color:rgba(255,199,89,.34);background:rgba(255,199,89,.055)}
.tactical-status-guard{color:#f2f7ff;border-color:rgba(220,235,255,.24);background:rgba(220,235,255,.045);filter:none}
.tactical-status-double b{font-family:Arial,sans-serif;letter-spacing:-.12em;transform:translateX(-1px);font-size:13px}
.tactical-status-guard b{font-size:13px}
@media(max-width:860px){
  .own-roster .team-player-row{padding-right:47px!important}
  .opponent-roster .team-player-row{padding-left:47px!important}
  .tactical-status-icon{width:17px;min-width:17px;height:17px;font-size:11px}
  .tactical-status-double b,.tactical-status-guard b{font-size:11px}
}

/* v0.26.62 — result headline is a fixed, protected layout slot.
   Variable bonus/payout copy may compact/scroll, but can never push or clip the result word. */
#victoryOverlay.victory-overlay{
  padding:16px 28px!important;
  overflow:hidden!important;
}
#victoryOverlay .victory-copy{
  width:min(760px,calc(100% - 56px))!important;
  max-width:calc(100% - 56px)!important;
  max-height:calc(100% - 32px)!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:auto auto 76px auto auto minmax(0,auto) auto!important;
  align-content:center!important;
  row-gap:5px!important;
  padding:18px 34px!important;
  overflow:hidden!important;
}
#victoryOverlay #victoryTitle,
#victoryOverlay.risk-allin #victoryTitle,
#victoryOverlay.loss #victoryTitle,
#victoryOverlay.draw #victoryTitle{
  font-size:64px!important;
  line-height:76px!important;
  height:76px!important;
  min-height:76px!important;
  max-height:76px!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0 .08em!important;
  white-space:nowrap!important;
  overflow:visible!important;
  display:block!important;
  box-sizing:border-box!important;
  align-self:center!important;
}
#victoryOverlay .risk-callout,
#victoryOverlay .victory-stake,
#victoryOverlay .victory-performance,
#victoryOverlay .victory-copy p,
#victoryOverlay .payout-counter{margin-top:0!important;margin-bottom:0!important}
#victoryOverlay #victoryReward{
  max-height:3.2em!important;
  overflow:auto!important;
  scrollbar-width:thin;
  line-height:1.35!important;
}
#victoryOverlay .payout-counter{min-height:1.2em!important}
@media(max-height:560px){
  #victoryOverlay .victory-copy{row-gap:2px!important;padding-top:10px!important;padding-bottom:10px!important}
  #victoryOverlay .risk-callout,#victoryOverlay .victory-stake,#victoryOverlay .victory-performance,#victoryOverlay #victoryReward{font-size:9px!important}
  #victoryOverlay .payout-counter{font-size:16px!important}
}

/* v0.26.62 — resolved roster calls use a clear correctness fill while preserving white labels. */
.team-player-call.call-win{
  color:#fff!important;
  background:rgba(28,145,88,.78)!important;
  border-color:rgba(105,255,172,.88)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 12px rgba(65,225,139,.20)!important;
}
.team-player-call.call-loss{
  color:#fff!important;
  background:rgba(174,42,61,.80)!important;
  border-color:rgba(255,105,125,.88)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 12px rgba(255,70,96,.18)!important;
}

/* v0.27.4 local performance telemetry */
.settings-toggle-group{display:flex;align-items:center;justify-content:space-between;gap:18px}
.settings-toggle-group>div{min-width:0}.settings-toggle{width:76px;min-width:76px;height:32px;border-radius:18px;padding:3px 7px;display:flex;align-items:center;justify-content:space-between;gap:5px;background:#17202b;border:1px solid rgba(255,255,255,.12)}
.settings-toggle span{width:20px;height:20px;border-radius:50%;background:#718397;transition:transform .18s ease,background .18s ease}.settings-toggle strong{font-size:9px;color:#91a2b6}.settings-toggle.active{border-color:rgba(93,216,255,.5)}.settings-toggle.active span{transform:translateX(7px);background:#5dd8ff}.settings-toggle.active strong{color:#8fe8ff}
.performance-telemetry-overlay{position:fixed;z-index:99999;top:10px;left:10px;pointer-events:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;line-height:1.45;color:#e9f7ff;background:rgba(4,9,14,.88);border:1px solid rgba(93,216,255,.35);border-radius:7px;padding:7px 9px;box-shadow:0 6px 22px rgba(0,0,0,.35);max-width:min(92vw,540px)}
.performance-telemetry-overlay>div{display:flex;gap:11px;align-items:center;flex-wrap:wrap}.performance-telemetry-overlay b{color:#5dd8ff;letter-spacing:.08em}.performance-telemetry-overlay span{white-space:nowrap}

/* v0.27.4 — unified round-result treatment for 1v1 and team matches. */
#matchPanel .arena .result-banner.good,
#matchPanel .arena .result-banner.bad{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:min(92%,760px);
  min-height:48px;
  padding:10px 18px;
  border:1px solid transparent;
  border-radius:9px;
  color:#ffe06a!important;
  text-shadow:0 0 16px rgba(255,224,106,.42)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 0 24px rgba(255,255,255,.035);
  backdrop-filter:blur(5px);
}
#matchPanel .arena .result-banner.good{
  background:rgba(27,112,70,.84)!important;
  border-color:rgba(103,239,172,.58)!important;
}
#matchPanel .arena .result-banner.bad{
  background:rgba(137,36,52,.86)!important;
  border-color:rgba(255,101,119,.60)!important;
}

/* v0.27.7 — robust Market analytics rendering + scroll containment. */
.market-price-svg{display:block;width:100%;height:clamp(300px,42vh,470px);min-height:300px}
.market-price-svg-canvas{display:block;width:100%;height:100%;overflow:visible}
.market-svg-grid{stroke:rgba(255,255,255,.10);stroke-width:1;vector-effect:non-scaling-stroke}
.market-svg-label{fill:rgba(220,233,245,.58);font:11px Arial,sans-serif}
.market-svg-store{stroke:rgba(255,214,90,.52);stroke-width:1.5;stroke-dasharray:7 6;vector-effect:non-scaling-stroke}
.market-svg-store-label{fill:rgba(255,214,90,.82);font:11px Arial,sans-serif}
.market-svg-reference{fill:none;stroke:rgba(100,200,255,.96);stroke-width:3;vector-effect:non-scaling-stroke}
.market-svg-trade{fill:rgba(245,248,255,.98);stroke:rgba(20,25,34,.9);stroke-width:1.5;vector-effect:non-scaling-stroke}
.market-svg-volume{fill:rgba(220,233,245,.34)}
body[data-active-view="market"] #marketGraphPanel{overflow:visible!important}
body[data-active-view="market"] #view-market.active{overflow:visible!important;max-height:none!important;height:auto!important;padding-bottom:40px!important}
@media(max-height:760px){.market-price-svg{height:320px}.market-chart-feature{min-height:0}}

/* v0.27.10 — canvas Market chart and short-viewport scrolling. */
.market-price-canvas{display:block;width:100%;height:clamp(320px,42vh,470px);min-height:320px}
body[data-active-view="market"]{overflow-y:auto!important}
body[data-active-view="market"] #marketGraphPanel{overflow:visible!important}
@media(max-height:760px){.market-price-canvas{height:340px}.market-chart-stage{min-height:340px}}

/* v0.27.11 — DOM/SVG Market chart: no canvas runtime dependency. */
.market-price-chart{display:block;width:100%;height:clamp(320px,42vh,470px);min-height:320px}
.market-price-chart .market-price-svg{display:block;width:100%;height:100%;min-height:320px}
.market-svg-grid{stroke:rgba(255,255,255,.10);stroke-width:1;vector-effect:non-scaling-stroke}
.market-svg-label-end{text-anchor:end}
body[data-active-view="market"] #marketGraphPanel{overflow:visible!important;max-height:none!important;height:auto!important}
body[data-active-view="market"] #view-market.active{overflow:visible!important;max-height:none!important;height:auto!important;padding-bottom:64px!important}
body[data-active-view="market"] .main{overflow:visible!important}
@media(max-height:760px){.market-price-chart,.market-price-chart .market-price-svg{height:340px;min-height:340px}.market-chart-stage{min-height:340px}}

/* v0.27.14 — canonical Market history + compact analytics viewport. */
.market-price-chart{height:330px!important;min-height:330px!important}
.market-price-chart .market-price-svg{height:330px!important;min-height:330px!important;preserve-aspect-ratio:xMidYMid meet}
.market-chart-stage{min-height:330px!important;overflow:visible!important}
body[data-active-view="market"],body[data-active-view="market"] .app-shell,body[data-active-view="market"] .main{height:auto!important;min-height:100vh!important;overflow:visible!important}
html:has(body[data-active-view="market"]){overflow-y:auto!important}
body[data-active-view="market"]{overflow-y:auto!important;padding-bottom:72px!important}
@media(max-height:760px){.market-price-chart,.market-price-chart .market-price-svg,.market-chart-stage{height:300px!important;min-height:300px!important}}

/* v0.27.25 — history hover overlays are stage-local at every viewport scale. */
.profile-history-stage > .time-graph-hover-point.shared,
.profile-history-stage > .time-graph-tooltip.shared,
.market-chart-stage > .time-graph-hover-point.shared,
.market-chart-stage > .time-graph-tooltip.shared,
.server-chart-stage > .time-graph-hover-point.shared,
.server-chart-stage > .time-graph-tooltip.shared{
  position:absolute!important;
}

/* v0.27.25 — capsule tier identity + stronger storage rarity glow. */
.capsule-tier-standard{--capsule-tier-color:#cbd8e6;--capsule-tier-glow:rgba(203,216,230,.18)}
.capsule-tier-refined{--capsule-tier-color:#65d9ef;--capsule-tier-glow:rgba(70,209,233,.28)}
.capsule-tier-prestige{--capsule-tier-color:#d990ff;--capsule-tier-glow:rgba(201,96,255,.34)}
.capsule-tier-apex{--capsule-tier-color:#ffc55d;--capsule-tier-glow:rgba(255,183,69,.46)}
.capsule-tier .capsule-tier-art span{color:var(--capsule-tier-color);filter:drop-shadow(0 0 18px var(--capsule-tier-glow))}
.capsule-tier .eyebrow,.capsule-tier > p{color:var(--capsule-tier-color)}
.capsule-tier > p{opacity:.78}
.tank-capsule-standard{box-shadow:inset 0 0 14px rgba(203,216,230,.10),0 0 10px rgba(203,216,230,.10)}
.tank-capsule-refined{box-shadow:0 0 22px rgba(70,209,233,.30),0 0 8px rgba(70,209,233,.24),inset 0 0 16px rgba(70,209,233,.16)}
.tank-capsule-prestige{box-shadow:0 0 29px rgba(201,96,255,.40),0 0 11px rgba(201,96,255,.30),inset 0 0 18px rgba(201,96,255,.20)}
.tank-capsule-apex{box-shadow:0 0 38px rgba(255,183,69,.52),0 0 15px rgba(255,214,105,.38),inset 0 0 20px rgba(255,188,69,.24)}
.tank-capsule.dragging{z-index:8;filter:brightness(1.22)}

/* v0.27.25 — phone-first responsive shell (landscape primary, portrait fallback). */
@media (max-width:950px){
  :root{--phone-nav-h:52px}
  html,body{width:100%;max-width:100%;min-height:100%;overflow-x:hidden!important;-webkit-text-size-adjust:100%;touch-action:manipulation}
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .app-shell{display:block!important;width:100%!important;height:auto!important;min-height:100dvh!important;overflow:visible!important}
  .sidebar{display:block!important;position:sticky!important;top:0!important;left:auto!important;width:100%!important;height:var(--phone-nav-h)!important;min-height:var(--phone-nav-h)!important;padding:5px max(8px,env(safe-area-inset-left))!important;border:0!important;border-bottom:1px solid #263247!important;background:rgba(7,11,18,.98)!important;z-index:160!important;overflow:hidden!important}
  .sidebar .brand,.sidebar .sidebar-footer{display:none!important}
  .sidebar .nav{height:42px!important;display:flex!important;flex-direction:row!important;align-items:stretch!important;gap:5px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:0 max(8px,env(safe-area-inset-right)) 2px 0!important}
  .sidebar .nav::-webkit-scrollbar{display:none}
  .sidebar .nav button{flex:0 0 auto!important;min-width:64px!important;min-height:38px!important;padding:7px 10px!important;border:1px solid transparent!important;border-left:1px solid transparent!important;border-radius:8px!important;text-align:center!important;font-size:10px!important;line-height:1.05!important;white-space:nowrap!important;transform:none!important}
  .sidebar .nav button.active{border-color:rgba(231,189,88,.55)!important;background:linear-gradient(180deg,#1b2638,#101722)!important}
  .main{width:100%!important;max-width:none!important;height:auto!important;min-height:calc(100dvh - var(--phone-nav-h))!important;padding:0 10px max(20px,env(safe-area-inset-bottom))!important;overflow:visible!important;scrollbar-gutter:auto!important}
  .topbar{position:sticky!important;top:var(--phone-nav-h)!important;width:calc(100% + 20px)!important;height:56px!important;min-height:56px!important;margin:0 -10px 10px!important;padding:5px 10px!important;gap:8px!important;z-index:150!important}
  .top-title{font-size:14px!important}.top-subtitle,.client-version{display:none!important}
  .player-summary{margin-left:auto!important;gap:5px!important;min-width:0!important;flex-wrap:nowrap!important}
  .notification-btn,.settings-gear{width:36px!important;min-width:36px!important;height:36px!important;padding:0!important}
  .account-pill{min-width:0!important;max-width:150px!important;height:38px!important;padding:4px 7px!important;gap:5px!important}
  .account-pill .user-coin-badge{width:27px!important;height:27px!important;min-width:27px!important}.account-pill .profile-link{max-width:78px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:10px!important}.account-pill .mini-action{display:none!important}
  .rank-chip.rank-mini-panel{min-width:86px!important;height:38px!important;padding:4px 7px!important}.rank-mini-emblem{transform:scale(.82)}.rank-mini-copy span{font-size:8px!important}.rank-mini-copy small{font-size:8px!important}
  .currency{height:38px!important;padding:9px 8px!important;font-size:11px!important;white-space:nowrap!important}
  .card{padding:14px!important;border-radius:11px!important}.hero{min-height:250px!important;grid-template-columns:minmax(0,1fr) 210px!important}.hero h1{font-size:clamp(30px,6vw,46px)!important}.hero-actions{margin-top:18px!important;flex-wrap:wrap!important}.hero-actions button{min-height:44px!important}.hero-coin-wrap{display:grid!important;transform:scale(.78)}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.stat-card strong{font-size:20px!important}
  .mode-grid,.casual-format-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.mode-card,.casual-format-card{min-height:300px!important;padding:15px!important}.mode-card h2,.casual-format-card h3{font-size:27px!important}
  .shop-grid,.bot-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.profile-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .market-hero{gap:10px!important}.market-hero-metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important}.market-toolbar,.market-tabs{overflow-x:auto!important;white-space:nowrap!important}.market-panel{min-width:0!important}
  body[data-active-view="market"] .main,body[data-active-view="market"] #view-market.active{height:auto!important;max-height:none!important;overflow:visible!important}
  #view-gacha .capsule-tank{height:clamp(230px,45dvh,340px)!important;min-height:230px!important}
  button,.primary,.secondary,.choice,.mini-action{touch-action:manipulation}.primary,.secondary,.choice{min-height:42px}
  .standalone-modal{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important}.standalone-modal>.card{max-height:calc(100dvh - 16px)!important}
  .notification-popover{top:calc(var(--phone-nav-h) + 58px)!important;right:8px!important;width:min(390px,calc(100vw - 16px))!important;max-height:calc(100dvh - var(--phone-nav-h) - 70px)!important}
  .toast{right:max(10px,env(safe-area-inset-right))!important;bottom:max(10px,env(safe-area-inset-bottom))!important;max-width:calc(100vw - 20px)!important}
  .leader-row{grid-template-columns:42px minmax(0,1fr) minmax(110px,auto)!important;gap:8px!important}
}

/* Landscape phones: prioritize the playfield and keep the HUD shallow. */
@media (max-width:950px) and (orientation:landscape) and (max-height:560px){
  :root{--phone-nav-h:44px}
  .sidebar{height:44px!important;min-height:44px!important;padding-top:3px!important;padding-bottom:3px!important}.sidebar .nav{height:38px!important}.sidebar .nav button{min-height:34px!important;padding:5px 9px!important;font-size:9px!important}
  .topbar{height:48px!important;min-height:48px!important}.notification-btn,.settings-gear,.account-pill,.rank-chip.rank-mini-panel,.currency{height:34px!important}.notification-btn,.settings-gear{width:34px!important;min-width:34px!important}
  .hero{min-height:205px!important}.hero-coin-wrap{transform:scale(.64)}.card{padding:11px!important}.grid-4,.grid-3,.grid-2{margin-top:8px!important}
  #view-gacha .capsule-tank{height:210px!important;min-height:210px!important}
  #matchPanel .arena-card,.arena-card{min-height:calc(100dvh - var(--phone-nav-h) - 8px)!important;height:auto!important}.arena{min-height:210px!important;height:calc(100dvh - 225px)!important}.choice-area{padding-bottom:max(6px,env(safe-area-inset-bottom))!important}
}

/* Portrait phones: single-column reading order and horizontally scrollable dense controls. */
@media (max-width:600px) and (orientation:portrait){
  :root{--phone-nav-h:50px}
  .main{padding-left:8px!important;padding-right:8px!important}.topbar{width:calc(100% + 16px)!important;margin-left:-8px!important;margin-right:-8px!important;padding-left:8px!important;padding-right:8px!important}
  .topbar>div:first-child{max-width:74px!important}.top-title{font-size:12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .account-pill{max-width:108px!important}.account-pill .user-coin-badge{display:none!important}.account-pill .profile-link{max-width:62px!important}.rank-chip.rank-mini-panel{min-width:72px!important}.rank-mini-emblem{display:none!important}.currency{padding:8px 6px!important;font-size:10px!important}
  .hero{grid-template-columns:1fr!important;min-height:240px!important}.hero-coin-wrap{display:none!important}.hero h1{font-size:34px!important}.hero-actions{display:grid!important;grid-template-columns:1fr!important}.hero-actions button{width:100%!important}
  .grid-4,.grid-3,.grid-2,.mode-grid,.casual-format-grid,.shop-grid,.bot-grid,.profile-grid{grid-template-columns:1fr!important}.home-activity-grid{grid-template-columns:1fr!important}
  .market-hero{align-items:stretch!important;flex-direction:column!important}.market-hero-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}.market-toolbar{grid-template-columns:1fr!important}.market-tabs,.leaderboard-tabs,.gacha-tabs{overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none}.market-tabs::-webkit-scrollbar,.leaderboard-tabs::-webkit-scrollbar,.gacha-tabs::-webkit-scrollbar{display:none}
  .history-item,.quest{gap:8px!important;align-items:flex-start!important}.history-reward{min-width:60px!important}.leader-row{grid-template-columns:34px minmax(0,1fr)!important}.leader-metrics{grid-column:2!important;text-align:left!important}
  .party-invite-row{flex-direction:column!important}.queue-team-preview{grid-template-columns:1fr!important}.queue-team-preview>span{text-align:center!important}
  #view-gacha .capsule-tank{height:300px!important;min-height:260px!important}
  .inspect-panel,.player-profile-panel{width:calc(100vw - 16px)!important}.inspect-stage{height:250px!important}.inspect-coin-model{transform:scale(.78)}
  .notification-popover{left:8px!important;right:8px!important;width:auto!important}
}

/* v0.27.25 — native phone layout: never inherit desktop virtual-canvas sizing. */
@media (max-width:950px){
  html[data-auto-fit="on"],html[data-auto-fit="on"] body{width:100%!important;min-width:0!important;height:auto!important;min-height:100%!important;zoom:1!important}
  html[data-auto-fit="on"] .app-shell{min-height:100dvh!important}
  html[data-auto-fit="on"] .sidebar{height:var(--phone-nav-h)!important;min-height:var(--phone-nav-h)!important}
  html[data-auto-fit="on"] .main{min-height:calc(100dvh - var(--phone-nav-h))!important}
}

/* v0.27.25 — portrait match HUD/playfield fit.
   Keep the complete call controls inside the visual viewport and aggressively compact
   chrome that is useful on desktop but competes with the match on a narrow phone. */
@media (max-width:600px) and (orientation:portrait){
  body[data-active-view="play"] .topbar{height:44px!important;min-height:44px!important;top:var(--phone-nav-h)!important;padding-top:3px!important;padding-bottom:3px!important;margin-bottom:4px!important}
  body[data-active-view="play"] .topbar>div:first-child,
  body[data-active-view="play"] .notification-btn,
  body[data-active-view="play"] .settings-gear{display:none!important}
  body[data-active-view="play"] .player-summary{width:100%!important;justify-content:flex-end!important;gap:4px!important}
  body[data-active-view="play"] .account-pill{max-width:70px!important;min-width:38px!important;padding:3px 5px!important}
  body[data-active-view="play"] .account-pill .profile-link,
  body[data-active-view="play"] .account-pill .mini-action{display:none!important}
  body[data-active-view="play"] .account-pill .user-coin-badge{display:grid!important;width:30px!important;height:30px!important;min-width:30px!important}
  body[data-active-view="play"] .rank-chip.rank-mini-panel{min-width:78px!important;max-width:84px!important;padding:3px 6px!important}
  body[data-active-view="play"] .currency{max-width:96px!important;padding:7px 7px!important;overflow:hidden!important;text-overflow:ellipsis!important}

  #view-play.active{padding-bottom:0!important;overflow:hidden!important}
  #matchPanel{height:calc(100dvh - var(--phone-nav-h) - 52px)!important;min-height:0!important;overflow:hidden!important}
  #matchPanel>.arena-card{height:100%!important;min-height:0!important;max-height:100%!important;padding:5px!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
  #matchPanel .match-header{flex:0 0 104px!important;min-height:104px!important;max-height:104px!important;grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr)!important;gap:3px!important;padding:5px 4px!important}
  #matchPanel .match-center-info{min-width:0!important}
  #matchPanel .match-meta{padding:0!important;gap:2px!important;font-size:7px!important}
  #matchPanel .match-leave-compact{min-height:27px!important;padding:4px 8px!important;font-size:8px!important}
  #matchPanel .match-timer-stage{min-height:30px!important}
  #matchPanel .turn-timer b{font-size:24px!important}
  #matchPanel .competitor-mainline{gap:3px!important}
  #matchPanel .competitor-mainline .match-username{font-size:10px!important;max-width:88px!important}
  #matchPanel .header-score{font-size:24px!important;min-width:34px!important;padding:2px 5px!important}
  #matchPanel .team-player-name{font-size:9px!important;max-width:74px!important}
  #matchPanel .team-player-call{font-size:7px!important;min-width:36px!important;padding:2px 3px!important}

  #matchPanel .arena{flex:1 1 auto!important;height:auto!important;min-height:250px!important;max-height:none!important;padding:0!important;overflow:hidden!important}
  #matchPanel .arena #matchCoinShell{top:47%!important;transform:translate(-50%,-50%) scale(.82)!important}
  #matchPanel .arena #resultBanner{top:calc(47% + 82px)!important;font-size:22px!important;line-height:1.05!important;width:70%!important}
  #matchPanel .arena-tactical-panel{left:5px!important;top:8px!important;width:112px!important;padding:6px!important;gap:5px!important}
  #matchPanel .arena-tactical-panel .tactical-choice{min-height:42px!important;padding:6px!important;font-size:8px!important}
  #matchPanel .arena-spectator-control{right:5px!important;top:8px!important;max-width:118px!important}
  #matchPanel .match-spectator-toggle{min-height:32px!important;padding:5px 7px!important;font-size:8px!important;max-width:118px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

  #matchPanel .choice-area{flex:0 0 116px!important;min-height:116px!important;max-height:116px!important;padding:5px 5px max(7px,env(safe-area-inset-bottom))!important;gap:5px!important;overflow:visible!important;background:linear-gradient(180deg,rgba(6,11,18,.98),rgba(5,9,15,1))!important}
  #matchPanel .lock-call{min-height:38px!important;height:38px!important;padding:6px 10px!important;font-size:10px!important}
  #matchPanel .call-selector{gap:6px!important}
  #matchPanel .call-selector .choice{min-height:58px!important;height:58px!important;padding:5px 8px!important;font-size:10px!important}
  #matchPanel .call-selector .choice span{font-size:20px!important}
  #matchPanel .match-emote-dock{display:none!important}
}

/* Extra-short portrait browsers (Safari/Chrome chrome visible): squeeze rather than
   pushing HEADS / TAILS / LOCK below the fold. */
@media (max-width:600px) and (orientation:portrait) and (max-height:740px){
  #matchPanel .match-header{flex-basis:90px!important;min-height:90px!important;max-height:90px!important}
  #matchPanel .arena{min-height:205px!important}
  #matchPanel .arena #matchCoinShell{transform:translate(-50%,-50%) scale(.68)!important}
  #matchPanel .arena #resultBanner{top:calc(47% + 66px)!important;font-size:18px!important}
  #matchPanel .choice-area{flex-basis:108px!important;min-height:108px!important;max-height:108px!important}
}

/* v0.27.28 — real-device match fullscreen layout.
   On phones an active match owns the visual viewport. App navigation/top HUD are useful
   between matches, but competing with the arena creates the overlaps seen on iOS Safari. */
@media (max-width:950px){
  body.match-locked{padding:0!important;overflow:hidden!important;background:#060a11!important}
  body.match-locked .sidebar,
  body.match-locked .topbar{display:none!important}
  body.match-locked .app-shell{display:block!important;width:100vw!important;height:100dvh!important;min-height:100dvh!important;overflow:hidden!important}
  body.match-locked .main{padding:0!important;margin:0!important;width:100vw!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;overflow:hidden!important}
  body.match-locked #view-play.active{padding:0!important;margin:0!important;width:100vw!important;height:100dvh!important;min-height:0!important;overflow:hidden!important}
  body.match-locked #matchPanel{display:block!important;width:100vw!important;height:100dvh!important;min-height:0!important;max-height:100dvh!important;margin:0!important;padding:0!important;overflow:hidden!important}
  body.match-locked #matchPanel>.arena-card{width:100vw!important;height:100dvh!important;min-height:0!important;max-height:100dvh!important;margin:0!important;padding:0!important;border-radius:0!important;border-left:0!important;border-right:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
  body.match-locked #matchPanel .match-header{width:100%!important;margin:0!important;overflow:hidden!important}
  body.match-locked #matchPanel .arena{flex:1 1 0!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important}
  body.match-locked #matchPanel .choice-area{width:100%!important;margin:0!important;flex-shrink:0!important}
}

/* Portrait: compact scoreboard, usable arena, guaranteed call controls. */
@media (max-width:600px) and (orientation:portrait){
  body.match-locked #matchPanel .match-header{flex:0 0 94px!important;min-height:94px!important;max-height:94px!important;grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr)!important;gap:2px!important;padding:max(4px,env(safe-area-inset-top)) 6px 4px!important;background:linear-gradient(90deg,#0b2034,#10111b 50%,#30131b)!important}
  body.match-locked #matchPanel .team-competitor{min-width:0!important;padding:2px!important;overflow:hidden!important}
  body.match-locked #matchPanel .team-competitor .tag{font-size:7px!important;letter-spacing:.08em!important;margin:0!important}
  body.match-locked #matchPanel .team-scoreline{gap:4px!important;justify-content:flex-start!important;min-width:0!important}
  body.match-locked #matchPanel .opponent-scoreline{justify-content:flex-end!important}
  body.match-locked #matchPanel .header-score{font-size:27px!important;line-height:1!important;min-width:34px!important;padding:2px 5px!important}
  body.match-locked #matchPanel .team-scoreline>span{font-size:8px!important;letter-spacing:.08em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.match-locked #matchPanel .match-team-roster{max-height:35px!important;overflow:hidden!important;margin-top:1px!important;gap:1px!important}
  body.match-locked #matchPanel .team-player-name{font-size:7px!important;max-width:72px!important}
  body.match-locked #matchPanel .team-player-rank{font-size:6px!important}
  body.match-locked #matchPanel .match-center-info{min-width:0!important;gap:1px!important;justify-content:center!important}
  body.match-locked #matchPanel .match-meta{font-size:6px!important;gap:1px!important;white-space:nowrap!important;overflow:hidden!important}
  body.match-locked #matchPanel .match-meta span{max-width:82px!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.match-locked #matchPanel .versus{font-size:25px!important;line-height:1!important;margin:0!important}
  body.match-locked #matchPanel .match-timer-stage{min-height:24px!important;height:24px!important}
  body.match-locked #matchPanel .turn-timer b{font-size:22px!important;line-height:1!important}
  body.match-locked #matchPanel .match-leave-compact{position:absolute!important;right:6px!important;top:max(5px,env(safe-area-inset-top))!important;min-height:22px!important;height:22px!important;padding:2px 6px!important;font-size:6px!important;z-index:4!important}

  body.match-locked #matchPanel .arena #matchCoinShell{top:49%!important;transform:translate(-50%,-50%) scale(.68)!important}
  body.match-locked #matchPanel .arena #resultBanner{top:calc(49% + 72px)!important;font-size:18px!important;line-height:1.05!important;width:76%!important}
  body.match-locked #matchPanel .arena-tactical-panel{left:6px!important;top:7px!important;width:96px!important;padding:4px!important;gap:4px!important}
  body.match-locked #matchPanel .arena-tactical-label{display:none!important}
  body.match-locked #matchPanel .arena-tactical-panel .tactical-choice{min-height:38px!important;height:38px!important;padding:4px!important;font-size:7px!important}
  body.match-locked #matchPanel .arena-spectator-control{right:6px!important;top:7px!important;max-width:100px!important}
  body.match-locked #matchPanel .match-spectator-toggle{min-height:29px!important;height:29px!important;max-width:100px!important;padding:4px 6px!important;font-size:7px!important}

  body.match-locked #matchPanel .choice-area{flex:0 0 calc(126px + env(safe-area-inset-bottom))!important;min-height:calc(126px + env(safe-area-inset-bottom))!important;max-height:calc(126px + env(safe-area-inset-bottom))!important;padding:5px 7px max(7px,env(safe-area-inset-bottom))!important;gap:5px!important;background:#060b12!important}
  body.match-locked #matchPanel .lock-call{height:38px!important;min-height:38px!important;padding:5px!important;font-size:10px!important}
  body.match-locked #matchPanel .call-selector{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;min-height:0!important}
  body.match-locked #matchPanel .call-selector .choice{height:68px!important;min-height:68px!important;padding:5px!important;font-size:10px!important}
  body.match-locked #matchPanel .call-selector .choice span{font-size:21px!important}
}

/* Landscape: full-screen match with a shallow scoreboard and controls always above browser chrome. */
@media (max-width:950px) and (orientation:landscape){
  body.match-locked #matchPanel .match-header{flex:0 0 92px!important;min-height:92px!important;max-height:92px!important;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr)!important;gap:5px!important;padding:max(3px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 3px max(10px,env(safe-area-inset-left))!important}
  body.match-locked #matchPanel .header-score{font-size:28px!important;min-width:40px!important;padding:2px 6px!important}
  body.match-locked #matchPanel .team-competitor .tag{font-size:7px!important;margin:0!important}
  body.match-locked #matchPanel .match-team-roster{max-height:40px!important;overflow:hidden!important}
  body.match-locked #matchPanel .team-player-name{font-size:8px!important;max-width:110px!important}
  body.match-locked #matchPanel .match-center-info{gap:1px!important}
  body.match-locked #matchPanel .match-meta{font-size:7px!important;padding:0!important;gap:2px!important}
  body.match-locked #matchPanel .versus{font-size:25px!important;line-height:1!important;margin:0!important}
  body.match-locked #matchPanel .turn-timer b{font-size:23px!important}
  body.match-locked #matchPanel .match-timer-stage{height:24px!important;min-height:24px!important}
  body.match-locked #matchPanel .match-leave-compact{min-height:22px!important;height:22px!important;padding:2px 8px!important;font-size:7px!important}
  body.match-locked #matchPanel .arena #matchCoinShell{top:48%!important;transform:translate(-50%,-50%) scale(.58)!important}
  body.match-locked #matchPanel .arena #resultBanner{top:calc(48% + 60px)!important;font-size:16px!important}
  body.match-locked #matchPanel .arena-tactical-panel{left:max(8px,env(safe-area-inset-left))!important;top:6px!important;width:94px!important;padding:4px!important;gap:3px!important}
  body.match-locked #matchPanel .arena-tactical-label{display:none!important}
  body.match-locked #matchPanel .arena-tactical-panel .tactical-choice{min-height:31px!important;height:31px!important;padding:3px!important;font-size:6px!important}
  body.match-locked #matchPanel .arena-spectator-control{right:max(8px,env(safe-area-inset-right))!important;top:6px!important}
  body.match-locked #matchPanel .match-spectator-toggle{min-height:28px!important;height:28px!important;font-size:7px!important}
  body.match-locked #matchPanel .choice-area{flex:0 0 calc(76px + env(safe-area-inset-bottom))!important;min-height:calc(76px + env(safe-area-inset-bottom))!important;max-height:calc(76px + env(safe-area-inset-bottom))!important;padding:4px max(10px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))!important;display:grid!important;grid-template-columns:minmax(120px,.65fr) 1.35fr!important;align-items:stretch!important;gap:7px!important}
  body.match-locked #matchPanel .lock-call{height:auto!important;min-height:0!important;font-size:9px!important}
  body.match-locked #matchPanel .call-selector{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;min-height:0!important}
  body.match-locked #matchPanel .call-selector .choice{height:auto!important;min-height:0!important;padding:3px 8px!important;font-size:9px!important}
  body.match-locked #matchPanel .call-selector .choice span{font-size:18px!important}
  body.match-locked #matchPanel .match-emote-dock{display:none!important}
}

/* v0.27.37 — 8-player FFA */

#matchPanel.ffa-match #opponentTeamRoster{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 8px;align-content:center}
#matchPanel.ffa-match .team-player-row{min-height:42px}
@media(max-width:950px){#matchPanel.ffa-match #opponentTeamRoster{grid-template-columns:repeat(2,minmax(0,1fr))!important}.ffa-format{min-height:300px!important}}

/* v0.27.37 — FFA reads as eight independent contestants, not YOU vs FIELD. */
#matchPanel.ffa-match .match-header{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr)}
#matchPanel.ffa-match .header-score{display:none!important}
#matchPanel.ffa-match .team-competitor{grid-template-columns:1fr!important}
#matchPanel.ffa-match .team-competitor.right{text-align:left!important}
#matchPanel.ffa-match .match-team-roster,#matchPanel.ffa-match #opponentTeamRoster{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px 8px!important;max-height:none!important;overflow:visible!important}
#matchPanel.ffa-match .team-player-row{min-height:38px!important;padding:4px 6px!important}
#matchPanel.ffa-match .ffa-player-score{margin-left:auto;min-width:24px;text-align:center;font-size:16px;color:var(--accent);font-variant-numeric:tabular-nums}
#matchPanel.ffa-match .match-center-info .versus{font-size:0!important}
#matchPanel.ffa-match .match-center-info .versus:after{content:'FFA';font-size:22px;letter-spacing:.18em;color:var(--bad)}
#matchPanel.ffa-match .arena-tactical-panel{display:flex!important}
@media(max-width:950px){#matchPanel.ffa-match .match-team-roster,#matchPanel.ffa-match #opponentTeamRoster{grid-template-columns:1fr 1fr!important}.ffa-player-score{font-size:12px!important}}


/* v0.27.37 — FFA roster: four clean independent contestant cards per side. */
#matchPanel.ffa-match .match-header{grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr)!important;gap:18px!important}
#matchPanel.ffa-match .match-team-roster,#matchPanel.ffa-match #opponentTeamRoster{display:grid!important;grid-template-columns:1fr!important;gap:4px!important;width:100%!important;min-width:0!important;align-content:center!important}
#matchPanel.ffa-match .team-player-row{display:grid!important;grid-template-columns:72px minmax(0,1fr) auto!important;align-items:center!important;gap:7px!important;min-width:0!important;min-height:30px!important;padding:3px 6px!important;overflow:hidden!important}
#matchPanel.ffa-match .team-player-identity{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important;overflow:hidden!important}
#matchPanel.ffa-match .team-player-name{display:block!important;min-width:0!important;max-width:none!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:12px!important;line-height:1.1!important}
#matchPanel.ffa-match .team-player-call{width:72px!important;min-width:72px!important;max-width:72px!important;padding:4px 5px!important;font-size:8px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
#matchPanel.ffa-match .match-rank-emblem{width:21px!important;height:21px!important;flex:0 0 21px!important;font-size:7px!important}
#matchPanel.ffa-match .ffa-player-score{margin-left:auto!important;min-width:18px!important;flex:0 0 auto!important;font-size:13px!important}
#matchPanel.ffa-match .team-tactical-status{position:static!important;min-width:0!important;max-width:46px!important;overflow:hidden!important;justify-self:end!important}
#matchPanel.ffa-match .own-roster .team-player-row,#matchPanel.ffa-match .opponent-roster .team-player-row{padding-left:6px!important;padding-right:6px!important}
@media(max-width:950px){
 #matchPanel.ffa-match .match-header{grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr)!important;gap:5px!important}
 #matchPanel.ffa-match .team-player-row{grid-template-columns:48px minmax(0,1fr) auto!important;gap:3px!important;padding:2px 3px!important;min-height:25px!important}
 #matchPanel.ffa-match .team-player-call{width:48px!important;min-width:48px!important;max-width:48px!important;font-size:6px!important;padding:3px 2px!important}
 #matchPanel.ffa-match .team-player-name{font-size:8px!important}
 #matchPanel.ffa-match .match-rank-emblem{width:16px!important;height:16px!important;flex-basis:16px!important;font-size:6px!important}
 #matchPanel.ffa-match .ffa-player-score{font-size:10px!important;min-width:12px!important}
}

/* v0.27.40 — FFA roster/queue composition + protected result headline */
.queue-team-preview.ffa-preview{grid-template-columns:1fr!important;width:min(760px,100%)!important}
.queue-team-preview.ffa-preview>span,.queue-team-preview.ffa-preview>div:nth-of-type(2){display:none!important}
.queue-team-preview.ffa-preview>div:first-of-type{width:100%!important}
.queue-team-preview.ffa-preview>div:first-of-type>small{font-size:0}
.queue-team-preview.ffa-preview>div:first-of-type>small:after{content:'CONTESTANTS';font-size:10px}
.queue-team-preview.ffa-preview #queueTeamA{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 10px!important}

#matchPanel.ffa-match .match-header{min-height:168px!important;align-items:start!important}
#matchPanel.ffa-match .team-competitor{align-self:start!important;padding-top:4px!important}
#matchPanel.ffa-match .match-team-roster,#matchPanel.ffa-match #opponentTeamRoster{
  grid-template-columns:repeat(var(--ffa-roster-columns,1),minmax(0,1fr))!important;
  grid-auto-flow:column!important;grid-template-rows:repeat(4,minmax(28px,auto))!important;
  align-content:start!important;gap:4px 8px!important
}
#matchPanel.ffa-match .team-player-row{
  grid-template-columns:minmax(0,1fr) 28px 68px auto!important;
  min-height:29px!important;gap:5px!important;padding:3px 5px!important;overflow:hidden!important
}
#matchPanel.ffa-match .team-player-identity{grid-column:1;min-width:0!important;overflow:hidden!important}
#matchPanel.ffa-match .ffa-player-score{grid-column:2;margin:0!important;justify-self:center!important;min-width:22px!important;text-align:center!important}
#matchPanel.ffa-match .team-player-call{grid-column:3;width:68px!important;min-width:68px!important;max-width:68px!important;margin:0!important;position:static!important}
#matchPanel.ffa-match .team-tactical-status{grid-column:4;position:static!important;margin:0!important;max-width:42px!important}
#matchPanel.ffa-match .team-player-name{max-width:100%!important}

.match-intro.ffa-intro .intro-vs{grid-template-columns:1fr 1fr!important;gap:28px!important;align-items:start!important}
.match-intro.ffa-intro .intro-vs>span{display:none!important}
.match-intro.ffa-intro .intro-vs>div{min-width:0!important}
.match-intro.ffa-intro .intro-vs strong{white-space:pre-line!important;line-height:1.8!important;font-size:18px!important}

#victoryOverlay .victory-copy{overflow:visible!important}
#victoryOverlay #victoryTitle,#victoryOverlay.risk-allin #victoryTitle,#victoryOverlay.loss #victoryTitle,#victoryOverlay.draw #victoryTitle{
  width:max-content!important;max-width:none!important;min-width:0!important;justify-self:center!important;
  overflow:visible!important;white-space:nowrap!important;font-size:clamp(42px,7vmin,64px)!important;
  letter-spacing:.025em!important;padding:0 .12em!important
}
@media(max-width:700px){
 .queue-team-preview.ffa-preview #queueTeamA{grid-template-columns:1fr!important}
 #matchPanel.ffa-match .team-player-row{grid-template-columns:minmax(0,1fr) 20px 48px!important}
 #matchPanel.ffa-match .team-tactical-status{display:none!important}
 #matchPanel.ffa-match .team-player-call{width:48px!important;min-width:48px!important;max-width:48px!important;font-size:6px!important}
}

/* v0.27.40 — FFA contestant cards: centered identity with inward-facing status cells. */
#matchPanel.ffa-match .team-player-row{
  grid-template-columns:minmax(0,1fr) 28px 68px auto!important;
  align-items:center!important;
}
#matchPanel.ffa-match .team-player-identity{
  justify-content:center!important;
  text-align:center!important;
}
#matchPanel.ffa-match .team-player-name{text-align:center!important}
/* Left-bank cards: identity on the left, all match info toward arena/center on the right. */
#matchPanel.ffa-match .own-roster .team-player-identity{grid-column:1!important;grid-row:1!important}
#matchPanel.ffa-match .own-roster .ffa-player-score{grid-column:2!important;grid-row:1!important}
#matchPanel.ffa-match .own-roster .team-player-call{grid-column:3!important;grid-row:1!important}
#matchPanel.ffa-match .own-roster .team-tactical-status{grid-column:4!important;grid-row:1!important;justify-self:end!important}
/* Right-bank cards mirror the left: match info is on the left, identity on the right. */
#matchPanel.ffa-match .opponent-roster .team-player-row{
  grid-template-columns:auto 68px 28px minmax(0,1fr)!important;
}
#matchPanel.ffa-match .opponent-roster .team-player-identity{
  grid-column:4!important;grid-row:1!important;flex-direction:row!important;
}
#matchPanel.ffa-match .opponent-roster .ffa-player-score{grid-column:3!important;grid-row:1!important}
#matchPanel.ffa-match .opponent-roster .team-player-call{grid-column:2!important;grid-row:1!important}
#matchPanel.ffa-match .opponent-roster .team-tactical-status{grid-column:1!important;grid-row:1!important;justify-self:start!important}
@media(max-width:700px){
 #matchPanel.ffa-match .own-roster .team-player-row{grid-template-columns:minmax(0,1fr) 20px 48px!important}
 #matchPanel.ffa-match .opponent-roster .team-player-row{grid-template-columns:48px 20px minmax(0,1fr)!important}
 #matchPanel.ffa-match .own-roster .team-player-call{grid-column:3!important}
 #matchPanel.ffa-match .opponent-roster .team-player-call{grid-column:1!important}
 #matchPanel.ffa-match .opponent-roster .ffa-player-score{grid-column:2!important}
 #matchPanel.ffa-match .opponent-roster .team-player-identity{grid-column:3!important}
}

/* v0.27.41 — phone layout hardening. These final overrides intentionally win over
   older desktop/phone experiments so narrow Safari viewports use native dimensions. */
@media (max-width:600px) and (orientation:portrait){
  html,body{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
  .app-shell{width:100%!important;max-width:100vw!important;min-width:0!important;display:block!important}
  .sidebar{position:sticky!important;top:0!important;left:0!important;width:100%!important;max-width:100vw!important;height:54px!important;min-height:54px!important;padding:max(4px,env(safe-area-inset-top)) 8px 4px!important;overflow:hidden!important;z-index:300!important}
  .sidebar .brand{display:none!important}.sidebar .nav{display:flex!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;gap:4px!important;padding:0!important;scrollbar-width:none!important}.sidebar .nav::-webkit-scrollbar{display:none!important}
  .sidebar .nav button{flex:0 0 auto!important;width:auto!important;min-width:72px!important;min-height:42px!important;height:42px!important;padding:7px 12px!important;font-size:10px!important}
  .main{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:0 8px max(18px,env(safe-area-inset-bottom))!important;overflow-x:hidden!important}
  .topbar{position:relative!important;top:auto!important;width:calc(100% + 16px)!important;max-width:none!important;height:auto!important;min-height:50px!important;margin:0 -8px 8px!important;padding:6px 8px!important;overflow:hidden!important}
  .player-summary{width:100%!important;max-width:100%!important;display:grid!important;grid-template-columns:36px minmax(0,1fr) minmax(74px,auto) minmax(74px,auto)!important;gap:4px!important;align-items:center!important}
  .settings-gear{display:none!important}.notification-btn{width:36px!important;min-width:36px!important}.account-pill,.rank-chip.rank-mini-panel,.currency{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}.account-pill .profile-link{display:block!important;max-width:100%!important}.currency{overflow:hidden!important;text-overflow:ellipsis!important}
  .hero{width:100%!important;max-width:100%!important;overflow:hidden!important;padding:18px!important}.hero h1{font-size:clamp(29px,10vw,42px)!important;line-height:.96!important;overflow-wrap:anywhere!important}.hero-actions{width:100%!important}.hero-actions button{max-width:100%!important}
  .card,.view,.panel{max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
}

/* A match gets the whole phone viewport. Global navigation/HUD is redundant in-match
   and was the source of the clipped scoreboard and missing call controls. */
@media (max-width:600px) and (orientation:portrait){
  body.match-locked{height:100dvh!important;min-height:100svh!important;overflow:hidden!important}
  body.match-locked .sidebar,body.match-locked .topbar{display:none!important}
  body.match-locked .main{height:100dvh!important;min-height:100svh!important;padding:0!important;overflow:hidden!important}
  body.match-locked #view-play.active{height:100dvh!important;min-height:100svh!important;max-height:100dvh!important;margin:0!important;padding:0!important;overflow:hidden!important}
  body.match-locked #matchPanel{height:100dvh!important;min-height:100svh!important;max-height:100dvh!important;width:100%!important;margin:0!important;border-radius:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
  body.match-locked #matchPanel .match-header{flex:0 0 154px!important;min-height:154px!important;max-height:154px!important;padding:max(8px,env(safe-area-inset-top)) 8px 5px!important;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr)!important;gap:4px!important;overflow:hidden!important}
  body.match-locked #matchPanel .header-score{font-size:27px!important;min-width:38px!important}.team-competitor{min-width:0!important}.team-competitor.right{min-width:0!important}
  body.match-locked #matchPanel .match-team-roster{max-width:100%!important;max-height:44px!important;overflow:hidden!important}.team-player-row{min-width:0!important;max-width:100%!important}.team-player-name{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  body.match-locked #matchPanel .arena{flex:1 1 auto!important;height:auto!important;min-height:0!important;overflow:hidden!important}
  body.match-locked #matchPanel .arena #matchCoinShell{top:50%!important;transform:translate(-50%,-50%) scale(.72)!important}
  body.match-locked #matchPanel .arena #resultBanner{top:calc(50% + 82px)!important}
  body.match-locked #matchPanel .choice-area{flex:0 0 calc(174px + env(safe-area-inset-bottom))!important;min-height:calc(174px + env(safe-area-inset-bottom))!important;max-height:calc(174px + env(safe-area-inset-bottom))!important;display:grid!important;grid-template-rows:48px 1fr!important;grid-template-columns:1fr!important;gap:7px!important;padding:7px 10px max(8px,env(safe-area-inset-bottom))!important}
  body.match-locked #matchPanel .lock-call{width:100%!important;height:48px!important;min-height:48px!important;margin:0!important;font-size:11px!important}
  body.match-locked #matchPanel .call-selector{width:100%!important;height:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  body.match-locked #matchPanel .call-selector .choice{height:100%!important;min-height:0!important;padding:8px!important;font-size:11px!important}.call-selector .choice span{font-size:23px!important}
  body.match-locked #matchPanel .arena-tactical-panel{left:10px!important;top:10px!important;width:112px!important}.arena-tactical-panel .tactical-choice{min-height:43px!important;height:43px!important;font-size:8px!important}
  body.match-locked #matchPanel .arena-spectator-control{right:10px!important;top:10px!important;max-width:118px!important}
}

@media (max-width:950px) and (orientation:landscape) and (max-height:600px){
  body.match-locked .sidebar,body.match-locked .topbar{display:none!important}
  body.match-locked,.app-shell,body.match-locked .main,body.match-locked #view-play.active,body.match-locked #matchPanel{height:100dvh!important;min-height:100svh!important;max-height:100dvh!important;margin:0!important;padding:0!important;overflow:hidden!important}
  body.match-locked #matchPanel{display:flex!important;flex-direction:column!important;border-radius:0!important}
  body.match-locked #matchPanel .match-header{flex:0 0 88px!important;min-height:88px!important;max-height:88px!important}
  body.match-locked #matchPanel .arena{flex:1 1 auto!important;height:auto!important;min-height:0!important}
  body.match-locked #matchPanel .choice-area{flex:0 0 calc(82px + env(safe-area-inset-bottom))!important;min-height:calc(82px + env(safe-area-inset-bottom))!important;max-height:calc(82px + env(safe-area-inset-bottom))!important}
}

/* Login must be a real single-column mobile card, never a squeezed desktop grid. */
@media (max-width:600px){
  .auth-body{width:100%!important;min-width:0!important;overflow-x:hidden!important}
  .auth-shell{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:100dvh!important;margin:0!important;padding:max(24px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom))!important;box-sizing:border-box!important}
  .auth-presentation{display:none!important}.auth-card{display:block!important;width:100%!important;max-width:460px!important;min-width:0!important;margin:0 auto!important;padding:24px 20px!important;box-sizing:border-box!important}
  .auth-card-top,.auth-tabs,.auth-card form,.auth-card label,.auth-card input,.auth-card #submitBtn,.auth-note{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
  .auth-card-top h2{font-size:34px!important;line-height:1.05!important}.auth-card-top p{font-size:15px!important;line-height:1.45!important;white-space:normal!important}.auth-tabs{grid-template-columns:1fr 1fr!important;gap:6px!important}.auth-tabs button{min-width:0!important;padding:8px 6px!important;font-size:10px!important}
  .auth-note{overflow-wrap:normal!important;word-break:normal!important;white-space:normal!important}
}

/* v0.27.43 — real-phone match header + landscape page scrolling hardening. */
@media (max-width:600px) and (orientation:portrait){
  body.match-locked #matchPanel .match-header{
    flex:0 0 138px!important;min-height:138px!important;max-height:138px!important;
    grid-template-columns:minmax(0,1fr) 146px minmax(0,1fr)!important;
    gap:4px!important;padding:max(5px,env(safe-area-inset-top)) 7px 5px!important;
    overflow:hidden!important;align-items:stretch!important;
  }
  body.match-locked #matchPanel .match-center-info{
    width:146px!important;min-width:146px!important;max-width:146px!important;
    grid-template-rows:auto auto auto auto!important;align-content:start!important;gap:3px!important;
    overflow:visible!important;padding:0!important;
  }
  body.match-locked #matchPanel .match-center-info .match-meta{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    width:146px!important;gap:2px!important;overflow:visible!important;
  }
  body.match-locked #matchPanel .match-center-info .match-meta>span,
  body.match-locked #matchPanel .match-center-info .match-meta .round-meta-label{
    min-width:0!important;max-width:none!important;padding:4px 5px!important;font-size:7px!important;
    line-height:1!important;letter-spacing:.045em!important;white-space:nowrap!important;overflow:visible!important;
  }
  body.match-locked #matchPanel .match-center-info .match-timer-stage{height:30px!important;min-height:30px!important;margin:0!important}
  body.match-locked #matchPanel .match-center-info .turn-timer b{font-size:29px!important}
  body.match-locked #matchPanel .match-center-info>.versus{font-size:31px!important;margin:1px 0!important}
  body.match-locked #matchPanel .match-center-info .match-leave-compact{position:static!important;min-height:24px!important;height:24px!important;margin:0!important;padding:3px 8px!important;font-size:7px!important}
  body.match-locked #matchPanel .team-competitor{height:100%!important;min-height:0!important;overflow:hidden!important;padding:2px 1px!important}
  body.match-locked #matchPanel .match-team-roster{max-height:66px!important;overflow:hidden!important;margin-top:3px!important}
  body.match-locked #matchPanel .team-player-row{min-height:27px!important;overflow:hidden!important}
  body.match-locked #matchPanel .team-player-name{font-size:8px!important;max-width:90px!important}
  body.match-locked #matchPanel .team-player-call{font-size:6px!important;min-width:38px!important;max-width:50px!important;padding:2px 3px!important}
}

/* Normal pages must scroll vertically in phone landscape.  Match-locked remains full-screen. */
@media (max-width:950px) and (orientation:landscape){
  body:not(.match-locked),
  body:not(.match-locked) .app-shell,
  body:not(.match-locked) .main{
    height:auto!important;min-height:100dvh!important;max-height:none!important;overflow-x:hidden!important;overflow-y:visible!important;
  }
  html:has(body:not(.match-locked)){height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
  body:not(.match-locked){position:static!important;overscroll-behavior-y:auto!important;padding-bottom:max(18px,env(safe-area-inset-bottom))!important}
  body:not(.match-locked) .main{display:block!important;padding-bottom:max(28px,env(safe-area-inset-bottom))!important}
  body:not(.match-locked) .view.active{height:auto!important;min-height:0!important;max-height:none!important;overflow-x:hidden!important;overflow-y:visible!important;padding-bottom:32px!important;overscroll-behavior-y:auto!important}
}

/* v0.27.43 — Phone Collection remains a dense four-column cabinet in both orientations. */
@media (max-width: 1200px){
  #view-inventory .collection-grid,
  #view-inventory .collection-group-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
  #view-inventory .collection-type{min-width:0;padding:8px!important}
  #view-inventory .collection-art{height:clamp(72px,20vw,150px);margin-bottom:8px}
  #view-inventory .collection-halo{width:130%;height:130%}
  #view-inventory .collection-type h3{font-size:clamp(8px,2.4vw,13px);line-height:1.1;overflow-wrap:anywhere}
  #view-inventory .collection-type .section-copy,
  #view-inventory .collection-type p{font-size:clamp(6px,1.8vw,9px);line-height:1.2}
  #view-inventory .collection-count{right:5px;bottom:5px;padding:3px 5px;font-size:8px}
  #view-inventory .collection-footer{gap:3px;margin-top:7px;font-size:7px;flex-wrap:wrap}
}
@media (max-width: 520px){
  #view-inventory .collection-grid,
  #view-inventory .collection-group-grid{gap:5px!important}
  #view-inventory .collection-type{padding:5px!important;border-radius:7px}
  #view-inventory .collection-art{height:clamp(62px,21vw,92px);border-radius:6px}
  #view-inventory .collection-type .mini-coin{transform:scale(.72)}
}