/* Arena hall (js/hall.js): lit banner, game cards, the coin-op Quick Match cabinet beside the challenge wall, live matches
   and the champions podium. Colours come from the theme; the 3D Arcade style adds depth at the end of this file. */

/* ---------- banner ---------- */
.ah-marquee{position:relative; overflow:hidden; padding:18px 18px 14px; margin:0 0 18px;
  border:2px solid var(--accent-amber); background:linear-gradient(180deg, color-mix(in srgb, var(--accent-amber) 12%, var(--bg-panel)), var(--bg));
  box-shadow:0 0 0 4px var(--bg), inset 0 0 40px color-mix(in srgb, var(--accent-amber) 22%, transparent);}
.ah-bulbs{position:absolute; inset:6px; pointer-events:none; border:2px dotted color-mix(in srgb, #F5C542 55%, transparent); animation:ah-bulb 1.2s steps(2) infinite;}
@keyframes ah-bulb{50%{border-color:color-mix(in srgb, var(--accent-magenta) 40%, transparent);}}
.ah-top{position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.ah-title{font-family:'Press Start 2P',monospace; font-weight:400; font-size:clamp(22px, 4.4vw, 40px); letter-spacing:2px; margin:0; display:flex; gap:14px; align-items:center;
  color:#F5C542; text-shadow:3px 3px 0 var(--accent-amber), 6px 6px 0 color-mix(in srgb, var(--accent-amber) 35%, #000);}
.ah-sw{display:inline-block; animation:ah-sw 2.4s ease-in-out infinite;}
@keyframes ah-sw{50%{transform:rotate(-14deg);}}
.ah-sub{font-size:22px; color:var(--text-muted); margin:6px 0 0;}
.ah-btns{display:flex; gap:8px; flex-wrap:wrap;}
.ah-ghost{background:transparent; border:1px solid var(--border); padding:8px 12px; font-family:'VT323',monospace; font-size:20px; color:var(--text-primary); cursor:pointer;}
.ah-ghost:hover{border-color:var(--accent-magenta); color:var(--accent-magenta);}
.ah-ghost:focus-visible{outline:2px solid var(--accent-cyan); outline-offset:2px;}
.ah-counters{position:relative; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin-top:16px;}
.ah-ctr{background:rgba(0,0,0,.35); border:1px solid var(--border); padding:10px 12px; min-width:0;}
.ah-ctr b{display:block; font-family:'Press Start 2P',monospace; font-weight:400; font-size:clamp(14px, 2.4vw, 22px); color:var(--text-primary); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ah-ctr small{display:block; font-size:17px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-top:4px;}
.ah-ctr.live b{color:var(--success);}
.ah-ctr.live b::before{content:''; display:inline-block; width:10px; height:10px; background:var(--success); margin-right:8px; vertical-align:middle; animation:ah-blink 1s steps(2) infinite;}
@keyframes ah-blink{50%{opacity:.2;}}
.ah-ticker{position:relative; margin-top:12px; border-top:1px dashed var(--border); padding-top:8px; overflow:hidden; white-space:nowrap; font-size:19px; color:var(--text-muted);}
.ah-ticker[hidden]{display:none;}
.ah-ticker > div{display:inline-block; animation:ld-tick 38s linear infinite;}
.ah-ticker span{margin:0 22px;} .ah-ticker b{color:#F5C542; font-weight:400;} .ah-ticker i{color:var(--success); font-style:normal;}
.no-motion .ah-ticker > div{animation:none; white-space:normal;} .no-motion .ah-ticker .dup{display:none;}

/* ---------- section heads ---------- */
.ah-sh{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 10px;}
.ah-sh h3,.ah-cabh,h2.ah-wallh{font-family:'Press Start 2P',monospace; font-weight:400; font-size:12px; letter-spacing:2px; color:var(--accent-magenta); margin:0;}
.ah-hint{font-size:18px; color:var(--text-muted);}
.ah-hint .chip{padding:4px 10px; font-size:15px;}
.chip.on{border-color:#F5C542; color:#F5C542; background:color-mix(in srgb, #F5C542 8%, transparent);}

/* ---------- game cards ---------- */
.ah-picks{margin:0 0 18px;}
.ah-games{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px;}
.gcard{position:relative; display:flex; flex-direction:column; padding:0; min-width:0; text-align:left; cursor:pointer; font-family:inherit; color:var(--text-primary);
  background:var(--bg-panel); border:2px solid var(--border); transition:transform .15s, border-color .15s, box-shadow .15s;}
.gcard:hover{transform:translateY(-3px); border-color:var(--accent-magenta);}
.gcard.on{border-color:#F5C542; box-shadow:0 0 0 2px color-mix(in srgb, #F5C542 25%, transparent), 0 8px 24px color-mix(in srgb, #F5C542 12%, transparent);}
.gcard.off{opacity:.4; cursor:not-allowed; transform:none;}
.gcard:focus-visible{outline:2px solid var(--accent-cyan); outline-offset:2px;}
.gcard canvas{display:block; width:100%; height:auto; aspect-ratio:3/2; background:#0d0505;}
.gcard .gb{display:grid; gap:4px; padding:8px 10px 10px;}
.gcard .gn{font-size:20px; line-height:1;}
.gcard .gm{font-size:16px; color:var(--text-muted);} .gcard .open{color:var(--success);}
.gcard .tick{position:absolute; top:6px; right:6px; width:22px; height:22px; display:grid; place-items:center; font-size:13px; color:#1a0a08; background:#F5C542; transform:scale(0); transition:transform .15s;}
.gcard.on .tick{transform:scale(1);}
.gcard .size{position:absolute; top:6px; left:6px; padding:0 6px; font-size:15px; color:var(--accent-cyan); background:rgba(0,0,0,.65); border:1px solid var(--border);}

/* ---------- cabinet + wall ---------- */
.ah-main{display:grid; grid-template-columns:minmax(0, 380px) minmax(0, 1fr); gap:22px; align-items:start;}
.ah-main > *{min-width:0;}
.ah-cab.stake-box{margin:6px 8px 12px 6px; padding:18px; position:sticky; top:56px;}
.ah-cabh{color:#F5C542; margin-bottom:6px;}
.ah-lbl{font-size:17px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin:0 0 6px;}
.ah-coins{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin:0 0 12px;}
.ah-coin{padding:9px 0; cursor:pointer; font-family:'Press Start 2P',monospace; font-size:11px; color:var(--text-primary); background:var(--bg); border:2px solid var(--border); box-shadow:0 4px 0 #000; transition:transform .08s, box-shadow .08s;}
.ah-coin small{display:block; margin-top:4px; font-family:'VT323',monospace; font-size:14px; color:var(--text-muted);}
.ah-coin:active{transform:translateY(3px); box-shadow:0 1px 0 #000;}
.ah-coin.on{border-color:#F5C542; color:#F5C542; background:color-mix(in srgb, #F5C542 8%, var(--bg)); animation:ah-pop .25s;}
@keyframes ah-pop{50%{transform:scale(1.07);}}
.ah-find{position:relative; overflow:hidden; display:block; width:100%; margin:16px 0 0; padding:18px 10px; border:0; cursor:pointer; letter-spacing:1px;
  font-family:'Press Start 2P',monospace; font-size:15px; color:#fff; background:var(--accent-amber);
  box-shadow:0 6px 0 color-mix(in srgb, var(--accent-amber) 45%, #000), inset 0 0 0 2px color-mix(in srgb, var(--accent-amber) 60%, #fff); transition:transform .08s, box-shadow .08s;}
.ah-find small{display:block; margin-top:6px; font-family:'VT323',monospace; font-size:17px; letter-spacing:0; opacity:.9;}
.ah-find::after{content:''; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform:translateX(-100%); animation:ah-shine 2.8s infinite;}
@keyframes ah-shine{60%,100%{transform:translateX(100%);}}
.ah-find:active{transform:translateY(4px); box-shadow:0 2px 0 color-mix(in srgb, var(--accent-amber) 45%, #000);}
.ah-find:focus-visible{outline:2px solid var(--accent-cyan); outline-offset:3px;}
.ah-more{margin-top:14px; border-top:1px dashed var(--border); padding-top:10px;}
.ah-more summary{cursor:pointer; font-size:19px; color:var(--text-muted); list-style:none;}
.ah-more summary::-webkit-details-marker{display:none;}
.ah-more summary::before{content:'▸ '; color:var(--accent-magenta);} .ah-more[open] summary::before{content:'▾ ';}
.ah-more-in{display:grid; gap:12px; margin-top:10px;}
.ah-filters{margin:0 0 14px; border-top:none; padding-top:0;} .ah-filters[open] summary{margin-bottom:10px;}
.ah-wall #oppHead{margin-top:6px;}
.ah-wallbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 8px;}
.ah-wallbar .chip{padding:6px 12px;} .ah-sp{flex:1;}
.ah-wallbar .field{margin:0; flex:0 1 220px; min-width:0;}
.ah-fighters{grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr));}
.ah-fighters .opp-card{animation:ah-slide .45s cubic-bezier(.2,1.4,.4,1) backwards;}
@keyframes ah-slide{from{transform:translateX(30px); opacity:.2;}}
.ah-fighters .opp-card.fits{border-color:#F5C542;}
.ah-fighters .opp-card.fits::before{content:'MATCHES YOU'; position:absolute; top:-9px; left:10px; z-index:2; padding:3px 5px; font-family:'Press Start 2P',monospace; font-size:7px; color:#1a0a08; background:#F5C542;}
.ah-fighters .avatar{width:52px; height:52px; font-size:26px; border:2px solid var(--border); background:var(--bg);}

/* ---------- live now + podium ---------- */
.ah-lower{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:22px; margin:26px 0 8px;}
.ah-lower > *{min-width:0;}
.ah-livelist{display:grid; gap:8px;}
.ah-lm{display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); gap:8px; align-items:center; padding:10px 12px; font-size:19px; background:var(--bg-panel); border:1px solid var(--border);}
.ah-lm .p{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .ah-lm .p.a{color:var(--accent-cyan);} .ah-lm .p.b{color:var(--accent-magenta); text-align:right;}
.ah-lm .mid{display:grid; gap:2px; text-align:center;}
.ah-lm .mid b{font-family:'Press Start 2P',monospace; font-weight:400; font-size:9px; color:var(--accent-amber);}
.ah-lm .mid small{font-size:15px; color:var(--text-muted);}
.ah-podium{padding:14px; background:var(--bg-panel); border:1px solid var(--border);}
.ah-pod{display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; gap:8px; margin:6px 0 12px;}
.ah-pod .s{display:grid; justify-items:center; gap:6px; min-width:0;}
.ah-pod .av{font-size:28px; line-height:1;}
.ah-pod .nm{max-width:100%; font-size:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ah-pod .pf{font-size:16px; color:var(--success);}
.ah-pod .blk{width:100%; display:grid; place-items:center; font-family:'Press Start 2P',monospace; font-size:16px; color:#1a0a08; transform-origin:bottom; animation:ah-rise .8s cubic-bezier(.2,1.3,.4,1) both;}
.ah-pod .s1 .blk{height:96px; background:#F5C542; animation-delay:.3s;} .ah-pod .s2 .blk{height:70px; background:#cfd6dc; animation-delay:.15s;} .ah-pod .s3 .blk{height:52px; background:#d08a52;}
@keyframes ah-rise{from{transform:scaleY(0);}}
.ah-pod .crown{animation:ah-bob 1.6s ease-in-out infinite;}
@keyframes ah-bob{50%{transform:translateY(-4px);}}
.ah-lb{width:100%; border-collapse:collapse; font-size:18px;}
.ah-lb td{padding:5px 4px; border-top:1px solid var(--border);} .ah-lb td.n{text-align:right; color:var(--success); font-variant-numeric:tabular-nums;}

/* ---------- radar ---------- */
.ah-ov{position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:16px; background:rgba(8,3,2,.88);}
.ah-ov[hidden]{display:none !important;}
.ah-radar{width:min(340px, 86vw); display:grid; gap:14px; justify-items:center; text-align:center;}
.ah-scope{position:relative; overflow:hidden; width:220px; height:220px; max-width:70vw; max-height:70vw; border-radius:50%; border:2px solid var(--success);
  background:radial-gradient(circle, color-mix(in srgb, var(--success) 15%, transparent), transparent 70%), repeating-radial-gradient(circle, transparent 0 34px, color-mix(in srgb, var(--success) 25%, transparent) 35px 36px);}
.ah-scope::before{content:''; position:absolute; inset:0; background:conic-gradient(from 0deg, color-mix(in srgb, var(--success) 55%, transparent), transparent 25%); animation:ah-spin 1.4s linear infinite;}
@keyframes ah-spin{to{transform:rotate(360deg);}}
.ah-scope .dot{position:absolute; width:10px; height:10px; border-radius:50%; background:#F5C542; animation:ah-blink .7s steps(2) infinite;}
.ah-radar h3{font-family:'Press Start 2P',monospace; font-weight:400; font-size:14px; color:var(--success); margin:0;}
.ah-radar p{font-size:21px; color:var(--text-muted); margin:0;}
.ah-slot{height:34px; font-size:28px; color:#F5C542;}

@media (max-width:860px){
  .ah-main,.ah-lower{grid-template-columns:minmax(0, 1fr);}
  .ah-cab.stake-box{position:static;}
}
@media (max-width:520px){
  .ah-counters{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .ah-games{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px;}
  .gcard .gb{padding:6px;} .gcard .gn{font-size:16px;} .gcard .gm{font-size:14px;} .gcard .size{font-size:12px;}
  .ah-wallbar .field{flex:1 1 100%;}
}

/* ---------- 3D Arcade style ---------- */
:root[data-fx="3d"] .ah-marquee{border:0; border-radius:18px; box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent-amber) 70%, transparent), inset 0 0 40px color-mix(in srgb, var(--accent-amber) 22%, transparent),
  0 10px 0 var(--border), 0 11px 0 #000, 0 26px 40px rgba(0,0,0,.5);}
:root[data-fx="3d"] .ah-bulbs{border-radius:14px;}
:root[data-fx="3d"] .ah-title{text-shadow:1px 1px 0 var(--accent-amber), 2px 2px 0 var(--accent-amber), 3px 3px 0 color-mix(in srgb, var(--accent-amber) 70%, #000), 4px 4px 0 color-mix(in srgb, var(--accent-amber) 50%, #000), 5px 5px 0 color-mix(in srgb, var(--accent-amber) 35%, #000), 8px 12px 14px rgba(0,0,0,.6);}
:root[data-fx="3d"] .ah-ctr{border:0; border-radius:10px; background:color-mix(in srgb, var(--bg) 70%, #000); box-shadow:inset 0 3px 8px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.07);}
:root[data-fx="3d"] .ah-ghost{border:0; border-radius:8px; background:linear-gradient(180deg, color-mix(in srgb, var(--bg-panel-alt) 70%, #fff 12%), var(--bg-panel-alt)); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 0 #000, 0 8px 12px rgba(0,0,0,.4);}
:root[data-fx="3d"] .gcard{border-radius:14px; overflow:hidden; background:linear-gradient(180deg, var(--bg-panel-alt), var(--bg-panel));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 0 var(--border), 0 7px 0 #000, 0 16px 22px rgba(0,0,0,.45);
  transform:perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0)); transition:transform .18s ease-out, box-shadow .15s;}
:root[data-fx="3d"] .gcard:hover{--ty:-4px;}
:root[data-fx="3d"] .gcard.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 0 color-mix(in srgb, #F5C542 50%, #000), 0 7px 0 #000, 0 16px 22px rgba(0,0,0,.45), 0 0 22px color-mix(in srgb, #F5C542 30%, transparent);}
:root[data-fx="3d"] .ah-coin{border:0; border-radius:10px; background:linear-gradient(180deg, color-mix(in srgb, var(--bg-panel-alt) 70%, #fff 10%), var(--bg)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 5px 0 var(--border), 0 6px 0 #000, 0 10px 14px rgba(0,0,0,.4);}
:root[data-fx="3d"] .ah-coin.on{background:radial-gradient(circle at 35% 30%, color-mix(in srgb, #F5C542 55%, #fff), #F5C542 45%, color-mix(in srgb, #F5C542 60%, #000)); color:#1a0a08;
  box-shadow:inset 0 0 0 3px color-mix(in srgb, #F5C542 65%, #000), 0 5px 0 color-mix(in srgb, #F5C542 40%, #000), 0 6px 0 #000, 0 10px 14px rgba(0,0,0,.4);}
:root[data-fx="3d"] .ah-coin.on small{color:#3a2a08;}
:root[data-fx="3d"] .ah-coin:active{transform:translateY(4px); box-shadow:0 1px 0 #000;}
:root[data-fx="3d"] .ah-find{border-radius:14px; background:linear-gradient(180deg, color-mix(in srgb, var(--accent-amber) 70%, #fff) 0%, var(--accent-amber) 40%, color-mix(in srgb, var(--accent-amber) 80%, #000) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -4px 0 color-mix(in srgb, var(--accent-amber) 55%, #000), 0 9px 0 color-mix(in srgb, var(--accent-amber) 40%, #000), 0 10px 0 #000, 0 18px 26px rgba(0,0,0,.5), 0 0 30px color-mix(in srgb, var(--accent-amber) 35%, transparent);
  transform:translateY(-4px);}
:root[data-fx="3d"] .ah-find:active{transform:translateY(5px); box-shadow:inset 0 2px 6px rgba(0,0,0,.35), 0 1px 0 #000, 0 3px 6px rgba(0,0,0,.45);}
:root[data-fx="3d"] .ah-lm,:root[data-fx="3d"] .ah-podium{border:0; border-radius:12px; background:linear-gradient(180deg, var(--bg-panel-alt), var(--bg-panel));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 0 var(--border), 0 7px 0 #000, 0 14px 20px rgba(0,0,0,.45);}
:root[data-fx="3d"] .ah-pod .blk{border-radius:8px 8px 0 0; box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset -6px 0 0 rgba(0,0,0,.18), 0 10px 18px rgba(0,0,0,.5);}
:root[data-fx="3d"] .ah-fighters .avatar{border:0; border-radius:12px; box-shadow:inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 2px var(--border);}