:root {
  color-scheme: dark;
  font-family: 'Trebuchet MS', 'Arial Rounded MT Bold', Arial, sans-serif;
  font-synthesis: none;
  --ink: #061b46;
  --cream: #fff3cb;
  --muted: #b3cbe4;
  --teal: #63e0e4;
  --gold: #ffdf65;
  --line: #294e6f;
  --green: #a4efc7;
  --gutter: clamp(24px, 4.6vw, 68px);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--cream); background: radial-gradient(ellipse at 50% 0, #123b5c70, transparent 55%), var(--ink); -webkit-font-smoothing: antialiased; }
button, a, input { touch-action: manipulation; }
button, input { font: inherit; }
button, a { color: inherit; }
button { border: 0; cursor: pointer; }
a { text-decoration: none; }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, a:focus-visible, input:focus-visible, canvas:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
p, h1, h2, h3 { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.04em; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px; transform: translateY(-180%); background: var(--gold); color: var(--ink); }
.skip:focus { transform: none; }

.masthead { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 32px; width: 100%; max-width: 1320px; min-height: 74px; margin: auto; padding: 12px var(--gutter); }
.wordmark { display: block; flex: none; width: 207px; }
.wordmark img { display: block; width: 100%; height: auto; }
.masthead nav { display: flex; align-items: center; gap: clamp(15px, 2.5vw, 32px); }
.masthead nav a { display: inline-flex; align-items: center; min-height: 44px; color: #d5e2f3; font-size: 13px; font-weight: 700; white-space: nowrap; }
.masthead nav a:hover { color: var(--teal); }
.game-navigation { display: flex; align-items: center; gap: 24px; width: calc(100% - var(--gutter) * 2); max-width: 1180px; margin: 0 auto 8px; border-bottom: 1px solid #24446e; }
.game-navigation > span { margin-right: auto; color: #92b7d5; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.game-navigation > a, .game-navigation > button { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #d5e2f3; font-size: 12px; font-weight: 700; white-space: nowrap; }
.game-navigation > a:hover, .game-navigation > button:hover, .game-navigation > [aria-current='page'] { color: var(--teal); border-bottom-color: var(--teal); }
.back-link:hover { color: #fff; }
.page-wrap { width: 100%; max-width: 1440px; margin: auto; padding: 0 28px; }
.play-heading { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 26px; padding: 10px 16px 19px; }
.back-link { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--muted); font-size: 12px; font-weight: 700; }
.game-title { text-align: center; }
.eyebrow { margin-bottom: 9px; color: var(--teal); font-size: 9px; font-weight: 800; line-height: 1.5; letter-spacing: .14em; }
.game-title .eyebrow { margin: 0 0 4px; font-size: 8px; letter-spacing: .2em; }
h1 { margin: 0; font-size: 32px; line-height: 1; }
h1 span { color: var(--gold); }
.player-settings { display: flex; justify-content: flex-end; gap: 7px; }
.setting-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 11px; border: 1px solid #2b527b; border-radius: 9px; background: #0b2d59; color: #d0e4f4; font-size: 11px; font-weight: 700; white-space: nowrap; }
.setting-button:hover { border-color: var(--teal); color: #fff; }
.setting-button[aria-pressed='true'] { color: var(--teal); }

/* The shared carnival frame leaves the paved midway and flower pots visible. */
.carnival-midway { position: relative; isolation: isolate; overflow: hidden; padding: 30px 24px 25px; border: 1px solid #c6a66e99; border-radius: 24px; background: #173c55; box-shadow: 0 20px 55px #00112866, inset 0 0 0 1px #f1c96b33; }
.midway-scenery { position: absolute; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; background-image: var(--midway-art); background-size: cover; background-position: var(--midway-position, center center); }
.midway-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, #071a3815 0, transparent 28%, #05163105 64%, #061a3d9c 100%), linear-gradient(90deg, #04153026, transparent 25%, transparent 75%, #04153026); }
.carnival-midway::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 70px #061a3a3b; }
/* The chapter sign uses the same paper, ink and trim palettes as Water Race. */
.carnival-midway, .levels-dialog { --midway-art: url('/assets/vero-carnival/carnival-cove-coastal-v1.webp'); --world-paper: #fff3cf; --world-ink: #173e55; --world-trim: #dba93a; --world-deep: #123b61; --world-accent: #6ddcea; --level-accent: var(--world-trim); --level-ink: var(--world-ink); --level-pattern: repeating-linear-gradient(90deg, #e1ad45 0 7px, transparent 7px 14px); --level-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m16 2 4.2 8.5 9.4 1.4-6.8 6.6 1.6 9.4-8.4-4.4-8.4 4.4 1.6-9.4-6.8-6.6 9.4-1.4Z'/%3E%3C/svg%3E"); }
:is(.carnival-midway, .levels-dialog)[data-world='2'] { --world-paper: #eafbef; --world-ink: #12575f; --world-trim: #39a99c; --world-deep: #124c5a; --world-accent: #85eee4; }
:is(.carnival-midway, .levels-dialog)[data-world='3'] { --world-paper: #fff0dc; --world-ink: #7b3b4b; --world-trim: #da9065; --world-deep: #533751; --world-accent: #ffcf8d; }
:is(.carnival-midway, .levels-dialog)[data-world='4'] { --world-paper: #eeebff; --world-ink: #514178; --world-trim: #a78bca; --world-deep: #343259; --world-accent: #c5b6ff; }
:is(.carnival-midway, .levels-dialog)[data-world='5'] { --world-paper: #fff5d9; --world-ink: #743853; --world-trim: #d7a439; --world-deep: #4b2d58; --world-accent: #ffe19b; }
.world-sign { position: absolute; overflow: hidden; top: 25%; left: clamp(28px, 5%, 74px); width: clamp(150px, 17%, 190px); padding: 25px 14px 14px; border: 3px solid var(--level-accent); border-radius: 12px; background: linear-gradient(140deg, #ffffff80, transparent 54%), var(--world-paper); color: var(--world-ink); box-shadow: 0 5px 0 color-mix(in srgb, var(--level-accent), #4c382d 35%), 0 12px 22px #09214375, inset 0 0 0 3px #ffffff80; text-align: center; transform: rotate(-2deg); }
.world-sign::before { content: ''; position: absolute; inset: 5px 9px auto; height: 9px; background-image: var(--level-pattern); background-size: 30px 9px; background-repeat: repeat-x; opacity: .75; pointer-events: none; }
[data-shape='marquee'] .world-sign { border-radius: 36px 36px 12px 12px / 20px 20px 12px 12px; }
[data-shape='boardwalk'] .world-sign { border-radius: 6px; transform: rotate(1.5deg); }
[data-shape='sunrise'] .world-sign { border-radius: 50% 50% 14px 14px / 30px 30px 14px 14px; }
[data-shape='starlight'] .world-sign { border-radius: 24px 8px; transform: rotate(-1deg); }
[data-shape='festival'] .world-sign { border-radius: 26px 12px 26px 12px; transform: rotate(1deg); }
.world-sign .eyebrow { margin-bottom: 7px; color: var(--world-ink); font-size: 8px; letter-spacing: .16em; }
.world-sign h2 { margin: 0 0 10px; color: var(--world-ink); font-size: clamp(25px, 2.3vw, 31px); line-height: 1.04; text-wrap: balance; }
.world-range { margin: 0 0 13px; color: var(--world-ink); font-size: 7px; font-weight: 800; letter-spacing: .06em; }
.world-challenge { padding-top: 11px; border-top: 1px solid color-mix(in srgb, var(--world-ink), transparent 75%); }
.world-challenge span, .world-challenge strong, .world-challenge small { display: block; }
.world-challenge span { margin-bottom: 6px; color: var(--world-ink); font-size: 10px; line-height: 1.4; }
.world-challenge strong { color: var(--world-ink); font-size: 12px; line-height: 1.4; }
.world-challenge small { margin-top: 5px; color: var(--world-ink); font-size: 8px; line-height: 1.6; }
.world-setting { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--level-accent), transparent 50%); color: var(--level-ink); font-size: 9px; font-weight: 800; line-height: 1.35; }
.setting-motif { display: inline-block; flex: none; width: 19px; height: 19px; background: currentColor; -webkit-mask-image: var(--level-motif); mask-image: var(--level-motif); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* Only Cove's glows are registered to a painted ride. Other worlds get a real
   foreground cord with pennants and bulbs, independent of the panorama. */
.midway-lights { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
[data-world]:not([data-world='1']) > .midway-scenery > .midway-lights { display: none; }
.scenery-wheel-light { fill: #fff2a2; opacity: .12; filter: drop-shadow(0 0 5px #ffd37c) drop-shadow(0 0 9px #ffbf5e); animation: midway-ride-lights 6.48s linear infinite; animation-delay: var(--delay); }
.scenery-string-light { fill: #fff4bd; opacity: .16; filter: drop-shadow(0 0 10px #ffda83) drop-shadow(0 0 18px #ffdb8d); animation: midway-warm-lights 4.8s ease-in-out infinite; animation-delay: var(--delay); }
.midway-festoon { position: absolute; top: -4px; left: 50%; width: max(100%, 900px); height: 80px; transform: translateX(-50%); overflow: visible; }
[data-world='1'] > .midway-scenery > .midway-festoon { display: none; }
.festoon-cord-shadow, .festoon-cord { fill: none; stroke-linecap: round; }
.festoon-cord-shadow { stroke: #17324899; stroke-width: 4; }
.festoon-cord { stroke: #d4b688; stroke-width: 1.4; }
.scenery-pennant { fill: var(--level-accent); stroke: #fff2cd70; stroke-width: .5; transform-box: fill-box; transform-origin: top center; animation: midway-pennant-sway 4.7s ease-in-out infinite alternate; animation-delay: var(--delay); filter: drop-shadow(0 2px 2px #16324740); }
.scenery-pennant.pale { fill: var(--world-paper); }
.festoon-bulbs circle { fill: #fff2b2; filter: drop-shadow(0 0 5px #ffd180); animation: midway-bulb-glow 5.2s ease-in-out infinite; animation-delay: var(--delay); }
.midway-balloons { position: absolute; top: 5%; left: 3%; width: clamp(64px, 7.5vw, 105px); height: auto; overflow: visible; filter: drop-shadow(0 6px 5px #17355255); }
.balloon-level-light { stop-color: color-mix(in srgb, var(--level-accent), white 42%); }
.balloon-level-color { stop-color: var(--level-accent); }
.balloon-level-shade { stop-color: color-mix(in srgb, var(--level-accent), #163047 46%); }
.balloon-world-light { stop-color: color-mix(in srgb, var(--world-accent), white 42%); }
.balloon-world-color { stop-color: var(--world-accent); }
.balloon-world-shade { stop-color: color-mix(in srgb, var(--world-accent), #163047 52%); }
.scenery-balloon-drift { transform-origin: 65px 211px; animation: midway-balloon-sway 6.4s ease-in-out infinite alternate; }
@keyframes midway-ride-lights { 0%, 7% { opacity: .95; } 22%, 100% { opacity: .08; } }
@keyframes midway-warm-lights { 0%, 100% { opacity: .12; } 50% { opacity: .7; } }
@keyframes midway-balloon-sway { from { transform: rotate(-4deg) translateY(2px); } to { transform: rotate(5deg) translateY(-6px); } }
@keyframes midway-pennant-sway { from { transform: skewX(-4deg) rotate(-1deg); } to { transform: skewX(5deg) rotate(2deg); } }
@keyframes midway-bulb-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
body[data-motion='off'] .midway-scenery * { animation-play-state: paused !important; }
.world-tips { position: absolute; top: 12%; right: clamp(28px, 5%, 74px); width: clamp(155px, 18%, 205px); text-align: center; }
.world-tips > img { position: relative; z-index: 1; display: block; width: 68%; max-width: 132px; height: auto; margin: 0 auto -13px; filter: drop-shadow(0 7px 6px #06304c66); }
.world-tip-card { padding: 23px 15px 15px; border: 1px solid #71d1ddbb; border-radius: 14px; background: linear-gradient(160deg, #083f66f5, #061e45f2); box-shadow: 0 10px 22px #00163466; }
.aside-kicker { display: block; margin-bottom: 8px; color: var(--teal); font-size: 8px; font-weight: 800; line-height: 1.5; letter-spacing: .14em; }
.world-tip-card h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.05; text-wrap: balance; }
.world-tip-card h2 span { color: var(--gold); }
.world-tip-card > p { margin: 0 0 12px; color: #d1e6ee; font-size: 11px; line-height: 1.65; }
.tip-score { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid #5a8aa85c; }
.tip-score > span { display: flex; justify-content: space-between; gap: 8px; color: #c7dde9; font-size: 9px; }
.tip-score b { color: #edf7ff; }
.booth-column { position: relative; width: clamp(380px, calc((100svh - 370px) * .8), 580px); max-width: 100%; margin-inline: auto; }
.game-card { overflow: hidden; border: 1px solid var(--level-accent); border-radius: 18px; background: transparent; box-shadow: 0 0 0 4px #092a4cdc, 0 0 0 5px color-mix(in srgb, var(--level-accent), transparent 35%), 0 20px 50px #00112b7a; isolation: isolate; }
.scoreboard { position: relative; display: grid; grid-template-columns: .95fr 1.2fr .95fr 1.1fr 44px; gap: 9px; align-items: center; padding: 12px 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--world-deep), var(--level-accent) 24%), var(--world-deep) 65%, #0c2949); }
.scoreboard::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background-image: var(--level-pattern); background-size: 30px 9px; background-repeat: repeat-x; opacity: .8; pointer-events: none; }
.scoreboard > div { min-width: 0; border-right: 1px solid #8ab0bd28; }
.scoreboard > .clock-cell { border-right: 0; }
.scoreboard span { display: block; margin-bottom: 5px; color: #c0d8e4; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.scoreboard strong { color: var(--cream); font-size: 25px; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.scoreboard strong small { color: #b6cede; font-size: 12px; font-weight: 500; }
.scoreboard #level-value { color: var(--teal); }
.scoreboard #balls-value { color: #ffd5a3; }
.scoreboard #clock-value { color: var(--gold); }
.scoreboard .goal-met { color: var(--green); }
.icon-button { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #6f92aa55; border-radius: 10px; background: #0b2949; color: #c9e4ef; font-size: 27px; }
.scoreboard .icon-button { width: 44px; }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; }
.icon-button:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.player-balance { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 41px; padding: 7px 15px; border-top: 1px solid #68949e22; border-bottom: 1px solid #9fc0c42b; background: #0d2e47; }
.ticket-balance { display: flex; align-items: center; gap: 8px; }
.ticket-icon { flex: none; width: 22px; height: 17px; fill: #f4d882; stroke: #0a2e47; stroke-width: 1.3; }
.ticket-balance > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; }
.ticket-balance strong { font-size: 10px; font-weight: 800; }
.ticket-balance span { color: #a6c6d5; font-size: 9px; }
.best-balance { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.best-balance span { color: #a6c6d5; font-size: 7px; font-weight: 800; letter-spacing: .04em; }
.best-balance strong { color: var(--green); font-size: 12px; font-variant-numeric: tabular-nums; }

.stage-wrap { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; background: transparent; }
#court { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; outline-offset: -5px; }
.scene-label { position: absolute; top: 3.3%; left: 50%; display: flex; gap: 9px; align-items: center; transform: translateX(-50%); color: #fff4c4; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-shadow: 0 2px 3px #572c0f; pointer-events: none; white-space: nowrap; }
.scene-label span + span { padding: 4px 7px; border: 1px solid #ffe8aa88; border-radius: 20px; background: #45311e55; font-size: 7px; letter-spacing: .06em; }
.round-overlay { position: absolute; inset: 0 0 31%; display: flex; align-items: flex-end; justify-content: center; padding: 12px 7% 0; pointer-events: none; }
.round-overlay.is-result { inset: 0; align-items: center; padding: 18px 7%; }
.round-overlay.is-result .overlay-card { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.overlay-card { width: 100%; max-width: 380px; padding: 17px 20px; border: 1px solid #a3c4c792; border-radius: 16px; background: linear-gradient(145deg, #0c3653f5, #0a2148f5); box-shadow: 0 12px 30px #00132b70; backdrop-filter: blur(8px); text-align: center; pointer-events: auto; }
.overlay-card .eyebrow { margin-bottom: 6px; font-size: 8px; letter-spacing: .1em; }
.overlay-card h2 { margin-bottom: 8px; font-size: 25px; line-height: 1.05; }
.overlay-card > p:not(.eyebrow) { margin-bottom: 12px; color: #d2e2ed; font-size: 12px; line-height: 1.45; }
.round-overlay.is-arrival { inset: 7% 0 23%; align-items: center; padding: 6px 7%; }
.round-overlay.is-arrival .overlay-card { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 19px 22px; border: 2px solid var(--world-trim, #e1b96c); background: color-mix(in srgb, var(--world-paper, #fff1cd) 97%, transparent); color: var(--world-ink, #173e55); box-shadow: 0 12px 30px #00132b70, inset 0 0 0 4px #ffffff66; }
.arrival-crest { display: grid; place-items: center; width: 43px; height: 43px; margin: 0 auto 10px; border: 1px solid color-mix(in srgb, var(--world-trim) 70%, transparent); border-radius: 50%; background: #ffffff88; }
.arrival-crest span { width: 26px; height: 26px; background: var(--world-ink); mask: var(--level-motif) center / contain no-repeat; }
.round-overlay.is-arrival .eyebrow { color: var(--world-ink); opacity: .8; font-size: 8px; }
.round-overlay.is-arrival h2 { color: var(--world-ink); font-size: 30px; line-height: 1.06; letter-spacing: -.035em; }
.round-overlay.is-arrival .overlay-card > p:not(.eyebrow) { color: var(--world-ink); }
.round-overlay.is-arrival .opening-announcer { margin-bottom: 10px; }
.round-overlay.is-arrival .opening-announcer strong { color: var(--world-ink); }
.round-overlay.is-arrival .opening-announcer small { color: var(--world-ink); opacity: .75; }
.round-overlay.is-arrival .arrival-level { margin: 0 0 13px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--world-ink) 18%, transparent); font-weight: 800; font-size: 11px; }
.round-overlay.is-arrival .text-button { color: var(--world-ink); }
#skip-introduction { display: block; margin: 5px auto -4px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-width: 170px; min-height: 44px; padding: 10px 20px; border-radius: 9px; background: var(--gold); color: #052449; box-shadow: 0 3px 0 #b7922b; font-size: 13px; font-weight: 800; transition: transform .12s; }
.primary-button:hover { background: #ffed96; transform: translateY(-1px); }
.primary-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #b7922b; }
.text-button { min-height: 44px; padding: 6px 0; background: none; color: var(--teal); font-size: 10px; font-weight: 700; }
.text-button:hover { text-decoration: underline; text-underline-offset: 3px; }
#secondary-button { display: block; min-height: 32px; margin: 5px auto -5px; }
.countdown { position: absolute; inset: 0; display: grid; place-items: center; background: #05142a33; color: var(--gold); font-size: clamp(80px, 12vw, 160px); font-weight: 900; text-shadow: 0 8px 0 #ad631f, 0 15px 30px #0008; pointer-events: none; }
.shot-banner { position: absolute; top: 21%; left: 50%; opacity: 0; transform: translate(-50%, 10px); text-align: center; text-shadow: 0 3px 0 #08273f, 0 6px 14px #001e4299; white-space: nowrap; pointer-events: none; transition: opacity .12s, transform .2s; }
.shot-banner.show { opacity: 1; transform: translate(-50%, 0); }
.shot-banner strong { display: block; color: var(--gold); font-size: clamp(24px, 3vw, 38px); font-weight: 900; letter-spacing: -.03em; }
.shot-banner span { display: block; margin-top: 3px; color: #fcf4dc; font-size: 11px; font-weight: 800; }
.result-stats { display: flex; justify-content: center; gap: 22px; margin: 12px 0; }
.result-stats div strong { display: block; color: var(--green); font-size: 22px; }
.result-stats small { color: #aac9dc; font-size: 8px; letter-spacing: .06em; }
.opening-announcer, .result-announcer { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -4px 0 8px; text-align: left; }
.opening-announcer img, .result-announcer img { flex: none; object-fit: contain; }
.opening-announcer img { width: 36px; height: 36px; }
.result-announcer img { width: 64px; height: 64px; }
.opening-announcer strong, .opening-announcer small, .result-announcer strong, .result-announcer small { display: block; }
.opening-announcer strong { color: var(--gold); font-size: 11px; line-height: 1.3; }
.result-announcer strong { color: var(--gold); font-size: 13px; line-height: 1.3; }
.opening-announcer small, .result-announcer small { margin-top: 1px; color: #c1d9e6; font-size: 9px; line-height: 1.4; }
.time-low { color: #ffb693 !important; }

/* The five physical balls occupy 70–82% of the canvas. Keep guidance below them. */
.power-guide { position: absolute; left: 50%; bottom: 8%; display: grid; grid-template-columns: auto minmax(50px, 1fr) auto; gap: 5px 8px; width: 67%; padding: 8px 12px; transform: translateX(-50%); border: 1px solid #80dce388; border-radius: 12px; background: #082b46ed; box-shadow: 0 4px 15px #0005; pointer-events: none; }
.power-guide > span { color: var(--teal); font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.power-guide > div { position: relative; height: 10px; border-radius: 6px; background: #183d57; }
.power-guide em { position: absolute; top: -2px; bottom: -2px; border: 1px solid #adffd0; border-radius: 4px; background: #88f0bb66; box-shadow: 0 0 8px #7bedae55; }
.power-guide i { position: absolute; top: 3px; left: 0; width: 50%; height: 4px; border-radius: 5px; background: #ffcf7d; box-shadow: 0 0 4px #ffb96866; }
.power-guide b { position: absolute; top: -2px; bottom: -2px; left: 50%; width: 2px; background: #fff7df; }
.power-guide strong { min-width: 28px; color: var(--cream); font-size: 9px; font-variant-numeric: tabular-nums; }
.power-guide > small { grid-column: 1 / -1; color: #ffda9d; font-size: 10px; font-weight: 700; line-height: 1.3; text-align: center; }
.power-guide.is-lined-up { border-color: #99f4bd; background: #103d42ed; }
.power-guide.is-lined-up > small { color: #b4ffd0; }
.ball-hint { position: absolute; left: 50%; bottom: 9.2%; transform: translateX(-50%); color: #fff4c9; font-size: 9px; font-weight: 800; letter-spacing: .065em; text-shadow: 0 1px 4px #272016; white-space: nowrap; pointer-events: none; }
.ball-hint span { display: inline-block; padding: 7px 10px; border: 1px solid #72afbf66; border-radius: 20px; background: #073153d9; }
.power-guide:not([hidden]) ~ .ball-hint { display: none; }
.court-footer { padding: 0 14px; background: #082440; }
.shot-options { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #496b8245; }
.shot-options > span { color: #bfd8e7; font-size: 10px; font-weight: 700; }
.shot-arc-control { display: flex; gap: 3px; padding: 3px; border: 1px solid #406781; border-radius: 10px; background: #061d36; }
.shot-arc-control button { min-width: 56px; min-height: 38px; padding: 7px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #c4dcea; font-size: 10px; font-weight: 800; }
.shot-arc-control button:hover { color: #fff; border-color: #6ca8bc; }
.shot-arc-control button[aria-pressed='true'] { border-color: #9cebe4; background: #9cebe4; color: #11364e; }
.shot-arc-control button:focus-visible { outline-offset: 2px; }
.court-feedback { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 55px; color: #c3d8e7; font-size: 10px; line-height: 1.4; }
.announcer-feedback { display: flex; align-items: center; gap: 8px; min-width: 0; padding-block: 5px; }
.announcer-feedback img { flex: none; width: 39px; height: 39px; object-fit: contain; }
.announcer-feedback > div { min-width: 0; }
.announcer-feedback strong { display: block; margin-bottom: 2px; color: var(--gold); font-size: 10px; line-height: 1.2; }
.announcer-feedback #feedback-line { display: block; }
.court-feedback .text-button { flex-shrink: 0; white-space: nowrap; }
.court-actions { display: flex; align-items: center; flex-shrink: 0; gap: 12px; }
.shot-status { padding-top: 9px; pointer-events: none; }
.shot-status > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #b6d3e6; font-size: 9px; line-height: 1.2; }
.shot-status strong { color: #ffdc9c; font-size: 10px; font-weight: 800; }
.shot-status span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.reload-meter { overflow: hidden; height: 2px; margin-top: 5px; border-radius: 4px; background: #315974; }
.reload-meter i { display: block; width: 100%; height: 100%; border-radius: 4px; background: #ffc479; transition: width .06s linear; }
.shot-status.is-ready strong { color: #b4f3d1; }
.shot-status.is-ready .reload-meter i { background: #8be2c0; }
.player-caption { margin: 14px 15px 0; color: #afc7d7; font-size: 11px; line-height: 1.5; text-align: center; }
.page-footer { display: flex; justify-content: space-between; gap: 20px; max-width: 1440px; width: calc(100% - 80px); margin: 22px auto 0; padding: 20px 0; border-top: 1px solid #284261; color: #92adc4; font-size: 10px; }
.page-footer a { color: #b2cddc; }

/* Navigation opens the familiar level picker and guide; sound mixing stays compact. */
dialog { width: min(820px, calc(100% - 28px)); max-height: 88svh; padding: 28px; border: 1px solid #60849a; border-radius: 20px; background: linear-gradient(145deg, #103454, #092443); color: var(--cream); box-shadow: 0 25px 100px #0009; }
dialog::backdrop { background: #00112acc; backdrop-filter: blur(5px); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.dialog-heading h2 { margin: 0 0 8px; font-size: 28px; line-height: 1.1; }
.dialog-heading .eyebrow { font-size: 8px; }
.dialog-intro, .level-picker-note { color: #bfd4e2; font-size: 12px; line-height: 1.7; }
/* Match Water Race: journey, five world tabs, scene, ten levels and a detail card. */
.levels-dialog { --level-dialog-padding: 28px; width: min(980px, calc(100% - 28px)); padding: var(--level-dialog-padding); scroll-padding-bottom: 110px; }
.levels-dialog .dialog-heading h2 span { color: var(--gold); }
.journey-save { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 20px 0 0; padding: 18px 20px; border: 1px solid #345b7c; border-radius: 13px; background: #0b2b4d; }
.journey-save .aside-kicker { margin-bottom: 7px; color: var(--gold); font-size: 8px; }
.journey-save p { margin: 0; color: #bed3e3; font-size: 11px; line-height: 1.65; }
.journey-latest { flex: none; max-width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #426b88; border-radius: 9px; color: #ccecf2; font-size: 11px; text-align: center; }
.world-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 24px 0 18px; }
.world-tab { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 65px; padding: 11px; border: 1px solid #2b507b; border-radius: 11px; background: #0b2a5a; color: #d1e3f1; text-align: left; }
.world-tab span:first-child { color: var(--world-accent); font-size: 10px; font-weight: 700; }
.world-tab span:last-child { font-size: 11px; font-weight: 700; line-height: 1.4; }
.world-tab:hover { border-color: #6bbfd8; }
.world-tab[aria-pressed='true'] { border-color: var(--world-accent); background: color-mix(in srgb, var(--world-deep), #183d62 35%); color: #fff; box-shadow: inset 0 -3px 0 var(--world-accent); }
.world-tab[aria-pressed='true'] span:first-child { color: var(--gold); }
.world-preview { position: relative; isolation: isolate; overflow: hidden; height: 210px; margin-bottom: 20px; border: 1px solid color-mix(in srgb, var(--level-accent), #537f9d 40%); border-radius: 16px; background: #0c3265 var(--midway-art) var(--preview-position, center 43%) / cover; box-shadow: inset 0 1px 0 #ffffff25; }
.world-preview::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #071b3605 24%, #071b3640 50%, #06182def 100%), linear-gradient(90deg, #071b3620, transparent 70%); }
.world-preview::after { content: ''; position: absolute; inset: auto 0 0; height: 5px; background: var(--level-pattern) left center / 30px 9px repeat-x, var(--world-deep); }
.world-preview-setting { position: absolute; z-index: 1; top: 17px; left: 22px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 44px); padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--level-accent), transparent 20%); border-radius: 7px; background: color-mix(in srgb, var(--world-paper), transparent 5%); color: var(--world-ink); box-shadow: 0 3px 12px #08254d26; font-size: 10px; font-weight: 800; line-height: 1.4; }
.world-preview-setting .setting-motif { width: 16px; height: 16px; }
.world-preview-caption { position: absolute; z-index: 1; left: 24px; bottom: 22px; display: grid; gap: 7px; max-width: calc(100% - 48px); color: #fff9e9; text-shadow: 0 2px 8px #02132c77; }
.world-preview-caption small { color: #fff8df; font-size: 8px; font-weight: 700; letter-spacing: .16em; line-height: 1.5; }
.world-preview-caption strong { font-size: clamp(28px, 3.4vw, 36px); line-height: 1.05; letter-spacing: -.035em; }
.world-preview-caption > span { color: #e5eef4; font-size: 11px; line-height: 1.5; }
.world-panel { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 25px; padding: 24px; border: 1px solid #2a507b; border-radius: 17px; background: radial-gradient(ellipse at 2% 20%, #0d64732b, transparent 55%), #0a2552; }
.world-intro { min-width: 0; }
.world-number { display: block; margin-bottom: 16px; color: var(--world-accent); font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -.08em; opacity: .55; }
.world-intro .eyebrow { margin-bottom: 8px; color: var(--world-accent); font-size: 8px; }
.world-intro h3 { margin: 0 0 10px; font-size: 25px; line-height: 1.12; }
.world-intro > p:not(.eyebrow):not(.world-status) { margin: 0 0 18px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.world-intro .world-status { margin: 0; padding: 10px 11px; border-left: 3px solid var(--world-accent); background: #16416a; color: #e0eef8; font-size: 10px; line-height: 1.65; }
.level-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.level-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 95px; padding: 12px 4px; border: 1px solid #315c85; border-radius: 11px; background: #0e315e; color: #e2f1fb; text-align: center; }
.level-tile::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--level-pattern) left center / 30px 9px repeat-x; opacity: .7; pointer-events: none; }
.level-tile::after { content: ''; position: absolute; top: 7px; right: 6px; width: 11px; height: 11px; background: var(--level-accent); -webkit-mask: var(--level-motif) center / contain no-repeat; mask: var(--level-motif) center / contain no-repeat; opacity: .8; pointer-events: none; }
.level-tile strong { font-size: 27px; line-height: 1; }
.level-tile span { color: #b4d1e6; font-size: 9px; line-height: 1.4; overflow-wrap: anywhere; }
.level-tile:hover { border-color: var(--world-accent); background: #174872; }
.level-tile.is-complete { border-color: #64b69c; }
.level-tile.is-complete span { color: #a4efc7; }
.level-tile.is-locked { border-style: dashed; background: #0b2448; color: #91aac4; }
.level-tile.is-locked span { color: #b5c8da; }
.level-tile.is-locked::before, .level-tile.is-locked::after { opacity: .35; }
.level-tile[aria-pressed='true'] { border-color: var(--gold); background: var(--gold); color: var(--ink); box-shadow: 0 3px 0 #c1a344; }
.level-tile[aria-pressed='true'] span { color: #13345c; }
.level-tile.is-locked[aria-pressed='true'] { border-color: #bacddd; background: #234265; color: #f3f7fc; box-shadow: 0 3px 0 #11243e; }
.level-tile.is-locked[aria-pressed='true'] span { color: #d3e0ec; }
.map-note { margin: 15px 0 0; color: #abc6df; font-size: 10px; line-height: 1.7; }
.level-detail { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 18px; margin-top: 20px; padding: 23px; border: 1px solid color-mix(in srgb, var(--level-accent), #31557e 55%); border-radius: 15px; background: color-mix(in srgb, var(--world-deep), #0d2d5a 70%); }
.level-detail-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #104e74; color: var(--world-accent); font-size: 26px; }
.level-detail-copy { min-width: 0; }
.level-detail .eyebrow { margin: 0 0 7px; color: var(--world-accent); font-size: 8px; letter-spacing: .1em; }
.level-detail h3 { margin: 0 0 7px; font-size: 21px; }
.level-detail p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.level-detail #level-setting-description { margin: -2px 0 8px; color: var(--world-accent); font-size: 11px; font-weight: 700; }
.level-detail #round-goal { display: block; margin-top: 10px; color: var(--gold); font-size: 13px; line-height: 1.5; }
.level-detail #round-time { margin-top: 3px; font-size: 10px; }
.level-picker-actions { position: sticky; bottom: calc(-1 * var(--level-dialog-padding)); z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 20px calc(-1 * var(--level-dialog-padding)) calc(-1 * var(--level-dialog-padding)); padding: 16px var(--level-dialog-padding); border-top: 1px solid #567a91; background: #0b2b4d; box-shadow: 0 -9px 24px #06192e55; }
.level-picker-selection { display: grid; gap: 5px; min-width: 0; }
.level-picker-selection strong { color: var(--cream); font-size: 13px; line-height: 1.4; }
.level-picker-selection span { color: #c0d7e5; font-size: 10px; line-height: 1.5; }
.level-picker-actions .primary-button { flex: none; min-width: 160px; margin: 0; font-size: 12px; }
.level-picker-actions .primary-button:disabled { opacity: .65; background: #334e6b; color: #d0e0ec; box-shadow: none; }
.progress-note { margin: 19px 0 0; color: #a4c0ce; font-size: 10px; line-height: 1.7; }
.help-dialog { width: min(760px, calc(100% - 28px)); }
.how-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); align-items: center; gap: 25px; margin: 22px 0; }
.control-illustration { overflow: hidden; min-width: 0; padding: 19px 9px 17px; border: 1px solid #387793; border-radius: 16px; background: radial-gradient(ellipse at 50% 55%, #16849899, transparent 70%), linear-gradient(160deg, #124776, #082353); text-align: center; }
.control-illustration > svg { display: block; width: 100%; height: auto; margin: 8px 0; overflow: visible; }
.illustration-kicker, .illustration-caption { display: block; color: #cbe8f4; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.illustration-kicker { color: var(--teal); }
.illustration-path, .illustration-path-glow, .illustration-arrow, .illustration-gesture { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.illustration-path { stroke: #b6fff3; stroke-width: 2.5; stroke-dasharray: 4 8; }
.illustration-path-glow { stroke: #64e9db; stroke-width: 13; opacity: .1; }
.illustration-arrow { stroke: #b6fff3; stroke-width: 3; }
.illustration-gesture { stroke: #ffdc92; stroke-width: 2; opacity: .85; }
.how-steps { margin: 0; padding: 0; list-style: none; }
.control-step { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; border-bottom: 1px solid #315572; }
.control-step:first-child { padding-top: 0; }
.control-step:last-child { padding-bottom: 0; border-bottom: 0; }
.control-step > b { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border: 1px solid #4c7992; border-radius: 50%; color: var(--teal); font-size: 11px; }
.control-step h3 { margin: 2px 0 6px; font-size: 16px; letter-spacing: -.02em; }
.control-step p { margin: 0; color: #bfd5e5; font-size: 11px; line-height: 1.65; }
.control-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 25px 0 19px; padding: 20px 0; border-block: 1px solid #40657e; }
.control-options h3 { margin: 0 0 8px; color: var(--gold); font-size: 13px; letter-spacing: -.015em; }
.control-options p { margin: 0; color: #bfd5e5; font-size: 11px; line-height: 1.7; }
.ripple-tip { display: flex; align-items: center; gap: 13px; margin: 18px 0; }
.ripple-tip img { flex-shrink: 0; width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 5px 6px #00102f50); }
.ripple-tip .eyebrow { margin-bottom: 5px; color: var(--gold); font-size: 8px; }
.ripple-tip p:not(.eyebrow) { margin: 0; color: #bfd5e5; font-size: 11px; line-height: 1.7; }
.ticket-caption { margin: 0; padding-top: 16px; border-top: 1px solid #40657e; color: #adc7d9; font-size: 10px; line-height: 1.8; }
.settings-dialog { width: min(530px, calc(100% - 28px)); }
.audio-switches { display: flex; flex-wrap: wrap; gap: 8px; margin: 17px 0 8px; }
.mix-controls { margin: 19px 0; }
.mix-controls label { display: grid; grid-template-columns: 104px minmax(60px, 1fr) 36px; gap: 12px; align-items: center; min-height: 50px; color: #d1e3ee; font-size: 12px; }
.mix-controls output { color: #a6c7dc; font-size: 11px; text-align: right; }
input[type='range'] { appearance: none; width: 100%; height: 44px; margin: 0; border-radius: 5px; background: transparent; accent-color: var(--teal); cursor: pointer; }
input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: #416a83; }
input[type='range']::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 2px solid #b6f4f0; border-radius: 50%; background: var(--teal); box-shadow: 0 1px 6px #0006; }
input[type='range']::-moz-range-track { height: 4px; border-radius: 4px; background: #416a83; }
input[type='range']::-moz-range-thumb { width: 13px; height: 13px; border: 2px solid #b6f4f0; border-radius: 50%; background: var(--teal); }
input[type='range']:disabled { opacity: .4; cursor: default; }
.track-line { margin: 16px 0 0; padding-top: 15px; border-top: 1px solid #3d6279; color: #adc9dc; font-size: 11px; line-height: 1.5; }
.track-line > span:first-child { margin-right: 7px; color: var(--teal); }
.audio-notice { margin: 11px 0 0; color: var(--gold); font-size: 11px; line-height: 1.6; }

.game-card:fullscreen { display: flex; flex-direction: column; justify-content: center; align-items: center; border: 0; border-radius: 0; background: #061b46 var(--midway-art) center / cover; }
.game-card:fullscreen .scoreboard, .game-card:fullscreen .player-balance, .game-card:fullscreen .stage-wrap, .game-card:fullscreen .court-footer { width: min(100vw, calc((100svh - 210px) * .8)); }
.game-card:fullscreen .stage-wrap { flex: none; max-height: calc(100svh - 210px); }

@media (min-width: 1650px) {
  .carnival-midway { padding-top: 36px; padding-bottom: 30px; }
  .booth-column { width: clamp(430px, calc((100svh - 370px) * .8), 620px); }
}
@media (max-width: 1050px) {
  :root { --gutter: 32px; }
  .masthead { padding-inline: 28px; }
  .wordmark { width: 185px; }
  .page-wrap { padding-inline: 20px; }
  .play-heading { gap: 15px; }
  .setting-button { padding-inline: 10px; font-size: 10px; }
  .back-link { font-size: 11px; }
  .carnival-midway { padding-inline: 30px; }
  .scene-label { font-size: 8px; }
  .scene-label span + span { font-size: 6px; }
}
@media (max-width: 980px) {
  .carnival-midway { display: grid; justify-items: center; gap: 18px; }
  .world-sign { position: relative; top: auto; left: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 14px; width: min(420px, 100%); padding: 12px 15px; transform: none; text-align: left; }
  [data-shape] .world-sign { border-radius: 12px; transform: none; }
  .world-sign::before { inset: auto 8px 0; height: 4px; opacity: .6; }
  .world-sign .eyebrow, .world-range, .world-challenge small { display: none; }
  .world-sign h2 { margin: 0; font-size: 23px; }
  .world-challenge { padding: 0 0 0 13px; border-top: 0; border-left: 1px solid color-mix(in srgb, var(--world-ink), transparent 75%); text-align: right; }
  .world-challenge span { margin-bottom: 3px; font-size: 9px; }
  .world-challenge strong { font-size: 11px; }
  .world-setting { grid-column: 1 / -1; justify-content: flex-start; gap: 6px; margin: -4px 0 0; padding-top: 7px; font-size: 8px; }
  .world-setting .setting-motif { width: 14px; height: 14px; }
  .world-tips { position: relative; top: auto; right: auto; display: flex; align-items: center; width: min(420px, 100%); text-align: left; }
  .world-tips > img { flex: 0 0 88px; width: 88px; margin: 0 -5px 0 0; }
  .world-tip-card { flex: 1; min-width: 0; padding: 15px 17px; }
  .world-tip-card .aside-kicker { margin-bottom: 5px; }
  .world-tip-card h2 { margin-bottom: 7px; font-size: 21px; text-wrap: initial; }
  .world-tip-card > p { margin: 0; font-size: 11px; line-height: 1.55; }
  .tip-score { display: none; }
}
@media (max-width: 760px) {
  :root { --gutter: 24px; }
  .masthead { gap: 10px; padding: 7px 18px; min-height: 58px; }
  .wordmark { width: 145px; }
  .masthead nav { gap: 14px; }
  .masthead nav a { font-size: 10px; }
  .game-navigation { width: calc(100% - 34px); gap: 18px; margin-bottom: 0; }
  .game-navigation > span { font-size: 8px; letter-spacing: .04em; }
  .game-navigation > a, .game-navigation > button { font-size: 11px; }
  .page-wrap { padding: 0; }
  .play-heading { grid-template-columns: 1fr auto; gap: 10px; padding: 7px 17px 14px; }
  .play-heading .back-link { grid-column: 1 / -1; min-height: 28px; font-size: 10px; }
  .game-title { text-align: left; }
  h1 { font-size: 27px; }
  .game-title .eyebrow { font-size: 7px; }
  .player-settings { gap: 5px; }
  .setting-button { padding-inline: 8px; font-size: 9px; }
  .carnival-midway { padding: 25px 24px 24px; border-inline: 0; border-radius: 0; }
  .midway-scenery { background-position: var(--midway-position, center center); }
  .booth-column { width: min(420px, 100%); }
  .game-card { border-radius: 15px; }
  .scoreboard { grid-template-columns: .9fr 1.15fr .9fr 1.1fr 44px; gap: 7px; padding: 11px 12px; }
  .scoreboard strong { font-size: 24px; }
  .scoreboard strong small { font-size: 11px; }
  .scoreboard span { font-size: 7px; letter-spacing: .035em; }
  .scoreboard .icon-button { width: 44px; }
  .player-balance { min-height: 39px; padding-inline: 12px; }
  .ticket-balance > div { display: block; }
  .ticket-balance span { display: block; margin-top: 2px; font-size: 8px; }
  .best-balance { gap: 5px; }
  .best-balance span { font-size: 7px; }
  .scene-label { top: 3%; gap: 6px; font-size: 7px; letter-spacing: .08em; }
  .scene-label span + span { padding: 3px 5px; font-size: 5px; }
  .overlay-card { padding: 13px 15px; border-radius: 13px; }
  .overlay-card h2 { margin-bottom: 7px; font-size: 22px; }
  .overlay-card > p:not(.eyebrow) { margin-bottom: 10px; font-size: 11px; line-height: 1.4; }
  .overlay-card .eyebrow { font-size: 7px; }
  .primary-button { min-width: 155px; font-size: 12px; }
  .round-overlay { padding-inline: 7%; }
  .power-guide { width: 70%; padding: 7px 9px; gap: 4px 7px; }
  .power-guide > small { font-size: 9px; }
  .ball-hint { font-size: 7px; letter-spacing: .035em; }
  .ball-hint span { padding: 6px 9px; }
  .shot-banner { top: 21%; }
  .shot-banner span { font-size: 10px; }
  .result-stats { gap: 18px; margin: 10px 0; }
  .result-stats div strong { font-size: 19px; }
  .result-stats small { font-size: 7px; }
  .court-footer { padding-inline: 12px; }
  .court-feedback { font-size: 9px; }
  .announcer-feedback { gap: 6px; }
  .announcer-feedback img { width: 35px; height: 35px; }
  .court-feedback .text-button { font-size: 9px; }
  .court-actions { gap: 10px; }
  .player-caption { margin-top: 12px; font-size: 10px; }
  .page-footer { width: calc(100% - 36px); margin-top: 18px; padding-block: 18px; font-size: 9px; }
  dialog { padding: 22px; }
  .dialog-heading h2 { font-size: 25px; }
}
@media (max-width: 800px) {
  .world-tabs { gap: 6px; }
  .world-tab { gap: 6px; padding: 10px 8px; }
  .world-tab span:last-child { font-size: 10px; }
  .world-panel { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 18px; padding: 20px; }
  .world-intro h3 { font-size: 23px; }
  .level-grid { gap: 8px; }
  .level-tile { min-height: 88px; }
  .level-detail { grid-template-columns: 43px minmax(0, 1fr); gap: 15px; padding: 20px; }
  .level-detail-icon { width: 43px; height: 43px; }
}
@media (max-width: 640px) {
  .levels-dialog { --level-dialog-padding: 20px; scroll-padding-bottom: 145px; }
  .journey-save { flex-wrap: wrap; gap: 14px; padding: 16px; }
  .journey-latest { width: 100%; }
  .level-picker-actions { flex-wrap: wrap; gap: 10px; padding-block: 12px; }
  .level-picker-actions .primary-button { width: 100%; }
  .world-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
  .world-tab { min-height: 55px; gap: 10px; padding: 11px; }
  .world-tab:last-child { grid-column: 1 / -1; }
  .world-tab span:last-child { font-size: 11px; }
  .world-preview { height: 180px; margin-bottom: 18px; }
  .world-preview-setting { top: 14px; left: 17px; max-width: calc(100% - 34px); padding: 6px 8px; font-size: 9px; }
  .world-preview-caption { left: 18px; bottom: 18px; max-width: calc(100% - 36px); }
  .world-preview-caption strong { font-size: 28px; }
  .world-preview-caption small { font-size: 7px; }
  .world-panel { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 18px; }
  .world-intro { display: grid; grid-template-columns: 49px minmax(0, 1fr); align-items: start; column-gap: 13px; }
  .world-number { grid-column: 1; grid-row: 1 / 4; margin: 0; font-size: 42px; }
  .world-intro .eyebrow, .world-intro h3, .world-intro > p:not(.world-status) { grid-column: 2; }
  .world-intro h3 { margin-bottom: 7px; font-size: 24px; }
  .world-intro .world-status { grid-column: 1 / -1; }
  .level-tile { min-height: 82px; }
  .level-tile strong { font-size: 25px; }
  .level-tile span { font-size: 8px; }
  .level-detail { padding: 18px; }
  .midway-balloons { top: 16px; left: -12px; width: 72px; }
}
@media (max-width: 370px) {
  .levels-dialog { --level-dialog-padding: 16px; }
  .world-panel { padding: 14px; }
  .world-tabs { gap: 6px; }
  .world-tab { padding: 10px 8px; }
  .world-tab span:last-child { font-size: 10px; }
  .level-grid { gap: 5px; }
  .level-tile { min-height: 72px; padding-inline: 2px; border-radius: 8px; }
  .level-tile strong { font-size: 22px; }
  .level-tile span { font-size: 7px; }
  .world-intro h3 { font-size: 22px; }
  .world-preview-caption strong { font-size: 26px; }
  .shot-options { gap: 6px; }
  .shot-arc-control button { min-width: 49px; padding-inline: 10px; }
}
@media (max-width: 640px) {
  .how-layout { grid-template-columns: 1fr; gap: 22px; margin-top: 18px; }
  .control-illustration { width: 100%; max-width: 280px; justify-self: center; padding: 13px 10px; }
  .control-illustration > svg { max-height: 150px; margin-block: 5px; }
  .control-options { grid-template-columns: 1fr; gap: 17px; margin-top: 22px; }
  .control-options h3 { margin-bottom: 5px; }
  .control-step p, .control-options p { font-size: 12px; }
  .result-announcer { gap: 6px; margin-bottom: 6px; }
  .result-announcer img { width: 56px; height: 56px; }
  .result-announcer strong { font-size: 12px; }
  .result-announcer small { font-size: 9px; }
  .opening-announcer { gap: 6px; margin-bottom: 6px; }
  .opening-announcer img { width: 32px; height: 32px; }
  .opening-announcer small { font-size: 8px; }
}
@media (max-width: 520px) {
  .round-overlay.is-arrival { inset: 5% 0 19%; padding-inline: 6%; }
  .round-overlay.is-arrival .overlay-card { padding: 13px 14px; }
  .round-overlay.is-arrival h2 { font-size: 24px; }
  .round-overlay.is-arrival .eyebrow { font-size: 7px; }
  .round-overlay.is-arrival .arrival-level { font-size: 10px; margin-bottom: 10px; padding-top: 7px; }
  .arrival-crest { width: 32px; height: 32px; margin-bottom: 7px; }
  .arrival-crest span { width: 21px; height: 21px; }
  .play-heading { gap: 7px 10px; }
  h1 { font-size: 26px; }
  .player-settings { gap: 5px; }
  .setting-button { padding-inline: 9px; font-size: 10px; }
  .player-settings .setting-button { padding-inline: 8px; font-size: 9px; }
  .carnival-midway { padding: 23px 17px 22px; }
  .world-sign { padding: 11px 12px; gap: 10px; }
  .world-sign h2 { font-size: 21px; }
  .world-challenge { padding-left: 10px; }
  .world-tips > img { flex-basis: 74px; width: 74px; }
  .world-tip-card { padding: 13px 14px; }
  .world-tip-card h2 { font-size: 20px; }
  .scoreboard { padding-inline: 11px; }
  .scoreboard #level-value small { display: none; }
  .scoreboard strong { font-size: 23px; }
  .scoreboard strong small { font-size: 10px; }
  .overlay-card h2 { font-size: 20px; }
  .overlay-card > p:not(.eyebrow) { font-size: 10px; }
  .overlay-card .eyebrow { font-size: 6px; }
  .mix-controls label { grid-template-columns: 87px minmax(45px, 1fr) 30px; gap: 8px; font-size: 11px; }
  .mix-controls output { font-size: 10px; }
}
@media (max-width: 370px) {
  .round-overlay.is-arrival h2 { font-size: 21px; }
  .round-overlay.is-arrival .overlay-card { padding: 11px 12px; }
  .round-overlay.is-arrival .opening-announcer { margin-bottom: 6px; }
  h1 { font-size: 24px; }
  .carnival-midway { padding-inline: 12px; }
  .scoreboard { gap: 6px; padding-inline: 9px; }
  .scoreboard strong { font-size: 21px; }
  .scoreboard span { font-size: 6px; }
  .overlay-card { padding: 11px 12px; }
  .overlay-card h2 { font-size: 19px; }
  .overlay-card > p:not(.eyebrow) { font-size: 9px; }
  .scene-label { font-size: 6px; }
  .ball-hint { font-size: 6px; }
  .court-feedback { gap: 7px; }
  .court-actions { gap: 8px; }
  .world-sign h2 { font-size: 20px; }
  .world-tips > img { flex-basis: 64px; width: 64px; }
  .world-tip-card h2 { font-size: 19px; }
  dialog { padding: 18px; }
  .dialog-heading h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .primary-button:hover { transform: none; }
  .midway-scenery * { animation-play-state: paused !important; }
}