:root {
  color-scheme: dark;
  --background: #10172a;
  --panel: #172238;
  --muted: #99a8bf;
  --text: #f2f5fc;
  --gold: #f3bd55;
  --teal: #39d7c1;
  --line: #2a374e;
  font-family: "DM Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; background: var(--background); color: var(--text); isolation: isolate; }
.christmas-snow { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }
.hex-background { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.background-gold { fill: var(--team-gold, var(--gold)); fill-opacity: .22; }
.background-teal { fill: var(--team-teal, var(--teal)); fill-opacity: .22; }
.display-viewport { position: fixed; inset: 0; overflow: clip; }
.display-content { position: absolute; top: 0; left: 50%; width: 100%; min-width: 1000px; display: flow-root; transform: translateX(-50%) scale(var(--display-scale, 1)); transform-origin: top center; }
button, select, input { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
button, a, select, [role="button"] { outline-offset: 5px; }
:focus-visible { outline: 3px solid var(--teal); }
button { color: inherit; }
a { color: var(--teal); }
.ambient { position: fixed; border-radius: 50%; pointer-events: none; z-index: -1; filter: blur(100px); opacity: .12; }
.ambient-one { width: 440px; height: 440px; background: #355a9d; top: 0; right: 0; }
.ambient-two { width: 350px; height: 350px; background: #159e92; top: 600px; left: -250px; }
.site-header { max-width: 1280px; margin: auto; padding: 30px 44px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ffffff0d; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); font-family: "Space Grotesk", sans-serif; font-size: 19px; font-weight: 700; letter-spacing: 1px; }
.brand-icon { display: grid; place-items: center; width: 35px; height: 39px; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background: var(--gold); color: #172238; margin-right: 12px; font-size: 24px; }
.brand-hex-o { width: 18px; height: 18px; margin: 0 2px; color: var(--gold); animation: brand-pulse 3.2s ease-in-out infinite; }
.brand-hex-o polygon { fill: none; stroke: currentColor; stroke-width: 4; stroke-linejoin: round; }
@keyframes brand-pulse {
  0%, 100% { color: var(--gold); transform: scale(1); }
  50% { color: var(--teal); transform: scale(1.12); }
}
.brand-dot { color: var(--gold); }
.header-note, .site-footer { color: var(--muted); font-size: 10px; letter-spacing: 2px; }
.header-controls { display: flex; align-items: center; gap: 18px; }
#sound-status, #music-status { max-width: 220px; color: var(--gold); font-size: 12px; }
#sound-status:empty, #music-status:empty { display: none; }
main { max-width: 1152px; padding: 0 32px; margin: auto; }
.welcome-screen { max-width: 1120px; margin: 0 auto; padding: 22px 0 30px; }
.welcome-panel { padding: clamp(24px, 4vw, 46px); border: 1px solid #3c4b65; border-radius: 20px; background: linear-gradient(145deg, #1a2941, #131e32); box-shadow: 0 22px 70px #0004; }
.welcome-panel > .eyebrow { margin: 0 0 12px; }
.welcome-panel h1 { margin: 0; font-size: clamp(36px, 5vw, 58px); line-height: 1.04; letter-spacing: -2px; }
.welcome-panel h1 .welcome-gold { color: var(--gold); }
.welcome-panel h1 .welcome-teal { color: var(--teal); }
.welcome-lead { max-width: 780px; margin: 16px 0 23px; color: #d7e0ef; font-size: 17px; line-height: 1.55; }
.welcome-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.welcome-stats > div { display: grid; gap: 3px; padding: 13px 15px; border: 1px solid #ffffff1a; border-radius: 10px; background: #101a2d; }
.welcome-stats strong { color: var(--teal); font: 700 22px "Space Grotesk", sans-serif; }
.welcome-stats span { color: var(--muted); font-size: 12px; }
.welcome-count-statement { grid-column: 1 / -1; margin: 0; padding: 13px 15px; border: 1px solid #ffffff1a; border-radius: 10px; background: #101a2d; color: var(--text); font-size: 16px; line-height: 1.4; }
.welcome-count-statement strong { font-family: "Space Grotesk", sans-serif; }
.welcome-count-statement .welcome-gold,
.welcome-count-statement .welcome-teal { font: 700 16px "Space Grotesk", sans-serif; }
.welcome-count-statement .welcome-gold { color: var(--gold); }
.welcome-count-statement .welcome-teal { color: var(--teal); }
.welcome-count-secondary span { font: 700 16px "Space Grotesk", sans-serif; }
.welcome-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.welcome-features article { padding: 15px 16px; border-left: 3px solid var(--teal); border-radius: 0 9px 9px 0; background: #ffffff08; }
.welcome-features h2 { margin: 0 0 6px; font-size: 16px; }
.welcome-features p { margin: 0; color: #c1ccdc; font-size: 12px; line-height: 1.55; }
.welcome-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; }
.welcome-remember { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; cursor: pointer; }
.welcome-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); flex: 0 0 auto; }
.welcome-actions .primary-button { min-width: 220px; font-size: 16px; }
.welcome-status { margin: 8px 0 0; color: #ffce77; font-size: 12px; }
.welcome-status:empty { display: none; }
.welcome-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
html:has(body.teacher-guide), body.teacher-guide { height: auto; overflow: auto; }
.teacher-guide main { max-width: 1050px; }
.teacher-guide .site-header { gap: 20px; }
.guide-play { display: inline-flex; align-items: center; justify-content: center; gap: 20px; text-decoration: none; }
.guide-hero { padding: 48px 0 32px; }
.guide-hero h1 { margin: 12px 0 24px; font-size: clamp(34px, 5vw, 58px); line-height: 1.1; letter-spacing: -1.5px; }
.guide-hero h1 span { color: var(--gold); }
.teacher-guide p, .guide-steps { line-height: 1.75; color: #d7e0ef; }
.guide-nav { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; }
.guide-section { padding: 30px 0; border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.guide-section h2, .guide-finish h2 { font-size: 28px; }
.guide-section h3 { margin-top: 26px; font-size: 19px; }
.guide-steps { padding-left: 24px; }
.guide-steps li { padding: 6px 0 6px 8px; }
.guide-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.guide-cards article { background: var(--panel); padding: 20px; border: 1px solid var(--line); border-radius: 12px; }
.guide-cards h3 { margin-top: 0; color: var(--teal); }
.guide-subjects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; padding-left: 20px; line-height: 1.5; }
.guide-caution { padding: 18px 22px; background: var(--panel); border-left: 3px solid var(--gold); }
.guide-finish { padding: 28px; margin: 16px 0 40px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.guide-footer { max-width: 1050px; margin: auto; padding: 0 32px 32px; font-size: 13px; color: var(--muted); }
@media (max-width: 700px) {
  .teacher-guide .site-header { padding: 20px; flex-wrap: wrap; }
  .teacher-guide main { padding: 0 20px; }
  .guide-cards { grid-template-columns: 1fr; }
  .guide-subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.intro { text-align: center; margin: 49px auto 36px; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--teal); }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 12px #39d7c150; }
h1, h2, h3, .score { font-family: "Space Grotesk", system-ui, sans-serif; }
.intro h1 { font-size: clamp(36px, 4.5vw, 56px); letter-spacing: -2px; line-height: 1.1; margin: 20px 0 17px; font-weight: 600; }
.intro h1 span { color: var(--gold); }
.intro-copy { color: var(--muted); font-size: 14px; line-height: 1.7; max-width: 470px; margin: auto; }
.setup-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }
.setup-panel { background: linear-gradient(140deg, #1a263b, #152035); border: 1px solid var(--line); padding: 30px; border-radius: 18px; }
.section-heading { display: flex; gap: 11px; align-items: center; margin-bottom: 15px; }
.section-heading h2 { font-size: 15px; margin: 0; font-weight: 500; }
.step-number { color: var(--muted); font-size: 10px; border: 1px solid #3b465b; border-radius: 50%; width: 23px; height: 23px; display: grid; place-items: center; }
.level-picker { display: flex; background: #101a2d; border: 1px solid var(--line); border-radius: 10px; padding: 5px; gap: 5px; }
.level-option { flex: 1; background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 9px 5px; font-size: 13px; font-weight: 700; color: var(--muted); transition: background .15s; }
.level-option.active { background: #2b3a51; color: var(--text); border-color: #44516a; box-shadow: 0 2px 6px #0002; }
.level-heading { margin-top: 27px; }
.board-label { display: block; font-size: 11px; color: var(--muted); margin: 21px 0 9px; }
select { width: 100%; padding: 11px; background: #111d30; color: var(--text); border: 1px solid #35435b; border-radius: 8px; font-size: 12px; }
input { width: 100%; padding: 12px; background: #111d30; color: var(--text); border: 1px solid #536781; border-radius: 8px; font-size: 16px; }
.answer-help { color: var(--muted); font-size: 11px; line-height: 1.5; }
.answer-error { color: var(--gold); font-size: 12px; }
.answer-error:empty { display: none; }
#answer-form > .decision-buttons { margin-top: 0; }
.answer-result { padding: 12px; border: 1px solid var(--gold); border-radius: 8px; color: var(--gold); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.answer-result.accepted { border-color: var(--teal); color: var(--teal); }
.availability-note { color: var(--gold); font-size: 11px; line-height: 1.5; margin: 9px 0; }
.availability-note:empty { display: none; }
.board-size-picker { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.board-size-picker legend { color: var(--muted); font-size: 11px; margin-bottom: 9px; }
.board-size-picker label { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; margin-top: 6px; cursor: pointer; background: #111d30; }
.board-size-picker label:has(input:checked) { border-color: var(--teal); background: #193438; }
.board-size-picker input { width: 15px; height: 15px; margin: 0; flex-shrink: 0; accent-color: var(--teal); }
.board-size-picker strong { display: block; font-size: 12px; font-weight: 600; }
.board-size-picker small { display: block; font-size: 10px; line-height: 1.5; color: var(--muted); margin-top: 3px; }
.rules-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rules-picker legend { grid-column: 1 / -1; }
#casino-option { position: relative; }
#casino-tooltip { display: none; position: absolute; bottom: 100%; right: 0; width: min(360px, 100%); padding: 16px; border: 1px solid var(--teal); border-radius: 10px; background: #111d30; color: #f2f5fc; font-size: 14px; line-height: 1.5; box-shadow: 0 8px 25px #0008; z-index: 2; pointer-events: none; }
#casino-tooltip strong { color: var(--teal); font-size: 16px; margin-bottom: 10px; }
#casino-tooltip > span { display: block; margin-top: 8px; }
#casino-option:not(.tooltip-dismissed):hover #casino-tooltip,
#casino-option:not(.tooltip-dismissed):focus-within #casino-tooltip { display: block; }
#hexagon-count { padding: 0; }
.primary-button { background: var(--gold); color: #192135; border: 1px solid var(--gold); padding: 14px 20px; border-radius: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 20px; }
.primary-button:hover:not(:disabled) { background: #ffce77; }
#play-button { width: 100%; margin-top: 20px; font-size: 16px; }
#play-button span { font-size: 23px; }
.setup-footnote { color: var(--muted); font-size: 10px; margin: 15px 0 0; text-align: center; }
.setup-footnote span { padding: 0 8px; }
.preview-panel { padding: 28px 20px; background: radial-gradient(ellipse at 50% 30%, #23344c66, transparent 70%); }
.curriculum-note { display: flex; align-items: center; gap: 11px; padding: 22px 4px; color: var(--muted); }
.curriculum-note > span { color: var(--teal); font-size: 23px; }
.curriculum-note p { font-size: 10px; line-height: 1.7; max-width: 660px; margin: 0; }
.text-button { background: none; border: 0; color: var(--muted); padding: 6px 0; font-size: 11px; text-underline-offset: 4px; }
.text-button:hover:not(:disabled) { color: var(--teal); text-decoration: underline; }
.curriculum-note button { margin-left: auto; flex-shrink: 0; }
.site-footer { max-width: 1192px; margin: 12px auto 0; border-top: 1px solid #ffffff0d; padding: 23px 24px; display: flex; justify-content: space-between; font-size: 9px; }
.site-footer span:first-child { letter-spacing: .3px; }
.game-screen { padding-top: 35px; }
.game-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.game-heading h1 { margin: 10px 0 25px; font-size: 32px; letter-spacing: -1px; }
.secondary-button { border: 1px solid #45516a; background: #1c2940; color: var(--text); padding: 10px 15px; border-radius: 8px; font-size: 12px; }
.secondary-button:hover { background: #2c3b55; }
.scoreboard { display: grid; grid-template-columns: 1fr 160px 1fr; align-items: center; gap: 20px; max-width: 850px; margin: auto; }
.team-panel { display: flex; text-align: left; align-items: center; gap: 12px; border: 1px solid var(--line); background: #172238; padding: 14px 18px; border-radius: 12px; }
.team-panel strong { font-size: 15px; }
.team-panel > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.teams-panel { max-width: 760px; margin: 0 auto 24px; padding: 24px; border: 1px solid var(--line); background: var(--panel); border-radius: 18px; }
.team-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.team-settings fieldset { min-width: 0; margin: 0; border: 1px solid var(--line); padding: 18px; border-radius: 12px; }
.team-settings legend { font: 500 14px "Space Grotesk", sans-serif; padding: 0 6px; }
.team-settings label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 8px; }
.colour-label { font-size: 14px; color: var(--muted); margin: 12px 0 8px; }
.colour-palette { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; }
.team-settings .colour-swatch { display: grid; position: relative; aspect-ratio: 1; margin: 0; border-radius: 6px; background: var(--swatch-colour); color: var(--swatch-ink); cursor: pointer; }
.colour-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.colour-swatch span { display: grid; place-items: center; visibility: hidden; font-size: 21px; font-weight: 700; pointer-events: none; }
.colour-swatch:has(input:checked) { outline: 2px solid white; outline-offset: 3px; }
.colour-swatch:has(input:checked) span { visibility: visible; }
.colour-swatch:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 3px; }
.colour-swatch:has(input:disabled) { cursor: not-allowed; }
.colour-swatch input:disabled { cursor: not-allowed; }
.colour-swatch:has(input:disabled:not(:checked)) { opacity: .3; }
.team-settings fieldset:disabled { opacity: .8; }
.teams-panel > .primary-button { width: 100%; }
.team-picker { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); align-items: center; gap: 8px; margin: 22px 0 14px; }
.picker-card { background: var(--picker-colour); color: var(--picker-ink); padding: 18px 12px; border: 3px solid transparent; border-radius: 12px; text-align: center; opacity: .65; }
.picker-card span, .picker-card small { display: block; font-size: 9px; letter-spacing: 1px; }
.picker-card strong { display: block; font: 600 21px "Space Grotesk", sans-serif; margin: 9px 0; overflow-wrap: anywhere; }
.picker-versus { text-align: center; color: var(--muted); font-size: 10px; font-weight: 700; }
.team-picker.picking .picker-card { animation: picker-scan .8s step-end infinite; }
.team-picker.picking #picker-teal { animation-delay: -.4s; }
.picker-card.selected { opacity: 1; border-color: var(--picker-ink); outline: 3px solid white; outline-offset: 3px; box-shadow: 0 0 24px #ffffff22; }
.team-picker.decided .picker-card:not(.selected) { opacity: .3; }
@keyframes picker-scan { 0%, 100% { opacity: 1; transform: scale(1.02); } 50% { opacity: .35; transform: scale(.98); } }
.picker-result { text-align: center; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.team-panel small { display: block; font-size: 8px; margin-top: 5px; letter-spacing: 1.5px; color: inherit; }
.team-panel.gold-team { background: var(--team-gold, var(--gold)); color: var(--team-gold-ink, #000); border-color: var(--team-gold, var(--gold)); }
.team-panel.teal-team { background: var(--team-teal, var(--teal)); color: var(--team-teal-ink, #000); border-color: var(--team-teal, var(--teal)); }
.team-swatch { flex-shrink: 0; width: 12px; height: 14px; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background: var(--team-gold, var(--gold)); }
.team-panel .team-swatch { background: currentColor; }
.gold-team.active-team { --turn-glow: var(--team-gold, var(--gold)); }
.teal-team.active-team { --turn-glow: var(--team-teal, var(--teal)); }
.team-panel.active-team { outline: 3px solid #fff; outline-offset: 3px; animation: turn-glow 1.8s ease-in-out infinite; }
.team-panel .score { color: inherit; }
@keyframes turn-glow {
  0%, 100% { box-shadow: 0 0 10px 2px var(--turn-glow); }
  50% { box-shadow: 0 0 26px 7px var(--turn-glow); }
}
.score { margin-left: auto; color: var(--text); font-size: 30px; }
.turn-indicator { color: var(--text); text-align: center; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.board-container { max-width: 650px; margin: 22px auto 0; }
.board-frame { position: relative; border-top: 12px solid var(--team-teal, var(--teal)); border-bottom: 12px solid var(--team-teal, var(--teal)); border-radius: 12px; background: radial-gradient(ellipse, #23334c66, #121d30); padding: 8px 20px; }
#game-board { width: 100%; max-height: 57vh; min-height: 270px; display: block; overflow: visible; }
.gold-edge { position: absolute; width: 12px; top: 12px; bottom: 12px; background: var(--team-gold, var(--gold)); border-radius: 6px; }
.left-edge { left: 3px; }
.right-edge { right: 3px; }
.board-frame[data-active-team="gold"] .gold-edge { --turn-glow: var(--team-gold, var(--gold)); animation: turn-glow 1.8s ease-in-out infinite; }
.board-frame[data-active-team="teal"]::before, .board-frame[data-active-team="teal"]::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; border-radius: 6px; background: var(--team-teal, var(--teal)); --turn-glow: var(--team-teal, var(--teal)); animation: turn-glow 1.8s ease-in-out infinite; pointer-events: none; }
.board-frame[data-active-team="teal"]::before { top: -12px; }
.board-frame[data-active-team="teal"]::after { bottom: -12px; }
@media (prefers-reduced-motion: reduce) {
  .team-panel.active-team, .board-frame[data-active-team="gold"] .gold-edge,
  .board-frame[data-active-team="teal"]::before, .board-frame[data-active-team="teal"]::after { box-shadow: 0 0 20px 5px var(--turn-glow); }
}
.hex polygon { fill: #293c58; stroke: #101a2c; stroke-width: 6; transition: fill .15s; }
.hex.available { cursor: pointer; }
.hex.available:hover > polygon:first-child, .hex.available:focus > polygon:first-child { fill: #435b7e; }
.hex:focus { outline: none; }
.hex.available .hex-hover-outline { fill: none; stroke: #b6c8e0; stroke-width: 3; stroke-linejoin: round; opacity: 0; pointer-events: none; }
.hex.available:hover .hex-hover-outline, .hex.available:focus .hex-hover-outline { opacity: 1; }
.hex.available:focus-visible .hex-hover-outline { stroke: var(--teal); stroke-width: 4; }
.hex text { fill: #f2f5fc; font: 600 35px "Space Grotesk", sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.hex.gold polygon { fill: var(--team-gold, var(--gold)); }
.hex.teal polygon { fill: var(--team-teal, var(--teal)); }
.hex.gold text { fill: var(--team-gold-ink, #152037); }
.hex.teal text { fill: var(--team-teal-ink, #152037); }
.hex.winning polygon { stroke: white; stroke-width: 4; }
.hex.claimed { cursor: default; }
.hex.locked { cursor: not-allowed; }
.hex.locked polygon:first-child { fill: #18243a; stroke: #71819a; stroke-dasharray: 8 6; }
.hex.locked .hex-lock-label { fill: #f2f5fc; font-size: 17px; letter-spacing: 1px; }
.hex.locked .hex-lock-count { fill: #c3cfdf; font-size: 13px; font-weight: 500; }
.electric-halo, .electric-track, .electric-arc { fill: none; pointer-events: none; stroke-linejoin: round; stroke-linecap: round; opacity: var(--electric-opacity); }
.electric-halo { stroke: var(--electric-colour); stroke-width: 4; filter: drop-shadow(0 0 var(--electric-blur) var(--electric-colour)); }
.electric-track, .electric-arc { stroke-dasharray: 8 7 2 10 5 13 1 14 9 31; animation: electric-flow var(--electric-speed) linear infinite; }
.electric-track { stroke: #101a2c; stroke-width: calc(var(--electric-width) + 2.5px); }
.electric-arc { stroke: white; stroke-width: var(--electric-width); filter: drop-shadow(0 0 2px white); }
@keyframes electric-flow { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) {
  .electric-track, .electric-arc { animation: none; }
}
.game-announcement { color: var(--gold); text-align: center; font: 600 22px "Space Grotesk", sans-serif; min-height: 32px; margin-top: 12px; overflow-wrap: anywhere; }
.game-footer { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding-bottom: 10px; }
.game-footer p { font-size: 11px; color: var(--muted); }
.game-footer > div { display: flex; gap: 22px; flex-shrink: 0; }
dialog { color: var(--text); background: #19263c; border: 1px solid #3c4c65; border-radius: 20px; padding: 30px; width: min(580px, calc(100% - 32px)); max-height: none; max-width: none; overflow: visible; position: fixed; inset: 50% auto auto 50%; margin: 0; transform: translate(-50%, -50%) scale(var(--dialog-scale, 1)); box-shadow: 0 25px 100px #0008; }
dialog::backdrop { background: #070e20c9; backdrop-filter: blur(7px); }
.dialog-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-topline .eyebrow { margin: 0; font-size: 9px; line-height: 1.6; }
.icon-button { background: #25354d; border: 0; border-radius: 50%; width: 32px; height: 32px; font-size: 23px; flex-shrink: 0; }
.question-prompt { display: flex; align-items: center; gap: 16px; margin: 20px 0; }
.question-timer { position: relative; width: 74px; height: 74px; flex: 0 0 auto; color: var(--current-team-colour, var(--gold)); }
.question-timer svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.question-timer-track, .question-timer-ring { fill: none; stroke-width: 5; }
.question-timer-track { stroke: #ffffff20; }
.question-timer-ring { stroke: currentColor; stroke-dasharray: 219.91 219.91; stroke-dashoffset: 0; stroke-linecap: round; transition: stroke-dashoffset 50ms linear, color 150ms ease; }
.question-timer.urgent { color: #ff3333; }
.question-timer span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 20px ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }
.question-team { display: grid; gap: 4px; max-width: min(360px, calc(100vw - 160px)); padding: 11px 15px; border-left: 4px solid var(--current-team-colour, var(--gold)); border-radius: 0 9px 9px 0; background: color-mix(in srgb, var(--current-team-colour, var(--gold)) 13%, #19263c); }
.question-team-label { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: 1.7px; }
.question-team strong { color: var(--current-team-colour, var(--gold)); font: 600 17px "Space Grotesk", sans-serif; overflow-wrap: anywhere; }
.question-dialog { border-color: color-mix(in srgb, var(--current-team-colour, var(--gold)) 55%, #3c4c65); }
.question-dialog.handover { animation: question-handover 700ms ease-in-out; }
@keyframes question-handover {
  0%, 100% { opacity: 1; }
  48% { opacity: .35; }
}
.question-kicker { font-size: 11px; color: var(--muted); }
.question-dialog h2 { font-size: clamp(21px, 3vw, 27px); line-height: 1.45; font-weight: 500; margin: 14px 0 25px; }
@media (prefers-reduced-motion: reduce) {
  .question-dialog.handover { animation-duration: 180ms; }
}
.answer-box { border: 1px solid #39d7c144; background: #163d3b; padding: 18px; border-radius: 12px; }
.answer-box h3 { font-size: 24px; margin: 7px 0; color: #79ebd8; }
.answer-box > p:last-child { color: #c0d8d6; font-size: 13px; line-height: 1.6; margin-bottom: 0; }
.decision-buttons { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.decision-buttons > button { width: 100%; min-width: 0; min-height: 48px; border-radius: 8px; padding: 10px 8px; font-size: 14px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.decision-buttons .decision-primary { margin: 0; }
.decision-buttons .current-team-button { border: 0; background: var(--current-team-colour, var(--gold)); color: var(--current-team-ink, #152037); }
.decision-buttons .decision-negative { border: 1px solid #e66c75; background: #a82d38; color: #fff; }
.decision-buttons .decision-negative:hover:not(:disabled) { background: #c13b46; }
.decision-buttons .decision-neutral { border-color: #53627a; background: #35435b; color: #fff; }
.decision-buttons .decision-neutral:hover:not(:disabled) { background: #45546d; }
.decision-buttons .skip-button { display: flex; margin: 0; }
#offer-question { background: #39d7c1; color: #152037; }
#offer-question { width: 100%; font-weight: 700; }
#offer-question:hover { filter: brightness(1.1); }
#offer-question:focus-visible, .decision-buttons button:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; }
.skip-button { display: block; margin: 15px auto 0; }
.sources-dialog { width: min(700px, calc(100% - 32px)); }
.sources-dialog h2 { font-size: 27px; }
.sources-dialog p { font-size: 13px; color: #b7c4d6; line-height: 1.7; }
.source-date { border-top: 1px solid var(--line); padding-top: 15px; font-size: 11px !important; }
.confirm-dialog h2 { font-size: 24px; }
.sources-dialog .creation-credit { color: var(--text); font-size: 18px; }
.audio-credits summary { cursor: pointer; font-size: 14px; }
.audio-credit-list { color: var(--muted); font-size: 13px; line-height: 1.7; padding-left: 20px; }
.confirm-dialog p { color: var(--muted); line-height: 1.7; }
.confirm-actions { margin-top: 25px; }
.win-dialog { width: min(760px, calc(100% - 32px)); padding: 38px; overflow: hidden; border: 2px solid var(--winner-colour); background: radial-gradient(ellipse at 50% 12%, #ffffff14, transparent 65%), #101b30; box-shadow: 0 0 70px color-mix(in srgb, var(--winner-colour) 28%, transparent), 0 25px 100px #0008; }
.win-content { position: relative; text-align: center; }
.win-dialog .eyebrow { color: var(--winner-colour); letter-spacing: 4px; }
.win-trophy { width: 120px; height: 120px; color: var(--winner-colour); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--winner-colour) 45%, transparent)); animation: trophy-arrive .7s ease-out both; }
.win-dialog h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.15; overflow-wrap: anywhere; margin: 14px 0; color: var(--winner-colour); }
.win-tagline { font-size: 24px; margin: 10px 0; }
#win-summary { color: var(--muted); font-size: 14px; line-height: 1.6; }
.win-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; }
.win-stats > div { background: #ffffff08; border: 1px solid #ffffff15; border-radius: 12px; padding: 16px 8px; }
.win-stats strong { display: block; font-size: 32px; color: var(--winner-colour); }
.win-stats span { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.win-actions { display: flex; justify-content: center; gap: 12px; margin-bottom: 18px; }
.win-actions .primary-button { background: var(--winner-colour); color: var(--winner-ink); width: auto; margin: 0; }
.win-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.win-confetti span { position: absolute; left: var(--x); top: -25px; width: 8px; height: 15px; background: var(--winner-colour); animation: confetti-fall var(--duration) linear var(--delay) infinite; }
.win-confetti span:nth-child(3n) { background: #f3bd55; border-radius: 50%; }
.win-confetti span:nth-child(3n + 1) { background: #fff; width: 5px; }
@keyframes confetti-fall { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(820px) rotate(var(--spin)); } }
@keyframes trophy-arrive { from { opacity: 0; transform: scale(.5) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) {
  .win-confetti span { top: var(--x); opacity: .25; }
}
.noscript { text-align: center; color: var(--gold); }
.site-header { max-width: 1440px; padding: 16px 32px; }
.header-controls { gap: 10px; }
#display-status { max-width: 220px; color: var(--gold); font-size: 12px; }
#display-status:empty { display: none; }
.fullscreen-button { display: grid; place-items: center; width: 42px; height: 40px; padding: 8px; }
.fullscreen-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
main { max-width: 1360px; }
.intro { margin: 14px auto; }
.intro h1 { font-size: 40px; margin: 10px 0; }
.intro-copy { font-size: 16px; max-width: 820px; line-height: 1.5; }
.setup-layout { gap: 24px; }
.setup-panel { padding: 22px; }
.section-heading { margin-bottom: 12px; }
.section-heading h2, .board-size-picker legend { font-size: 16px; color: var(--text); }
.level-option { font-size: 16px; }
.level-heading { margin-top: 20px; }
.section-heading label { color: inherit; }
#subject-select { font-size: 18px; padding: 14px; }
.subject-summary { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 12px 0; }
.board-label { font-size: 14px; margin-top: 16px; }
select { font-size: 15px; }
.board-size-picker { margin-top: 0; }
.board-size-picker label { padding: 12px; margin-top: 8px; }
.board-size-picker strong { font-size: 16px; }
.board-size-picker small { font-size: 13px; }
.setup-footnote { font-size: 12px; }
.how-to-summary { border-top: 1px solid var(--line); padding-top: 14px; margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.how-to-summary strong { color: var(--text); }
.curriculum-note { padding: 12px 4px; }
.curriculum-note p, .text-button { font-size: 12px; }
.site-footer { display: none; }
.teams-panel { max-width: 1000px; padding: 20px; margin-bottom: 16px; }
.team-settings fieldset { padding: 12px 18px; }
.team-settings label { font-size: 14px; margin: 8px 0; }
.team-settings legend { font-size: 16px; }
.team-picker { margin-top: 16px; }
.picker-card { padding: 12px; }
.game-screen { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); column-gap: 32px; row-gap: 16px; padding-top: 18px; align-items: start; }
.game-heading { grid-column: 1; display: block; }
.game-heading h1 { font-size: 36px; margin: 12px 0 20px; }
.secondary-button { font-size: 14px; }
.scoreboard { grid-column: 1; grid-template-columns: 1fr; gap: 14px; width: 100%; }
.team-panel strong { font-size: 20px; }
.team-panel small { font-size: 11px; letter-spacing: .7px; }
.turn-indicator { font-size: 18px; }
.board-container { grid-column: 2; grid-row: 1 / 5; width: fit-content; max-width: 100%; margin: 0 auto; }
.board-frame { width: fit-content; max-width: 100%; padding-right: 14px; padding-left: 14px; }
#game-board { width: auto; max-width: 100%; height: max(360px, calc(100vh - 170px)); max-height: none; min-height: 0; }
.game-announcement { grid-column: 1; font-size: 24px; margin: 0; min-height: 0; }
.game-announcement:empty { display: none; }
.game-footer { grid-column: 1; display: block; }
.game-footer p { font-size: 15px; line-height: 1.6; margin-top: 0; }
.game-footer > div { flex-wrap: wrap; gap: 12px 20px; }
@media (max-height: 720px) {
  .site-header { padding-top: 10px; padding-bottom: 10px; }
  .welcome-screen { padding: 12px 0 18px; }
  .welcome-panel { padding: 22px 28px; }
  .welcome-panel h1 { font-size: 38px; }
  .welcome-lead { margin: 10px 0 15px; font-size: 14px; }
  .welcome-stats > div { padding: 9px 12px; }
  .welcome-stats strong { font-size: 19px; }
  .welcome-features { gap: 9px; margin-top: 12px; }
  .welcome-features article { padding: 10px 12px; }
  .welcome-features h2 { font-size: 14px; }
  .welcome-features p { font-size: 11px; line-height: 1.4; }
  .welcome-actions { margin-top: 12px; }
  .welcome-note { margin-top: 8px; }
  .intro { margin: 12px auto; }
  .intro h1 { font-size: 34px; }
  .setup-panel { padding: 16px; }
  .subject-heading { margin-top: 14px; }
  .teams-panel { padding: 14px; }
  .picker-card { padding: 8px; }
  .picker-card strong { margin: 5px 0; }
}
@media (max-width: 760px) {
  .welcome-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome-features { grid-template-columns: 1fr; }
  .welcome-actions { align-items: stretch; flex-direction: column-reverse; }
  .welcome-actions .primary-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

body.high-contrast {
  --background: #000;
  --panel: #000;
  --muted: #fff;
  --text: #fff;
  --gold: #ff0;
  --teal: #0ff;
  --line: #fff;
  --team-gold: #ff0;
  --team-gold-ink: #000;
  --team-teal: #0ff;
  --team-teal-ink: #000;
  color-scheme: dark;
}
body.high-contrast .ambient,
body.high-contrast .hex-background { display: none; }
body.high-contrast .site-header,
body.high-contrast .setup-panel,
body.high-contrast .teams-panel,
body.high-contrast .team-settings fieldset,
body.high-contrast .board-size-picker label,
body.high-contrast .level-picker,
body.high-contrast .team-panel,
body.high-contrast .board-frame,
body.high-contrast dialog,
body.high-contrast .answer-box {
  border: 2px solid #fff;
  background: #000;
  box-shadow: none;
}
body.high-contrast .preview-panel { background: #000; }
body.high-contrast .welcome-panel,
body.high-contrast .welcome-stats > div,
body.high-contrast .welcome-count-statement,
body.high-contrast .welcome-features article {
  border: 2px solid #fff;
  background: #000;
  box-shadow: none;
}
body.high-contrast .welcome-panel h1 span,
body.high-contrast .welcome-stats strong,
body.high-contrast .welcome-features article { color: #ff0; }
body.high-contrast .welcome-panel h1 .welcome-teal { color: #0ff; }
body.high-contrast .welcome-lead,
body.high-contrast .welcome-features p,
body.high-contrast .welcome-stats span,
body.high-contrast .welcome-remember,
body.high-contrast .welcome-note { color: #fff; }
body.high-contrast .welcome-count-statement .welcome-gold { color: #ff0; }
body.high-contrast .welcome-count-statement .welcome-teal { color: #0ff; }
body.high-contrast .welcome-remember input { accent-color: #ff0; }
body.high-contrast #picker-gold { background: #ff0; color: #000; }
body.high-contrast #picker-teal { background: #0ff; color: #000; }
body.high-contrast .site-header { border-width: 0 0 2px; }
body.high-contrast .secondary-button {
  border: 2px solid #ff0;
  background: #000;
  color: #ff0;
}
body.high-contrast .secondary-button:hover:not(:disabled),
body.high-contrast .level-option.active,
body.high-contrast .board-size-picker label:has(input:checked) {
  background: #ff0;
  color: #000;
}
body.high-contrast .board-size-picker label:has(input:checked) strong,
body.high-contrast .board-size-picker label:has(input:checked) small {
  color: #000;
}
body.high-contrast #contrast-toggle[aria-pressed="true"] { background: #ff0; color: #000; }
body.high-contrast .primary-button,
body.high-contrast #offer-question,
body.high-contrast .decision-buttons .decision-primary {
  border: 2px solid #ff0;
  background: #ff0;
  color: #000;
}
body.high-contrast .decision-buttons .decision-negative {
  border: 2px solid #ff5c5c;
  background: #000;
  color: #ff5c5c;
}
body.high-contrast .decision-buttons .decision-negative:hover:not(:disabled) {
  border-color: #ff5c5c;
  background: #000;
  color: #ff5c5c;
}
body.high-contrast .decision-buttons .decision-neutral {
  border-color: #fff;
  background: #000;
  color: #fff;
}
body.high-contrast .decision-buttons .decision-neutral:hover:not(:disabled) {
  border-color: #fff;
  background: #000;
  color: #fff;
}
body.high-contrast select,
body.high-contrast input,
body.high-contrast .board-size-picker label,
body.high-contrast .icon-button,
body.high-contrast #casino-tooltip {
  border: 2px solid #fff;
  background: #000;
  color: #fff;
}
body.high-contrast .text-button,
body.high-contrast a,
body.high-contrast .intro h1 span,
body.high-contrast .eyebrow,
body.high-contrast .step-number,
body.high-contrast .game-announcement {
  color: #ff0;
}
body.high-contrast .text-button,
body.high-contrast a { text-decoration: underline; text-underline-offset: 3px; }
body.high-contrast :focus-visible { outline: 4px solid #ff0; outline-offset: 4px; }
body.high-contrast .team-panel.gold-team { background: #ff0; color: #000; border: 3px solid #fff; }
body.high-contrast .team-panel.teal-team { background: #0ff; color: #000; border: 3px solid #fff; }
body.high-contrast .team-panel.gold-team *,
body.high-contrast .team-panel.teal-team *,
body.high-contrast #picker-gold *,
body.high-contrast #picker-teal * { color: #000; }
body.high-contrast .hex polygon { fill: #000; stroke: #fff; }
body.high-contrast .hex.gold polygon { fill: var(--team-gold); }
body.high-contrast .hex.teal polygon { fill: var(--team-teal); }
body.high-contrast .hex.gold text { fill: #000; }
body.high-contrast .hex.teal text { fill: #000; }
body.high-contrast .hex.available:hover > polygon:first-child { fill: #333; }
body.high-contrast .hex text,
body.high-contrast .hex.locked .hex-lock-label,
body.high-contrast .hex.locked .hex-lock-count { fill: #fff; }
body.high-contrast .hex.available:focus-visible .hex-hover-outline,
body.high-contrast .hex.available:hover .hex-hover-outline { stroke: #ff0; stroke-width: 5; }
body.high-contrast .electric-halo,
body.high-contrast .electric-track,
body.high-contrast .electric-arc,
body.high-contrast .team-panel.active-team,
body.high-contrast .board-frame[data-active-team="gold"] .gold-edge,
body.high-contrast .board-frame[data-active-team="teal"]::before,
body.high-contrast .board-frame[data-active-team="teal"]::after { animation: none; filter: none; }
body.high-contrast .board-frame {
  border-right: 2px solid #fff;
  border-left: 2px solid #fff;
  border-top: 12px solid #0ff;
  border-bottom: 12px solid #0ff;
}
body.high-contrast .question-team,
body.high-contrast .answer-result,
body.high-contrast .answer-box { border: 2px solid #fff; background: #000; }
body.high-contrast .question-timer { color: #ff0; }
body.high-contrast .question-team-label,
body.high-contrast .question-team strong,
body.high-contrast .answer-box h3,
body.high-contrast .answer-box > p:last-child,
body.high-contrast .sources-dialog p,
body.high-contrast .answer-result,
body.high-contrast .answer-result.accepted { color: #fff; }
body.high-contrast .question-dialog .question-timer.urgent { color: #ff0; }