/* All-Star Arena: the game-day theme. Link it AFTER /kids/school/lib/ui.css; it restyles the shared shell (top bar,
   buttons, sheets, toasts) for pages whose <body> has class "arena" (arena.js adds it), and adds arena pieces
   (scoreboard, clipboard panel, results). Questions sit on a light "clipboard" panel (.clip) so every shared widget
   keeps its tested, high-contrast look. Fonts are the device's own (no downloads). */
body.arena {
  --a-bg: #0a0f24; --a-panel: #141a3a; --a-panel2: #1d2550; --a-line: #2f3b78; --a-text: #f4f7ff; --a-muted: #b4bee4;
  --a-orange: #ff7a1a; --a-lime: #b6ff3b; --a-cyan: #29e0ff; --a-pink: #ff3d8b; --a-gold: #ffcc33; --a-purple: #b45cff; --a-ink: #0d1226;
  --a-head: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  color-scheme: dark;
  color: var(--a-text);
  background: var(--a-bg) radial-gradient(ellipse 120% 60% at 50% -10%, #24306a 0%, #121a40 45%, #0a0f24 75%) fixed;
}
body.arena ::selection { background: var(--a-orange); color: var(--a-ink); }
body.arena :focus-visible { outline: 4px solid var(--a-cyan); outline-offset: 2px; }
body.arena .muted { color: var(--a-muted); }
.ahead { font-family: var(--a-head); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .02em; }

/* ---------- top bar ---------- */
.sbar.arena { background: rgba(10,15,36,.94); border-bottom: 3px solid var(--a-orange); box-shadow: 0 4px 18px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sbar.arena .back { background: var(--a-panel2); border-color: var(--a-line); color: var(--a-text); }
.sbar.arena h1 { color: #fff; text-shadow: 0 0 12px rgba(255,122,26,.55); font-family: var(--a-head); font-style: italic; text-transform: uppercase; letter-spacing: .02em; }
.sbar.arena .pill { background: var(--a-panel2); color: var(--a-text); box-shadow: inset 0 0 0 2px var(--a-line); }
.sbar.arena .pill.grade { background: #0f3550; color: var(--a-cyan); box-shadow: inset 0 0 0 2px #1d6a90; }
.sbar.arena .pill.grade.try { background: #4a2a08; color: var(--a-gold); box-shadow: inset 0 0 0 2px #a06a10; }
.sbar.arena .ibtn { background: var(--a-panel2); border-color: var(--a-line); color: var(--a-text); }
.sbar.arena .ibtn svg { filter: drop-shadow(0 0 0 #fff); }

/* ---------- buttons ---------- */
body.arena .rbtn { background: var(--a-lime); color: var(--a-ink); border-color: var(--a-ink); text-shadow: none; box-shadow: 0 4px 0 #000, 0 0 16px rgba(182,255,59,.25); }
body.arena .rbtn:active { box-shadow: 0 1px 0 #000; }
body.arena .rbtn.alt { background: var(--a-panel2); color: var(--a-text); border-color: var(--a-line); box-shadow: 0 4px 0 #000; }
body.arena .rbtn.gold { background: var(--a-gold); color: var(--a-ink); box-shadow: 0 4px 0 #000, 0 0 16px rgba(255,204,51,.3); }
body.arena .rbtn.blue { background: var(--a-cyan); color: var(--a-ink); }
body.arena .rbtn.red { background: #ff5a4a; color: var(--a-ink); }
body.arena .rbtn.grape { background: var(--a-purple); color: #fff; }
body.arena .rbtn.orange { background: var(--a-orange); color: var(--a-ink); box-shadow: 0 4px 0 #000, 0 0 16px rgba(255,122,26,.35); }
body.arena .rbtn:disabled { box-shadow: 0 4px 0 #000; }
body.arena .chip { background: var(--a-panel2); color: var(--a-text); }

/* ---------- sheets, toasts, guide ---------- */
body.arena .ov { background: rgba(4,6,20,.72); }
body.arena .ovcard { background: var(--a-panel); color: var(--a-text); border-color: var(--a-orange); box-shadow: 0 0 0 2px #000, 0 0 40px rgba(255,122,26,.25), 0 14px 40px rgba(0,0,0,.6); }
body.arena .ovcard h2 { color: var(--a-gold); font-family: var(--a-head); font-style: italic; text-transform: uppercase; letter-spacing: .02em; }
body.arena .ovx { background: var(--a-panel2); color: var(--a-text); border-color: var(--a-line); box-shadow: 0 3px 0 #000; }
body.arena .opt { border-bottom-color: var(--a-line); }
body.arena .opt small { color: var(--a-muted); }
body.arena .toast { background: rgba(20,26,58,.96); border: 2px solid var(--a-cyan); }
body.arena .toast.good { background: rgba(16,70,30,.96); border-color: var(--a-lime); }
body.arena .guide .bubble { background: #fff; color: var(--a-ink); border-color: var(--a-orange); box-shadow: 0 4px 0 #b84a00; }
body.arena .guide .bubble b { color: #c84a00; }
body.arena .say { background: #e8f6ff; border-color: #9fd8ff; }

/* ---------- the clipboard: questions sit on a light panel ---------- */
.clip { position: relative; color: #2b2240; background: #f6f8ff; border: 3px solid var(--a-ink); border-radius: 24px; padding: 14px; box-shadow: 0 0 0 3px rgba(41,224,255,.55), 0 10px 30px rgba(0,0,0,.45); }
.clip::before { content: ""; position: absolute; left: 50%; top: -9px; width: 90px; height: 14px; margin-left: -45px; border-radius: 6px; background: #9aa4b8; border: 3px solid var(--a-ink); }
.clip .muted { color: #5e5574; }

/* ---------- scoreboard pieces ---------- */
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 18px; background: #05081a; border: 3px solid #2a3360; box-shadow: inset 0 0 22px rgba(41,224,255,.12), 0 6px 0 #000; }
.sb-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sb-team.away { flex-direction: row-reverse; text-align: right; }
.sb-team .crest { flex: none; width: 44px; height: 44px; }
.sb-team .nm { min-width: 0; font: 900 14px/1.1 var(--a-head); font-style: italic; text-transform: uppercase; color: var(--a-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-team .pts { font: 900 34px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--a-gold); text-shadow: 0 0 12px rgba(255,204,51,.6); font-variant-numeric: tabular-nums; }
.sb-mid { display: grid; justify-items: center; gap: 2px; font: 900 13px/1.1 var(--a-head); text-transform: uppercase; color: var(--a-cyan); text-align: center; }
.sb-mid .clock { font: 900 22px/1 ui-monospace, "SF Mono", Menlo, monospace; color: #ff5a4a; text-shadow: 0 0 10px rgba(255,90,74,.6); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .sb-team .crest { width: 36px; height: 36px; } .sb-team .pts { font-size: 28px; } .sb-team .nm { font-size: 12px; } }
.combo-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; background: linear-gradient(90deg, #ff3d1a, #ff9a1a); color: #fff; font: 900 16px/1.2 var(--a-head); font-style: italic; text-transform: uppercase; box-shadow: 0 0 16px rgba(255,90,26,.6); }
.combo-badge[hidden] { display: none; }
.combo-badge.pop { animation: cpop .35s cubic-bezier(.2,1.8,.4,1); }
@keyframes cpop { from { transform: scale(1.5); } }

/* ---------- difficulty ladder ---------- */
.ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; border-radius: 18px; background: var(--a-panel); border: 2px solid var(--a-line); }
.lad-grades { display: flex; gap: 4px; }
.lad-step { display: grid; place-items: center; min-width: 44px; height: 36px; border-radius: 10px; background: #0a0f24; color: var(--a-muted); font: 900 15px/1 var(--a-head); border: 2px solid var(--a-line); }
.lad-step.done { color: var(--a-lime); border-color: #3a6a10; }
.lad-step.on { background: var(--a-cyan); color: var(--a-ink); border-color: var(--a-cyan); box-shadow: 0 0 12px rgba(41,224,255,.5); }
.lad-lv { flex: 1; min-width: 150px; font: 800 16px/1.3 var(--font); }
.lad-bar { display: flex; gap: 4px; margin-top: 4px; }
.lad-bar i { flex: 1; height: 8px; border-radius: 4px; background: #26304f; }
.lad-bar i.on { background: var(--a-lime); box-shadow: 0 0 8px rgba(182,255,59,.5); }

/* ---------- team chip ---------- */
.teamchip { display: inline-flex; align-items: center; gap: 6px; font: 900 16px/1.1 var(--a-head); font-style: italic; text-transform: uppercase; }
.teamchip .tc-crest { width: 34px; height: 34px; flex: none; }

/* ---------- trophy popup ---------- */
.trophy-pop { position: fixed; left: 50%; top: calc(var(--bar-h) + 14px); z-index: 75; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 20px; background: #141a3a; color: #fff; border: 3px solid var(--a-gold, #ffcc33); box-shadow: 0 0 30px rgba(255,204,51,.45), 0 10px 30px rgba(0,0,0,.5); animation: tpin .4s cubic-bezier(.2,1.6,.4,1); transition: opacity .5s, transform .5s; max-width: 92vw; }
.trophy-pop.out { opacity: 0; transform: translateX(-50%) translateY(-20px); }
.trophy-pop .tp-art { width: 58px; height: 58px; flex: none; }
.trophy-pop small { display: block; font: 800 13px/1.2 var(--font); color: #ffcc33; text-transform: uppercase; }
.trophy-pop b { display: block; font: 900 20px/1.15 var(--a-head, sans-serif); font-style: italic; text-transform: uppercase; }
.trophy-pop span { font: 900 14px/1 var(--font); color: #b6ff3b; }
@keyframes tpin { from { transform: translateX(-50%) scale(.5); opacity: 0; } }

/* ---------- results ---------- */
.arena-sheet.ovcard { width: min(600px, 100%); }
.res-arena { display: grid; gap: 10px; }
.res-banner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; border-radius: 18px; background: #05081a; border: 2px solid var(--a-line); }
.res-banner.win { border-color: var(--a-lime); box-shadow: 0 0 24px rgba(182,255,59,.35); }
.res-banner .res-crest { width: 58px; height: 58px; flex: none; }
.res-banner small { display: block; font: 800 14px/1.2 var(--font); color: var(--a-muted); }
.res-banner b { display: block; font: 900 clamp(30px, 8vw, 44px)/1 var(--a-head); font-style: italic; text-transform: uppercase; color: #fff; }
.res-banner.win b { color: var(--a-lime); text-shadow: 0 0 18px rgba(182,255,59,.6); }
body.arena .res-stars { color: #2a3360; margin: 0; }
body.arena .res-lines { margin: 0; color: var(--a-text); }
.res-pb { padding: 8px 12px; border-radius: 14px; background: linear-gradient(90deg, #ffcc33, #ff9a1a); color: var(--a-ink); font: 900 19px/1.2 var(--a-head); font-style: italic; text-transform: uppercase; }
.res-pb span { font: 800 14px/1 var(--font); text-transform: none; font-style: normal; }
.res-pb.soft { background: var(--a-panel2); color: var(--a-text); font: 800 16px/1.3 var(--font); text-transform: none; font-style: normal; }
.res-pb.ghost { background: #2a1f5a; color: #e2d8ff; }
.res-xp { padding: 10px 12px; border-radius: 16px; background: #0d1330; border: 2px solid var(--a-line); text-align: left; }
.res-xp-top { display: flex; align-items: center; gap: 10px; }
.res-xp-top .rk { width: 48px; height: 48px; flex: none; }
.res-xp-top b { display: block; font: 900 26px/1 var(--a-head); font-style: italic; color: var(--a-lime); }
.res-xp-top small { font: 800 15px/1.2 var(--font); color: var(--a-muted); }
.xpbar { height: 14px; margin: 8px 0; border-radius: 999px; background: #26304f; overflow: hidden; }
.xpbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--a-cyan), var(--a-lime)); box-shadow: 0 0 12px rgba(182,255,59,.6); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.xp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font: 700 15px/1.3 var(--font); color: var(--a-muted); }
.xp-list li { display: flex; justify-content: space-between; gap: 10px; }
.xp-list b { color: var(--a-lime); }
body.arena .res-new { background: #1a1f45; border-color: var(--a-gold); }
body.arena .res-new b { color: var(--a-gold); }
body.arena .res-new small { color: var(--a-muted); }
.res-season { font: 800 16px/1.35 var(--font); color: var(--a-text); }
.res-season .up { color: var(--a-lime); }
.res-sk-h { margin: 4px 0 0; font: 800 15px/1.2 var(--font); color: var(--a-muted); }
body.arena .res-skills .chip { background: #1d2a5c; color: #dfe6ff; }
/* short landscape screens (a Fire tablet in Silk, a phone sideways): question pictures shrink so the answers fit on screen */
@media (orientation: landscape) and (max-height: 640px) { body.arena .q .q-pic svg, body.arena .q .q-pic img { max-height: 30vh !important; width: auto !important; max-width: 100% !important; } }