/* ══════════════════════════════════════════════════════════════════════
   PIXEL UP! · WAGER ARENA layer
   Loaded AFTER arcade.css, so the arena speaks the arcade's language:
   ink outlines, hard offset shadows, halftone, speed lines, shout bursts.
   Only arena-specific pieces live here — the header, rail, section heads,
   cards and footer are the arcade's own classes, untouched.
   ══════════════════════════════════════════════════════════════════ */

/* the arena script still speaks its old token names — point them at the arcade palette */
:root{
  --bg:var(--ink); --panel2:var(--panel-2); --line2:var(--line); --dim2:#6f5d8f;
  --acc:var(--cool); --cyan:var(--cool); --teal:var(--cool); --teal2:#13b9d4;
  --orange:var(--hot); --orange2:#e01f66;
  --up:var(--slime); --dn:var(--hot); --warn:#ffa53a; --gold:var(--sun);
}
.mono{font-family:var(--mono)}
.up{color:var(--slime)} .dn{color:var(--hot)} .warn{color:var(--warn)} .dim{color:var(--dim)}
main.wrap{padding-bottom:70px}
[hidden]{display:none!important}

/* arcade.css owns `.row` (a card scroller) and `.board` (the Top-13 board) —
   the arena's control rows and game boards are different things */
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap;grid-auto-flow:unset;grid-auto-columns:unset;
  overflow:visible;padding:0;scroll-snap-type:none}

/* ══ HEADER extras ═══════════════════════════════════════════════════ */
.px-pill{background:linear-gradient(150deg,var(--cool),var(--slime));color:var(--ink)}
.px-pill .lv{color:var(--cool)}
.px-pill{position:relative;overflow:hidden}
.px-pill::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media(max-width:560px){ .px-pill .lvname{display:none} }
.chip-sep{flex:none;width:3px;border-radius:2px;background:var(--line);margin:4px 3px}
button.chip{cursor:pointer;font:inherit}

/* ══ LIVE TAPE · a scrolling ticker of real results ═════════════════ */
.tape{border-bottom:3px solid var(--ink);background:var(--sun);color:var(--ink);overflow:hidden;
  font-weight:900;font-size:12.5px;letter-spacing:.03em;white-space:nowrap;height:32px;display:flex;align-items:center}
.tape-in{display:inline-flex;gap:34px;padding-left:100%;animation:tape 38s linear infinite}
.tape:hover .tape-in{animation-play-state:paused}
.tape-in span{display:inline-flex;align-items:center;gap:7px}
.tape-in i{font-style:normal;font-family:var(--mono);background:var(--ink);color:var(--sun);border-radius:6px;padding:1px 7px}
@keyframes tape{to{transform:translateX(-100%)}}
.tape.quiet .tape-in{animation:none;padding-left:var(--gut)}

/* ══ SPOTLIGHT HERO ═════════════════════════════════════════════════ */
.w-spot{padding-top:26px}
.w-spot .sec-head .simtag{flex:none;font-weight:900;font-size:11px;letter-spacing:.08em;color:var(--ink);
  background:var(--warn);border:2.5px solid var(--ink);border-radius:999px;padding:4px 11px;box-shadow:var(--pop-0)}
.w-spot .spot-lead{min-height:360px}
.w-spot .spot-lead h2{display:block}
#logoArt{display:inline-flex;height:30px;vertical-align:-3px;margin-right:10px}
#logoArt svg{height:100%;filter:drop-shadow(3px 3px 0 var(--ink))}
.w-cta{display:flex;gap:10px;flex-wrap:wrap}
.spot-lead:hover .art svg{transform:scale(1.04)}
.spot-lead .art svg{transition:transform .5s ease}

/* the shout burst, the arcade's comic "KAPOW" */
.burst{position:absolute;z-index:3;top:18px;right:18px;padding:16px 22px;font-weight:900;font-size:clamp(16px,2vw,22px);
  letter-spacing:-.01em;color:var(--ink);background:var(--sun);border:4px solid var(--ink);box-shadow:var(--pop-1);
  clip-path:polygon(50% 0,61% 18%,82% 6%,78% 30%,100% 34%,83% 50%,100% 66%,78% 70%,82% 94%,61% 82%,50% 100%,39% 82%,18% 94%,22% 70%,0 66%,17% 50%,0 34%,22% 30%,18% 6%,39% 18%);
  transform:rotate(9deg);animation:throb 2.4s ease-in-out infinite}
@keyframes throb{0%,100%{transform:rotate(9deg) scale(1)}50%{transform:rotate(5deg) scale(1.08)}}

/* the bank strip under the hero */
.w-bank{margin-top:16px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;cursor:default}
.w-bank:hover{transform:none}
.bank{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bank .bk-l{font-weight:900;font-size:11px;letter-spacing:.12em;color:var(--dim)}
.bank .bk-bal{font-weight:900;font-size:15px}
.bank .bk-bal b{font-family:var(--mono);font-size:26px;color:var(--sun);text-shadow:3px 3px 0 var(--ink);letter-spacing:-.02em}
.bank #bankTop{margin-left:auto}
.w-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}

/* ══ STAT TILES · the arcade's category tile, with numbers in it ════ */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.kpi,.wstat{position:relative;overflow:hidden;padding:12px 14px;border-radius:15px;border:3.5px solid var(--ink);
  background:var(--panel);box-shadow:var(--bevel),var(--pop-1);min-height:70px;transition:transform .14s,box-shadow .14s}
.kpi:hover,.wstat:hover{transform:translate(-3px,-3px);box-shadow:var(--bevel),var(--pop-2)}
.kpi::before,.wstat::before{content:'';position:absolute;inset:0;opacity:.2;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 9px,rgba(255,255,255,.09) 9px 11px)}
.kpi .k,.wstat .k{position:relative;font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.kpi .v,.wstat .v{position:relative;font-family:var(--mono);font-size:21px;font-weight:700;color:var(--sun);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:2px 2px 0 var(--ink)}
.kpi .s,.wstat .s{position:relative;font-size:11px;font-weight:700;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wstat:nth-child(4n+1) .v{color:var(--sun)} .wstat:nth-child(4n+2) .v{color:var(--cool)}
.wstat:nth-child(4n+3) .v{color:var(--slime)} .wstat:nth-child(4n+4) .v{color:var(--hot)}

/* ══ SECTIONS · arcade section heads over the arena's panels ═══════ */
.w-head{margin-top:34px}
.w-head h2{text-transform:uppercase}
.sec-sub{margin:-8px 0 14px;color:var(--dim);font-weight:700;font-size:13px}
.sec-sub .dim{font-size:12px!important}
.tart{display:inline-flex;height:26px;vertical-align:middle;margin-right:2px}
.tart svg{height:100%}
.panel{padding:16px;margin-bottom:16px;overflow-x:auto;border-radius:16px;border:3.5px solid var(--ink);
  background:var(--panel);box-shadow:var(--bevel),var(--pop-1)}
#refBanner{background:var(--sun);color:var(--ink);font-weight:800}

/* ══ GAME CARDS · arcade cards with stake controls ═════════════════ */
.gcard.card{cursor:default}
.gcard.card:active{transform:translate(-4px,-4px)}
.gcard .b{gap:9px}
.gcard .gdesc{font-size:12.5px;color:var(--txt-2);font-weight:600;line-height:1.45}
.gcard .gmeta{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.gcard .row input{width:74px}
.gcard .row select{flex:1;min-width:110px}
.gcard .row button.play{width:100%}

/* ══ BUTTONS · the cabinet's buttons ═══════════════════════════════ */
button.play,button.ghost{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:10px;
  font-weight:900;font-size:12.5px;letter-spacing:.04em;white-space:nowrap;transition:.14s;cursor:pointer}
button.play{background:var(--sun);color:var(--ink);border:2.5px solid var(--ink);box-shadow:var(--pop-0)}
button.play:hover{transform:translate(-2px,-2px);box-shadow:var(--pop-1)}
button.play:active{transform:translate(1px,1px);box-shadow:none}
button.ghost{background:var(--panel);color:var(--txt);border:2.5px solid var(--line)}
button.ghost:hover{border-color:var(--cool);color:var(--cool)}
button:disabled{opacity:.4;cursor:not-allowed;transform:none!important}
.ch-tier{font-family:var(--mono)}
.ch-tier[data-amt="50"]{border-color:var(--slime);color:var(--slime)}
.ch-tier[data-amt="100"]{border-color:var(--cool);color:var(--cool)}
.ch-tier[data-amt="500"]{border-color:var(--sun);color:var(--sun)}
.ch-tier[data-amt="1000"]{border-color:var(--hot);color:var(--hot)}
.ch-tier:hover{background:var(--panel-2)}

/* ══ TABLES · readable on the skin's paper sheet ═══════════════════ */
table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px}
th{text-align:left;padding:7px 9px;text-transform:uppercase;letter-spacing:.08em}
td{padding:7px 9px}
td.num,th.num{text-align:right}
td .up,td.up{color:#0b7a3a!important} td .dn,td.dn{color:#c0174f!important}
td .dim,td.dim{color:#6b5e52!important}
td .pname{filter:brightness(.62) saturate(1.4)}
td .badge.up{color:#0b7a3a!important}
.rank1{color:#b07a00!important;font-weight:900} .rank2{color:#6e6a7a!important;font-weight:900} .rank3{color:#a3561c!important;font-weight:900}

/* ══ PLAYERS · stakes · brackets ═══════════════════════════════════ */
.pdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle;border:2px solid var(--ink)}
.pname{font-weight:900}
.stakepill{font-family:var(--mono);font-weight:900;border-radius:7px;padding:1px 8px;border:2px solid currentColor}
.badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;padding:1px 7px;border-radius:5px;border:2px solid currentColor}
.badge-open{color:var(--slime)} .badge-priv{color:var(--warn)}
.vsline{display:flex;align-items:center;gap:10px;font-weight:900;font-size:15px;flex-wrap:wrap}
.vsline .vs{color:var(--hot);font-size:13px;letter-spacing:.14em}
.sbchip{display:inline-flex;align-items:center;gap:5px;border:2px solid var(--ink);border-radius:999px;padding:2px 10px;
  font-family:var(--mono);font-size:10.5px;margin:2px;background:var(--panel-2)}
.bracket{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin:10px 0}
.brcol{display:flex;flex-direction:column;gap:14px}
.brm{background:var(--panel-2);border:3px solid var(--ink);border-radius:12px;padding:9px 13px;min-width:180px;box-shadow:var(--pop-0)}
.brm.next{background:var(--panel);border-color:var(--ink);box-shadow:0 0 0 3px var(--sun),var(--pop-1)}
.brm .brt{font-size:9.5px;font-weight:900;color:var(--dim);letter-spacing:.14em;margin-bottom:3px}
.brm .brp{display:flex;justify-content:space-between;gap:10px;padding:2px 0;font-size:12.5px;font-weight:700}
.brm .brp.win{color:var(--sun)}
.brm .brp.out{opacity:.38;text-decoration:line-through}
.brarrow{color:var(--sun);font-size:22px;font-weight:900}

/* ══ SOMA · the arena's live nervous system, as a HUD strip ════════ */
#somaStrip{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:9px 12px;border-radius:12px;
  background:var(--ink-2);border:2.5px solid var(--ink);font-size:10.5px;font-weight:900;letter-spacing:.08em;color:var(--dim)}
#somaStrip .sm-n{font-weight:600;letter-spacing:.02em;font-size:11px}
.hbar{display:flex;align-items:center;gap:6px}
.hbar i{display:block;width:64px;height:7px;background:var(--ink);border:2px solid var(--ink);border-radius:4px;overflow:hidden;position:relative}
.hbar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);background:var(--hc,#555);transition:width .5s}
.hbar.cort i::after{--hc:var(--hot)} .hbar.sero i::after{--hc:var(--slime)} .hbar.adre i::after{--hc:var(--sun)} .hbar.oxy i::after{--hc:var(--cool)}
#somaPill{margin-left:auto;font-size:10.5px;letter-spacing:.12em;padding:3px 11px;border-radius:999px;border:2.5px solid currentColor;background:var(--ink)}
#somaMark{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  opacity:.55;pointer-events:none;z-index:5}
.s-calm{color:var(--cool)} .s-vigilant{color:var(--warn)} .s-stressed{color:#ff8fb5} .s-alarmed{color:var(--hot)}
.s-elated{color:var(--slime)} .s-fatigued{color:var(--dim)}

/* ══ THE TABLE IN PLAY · a cabinet around the board ═══════════════ */
#stage{display:none;margin-top:26px;border:4px solid var(--ink);border-radius:20px;overflow:hidden;
  background:var(--panel);box-shadow:var(--bevel),var(--pop-2)}
#stageBar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:11px 14px;background:var(--ink-2);border-bottom:3px solid var(--ink)}
#stageBar .pot{font-family:var(--mono);font-weight:700;color:var(--sun);font-size:14px}
#stageInfo{font-size:12px;font-weight:700;color:var(--dim)}
#gameRoot{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;padding:16px;background:#07040c}
#log{font-family:var(--mono);font-size:10.5px;color:var(--dim);max-height:140px;overflow:auto;padding:8px 14px;background:var(--ink-2);border-top:3px solid var(--ink)}
.seedbox{font-family:var(--mono);font-size:9.5px;color:var(--dim2);word-break:break-all;padding:6px 14px 12px;background:var(--ink-2)}
#gameRoot h2{font-size:13px!important;letter-spacing:.08em;text-transform:uppercase}

/* chess + checkers board: comic board, ink frame, SUN army vs COOL army */
.board{display:grid;grid-template-columns:repeat(8,minmax(34px,54px));border:4px solid var(--ink);border-radius:12px;
  overflow:hidden;user-select:none;box-shadow:var(--pop-2);background:none}
.sq{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:clamp(20px,4.2vw,32px);cursor:pointer;position:relative}
.sq.light{background:#3a2a55}.sq.dark{background:#241838}
.sq.sel{outline:4px solid var(--sun);outline-offset:-4px}
.sq.hint::after{content:"";width:28%;height:28%;border-radius:50%;background:var(--slime);border:2px solid var(--ink);position:absolute}
.sq.cap::after{content:"";width:84%;height:84%;border-radius:50%;border:4px solid var(--hot);position:absolute;background:none}
.sq.lastmove{box-shadow:inset 0 0 0 100px rgba(255,210,31,.14)}
.wp{color:var(--sun);text-shadow:2px 2px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink)}
.bp{color:var(--cool);text-shadow:2px 2px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink)}
@media(max-width:700px){ .board{grid-template-columns:repeat(8,minmax(30px,11vw))} }

/* spades: cards are printed paper with ink edges */
.hand{display:flex;flex-wrap:wrap;gap:7px}
.pcard,.tcard{background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:var(--pop-0);border-radius:8px}
.pcard{width:54px;height:76px;display:flex;flex-direction:column;justify-content:space-between;padding:4px 6px;font:900 15px var(--mono);cursor:pointer;transition:transform .12s}
.pcard.red,.tcard.red{color:var(--hot)}
.pcard:hover{transform:translateY(-6px) rotate(-2deg);box-shadow:var(--pop-1)}
.pcard.disabled{opacity:.35;cursor:not-allowed;transform:none}
.trick{display:grid;grid-template-columns:80px 80px 80px;grid-template-rows:90px 90px 90px;justify-content:center;align-items:center;justify-items:center;
  min-height:270px;background:radial-gradient(closest-side,#2a1d44,#160e26 92%);border:3.5px solid var(--ink);border-radius:18px;box-shadow:var(--pop-1)}
.tslot{font-size:10.5px;font-weight:800;color:var(--dim);text-align:center}
.tcard{width:52px;height:72px;display:flex;align-items:center;justify-content:center;font:900 16px var(--mono);margin:0 auto}
.sideinfo{font-size:12px;font-weight:600;color:var(--dim);min-width:190px}
.sideinfo b{color:var(--txt)}
.sideinfo .big{font-family:var(--mono);font-size:14px;color:var(--sun)}

/* ══ RAZZMATAZZ · the WINNER! pop + confetti (real settlements only) ═ */
.pop{position:fixed;inset:0;z-index:400;pointer-events:none;display:flex;align-items:center;justify-content:center}
.pop .shout{padding:30px 46px;font-weight:900;font-size:clamp(34px,8vw,76px);letter-spacing:-.04em;color:var(--ink);
  background:var(--sun);border:6px solid var(--ink);box-shadow:10px 10px 0 var(--ink);
  clip-path:polygon(50% 0,61% 16%,82% 5%,79% 28%,100% 32%,85% 50%,100% 68%,79% 72%,82% 95%,61% 84%,50% 100%,39% 84%,18% 95%,21% 72%,0 68%,15% 50%,0 32%,21% 28%,18% 5%,39% 16%);
  animation:popin 1.5s cubic-bezier(.2,1.6,.4,1) forwards}
.pop .shout.lose{background:var(--panel-2);color:var(--txt)}
.pop .shout small{display:block;font-size:.32em;letter-spacing:.02em;text-align:center;font-family:var(--mono)}
@keyframes popin{0%{transform:scale(.2) rotate(-14deg);opacity:0}18%{transform:scale(1.08) rotate(4deg);opacity:1}
  30%{transform:scale(1) rotate(-2deg)}80%{opacity:1}100%{transform:scale(1.04) rotate(-2deg);opacity:0}}
.confetti{position:fixed;top:-20px;width:11px;height:16px;border:2px solid var(--ink);z-index:399;pointer-events:none;
  animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

@media (prefers-reduced-motion: reduce){
  .tape-in{animation:none;padding-left:var(--gut)} .burst{animation:none} .px-pill::after{display:none}
  .pop .shout{animation:none} .confetti{display:none}
}

/* a match is on: the board takes the page, the spotlight steps aside */
main:has(#stage[style*="block"]) #wHero{display:none}