/* Home page (/) + in-game HUD. Built on ds.css tokens. */
html, body { height: 100%; }
body { overflow: hidden; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: crosshair; touch-action: none; }
#danger { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s; box-shadow: inset 0 0 140px 30px rgba(239, 68, 68, .45); }
kbd { font: 600 11px var(--mono); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); }

/* =================== HOME =================== */
#menu { position: fixed; inset: 0; z-index: 10; overflow-y: auto; background: rgba(10, 11, 15, .9); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.home { max-width: 1200px; margin: 0 auto; padding: var(--s12) var(--s6) 0; }
.home #result { max-width: 1200px; margin: 0 0 var(--s6); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: var(--s12); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s2); height: 28px; padding: 0 var(--s3); border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 13px; color: var(--text-2); }
.hero h1 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; margin: var(--s5) 0 var(--s4); }
.lead { font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 540px; margin: 0; }
.hero-kpis { display: flex; gap: var(--s10); margin-top: var(--s10); padding-top: var(--s6); border-top: 1px solid var(--border); }

.play-panel { padding: var(--s6); display: grid; gap: var(--s4); box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; }
.panel-head h2 { font-size: 20px; }
.panel-head #preview { width: 140px; height: 42px; cursor: pointer; }
.modes { display: grid; gap: var(--s2); }
.mode { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s4); text-align: left;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; transition: border-color var(--t), background var(--t); }
.mode:hover { border-color: var(--border-strong); background: var(--surface-3); }
.mode.on { border-color: var(--accent); background: var(--accent-weak); box-shadow: inset 0 0 0 1px var(--accent); }
.mode-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.mode.on .mode-ic { background: var(--accent); color: #fff; }
.mode-main { display: grid; gap: 2px; min-width: 0; }
.mode-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: var(--s2); }
.mode-meta { font-size: 12px; color: var(--text-3); display: flex; gap: var(--s3); flex-wrap: wrap; }
.mode-meta .dot { margin-right: 4px; vertical-align: 1px; }
.mode-entry { text-align: right; display: grid; gap: 2px; }
.mode-entry b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mode-entry span { font-size: 12px; color: var(--text-3); }
.play-btn { gap: var(--s3); }
.play-btn .enter { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .85); }
.play-btn.free { background: var(--success); border-color: var(--success); color: #04230f; }
.play-btn.free .enter { background: rgba(0, 0, 0, .12); border-color: rgba(0, 0, 0, .15); color: rgba(4, 35, 15, .8); }
.play-btn.login { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); }
.play-btn.login .enter { display: none; }
.who { margin: 0; text-align: center; font-size: 13px; color: var(--text-3); }
.who a { color: #a5b4fc; }
.who a:hover { text-decoration: underline; }

.how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s16); padding-top: var(--s10); border-top: 1px solid var(--border); }
.how-item { display: grid; grid-template-columns: 40px 1fr; gap: var(--s4); }
.how-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: #a5b4fc; }
.how h3 { font-size: 15px; margin-bottom: 6px; }
.how p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.link { border: none; background: none; padding: 0; color: #a5b4fc; cursor: pointer; font: inherit; }
.link:hover { text-decoration: underline; }
.rules ul { margin: 0; padding-left: 18px; display: grid; gap: var(--s2); color: var(--text-2); line-height: 1.55; }
.rules b { color: var(--text); font-weight: 600; }
.fee-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: var(--s5); }
.fee-strip div { text-align: center; padding: var(--s2) 0; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.fee-strip small { display: block; font-size: 11px; color: var(--text-3); }
.fee-strip b { font-size: 13px; font-variant-numeric: tabular-nums; }
.fee-strip .zero b { color: var(--success); }

#result { padding: var(--s5) var(--s6); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); display: grid; grid-template-columns: auto 1fr; gap: 0 var(--s5); align-items: center; }
#result.win { border-color: rgba(34, 197, 94, .4); }
#result.lose { border-color: rgba(239, 68, 68, .35); }
#result .r-kicker { grid-column: 1 / -1; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
#result.win .r-kicker { color: var(--success); }
#result.lose .r-kicker { color: var(--danger); }
#result .r-big { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
#result.win .r-big { color: var(--sol); }
#result .r-detail { color: var(--text-2); font-size: 14px; }
#result .r-detail a { color: #a5b4fc; }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
#confetti i { position: absolute; top: -20px; width: 6px; height: 12px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); } }

/* =================== HUD =================== */
.hud-panel { background: rgba(17, 19, 24, .88); border: 1px solid var(--border); border-radius: var(--r-md); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#hud > *, #lb { position: fixed; z-index: 5; }
#me-card { top: var(--s4); left: var(--s4); padding: var(--s4); min-width: 220px; pointer-events: none; }
.me-top { display: flex; align-items: center; gap: var(--s2); font-weight: 600; font-size: 13px; }
.me-dot { width: 10px; height: 10px; border-radius: 50%; }
.rank { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-3); padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.me-value { font-size: 26px; font-weight: 700; margin-top: var(--s2); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.me-pnl { font-size: 13px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.me-pnl.up { color: var(--success); } .me-pnl.down { color: var(--danger); }
.me-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); }
.me-stats label { display: block; font-size: 11px; color: var(--text-3); }
.me-stats b { font-size: 14px; font-variant-numeric: tabular-nums; }

#killfeed { top: var(--s4); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.kf { font-size: 13px; padding: 6px 12px; border-radius: 8px; background: rgba(17, 19, 24, .88); border: 1px solid var(--border); white-space: nowrap; animation: kfIn .2s ease-out, kfOut .5s ease-in 4.5s forwards; }
.kf b { font-weight: 600; } .kf .val { color: var(--sol); font-variant-numeric: tabular-nums; } .kf .x { color: var(--text-3); margin: 0 6px; }
@keyframes kfIn { from { opacity: 0; transform: translateY(-6px); } }
@keyframes kfOut { to { opacity: 0; } }

#cashout-wrap { bottom: var(--s4); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: var(--s2); width: min(420px, calc(100vw - 32px)); }
.tiers-box { width: 100%; padding: 10px 12px 8px; pointer-events: none; }
.tiers { display: flex; gap: 3px; height: 6px; }
.tiers .seg { flex: 1; border-radius: 3px; background: var(--surface-3); position: relative; overflow: hidden; }
.tiers .seg.done { background: rgba(99, 102, 241, .45); }
.tiers .seg.now::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: var(--accent); }
.tiers-labels { display: flex; gap: 3px; margin-top: 5px; }
.tiers-labels span { flex: 1; text-align: center; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tiers-labels span.now { color: var(--text); font-weight: 600; }
.tiers-labels span.zero { color: var(--success); }
.co { position: relative; width: 100%; height: 60px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: rgba(17, 19, 24, .92);
  display: grid; align-content: center; justify-items: center; cursor: pointer; transition: background var(--t), border-color var(--t); }
.co-main { font-size: 15px; font-weight: 600; }
.co-sub { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.co.locked { cursor: not-allowed; }
.co.ready { border-color: var(--success); background: rgba(22, 101, 52, .55); }
.co.ready .co-sub { color: #bbf7d0; }
.co-ring { position: absolute; left: 12px; top: 50%; width: 36px; height: 36px; transform: translateY(-50%) rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 8; }
.ring-fg { fill: none; stroke: var(--success); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; }
.co-hint { font-size: 12px; color: var(--text-3); }

#radar { bottom: var(--s4); right: var(--s4); width: 160px; height: 160px; border-radius: 50%; overflow: hidden; pointer-events: none; }
#minimap { width: 100%; height: 100%; display: block; }
#lb { top: var(--s4); right: var(--s4); width: 240px; padding: var(--s3) var(--s4); pointer-events: none; }
.lb-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: var(--s2); }
.lb-head span:last-child { font-weight: 400; color: var(--text-3); }
#lb ol { list-style: none; margin: 0; padding: 0; counter-reset: r; }
#lb li { counter-increment: r; display: flex; align-items: center; gap: var(--s2); padding: 3px 4px; border-radius: 6px; font-size: 13px; }
#lb li::before { content: counter(r); width: 16px; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
#lb li .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lb li .v { font-size: 12px; color: var(--sol); font-variant-numeric: tabular-nums; }
#lb li.me { background: var(--accent-weak); }
#boost-btn { display: none; }
@media (pointer: coarse) {
  #boost-btn.touch-only { display: grid; place-items: center; position: fixed; right: 20px; bottom: 200px; width: 80px; height: 80px; border-radius: 50%; z-index: 6;
    border: 1px solid var(--border-strong); background: rgba(17, 19, 24, .85); font-weight: 600; }
}

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: var(--s8); }
  .play-panel { order: -1; }
  .home { padding-top: var(--s6); }
  .hero-kpis { gap: var(--s6); flex-wrap: wrap; margin-top: var(--s6); }
  .how { grid-template-columns: 1fr 1fr; margin-top: var(--s10); }
}
@media (max-width: 600px) {
  .how { grid-template-columns: 1fr; }
  .home { padding: var(--s4) var(--s4) 0; }
  #me-card { min-width: 0; padding: var(--s3); } .me-value { font-size: 20px; } .me-stats { display: none; }
  #lb { width: 160px; } #lb li:nth-child(n+6) { display: none; }
  #radar { width: 100px; height: 100px; bottom: auto; top: 200px; }
  .tiers-box { display: none; }
}

.bot-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 0 5px; margin-right: 6px; border-radius: 4px; background: var(--surface-3); color: var(--text-2); vertical-align: 1px; }

/* arena pool, top centre */
#pool-pill { top: var(--s4); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; pointer-events: none; font-size: 15px; }
#pool-pill .pl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
#pool-pill b { font-weight: 700; color: var(--sol); font-variant-numeric: tabular-nums; }
/* snake colour in leaderboards */
.sw { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 8px currentColor; }
#menu-lb li { display: flex; align-items: center; gap: 8px; }
#menu-lb li .n { flex: 1; }
@media (max-width: 640px) { #pool-pill { top: auto; bottom: 200px; font-size: 13px; } }

/* =================== ARENA PICKER =================== */
.arena-pick { display: grid; gap: var(--s8); }
.pick-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s8); flex-wrap: wrap; }
.pick-head h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; margin: var(--s4) 0 var(--s3); }
.pick-head .hero-kpis { margin: 0; padding: 0; border: 0; gap: var(--s8); }
#rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: stretch; }
.pick-foot { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.pick-foot .play-btn { min-width: 340px; }

.arena { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s3);
  min-height: 300px; padding: var(--s6); border-radius: 20px; border: 1px solid rgba(255,255,255,.08); text-align: left; cursor: pointer;
  color: #fff; background: #0c0d12; transform: translateZ(0);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .3s; }
.arena:hover, .arena:focus-visible { transform: translateY(-6px) scale(1.045); z-index: 2; }
.arena.on { border-color: var(--glow); box-shadow: 0 0 0 2px var(--glow), 0 24px 70px -18px var(--glow); }
.arena:hover { box-shadow: 0 30px 80px -20px var(--glow); }
.arena .scene, .arena .scene::before, .arena .scene::after { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.arena .scene::before, .arena .scene::after { content: ''; }
.arena .shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,6,10,0) 25%, rgba(5,6,10,.82) 78%); }
.arena-top { position: absolute; top: var(--s5); left: var(--s6); right: var(--s6); display: flex; justify-content: space-between; align-items: center; }
.arena-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.arena-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; }
.arena h3 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.arena .tag { font-size: 13px; color: rgba(255,255,255,.72); margin-top: -6px; }
.arena .entry { display: flex; align-items: baseline; gap: 6px; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.arena .entry small { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.65); }
.arena .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); padding-top: var(--s3); border-top: 1px solid rgba(255,255,255,.12); }
.arena .stats div { display: grid; gap: 2px; }
.arena .stats label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.55); }
.arena .stats b { font-size: 15px; font-variant-numeric: tabular-nums; }
.arena .lock { color: rgba(255,255,255,.75); }

/* ---- Starter: overgrowth ---- */
.arena.starter { --glow: #4ade80; }
.arena.starter .scene { background:
  radial-gradient(120% 80% at 50% 115%, rgba(34,197,94,.55), transparent 60%),
  radial-gradient(60% 50% at 15% 20%, rgba(132,204,22,.25), transparent 70%),
  linear-gradient(160deg, #06240f 0%, #0b3b1b 45%, #052012 100%); }
.arena.starter .scene::before { /* drifting spores */
  background-image: radial-gradient(circle, rgba(190,242,100,.9) 0 1.6px, transparent 2.4px), radial-gradient(circle, rgba(134,239,172,.7) 0 1.2px, transparent 2px);
  background-size: 90px 110px, 140px 130px; background-position: 0 0, 40px 60px; animation: rise 14s linear infinite; opacity: .6; }
.arena.starter .scene::after { /* leaves along the bottom */
  background:
    radial-gradient(18px 40px at 8% 100%, #22c55e 98%, transparent 100%),
    radial-gradient(14px 34px at 18% 100%, #16a34a 98%, transparent 100%),
    radial-gradient(20px 46px at 82% 100%, #22c55e 98%, transparent 100%),
    radial-gradient(12px 30px at 92% 100%, #4ade80 98%, transparent 100%),
    radial-gradient(16px 36px at 70% 100%, #15803d 98%, transparent 100%);
  transform-origin: bottom; animation: sway 5s ease-in-out infinite; opacity: .55; }

/* ---- Pro: glacier ---- */
.arena.pro { --glow: #38bdf8; }
.arena.pro .scene { background:
  radial-gradient(90% 70% at 70% 0%, rgba(125,211,252,.45), transparent 65%),
  radial-gradient(80% 60% at 0% 100%, rgba(56,189,248,.3), transparent 70%),
  linear-gradient(160deg, #04172b 0%, #0b2f52 50%, #061a30 100%); }
.arena.pro .scene::before { /* snow */
  background-image: radial-gradient(circle, rgba(255,255,255,.95) 0 1.4px, transparent 2px), radial-gradient(circle, rgba(186,230,253,.8) 0 1px, transparent 1.6px);
  background-size: 70px 90px, 110px 120px; animation: fall 12s linear infinite; opacity: .7; }
.arena.pro .scene::after { /* frost sweep */
  background: linear-gradient(115deg, transparent 35%, rgba(224,242,254,.32) 48%, rgba(255,255,255,.08) 52%, transparent 62%);
  background-size: 260% 100%; animation: sweep 5.5s ease-in-out infinite; }

/* ---- High Roller: inferno ---- */
.arena.whale { --glow: #fb923c; }
.arena.whale .scene { background:
  radial-gradient(70% 55% at 50% 112%, rgba(251,146,60,.95), transparent 70%),
  radial-gradient(45% 40% at 20% 105%, rgba(239,68,68,.8), transparent 70%),
  radial-gradient(45% 40% at 82% 108%, rgba(250,204,21,.6), transparent 70%),
  linear-gradient(170deg, #1a0503 0%, #3a0b04 55%, #160302 100%); }
.arena.whale .scene::before { /* flame tongues */
  background:
    radial-gradient(22% 60% at 20% 100%, rgba(255,120,30,.75), transparent 70%),
    radial-gradient(18% 70% at 45% 100%, rgba(255,180,40,.7), transparent 70%),
    radial-gradient(24% 55% at 70% 100%, rgba(255,90,20,.75), transparent 70%),
    radial-gradient(16% 65% at 90% 100%, rgba(255,200,60,.6), transparent 70%);
  filter: blur(6px); transform-origin: bottom; animation: flicker 1.6s ease-in-out infinite alternate; }
.arena.whale .scene::after { /* embers */
  background-image: radial-gradient(circle, rgba(255,214,102,1) 0 1.5px, transparent 2.5px), radial-gradient(circle, rgba(255,140,40,.9) 0 1.2px, transparent 2px);
  background-size: 80px 100px, 120px 140px; background-position: 10px 0, 50px 40px; animation: rise 7s linear infinite; }

.arena:hover .scene::before, .arena:hover .scene::after { animation-duration: var(--fast, 0); }
.arena.starter:hover .scene::before { animation-duration: 6s; opacity: .95; }
.arena.pro:hover .scene::before { animation-duration: 5s; opacity: 1; }
.arena.whale:hover .scene::before { animation-duration: .7s; }
.arena.whale:hover .scene::after { animation-duration: 3s; }
.arena:hover .scene::after { animation-duration: 3s; }

@keyframes rise { from { background-position: 0 0, 40px 60px; } to { background-position: 0 -440px, 40px -460px; } }
@keyframes fall { from { background-position: 0 0, 30px 40px; } to { background-position: 30px 360px, 0 400px; } }
@keyframes sweep { 0% { background-position: 120% 0; } 100% { background-position: -40% 0; } }
@keyframes sway { 0%, 100% { transform: skewX(-3deg) scaleY(1); } 50% { transform: skewX(3deg) scaleY(1.06); } }
@keyframes flicker { 0% { transform: scaleY(1) translateY(0); opacity: .85; } 100% { transform: scaleY(1.18) translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .arena .scene::before, .arena .scene::after { animation: none; } .arena:hover { transform: none; } }

/* practice: a quiet option, not a card */
.practice-opt { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: var(--s3); padding: 10px 18px; border-radius: 99px;
  border: 1px dashed var(--border-strong); background: transparent; color: var(--text-2); font-size: 14px; cursor: pointer; transition: border-color var(--t), color var(--t), background var(--t); }
.practice-opt:hover { color: var(--text); border-color: var(--text-3); }
.practice-opt.on { border-style: solid; border-color: var(--success); color: var(--text); background: rgba(52,211,153,.08); }
.practice-opt .meta { color: var(--text-3); font-size: 13px; }

@media (max-width: 900px) {
  #rooms { grid-template-columns: 1fr; }
  .arena { min-height: 220px; }
  .arena:hover { transform: none; }
  .pick-foot .play-btn { min-width: 0; width: 100%; }
}

/* =================== PRE-GAME SKIN PICKER =================== */
.skin-card { max-width: 680px; width: calc(100vw - 32px); padding: var(--s6); display: grid; gap: var(--s4); }
.skin-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); }
.skin-top h2 { margin: 0; font-size: 22px; }
.kp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35); font-size: 13px; color: var(--text-2); white-space: nowrap; }
.kp-pill b { font-size: 16px; color: #fca5a5; font-variant-numeric: tabular-nums; }
.kp-ic { width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg); background: linear-gradient(135deg, #f87171, #b91c1c); }
.skin-stage { position: relative; border-radius: 16px; overflow: hidden; background: radial-gradient(80% 120% at 50% 100%, #1a1c33, #0a0b14); border: 1px solid var(--border); }
.skin-stage canvas { display: block; width: 100%; height: auto; }
.skin-label { position: absolute; left: 14px; bottom: 10px; font-weight: 700; font-size: 15px; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.skin-list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.skin-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 14px; cursor: pointer; }
.skin-chip .sw2 { width: 22px; height: 14px; border-radius: 4px; }
.skin-chip.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-weak); }
.skin-chip.locked { opacity: .55; }
.country-row { display: flex; align-items: center; gap: var(--s3); }
.country-row select { flex: 1; height: 38px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); padding: 0 10px; font: inherit; }
.skin-hint { margin: 0; font-size: 13px; color: var(--text-3); }
.skin-actions { display: flex; align-items: center; gap: var(--s2); }
.skin-actions .grow { flex: 1; }
.arena { align-items: stretch; text-align: center; }
.arena .entry { justify-content: center; }
.arena .stats > span { display: grid; gap: 3px; justify-items: center; }
.arena .stats label { display: block; }
.practice-opt { width: auto; grid-template-columns: none; }

/* ---- arena cards v2: square, canvas scene, hover only zooms the scene (the card never moves) ---- */
.arena { aspect-ratio: 1 / 1; min-height: 0; padding: 0; justify-content: flex-end; text-align: center; transform: none !important; background: #050608; }
.arena:hover, .arena:focus-visible { transform: none; }
.arena .scene-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .8s; transform: translateZ(0); }
.arena:hover .scene-cv, .arena:focus-visible .scene-cv { transform: scale(1.07); filter: saturate(1.25) brightness(1.08); }
.arena .arena-body { display: grid; gap: var(--s2); padding: var(--s5) var(--s6) var(--s5); pointer-events: none; }
.arena .arena-top { pointer-events: none; }
.arena h3 { font-size: 28px; }
.arena .tag { margin-top: -4px; }
.arena .stats { margin-top: var(--s1); }
@media (max-width: 900px) { .arena { aspect-ratio: auto; min-height: 340px; } }

.arena .arena-body { gap: var(--s3); padding: var(--s4) var(--s5); text-align: left; }
.arena .title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.arena .names { display: grid; gap: 2px; }
.arena h3 { font-size: 24px; line-height: 1.1; }
.arena .tag { margin: 0; font-size: 12px; }
.arena .entry { font-size: 26px; justify-content: flex-end; }
.arena .stats { padding-top: var(--s2); }
/* ---- arena cards v3: dark still frame at rest, the scene lights up and plays on hover ---- */
.arena .scene-cv { filter: brightness(.38) saturate(.5); transform: scale(1); transition: filter .6s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.arena.on .scene-cv { filter: brightness(.55) saturate(.7); }
.arena:hover .scene-cv, .arena:focus-visible .scene-cv { filter: none; transform: scale(1.03); }
.arena { border-color: rgba(255,255,255,.07); transition: border-color .4s, box-shadow .6s; }
.arena:hover { box-shadow: 0 24px 70px -24px var(--glow), 0 0 0 1px var(--glow); }
.arena.on { box-shadow: 0 0 0 2px var(--glow); }
@media (hover: none) { .arena.on .scene-cv { filter: none; } }

/* ---- arena cards v4: animated border, the selected arena stays lit and animated ---- */
@property --sweep { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.arena { --c1: #4ade80; --c2: #bef264; }
.arena.pro { --c1: #38bdf8; --c2: #e0f2fe; }
.arena.whale { --c1: #fb923c; --c2: #fde047; }
.arena::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--sweep), transparent 0deg, var(--c1) 50deg, var(--c2) 80deg, transparent 130deg, transparent 180deg, var(--c1) 230deg, transparent 290deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .35; animation: sweep-border 6s linear infinite; transition: opacity .5s; }
.arena:hover::after, .arena.on::after { opacity: 1; animation-duration: 3.2s; }
@keyframes sweep-border { to { --sweep: 360deg; } }
.arena.on .scene-cv { filter: none; }
.arena.on { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c1) 60%, transparent), 0 26px 80px -28px var(--c1); }
@media (prefers-reduced-motion: reduce) { .arena::after { animation: none; } }