/* Trading Class / Arena reskin. Local assets and system fonts only.
   This layer owns presentation; rules, copy and timing remain in the original files. */
:root {
  color-scheme: dark;
  --bg:#091b20; --panel:#102a30; --panel-raised:#19373c; --chart-bg:#0b2228;
  --text:#f7f3e8; --muted:#aac2c2; --border:#305057; --control-border:#66868b;
  --grid:#203c42; --accent:#a8f0d0; --discipline:#a8f0d0; --up:#58ddb2; --down:#ff9291;
  --warn:#f8cb76; --btn:#19373c; --on-action:#092921;
  --brand-fill:#baf5da; --brand-ink:#0b302b; --radius:16px;
  --shadow-card:0 12px 32px #00131618; --surface-glow:#baf5da0a;
  --font:"Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#f1f0e7; --panel:#fffdf5; --panel-raised:#e4ece3; --chart-bg:#fafaf2;
  --text:#112f32; --muted:#50666a; --border:#c3d1c8; --control-border:#66847d;
  --grid:#dce5db; --accent:#176452; --discipline:#176452; --up:#087352; --down:#b23b43;
  --warn:#86520b; --btn:#e4ece3; --on-action:#fffdf5;
  --brand-fill:#164f43; --brand-ink:#fffdf5;
}
body { letter-spacing:-.015em; }
button, input, select, a.btn { border-radius:10px; }
button, a.btn { transition:background-color 150ms, border-color 150ms, box-shadow 150ms; }
button { font-weight:750; }
button.primary, a.btn.primary { color:var(--brand-ink); background:var(--brand-fill); border-color:var(--brand-fill); box-shadow:0 3px 0 #0003; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
@media (hover:hover) { button:hover:not(:disabled), a.btn:hover { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent); } }
input[type=text], input[type=number], select { min-height:50px; border:1px solid var(--control-border); background:var(--bg); }
.card { border-color:var(--border); background:var(--panel); }
.topbar { min-height:68px; padding:12px 28px; background:var(--bg); border-bottom:1px solid var(--border); }
.topbar .brand { font-size:18px; letter-spacing:-.04em; font-weight:800; }
.academy-mark { width:34px; height:34px; color:var(--accent); flex:none; }
.langbtn, .sndbtn { min-width:44px; min-height:44px; border-color:var(--border); background:var(--panel); border-radius:10px; }
.topbar .pill:not(.warn) { border:0; border-left:1px solid var(--border); border-radius:0; padding-left:16px; }
.eyebrow { font-size:12px; font-weight:750; letter-spacing:.14em; line-height:1.5; text-transform:uppercase; color:var(--accent); }
:lang(zh-Hans) .eyebrow { letter-spacing:.08em; }
.status-dot { display:inline-block; height:8px; width:8px; margin-right:9px; border-radius:50%; background:currentColor; box-shadow:0 0 0 5px #a8f0d015; }
.num, .codebig, .count { font-variant-numeric:tabular-nums; }
.tbar, .tbar i { border-radius:4px; }
.badges span { border-radius:6px; padding:6px 10px; }

/* Teacher: a working desk, with a warm paper control sheet and a dark roster. */
.page-host { background:linear-gradient(120deg,#16433933,transparent 55%),var(--bg); }
.page-host main { width:100%; max-width:1380px; padding:34px 40px 48px; gap:28px; }
.console-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-bottom:22px; border-bottom:1px solid var(--border); }
.console-heading h1 { margin:0; font-size:clamp(24px,2.4vw,36px); line-height:1.15; letter-spacing:-.045em; font-weight:700; }
.page-host .setup { max-width:none; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(330px,1fr); gap:56px; align-items:center; }
.setup-story { padding:14px 0; position:relative; }
.setup-story h2 { font-size:clamp(48px,5vw,76px); line-height:.99; letter-spacing:-.06em; max-width:11ch; margin:20px 0; font-weight:750; }
:lang(zh-Hans) .setup-story h2 { max-width:8em; line-height:1.15; letter-spacing:-.025em; }
.setup-story p { max-width:40ch; font-size:17px; line-height:1.65; color:var(--muted); }
.academy-art { height:180px; margin:20px 0 12px; background:url('art/arena.svg') center / contain no-repeat; }
.academy-art > * { display:none; }
.lesson-pillars { display:flex; flex-wrap:wrap; gap:24px; border-top:1px solid var(--border); padding-top:20px; }
.lesson-pillars > span { display:grid; gap:8px; font-size:13px; color:var(--muted); }
.lesson-pillars b { color:var(--accent); font-size:12px; letter-spacing:.12em; }
/* Scoped paper palette: no change to the canvas or to user-selected chart theme. */
.setup-form, .host-controls, .room-card, .page-player .side, .page-player .join, .page-player #waitCard, .fx-v-card {
  --bg:#f5f3e9; --panel:#fffdf5; --panel-raised:#e6ede3;
  --text:#163337; --muted:#53696a; --border:#c5d3c9; --control-border:#718c83;
  --accent:#145c49; --discipline:#145c49; --up:#0b7253; --down:#b13847;
  --warn:#8b5205; --btn:#e6ede3; --on-action:#fffdf5;
  --brand-fill:#174f43; --brand-ink:#fffdf5;
  color:var(--text); color-scheme:light;
}
.setup-form { padding:32px; gap:20px; border-radius:20px; border:0; border-top:7px solid #a8f0d0; background:var(--panel); }
.setup-form h2 { margin:0; font-size:34px; line-height:1.15; letter-spacing:-.04em; }
.setup-form p { margin:0; font-size:15px; line-height:1.6; }
.setup-form label > span { font-size:14px; font-weight:700; }
.setup-form #timer { font-size:24px; font-weight:800; }
.setup-form #create { min-height:58px; margin-top:2px; }
.setup-footnote { font-size:13px; color:var(--muted); padding-top:16px; line-height:1.6; border-top:1px dashed var(--border); }
.page-host .grid2 { grid-template-columns:minmax(0,1fr) 310px; gap:22px; }
.page-host #live > .stack { gap:20px; }
.room-card { padding:22px 28px; background:#d8f3e1; border:0; border-radius:16px; }
.page-host .codebig { color:var(--text); font-size:60px; letter-spacing:.06em; margin-top:4px; }
.page-host #joinUrl { font-size:14px; color:var(--accent); }
.page-host #screenLink { border:1px solid var(--control-border); color:var(--text); border-radius:8px; padding:11px 16px; text-align:center; text-decoration:none; margin-top:8px; font-weight:700; }
.host-controls { padding:28px; gap:16px; border:0; background:var(--panel); }
.host-controls .phase { font-size:clamp(22px,2vw,30px); line-height:1.25; letter-spacing:-.035em; }
.host-controls .stat { font-size:16px; }
.host-controls .teach { background:#ece8d7; border-left:4px solid #b87817; padding:14px 16px; border-radius:0 8px 8px 0; line-height:1.6; margin:4px 0; }
.controls { gap:10px; }
.controls button { min-height:56px; }
.roster-card { padding:22px; background:#102a30; color:#f7f3e8; border-color:#305057; }
.roster-card .muted, .roster-card .off { color:#aac2c2; }
.page-host #pcount { background:#a8f0d0; color:#143e35; padding:4px 10px; border-radius:6px; font-weight:800; }
.page-host .prow { min-height:48px; border-color:#305057; }
.page-host .prow > span:first-child { overflow-wrap:anywhere; }
.page-host .prow button { min-height:36px; color:#d4e6df; background:transparent; border-color:#49666b; border-radius:7px; }

/* Player: chart + decision ticket. All original explanations remain in the ticket. */
.page-player .topbar { min-height:58px; padding:7px max(10px,env(safe-area-inset-right)) 7px max(10px,env(safe-area-inset-left)); padding-top:max(7px,env(safe-area-inset-top)); gap:8px; }
.page-player .topbar .academy-mark { width:24px; height:26px; }
.page-player .topbar .brand { font-size:14px; }
.page-player #topinfo { font-size:13px; }
.page-player .langbtn, .page-player .sndbtn { padding:0 9px; }
.page-player > .tbar { height:4px; border-radius:0; }
.page-player .join { width:calc(100% - 28px); max-width:424px; margin:28px auto; padding:26px; border-radius:20px; background:var(--panel); border:0; border-top:6px solid #a8f0d0; gap:14px; box-shadow:0 18px 60px #0002; }
.join-emblem, .wait-emblem { width:50px; height:50px; display:grid; place-items:center; border-radius:13px; background:var(--brand-fill); }
.join-emblem .academy-mark { color:#c6f7db; width:32px; height:32px; }
.page-player .join h1 { margin:0; font-size:34px; font-weight:800; line-height:1.05; letter-spacing:-.05em; }
.join-intro { margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.page-player .join label { font-size:14px; font-weight:700; }
.page-player #code { font-size:26px; font-weight:800; letter-spacing:.2em; }
.page-player #go { min-height:52px; }
.page-player .err { font-size:14px; min-height:0; }
.page-player .err:empty { display:none; }
.page-player .wait { width:100%; margin:5vh auto 24px; padding:0 20px; gap:16px; align-items:center; }
.wait-emblem { height:64px; width:64px; background:var(--panel-raised); border:1px solid var(--accent); }
.wait-emblem .academy-mark { width:38px; height:38px; }
.page-player .wait .big { font-size:34px; line-height:1.12; letter-spacing:-.04em; overflow-wrap:anywhere; }
.page-player #waitSub { max-width:38ch; font-size:16px; line-height:1.6; }
.page-player #waitCard { width:100%; text-align:left; padding:22px; border-radius:14px; background:var(--panel); gap:14px; }
.page-player .game { margin:10px; padding:0; gap:10px; grid-template-rows:clamp(236px,38dvh,346px) auto; }
.page-player .chartbox { border:1px solid var(--border); border-radius:12px; }
.page-player .side { border:0 !important; border-top:5px solid #a8f0d0 !important; border-radius:14px; padding:14px; gap:10px; background:var(--panel); }
.round-heading { border-bottom:1px dashed var(--border); padding-bottom:8px; font-size:13px; font-weight:750; }
.page-player .timer { background:var(--panel-raised); border-radius:5px; padding:3px 8px; font-size:13px; }
.page-player .timer:empty { display:none; }
.trend { --trend-color:var(--up); border:1px solid var(--border); border-left:3px solid var(--trend-color); background:var(--bg); }
.trend[data-b="-1"] { --trend-color:var(--down); border-color:var(--border); border-left-color:var(--down); background:var(--bg); }
.trend[data-b="0"] { --trend-color:var(--accent); border-color:var(--border); border-left-color:var(--accent); background:var(--bg); }
.trend-copy { flex:1; min-width:0; }
.trend-label { display:block; color:var(--muted); font-size:12px; font-weight:650; margin-bottom:3px; }
.page-player .trend { padding:10px; gap:8px; border-radius:7px; }
.page-player .trend b { font-size:21px; line-height:1.2; color:var(--trend-color); }
.page-player .trend span { margin-top:4px; font-size:14px; line-height:1.4; color:var(--text); }
.page-player .trend svg { order:2; color:var(--trend-color); width:44px; height:28px; }
.decision-heading { display:grid; gap:3px; }
.page-player .q { font-size:25px; font-weight:800; letter-spacing:-.04em; line-height:1.18; }
.page-player .decision-heading .eyebrow { font-size:12px; letter-spacing:.09em; }
.page-player .side > div:has(> #cal[hidden]) { display:none; }
.page-player .plan { background:var(--bg); border:1px solid var(--border); border-radius:8px; gap:0; padding:10px 0; font-size:12px; }
.page-player .plan > div { min-width:0; padding:0 9px; border-right:1px solid var(--border); }
.page-player .plan > div:last-child { border:0; }
.page-player .plan b { margin-top:5px; font-size:17px; letter-spacing:-.03em; }
.page-player #decide { gap:10px; }
.page-player .choices { gap:8px; }
.page-player .choices button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:54px; font-size:18px; font-weight:800; padding:8px 4px; border-radius:9px; box-shadow:0 3px 0 #12352c20; }
.page-player .choices svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.page-player button.buy { background:#bdeecf; color:#10503a; border-color:#6eab8b; }
.page-player button.sell { background:#fbd1ca; color:#85313d; border-color:#cf9a92; }
.page-player button.skip { background:#dde5e8; color:#24434a; border-color:#97adb3; } /* TX, 27 Sep: the same weight as Buy and Sell (a solid Skip looked like the main choice and could nudge students to skip) */
.page-player .choices button.chosen { outline:2px solid var(--text); outline-offset:2px; box-shadow:none; }
.page-player .riskbox { padding:12px; gap:8px; border:1px solid var(--border); border-radius:9px; background:var(--bg); }
.page-player .riskbox[data-over="true"] { border-color:var(--warn); }
.page-player #riskLabel { font-size:14px; font-weight:750; }
.page-player .riskbox .val { font-size:26px; line-height:1.1; }
.page-player #riskUsd, .page-player #riskLimit, .page-player #riskNote { font-size:14px; line-height:1.45; }
.page-player .presets { gap:6px; }
.page-player .presets button { flex:1; min-width:44px; min-height:44px; font-size:14px; padding:0 5px; border-radius:7px; }
.page-player #sent { font-size:14px; line-height:1.5; }
.page-player #sent:empty { display:none; }
.page-player .acct { padding:12px 0 0; border:0; border-top:1px dashed var(--border); box-shadow:none; background:transparent; border-radius:0; gap:8px; }
.page-player .acct > div { flex:1; min-width:0; }
.page-player .acct .muted { font-size:12px; line-height:1.3; }
.page-player .acct b { display:block; margin-top:5px; font-size:16px; overflow-wrap:anywhere; }
.page-player .acct > div:nth-child(2) b { color:var(--accent); }
.page-player .result { padding:16px; box-shadow:none; border-top:3px solid var(--accent); border-radius:10px; }
.page-player .final .bdesc { font-size:14px; }
.page-player .final .badges span { white-space:normal; }

/* Verdict: a paper scorecard; the decision remains the largest message. */
.fx-verdict { background:#061c20e8; }
.fx-v-card { padding:26px; background:var(--panel); border:0; border-top:7px solid #a8f0d0; border-radius:18px; gap:16px; box-shadow:0 24px 80px #0004; }
.fx-verdict.warn .fx-v-card, .fx-verdict.bad .fx-v-card { border-top-color:#f1c26e; }
.fx-v-icon { width:58px; height:58px; border-radius:14px; color:#0f5740; background:#c2ebd0; border:0; font-size:30px; }
.fx-verdict.warn .fx-v-icon, .fx-verdict.bad .fx-v-icon { color:#81510a; background:#f3dfb6; }
.fx-v-title { font-size:35px; font-weight:800; line-height:1.08; letter-spacing:-.045em; }
.fx-v-lines .reason { font-size:16px; line-height:1.6; }
.fx-v-lines .section-label { border-top:1px dashed var(--border); font-size:12px; letter-spacing:.1em; padding-top:16px; }
.fx-v-lines .big { font-size:24px; }
.fx-v-lines .soft { font-size:14px; line-height:1.6; }
.fx-v-lines .practice-note { border:0; border-left:3px solid var(--warn); border-radius:0 7px 7px 0; background:var(--bg); }
.fx-v-chips span { border-radius:6px; font-size:13px; }
.fx-v-tap { min-height:52px; background:var(--brand-fill); border-color:var(--brand-fill); color:var(--brand-ink); }

/* Projector: a wide broadcast canvas with a crisp decision rail. */
.page-projector .topbar { min-height:64px; padding:9px 24px; }
.page-projector .topbar .brand { font-size:22px; }
.page-projector .topbar .code { color:var(--accent); font-size:25px; }
.page-projector .eyebrow { font-size:15px; letter-spacing:.12em; }
.page-projector .lobby { background:radial-gradient(ellipse at 50% 42%,#24665855,transparent 62%); padding:2vh 4vw; gap:1.4vh; align-content:center; }
.lobby-heading { display:grid; justify-items:center; gap:8px; }
.lobby-emblem .academy-mark { width:48px; height:48px; }
.lobby-heading h1 { font-size:clamp(34px,3.5vw,62px); line-height:1.08; letter-spacing:-.04em; font-weight:750; margin:0 0 8px; }
.page-projector .lobby-code { min-width:38vw; background:#c7f1d9; color:#113e34; border:0; border-radius:18px; padding:18px 56px 22px; margin:8px 0; box-shadow:10px 10px 0 #050e1540; position:relative; }
.page-projector .lobby-code::before, .page-projector .lobby-code::after { content:''; position:absolute; width:24px; height:24px; border-radius:50%; background:var(--bg); top:50%; }
.page-projector .lobby-code::before { left:-12px; }.page-projector .lobby-code::after { right:-12px; }
.page-projector .lobby-code .muted, .page-projector .lobby-code .eyebrow { color:#316354; }
.page-projector .lobby .codebig { font-size:clamp(90px,11vw,186px); color:#103f33; font-weight:850; letter-spacing:.1em; text-indent:.1em; margin-top:4px; }
.page-projector .lobby .url { font-size:clamp(22px,2vw,36px); font-weight:650; color:var(--accent); }
.page-projector .nicks { gap:8px; max-height:17vh; max-width:90vw; }
.page-projector .nicks span { font-size:clamp(16px,1.3vw,24px); padding:6px 14px; border-radius:6px; background:var(--panel); border-color:var(--border); }
.page-projector .play { margin:12px; gap:12px; grid-template-columns:minmax(0,1fr) minmax(320px,32vw); }
.page-projector .chartbox { border:1px solid var(--border); border-radius:12px; }
.page-projector .side { border:1px solid var(--border); border-top:4px solid var(--accent); border-radius:12px; padding:clamp(16px,1.5vw,28px); gap:18px; background:var(--panel); overflow:hidden; }
.page-projector #roundOf { font-size:clamp(18px,1.25vw,24px); font-weight:700; padding-bottom:12px; border-bottom:1px dashed var(--border); }
.page-projector .side h2 { font-size:clamp(28px,2.2vw,44px); font-weight:750; letter-spacing:-.035em; line-height:1.2; }
.page-projector .trend { padding:16px; border-radius:9px; gap:14px; }
.page-projector .trend .trend-label { font-size:clamp(18px,1.15vw,22px); margin-bottom:5px; }
.page-projector .trend b { color:var(--trend-color); font-size:clamp(30px,2.2vw,44px); line-height:1.12; }
.page-projector .trend span { font-size:clamp(21px,1.4vw,28px); color:var(--text); line-height:1.35; margin-top:9px; }
.page-projector .trend svg { order:2; width:64px; color:var(--trend-color); }
.page-projector #pQuestion { padding:18px; border-radius:9px; background:#c7f1d9; color:#103f33; gap:14px; }
.page-projector #pQuestion .muted { color:#345e54; }
.page-projector #pQuestion .tbar { background:#9dc3ae; }
.page-projector #pQuestion .tbar i { background:#164f43; }
.page-projector .count { font-size:clamp(64px,5vw,104px); font-weight:750; letter-spacing:-.065em; }
.page-projector #answered { font-size:clamp(20px,1.3vw,26px); }
.page-projector .bar { font-size:clamp(22px,1.5vw,29px); grid-template-columns:4.5em 1fr 2em; }
.page-projector .bar .track { height:22px; border-radius:4px; }
.page-projector .bar .fill { border-radius:4px; }
.page-projector .bar.skip .fill { background:var(--accent); }
.page-projector #pResult { gap:18px; }
.page-projector #outcome { padding:18px; background:var(--bg); border:1px dashed var(--border); border-radius:9px; font-size:clamp(24px,1.8vw,34px); }
.page-projector .tally div { border-radius:7px; }
.page-projector .view { overflow:hidden; }

/* Boards: five real lanes, mint score tiles, and rosettes for teaching awards. */
.page-projector .lbwrap { padding:3vh 4vw; background:radial-gradient(ellipse at 100% 0,#20534355,transparent 65%); }
.page-projector .lbhead { margin-bottom:2vh; }
.page-projector .lbwrap h1 { font-size:clamp(34px,3.2vw,58px); letter-spacing:-.045em; line-height:1.1; font-weight:750; }
.page-projector .race { --rowh:clamp(54px,9.1vh,100px); --rowgap:clamp(7px,1.15vh,13px); }
.page-projector .race .rr { border-radius:10px; padding:0 18px 0 12px; grid-template-columns:calc(var(--rowh)*.7) minmax(0,1fr) auto auto; /* the score column fits its text: money (−$1,000.00) is wider than a Trader Score */ border:1px solid var(--border); background:var(--panel); font-size:calc(var(--rowh)*.39); }
.page-projector .race .pl { border-radius:8px; background:var(--bg); border-width:1px; }
.page-projector .race .sc { color:#193d31; background:#c9f0d9; border-radius:7px; padding:4px 12px; margin-left:10px; }
.page-projector .race .rr.r1 { border-left:6px solid #f0ce80; background:linear-gradient(90deg,#78602c35,transparent 60%),var(--panel); }
.page-projector .race .rr.r2 { border-left:6px solid #c0d4d8; background:linear-gradient(90deg,#8cacb21a,transparent 60%),var(--panel); }
.page-projector .race .rr.r3 { border-left:6px solid #e5ac89; background:linear-gradient(90deg,#9c6b501a,transparent 60%),var(--panel); }
.page-projector .race .rr.drop { border-color:var(--down); background:linear-gradient(90deg,#b53b4933,transparent 75%),var(--panel); }
.page-projector .race .rr.drop .sc { background:#ffd6cd; color:#84303c; }
.page-projector .race .rr.out .sc { color:#425f54; }
.page-projector .racemore { font-size:clamp(18px,1.4vw,26px); }
.page-projector .lbfoot { gap:14px; }
.page-projector .climber { display:inline-block; position:relative; border:1px solid var(--border); background:linear-gradient(100deg,#baf5da13,transparent),var(--panel); border-radius:8px; color:var(--accent); padding:10px 16px 10px 48px; margin-top:12px; font-size:clamp(20px,1.5vw,28px); }
.page-projector .climber::before { content:''; position:absolute; left:15px; top:50%; width:18px; height:22px; transform:translateY(-50%); background:currentColor; clip-path:polygon(50% 0,65% 12%,85% 8%,88% 30%,100% 45%,88% 63%,87% 100%,50% 80%,13% 100%,12% 63%,0 45%,12% 30%,15% 8%,35% 12%); }
.page-projector .climber:empty { display:none; }
.page-projector .note { font-size:clamp(18px,1.2vw,24px); margin-top:12px; line-height:1.45; }
.page-projector .lb { border-collapse:separate; border-spacing:0 6px; }
.page-projector .lb th { font-size:clamp(18px,1.2vw,24px); border:0; font-weight:650; }
.page-projector .lb td { background:var(--panel); font-size:clamp(20px,1.55vw,30px); padding:10px 14px; border-color:var(--border); }
.page-projector .lb td:first-child { border-radius:7px 0 0 7px; color:var(--accent); }
.page-projector .lb td:last-child { border-radius:0 7px 7px 0; }
.page-projector .lbwrap.compact { padding:2vh 3vw; }
.page-projector .lbwrap.compact h1 { font-size:clamp(28px,2.4vw,44px); }
.page-projector .lbgrid .it { border-radius:5px; }
.page-projector .lbwrap.compact .climber { padding:5px 12px 5px 36px; font-size:clamp(16px,1.15vw,22px); }
.page-projector .lbwrap.compact .climber::before { left:10px; width:15px; height:19px; }

/* The podium retains its original reveal sequence, including shared places. */
.page-projector .pod { padding:2.5vh 4vw; background:radial-gradient(ellipse at 50% 66%,#245d4c77,transparent 65%); }
.page-projector .pod h1 { font-size:clamp(34px,3.2vw,58px); font-weight:750; line-height:1.1; letter-spacing:-.045em; margin:6px 0 16px; }
.page-projector .stage { height:51vh; gap:18px; border-bottom:1px solid var(--border); }
.page-projector .step .who { font-size:38px; line-height:1.2; font-weight:750; letter-spacing:-.025em; padding:0 8px; }
.page-projector .step .meta { font-size:clamp(18px,1.4vw,26px); margin:8px 0 14px; }
.page-projector .step .block { border-radius:12px 12px 0 0; border:1px solid #ffffff33; border-bottom:0; padding-top:20px; position:relative; font-size:clamp(54px,5vw,96px); line-height:1.1; font-weight:800; }
.page-projector .step .block::after { content:''; position:absolute; inset:10px 10px auto; height:1px; background:currentColor; opacity:.3; }
.page-projector .step.p1 .block { background:linear-gradient(145deg,#efd9a2,#ba9950); color:#3c321c; }
.page-projector .step.p2 .block { background:linear-gradient(145deg,#d6e4df,#88aaa9); color:#1c4144; }
.page-projector .step.p3 .block { background:linear-gradient(145deg,#edc4a9,#bc8163); color:#4c3024; }
.page-projector .luck { margin-top:1.5vh; font-size:clamp(18px,1.4vw,26px); line-height:1.4; padding:12px 16px; border:1px dashed var(--border); border-radius:8px; background:var(--panel); }
.page-projector .luck:empty { display:none; }

/* Existing news cartoons and exact headlines, in a new broadcast frame. */
.ch-brk { background:#b63343; letter-spacing:.1em; }
.ch-brk i { animation:none; }
.ch-strip { background:#f7f2e8; color:#163337; border:0; border-left:5px solid #cb4756; border-radius:8px; box-shadow:0 10px 30px #0005; }
.ch-strip span { color:#526466; }
.ch-layer.big .ch-strip { padding:12px 18px; }
.ch-says { border:2px solid #183b37; box-shadow:4px 4px 0 #061c2033; }
.page-entry main { max-width:440px; padding:30px; margin:10vh auto; border:1px solid var(--border); border-top:5px solid var(--accent); border-radius:16px; background:var(--panel); gap:20px; }
.page-entry main > .academy-mark { width:56px; height:56px; }
.page-entry h1 { font-size:40px; line-height:1.1; letter-spacing:-.04em; }
.page-entry p { line-height:1.6; margin:0; }

@media (min-width:760px), (orientation:landscape) and (min-width:600px) {
  .page-player .game { grid-template-columns:minmax(0,1fr) 380px; grid-template-rows:minmax(0,1fr); margin:12px; gap:12px; }
  .page-player .side { padding:18px; }
}
@media (max-width:860px) {
  .page-host main { padding:24px 20px; }.console-heading { align-items:start; flex-direction:column; gap:8px; }
  .page-host .setup { grid-template-columns:1fr; gap:24px; }.setup-story h2 { max-width:15ch; }
  .academy-art { height:130px; }.page-host .grid2 { grid-template-columns:1fr; }
}
@media (max-width:420px) {
  .page-player .topbar .brand { font-size:13px; }.page-player #topinfo { font-size:12px; }
  .page-player .game { margin:8px; gap:8px; }.page-player .side { padding:12px; }
  .fx-v-card { padding:22px; }.fx-v-title { font-size:31px; }
}
@media (max-width:350px) {
  .page-player .topbar .academy-mark { display:none; }.page-player .topbar .brand { font-size:12px; }
  .page-player .topbar { gap:6px; }.page-player .langbtn, .page-player .sndbtn { padding:0 7px; }
  .page-player .join { padding:20px; margin:16px auto; gap:12px; }
  .page-player .join h1 { font-size:30px; }.page-player .join input { min-height:46px; }
  .page-player .plan > div { padding:0 6px; }.page-player .plan b { font-size:15px; }
  .page-player .acct b { font-size:14px; }.page-player .choices button { font-size:16px; }
}
@media (max-height:700px) and (max-width:599px) {
  .page-player .join { margin-top:14px; gap:10px; padding:20px; }
  .join-emblem { width:36px; height:36px; }.join-emblem .academy-mark { width:25px; height:25px; }
  .page-player .join h1 { font-size:30px; }.page-player .join input { min-height:46px; }
}
@media (max-height:850px) {
  .page-projector .topbar { min-height:60px; padding-block:7px; }
  .page-projector .lobby-heading .lobby-emblem { display:none; }
  .page-projector .lobby-heading h1 { font-size:38px; }
  .page-projector .lobby-code { padding:12px 42px 16px; }.page-projector .lobby .codebig { font-size:104px; }
  .page-projector .lobby { gap:1vh; }
  .page-projector .lbwrap { padding:18px 4vw; }
  .page-projector .lbwrap .lbhead h1 { font-size:36px; margin-top:4px; }
  .page-projector .race { --rowh:8.4vh; --rowgap:1vh; }
  .page-projector .lbwrap .lbfoot .climber { font-size:19px; margin-top:8px; padding:8px 12px 8px 40px; }
  .page-projector .lbwrap .note { display:none; }
  .page-projector .pod .stage { height:45vh; }
  .page-projector .pod h1 { font-size:36px; margin:4px 0 12px; }
  .page-projector .pod .luck { font-size:19px; padding:10px 14px; }
  .page-projector .pod .step .block { padding-top:16px; font-size:56px; }
  .page-projector .pod .step .meta { font-size:19px; margin:6px 0 10px; }
}
@media (prefers-reduced-motion:reduce) {
  button, a.btn, .race .rr, .pod .luck, .bar .fill { transition:none !important; }
}
/* Keep the answer group directly under the question. Its original hidden state
   also controls the relocated risk panel; teaching context stays visible. */
.page-player #decide { order:3; }
.page-player .side:has(#decide[hidden]) #riskbox { display:none; }
.page-player .round-heading { order:0; }
.page-player .decision-heading { order:1; }
.page-player .calwrap { order:2; } /* a class, not :has(), so older phone browsers keep the order */
.page-player .choices { order:3; }
.page-player #trend { order:4; }
.page-player #plan { order:5; }
.page-player #riskbox { order:6; }
.page-player #sent { order:7; }
.page-player #result { order:8; }
.page-player #acct { order:9; }
/* A clear score hierarchy without adding or changing a single label. */
.page-player #waitCard > .row:first-of-type { background:#d8f0df; margin:-4px -4px 4px; padding:14px; border-radius:8px; align-items:center; }
.page-player #waitCard > .row:first-of-type b { font-size:40px; color:var(--accent); line-height:1; }
.page-player #waitCard > .row:not(:first-of-type) { padding-bottom:8px; border-bottom:1px solid var(--border); gap:14px; }
.page-player #waitCard > .row span { min-width:0; }
.page-player #waitCard > .row b { flex:none; font-size:18px; }
@media (max-height:700px) and (max-width:599px) {
  .page-player .game { grid-template-rows:clamp(150px,28dvh,196px) auto; }
  /* the short chart needs a slimmer headline strip, or it hides the news candle (every word kept) */
  .page-player .ch-strip { padding:5px 10px; gap:1px; }
  .page-player .ch-strip b { font-size:13px; line-height:1.2; }
  .page-player .ch-strip span { font-size:11px; line-height:1.2; }
  .page-player .side { gap:8px; padding:10px; }
  .page-player .decision-heading { gap:2px; }
  .page-player .q { font-size:23px; }
}
/* ---- Integration fixes (Claude, 27 Sep, from the independent screen review of the Arena reskin) ---- */
/* a podium name too wide for its step wraps at its space and keeps its size */
.page-projector .step .who span { white-space:normal; }
/* the climber line wraps instead of being cut */
.page-projector .lbfoot { flex-wrap:wrap; }
.page-projector .lbfoot .climber { white-space:normal; }
/* the whole class: room for the rosette icon (screen.html's compact padding was winning) */
.page-projector .lbwrap.compact .lbfoot .climber { padding:5px 12px 5px 36px; }
/* 100 names in the lobby: whole rows of chips only */
.page-projector .nicks { --chip:calc(clamp(16px,1.3vw,24px)*1.45 + 14px); max-height:calc(3*var(--chip) + 16px); }
@media (max-height:850px) and (min-aspect-ratio:16/10) { .page-projector .nicks { max-height:calc(2*var(--chip) + 8px); } }
/* the class split: Skip in grey, so Buy's green stands alone from the back of the room */
.page-projector .bar.skip .fill { background:var(--muted); }
/* a gambler's Trader Score keeps its big tile (the 🎲 line comes first) */
.page-player #waitCard > .fb + .row { background:#d8f0df; margin:-4px -4px 4px; padding:14px; border-radius:8px; align-items:center; border-bottom:0; }
.page-player #waitCard > .fb + .row b { font-size:40px; color:var(--accent); line-height:1; }
.langbtn { white-space:nowrap; }