:root {
  --ink: #102b34;
  --ink-deep: #091b22;
  --cream: #fff3cf;
  --paper: #fffaf0;
  --blue: #37d7e7;
  --blue-dark: #158da8;
  --orange: #ff765e;
  --orange-dark: #bc4050;
  --gold: #ffc857;
  --green: #47c69c;
  --panel: rgba(8, 29, 36, .86);
  --line: rgba(255, 243, 207, .22);
  --shadow: 0 8px 0 rgba(3, 17, 22, .5), 0 18px 45px rgba(2, 14, 19, .34);
  font-family: Inter, ui-rounded, "Avenir Next", Avenir, "Segoe UI", sans-serif;
  color: var(--cream);
  background: var(--ink-deep);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { background: #0a2028; user-select: none; -webkit-user-select: none; touch-action: none; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
button:active { transform: translateY(2px); }
[hidden] { display: none !important; }

#game-shell { position: relative; width: 100%; height: 100%; min-height: 420px; overflow: hidden; background: #173d43; isolation: isolate; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; outline: 0; touch-action: none; cursor: crosshair; }
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 44%, transparent 34%, rgba(2, 18, 23, .22) 78%, rgba(1, 12, 17, .6) 112%); mix-blend-mode: multiply; }
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #fff8db; mix-blend-mode: screen; transition: opacity 180ms ease; }
#flash.active { opacity: .34; transition-duration: 30ms; }

.hud-panel { border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(15,51,61,.94), rgba(8,31,39,.92)); box-shadow: 0 5px 0 rgba(2,18,24,.42), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(10px); }
#match-hud { position: absolute; z-index: 8; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%); height: 60px; min-width: min(620px, calc(100% - 300px)); display: grid; grid-template-columns: 1fr 128px 1fr; border-radius: 9px; opacity: 1; transition: opacity 250ms ease, transform 250ms ease; }
.team-score { display: flex; align-items: center; gap: 11px; padding: 0 14px; min-width: 0; }
.orange-score { justify-content: flex-end; }
.team-dot { width: 13px; height: 13px; background: var(--blue); box-shadow: 0 3px 0 var(--blue-dark); flex: 0 0 auto; }
.orange-score .team-dot { background: var(--orange); box-shadow: 0 3px 0 var(--orange-dark); }
.team-name { font-size: 11px; font-weight: 900; letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-number { min-width: 38px; color: #fff; font-size: 37px; line-height: 1; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; text-align: center; text-shadow: 0 3px 0 rgba(0,0,0,.34); transform-origin: center top; }
.score-number.flip { animation: score-flip 620ms cubic-bezier(.2,.8,.2,1); }
@keyframes score-flip { 0% { transform: perspective(80px) rotateX(0); } 46% { transform: perspective(80px) rotateX(-90deg) scaleY(.2); } 48% { opacity: .2; } 52% { opacity: 1; transform: perspective(80px) rotateX(70deg) scaleY(.3); } 100% { transform: perspective(80px) rotateX(0); } }
.match-center { display: flex; flex-direction: column; align-items: center; justify-content: center; border-inline: 1px solid rgba(255,255,255,.12); color: #f8d879; text-align: center; }
#match-status { font-size: 10px; font-weight: 950; letter-spacing: .13em; }
#match-target { margin-top: 3px; color: rgba(255,255,255,.55); font-size: 8px; font-weight: 800; letter-spacing: .14em; }

#top-actions { position: absolute; z-index: 9; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); display: flex; gap: 7px; }
.icon-button { min-width: 58px; height: 42px; padding: 0 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 7px; color: rgba(255,255,255,.78); background: rgba(8,30,37,.8); box-shadow: 0 4px 0 rgba(1,14,18,.42); font-size: 8px; font-weight: 950; letter-spacing: .09em; cursor: pointer; backdrop-filter: blur(8px); }
.icon-button:hover { background: rgba(20,63,73,.94); color: #fff; }
.sound-off { display: none; }
#sound-button[aria-pressed="true"] .sound-on { display: none; }
#sound-button[aria-pressed="true"] .sound-off { display: inline; }

#rod-readout { position: absolute; z-index: 8; left: max(18px, env(safe-area-inset-left)); top: max(18px, env(safe-area-inset-top)); width: 154px; min-height: 55px; padding: 9px 12px; border-left: 5px solid var(--blue); border-radius: 5px; display: grid; grid-template-columns: 1fr; transition: opacity 200ms ease; }
.readout-label { color: rgba(255,255,255,.48); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
#rod-role { margin-top: 2px; color: #fff; font-size: 13px; font-weight: 950; letter-spacing: .06em; }
.readout-keys { margin-top: 2px; color: var(--blue); font-size: 7px; font-weight: 900; letter-spacing: .08em; }

#moment-banner { position: absolute; z-index: 20; left: 50%; top: 44%; width: min(450px, 82vw); display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%) scale(.75); opacity: 0; pointer-events: none; text-align: center; filter: drop-shadow(0 10px 0 rgba(3,21,27,.38)); transition: opacity 170ms ease, transform 320ms cubic-bezier(.2,1.4,.35,1); }
#moment-banner.active { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#moment-kicker { padding: 5px 11px; background: var(--cream); color: var(--ink); font-size: 9px; font-weight: 950; letter-spacing: .2em; box-shadow: 4px 4px 0 var(--ink); }
#moment-title { margin-top: 5px; color: white; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(64px, 10vw, 116px); line-height: .82; letter-spacing: .025em; text-shadow: 5px 5px 0 var(--orange-dark), 10px 10px 0 rgba(3,25,31,.58); transform: rotate(-2deg); }
#moment-subtitle { margin-top: 15px; padding: 7px 13px; background: var(--orange); box-shadow: 4px 4px 0 var(--orange-dark); font-size: 10px; font-weight: 950; letter-spacing: .15em; }
#moment-banner.blue #moment-title { text-shadow: 5px 5px 0 var(--blue-dark), 10px 10px 0 rgba(3,25,31,.58); }
#moment-banner.blue #moment-subtitle { background: var(--blue); box-shadow: 4px 4px 0 var(--blue-dark); color: var(--ink); }
#moment-banner.tension #moment-title { font-size: clamp(46px, 8vw, 86px); color: var(--gold); text-shadow: 5px 5px 0 #b75e44, 10px 10px 0 rgba(3,25,31,.58); }

.screen { position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); visibility: hidden; opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 48%, rgba(12,48,56,.05), rgba(5,25,31,.44)); transition: opacity 260ms ease, visibility 0s linear 260ms; }
.screen.active { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 260ms ease; }
.title-card { position: relative; width: min(520px, 92vw); padding: 25px 36px 23px; background: linear-gradient(145deg, rgba(13,50,59,.93), rgba(7,30,37,.97)); border: 2px solid rgba(255,255,255,.16); border-radius: 14px; box-shadow: 0 11px 0 rgba(4,20,25,.62), 0 28px 70px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.08); text-align: center; backdrop-filter: blur(13px); }
.title-card::before, .title-card::after { content: ""; position: absolute; width: 15px; height: 15px; background: var(--gold); box-shadow: 3px 3px 0 #b85a43; }
.title-card::before { left: 15px; top: 15px; }
.title-card::after { right: 15px; bottom: 15px; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--gold); font-size: 9px; font-weight: 950; letter-spacing: .24em; }
.eyebrow span { width: 35px; height: 2px; background: currentColor; }
h1 { margin: 7px 0 0; line-height: .78; text-transform: uppercase; }
h1 span { display: block; color: var(--cream); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(55px, 8vw, 82px); letter-spacing: .07em; text-shadow: 4px 4px 0 #bb554d, 8px 8px 0 rgba(0,0,0,.24); transform: translateX(3px) rotate(-1deg); }
h1 strong { display: block; margin-top: 5px; color: var(--blue); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(39px, 5.4vw, 58px); letter-spacing: .09em; text-shadow: 4px 4px 0 var(--blue-dark), 8px 8px 0 rgba(0,0,0,.25); transform: translateX(-2px) rotate(1deg); }
.tagline { margin: 17px 0 18px; color: rgba(255,255,255,.68); font-size: 11px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.title-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.big-button { min-height: 69px; padding: 10px 12px; border: 0; border-radius: 7px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 6px 0 var(--blue-dark), 0 10px 22px rgba(0,0,0,.2); transition: transform 100ms ease, filter 120ms ease; }
.big-button:hover { filter: brightness(1.08); transform: translateY(-2px); }
.big-button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--blue-dark); }
.big-button.primary { background: var(--blue); }
.big-button.secondary { background: var(--orange); box-shadow: 0 6px 0 var(--orange-dark), 0 10px 22px rgba(0,0,0,.2); }
.big-button.secondary:active { box-shadow: 0 2px 0 var(--orange-dark); }
.big-button.center { width: 100%; grid-template-columns: 1fr; text-align: center; }
.big-button strong { display: block; font-size: 12px; font-weight: 1000; letter-spacing: .03em; }
.big-button small { display: block; margin-top: 2px; color: rgba(8,39,47,.68); font-size: 8px; font-weight: 800; }
.button-number { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid currentColor; font-family: Impact, sans-serif; font-size: 20px; }
.button-arrow { font-size: 29px; line-height: 1; }
.instant-controls { margin-top: 18px; display: flex; justify-content: center; gap: 14px; color: rgba(255,255,255,.53); font-size: 7px; font-weight: 850; letter-spacing: .05em; }
kbd { min-width: 18px; height: 18px; margin-right: 2px; padding: 3px 4px; display: inline-block; border: 1px solid rgba(255,255,255,.29); border-bottom-width: 3px; border-radius: 3px; color: #fff; background: rgba(255,255,255,.08); font-family: inherit; font-size: 7px; text-align: center; }
.space-key { min-width: 34px; }
.attract-label { margin-top: 14px; color: rgba(255,255,255,.38); font-size: 7px; font-weight: 900; letter-spacing: .17em; }
.attract-label i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #66dfa6; box-shadow: 0 0 0 4px rgba(102,223,166,.11); animation: live-pulse 1.8s infinite; }
@keyframes live-pulse { 50% { opacity: .35; transform: scale(.7); } }
.title-footer { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); color: rgba(255,255,255,.35); font-size: 8px; font-weight: 850; letter-spacing: .17em; }

#setup-screen { background: rgba(4,23,29,.58); backdrop-filter: blur(6px); }
.setup-card { position: relative; width: min(720px, 95vw); padding: 25px 31px 28px; border: 2px solid rgba(255,255,255,.15); border-radius: 13px; background: linear-gradient(150deg, rgba(15,54,63,.97), rgba(6,29,36,.98)); box-shadow: var(--shadow); }
.back-button { position: absolute; left: 20px; top: 19px; padding: 7px 9px; border: 0; color: rgba(255,255,255,.57); background: transparent; font-size: 9px; font-weight: 950; letter-spacing: .1em; cursor: pointer; }
.back-button:hover { color: white; }
.setup-heading { text-align: center; }
#setup-step { color: var(--blue); font-size: 8px; font-weight: 950; letter-spacing: .2em; }
.setup-heading h2, .dialog-card h2 { margin: 5px 0 0; color: var(--cream); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 38px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.setup-heading p, .dialog-card > p { margin: 5px 0 0; color: rgba(255,255,255,.52); font-size: 10px; font-weight: 750; }
.setup-grid { margin-top: 21px; display: grid; grid-template-columns: 1.1fr 1.65fr .72fr; gap: 12px; }
.setup-group { min-width: 0; margin: 0; padding: 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(0,0,0,.09); }
.setup-group legend { padding: 0 7px; color: rgba(255,255,255,.52); font-size: 7px; font-weight: 950; letter-spacing: .15em; }
.palette-options { display: flex; flex-direction: column; gap: 7px; }
.palette { min-height: 38px; padding: 7px; border: 1px solid transparent; border-radius: 5px; display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.54); background: rgba(255,255,255,.055); font-size: 7px; font-weight: 950; letter-spacing: .06em; cursor: pointer; }
.palette i { width: 17px; height: 17px; background: var(--swatch); box-shadow: 0 3px 0 color-mix(in srgb, var(--swatch) 65%, #222); }
.palette span { margin-left: 2px; }
.palette.active { border-color: var(--cream); color: #fff; background: rgba(255,255,255,.11); }
.segmented { display: grid; gap: 7px; }
.segmented button { min-height: 38px; padding: 7px 9px; border: 1px solid transparent; border-radius: 5px; color: rgba(255,255,255,.56); background: rgba(255,255,255,.055); text-align: left; cursor: pointer; }
.segmented strong { display: block; color: inherit; font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.segmented small { display: block; margin-top: 1px; font-size: 7px; font-weight: 750; opacity: .69; }
.segmented button.active { border-color: var(--blue); color: var(--cream); background: rgba(55,215,231,.12); box-shadow: inset 4px 0 var(--blue); }
.score-choice { height: 100%; display: grid; grid-template-columns: 1fr; gap: 7px; }
.score-choice button { min-width: 38px; min-height: 34px; border: 1px solid transparent; border-radius: 5px; color: rgba(255,255,255,.55); background: rgba(255,255,255,.055); font-family: Impact, sans-serif; font-size: 20px; cursor: pointer; }
.score-choice button.active { border-color: var(--gold); color: var(--ink); background: var(--gold); box-shadow: 0 3px 0 #bc6747; }
.start-button { position: relative; width: min(370px, 82%); min-height: 54px; margin: 20px auto 0; border: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 13px; color: var(--ink); background: var(--gold); box-shadow: 0 6px 0 #bd6546, 0 12px 23px rgba(0,0,0,.2); font-size: 13px; font-weight: 1000; letter-spacing: .07em; cursor: pointer; }
.start-button:hover { filter: brightness(1.08); transform: translateY(-2px); }
.start-button:active { transform: translateY(4px); box-shadow: 0 2px 0 #bd6546; }
.start-button i { width: 15px; height: 15px; background: var(--cream); box-shadow: inset -4px -3px rgba(0,0,0,.16); transform: rotate(11deg); }
.duo-keys { margin-top: 15px; display: flex; justify-content: center; gap: 26px; color: rgba(255,255,255,.5); font-size: 8px; font-weight: 850; }
.duo-keys b { color: var(--blue); }
.duo-keys span:last-child b { color: var(--orange); }

.screen.compact { background: rgba(4,22,28,.69); backdrop-filter: blur(8px); }
.dialog-card { width: min(390px, 90vw); padding: 30px 35px 29px; border: 2px solid rgba(255,255,255,.16); border-radius: 12px; background: linear-gradient(150deg, #143c45, #08252c); box-shadow: var(--shadow); text-align: center; }
.dialog-kicker { display: inline-block; padding: 5px 8px; color: var(--ink); background: var(--gold); box-shadow: 3px 3px 0 #b75d45; font-size: 8px; font-weight: 1000; letter-spacing: .17em; }
.dialog-card .big-button { margin-top: 24px; }
.text-button { margin: 14px 8px 0; padding: 6px; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.59); background: transparent; font-size: 9px; font-weight: 850; cursor: pointer; }
.text-button:hover { color: white; }
.winner-card { position: relative; overflow: hidden; }
#winner-crown { width: 68px; height: 58px; margin: 13px auto -5px; display: grid; place-items: center; color: var(--cream); background: var(--orange); box-shadow: 6px 6px 0 var(--orange-dark); font-size: 34px; transform: rotate(-4deg); }
#winner-score { color: var(--gold); font-family: Impact, sans-serif; font-size: 24px; letter-spacing: .13em; }
.winner-rays { position: absolute; width: 800px; height: 800px; background: repeating-conic-gradient(from 0deg, rgba(255,200,87,.16) 0 8deg, transparent 8deg 20deg); animation: rays-spin 22s linear infinite; }
@keyframes rays-spin { to { transform: rotate(360deg); } }

#hint-toast { position: absolute; z-index: 11; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 8px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 5px; color: rgba(255,255,255,.68); background: rgba(4,25,31,.76); box-shadow: 0 4px 0 rgba(0,0,0,.3); font-size: 8px; font-weight: 900; letter-spacing: .1em; pointer-events: none; opacity: 0; transition: opacity 300ms ease; }
#hint-toast.show { opacity: 1; }
.touch-hint { display: none; }

#touch-controls { position: absolute; z-index: 15; inset: auto 0 max(8px, env(safe-area-inset-bottom)); display: none; justify-content: space-between; padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); pointer-events: none; }
.touch-pad { position: relative; display: grid; grid-template-columns: repeat(5, minmax(48px, 58px)); gap: 5px; pointer-events: auto; filter: drop-shadow(0 5px 0 rgba(1,15,19,.38)); }
.touch-pad button { min-width: 48px; min-height: 52px; padding: 0; border: 1px solid rgba(255,255,255,.17); border-radius: 7px; color: #fff; background: rgba(7,34,41,.9); font-size: 17px; font-weight: 950; box-shadow: inset 0 1px rgba(255,255,255,.08); touch-action: none; }
.touch-pad button.pressed, .touch-pad button:active { color: var(--ink); background: var(--blue); transform: translateY(3px); }
.touch-kick { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink) !important; background: var(--blue) !important; border-color: rgba(255,255,255,.42) !important; box-shadow: inset 0 2px rgba(255,255,255,.3), 0 4px 0 var(--blue-dark) !important; }
.touch-kick b { font-size: 8px; letter-spacing: .09em; }
.touch-kick span { font-size: 16px; line-height: 1; }
.orange-pad .touch-kick { background: var(--orange) !important; box-shadow: inset 0 2px rgba(255,255,255,.3), 0 4px 0 var(--orange-dark) !important; }
.orange-pad button.pressed, .orange-pad button:active { background: var(--orange); }
.touch-pad output { position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%); padding: 4px 8px; border-radius: 3px; color: var(--ink); background: var(--blue); font-size: 7px; font-weight: 950; white-space: nowrap; }
.orange-pad output { background: var(--orange); }

#rotate-notice { position: absolute; z-index: 100; inset: 0; display: none; place-items: center; align-content: center; gap: 9px; color: var(--cream); background: #0b2931; text-align: center; }
#rotate-notice strong { font-size: 20px; }
#rotate-notice span { color: rgba(255,255,255,.55); font-size: 11px; }
.phone-icon { width: 42px; height: 68px; padding: 6px; border: 3px solid var(--blue); border-radius: 7px; animation: phone-turn 2s ease-in-out infinite; }
.phone-icon i { display: block; width: 100%; height: 100%; background: rgba(55,215,231,.15); }
@keyframes phone-turn { 0%,20% { transform: rotate(0); } 60%,100% { transform: rotate(90deg); } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

#game-shell[data-state="title"] #match-hud, #game-shell[data-state="setup"] #match-hud { opacity: .6; transform: translateX(-50%) scale(.92); }
#game-shell[data-state="title"] #rod-readout, #game-shell[data-state="setup"] #rod-readout, #game-shell[data-state="title"] #pause-button, #game-shell[data-state="setup"] #pause-button { opacity: 0; pointer-events: none; }
#game-shell[data-state="title"] #game-canvas, #game-shell[data-state="setup"] #game-canvas { cursor: default; }
#game-shell[data-state="gameover"] #match-hud { z-index: 35; }

@media (pointer: coarse), (max-width: 900px) and (max-height: 600px) {
  #touch-controls { display: flex; }
  #hint-toast { bottom: 78px; }
  .mouse-hint { display: none; }
  .touch-hint { display: inline; }
  #rod-readout { display: none; }
  #game-canvas { cursor: default; }
}

@media (max-width: 900px) and (orientation: landscape) {
  #game-shell { min-height: 0; }
  #match-hud { top: 6px; min-width: 360px; width: min(58vw, 510px); height: 44px; grid-template-columns: 1fr 92px 1fr; }
  .team-score { padding: 0 8px; gap: 6px; }
  .team-name { max-width: 76px; font-size: 7px; }
  .score-number { min-width: 26px; font-size: 27px; }
  .team-dot { width: 9px; height: 9px; }
  #match-status { font-size: 7px; }
  #match-target { font-size: 6px; }
  #top-actions { top: 7px; right: 7px; gap: 4px; }
  .icon-button { min-width: 44px; height: 37px; padding: 0 6px; font-size: 6px; }
  #camera-button { display: none; }
  .title-card { width: min(620px, 87vw); max-height: calc(100vh - 24px); padding: 15px 28px 13px; }
  .title-card::before, .title-card::after { width: 10px; height: 10px; }
  .eyebrow { font-size: 7px; }
  h1 span { font-size: clamp(42px, 10vh, 64px); }
  h1 strong { font-size: clamp(30px, 7vh, 44px); }
  .tagline { margin: 10px 0 12px; font-size: 8px; }
  .title-actions { max-width: 470px; margin: auto; }
  .big-button { min-height: 57px; }
  .instant-controls { margin-top: 11px; }
  .attract-label { margin-top: 9px; }
  .title-footer { display: none; }
  .setup-card { width: min(760px, 96vw); max-height: calc(100vh - 16px); padding: 14px 23px 16px; }
  .setup-heading h2 { font-size: 27px; }
  .setup-heading p { display: none; }
  .setup-grid { margin-top: 10px; grid-template-columns: 1.15fr 1.55fr .65fr; }
  .setup-group { padding: 8px; }
  .palette-options, .segmented, .score-choice { gap: 4px; }
  .palette, .segmented button { min-height: 31px; padding: 4px 6px; }
  .palette i { width: 14px; height: 14px; }
  .score-choice button { min-height: 28px; font-size: 16px; }
  .start-button { min-height: 43px; margin-top: 9px; }
  .duo-keys { margin-top: 8px; }
  #moment-banner { top: 40%; }
  #moment-title { font-size: clamp(48px, 16vh, 84px); }
  #hint-toast { display: none; }
  .touch-pad { grid-template-columns: repeat(5, minmax(45px, 54px)); gap: 4px; }
  .touch-pad button { min-width: 45px; min-height: 47px; }
  .dialog-card { max-height: calc(100vh - 20px); padding: 19px 30px; }
  .dialog-card .big-button { margin-top: 14px; }
}

@media (max-width: 680px) and (orientation: landscape) {
  #match-hud { left: 50%; width: 46vw; min-width: 270px; grid-template-columns: 1fr 72px 1fr; }
  .team-name, .team-dot { display: none; }
  .team-score { justify-content: center; }
  #top-actions .icon-button { min-width: 39px; font-size: 0; }
  #sound-button::after { content: "♪"; font-size: 16px; }
  #pause-button::after { content: "Ⅱ"; font-size: 13px; }
  .title-card { width: min(560px, 92vw); }
  .title-actions { grid-template-columns: 1fr 1fr; }
  .instant-controls { display: none; }
  .touch-pad { grid-template-columns: repeat(5, 45px); }
  .touch-pad button { min-width: 45px; }
  #touch-controls.duo .touch-pad { grid-template-columns: repeat(3, 45px); }
  #touch-controls.duo .touch-select { display: none; }
  .orange-pad { margin-left: auto; }
}

@media (orientation: portrait) and (max-width: 700px) {
  #rotate-notice { display: grid; }
}

@media (max-height: 460px) and (orientation: landscape) {
  .title-card { padding-block: 10px; }
  h1 span { font-size: 42px; }
  h1 strong { font-size: 30px; }
  .tagline { margin: 7px 0 9px; }
  .attract-label { display: none; }
  .setup-heading p { display: none; }
  .duo-keys { display: none !important; }
  #touch-controls { bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}