/* Onchain Rivals — dark navy UI, mint accent, pixel art only on fighters and stages */
:root{
  --bg:#0b1220; --bg-2:#0e1628; --panel:#111a2c; --panel-2:#151f33; --card:#18233a;
  --line:#1f2b42; --line-2:#2a3852;
  --text:#e9eef7; --muted:#93a1ba; --dim:#64728c;
  --mint:#3ee6a8; --mint-2:#2fd196; --mint-ink:#062b1e;
  --gold:#f5a524; --red:#ff5d6c; --blue:#5b8cff;
  --attacker:#b06bff; --defender:#6c8dff; --support:#c08bff; --utility:#9a7dff;
  --common:#93a1ba; --uncommon:#3ee6a8; --rare:#5b9cff; --epic:#c06bff; --legendary:#f5a524; --mythical:#ff6bd0; --boss:#ff5d6c;
  --r:14px; --r-lg:18px;
  --font:"Sora",system-ui,sans-serif; --display:"Kanit","Sora",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
body{font-family:var(--font);background:radial-gradient(1200px 600px at 70% -10%,#16264a55,transparent 60%),var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:72px;padding:0 0 0 28px;background:#0b1220ee;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;letter-spacing:.22em;font-size:17px}
.brand .mark{width:32px;height:32px;color:var(--mint)}
.tabs{display:flex;justify-content:center;gap:6px;height:100%}
.tabs a{display:flex;align-items:center;padding:0 22px;color:var(--muted);font-weight:500;position:relative;transition:color .15s}
.tabs a:hover{color:var(--text)}
.tabs a.on{color:var(--text);font-weight:700}
.tabs a.on::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--mint)}
.who{display:flex;align-items:stretch;height:100%}
.wallet{display:flex;align-items:center;gap:12px;padding:0 22px;border-left:1px solid var(--line);text-align:left}
.wallet svg{width:36px;height:36px;color:var(--muted)}
.wallet b{display:block;font-weight:600;font-size:14px}
.wallet small{display:block;color:var(--muted);font-size:12px}
.wallet:hover small{color:var(--mint)}
.coins{display:flex;align-items:center;gap:8px;padding:0 18px;border-left:1px solid var(--line);font-weight:700}
.gear{display:grid;place-items:center;width:72px;border-left:1px solid var(--line)}
.gear #snd button:hover{color:var(--text)!important;background:var(--panel)!important}
.coin{display:inline-block;width:18px;height:18px;flex:none;background:var(--gold);clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);position:relative}
.coin::after{content:"";position:absolute;inset:4px;background:#0b1220;clip-path:inherit}
.coin::before{content:"";position:absolute;inset:6.5px;background:var(--gold);clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);z-index:1}

/* ---------- layout ---------- */
main{max-width:1480px;margin:0 auto;padding:28px 28px 60px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg)}
.h1{font-family:var(--font);font-weight:800;font-size:clamp(30px,4vw,50px);line-height:1.05;letter-spacing:-.02em}
.sub{color:var(--muted);font-size:18px;margin-top:8px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.budget{display:flex;align-items:center;gap:14px;padding:16px 20px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);min-width:226px}
.budget .coin{width:28px;height:28px}.budget .coin::after{inset:6px}.budget .coin::before{inset:10px}
.budget b{font-size:24px;display:block;line-height:1}
.budget small{font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.budget .q{margin-left:auto;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--muted);color:var(--muted);font-size:12px;display:grid;place-items:center}

/* ---------- squad slots ---------- */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.slot{position:relative;border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(180deg,#141e33,#111a2c);overflow:hidden;min-height:340px;display:flex;flex-direction:column}
.slot .num{position:absolute;top:16px;left:16px;width:34px;height:34px;border-radius:8px;background:#22304a;display:grid;place-items:center;font-weight:700;z-index:2}
.slot .x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:8px;color:var(--muted);font-size:20px;z-index:2}
.slot .x:hover{color:var(--text);background:#22304a}
.slot .art{flex:1;display:grid;place-items:end center;padding:22px 20px 0;min-height:240px;background:radial-gradient(60% 50% at 50% 70%,#22304a88,transparent 70%)}
.slot .art img{max-height:220px;width:auto;object-fit:contain;filter:drop-shadow(0 10px 14px #0008)}
.slot .meta{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding:16px 22px 22px;background:#0f1729;border-top:1px solid var(--line)}
.slot .meta h3{font-size:20px;font-weight:800;letter-spacing:.02em;margin-bottom:10px}
.slot.empty{border-style:dashed;display:grid;place-items:center;text-align:center;color:var(--dim)}
.slot.empty .num{background:#1a2438;color:var(--dim)}
.slot.empty p{font-size:14px}
.slot.empty .plus{width:56px;height:56px;border-radius:50%;border:1.5px dashed var(--line-2);display:grid;place-items:center;font-size:26px;margin:0 auto 12px}
.cost{text-align:right;line-height:1.1}
.cost b{font-size:22px;display:inline-flex;align-items:center;gap:7px}
.cost small{display:block;font-size:11px;letter-spacing:.1em;color:var(--muted);margin-top:4px}

/* ---------- role pill ---------- */
.role{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:#232c55;color:#c7d0ff;white-space:nowrap}
.role svg{width:15px;height:15px}
.role.Attacker{background:#2e2350;color:#dcc3ff}.role.Attacker svg{color:var(--attacker)}
.role.Defender{background:#212c55;color:#c9d4ff}.role.Defender svg{color:var(--defender)}
.role.Support{background:#2a2450;color:#e0ceff}.role.Support svg{color:var(--support)}
.role.Utility{background:#26264f;color:#d5ccff}.role.Utility svg{color:var(--utility)}
.role.sm{padding:5px 10px;font-size:11px}

/* ---------- filters ---------- */
.divider{height:1px;background:var(--line);margin:26px 0}
.filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.search{flex:1 1 300px;max-width:420px;display:flex;align-items:center;gap:12px;padding:0 18px;height:48px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-2)}
.search svg{width:20px;height:20px;color:var(--muted);flex:none}
.search input{flex:1;background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:15px;min-width:0}
.search input::placeholder{color:var(--dim)}
.chip{height:42px;padding:0 18px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel);color:var(--text);font-size:14px;font-weight:500;white-space:nowrap}
.chip:hover{border-color:#3a4a68}
.chip.on{background:var(--mint);border-color:var(--mint);color:var(--mint-ink);font-weight:700}
.chip.sm{height:34px;padding:0 13px;font-size:12px;border-radius:10px}
select.chip{appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;background-size:5px 5px;background-repeat:no-repeat}

/* ---------- fighter grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.fcard{position:relative;display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);overflow:hidden;text-align:left;transition:transform .15s,border-color .15s}
.fcard:hover{border-color:#3a4a68;transform:translateY(-2px)}
.fcard .pic{height:140px;display:grid;place-items:end center;padding:12px 10px 0;background:radial-gradient(70% 60% at 50% 80%,#1f2b4566,transparent 70%)}
.fcard .pic img{max-height:128px;width:auto;object-fit:contain}
.fcard .body{padding:10px 14px 14px;display:grid;gap:10px}
.fcard h4{font-size:15px;font-weight:800;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard .price{display:flex;align-items:center;gap:8px;font-weight:700}
.fcard .price small{display:block;font-size:10px;letter-spacing:.1em;color:var(--muted);font-weight:500}
.fcard .add{height:38px;border:1.5px solid var(--mint);border-radius:10px;color:var(--mint);font-weight:600;font-size:14px}
.fcard .add:hover{background:var(--mint);color:var(--mint-ink)}
.fcard .add[disabled]{border-color:var(--line-2);color:var(--dim);cursor:not-allowed;background:none}
.fcard.in{border-color:var(--mint)}
.fcard.in .add{background:var(--mint);color:var(--mint-ink)}
.fcard.locked .pic img{filter:brightness(0) opacity(.55)}
.rar{position:absolute;top:10px;left:10px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:6px;background:#0b1220cc;border:1px solid currentColor}
.rar.Common{color:var(--common)}.rar.Uncommon{color:var(--uncommon)}.rar.Rare{color:var(--rare)}.rar.Epic{color:var(--epic)}.rar.Legendary{color:var(--legendary)}.rar.Mythical{color:var(--mythical)}.rar.Boss,.rar.Final{color:var(--boss)}
.lock{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:7px;background:#0b1220cc;display:grid;place-items:center;color:var(--gold)}
.lock svg{width:14px;height:14px}
.more{display:flex;justify-content:center;margin-top:18px}

/* ---------- summary ---------- */
.summary{padding:30px;position:sticky;top:96px}
.summary h2{font-size:30px;font-weight:800;letter-spacing:-.01em;margin-bottom:22px}
.big-stat{font-size:20px;color:var(--muted);margin-bottom:12px}
.big-stat b{color:var(--text);font-size:30px;font-weight:800}
.bar{height:14px;border-radius:8px;background:#22304a;overflow:hidden;margin-bottom:28px}
.bar i{display:block;height:100%;background:var(--mint);border-radius:8px;transition:width .3s}
.bar.over i{background:var(--red)}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.mini div{aspect-ratio:1;border:1px solid var(--line-2);border-radius:10px;background:#1a2438;display:grid;place-items:end center;overflow:hidden;padding-top:6px}
.mini img{max-height:92%;width:auto}
.syn{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 22px}
.syn span{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
.syn span.on{border-color:var(--mint);color:var(--mint)}
.stage-card{margin:0 -30px;border-top:1px solid var(--line);padding:24px 30px 0}
.stage-card h3{font-size:24px;font-weight:800;margin-bottom:14px}
.stage-art{position:relative;margin:0 -30px;height:280px;overflow:hidden}
.stage-art .scene{position:absolute;inset:0}
.stage-art .fade{position:absolute;inset:0;background:linear-gradient(180deg,var(--panel) 0,transparent 18%,transparent 55%,var(--panel) 100%)}
.stage-art .boss{position:absolute;right:26px;bottom:24px;height:150px;width:auto;filter:drop-shadow(0 6px 10px #000c)}
.stage-meta{margin-top:-10px;position:relative}
.stage-meta h4{font-size:20px;font-weight:800}
.stage-meta p{color:var(--muted);margin-top:6px;line-height:1.5;font-size:15px}
.stage-pips{display:flex;gap:6px;margin:16px 0 0}
.stage-pips i{flex:1;height:6px;border-radius:3px;background:#22304a}
.stage-pips i.done{background:var(--mint)}.stage-pips i.cur{background:var(--gold)}
.cta{width:100%;height:76px;margin-top:24px;border-radius:12px;background:var(--mint);color:var(--mint-ink);font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:18px;transition:background .15s,transform .1s}
.cta:hover{background:#5df0b9}.cta:active{transform:translateY(1px)}
.cta[disabled]{background:#22304a;color:var(--dim);cursor:not-allowed}
.cta svg{width:26px;height:26px}
.ghost{height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:12px;font-weight:600;font-size:14px;color:var(--muted)}
.ghost:hover{color:var(--text);border-color:#3a4a68}
.help{font-size:13px;color:var(--muted);margin-top:12px;text-align:center}

/* ---------- stage scenes (pure CSS, pixel-ish) ---------- */
.scene{background:linear-gradient(180deg,var(--sky1) 0,var(--sky2) 55%,var(--ground) 56%,var(--ground2) 100%)}
.scene::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at var(--mx,78%) 22%,var(--moon) 0 26px,transparent 27px),
  radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent),radial-gradient(1px 1px at 34% 9%,#fff6 50%,transparent),radial-gradient(1.5px 1.5px at 56% 24%,#fff7 50%,transparent),radial-gradient(1px 1px at 88% 12%,#fff6 50%,transparent),radial-gradient(1px 1px at 67% 6%,#fff5 50%,transparent)}
.scene svg{position:absolute;left:0;right:0;bottom:44%;width:100%;height:46%;shape-rendering:crispEdges}
.scene .far{color:var(--far)}.scene .near{color:var(--near)}
.s1{--sky1:#172a46;--sky2:#2d4a62;--ground:#203c32;--ground2:#13241f;--moon:#d9e7f2;--far:#24405a;--near:#1a3141}
.s2{--sky1:#1b2a26;--sky2:#3c5a3a;--ground:#2e4a2a;--ground2:#18291a;--moon:#d6f2a4;--far:#2b4a35;--near:#1d3527;--mx:22%}
.s3{--sky1:#26182e;--sky2:#5a3048;--ground:#3a2433;--ground2:#1d1320;--moon:#ffcf9a;--far:#43263c;--near:#2d1a2b}
.s4{--sky1:#0d1a33;--sky2:#14385c;--ground:#0f2a44;--ground2:#081627;--moon:#9ad8ff;--far:#163a5e;--near:#0f2843;--mx:30%}
.s5{--sky1:#2a1015;--sky2:#6b2a22;--ground:#3a1c18;--ground2:#1b0c0b;--moon:#ffd36b;--far:#4c1f1e;--near:#311312}

/* ---------- battle ---------- */
.battle{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px}
.arena{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);min-height:520px}
.arena .scene{position:absolute;inset:0}
.arena-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(180deg,#0b1220dd,transparent);z-index:3}
.arena-top h3{font-size:18px;font-weight:800}.arena-top small{color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.round{font-family:var(--display);font-size:15px;letter-spacing:.14em;padding:8px 14px;border-radius:10px;background:#0b1220cc;border:1px solid var(--line-2)}
.sides{position:absolute;inset:70px 0 0;display:grid;grid-template-columns:1fr 1fr;padding:0 26px 26px;z-index:2}
.side{display:grid;grid-template-rows:repeat(3,1fr);gap:4px}
.side.foe{justify-items:end}
.unit{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:end;gap:14px;width:min(100%,360px);border-radius:14px;padding:6px 10px;transition:opacity .4s, transform .2s;text-align:left}
.foe .unit{grid-template-columns:1fr auto;text-align:right}
.foe .unit .sprite{order:2}
.unit .sprite{height:118px;width:110px;display:grid;place-items:end center;position:relative}
.unit .sprite img{max-height:118px;max-width:110px;width:auto;object-fit:contain;filter:drop-shadow(0 6px 6px #0009);transition:transform .15s}
.foe .unit .sprite img{transform:scaleX(-1)}
.unit .sprite::after{content:"";position:absolute;bottom:-4px;left:12%;right:12%;height:10px;border-radius:50%;background:#0006;z-index:-1}
.unit .info{padding-bottom:10px;min-width:0}
.unit .nm{font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 4px #000a}
.unit .tags{display:flex;gap:6px;margin:5px 0 7px;flex-wrap:wrap}
.foe .unit .tags{justify-content:flex-end}
.hp{height:10px;border-radius:6px;background:#0b1220cc;border:1px solid #ffffff22;overflow:hidden}
.hp i{display:block;height:100%;background:linear-gradient(90deg,var(--mint-2),var(--mint));transition:width .45s ease}
.hp.mid i{background:linear-gradient(90deg,#e7a21c,var(--gold))}.hp.low i{background:linear-gradient(90deg,#e0384b,var(--red))}
.hpn{font-size:11px;color:#cfd8e6;margin-top:4px;text-shadow:0 1px 3px #000}
.unit.dead{opacity:.28;filter:grayscale(1)}
.unit.pick{cursor:pointer}
.unit.pick:hover,.unit.target{background:#ffffff14;box-shadow:inset 0 0 0 2px var(--red)}
.unit.actor{background:#ffcc1f1a;box-shadow:inset 0 0 0 2px var(--mint)}
.unit.ally-pick{cursor:pointer}.unit.ally-pick:hover{box-shadow:inset 0 0 0 2px var(--mint)}
.badge{font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:5px;text-transform:uppercase}
.badge.guard{background:#22356b;color:#b7c8ff}.badge.rug{background:#5a1f2a;color:#ffb3bd}.badge.boss{background:#5a1f2a;color:#ff9aa6}.badge.hype{background:#4a3a12;color:#ffd77a}
.plan-tag{position:absolute;top:2px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:6px;background:var(--mint);color:var(--mint-ink)}
.side:not(.foe) .plan-tag{left:8px}
.float{position:absolute;left:50%;top:10px;transform:translateX(-50%);font-family:var(--display);font-weight:700;font-size:24px;pointer-events:none;animation:float 1s ease-out forwards;text-shadow:0 2px 0 #000,0 0 10px #000;z-index:5;white-space:nowrap}
.float.dmg{color:#fff}.float.crit{color:var(--gold);font-size:30px}.float.heal{color:var(--mint)}.float.miss{color:var(--muted);font-size:18px}
@keyframes float{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.1)}100%{opacity:0;transform:translate(-50%,-46px) scale(1)}}
.lunge-r img{animation:lungeR .35s ease}.lunge-l img{animation:lungeL .35s ease}
@keyframes lungeR{50%{transform:translateX(40px)}}
@keyframes lungeL{50%{transform:translateX(-40px) scaleX(-1)}}
.foe .lunge-l img{animation:lungeL .35s ease}
.shake img{animation:shake .35s}
.foe .shake img{animation:shakeF .35s}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes shakeF{0%,100%{transform:scaleX(-1)}20%{transform:scaleX(-1) translateX(-7px)}40%{transform:scaleX(-1) translateX(7px)}60%{transform:scaleX(-1) translateX(-4px)}}
.flash img{filter:brightness(2.4) drop-shadow(0 0 10px #fff)}

.cmd{padding:22px;display:flex;flex-direction:column;gap:16px}
.hype{display:flex;align-items:center;gap:12px}
.hype-cells{display:flex;gap:5px;flex:1}
.hype-cells i{flex:1;height:14px;border-radius:4px;background:#22304a}
.hype-cells i.on{background:linear-gradient(180deg,#ffd77a,var(--gold));box-shadow:0 0 8px #f5a52455}
.hype-cells i.spend{background:#7a5a1a}
.hype b{font-family:var(--display);font-size:18px;min-width:44px;text-align:right}
.who-acts{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line-2)}
.who-acts img{height:54px;width:54px;object-fit:contain;object-position:bottom}
.who-acts b{display:block;font-size:16px}.who-acts small{color:var(--muted);font-size:12px}
.acts{display:grid;gap:10px}
.act{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel-2);text-align:left;transition:border-color .15s,background .15s}
.act:hover:not([disabled]){border-color:var(--mint)}
.act.sel{border-color:var(--mint);background:#ffcc1f14}
.act[disabled]{opacity:.45;cursor:not-allowed}
.act .ic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:#22304a}
.act .ic svg{width:18px;height:18px}
.act b{display:block;font-size:14px}.act small{display:block;color:var(--muted);font-size:12px;line-height:1.35;margin-top:2px}
.act .pr{font-size:12px;font-weight:700;color:var(--gold);white-space:nowrap}
.act .cd{font-size:12px;color:var(--muted);white-space:nowrap}
.act.sig .ic{background:linear-gradient(135deg,#5a3d0e,#3b2a10);color:var(--gold)}
.hint{font-size:13px;color:var(--muted);min-height:18px}
.log{height:170px;overflow:auto;padding:12px 14px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);font-size:13px;line-height:1.55;color:#c7d1e2}
.log p{margin-bottom:3px}.log em{color:var(--mint);font-style:normal;font-weight:600}.log strong{color:var(--gold)}.log .foe-t{color:#ff9aa6;font-weight:600}
.row2{display:flex;gap:10px}
.row2 .cta{height:58px;font-size:20px;margin:0;flex:1}

/* ---------- result overlay ---------- */
.result{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:#0b1220cc;backdrop-filter:blur(4px);animation:fade .3s}
@keyframes fade{from{opacity:0}}
.result .box{text-align:center;padding:36px 40px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line-2);max-width:440px;width:calc(100% - 32px)}
.result h2{font-family:var(--display);font-size:44px;letter-spacing:.06em}
.result h2.win{color:var(--mint)}.result h2.lose{color:var(--red)}
.result p{color:var(--muted);margin:10px 0 22px;line-height:1.5}
.result .reward{display:inline-flex;align-items:center;gap:10px;font-size:24px;font-weight:800;margin-bottom:22px}
.result .cta{height:60px;font-size:20px;margin-top:0}
.result .ghost{margin-top:10px;width:100%}

/* ---------- roster / modal ---------- */
.modal{position:fixed;inset:0;z-index:100;background:#05080fcc;backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px;animation:fade .2s}
.modal-card{width:min(860px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--panel);border:1px solid var(--line-2);border-radius:20px;display:grid;grid-template-columns:320px 1fr;position:relative}
.modal-card .close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:10px;font-size:22px;color:var(--muted);z-index:2}
.modal-card .close:hover{background:#22304a;color:var(--text)}
.m-art{background:radial-gradient(70% 55% at 50% 72%,#26365588,transparent 70%),#0f1729;display:grid;place-items:end center;padding:30px 20px;border-right:1px solid var(--line);position:relative}
.m-art img{max-height:330px;width:auto;filter:drop-shadow(0 12px 14px #000a)}
.m-body{padding:30px 30px 28px}
.m-body h2{font-size:34px;font-weight:800;letter-spacing:-.01em}
.m-body .handle{color:var(--mint);font-size:14px;font-weight:600}
.m-body .cls{color:var(--muted);margin:2px 0 14px}
.m-body .bio{color:#c7d1e2;line-height:1.6;font-size:15px;margin:16px 0}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.narr{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);color:#c7d1e2}
.stats{display:grid;grid-template-columns:auto 1fr auto;gap:8px 14px;align-items:center;margin:18px 0}
.stats span{font-size:12px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.stats i{height:8px;border-radius:4px;background:#22304a;overflow:hidden}
.stats i b{display:block;height:100%;background:var(--mint);border-radius:4px}
.stats em{font-style:normal;font-weight:700;font-size:14px;text-align:right;min-width:30px}
.kit{display:grid;gap:10px}
.kit div{padding:12px 14px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line)}
.kit b{font-size:14px}.kit small{display:block;color:var(--muted);font-size:13px;margin-top:3px;line-height:1.45}
.kit .k{font-size:10px;letter-spacing:.12em;color:var(--gold);font-weight:700;text-transform:uppercase;margin-bottom:3px;display:block}
.m-foot{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;align-items:center}
.m-foot .cta{height:50px;font-size:16px;margin:0;width:auto;padding:0 24px}

/* ---------- shop / ranks ---------- */
.section-title{font-size:22px;font-weight:800;margin:30px 0 14px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.item{padding:20px;display:flex;flex-direction:column;gap:12px}
.item .ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:#22304a;font-size:24px}
.item h4{font-size:17px}.item p{color:var(--muted);font-size:14px;line-height:1.5;flex:1}
.item .buy{display:flex;align-items:center;justify-content:space-between;gap:10px}
.item .price{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px}
.item .own{font-size:12px;color:var(--mint);font-weight:600}
.btn{height:42px;padding:0 18px;border-radius:10px;background:var(--mint);color:var(--mint-ink);font-weight:700;font-size:14px}
.btn:hover{background:#5df0b9}.btn[disabled]{background:#22304a;color:var(--dim);cursor:not-allowed}
.unlock-card{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:14px}
.unlock-card .pic{height:104px;display:grid;place-items:end center;border-radius:10px;background:#0f1729}
.unlock-card .pic img{max-height:98px;width:auto}
.unlock-card h4{font-size:15px;margin-bottom:6px}
.unlock-card .buy{margin-top:10px}
.note{padding:16px 18px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel-2);color:#c7d1e2;line-height:1.55;font-size:14px}
.note b{color:var(--text)}
.table{width:100%;border-collapse:collapse}
.table th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
.table td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px}
.table tr:last-child td{border-bottom:0}
.table .team{display:flex;gap:4px}
.table .team img{height:36px;width:36px;object-fit:contain;object-position:bottom;border-radius:6px;background:#0f1729}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.kpi{padding:18px 20px}.kpi small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.kpi b{display:block;font-size:28px;font-weight:800;margin-top:6px}
.empty-state{padding:40px;text-align:center;color:var(--muted)}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:120;padding:14px 20px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line-2);box-shadow:0 20px 40px -10px #000c;font-weight:600;font-size:14px;animation:fade .2s;max-width:calc(100% - 32px)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .split{grid-template-columns:1fr}
  .summary{position:static}
  .battle{grid-template-columns:1fr}
}
@media (max-width:860px){
  .top{grid-template-columns:1fr auto;height:auto;padding:12px 16px;gap:10px}
  .tabs{grid-column:1/-1;order:3;justify-content:space-between;height:44px;margin:0 -16px;border-top:1px solid var(--line);padding:0 6px}
  .tabs a{padding:0 12px;font-size:14px}
  .tabs a.on::after{left:8px;right:8px}
  .wallet{padding:0 12px}.wallet small{display:none}.wallet svg{width:28px;height:28px}
  .coins{padding:0 12px}.gear{width:52px}
  main{padding:20px 16px 40px}
  .slots{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .slot{min-height:0}
  .slot .art{min-height:120px;padding:44px 6px 0}.slot .art img{max-height:110px}
  .slot .meta{flex-direction:column;align-items:flex-start;padding:10px}
  .slot .meta h3{font-size:13px;margin-bottom:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .slot .meta .role{font-size:9px;padding:4px 6px;gap:4px}.slot .meta .role svg{width:11px;height:11px}
  .cost{text-align:left}.cost b{font-size:15px}.cost small{display:none}
  .slot .num{width:26px;height:26px;top:8px;left:8px;font-size:13px}.slot .x{top:6px;right:6px;width:28px;height:28px}
  .slot.empty .plus{width:40px;height:40px}.slot.empty p{font-size:11px;padding:0 6px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .budget{min-width:0;width:100%}
  .summary{padding:22px}.stage-card,.stage-art{margin-left:-22px;margin-right:-22px}.stage-card{padding-left:22px;padding-right:22px}
  .arena{min-height:460px}
  .sides{padding:0 8px 14px;inset:62px 0 0}
  .unit{grid-template-columns:1fr;gap:2px;padding:4px}
  .foe .unit{grid-template-columns:1fr}
  .foe .unit .sprite{order:0;justify-self:end}
  .unit .sprite{height:76px;width:76px}.unit .sprite img{max-height:76px;max-width:76px}
  .unit .nm{font-size:12px}.unit .tags{display:none}
  .modal-card{grid-template-columns:1fr}
  .m-art{border-right:0;border-bottom:1px solid var(--line);padding:24px}.m-art img{max-height:220px}
  .m-body{padding:22px}
  .brand span{font-size:14px;letter-spacing:.16em}
}
@media (max-width:420px){.brand span{display:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}

/* ---------- v1.1: packs, starter, polish ---------- */
.muted{color:var(--muted)}
.brand{font-family:var(--display);font-weight:700;letter-spacing:.16em;font-size:15px}
.h1{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.round{font-family:var(--display);font-size:12px}
.unit{background:none;border:0;color:inherit;font:inherit}
.unit.acting .sprite img{filter:drop-shadow(0 0 12px #ffcc1faa) drop-shadow(0 6px 6px #0009)}
.side.foe .unit.acting .sprite img{filter:drop-shadow(0 0 12px #ff5d6caa) drop-shadow(0 6px 6px #0009)}
.slot .art{border:0;background:radial-gradient(60% 50% at 50% 70%,#22304a88,transparent 70%);cursor:zoom-in}
.fcard .pic{border:0;cursor:zoom-in;width:100%}
button.fcard{color:inherit;font:inherit;width:100%}
.getmore{display:grid;place-items:center;align-content:center;gap:8px;text-align:center;min-height:300px;border-style:dashed;color:var(--muted);padding:20px}
.getmore .plus{width:52px;height:52px;border-radius:50%;border:1.5px dashed var(--line-2);display:grid;place-items:center;font-size:26px;color:var(--mint)}
.getmore b{color:var(--text)}.getmore small{font-size:12px}
.getmore:hover{border-color:var(--mint)}

/* starter */
.starter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);overflow:hidden;min-height:560px;background:radial-gradient(800px 420px at 85% 50%,#ffcc1f14,transparent 60%),var(--panel)}
.starter-copy{padding:56px 52px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.starter-copy .h1{font-size:clamp(34px,4.2vw,56px);margin:10px 0 4px}
.starter-copy .sub{max-width:480px;line-height:1.55}
.starter-copy .cta{max-width:380px}
.rule{display:flex;gap:10px;margin:26px 0 4px;flex-wrap:wrap}
.rule div{display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 8px;padding:12px 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel-2)}
.rule b{font-family:var(--display);font-size:22px}
.rule span{grid-column:1/-1;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rule div:nth-child(1) span{color:var(--common)}.rule div:nth-child(2) span{color:var(--uncommon)}.rule div:nth-child(3) span{color:var(--rare)}
.starter-art{position:relative;display:grid;place-items:center;min-height:420px}
.pack-box{position:relative;z-index:3;width:230px;aspect-ratio:5/7;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;
  background:linear-gradient(155deg,#1d2c4a 0%,#122038 45%,#0d1a2e 100%);border:1px solid #ffcc1f66;
  box-shadow:0 0 0 6px #0b1220,0 0 0 7px #ffcc1f33,0 40px 80px -20px #000,0 0 80px -10px #ffcc1f40;animation:bob 4s ease-in-out infinite}
.pack-box::before{content:"";position:absolute;inset:10px;border-radius:12px;border:1px dashed #ffcc1f40}
.pack-box::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,#ffffff22 45%,transparent 60%);background-size:250% 100%;animation:sheen 3.5s ease-in-out infinite}
.pack-box .pmark{width:74px;height:74px;color:var(--mint);filter:drop-shadow(0 0 16px #ffcc1faa)}
.pack-box b{font-family:var(--display);font-size:20px;letter-spacing:.14em;line-height:1.25}
.pack-box small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pack-box.sm{width:100%;max-width:none;aspect-ratio:auto;height:150px;animation:none;box-shadow:none;border-radius:12px;gap:8px}
.pack-box.sm .pmark{width:44px;height:44px}.pack-box.sm b{font-size:14px}
.pack-item.rare .pack-box{background:linear-gradient(155deg,#2a2152,#171538 50%,#100f27);border-color:#c06bff77}
.pack-item.rare .pack-box .pmark{color:var(--epic);filter:drop-shadow(0 0 16px #c06bffaa)}
@keyframes bob{50%{transform:translateY(-10px) rotate(-1deg)}}
@keyframes sheen{0%,40%{background-position:120% 0}100%{background-position:-120% 0}}
.peek{position:absolute;height:170px;width:auto;filter:drop-shadow(0 12px 14px #000b);z-index:2}
.peek.p0{left:6%;bottom:16%;transform:rotate(-8deg)}
.peek.p1{left:20%;top:8%;height:130px;opacity:.75;z-index:1}
.peek.p2{right:6%;bottom:14%;transform:scaleX(-1) rotate(-6deg)}
.peek.p3{right:18%;top:6%;height:130px;opacity:.75;z-index:1;transform:scaleX(-1)}
.peek.p4{left:50%;bottom:2%;height:110px;transform:translateX(-50%);opacity:.5;z-index:1}

/* pack opening */
.modal-card.wide{width:min(1120px,100%);display:block}
.pack-open{padding:40px 36px 34px;text-align:center}
.pack-open h2{font-family:var(--display);font-size:clamp(26px,3vw,38px);margin:8px 0 6px}
.pack-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:28px 0 24px;perspective:1200px}
.pcard{position:relative;aspect-ratio:5/7;border:0;background:none;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1);animation:deal .5s backwards;animation-delay:var(--d)}
@keyframes deal{from{opacity:0;transform:translateY(30px) scale(.9)}}
.pcard:not(.flip):hover{transform:translateY(-6px)}
.pcard.flip{transform:rotateY(180deg)}
.pcard .back,.pcard .front{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.pcard .back{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#13203a 0 10px,#0f1a30 10px 20px);border:1px solid #ffcc1f55;box-shadow:inset 0 0 0 6px #0b1220,inset 0 0 0 7px #ffcc1f33}
.pcard .back .pmark{width:64px;height:64px;color:var(--mint);opacity:.85}
.pcard .front{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:stretch;padding:12px;gap:8px;background:radial-gradient(80% 50% at 50% 45%,var(--glow,#22304a) 0,transparent 70%),var(--panel-2);border:1px solid var(--edge,var(--line-2));text-align:left}
.pcard .front .pic{flex:1;display:grid;place-items:end center;min-height:0;padding-top:20px}
.pcard .front .pic img{max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 8px 10px #000a)}
.pcard .front b{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .front .row{display:flex;justify-content:space-between;align-items:center;gap:6px}
.pcard .front .cr{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.pcard .front .rar{top:10px;left:10px}
.pcard .new,.pcard .dup{position:absolute;top:10px;right:10px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:6px;background:var(--mint);color:var(--mint-ink);display:inline-flex;gap:4px;align-items:center}
.pcard .dup{background:#3a2c10;color:var(--gold)}
.pcard .dup .coin{width:11px;height:11px}.pcard .dup .coin::after{inset:2.5px}.pcard .dup .coin::before{inset:4px}
.pcard.r-Uncommon{--edge:#3ee6a866;--glow:#3ee6a830}
.pcard.r-Rare{--edge:#5b9cff99;--glow:#5b9cff40}
.pcard.r-Epic{--edge:#c06bffaa;--glow:#c06bff44}
.pcard.r-Legendary{--edge:#f5a524bb;--glow:#f5a52444}
.pcard.r-Rare.flip .front{box-shadow:0 0 30px -4px #5b9cff88}
.pcard.r-Epic.flip .front,.pcard.r-Legendary.flip .front{box-shadow:0 0 36px -2px var(--edge)}
.pack-foot{display:flex;justify-content:center;gap:10px}
.pack-foot .btn{height:52px;padding:0 28px;font-size:16px}
.owned-tag{color:var(--mint);font-weight:700;font-size:14px}
.cost-inline{display:inline-flex;align-items:center;gap:8px;font-weight:800;margin-left:auto}
.cost-inline small{font-weight:500;color:var(--muted);font-size:12px}
.m-art .rar{top:16px;left:16px}
.odds{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.odds span{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;background:var(--bg-2);border:1px solid var(--line)}
.o-Common{color:var(--common)}.o-Uncommon{color:var(--uncommon)}.o-Rare{color:var(--rare)}.o-Epic{color:var(--epic)}
.unlock-card .pic{border:0;cursor:zoom-in;width:100%}
.unlock-card .btn{display:inline-flex;align-items:center;gap:8px}
@media (max-width:860px){
  .starter{grid-template-columns:1fr}
  .starter-copy{padding:30px 22px;order:2}
  .starter-art{min-height:330px}
  .pack-box{width:180px}
  .peek{height:120px}.peek.p1,.peek.p3{height:90px}
  .pack-open{padding:30px 16px 22px}
  .pack-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .pack-row .pcard:last-child{grid-column:1/-1;width:50%;justify-self:center}
}
/* battle fixes */
.unit .info,.unit .nm,.unit .hp,.unit .hpn{display:block}
.unit .tags{display:flex}
.unit .hp{width:100%;max-width:220px}
.foe .unit .hp{margin-left:auto}
.unit{width:min(100%,400px)}
.unit .sprite{height:150px;width:140px}
.unit .sprite img{max-height:150px;max-width:140px}
.arena{min-height:600px}
@media (max-width:860px){.unit .sprite{height:80px;width:80px}.unit .sprite img{max-height:80px;max-width:80px}.arena{min-height:470px}}
.fcard.locked .pic img{filter:grayscale(.9) brightness(.5) contrast(.9)}
.fcard.locked:hover .pic img{filter:grayscale(.3) brightness(.85)}
.fcard.locked h4{color:var(--muted)}

/* ================= 1v1 fight screen (fighting-game layout) ================= */
.tchip{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--tc);background:color-mix(in srgb,var(--tc) 16%,transparent);border:1px solid color-mix(in srgb,var(--tc) 45%,transparent);white-space:nowrap}
.fg{display:grid;gap:12px}
.fg-hud{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:center;padding:14px 18px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line)}
.hud-side{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.hud-side.foe{grid-template-columns:minmax(0,1fr) auto}
.hud-side.foe .hud-portrait{order:2}
.hud-portrait{width:72px;height:72px;border-radius:12px;background:linear-gradient(160deg,#22304a,#121b2e);border:1px solid var(--line-2);display:grid;place-items:end center;overflow:hidden}
.hud-portrait img{height:66px;width:auto}
.hud-side.foe .hud-portrait img{transform:scaleX(-1)}
.hud-name{display:flex;align-items:center;gap:8px;min-width:0}
.hud-name b{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-types{display:inline-flex;gap:4px}
.hud-side.foe .hud-name{flex-direction:row-reverse}
.hud-bar{position:relative;height:20px;margin:8px 0 6px;border-radius:4px;background:#0b1220;border:1px solid #ffffff1f;overflow:hidden;transform:skewX(-14deg)}
.hud-bar i{position:absolute;top:0;bottom:0;left:0;transition:width .45s cubic-bezier(.3,.8,.3,1)}
.hud-side.foe .hud-bar i{left:auto;right:0}
.hud-bar .lag{background:#fff;opacity:.85;transition:width .6s ease .1s}
.hud-bar .fill{background:linear-gradient(180deg,#7ff5c9,var(--mint) 50%,#22b884)}
.hud-bar.mid .fill{background:linear-gradient(180deg,#ffd77a,var(--gold) 50%,#c97f0d)}
.hud-bar.low .fill{background:linear-gradient(180deg,#ff96a0,var(--red) 50%,#c22a3b);animation:lowpulse 1s infinite}
@keyframes lowpulse{50%{filter:brightness(1.35)}}
.hud-bar.sm{height:8px;margin:6px 0 4px;transform:none}
.hud-sub{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.hud-side.foe .hud-sub{flex-direction:row-reverse}
.hpnum{font-variant-numeric:tabular-nums;font-weight:600;color:#c7d1e2}
.stchip{font-size:10px;font-weight:800;letter-spacing:.08em;padding:2px 6px;border-radius:4px;color:#0b1220;background:var(--sc)}
.stock{display:inline-flex;gap:4px;margin-left:auto}
.hud-side.foe .stock{margin-left:0;margin-right:auto}
.stock i{width:26px;height:26px;border-radius:6px;background:#0f1729;border:1px solid var(--line-2);display:grid;place-items:end center;overflow:hidden}
.stock i img{height:24px;width:auto}
.stock i.on{border-color:var(--mint)}.hud-side.foe .stock i.on{border-color:var(--red)}
.stock i.ko img{filter:grayscale(1) brightness(.4)}
.hud-mid{text-align:center;display:grid;gap:2px;padding:0 6px}
.hud-mid b{font-family:var(--display);font-size:30px;font-weight:800;font-style:italic;letter-spacing:-.02em;background:linear-gradient(180deg,#fff,#9fb0cc);-webkit-background-clip:text;background-clip:text;color:transparent}
.hud-mid small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap}

.fg-stage{position:relative;height:min(52vh,470px);min-height:340px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2)}
.fg-stage .scene{position:absolute;inset:0}
.fg-stage .scene svg{bottom:34%;height:44%}
.fg-floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,#00000000,#0006),repeating-linear-gradient(90deg,#ffffff08 0 1px,transparent 1px 64px);border-top:1px solid #ffffff14}
.fg-fighters{position:absolute;inset:0}
.fgf{position:absolute;bottom:16%;width:30%;height:66%;display:flex;align-items:flex-end;justify-content:center;transition:transform .2s}
.fgf.me{left:12%}.fgf.foe{right:12%}
.fgf img{max-height:100%;max-width:100%;width:auto;object-fit:contain;filter:drop-shadow(0 14px 14px #000b);position:relative;z-index:1}
.fgf.foe img{transform:scaleX(-1)}
.fgf.boss img{filter:drop-shadow(0 0 18px #ff5d6c88) drop-shadow(0 14px 14px #000b)}
.fgf .shadow{position:absolute;bottom:-8px;left:20%;right:20%;height:16px;border-radius:50%;background:radial-gradient(#000a,transparent 70%)}
.fx-lungeR{animation:lungeR2 .45s ease}.fx-lungeL{animation:lungeL2 .45s ease}
@keyframes lungeR2{40%{transform:translateX(70%)}}
@keyframes lungeL2{40%{transform:translateX(-70%)}}
.fx-hit img{animation:hit2 .45s}
@keyframes hit2{0%{filter:brightness(3) drop-shadow(0 0 12px #fff)}25%{translate:-10px 0}50%{translate:10px 0;filter:brightness(1.6)}75%{translate:-5px 0}100%{translate:0 0}}
.fx-charge img{animation:charge .7s}
@keyframes charge{30%{filter:brightness(1.8) drop-shadow(0 0 22px #f5a524) drop-shadow(0 0 40px #f5a524aa)}}
.fx-status img{animation:stat .6s}
@keyframes stat{30%{filter:hue-rotate(80deg) brightness(1.4) drop-shadow(0 0 18px #c06bff)}}
.fx-ko{animation:ko .8s forwards}
@keyframes ko{to{opacity:0;transform:translateY(30px) rotate(-8deg)}}
.fgf.foe.fx-ko{animation-name:koF}
@keyframes koF{to{opacity:0;transform:translateY(30px) rotate(8deg)}}
.fx-in{animation:in .55s cubic-bezier(.2,.8,.2,1)}
.fgf.me.fx-in{animation-name:inL}
@keyframes in{from{opacity:0;transform:translateX(40%)}}
@keyframes inL{from{opacity:0;transform:translateX(-40%)}}
.fx-out{animation:out .3s forwards}@keyframes out{to{opacity:0}}
.fnum{position:absolute;left:50%;top:6%;z-index:5;transform:translateX(-50%);font-family:var(--display);font-weight:800;font-size:34px;pointer-events:none;animation:fnum 1.1s ease-out forwards;text-shadow:0 3px 0 #000,0 0 14px #000;white-space:nowrap}
.fnum.dmg{color:#fff}.fnum.crit{color:var(--gold);font-size:44px}.fnum.eff{color:#ffdd55;font-size:40px}.fnum.heal{color:var(--mint)}.fnum.poison{color:#c58cff}.fnum.burn{color:#ff8a3d}
@keyframes fnum{0%{opacity:0;translate:0 14px;scale:.7}15%{opacity:1;translate:0 0;scale:1.15}100%{opacity:0;translate:0 -60px;scale:1}}
.callout{position:absolute;left:50%;top:34%;z-index:6;transform:translate(-50%,-50%) skewX(-10deg);font-family:var(--display);font-weight:800;font-style:italic;font-size:clamp(28px,5vw,64px);letter-spacing:.02em;white-space:nowrap;pointer-events:none;
  color:#fff;text-shadow:0 4px 0 #000a,0 0 30px currentColor;animation:callout 1.25s cubic-bezier(.2,.9,.3,1) forwards}
.callout.eff{color:#ffdd55}.callout.crit{color:var(--gold)}.callout.res{color:#9fb0cc;font-size:clamp(22px,3.4vw,44px)}.callout.miss{color:#9fb0cc}.callout.ko{color:var(--red);font-size:clamp(48px,9vw,120px)}
.callout.sig{color:var(--gold);font-size:clamp(22px,3.4vw,40px);top:20%}.callout.boss{color:var(--red)}.callout.big{color:var(--mint)}
@keyframes callout{0%{opacity:0;scale:2.2}12%{opacity:1;scale:1}80%{opacity:1;scale:1.04}100%{opacity:0;scale:1.1}}
.fg-cap{position:absolute;left:16px;bottom:14px;z-index:4;max-width:min(560px,calc(100% - 32px));display:grid;gap:2px;pointer-events:none}
.fg-cap p{font-size:13px;color:#c7d1e2cc;padding:3px 10px;border-radius:6px;background:#0b1220aa;width:fit-content}
.fg-cap p.now{font-size:15px;font-weight:600;color:#fff;background:#0b1220e6;border-left:3px solid var(--mint);padding:7px 12px}
.fg-tip{padding:10px 14px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line-2);font-size:13px;color:#c7d1e2;line-height:1.5;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.fg-tip b{color:var(--text)}
.fg-controls{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:12px;align-items:stretch;min-height:150px}
.fg-wait{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted);border-radius:var(--r-lg);border:1px dashed var(--line-2);font-weight:600}
.dots{display:inline-flex;gap:5px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:dot 1s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{opacity:.2;transform:translateY(-4px)}}
.hand{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.mcard{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;padding:12px 14px 16px;border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 10%,var(--panel-2)),var(--panel-2) 60%);border:1px solid var(--line-2);border-top:3px solid var(--tc);transition:transform .15s,border-color .15s,box-shadow .15s;overflow:hidden}
.mcard:hover:not([disabled]),.mcard:focus-visible{transform:translateY(-4px);border-color:var(--tc);box-shadow:0 14px 30px -14px var(--tc)}
.mcard[disabled]{opacity:.4;cursor:not-allowed}
.mcard.sig{border-top-color:var(--gold);box-shadow:inset 0 0 0 1px #f5a52455}
.mcard.sig::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#f5a5241f 50%,transparent 65%);background-size:250% 100%;animation:sheen 3s infinite;pointer-events:none}
.mc-top{display:flex;justify-content:space-between;align-items:center}
.mc-key{width:20px;height:20px;border-radius:5px;border:1px solid var(--line-2);font-size:11px;color:var(--muted);display:grid;place-items:center}
.mc-sig{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--gold);text-transform:uppercase}
.mc-name{font-weight:800;font-size:15px;line-height:1.2;min-height:2.4em}
.mc-main{display:flex;align-items:baseline;gap:6px}
.mc-dmg{font-family:var(--display);font-size:22px;font-weight:700}.mc-dmg.heal{color:var(--mint)}
.mc-main small{font-size:10px;letter-spacing:.08em;color:var(--muted);font-weight:600}
.mc-foot{display:flex;gap:10px;font-size:11px;color:var(--muted);font-weight:600;flex-wrap:wrap}
.mc-uses{position:absolute;left:0;right:0;bottom:0;height:4px;background:#0b1220}
.mc-uses i{display:block;height:100%;background:var(--tc)}
.mc-left{position:absolute;right:12px;bottom:9px;font-size:10px;color:var(--dim);font-weight:600}
.fg-side-actions{display:grid;gap:8px;align-content:start}
.sa{height:44px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel);font-weight:700;font-size:14px;color:#c7d1e2}
.sa:hover:not([disabled]){border-color:#3a4a68;color:var(--text)}
.sa.on{background:var(--mint);border-color:var(--mint);color:var(--mint-ink)}
.sa[disabled]{opacity:.4;cursor:not-allowed}
.sa em{font-style:normal;font-size:11px;padding:1px 6px;border-radius:999px;background:#0b122055;margin-left:4px}
.sa.ghosty{background:none;color:var(--muted);font-weight:600}
.hand.swap{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.scard{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line-2);text-align:left}
.scard:hover:not([disabled]){border-color:var(--mint)}
.scard[disabled]{opacity:.45;cursor:not-allowed}
.scard img{height:72px;width:72px;object-fit:contain;object-position:bottom}
.scard b{display:block;font-size:15px;margin-bottom:4px}.scard small{color:var(--muted);font-size:12px}
.scard.item{grid-template-columns:48px 1fr}.scard .ico{width:48px;height:48px;border-radius:12px;background:#22304a;display:grid;place-items:center;font-size:22px}
.kit .k{display:flex;align-items:center;gap:8px;color:var(--muted);letter-spacing:.04em;text-transform:none;font-size:11px}
.kit .kst{margin-left:auto;color:var(--dim)}
.kit .sigm{border-color:#f5a52455;background:linear-gradient(180deg,#f5a5240f,var(--panel-2))}
.result{z-index:8}
@media (max-width:860px){
  .fg-hud{grid-template-columns:1fr 1fr;padding:10px;gap:10px}
  .hud-mid{display:none}
  .hud-portrait{width:44px;height:44px}.hud-portrait img{height:40px}
  .hud-name b{font-size:12px}.hud-types,.stock{display:none}
  .hud-side{gap:8px}.hud-bar{height:14px}
  .fg-stage{height:330px;min-height:0}
  .fgf{width:40%;height:56%;bottom:18%}.fgf.me{left:4%}.fgf.foe{right:4%}
  .fg-controls{grid-template-columns:1fr}
  .fg-side-actions{grid-template-columns:repeat(4,1fr);order:-1}
  .sa{height:40px;font-size:13px}
  .hand{grid-template-columns:1fr 1fr}
  .mc-name{font-size:13px}.mc-dmg{font-size:18px}
}

/* ================= Arcade palette: red / blue / yellow (joystick buttons) ================= */
:root{
  --mint:#ffcc1f; --mint-2:#f2b400; --mint-ink:#2a1a00;
  --yellow:#ffcc1f; --blue:#2f7bff; --blue-2:#1c5fe0; --red:#ff3b47; --red-2:#d81f2c;
  --uncommon:#4cd964;
  --attacker:#ff5a63; --defender:#4f8dff; --support:#4cd964; --utility:#ffcc1f;
  --bg:#0a0f1e; --bg-2:#0d1426; --panel:#10182b; --panel-2:#141e34;
}
body{background:radial-gradient(900px 500px at 15% -10%,#2f7bff22,transparent 60%),radial-gradient(900px 500px at 90% 0%,#ff3b4718,transparent 60%),var(--bg)}
/* glossy arcade buttons */
.cta,.btn,.chip.on,.sa.on,.lnav-cta{
  background:radial-gradient(120% 90% at 50% 0%,#ffe680 0%,var(--yellow) 45%,#f0b000 100%);color:var(--mint-ink);border-color:#c98f00;
  box-shadow:inset 0 2px 0 #fff7, inset 0 -4px 0 #0002, 0 4px 0 #a87400, 0 10px 22px -8px #ffcc1f88;transition:transform .08s, box-shadow .08s, filter .15s}
.cta:hover,.btn:hover,.lnav-cta:hover{filter:brightness(1.06);background:radial-gradient(120% 90% at 50% 0%,#fff0a6 0%,#ffd640 45%,#f5b800 100%)}
.cta:active,.btn:active,.lnav-cta:active{transform:translateY(3px);box-shadow:inset 0 2px 0 #fff7, inset 0 -2px 0 #0002, 0 1px 0 #a87400}
.cta[disabled],.btn[disabled]{background:#1d2740;color:var(--dim);box-shadow:none;border-color:transparent;filter:none}
.btn-red{background:radial-gradient(120% 90% at 50% 0%,#ff8a90 0%,var(--red) 45%,var(--red-2) 100%)!important;color:#fff!important;box-shadow:inset 0 2px 0 #fff5, inset 0 -4px 0 #0002, 0 4px 0 #9c1420, 0 10px 22px -8px #ff3b4788!important}
.btn-blue{background:radial-gradient(120% 90% at 50% 0%,#86b2ff 0%,var(--blue) 45%,var(--blue-2) 100%)!important;color:#fff!important;box-shadow:inset 0 2px 0 #fff5, inset 0 -4px 0 #0002, 0 4px 0 #123f9e, 0 10px 22px -8px #2f7bff88!important}
.fcard .add{border-color:var(--blue);color:#9cc0ff}
.fcard .add:hover{background:var(--blue);color:#fff}
.fcard.in{border-color:var(--yellow)}
.fcard.in .add{background:var(--yellow);border-color:var(--yellow);color:var(--mint-ink)}
.tabs a.on::after{background:linear-gradient(90deg,var(--red),var(--yellow),var(--blue))}
.bar i{background:linear-gradient(90deg,var(--blue),#5fa0ff)}
.slot{border-color:#2f7bff44}
.slot .num{background:var(--blue);color:#fff}
.slot.empty .num{background:#1a2438;color:var(--dim)}
/* brand mark: three arcade buttons */
.brand .mark{color:var(--yellow)}
/* fight screen sides */
.hud-side.me .hud-portrait{border-color:var(--blue);box-shadow:0 0 0 2px #2f7bff33}
.hud-side.foe .hud-portrait{border-color:var(--red);box-shadow:0 0 0 2px #ff3b4733}
.hud-side.me .hud-name b{color:#9cc0ff}.hud-side.foe .hud-name b{color:#ff9aa0}
.stock i.on{border-color:var(--blue)}.hud-side.foe .stock i.on{border-color:var(--red)}
.hud-bar .fill{background:linear-gradient(180deg,#fff08a,var(--yellow) 50%,#d99a00)}
.hud-bar.mid .fill{background:linear-gradient(180deg,#ffc48a,#ff8a2e 50%,#c95d00)}
.hud-mid b{background:linear-gradient(180deg,#fff 0%,var(--yellow) 60%,#ff8a2e);-webkit-background-clip:text;background-clip:text}
.fg-cap p.now{border-left-color:var(--blue)}
.fgf.me .shadow{background:radial-gradient(#2f7bff66,transparent 70%)}
.fgf.foe .shadow{background:radial-gradient(#ff3b4766,transparent 70%)}
.callout.big{color:var(--yellow)}
.sa.on{border-color:#c98f00}
.result h2.win{color:var(--yellow)}
@media (max-width:860px){.fg-cap p:not(.now){display:none}.fg-cap{left:8px;bottom:8px}.fg-cap p.now{font-size:13px}.mc-top{flex-wrap:wrap;gap:4px}}

/* ---- facing: every sprite is stored facing LEFT (original flip flags applied in tools/build.py).
   Anything standing on the left side of a matchup is mirrored so the two face each other. ---- */
.fgf.foe img,.hud-side.foe .hud-portrait img,.foe .unit .sprite img{transform:none}
.fgf.me img,.hud-side.me .hud-portrait img{transform:scaleX(-1)}
.peek.p0{transform:scaleX(-1) rotate(8deg)}.peek.p1{transform:scaleX(-1)}
.peek.p2{transform:rotate(-6deg)}.peek.p3{transform:none}
/* effects layer */
.fg-cam{position:absolute;inset:0;transform-origin:50% 70%;will-change:transform}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.fgf img{transition:filter .08s}
.fg-cap,.callout,.result{z-index:6}
.fnum{z-index:7}

/* ===== effects layer + Pokémon-style perspective: your fighter from behind (bottom-left), rival facing you (top-right) ===== */
.fg-cam{position:absolute;inset:0;transform-origin:50% 70%;will-change:transform}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.fg-cap,.callout,.result{z-index:6}.fnum{z-index:7}
.fg-stage{height:min(58vh,520px)}
.fg-floor{height:52%}
.fgf{bottom:auto;transition:none}
.fgf.foe{right:11%;top:13%;width:26%;height:44%}
.fgf.me{left:7%;bottom:0;top:auto;width:34%;height:66%}
.fgf img,.fgf.me img,.fgf.foe img{transform:none}
.fgf.me img{filter:drop-shadow(0 16px 14px #000c)}
.plat{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--pc) 30%,#0a0f1e) 0%,color-mix(in srgb,var(--pc) 14%,#0a0f1e) 62%,transparent 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pc) 45%,transparent),0 0 40px -6px color-mix(in srgb,var(--pc) 55%,transparent),inset 0 -6px 18px #0007}
.plat.foe{right:6%;top:50%;width:36%;height:15%}
.plat.me{left:0;bottom:-7%;width:48%;height:22%}
.fgf.me.fx-in{animation-name:inBack}
@keyframes inBack{from{opacity:0;transform:translate(-30%,10%)}}
.fgf.foe.fx-in{animation-name:inFront}
@keyframes inFront{from{opacity:0;transform:translateX(30%)}}
.hud-side.me .hud-portrait img{transform:scaleX(-1)}
@media (max-width:860px){
  .fg-stage{height:360px}
  .fgf.foe{right:4%;top:10%;width:38%;height:40%}
  .fgf.me{left:0;width:48%;height:58%}
  .plat.foe{right:0;width:50%;top:44%}.plat.me{width:62%}
}
.fgf.me{bottom:5%}
.plat.me{bottom:-3%}

/* ===== battle backdrop: Candle City (user artwork) ===== */
.fg-bg{position:absolute;inset:-3%;background:url(assets/stages/candle-city.webp) center 62%/cover no-repeat;image-rendering:auto;animation:bgdrift 40s ease-in-out infinite alternate}
@keyframes bgdrift{from{transform:scale(1) translateX(0)}to{transform:scale(1.04) translateX(-1.5%)}}
.fg-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 40%,transparent 55%,#0a0f1ecc 100%),
  linear-gradient(180deg,transparent 45%,#0a0f1e55 70%,#0a0f1ebb 100%)}
/* light colour grade per stage so the five stages still feel different */
.fg-bg.s2{filter:hue-rotate(-18deg) saturate(1.1)}
.fg-bg.s3{filter:hue-rotate(20deg) saturate(1.15) brightness(.95)}
.fg-bg.s4{filter:hue-rotate(-45deg) saturate(.9) brightness(.85)}
.fg-bg.s5{filter:hue-rotate(-8deg) saturate(1.3) contrast(1.08) brightness(.9)}
.fg-floor{display:none}
.plat{background:radial-gradient(closest-side,#0a0f1ee6 0%,color-mix(in srgb,var(--pc) 22%,#0a0f1ed0) 62%,transparent 100%)}
.fg-cap p.now{background:#0a0f1ef0}
@media (prefers-reduced-motion:reduce){.fg-bg{animation:none}}

/* ===================== Candle City Rooftop Arena ===================== */
.ar{position:absolute;inset:0;overflow:hidden;--hz:47%}
/* skyline: the user's painting, cropped to sky + towers */
.ar-sky{position:absolute;left:-3%;right:-3%;top:-4%;height:calc(var(--hz) + 10%);background:url(assets/stages/candle-city.webp) center 34%/cover no-repeat;animation:bgdrift 40s ease-in-out infinite alternate}
.ar-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,#120c2a99 92%,#120c2a 100%)}
/* rooftop floor in perspective */
.ar-floor{position:absolute;left:0;right:0;top:var(--hz);bottom:0;perspective:420px;perspective-origin:50% 0;
  background:linear-gradient(180deg,#1b1530 0%,#140f24 40%,#0b0916 100%)}
.ar-tiles{position:absolute;left:-60%;right:-60%;top:0;height:190%;transform-origin:50% 0;transform:rotateX(64deg);
  background:
    linear-gradient(90deg,#0000 0 96%,#00000066 96% 100%) 0 0/46px 46px,
    linear-gradient(0deg,#0000 0 96%,#00000066 96% 100%) 0 0/46px 46px,
    repeating-linear-gradient(90deg,#3a3350 0 46px,#352f4a 46px 92px),
    #312b45;
  -webkit-mask:linear-gradient(180deg,#0006 0%,#000 30%);mask:linear-gradient(180deg,#0006 0%,#000 30%)}
/* neon centre ring + fighter spots painted on the floor */
.ar-ring{position:absolute;left:50%;top:40%;width:62%;height:42%;transform:translate(-50%,-50%);border-radius:50%;
  border:2px solid #3ee68a88;box-shadow:0 0 18px #3ee68a66,inset 0 0 22px #3ee68a33;opacity:.75}
.ar-ring::before{content:"";position:absolute;inset:16%;border-radius:50%;border:1px dashed #ff5a6377}
/* wet floor: candle-tower reflections */
.ar-refl{position:absolute;inset:0;mix-blend-mode:screen;opacity:.55;background:
  linear-gradient(180deg,#3ee68a55,transparent 70%) 12% 0/3% 80% no-repeat,
  linear-gradient(180deg,#ff5a6355,transparent 60%) 30% 0/2.5% 70% no-repeat,
  linear-gradient(180deg,#3ee68a66,transparent 75%) 52% 0/3.5% 85% no-repeat,
  linear-gradient(180deg,#ff5a6355,transparent 65%) 66% 0/2.5% 70% no-repeat,
  linear-gradient(180deg,#3ee68a55,transparent 70%) 80% 0/3% 78% no-repeat,
  linear-gradient(180deg,#ffcf7a44,transparent 55%) 92% 0/2% 60% no-repeat;
  filter:blur(3px);animation:shimmer 4s ease-in-out infinite alternate}
@keyframes shimmer{to{opacity:.35;transform:scaleX(1.06)}}
/* stone balustrade + lamp posts along the horizon */
.ar-rail{position:absolute;left:0;right:0;top:calc(var(--hz) - 5.5%);height:6.5%;
  background:linear-gradient(180deg,#5c536e 0 18%,#2a2438 18% 26%,transparent 26% 86%,#3d3550 86% 100%)}
.ar-posts i{position:absolute;top:24%;bottom:12%;width:.9%;background:linear-gradient(90deg,#4a4260,#2a2438);border-radius:2px}
.lamp{position:absolute;bottom:0;width:.8%;height:260%;background:linear-gradient(90deg,#1a1626,#2e283c);transform:translateX(-50%)}
.lamp i{position:absolute;left:50%;top:-6%;width:300%;aspect-ratio:1/1.3;transform:translateX(-50%);border-radius:30% 30% 15% 15%;background:#ffd98a;box-shadow:0 0 10px 3px #ffb84a,0 0 40px 14px #ff9a2e55;animation:flicker 3.2s infinite;animation-delay:var(--d)}
.lamp i::after{content:"";position:absolute;left:50%;top:60%;width:2400%;height:900%;transform:translateX(-50%);background:radial-gradient(closest-side,#ffb84a2e,transparent);pointer-events:none}
@keyframes flicker{0%,100%{opacity:1}45%{opacity:.92}47%{opacity:.6}49%{opacity:.95}72%{opacity:.85}}
/* drifting embers */
.ar-motes i{position:absolute;bottom:-4%;width:3px;height:3px;border-radius:50%;background:var(--c);box-shadow:0 0 8px 2px var(--c);opacity:0;animation:mote var(--t) linear infinite;animation-delay:var(--d)}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}10%{opacity:.85}100%{opacity:0;transform:translate(30px,-420px)}}
.ar-vig{position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 45%,transparent 55%,#05040ccc 100%);pointer-events:none}
/* fighter spots on the floor */
.plat{background:radial-gradient(closest-side,color-mix(in srgb,var(--pc) 35%,transparent) 0%,color-mix(in srgb,var(--pc) 12%,transparent) 60%,transparent 100%)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--pc) 70%,transparent),0 0 26px color-mix(in srgb,var(--pc) 60%,transparent),inset 0 0 18px color-mix(in srgb,var(--pc) 40%,transparent)!important}
.plat.me{--pc:#2f7bff!important}.plat.foe{--pc:#ff3b47!important}
.plat.foe{top:52%}
/* stage colour grades */
.ar.s2 .ar-sky{filter:hue-rotate(-18deg) saturate(1.1)}
.ar.s3 .ar-sky{filter:hue-rotate(22deg) saturate(1.15)}
.ar.s4 .ar-sky{filter:hue-rotate(-50deg) saturate(.9) brightness(.85)}.ar.s4 .ar-refl{filter:blur(3px) hue-rotate(-50deg)}
.ar.s5 .ar-sky{filter:saturate(1.35) contrast(1.08) brightness(.92)}
@media (max-width:860px){.ar{--hz:44%}.ar-tiles{transform:rotateX(60deg)}.lamp{width:1.4%}.plat.foe{top:48%}}
@media (prefers-reduced-motion:reduce){.ar-sky,.ar-refl,.lamp i,.ar-motes i{animation:none}}
.fg-cap{top:12px;bottom:auto;left:12px}
.fg-cap p{background:#0a0f1ecc;backdrop-filter:blur(4px)}
@media (max-width:860px){.fg-cap{top:8px;left:8px;bottom:auto;max-width:62%}}

/* ===== attack name plate (white) + white caption ===== */
.move-plate{position:absolute;left:50%;top:14px;z-index:8;transform:translateX(-50%);min-width:min(420px,86%);max-width:92%;padding:12px 22px 12px 26px;border-radius:12px;
  background:#fff;color:#0a1430;box-shadow:0 18px 40px -12px #000c,0 0 0 3px #ffffff33;text-align:left;animation:plateIn .28s cubic-bezier(.2,.9,.3,1.2);border-left:8px solid var(--blue)}
.move-plate.foe{border-left-color:var(--red)}
.move-plate.sig{box-shadow:0 18px 40px -12px #000c,0 0 0 3px var(--yellow),0 0 34px #ffcc1f88}
.move-plate small{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5b6684}
.move-plate b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(24px,3.4vw,40px);line-height:1.05;letter-spacing:-.01em;color:#0a1430}
.move-plate .mp-meta{display:flex;gap:8px;align-items:center;margin-top:6px}
.move-plate .tchip{background:var(--tc);color:#fff;border-color:transparent}
.move-plate em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.08em;color:#b07800;text-transform:uppercase}
.move-plate.out{opacity:0;transform:translate(-50%,-8px);transition:.35s}
@keyframes plateIn{from{opacity:0;transform:translate(-50%,-14px) scale(.92)}}
.fg-cap p{background:#ffffffe8!important;color:#3a4766!important;backdrop-filter:none}
.fg-cap p.now{background:#fff!important;color:#0a1430!important;font-size:16px;font-weight:700;border-left:5px solid var(--blue)}
.fg-cap{top:auto;bottom:12px;left:12px}
@media (max-width:860px){.move-plate{top:8px;padding:9px 14px 9px 16px}.move-plate b{font-size:22px}.fg-cap{bottom:8px;top:auto}.fg-cap p.now{font-size:13px}}
/* softer skyline: less contrast, lower opacity */
.ar-sky{opacity:.62;filter:contrast(.78) saturate(.85) brightness(.95)}
.ar{background:linear-gradient(180deg,#1a1840 0%,#2a1f4a 40%,#120c2a 60%)}

/* ===================== 10 ARENAS (arenas.js) ===================== */
.ar-sky{opacity:1;filter:none}
.ar-sky.ar-img{opacity:.6;filter:contrast(.75) saturate(.85) brightness(.95)}
.ar-sky:not(.ar-img){animation:none}
.ar-sky:not(.ar-img)::after{display:none}
.ar-sil{position:absolute;left:-2%;right:-2%;bottom:calc(100% - var(--hz) - .5%);pointer-events:none}
.ar-sil svg{display:block;width:100%;height:100%}
.ar-sil.far{height:34%;opacity:.85;filter:saturate(.8)}
.ar-sil.near{height:22%}
.ar-light{position:absolute;inset:0;background:radial-gradient(var(--ls) var(--ls) at var(--lx) var(--ly),color-mix(in srgb,var(--lc) 45%,transparent),transparent 70%);mix-blend-mode:screen;pointer-events:none}
.ar-stars{position:absolute;inset:0 0 50% 0;background-image:radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 30% 8%,#fff,transparent),radial-gradient(1.5px 1.5px at 52% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 12%,#fff,transparent),radial-gradient(1px 1px at 88% 26%,#fff,transparent),radial-gradient(1px 1px at 20% 40%,#fffa,transparent),radial-gradient(1px 1px at 62% 6%,#fffa,transparent),radial-gradient(1px 1px at 80% 40%,#fffa,transparent);background-size:220px 160px;opacity:.85;animation:twinkle 5s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.5}}
.ar-planet{position:absolute;right:14%;top:8%;width:15%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#9fd0ff,#2f6fd6 45%,#123459 70%);box-shadow:0 0 60px #2f7bff66,inset -14px -10px 30px #000a}
.ar-planet::after{content:"";position:absolute;inset:18% 12% 40% 30%;border-radius:40%;background:#3dbb6c88;filter:blur(3px)}
.ar-sun{position:absolute;left:50%;top:22%;width:16%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#fff6d0,var(--sc) 45%,#ff5a2e 80%);box-shadow:0 0 90px 30px #ff8a2e66}
.ar-ticker{position:absolute;left:0;right:0;top:calc(var(--hz) - 40%);height:7%;overflow:hidden;background:#04101fcc;border-block:1px solid #2f7bff55}
.ar-ticker div{display:flex;gap:28px;white-space:nowrap;height:100%;align-items:center;animation:tick 22s linear infinite;font:700 12px ui-monospace,Menlo,monospace}
.ar-ticker .up{color:#2bd47f}.ar-ticker .dn{color:#ff4d5e}
@keyframes tick{to{transform:translateX(-50%)}}
.ar-fog{position:absolute;left:-10%;right:-10%;top:calc(var(--hz) - 14%);height:30%;background:radial-gradient(60% 50% at 50% 50%,color-mix(in srgb,var(--fc) 30%,transparent),transparent 70%);filter:blur(10px);animation:fog 18s ease-in-out infinite alternate;pointer-events:none}
@keyframes fog{to{transform:translateX(6%)}}
/* floor materials */
.fl-stone .ar-tiles{}
.fl-glass{background:linear-gradient(180deg,#0b1a30,#06101f)}
.fl-glass .ar-tiles{background:linear-gradient(90deg,#0000 0 97%,#2f7bff44 97%) 0 0/60px 60px,linear-gradient(0deg,#0000 0 97%,#2f7bff44 97%) 0 0/60px 60px,#0c1d36}
.fl-metal{background:linear-gradient(180deg,#1a2230,#0c1018)}
.fl-metal .ar-tiles{background:repeating-linear-gradient(45deg,#2a3344 0 3px,#1d2532 3px 9px),#232c3a}
.fl-moon{background:linear-gradient(180deg,#5a5e70,#2a2d3a)}
.fl-moon .ar-tiles{background:radial-gradient(circle at 20% 30%,#0003 0 18px,transparent 19px) 0 0/140px 120px,radial-gradient(circle at 70% 60%,#0002 0 28px,transparent 29px) 0 0/200px 170px,#6e7284}
.fl-wood{background:linear-gradient(180deg,#3a2a1c,#1e150d)}
.fl-wood .ar-tiles{background:linear-gradient(90deg,#0000 0 94%,#00000088 94%) 0 0/34px 100%,repeating-linear-gradient(0deg,#5a3e26 0 14px,#4e3520 14px 15px),#5a3e26}
.fl-wet{background:linear-gradient(180deg,#141c2c,#070b14)}
.fl-wet .ar-tiles{background:linear-gradient(90deg,#0000 0 96%,#00000088 96%) 0 0/50px 26px,linear-gradient(0deg,#0000 0 92%,#00000088 92%) 0 0/50px 26px,#20283a}
.fl-wet .ar-refl{opacity:.95;filter:blur(2px)}
.fl-ice{background:linear-gradient(180deg,#8fc8e8,#2a6a90)}
.fl-ice .ar-tiles{background:linear-gradient(115deg,#ffffff22 0 2%,transparent 2% 40%,#ffffff18 40% 41%,transparent 41%) 0 0/180px 140px,#9ad4f0;opacity:.85}
.fl-sand{background:linear-gradient(180deg,#c8783a,#7a3a1c)}
.fl-sand .ar-tiles{background:repeating-linear-gradient(170deg,#d98c48 0 6px,#c97c3a 6px 14px);opacity:.9}
.fl-stone,.fl-glass,.fl-metal,.fl-moon,.fl-wood,.fl-wet,.fl-ice,.fl-sand{}
.ar-ring{border-color:color-mix(in srgb,var(--rc) 55%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--rc) 45%,transparent),inset 0 0 22px color-mix(in srgb,var(--rc) 25%,transparent)}
/* horizon details */
.rail-neon{background:none;height:2%;top:calc(var(--hz) - 1.5%)}
.rail-neon::before{content:"";position:absolute;inset:0;background:var(--nc);box-shadow:0 0 12px 3px var(--nc),0 0 40px 8px color-mix(in srgb,var(--nc) 40%,transparent);border-radius:4px;animation:flicker 4s infinite}
.rail-glass{background:linear-gradient(180deg,#bfe6ff55 0 6%,#bfe6ff14 6% 90%,#bfe6ff44 90%);border-top:2px solid #bfe6ff88}
.rail-dock{background:linear-gradient(180deg,transparent 0 70%,#3a2a1c 70%)}
.rail-dock>i{position:absolute;bottom:0;width:1.6%;height:100%;background:linear-gradient(90deg,#4e3520,#2a1c10);border-radius:2px 2px 0 0}
.rail-ropes{background:linear-gradient(180deg,transparent 0 30%,#c8a24a 30% 36%,transparent 36% 62%,#c8a24a 62% 68%,transparent 68%)}
.rail-ropes>i{position:absolute;bottom:0;width:1.4%;height:150%;background:linear-gradient(90deg,#6a5030,#3a2a18)}
.lamp i{background:var(--lc,#ffd98a);box-shadow:0 0 10px 3px var(--lc,#ffb84a),0 0 40px 14px color-mix(in srgb,var(--lc,#ff9a2e) 35%,transparent)}
/* weather */
.m-rain i{width:1px;height:22px;border-radius:0;background:linear-gradient(180deg,transparent,#bfd6ffaa);box-shadow:none;top:-10%;bottom:auto;animation:rain var(--t) linear infinite;animation-delay:calc(var(--d) / 9)}
@keyframes rain{0%{opacity:0;transform:translate(0,0)}10%{opacity:.8}100%{opacity:.6;transform:translate(-40px,560px)}}
.m-snow i{width:4px;height:4px;background:#fff;box-shadow:0 0 6px #fff;top:-6%;bottom:auto;animation:snow var(--t) linear infinite}
@keyframes snow{0%{opacity:0;transform:translate(0,0)}10%{opacity:.9}50%{transform:translate(24px,260px)}100%{opacity:0;transform:translate(-10px,540px)}}
.m-fireflies i{background:#d9ff7a;box-shadow:0 0 10px 3px #c9f27a;bottom:auto;top:calc(30% + var(--d) * 5%);animation:fly var(--t) ease-in-out infinite alternate}
@keyframes fly{0%{opacity:.1;transform:translate(0,0)}50%{opacity:1}100%{opacity:.2;transform:translate(60px,-40px)}}
.m-bits i{width:auto;height:auto;background:none;box-shadow:none;color:#3dff8a99;font:700 11px ui-monospace,monospace;animation:mote var(--t) linear infinite}
.m-bits i::before{content:"1"}.m-bits i:nth-child(2n)::before{content:"0"}.m-bits i:nth-child(5n)::before{content:"₿"}
.m-dust i{background:#e8c79a;box-shadow:0 0 4px #e8c79a;bottom:auto;top:calc(35% + var(--d) * 6%);animation:dust var(--t) linear infinite}
@keyframes dust{0%{opacity:0;transform:translate(-40px,0)}20%{opacity:.6}100%{opacity:0;transform:translate(260px,-30px)}}
.m-sparks i{background:#ffb84a;box-shadow:0 0 8px 2px #ff8a2e;animation:mote calc(var(--t) / 2) linear infinite}
/* caption bottom-right so it never covers your fighter */
.fg-cap{left:auto!important;right:12px;bottom:12px;top:auto;align-items:end;justify-items:end}
@media (max-width:860px){.fg-cap{right:8px;bottom:8px;max-width:58%}}
@media (prefers-reduced-motion:reduce){.ar-ticker div,.ar-fog,.ar-stars,.m-rain i,.m-snow i,.m-fireflies i,.m-dust i{animation:none}}
.ar-sil.far{height:44%}.ar-sil.near{height:27%}

/* ===================== INTERFACE COLOUR OPTIONS (temporary picker) ===================== */
/* B · Team Split: you = blue, rival = red, yellow actions, white move cards */
html[data-theme="split"]{--bg:#0a1230;--bg-2:#0c1638;--panel:#0f1b45;--panel-2:#13225a;--line:#1f3274;--line-2:#2b4396;--muted:#a9b8e6}
html[data-theme="split"] .top{background:linear-gradient(90deg,#1546c8ee,#0a1230ee 35%,#0a1230ee 65%,#c8202cee);border-bottom:2px solid #fff3}
html[data-theme="split"] .hud-side.me{background:linear-gradient(90deg,#2f7bff40,transparent);border-radius:12px;padding:6px}
html[data-theme="split"] .hud-side.foe{background:linear-gradient(270deg,#ff3b4740,transparent);border-radius:12px;padding:6px}
html[data-theme="split"] .mcard,html[data-theme="royal"] .mcard,html[data-theme="white"] .mcard{background:#fff;border-color:#dfe6f5;color:#0a1430}
html[data-theme="split"] .mcard .mc-foot,html[data-theme="royal"] .mcard .mc-foot,html[data-theme="white"] .mcard .mc-foot,
html[data-theme="split"] .mc-main small,html[data-theme="royal"] .mc-main small,html[data-theme="white"] .mc-main small{color:#5b6684}
html[data-theme="split"] .mc-uses,html[data-theme="royal"] .mc-uses,html[data-theme="white"] .mc-uses{background:#e6ebf7}
html[data-theme="split"] .sa,html[data-theme="royal"] .sa{background:#13225a}
/* C · Royal Arcade: bright royal blue, yellow + red buttons, white plates (fighting-game select screen) */
html[data-theme="royal"]{--bg:#0b1f7a;--bg-2:#0d2486;--panel:#122b95;--panel-2:#1733a8;--line:#2b49c4;--line-2:#3d5ce0;--text:#ffffff;--muted:#c9d6ff;--dim:#8fa3e8}
html[data-theme="royal"] body{background:radial-gradient(900px 500px at 15% -10%,#3d7bff55,transparent 60%),radial-gradient(900px 500px at 90% 0%,#ff3b4733,transparent 60%),linear-gradient(180deg,#0b1f7a,#081657)}
html[data-theme="royal"] .top{background:#081657ee;border-bottom:3px solid var(--red)}
html[data-theme="royal"] .fg-hud{background:#fff;border-color:#fff}
html[data-theme="royal"] .fg-hud .hud-name b{color:#0a1430}html[data-theme="royal"] .fg-hud .hpnum{color:#0a1430}html[data-theme="royal"] .fg-hud .hud-mid small{color:#5b6684}
html[data-theme="royal"] .fg-hud .hud-bar{background:#dfe6f5;border-color:#c9d3ea}
html[data-theme="royal"] .sa:not(.on){background:var(--red);border-color:#9c1420;color:#fff;box-shadow:0 3px 0 #9c1420}
html[data-theme="royal"] .chip:not(.on){background:#fff;color:#0b1f7a;border-color:#fff}
/* D · Clean White: light panels, blue header, yellow CTA, red accents */
html[data-theme="white"]{--bg:#eef2fb;--bg-2:#e3e9f7;--panel:#ffffff;--panel-2:#f4f7fd;--line:#dbe2f2;--line-2:#c8d3ea;--text:#0a1430;--muted:#5b6684;--dim:#8a94ad}
html[data-theme="white"] body{background:linear-gradient(180deg,#eef2fb,#e3e9f7)}
html[data-theme="white"] .top{background:#1546c8;border-bottom:3px solid var(--yellow);color:#fff}
html[data-theme="white"] .top .tabs a{color:#cfe0ff}html[data-theme="white"] .top .tabs a.on{color:#fff}
html[data-theme="white"] .top .wallet small,html[data-theme="white"] .top .wallet svg{color:#cfe0ff}
html[data-theme="white"] .fg-hud{background:#fff}
html[data-theme="white"] .sa:not(.on){background:#fff;color:#0a1430}
html[data-theme="white"] .fcard .add{color:var(--blue)}
html[data-theme="white"] .hud-side.me .hud-name b{color:#1546c8}html[data-theme="white"] .hud-side.foe .hud-name b{color:#c8202c}
/* picker */
.theme-pick{position:fixed;left:16px;bottom:16px;z-index:200;display:flex;gap:6px;align-items:center;padding:8px 10px;border-radius:14px;background:#0a0f1eee;border:1px solid #ffffff33;box-shadow:0 20px 40px -10px #000c;font:600 12px var(--font);color:#fff}
.theme-pick button{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:9px;border:1px solid #ffffff2a;color:#fff;background:#ffffff10}
.theme-pick button.on{background:#fff;color:#0a1430}
.theme-pick i{display:inline-flex;gap:2px}.theme-pick i b{width:9px;height:9px;border-radius:50%}
@media (max-width:860px){.theme-pick{left:8px;right:8px;bottom:8px;overflow-x:auto}.theme-pick span{display:none}}
.theme-pick{left:auto;right:16px;bottom:auto;top:84px}
@media (max-width:860px){.theme-pick{top:auto;bottom:8px;left:8px;right:8px}}

/* ---------- more colour options (E–J) ---------- */
/* shared: white move cards for every light-accent theme */
html[data-theme="crimson"] .mcard,html[data-theme="sun"] .mcard,html[data-theme="stripes"] .mcard,html[data-theme="cabinet"] .mcard,html[data-theme="sky"] .mcard{background:#fff;border-color:#e3e8f4;color:#0a1430}
html[data-theme="crimson"] .mc-foot,html[data-theme="sun"] .mc-foot,html[data-theme="stripes"] .mc-foot,html[data-theme="cabinet"] .mc-foot,html[data-theme="sky"] .mc-foot,
html[data-theme="crimson"] .mc-main small,html[data-theme="sun"] .mc-main small,html[data-theme="stripes"] .mc-main small,html[data-theme="cabinet"] .mc-main small,html[data-theme="sky"] .mc-main small{color:#5b6684}
/* E · Crimson Arena: dark red base, blue for you, yellow actions */
html[data-theme="crimson"]{--bg:#16070c;--bg-2:#1e0a11;--panel:#2a0d16;--panel-2:#35111c;--line:#4a1824;--line-2:#62202f;--muted:#e0b3bc}
html[data-theme="crimson"] body{background:radial-gradient(900px 500px at 50% -10%,#ff3b4733,transparent 60%),#16070c}
html[data-theme="crimson"] .top{background:#16070cee;border-bottom:3px solid var(--yellow)}
html[data-theme="crimson"] .hud-side.me .hud-portrait{box-shadow:0 0 0 3px var(--blue)}
html[data-theme="crimson"] .sa:not(.on){background:var(--blue);border-color:#123f9e;color:#fff}
/* F · Sunburst: yellow top bar, navy body, red secondary buttons */
html[data-theme="sun"]{--bg:#0b1638;--bg-2:#0e1b44;--panel:#12224f;--panel-2:#172a5e;--line:#22377a;--line-2:#2e4796}
html[data-theme="sun"] .top{background:linear-gradient(180deg,#ffd84d,#ffc400);color:#0a1430;border-bottom:3px solid #0a1430}
html[data-theme="sun"] .top .tabs a{color:#5a4300}html[data-theme="sun"] .top .tabs a.on{color:#0a1430}html[data-theme="sun"] .tabs a.on::after{background:var(--red)}
html[data-theme="sun"] .top .wallet small,html[data-theme="sun"] .top .wallet svg,html[data-theme="sun"] .gear #snd button{color:#5a4300!important}
html[data-theme="sun"] .brand .mark{color:var(--red)}
html[data-theme="sun"] .sa:not(.on){background:var(--red);border-color:#9c1420;color:#fff}
html[data-theme="sun"] .fg-hud{border:2px solid var(--yellow)}
/* G · Tricolor Stripes: navy with red/yellow/blue racing stripes on panels */
html[data-theme="stripes"]{--bg:#0a1026;--panel:#0f1836;--panel-2:#142045}
html[data-theme="stripes"] .top{border-bottom:0;box-shadow:inset 0 -6px 0 -0px transparent;background-image:linear-gradient(#0a1026ee,#0a1026ee),linear-gradient(90deg,var(--red) 0 33%,var(--yellow) 33% 66%,var(--blue) 66%);background-size:100% calc(100% - 5px),100% 5px;background-position:top,bottom;background-repeat:no-repeat}
html[data-theme="stripes"] .panel,html[data-theme="stripes"] .fg-hud,html[data-theme="stripes"] .slot{border-top:0;background-image:linear-gradient(90deg,var(--red) 0 33%,var(--yellow) 33% 66%,var(--blue) 66%);background-size:100% 4px;background-repeat:no-repeat}
html[data-theme="stripes"] .fg-hud{background-color:var(--panel)}
html[data-theme="stripes"] .sa:not(.on){background:#fff;color:#0a1430}
/* H · Retro Cabinet: black body, blue panels with yellow outlines, red buttons */
html[data-theme="cabinet"]{--bg:#05060c;--bg-2:#090b16;--panel:#0d2a8a;--panel-2:#1236a8;--line:#ffcc1f;--line-2:#ffcc1f;--muted:#cfe0ff;--text:#fff}
html[data-theme="cabinet"] body{background:#05060c}
html[data-theme="cabinet"] .top{background:#05060c;border-bottom:3px solid var(--red)}
html[data-theme="cabinet"] .panel,html[data-theme="cabinet"] .fg-hud,html[data-theme="cabinet"] .slot,html[data-theme="cabinet"] .fcard{border-width:2px}
html[data-theme="cabinet"] .sa:not(.on){background:var(--red);border-color:#9c1420;color:#fff;box-shadow:0 3px 0 #9c1420}
html[data-theme="cabinet"] .hud-bar{background:#05060c}
/* I · Sky Duel: bright daytime light blue with white panels, red + yellow */
html[data-theme="sky"]{--bg:#cfe4ff;--bg-2:#bcd8ff;--panel:#ffffff;--panel-2:#f2f7ff;--line:#c7daf5;--line-2:#a9c5ee;--text:#0a1430;--muted:#4a5a7c;--dim:#7d8db0}
html[data-theme="sky"] body{background:linear-gradient(180deg,#e3efff,#bcd8ff)}
html[data-theme="sky"] .top{background:#ffffffee;border-bottom:3px solid var(--blue)}
html[data-theme="sky"] .tabs a.on::after{background:var(--red)}
html[data-theme="sky"] .sa:not(.on){background:#fff;color:#0a1430}
html[data-theme="sky"] .hud-side.me .hud-name b{color:#1546c8}html[data-theme="sky"] .hud-side.foe .hud-name b{color:#c8202c}
/* J · Midnight Neon: near-black with neon blue/red glows and yellow highlights */
html[data-theme="neon"]{--bg:#04050a;--bg-2:#070912;--panel:#0a0d18;--panel-2:#0e1220;--line:#1a2140;--line-2:#24305a}
html[data-theme="neon"] body{background:radial-gradient(700px 400px at 10% 0%,#2f7bff2a,transparent 60%),radial-gradient(700px 400px at 90% 0%,#ff3b4724,transparent 60%),#04050a}
html[data-theme="neon"] .top{background:#04050aee;border-bottom:1px solid #2f7bff66;box-shadow:0 1px 18px #2f7bff44}
html[data-theme="neon"] .fg-hud{box-shadow:0 0 0 1px #2f7bff55,0 0 30px -6px #2f7bff66}
html[data-theme="neon"] .hud-side.foe .hud-portrait{box-shadow:0 0 18px #ff3b47aa}
html[data-theme="neon"] .hud-side.me .hud-portrait{box-shadow:0 0 18px #2f7bffaa}
html[data-theme="neon"] .mcard:hover:not([disabled]){box-shadow:0 0 24px -4px var(--tc)}
html[data-theme="neon"] .sa:not(.on){box-shadow:0 0 0 1px #ff3b4766;color:#ffb3b8}
.theme-pick{flex-wrap:wrap;max-width:min(560px,calc(100vw - 32px));justify-content:flex-end}
.theme-pick button[data-t]{display:none}
.theme-pick.open button[data-t]{display:flex}
.theme-pick .tp-toggle{background:var(--yellow);color:#2a1a00;border-color:#c98f00;font-weight:800}
.theme-pick:not(.open){padding:6px}
/* light themes: squad slots follow the panel colours */
html[data-theme="white"] .slot,html[data-theme="sky"] .slot{background:var(--panel)}
html[data-theme="white"] .slot .meta,html[data-theme="sky"] .slot .meta{background:var(--panel-2);border-top-color:var(--line)}
html[data-theme="white"] .slot .art,html[data-theme="sky"] .slot .art{background:radial-gradient(60% 50% at 50% 70%,#2f7bff22,transparent 70%)}

/* ===================== BATTLE LAYOUT OPTIONS (html[data-layout]) ===================== */
/* 2 · CINEMATIC: full-bleed arena, HUD + cards float on glass over the fight */
html[data-layout="cinematic"] .fg{position:relative;display:block}
html[data-layout="cinematic"] .fg-stage{height:min(80vh,780px);min-height:520px}
html[data-layout="cinematic"] .fg-hud{position:absolute;z-index:9;top:12px;left:12px;right:12px;background:linear-gradient(180deg,#05081499,#05081422);backdrop-filter:blur(6px);border:1px solid #ffffff22}
html[data-layout="cinematic"] .fg-controls{position:absolute;z-index:9;left:12px;right:12px;bottom:12px;min-height:0}
html[data-layout="cinematic"] .mcard{background:#0a0f1ebf!important;backdrop-filter:blur(8px);color:#fff!important;border-color:#ffffff26!important}
html[data-layout="cinematic"] .sa{backdrop-filter:blur(8px)}
html[data-layout="cinematic"] .fg-tip{position:absolute;z-index:9;left:12px;right:12px;bottom:200px}
html[data-layout="cinematic"] .fg-cap{bottom:200px}
html[data-layout="cinematic"] .move-plate{top:130px}
html[data-layout="cinematic"] .fg-wait{background:#0a0f1e99;backdrop-filter:blur(6px)}

/* 3 · DUEL DISK: Yu-Gi-Oh-style LP counters + moves as a fanned hand of tall cards */
html[data-layout="duel"] .fg-hud{grid-template-columns:1fr auto 1fr;padding:16px 22px}
html[data-layout="duel"] .hud-portrait{width:86px;height:86px;border-radius:50%;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);border-radius:0}
html[data-layout="duel"] .hud-bar{height:12px;transform:none;border-radius:6px}
html[data-layout="duel"] .hpnum{font-family:var(--display);font-size:30px;font-weight:800;color:#fff;letter-spacing:.02em}
html[data-layout="duel"] .hpnum::before{content:"LP ";font-size:14px;color:var(--yellow);letter-spacing:.12em}
html[data-layout="duel"] .hud-mid b{font-size:40px}
html[data-layout="duel"] .fg-controls{grid-template-columns:1fr;justify-items:center;min-height:300px;margin-top:-90px;position:relative;z-index:8}
html[data-layout="duel"] .fg-side-actions{grid-template-columns:repeat(4,auto);order:2;justify-content:center}
html[data-layout="duel"] .hand:not(.swap){display:flex;justify-content:center;gap:0;padding-top:10px}
html[data-layout="duel"] .hand:not(.swap) .mcard{width:190px;aspect-ratio:5/7;margin:0 -10px;border:3px solid var(--tc)!important;border-radius:14px;box-shadow:0 18px 30px -12px #000c;transform-origin:50% 120%;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 55%,#0a0f1e) 0 34%,#fff 34%)!important;color:#0a1430!important;justify-content:flex-start}
html[data-layout="duel"] .hand:not(.swap) .mcard:nth-child(1){transform:rotate(-9deg) translateY(14px)}
html[data-layout="duel"] .hand:not(.swap) .mcard:nth-child(2){transform:rotate(-3deg)}
html[data-layout="duel"] .hand:not(.swap) .mcard:nth-child(3){transform:rotate(3deg)}
html[data-layout="duel"] .hand:not(.swap) .mcard:nth-child(4){transform:rotate(9deg) translateY(14px)}
html[data-layout="duel"] .hand:not(.swap) .mcard:hover:not([disabled]){transform:translateY(-28px) scale(1.06);z-index:3}
html[data-layout="duel"] .mcard .mc-name{color:#fff;font-size:17px;text-shadow:0 2px 4px #0008;min-height:3.2em}
html[data-layout="duel"] .mcard .mc-top .tchip{background:#fff;color:#0a1430}
html[data-layout="duel"] .mcard .mc-main{margin-top:14px}
html[data-layout="duel"] .mcard .mc-main small,html[data-layout="duel"] .mcard .mc-foot{color:#5b6684!important}
html[data-layout="duel"] .mcard .mc-sig{color:#fff;text-shadow:0 1px 3px #000}

/* 4 · COMMAND DECK: classic RPG — actions block + 2×2 big move buttons */
html[data-layout="command"] .fg-controls{grid-template-columns:200px 1fr}
html[data-layout="command"] .fg-side-actions{order:-1;grid-template-columns:1fr 1fr;align-content:stretch}
html[data-layout="command"] .sa{height:auto;min-height:62px;font-size:16px}
html[data-layout="command"] .hand:not(.swap){grid-template-columns:1fr 1fr}
html[data-layout="command"] .mcard{display:grid;grid-template-columns:1fr auto;grid-template-areas:"top top" "name main" "foot main";align-items:center;padding:14px 18px 18px}
html[data-layout="command"] .mc-top{grid-area:top}.html[data-layout="command"] .mc-name{grid-area:name}
html[data-layout="command"] .mc-name{grid-area:name;font-size:20px;min-height:0}
html[data-layout="command"] .mc-main{grid-area:main;flex-direction:column;align-items:flex-end}
html[data-layout="command"] .mc-dmg{font-size:30px}
html[data-layout="command"] .mc-foot{grid-area:foot}
html[data-layout="command"] .mc-left{display:none}

/* 5 · SIDE PANEL: wide arena left, vertical move list right */
@media (min-width:1000px){
  html[data-layout="side"] .fg{grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"hud hud" "stage ctl" "tip ctl"}
  html[data-layout="side"] .fg-hud{grid-area:hud}
  html[data-layout="side"] .fg-stage{grid-area:stage;height:min(70vh,640px)}
  html[data-layout="side"] .fg-tip{grid-area:tip}
  html[data-layout="side"] .fg-controls{grid-area:ctl;grid-template-columns:1fr;align-content:start}
  html[data-layout="side"] .fg-side-actions{grid-template-columns:repeat(4,1fr);order:-1}
  html[data-layout="side"] .sa{font-size:13px}
  html[data-layout="side"] .hand:not(.swap){grid-template-columns:1fr}
  html[data-layout="side"] .mcard{display:grid;grid-template-columns:1fr auto;grid-template-areas:"top main" "name main" "foot main";padding:12px 16px 16px}
  html[data-layout="side"] .mc-top{grid-area:top}html[data-layout="side"] .mc-name{grid-area:name;min-height:0}
  html[data-layout="side"] .mc-main{grid-area:main;flex-direction:column;align-items:flex-end}
  html[data-layout="side"] .mc-foot{grid-area:foot}
  html[data-layout="side"] .hand.swap{grid-template-columns:1fr}
}
/* picker rows */
.theme-pick .tp-row{display:none;width:100%;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.theme-pick.open .tp-row{display:flex}
.theme-pick .tp-row em{font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#ffffffaa;margin-right:4px}
.theme-pick .tp-row button{display:flex}
.theme-pick button[data-l].on{background:var(--yellow);color:#2a1a00}
html[data-layout="cinematic"] .fgf.me{bottom:27%;height:50%;left:9%}
html[data-layout="cinematic"] .plat.me{bottom:20%;height:16%;width:40%}
html[data-layout="cinematic"] .fgf.foe{top:16%;height:36%}
html[data-layout="cinematic"] .plat.foe{top:46%}
html[data-layout="duel"] .hud-sub{flex-wrap:wrap}
html[data-layout="duel"] .stock{margin-left:auto}
/* Cinematic on phones: HUD floats over the arena, controls sit underneath so the fight stays visible */
@media (max-width:860px){
  html[data-layout="cinematic"] .fg-stage{height:420px;min-height:0}
  html[data-layout="cinematic"] .fg-hud{top:8px;left:8px;right:8px;padding:8px}
  html[data-layout="cinematic"] .fg-controls{position:static;margin-top:10px}
  html[data-layout="cinematic"] .fg-tip{position:static;margin-top:8px}
  html[data-layout="cinematic"] .fg-cap{bottom:8px}
  html[data-layout="cinematic"] .move-plate{top:84px}
  html[data-layout="cinematic"] .fgf.me{bottom:4%;height:54%;left:0}
  html[data-layout="cinematic"] .plat.me{bottom:-3%;height:20%;width:62%}
  html[data-layout="cinematic"] .fgf.foe{top:22%;height:36%}
  html[data-layout="cinematic"] .plat.foe{top:50%}
  html[data-layout="cinematic"] .mcard{background:var(--panel-2)!important;backdrop-filter:none}
}
@media (max-width:860px){html[data-layout="cinematic"] .mcard{color:var(--text)!important;border-color:var(--line-2)!important}}
/* Command Deck on phones: action block becomes one row, moves stay 2×2 but compact */
@media (max-width:860px){
  html[data-layout="command"] .fg-controls{grid-template-columns:1fr}
  html[data-layout="command"] .fg-side-actions{grid-template-columns:repeat(4,1fr)}
  html[data-layout="command"] .sa{min-height:44px;font-size:13px}
  html[data-layout="command"] .mcard{grid-template-columns:1fr;grid-template-areas:"top" "name" "main" "foot";padding:10px 12px 14px}
  html[data-layout="command"] .mc-main{align-items:flex-start}
  html[data-layout="command"] .mc-name{font-size:15px}
  html[data-layout="command"] .mc-dmg{font-size:22px}
}

/* ===================== PIXEL ARENAS ===================== */
.ar-pixel{background:#0a0f1e}
.ar-pix{position:absolute;inset:0;background-size:cover;background-position:center 72%;background-repeat:no-repeat;image-rendering:pixelated;image-rendering:crisp-edges}
.ar-pixel .ar-vig{background:radial-gradient(140% 110% at 50% 45%,transparent 62%,#05040c99 100%)}
/* platform spots become subtle pixel-style shadows + rings so they sit on the painted ground */
.ar-pixel ~ * .plat,.plat{background:radial-gradient(closest-side,#00000055,#00000022 60%,transparent 100%)!important}
html[data-layout="command"] .fg-stage{height:min(60vh,560px)}
@media (max-width:860px){.ar-pix{background-position:center 75%}}
/* painted arenas with circles: fighters are placed by placeOnSpots(), the CSS platforms are hidden */
.ar-art{image-rendering:auto;background-size:cover}
.fg-stage.has-spots .plat{display:none!important}
.fg-stage.has-spots .fgf{transition:none}
.fg-stage.has-spots .fgf img{filter:drop-shadow(0 10px 8px #000a)}

/* arena picker (squad screen) */
.arena-pick{margin:0 -30px;padding:0 30px}
.ap-hero{position:relative;height:150px;border-radius:12px;overflow:hidden;background:#0a0f1e;border:1px solid var(--line-2);margin-bottom:10px}
.ap-hero img{width:100%;height:100%;object-fit:cover;object-position:center 70%;image-rendering:auto}
.ap-hero span{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:8px;background:#0a0f1ee6;color:#fff;font-weight:800;font-size:14px}
.ap-random{display:grid;place-items:center;height:100%;font-size:48px;background:linear-gradient(135deg,#1546c8,#0a0f1e 50%,#c8202c)}
.ap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:260px;overflow:auto;padding:2px}
.ap-opt{position:relative;display:grid;gap:4px;padding:4px;border-radius:9px;border:1.5px solid var(--line-2);background:var(--panel-2);text-align:left;color:var(--text)}
.ap-opt img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:6px;image-rendering:auto}
.ap-opt b{font-size:10.5px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-opt .ap-dice{display:grid;place-items:center;aspect-ratio:2/1;border-radius:6px;font-size:22px;background:linear-gradient(135deg,#1546c8,#c8202c)}
.ap-opt:hover{border-color:var(--yellow)}
.ap-opt.on{border-color:var(--yellow);box-shadow:0 0 0 2px #ffcc1f55}
@media (max-width:860px){.arena-pick{margin:0 -22px;padding:0 22px}.ap-grid{grid-template-columns:repeat(4,1fr)}}
.arena-pick + .stage-meta{margin-top:12px}
/* glowing fighter circles drawn over art that has none */
.spot-ring{position:absolute;border-radius:50%;pointer-events:none;border:3px solid var(--rc);
  box-shadow:0 0 14px var(--rc),0 0 34px color-mix(in srgb,var(--rc) 55%,transparent),inset 0 0 18px color-mix(in srgb,var(--rc) 45%,transparent);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 22%,transparent),color-mix(in srgb,var(--rc) 8%,transparent) 70%,transparent);animation:ringpulse 2.4s ease-in-out infinite}
@keyframes ringpulse{50%{box-shadow:0 0 8px var(--rc),0 0 22px color-mix(in srgb,var(--rc) 40%,transparent),inset 0 0 12px color-mix(in srgb,var(--rc) 35%,transparent)}}

/* ===================== MARKET + BUY $RIVALS ===================== */
.budget .btn.buy-clout{margin-left:10px;height:38px;padding:0 14px;white-space:nowrap}
.coins{cursor:pointer}.coins:hover b{color:var(--yellow)}
.mk-note{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.mk-note .btn{margin-left:auto}
.mk-hint{margin:0 0 12px}
.mk-sug{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.mk-sug .coin{width:12px;height:12px}.mk-sug .coin::after{inset:3px}.mk-sug .coin::before{inset:4.5px}
.mk-card .add[disabled]{font-size:12px}
.mk-price{display:grid;gap:6px;margin:18px 0 6px;font-weight:600;font-size:13px;color:var(--muted)}
.mk-price input{height:52px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--bg-2);color:var(--text);font:800 24px var(--display);padding:0 14px}
.clout-shop{padding:34px 32px 28px;text-align:center}
.clout-shop h2{font-family:var(--display);font-size:clamp(26px,3vw,38px);margin:6px 0 8px}
.clout-shop .muted{max-width:620px;margin:0 auto;line-height:1.55}
.clout-shop .tok{display:flex;gap:8px;justify-content:center;margin:20px 0 18px}
.cl-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:760px;margin:0 auto}
.cl-pack{position:relative;display:grid;justify-items:center;gap:4px;padding:26px 14px 18px;border-radius:16px;border:1.5px solid var(--line-2);background:linear-gradient(180deg,var(--panel-2),var(--panel));color:var(--text);transition:transform .15s,border-color .15s,box-shadow .15s}
.cl-pack:hover{transform:translateY(-4px);border-color:var(--yellow);box-shadow:0 18px 40px -16px #ffcc1f88}
.cl-pack .coin{width:40px;height:40px;margin-bottom:6px}.cl-pack .coin::after{inset:8px}.cl-pack .coin::before{inset:13px}
.cl-pack b{font-family:var(--display);font-size:30px;line-height:1}
.cl-pack small{font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:700}
.cl-usd{margin-top:10px;font-size:20px;font-weight:800;padding:6px 16px;border-radius:999px;background:var(--yellow);color:var(--mint-ink)}
.cl-eth{font-size:12px;color:var(--muted);min-height:16px}
.cl-bonus{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;letter-spacing:.06em;padding:4px 10px;border-radius:999px;background:var(--red);color:#fff;white-space:nowrap}
.clout-shop .hint{margin-top:18px}
.clout-shop .hint a{color:var(--yellow)}
@media (max-width:640px){.cl-packs{grid-template-columns:1fr}.clout-shop{padding:26px 16px}}

/* fighter detail card: character stands centred in the art panel, not at the bottom */
.m-art{place-items:center;align-content:center;position:relative;padding:40px 24px}
.m-art img{position:sticky;top:50%;max-height:min(440px,62vh);width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 18px 16px #000b)}
.m-art::after{content:"";position:absolute;left:50%;top:calc(50% + min(220px,31vh));transform:translate(-50%,-50%);width:58%;height:22px;border-radius:50%;background:radial-gradient(closest-side,#0009,transparent);pointer-events:none}
.m-art::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 40% at 50% 50%,#2f7bff22,transparent 70%);pointer-events:none}
@media (max-width:860px){.m-art{padding:24px}.m-art img{max-height:260px;position:static}.m-art::after{top:auto;bottom:18px;transform:translateX(-50%)}}
/* character stays centred in the visible part of the card while the details scroll */
.m-art{display:block!important;padding:0!important}
.m-art::after{display:none}
.m-art .stand{position:sticky;top:0;height:min(100%,calc(100vh - 40px));min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 24px 32px}
.m-art .stand img{position:static;max-height:min(420px,58vh);width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 18px 16px #000b)}
.m-art .ground{width:62%;height:20px;margin-top:-8px;border-radius:50%;background:radial-gradient(closest-side,#000a,transparent)}
@media (max-width:860px){.m-art .stand{position:static;height:auto;min-height:0;padding:40px 20px 20px}.m-art .stand img{max-height:240px}}

/* daily drop */
.daily{display:flex;align-items:center;gap:16px;padding:14px 18px;margin-bottom:20px;border-radius:16px;border:1px solid var(--line-2);background:var(--panel)}
.daily.ready{border-color:var(--yellow);background:linear-gradient(90deg,#ffcc1f22,var(--panel) 60%);box-shadow:0 0 0 1px #ffcc1f44,0 14px 40px -18px #ffcc1f88}
.daily-icon{font-size:30px;width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:#ffcc1f22}
.daily.ready .daily-icon{animation:bob 2.4s ease-in-out infinite}
.daily-txt{flex:1;min-width:0}.daily-txt b{display:block;font-size:17px}.daily-txt small{color:var(--muted);font-size:13px}
.daily-cd{font-variant-numeric:tabular-nums;color:var(--text);font-weight:700}
.daily .btn{height:46px;padding:0 22px;font-size:15px}
.pull-tag{position:absolute;top:10px;right:10px;font-size:10px;font-weight:800;padding:3px 6px;border-radius:6px;background:#0b1220cc;color:#ffd84d;border:1px solid #ffcc1f55}
.fcard.locked .pull-tag{right:42px}
.pull-line{margin:-6px 0 12px;font-size:13px;color:var(--muted)}.pull-line b{color:var(--yellow)}
.odds-table{margin-top:16px;text-align:left}.odds-table td{padding:10px 14px}
.rar.inline{position:static}
@media (max-width:640px){.daily{flex-wrap:wrap}.daily .btn,.daily .ghost{width:100%}}

/* event fighters (Satoshi + stage bosses): locked until a future event */
.badge.event{background:#3a1f5a;color:#e2c2ff;border:1px solid #b06bff66}
.fcard.ev .pic img{filter:grayscale(.55) brightness(.75)}
.fcard.ev .lock{color:#e2c2ff}
/* account-bound cards in the Sell tab */
.fcard.bound{opacity:.5;cursor:not-allowed}.fcard.bound .mk-sug svg{width:12px;height:12px;vertical-align:-1px}
.arc-today{margin-top:6px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}.arc-today b{color:var(--text)}.arc-today .coin{width:13px;height:13px}

/* share on X */
.xlogo{width:18px;height:18px;flex:none}
.btn.share-x,.cta.share-x{background:#000!important;color:#fff!important;border:1px solid #ffffff33!important;box-shadow:0 4px 0 #ffffff14,0 10px 22px -10px #000!important;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.btn.share-x:hover,.cta.share-x:hover{background:#15181c!important;filter:none}
.share-x.pulse{animation:xpulse 1.6s ease-in-out infinite}
@keyframes xpulse{0%,100%{box-shadow:0 0 0 0 #ffcc1f88}50%{box-shadow:0 0 0 8px #ffcc1f00}}
.share-box{padding:30px 30px 26px;max-width:620px;margin:0 auto}
.share-box h2{font-family:var(--display);font-size:clamp(22px,2.6vw,32px);margin:6px 0 16px}
.share-prev{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:14px;border:1px solid var(--line-2);background:var(--bg-2)}
.share-txt{display:grid;gap:6px;margin:16px 0 4px;font-size:12px;color:var(--muted);font-weight:600}
.share-txt textarea{width:100%;resize:vertical;border-radius:12px;border:1.5px solid var(--line-2);background:var(--bg-2);color:var(--text);font:14px/1.5 var(--font);padding:12px 14px}
.share-box .cta{height:58px;font-size:18px;margin-top:14px}
.share-claim{margin-top:18px;padding:16px;border-radius:14px;border:1px dashed #ffcc1f66;background:#ffcc1f0d;display:grid;gap:8px}
.share-claim.done{border-color:var(--line-2);background:none}
.share-claim b{display:flex;align-items:center;gap:6px;font-size:15px}.share-claim small{color:var(--muted);font-size:12.5px;line-height:1.5}
.share-claim .hint{min-height:1em;font-size:13px;color:#ffb3bd}
.inv-link{display:flex;gap:8px}
.inv-link input{flex:1;min-width:0;height:42px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--bg-2);color:var(--text);font:13px var(--font);padding:0 12px}
.inv-link .btn,.inv-link .ghost{height:42px;flex:none}

/* invite panel */
.invite{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:center;padding:22px;margin-bottom:24px;border-color:#2f7bff55;background:linear-gradient(120deg,#2f7bff1a,var(--panel) 55%)}
.invite h3{font-family:var(--display);font-size:20px;margin:4px 0 10px}
.invite p{color:var(--muted);font-size:14px;line-height:1.55}
.invite ul{list-style:none;display:grid;gap:8px;font-size:14px;color:#c7d1e2}
.invite li{padding-left:18px;position:relative;line-height:1.45}.invite li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--yellow);transform:rotate(45deg)}
.invite li b{color:var(--yellow)}.invite li em{font-style:normal;color:var(--muted);font-size:12px;margin-left:6px;white-space:nowrap}
.inv-box{display:grid;gap:10px;padding:16px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line-2)}
.inv-box>small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.inv-code{font-family:var(--display);font-size:30px;letter-spacing:.18em;color:var(--yellow);line-height:1}
.inv-box .btn{width:100%;height:46px}
.inv-stats{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)!important}.inv-stats b{color:var(--text)}
.inv-join{display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--line)}.inv-join small{color:var(--muted);font-size:12px}
.inv-join input{text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.invite-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;border-color:#ffcc1f66;background:linear-gradient(90deg,#ffcc1f1c,var(--panel-2) 70%)}
.invite-banner .btn{margin-left:auto}
@media (max-width:760px){.invite{grid-template-columns:1fr;padding:18px}.share-box{padding:24px 16px}.invite-banner .btn{width:100%;margin:0}}

/* first top-up bonus */
.cl-first-note{margin:0 auto 22px;max-width:520px;padding:10px 14px;border-radius:12px;background:#ff3b471a;border:1px solid #ff3b4755;color:#ffd0d4;font-size:14px}
.cl-pack s{font-size:13px;color:var(--dim);margin-bottom:-2px}
.invite-banner>span{flex:1;min-width:240px}

/* ---- v2.4: bigger fighter names, a subtle attack-name banner, steady move cards ---- */
.hud-name b{font-size:clamp(22px,2.6vw,34px);letter-spacing:.01em;line-height:1.05}
.hud-name{gap:10px}
@media (max-width:860px){.hud-name b{font-size:17px}}
.move-plate{top:16px;min-width:0;max-width:86%;padding:8px 18px 9px 14px;border-radius:999px;border:1px solid #ffffff22;border-left:1px solid #ffffff22;
  background:rgba(8,12,26,.58);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 30px -14px #000c;color:#fff;
  display:flex;align-items:center;gap:10px;white-space:nowrap;animation:plateSoft .35s ease-out}
.move-plate::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--tc);box-shadow:0 0 12px var(--tc)}
.move-plate small{display:inline;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:none;color:#b7c2d8}
.move-plate b{display:inline;font-family:var(--display);font-weight:600;font-size:clamp(16px,1.9vw,22px);letter-spacing:0;color:#fff}
.move-plate .mp-meta{display:none}
.move-plate.sig{box-shadow:0 10px 30px -14px #000c,0 0 22px #ffcc1f44;border-color:#ffcc1f66}
.move-plate.sig b{color:#ffe07a;text-shadow:0 0 14px #ffcc1f66}
.move-plate.out{opacity:0;transform:translate(-50%,-6px);transition:.4s ease}
@keyframes plateSoft{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:860px){.move-plate{top:8px;padding:6px 12px 7px 10px}.move-plate b{font-size:15px}.move-plate small{font-size:11px}}
.fg-controls.locked .hand,.fg-controls.locked .fg-side-actions{transition:opacity .2s}
.fg-controls.locked .mcard:not(.chosen),.fg-controls.locked .scard,.fg-controls.locked .sa{opacity:.45;filter:saturate(.6)}
.fg-controls.locked button{cursor:default}
.fg-controls.locked .mcard.chosen{opacity:1;box-shadow:0 0 0 3px var(--yellow),0 12px 30px -12px #ffcc1f88}

/* ---- Arcade level picker + Versus ---- */
.lv-pick{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0 0 12px}
.lv-pick .lv{display:grid;justify-items:center;gap:3px;padding:8px 2px 7px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text);position:relative}
.lv-pick .lv span{font:700 11px var(--display);letter-spacing:.06em}
.lv-pick .lv img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 4px 4px #0008)}
.lv-pick .lv small{font-size:9.5px;color:var(--muted);line-height:1.15;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}
.lv-pick .lv.on{border-color:var(--yellow);box-shadow:0 0 0 2px #ffcc1f55;background:linear-gradient(180deg,#ffcc1f1c,var(--panel-2))}
.lv-pick .lv.done::after{content:"✓";position:absolute;top:4px;right:6px;font-size:11px;font-weight:800;color:#3ee68a}
.lv-pick .lv:disabled{opacity:.4;cursor:not-allowed}.lv-pick .lv:disabled img{filter:grayscale(1) brightness(.5)}
.vs-pick{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch;margin-bottom:16px}
.vs-slot{display:grid;justify-items:center;gap:6px;padding:18px 16px 16px;border-radius:18px;border:1.5px solid var(--line-2);background:var(--panel);color:var(--text);text-align:center}
.vs-slot.me{border-color:#2f7bff66;background:linear-gradient(180deg,#2f7bff1c,var(--panel) 60%)}
.vs-slot.foe{border-color:#ff3b4766;background:linear-gradient(180deg,#ff3b471c,var(--panel) 60%)}
.vs-slot.on{box-shadow:0 0 0 3px var(--yellow)}
.vs-tag{font:700 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vs-art{height:150px;display:grid;place-items:end center}.vs-art img{max-height:150px;width:auto;filter:drop-shadow(0 10px 10px #000a)}
.vs-art.empty{font:800 60px var(--display);color:var(--dim);place-items:center}
.vs-slot b{font:800 clamp(20px,2.4vw,28px) var(--display)}
.vs-meta{display:flex;gap:6px;align-items:center}.vs-stats{font-size:12.5px;color:var(--muted)}.vs-slot small{font-size:12px;color:var(--dim)}
.vs-mid{align-self:center;font:800 clamp(30px,4vw,52px) var(--display);font-style:italic;background:linear-gradient(180deg,#fff,var(--yellow) 60%,#ff8a2e);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs-actions{display:flex;gap:10px;justify-content:center;margin-bottom:22px}.vs-actions .cta{width:auto;height:58px;margin:0;padding:0 34px;font-size:20px}
@media (max-width:700px){.vs-pick{grid-template-columns:1fr 1fr;gap:10px}.vs-mid{display:none}.vs-art{height:100px}.vs-art img{max-height:100px}.vs-stats{display:none}}

/* Versus 1v1 / 3v3 */
.vs-size{display:flex;gap:6px;align-self:center}.vs-size .chip{min-width:72px;justify-content:center;font-weight:800}
.vs-slot{cursor:pointer}
.vs-team{display:grid;gap:8px;width:100%}.vs-team.n3{grid-template-columns:repeat(3,1fr)}
.vs-mem{display:grid;justify-items:center;gap:5px;padding:8px 4px;border-radius:12px;color:var(--text);min-width:0}
.vs-mem:hover{background:#ffffff0a}.vs-mem b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-team.n3 .vs-art{height:96px}.vs-team.n3 .vs-art img{max-height:96px}.vs-team.n3 .vs-mem b{font-size:clamp(13px,1.3vw,16px)}
.vs-team.n3 .vs-meta .role{display:none}
.vs-mem.empty{border:1.5px dashed var(--line-2)}.vs-mem.empty b{color:var(--dim);font-size:13px}
.vs-team.n3 .vs-art.empty{font-size:40px}
@media (max-width:700px){.vs-pick{grid-template-columns:1fr}.vs-team.n3 .vs-art{height:64px}.vs-team.n3 .vs-art img{max-height:64px}}

.fcard.vs-lk .pic img{filter:grayscale(1) brightness(.5)}
.fcard.vs-lk::after{content:"LOCKED";position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);font:800 11px var(--display);letter-spacing:.12em;background:#0a0f1ee6;color:var(--yellow);padding:5px 9px;border-radius:6px;border:1px solid #ffcc1f55}

/* ---- brand v3: new Onchain Rivals logo (two facing chevrons) + Kanit heavy italic, everywhere ---- */
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);letter-spacing:0}
.brand .mark{width:36px;height:40px;flex:none}
.brand .wm{display:flex;flex-direction:column;line-height:.84;font-style:italic;font-weight:900;letter-spacing:.01em;text-transform:uppercase}
.brand .wm b{color:#fff;font-size:16px;font-weight:900}.brand .wm i{color:#fdcd1b;font-size:20px;font-style:italic;font-weight:900}
.h1,.sec-title,.vs-mid,.result h2,.hud-mid b,.pack-box b,.share-box h2,.clout-shop h2{font-family:var(--display);font-style:italic;font-weight:900;letter-spacing:0}
.hud-name b,.vs-slot b,.lv-pick .lv span,.inv-code,.cl-pack b,.move-plate b{font-family:var(--display);font-style:italic;font-weight:800}
.pack-box .pmark svg,.pcard .back .pmark svg{width:100%;height:auto}
@media (max-width:420px){.brand .wm{display:none}}

/* ---- sign in (wallet or X), own card reveal, waitlist ---- */
.acct{padding:30px 28px 24px;max-width:520px;margin:0 auto;display:grid;gap:12px}
.acct h2{font:italic 900 clamp(26px,3vw,34px) var(--display);margin:0 0 6px}
.acct-opt{display:flex;align-items:center;gap:14px;text-align:left;padding:16px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--panel-2);color:var(--text)}
.acct-opt:hover{border-color:var(--yellow)}.acct-opt b{display:block;font-size:17px}.acct-opt small{display:block;color:var(--muted);font-size:13px;line-height:1.45;margin-top:3px}
.acct-opt.x{background:#000;border-color:#ffffff33}.acct-opt.x .xlogo{width:30px;height:30px}
.acct-ico{width:30px;text-align:center;font-size:26px;color:var(--yellow)}
.acct-fine{font-size:12.5px;text-align:center}
.acct-rows{display:grid;gap:8px}.acct-rows>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line)}
.acct-rows span{color:var(--muted);font-size:13px}.acct-rows b{font-size:14px;text-align:right}
.acct-out{justify-self:center;margin-top:6px}
.own-reveal{text-align:center}.own-reveal .pack-row{justify-content:center}.own-reveal .pcard{cursor:pointer}
.wl-link{color:var(--yellow);font-weight:700;white-space:nowrap}
.wl-form{display:grid;grid-template-columns:1.2fr 1fr auto;gap:12px;align-items:end;padding:18px;margin-bottom:18px}
.wl-in{display:grid;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.wl-in input{height:46px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--bg-2);color:var(--text);font:15px var(--font);padding:0 14px}
.wl-form .btn{height:46px}.wl-form .hint{grid-column:1/-1;margin:0;min-height:1em;font-size:13.5px}
.wl-list{list-style:none;display:grid;gap:8px}
.wl-list li{display:flex;align-items:center;gap:14px;padding:12px 14px}
.wl-list li.added{border-color:#3ee68a55}
.wl-rank{font:italic 900 18px var(--display);color:var(--muted);width:30px;text-align:center}
.wl-who{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.wl-who a{font-weight:700;font-size:16px;color:var(--text)}.wl-who a:hover{color:var(--yellow)}
.wl-who small{flex-basis:100%;color:var(--muted);font-size:13px}
.badge.wl-self{background:#2f7bff33;color:#9cc0ff}.badge.wl-in-game{background:#3ee68a26;color:#7dffb0}
.wl-vote{display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:10px;border:1.5px solid var(--line-2);color:var(--muted);font-weight:700}
.wl-vote b{color:var(--text)}.wl-vote.on{border-color:var(--yellow);color:var(--yellow);background:#ffcc1f14}.wl-vote:disabled{opacity:.6}
@media (max-width:760px){.wl-form{grid-template-columns:1fr}}

/* members vs guests, profiles */
.trial-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;border-color:#2f7bff66;background:linear-gradient(90deg,#2f7bff1c,var(--panel-2) 70%)}
.trial-banner>span{flex:1;min-width:240px}.trial-banner .btn{margin-left:auto}
.reward.trial{font-size:15px;color:var(--muted);font-family:var(--font);font-style:normal}
.who-av{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--yellow)}
.wallet:has(.who-av) svg{display:none}
.acct-av{width:44px;height:44px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:12px;border:2px solid var(--yellow)}
.prof-pic{display:flex;align-items:center;gap:14px;cursor:pointer;font-weight:600}
.prof-av{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;overflow:hidden;border:2px dashed var(--line-2);background:var(--panel-2)}
.prof-av img{width:100%;height:100%;object-fit:cover}.prof-av b{font-size:34px;color:var(--muted)}
.acct .cta{height:56px;margin-top:6px;font-size:18px}.acct .hint{min-height:1em;margin:0;font-size:13.5px}

/* logo: the wording is exactly as tall as the R (ONCHAIN 0.63x, RIVALS 0.72x the mark height, line-height .78) */
.brand .mark{width:36.5px;height:40px}
.brand .wm{line-height:.78}.brand .wm b{font-size:25.2px}.brand .wm i{font-size:28.8px}

.share-img-note{margin:8px 0 0;font-size:12.5px;color:var(--muted)}.share-img-note a{color:var(--yellow);font-weight:700}

/* credits filter (Arcade + Versus) */
.cr-filter{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cr-filter>span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.cr-filter>span .coin{width:14px;height:14px}
.chip.sm{height:34px;padding:0 12px;font-size:13px;min-width:44px;justify-content:center}

/* final logo (interlocking chain links): wide mark, wordmark as tall as the mark, logo yellow #fdd911 */
.brand .mark{width:65.4px;height:40px}.brand .wm i{color:#fdd911}
/* ---- brand v4: the wordmark is traced from the owner's logo PNG (exact lettering, not a web font); same height as the mark ---- */
.brand{gap:7px}
.brand .wm{display:block;height:40px;width:123.5px;flex:none}
.pack-box .pwm{width:78%;height:auto;display:block;filter:drop-shadow(0 2px 8px #000a)}
@media (max-width:420px){.brand .wm{display:none}}