#boot { flex-direction: column; gap: 24px; background: var(--night); z-index: 20; }
#boot img { width: min(300px, 65vw); height: auto; }
#boot::after { content: ""; width: 64px; height: 2px; background: var(--gold); }
#boot progress { width: min(300px, 65vw); height: 5px; accent-color: var(--gold); }
#boot .boot-detail { max-width: 36ch; text-align: center; color: var(--steel); font: 12px/1.6 var(--text); }
#boot button { width: auto; min-width: 180px; }
#rink-stage { position: fixed; inset: 0; }
#faceoff-canvas { width: 100%; height: 100%; }
#game-chrome[hidden], #game-menu[hidden], #scoreboard[hidden], #game-result[hidden], #game-tutorial[hidden] { display: none; }
[hidden], .game-tool[hidden], .result-clip[hidden], #game-pause[hidden] { display: none !important; }
html[data-presentation] { --rail: 40px; }
html[data-presentation] #rink-stage { inset: 108px 0 40px; }
html[data-presentation] #matchup { display: none; }
html[data-presentation] #paid:not(.notice):not(.final), html[data-presentation] #soak { top: 120px; left: 16px; max-width: 280px; font-size: 11px; }
html[data-presentation] #goalgif { top: auto; bottom: 48px; right: 16px; }
html[data-presentation] #paid.final, html[data-presentation] #paid.notice { bottom: 52px; }
html[data-game-view="menu"] #rink-stage { visibility: hidden; }
html[data-game-view="connecting"] #rink-stage, html[data-friend-lobby] #rink-stage { visibility: hidden; }

.game-header { position: fixed; z-index: 12; inset: 0 0 auto; height: 108px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid var(--keyline); background: var(--night); }
.game-brand { display: block; flex-shrink: 0; }
.game-brand img { width: 176px; height: auto; }
.game-tools { display: flex; gap: 8px; }
.game-tool { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 12px; border: 1px solid var(--keyline); border-radius: 0; background: var(--banner); box-shadow: var(--bevel); color: var(--steel); font: 400 11px/16px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.game-tool:hover { border-color: var(--gold); color: var(--rink); background: var(--banner-lit); }
.game-tool svg { width: 16px; height: 16px; }
.game-footer { position: fixed; z-index: 12; inset: auto 0 0; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 32px; border-top: 1px solid var(--keyline); background: var(--night); color: var(--steel); font: 400 10px/14px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.game-footer p { margin: 0; }
.game-footer span + span { margin-left: 20px; }
.game-footer a:hover { color: var(--gold); }
.game-status { display: flex; align-items: center; gap: 8px; }
.game-status::before { content: ""; width: 5px; height: 5px; background: var(--gold); }
html:not([data-game-view="playing"]) .footer-options { display: none; }
html[data-game-view="playing"] .game-status::before { background: var(--aurora); }
kbd { display: inline-grid; place-items: center; min-width: 23px; height: 23px; padding: 0 5px; border: 1px solid var(--keyline); box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); color: var(--rink); font: 400 11px/1 var(--mono); }

#game-menu { position: fixed; z-index: 11; inset: 108px 0 40px; overflow: auto; background: radial-gradient(ellipse at 12% 5%, rgba(26,64,124,.25), transparent 60%), var(--night); }
.menu-layout { width: min(1220px, calc(100% - 80px)); min-height: 100%; margin: 0 auto; display: grid; grid-template-columns: 1.12fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding: 40px 0; }
.menu-story { min-width: 0; }
.game-eyebrow { margin: 0 0 18px; color: var(--gold); font: 400 11px/16px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.menu-story h1 { margin: 0; font: 800 clamp(32px, 4.3vw, 60px)/1.03 var(--display); letter-spacing: -.025em; text-transform: uppercase; }
.menu-story h1 span { display: block; }
.menu-story > p:not(.game-eyebrow) { max-width: 34ch; margin: 22px 0 0; color: var(--steel); font: 400 15px/24px var(--text); }
.menu-art { height: auto; width: 115%; max-width: 115%; margin: 4px 0 -8px -8%; aspect-ratio: 2 / 1; object-fit: contain; mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 85%, transparent); }
.menu-caption { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--keyline); padding-top: 14px; color: var(--steel); font: 400 10px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.menu-caption b { font-weight: 400; color: var(--gold); }
.setup-panel { background: var(--banner); border: 1px solid var(--keyline); border-top-color: var(--gold); box-shadow: var(--bevel), 0 24px 80px rgba(0,0,0,.18); }
.setup-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 16px; padding: 28px; border-bottom: 1px solid var(--keyline); background: rgba(0,7,20,.45); }
.setup-heading .game-eyebrow { margin-bottom: 10px; }
.setup-heading h2 { margin: 0; color: var(--rink); font: 800 clamp(20px, 2.2vw, 28px)/1.1 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.setup-heading > span { color: var(--steel); font: 400 10px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.club-selectors { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--keyline); border-bottom: 1px solid var(--keyline); }
.club-picker { min-width: 0; text-align: center; padding: 20px 12px; background: var(--night); position: relative; }
.club-picker::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; background: #2167B8; }
.club-picker:last-child::before { background: #A31122; }
.club-side { color: var(--steel); font: 400 10px/16px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.club-choice { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: 6px; margin: 12px 0; }
.club-choice img { width: 100px; height: 100px; object-fit: contain; margin: auto; filter: drop-shadow(0 8px 12px #000714); }
.club-arrow { width: 28px; height: 36px; border: 1px solid var(--keyline); background: var(--banner); color: var(--gold); font: 400 20px/1 var(--text); }
.club-arrow:hover { border-color: var(--gold); background: var(--banner-lit); }
.club-city { display: block; margin-bottom: 3px; color: var(--steel); font: 400 10px/16px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.club-name { display: block; min-height: 34px; color: var(--rink); font: 800 13px/17px var(--display); text-transform: uppercase; }
.club-shortcut { display: block; margin-top: 8px; color: var(--steel); font: 400 10px/14px var(--mono); }
.setup-actions { padding: 24px 28px 20px; }
.match-setup { padding: 24px 28px; }
.match-setup p { margin: 12px 0 0; color: var(--steel); font: 400 12px/19px var(--text); text-align: center; }
.match-setup p + .play-button { margin-top: 24px; }
.local-play { border-block: 1px solid var(--keyline); }
.local-play > summary { padding: 16px 28px; cursor: pointer; color: var(--steel); font: 600 12px/18px var(--text); }
.local-play > summary:hover, .local-play > summary:focus-visible { color: var(--gold); }
.local-play[open] > summary { border-bottom: 1px solid var(--keyline); }
.cpu-setup { margin-bottom: 16px; }
.cpu-heading { display: flex; justify-content: space-between; gap: 12px; color: var(--steel); font: 400 10px/16px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.cpu-heading span:first-child { color: var(--gold); }
.cpu-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.cpu-levels button { min-height: 36px; border: 1px solid var(--keyline); border-radius: 0; color: var(--steel); background: var(--night); font: 600 11px/16px var(--text); text-transform: uppercase; letter-spacing: .04em; }
.cpu-levels button:hover, .cpu-levels button:focus-visible { border-color: var(--gold); color: var(--rink); }
.cpu-levels button[aria-pressed="true"] { color: var(--gold-lit); border-color: var(--gold); background: linear-gradient(180deg, rgba(202,163,113,.16), transparent), var(--night); box-shadow: inset 0 -2px var(--gold); }
#cpu-level-description { min-height: 32px; margin: 0; color: var(--steel); font: 400 11px/16px var(--text); }
.solo-hint { margin: 8px 0 16px; color: var(--steel); font: 400 10px/16px var(--text); text-align: center; }
.solo-hint kbd { min-width: 0; height: 18px; font-size: 9px; }
.play-button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 14px 18px; border: 1px solid var(--keyline); border-radius: 0; background: var(--night); box-shadow: var(--bevel); color: var(--rink); text-align: left; font: 600 13px/18px var(--text); letter-spacing: .035em; text-transform: uppercase; }
.play-button + .play-button { margin-top: 10px; }
.play-button:hover { background: var(--banner-lit); border-color: var(--gold); }
.play-button.primary { background: var(--gold); border-color: var(--gold); box-shadow: inset 0 1px 0 var(--gold-lit), inset 0 -2px 0 var(--gold-shade); color: var(--night); }
.play-button.primary:hover { background: var(--gold-lit); border-color: var(--gold-lit); }
.play-button.primary kbd { border-color: rgba(0,7,20,.3); color: var(--night); }
.setup-note { margin: 16px 24px 20px; text-align: center; color: var(--steel); font: 400 11px/18px var(--text); }
.setup-note a { color: var(--gold); }
.setup-note a:hover { text-decoration: underline; }
.setup-heading .learn-button { width: auto; min-width: 142px; min-height: 46px; padding: 9px 11px; gap: 10px; border-color: var(--gold); color: var(--gold-lit); font-size: 10px; line-height: 14px; }
.learn-button small { display: block; color: var(--steel); font: 400 9px/14px var(--mono); letter-spacing: 0; text-transform: none; }
.learn-button kbd { color: var(--gold); border-color: var(--gold-shade); }

#scoreboard { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: min(660px, calc(100vw - 520px)); display: grid; grid-template-columns: minmax(0,1fr) 136px minmax(0,1fr); height: 84px; border: 1px solid var(--keyline); border-bottom-color: var(--gold); background: var(--banner); box-shadow: var(--bevel); }
.score-team { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; min-width: 0; }
.score-team[data-highlight="true"] { box-shadow: inset 0 2px var(--gold); background: linear-gradient(180deg, rgba(202,163,113,.12), transparent); }
.fight-balance { position: absolute; left: 12px; right: 12px; bottom: 4px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px; color: var(--steel); font: 400 8px/10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.fight-balance[hidden] { display: none; }
.fight-balance meter { appearance: none; display: block; width: 100%; height: 4px; border: 0; background: var(--night); }
.fight-balance meter::-webkit-meter-bar { height: 4px; border: 0; border-radius: 0; background: var(--night); }
.fight-balance meter::-webkit-meter-optimum-value { background: var(--gold); }
.fight-balance meter::-moz-meter-bar { background: var(--gold); }
#scoreboard[data-fighting="true"] .score-team { padding-bottom: 19px; }
#scoreboard[data-fighting="true"] .score-identity img { width: 34px; height: 34px; }
.score-team.away { flex-direction: row-reverse; text-align: right; }
.score-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.away .score-identity { flex-direction: row-reverse; }
.score-identity img { width: 44px; height: 44px; object-fit: contain; }
.score-identity span { display: block; color: var(--steel); font: 400 9px/13px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.score-identity b { display: block; color: var(--rink); font: 600 11px/14px var(--text); text-transform: uppercase; }
.score-number { color: var(--rink); font: 800 34px/1 var(--display); font-variant-numeric: tabular-nums; }
.score-time { position: relative; min-width: 0; overflow: hidden; border-inline: 1px solid var(--keyline); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: var(--night); }
.score-time > [hidden] { display: none; }
.game-moment { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 4px; border-block: 1px solid var(--gold); background: radial-gradient(ellipse at 50% 0, rgba(202,163,113,.13), transparent 80%), var(--night); pointer-events: none; animation: moment-in 180ms ease-out; }
.moment-title { max-width: 100%; overflow-wrap: anywhere; text-align: center; font: 800 clamp(17px, 1.8vw, 24px)/1.05 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.game-moment[data-kind="fight"] .moment-title, .game-moment[data-kind="save"] .moment-title { max-width: 100%; font-size: clamp(11px, 1.15vw, 14px); }
.moment-detail { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); text-align: center; font: 400 8px/11px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.game-moment[data-replay="true"] .moment-detail::before { content: ""; width: 4px; height: 4px; background: var(--gold); }
@keyframes moment-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .game-moment { animation: none; } }
.score-period { color: var(--gold); font: 400 9px/12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.score-clock { color: var(--rink); font: 400 19px/24px var(--mono); font-variant-numeric: tabular-nums; }
#game-result { position: fixed; z-index: 13; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(400px,calc(100% - 40px)); padding: 28px; border: 1px solid var(--keyline); border-top-color: var(--gold); background: var(--banner); box-shadow: var(--bevel), 0 24px 100px rgba(0,0,0,.55); text-align: center; }
#game-result h2 { margin: 0 0 12px; color: var(--rink); font: 800 26px/1.1 var(--display); text-transform: uppercase; }
#game-result { max-height: calc(100dvh - 48px); overflow-y: auto; width: min(440px, calc(100% - 40px)); }
#game-pause { position: fixed; z-index: 16; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100% - 40px)); padding: 28px; border: 1px solid var(--gold); background: var(--banner); box-shadow: 0 0 0 100vmax rgba(0,7,20,.64); }
#game-pause h2 { margin: 0 0 24px; font: 800 30px/1.1 var(--display); text-transform: uppercase; }
#result-stats { margin: 0 0 16px; }
#result-stats > div { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--keyline); color: var(--rink); font: 14px/18px var(--mono); }
#result-stats > div span:nth-child(2) { color: var(--steel); font: 11px/18px var(--text); }
#result-progress { color: var(--gold); font: 12px/18px var(--text); }
.result-clip { margin-bottom: 12px; color: var(--gold); }
.settings-dialog { max-width: 620px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.settings-grid label, .volume-label { display: block; color: var(--rink); font: 13px/20px var(--text); }
.settings-grid select { width: 100%; margin-top: 8px; padding: 12px; color: var(--rink); background: var(--night); border: 1px solid var(--keyline); }
.settings-grid select:disabled { opacity: .55; }
.volume-label { margin: 24px 0; }
.volume-label output { float: right; color: var(--gold); font-family: var(--mono); }
.volume-label input { display: block; width: 100%; margin-top: 12px; accent-color: var(--gold); }
.motion-label { display: flex; align-items: center; gap: 12px; font: 13px/20px var(--text); }
.motion-label input { accent-color: var(--gold); width: 18px; height: 18px; }
.gamepad-status, #settings-controls-note, .settings-storage { color: var(--steel); font: 12px/19px var(--text); }
#settings-feedback { min-height: 20px; color: var(--gold); font: 12px/20px var(--text); }
.challenge-ladder { margin-top: 20px; border-top: 1px solid var(--keyline); padding-top: 16px; font: 12px/18px var(--text); }
.challenge-ladder summary { cursor: pointer; color: var(--gold); }
.challenge-ladder summary span { float: right; font-family: var(--mono); }
.challenge-ladder ul { margin: 16px 0; padding: 0; list-style: none; }
.challenge-ladder li { margin: 12px 0; }
.challenge-ladder b, .challenge-ladder span { display: block; }
.challenge-ladder b { color: var(--rink); font-weight: 500; }
.challenge-ladder li[data-complete="true"] b { color: var(--gold); }
.challenge-ladder li span, .challenge-ladder p { color: var(--steel); font-size: 11px; }
html[data-reduced-motion] .game-moment { animation: none; }
@media (max-width: 600px) { .settings-grid { grid-template-columns: 1fr; } }
#result-score { margin: 12px 0 24px; font: 800 48px/1 var(--display); font-variant-numeric: tabular-nums; }
#result-context { margin: -12px 0 24px; color: var(--gold); font: 400 11px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.game-dialog { width: min(760px,calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px; border: 1px solid var(--keyline); border-top-color: var(--gold); background: var(--banner); box-shadow: var(--bevel); color: var(--rink); }
.game-dialog::backdrop { background: rgba(0,7,20,.86); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.dialog-heading h2 { margin: 0; font: 800 22px/1.2 var(--display); text-transform: uppercase; }
.controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.controls-grid[data-count="1"] { grid-template-columns: 1fr; }
.controls-grid h3 { margin: 0 0 12px; color: var(--gold); font: 400 11px/16px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.controls-grid h4 { margin: 18px 0 3px; color: var(--rink); font: 600 10px/14px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.controls-grid dl { margin: 0; }
.control-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--keyline); }
.control-row dt { color: var(--steel); font: 400 12px/18px var(--text); }
.control-row dd { margin: 0; display: flex; gap: 3px; }
.controls-note { margin: 22px 0 0; color: var(--steel); font: 400 12px/20px var(--text); }
.controls-note strong { color: var(--rink); font-weight: 600; }
.controls-session-note, .controls-live-note { margin: 14px 0 0; color: var(--steel); font: 400 12px/20px var(--text); }
.controls-live-note { color: var(--gold); }
#game-tutorial { position: fixed; z-index: 11; top: 124px; right: 16px; bottom: 56px; width: 312px; overflow-y: auto; padding: 20px; border: 1px solid var(--keyline); border-top-color: var(--gold); background: var(--banner); box-shadow: var(--bevel); }
html[data-practice] #rink-stage { right: 344px; }
html[data-practice] #goalgif, html[data-practice] .score-number { display: none; }
.tutorial-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tutorial-heading .game-eyebrow { margin: 0; font-size: 10px; }
#tutorial-count { color: var(--steel); font: 400 9px/14px var(--mono); text-transform: uppercase; white-space: nowrap; }
.tutorial-steps { display: flex; gap: 6px; list-style: none; margin: 16px 0; padding: 0; }
.tutorial-steps li { flex: 1; padding: 5px 0; border: 1px solid var(--keyline); color: var(--steel); text-align: center; font: 400 10px/14px var(--mono); }
.tutorial-steps li[aria-current] { border-color: var(--gold); color: var(--gold-lit); background: rgba(202,163,113,.1); }
#tutorial-title { margin: 0 0 14px; color: var(--rink); font: 800 22px/1.15 var(--display); text-transform: uppercase; }
#tutorial-hint { margin: 0; color: var(--rink); font: 400 13px/20px var(--text); }
.tutorial-keys { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0; }
#tutorial-goal { margin: 0 0 20px; color: var(--steel); font: 400 12px/18px var(--text); }
#tutorial-status { margin: 0 0 8px; color: var(--steel); font: 400 10px/14px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
#game-tutorial[data-complete="true"] #tutorial-status, #game-tutorial[data-done="true"] #tutorial-status { color: var(--gold-lit); }
#tutorial-progress { appearance: none; display: block; width: 100%; height: 4px; margin-bottom: 16px; border: 0; background: var(--night); color: var(--gold); }
#tutorial-progress::-webkit-progress-bar { background: var(--night); }
#tutorial-progress::-webkit-progress-value { background: var(--gold); }
#tutorial-progress::-moz-progress-bar { background: var(--gold); }
.tutorial-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tutorial-actions .play-button { min-height: 38px; margin: 0; padding: 8px 10px; font-size: 10px; line-height: 16px; justify-content: center; text-align: center; }
.tutorial-actions .primary { grid-column: 1 / -1; }
.tutorial-menu { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border: 0; background: none; color: var(--steel); font: 400 10px/14px var(--text); }
.tutorial-menu:hover { color: var(--gold); }
.tutorial-menu kbd { height: 20px; font-size: 9px; }
#game-tutorial [hidden] { display: none; }
.play-button:focus-visible, .tutorial-menu:focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 3px; }
html[data-touch-only] #rink-stage, html[data-touch-only] #game-chrome, html[data-touch-only] #game-menu { display: none; }
html[data-touch-only] #desktop-note { background: radial-gradient(ellipse at 50% 0,rgba(26,64,124,.38),transparent 65%),var(--night); }
#desktop-note .desktop-brand { width: 230px; height: auto; margin: 0 auto 40px; }

@media (min-width: 1600px) { .menu-layout { gap: 100px; } }
#scoreboard { width: min(600px, calc(100vw - 660px)); left: 45%; }
@media (max-width: 1200px) {
  .game-header { padding: 0 20px; }
  .game-brand img { width: 136px; }
  #scoreboard { width: calc(100vw - 440px); }
  .game-tools .tool-label { display: none; }
  .score-team { gap: 8px; padding: 10px; }
  .score-identity { gap: 6px; }
  .score-identity b { font-size: 10px; }
  .menu-layout { width: calc(100% - 56px); gap: 32px; }
}
@media (max-width: 960px) {
  html[data-presentation] #rink-stage { inset: 100px 0 36px; }
  .game-header { height: 100px; padding: 0 16px; }
  #game-menu { inset: 100px 0 36px; }
  html:not([data-game-view="menu"]) .game-brand img { width: 94px; }
  #scoreboard { width: calc(100vw - 350px); top: 10px; height: 80px; grid-template-columns: minmax(0,1fr) 100px minmax(0,1fr); }
  .score-identity img { display: none; }
  .game-footer { height: 36px; padding: 0 16px; }
  .game-footer .footer-options { display: none; }
  .setup-heading { padding: 22px; }
  .setup-actions { padding: 20px; }
  .menu-story h1 { font-size: 34px; }
  .club-choice img { width: 76px; height: 76px; }
  .club-choice { gap: 2px; grid-template-columns: 24px 1fr 24px; }
  .club-arrow { width: 24px; }
}
@media (max-height: 850px) and (min-width: 961px) {
  .game-header { height: 88px; }
  html[data-presentation] #rink-stage, #game-menu { top: 88px; }
  #game-tutorial { top: 104px; }
  #scoreboard { height: 68px; top: 10px; }
  .menu-layout { padding: 20px 0; }
  .menu-story h1 { font-size: 42px; }
  .menu-story > p:not(.game-eyebrow) { margin-top: 14px; }
  .menu-art { width: 88%; max-width: 88%; margin-left: -3%; }
  .setup-heading { padding: 18px 24px; }
  .club-picker { padding: 12px; }
  .club-choice { margin: 6px 0; }
  .club-choice img { width: 72px; height: 72px; }
  .club-name { min-height: 17px; }
  .setup-actions { padding: 18px 24px; }
  .play-button { min-height: 46px; padding: 10px 16px; }
}
@media (max-width: 1100px) {
  html[data-practice] #rink-stage { right: 0; bottom: 252px; }
  #game-tutorial { top: auto; bottom: 48px; left: 16px; right: 16px; width: auto; height: 196px; padding: 12px 16px; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 24px; }
  .tutorial-heading .game-eyebrow { font-size: 9px; }
  .tutorial-steps { margin: 7px 0; gap: 4px; }
  .tutorial-steps li { padding: 1px 0; font-size: 9px; line-height: 12px; }
  #tutorial-title { margin-bottom: 6px; font-size: 16px; }
  #tutorial-hint { font-size: 11px; line-height: 16px; }
  .tutorial-keys { margin: 6px 0; }
  .tutorial-keys kbd { height: 20px; font-size: 10px; }
  #tutorial-goal { margin: 0; font-size: 10px; line-height: 14px; }
  .tutorial-feedback { align-self: center; }
  #tutorial-progress { margin-bottom: 10px; }
}
@media (max-height: 650px) and (min-width: 961px) {
  .menu-layout { padding-block: 12px; }
  .cpu-setup { margin-bottom: 8px; }
  .cpu-levels { margin-block: 6px; }
  .cpu-levels button { min-height: 32px; }
  #cpu-level-description { min-height: 28px; line-height: 14px; }
}
@media (max-width: 700px) {
  .menu-layout { width: calc(100% - 32px); grid-template-columns: 1fr; gap: 28px; padding: 28px 0; }
  .menu-story h1 { font-size: 38px; }
  .menu-story > p:not(.game-eyebrow), .menu-art, .menu-caption { display: none; }
  .menu-story .game-eyebrow { margin-bottom: 12px; }
  #scoreboard { width: calc(100vw - 32px); top: 66px; height: 64px; }
  html[data-game-view="playing"] .game-header, html[data-game-view="ended"] .game-header { height: 140px; align-items: start; padding-top: 14px; }
  html[data-game-view="playing"] #rink-stage, html[data-game-view="ended"] #rink-stage { top: 140px; }
  .score-number { font-size: 28px; }
  .score-team { padding: 8px 14px; }
  .score-identity b { font-size: 11px; }
  .score-identity span { font-size: 9px; }
  .game-footer { font-size: 9px; }
  .game-footer .footer-shortcuts { display: none; }
  .controls-grid { grid-template-columns: 1fr; }
  .game-dialog { padding: 22px; max-height: calc(100% - 32px); }
  #game-tutorial { gap: 12px; padding-inline: 12px; }
  .tutorial-heading { display: block; }
  .tutorial-heading .game-eyebrow { display: none; }
  .tutorial-actions { gap: 6px; }
  .tutorial-actions .play-button { padding-inline: 6px; font-size: 9px; }
  .tutorial-menu { font-size: 9px; padding-inline: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .play-button, .club-arrow, .game-tool { transition: background .14s, border-color .14s, color .14s; }
}