:root {
  color-scheme: dark;
  --bg: #101a29; --panel: #142234; --ink: #e9f2f8; --muted: #8eabc0;
  --line: #2a3c51; --cyan: #79e4f2; --red: #ff6971;
  --demo-player: #50b9ff; --demo-player-stop: #b8fbff; --demo-player-stroke: #d8faff;
  --demo-enemy: #4b2b3a; --demo-enemy-stroke: #ff6971; --demo-enemy-stop: #29282e; --demo-enemy-stop-stroke: #75666b;
  --demo-bullet: #ffd6a8; --demo-bullet-stroke: #ffae68; --demo-route: #e9feff;
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
body.title-open { overflow: hidden; }
body.title-open #game-shell { display: none; }
body.briefing-open { overflow: hidden; }
body.briefing-open #game-shell { display: none; }
button, input { font: inherit; }
button { cursor: pointer; touch-action: manipulation; min-height: 44px; }
button:focus-visible, canvas:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: default; transform: none; }
.shell { max-width: 1200px; margin: auto; padding: 20px 28px 12px; }
.title-screen {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden;
  padding: clamp(18px, 4vw, 48px); background: #07111d; isolation: isolate;
}
.title-screen[hidden] { display: none; }
.title-screen::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .2;
  background-image: linear-gradient(#203447 1px, transparent 1px), linear-gradient(90deg, #203447 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at 50% 44%, #000 5%, transparent 72%);
}
.title-screen::after {
  content: ""; position: absolute; inset: 16% 8%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, #29cbe814 0, #0c1d2d0a 42%, transparent 72%);
}
.title-content { width: min(100%, 1120px); text-align: center; transition: opacity .18s ease, transform .18s ease; }
.title-heading { margin: 0; line-height: 0; }
.title-logo {
  display: block; width: min(88vw, 1060px, calc(48vh * 3)); max-width: 100%; height: auto; margin: 0 auto;
  aspect-ratio: 3 / 1; object-fit: contain; filter: drop-shadow(0 8px 18px #20cce02b);
  opacity: 0; clip-path: inset(0 100% 0 0); animation: title-logo-in .48s .12s cubic-bezier(.2,.8,.25,1) forwards;
}
.title-tagline {
  margin: clamp(2px, 1vh, 10px) 0 20px; color: #9fc9d3; font: 500 clamp(10px, 1.2vw, 13px) Consolas, monospace;
  letter-spacing: .42em; opacity: 0; animation: title-menu-in .24s .48s ease-out forwards;
}
.title-start {
  min-width: min(290px, 78vw); padding: 13px 28px; border: 1px solid #77dce9; background: #79e4f2;
  color: #0a1a27; font: 700 15px Consolas, monospace; letter-spacing: .2em;
  box-shadow: 0 5px 18px #02070d61; opacity: 0; animation: title-menu-in .24s .54s ease-out forwards;
}
.title-start span { margin-right: 18px; }
.title-start kbd { border-color: #173c49; letter-spacing: 0; }
.title-start:hover { background: #a1f4fc; }
.title-secondary {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 13px;
  opacity: 0; animation: title-menu-in .24s .6s ease-out forwards;
}
.title-secondary button { min-height: 34px; padding: 5px 8px; border: 0; background: transparent; color: #718fa4; font: 11px Consolas, monospace; letter-spacing: .12em; }
.title-secondary button:hover, .title-secondary button[aria-expanded="true"] { color: #bfeef3; }
.title-secondary > span { color: #335a6c; }
.title-info { min-height: 28px; margin-top: 5px; color: #7899ac; font: 10px Consolas, monospace; letter-spacing: .05em; }
.title-info p { margin: 0; }
.settings-panel { width: min(100%, 430px); margin: 8px auto 0; padding: 10px 12px; border: 1px solid #29475a; background: #0a1724e8; }
.settings-panel[hidden] { display: none; }
.settings-panel label { display: grid; grid-template-columns: 64px minmax(120px, 1fr) 34px; align-items: center; gap: 10px; min-height: 34px; text-align: left; }
.settings-panel .touch-setting { display: none; }
.touch-controls .settings-panel .touch-setting { display: grid; }
.settings-panel label > span, .setting-mute > span { color: #9fc9d3; letter-spacing: .12em; }
.settings-panel output { color: #d9fbff; text-align: right; font-variant-numeric: tabular-nums; }
.settings-panel input[type="range"] { width: 100%; height: 24px; margin: 0; accent-color: var(--cyan); cursor: pointer; background: transparent; appearance: none; }
.settings-panel input[type="range"]::-webkit-slider-runnable-track { height: 3px; border: 1px solid #35596c; background: #14293a; }
.settings-panel input[type="range"]::-webkit-slider-thumb { width: 14px; height: 18px; margin-top: -8px; border: 1px solid #d2fbff; border-radius: 1px; background: var(--cyan); appearance: none; }
.settings-panel input[type="range"]::-moz-range-track { height: 3px; border: 1px solid #35596c; background: #14293a; }
.settings-panel input[type="range"]::-moz-range-thumb { width: 14px; height: 18px; border: 1px solid #d2fbff; border-radius: 1px; background: var(--cyan); }
.setting-mute { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 36px; padding: 5px 0; border: 0; border-top: 1px solid #203d50; background: transparent; color: #7899ac; font: inherit; }
.setting-mute strong { min-width: 46px; padding: 4px 7px; border: 1px solid #3e6276; color: #bdeff4; letter-spacing: .08em; }
.setting-mute[aria-pressed="true"] strong { border-color: #ff6971; color: #ff9ca1; }
.title-cut {
  position: absolute; top: -35%; left: 50%; z-index: 2; width: 2px; height: 170%; pointer-events: none;
  background: linear-gradient(transparent 9%, #8bf4ff 38%, #fff 50%, #60eaf8 62%, transparent 91%);
  box-shadow: 0 0 8px #79e4f2, 0 0 20px #29d9eb7a; opacity: 0;
  transform: translateX(-90vw) rotate(18deg); animation: title-cut-in .52s cubic-bezier(.2,.75,.25,1) both;
}
.title-screen.is-leaving .title-content { opacity: 0; transform: translateY(-4px); }
.title-screen.is-leaving .title-cut { animation: title-cut-out .34s cubic-bezier(.25,.75,.3,1) both; }
.briefing-screen {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; overflow: hidden;
  padding: clamp(14px, 4vw, 44px); background: #07111d; isolation: isolate;
}
.briefing-screen[hidden] { display: none; }
.briefing-screen::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .17;
  background-image: linear-gradient(#203447 1px, transparent 1px), linear-gradient(90deg, #203447 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at 50% 48%, #000 8%, transparent 78%);
}
.briefing-panel { width: min(100%, 980px); font-family: Consolas, monospace; }
.briefing-header { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 0 2px 13px; border-bottom: 1px solid #3b6073; }
.briefing-header span { color: #6e91a5; font-size: 10px; letter-spacing: .2em; }
.briefing-header strong { color: #bceff4; font-size: clamp(13px, 2vw, 18px); font-weight: 500; letter-spacing: .17em; }
.briefing-pages { margin: 14px 0 10px; border: 1px solid #29475a; background: #0a1624eb; }
.briefing-page { display: grid; grid-template-columns: minmax(230px, .72fr) minmax(420px, 1.28fr); min-height: 330px; overflow: hidden; }
.briefing-page[hidden] { display: none; }
.briefing-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 4vw, 48px); border-right: 1px solid #29475a; background: linear-gradient(120deg,#0d1c2bd9,#0a1624c9); }
.briefing-copy::after { content: ""; position: absolute; right: -9px; top: -15px; width: 1px; height: 64px; background: #79e4f273; transform: rotate(18deg); }
.briefing-number { display: block; color: #6e9caf; font-size: 11px; letter-spacing: .18em; }
.briefing-copy h2 { margin: 12px 0 16px; color: #e1fbff; font: 600 clamp(20px, 3vw, 30px) Consolas, monospace; line-height: 1.18; letter-spacing: .09em; }
.briefing-copy p { margin: 0 0 22px; color: #9db6c5; font: 13px/1.75 "Yu Gothic UI", sans-serif; }
.briefing-input { min-height: 29px; color: var(--cyan); font-size: 11px; letter-spacing: .08em; }
.briefing-input > span { display: inline-flex; align-items: center; min-height: 27px; padding: 0 9px; border: 1px solid #548394; border-bottom-width: 2px; border-radius: 2px; }
.device-touch { display: none !important; }
.touch-controls .device-pc { display: none !important; }
.touch-controls .device-touch { display: inline-flex !important; }
.briefing-demo { display: block; width: 100%; height: 100%; min-height: 330px; background: #07111d; }
.briefing-demo .demo-grid { fill: none; stroke: #203447; stroke-width: 1; opacity: .34; }
.briefing-demo text { fill: #7899ac; font: 10px Consolas, monospace; letter-spacing: .12em; }
.briefing-demo .demo-player { filter: drop-shadow(0 0 7px #79e4f2); }
.briefing-demo .demo-player-halo { fill: #79e4f218; stroke: #79e4f27a; stroke-width: 1; transform: rotate(45deg); }
.briefing-demo .demo-player-body { fill: var(--demo-player); stroke: var(--demo-player-stroke); stroke-width: 1.8; transform: rotate(45deg); }
.briefing-demo.demo-freeze .demo-player-body { animation:demo-freeze-player 3.2s steps(1,end) infinite; }
.briefing-demo.demo-draw .demo-player-body,.briefing-demo.demo-execute .demo-player-body { fill:var(--demo-player-stop);stroke:#fff; }
.briefing-demo .demo-enemy { transform-box: fill-box; transform-origin: center; }
.briefing-demo .demo-enemy-body, .briefing-demo .demo-enemy-part { fill: var(--demo-enemy); stroke: var(--demo-enemy-stroke); stroke-width: 2; }
.briefing-demo .demo-enemy-core { fill: #ff9c9c; stroke: none; }
.briefing-demo .demo-bullet { fill: var(--demo-bullet); stroke: var(--demo-bullet-stroke); stroke-width: 2; filter: drop-shadow(0 0 5px #ff8d45); }
.briefing-demo .demo-bullet path { fill: none; stroke-width: 1.5; }
.briefing-demo .demo-motion-lane { fill: none; stroke: #79e4f25c; stroke-width: 1.5; stroke-dasharray: 4 6; }
.briefing-demo .demo-route { fill: none; stroke: var(--demo-route); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 6px #79e4f2); }
.briefing-demo .demo-route-guide { stroke: #79e4f22e; stroke-width: 2; stroke-dasharray: 5 7; filter: none; }
.briefing-demo .demo-target-ring { fill: none; stroke: var(--cyan); stroke-width: 2; }
.briefing-demo .demo-enemy text { fill: #eaffff; font-weight: 700; }
.briefing-demo .demo-input { fill: #0a1724; stroke: #b8f7ff; stroke-width: 1.5; filter: drop-shadow(0 0 4px #79e4f24d); }
.briefing-demo .demo-input path { fill: none; stroke: #b8f7ff; stroke-linecap: round; stroke-linejoin: round; }
.briefing-demo .demo-input .demo-mouse-button { fill: #173142; stroke: none; }
.briefing-demo .demo-finger { fill: #0a1724; stroke-width: 1.7; }
.briefing-demo .demo-touch-ring { fill: none; stroke: #79e4f2; opacity: .2; }
.briefing-demo .demo-keycap, .briefing-demo .demo-touch-button { fill: #101f30; stroke: #79e4f2; stroke-width: 1.5; }
.briefing-demo .demo-input text { fill: #d9fbff; stroke: none; text-anchor: middle; font: 700 10px Consolas, monospace; letter-spacing: .04em; }
.briefing-demo .demo-input-touch { display: none; }
.briefing-demo .demo-touch-only { display: none; }
.touch-controls .briefing-demo .demo-input-pc { display: none; }
.touch-controls .briefing-demo .demo-input-touch { display: block; }
.touch-controls .briefing-demo .demo-touch-only { display: block; }
.demo-player-evade, .demo-input-evade { animation: demo-evade-player 3s cubic-bezier(.3,.75,.3,1) infinite; }
.demo-input-evade { animation-name: demo-evade-input; }
.demo-bullet-evade { animation: demo-evade-bullet 3s linear infinite; }
.demo-bullet-freeze { animation: demo-freeze-bullet 3.2s linear infinite; }
.demo-freeze-world .demo-enemy-body, .demo-freeze-world .demo-enemy-part { animation: demo-freeze-enemy 3.2s steps(1,end) infinite; }
.demo-freeze-world .demo-enemy-core { animation: demo-freeze-core 3.2s steps(1,end) infinite; }
.demo-freeze-world .demo-bullet { animation-name: demo-freeze-bullet; }
.demo-freeze .demo-grid { animation: demo-freeze-grid 3.2s steps(1,end) infinite; }
.demo-stop-wash { fill: #020911; opacity: 0; animation: demo-freeze-wash 3.2s steps(1,end) infinite; }
.demo-freeze-key, .demo-freeze-button { --demo-input-x:126px;--demo-input-y:204px;transform:translate(var(--demo-input-x),var(--demo-input-y));animation:demo-key-press 3.2s ease-in-out infinite; }
.demo-execute-key, .demo-execute-button { --demo-input-x:92px;--demo-input-y:207px;transform:translate(var(--demo-input-x),var(--demo-input-y));animation:demo-execute-key-press 3.2s ease-in-out infinite; }
.demo-freeze-frame, .demo-stop-label { opacity: 0; fill: none; stroke: var(--cyan); stroke-width: 1; animation: demo-freeze-state 3.2s steps(1,end) infinite; }
.demo-stop-label { fill: #d9fbff; stroke: none; }
.demo-normal-label { animation: demo-normal-state 3.2s steps(1,end) infinite; }
.demo-draw .demo-route-drawing { stroke-dasharray: 1; stroke-dashoffset: 1; animation: demo-route-draw 3.2s ease-in-out infinite; }
.demo-input-draw { offset-path: path("M70 175C120 155 170 112 235 92S330 128 395 155L445 130"); animation: demo-input-draw 3.2s ease-in-out infinite; }
.demo-draw .demo-mouse-button { animation:demo-mouse-draw-button 3.2s steps(1,end) infinite; }
.demo-click-origin { fill:none;stroke:#79e4f2;stroke-width:1.8;opacity:0;transform-box:fill-box;transform-origin:center;animation:demo-click-origin 3.2s ease-out infinite; }
.demo-touch-draw-cursor { offset-path:path("M70 175C120 155 170 112 235 92S330 128 395 155L445 130");fill:#d9fbff;stroke:#79e4f2;stroke-width:1.4;filter:drop-shadow(0 0 6px #79e4f2);animation:demo-touch-draw-cursor 3.2s ease-in-out infinite; }
.demo-touch-draw-cursor path { fill:none; }
.demo-mini-pad { fill:#0b1a29;stroke:#4b7385;stroke-width:1; }
.demo-pad-cross { fill:none;stroke:#35596c;stroke-width:1; }
.demo-pad-move-finger { animation:demo-pad-move-finger 3s ease-in-out infinite; }
.demo-pad-finger { animation:demo-pad-draw-finger 3.2s ease-in-out infinite; }
.demo-draw .demo-target-one { animation: demo-target-one 3.2s steps(1,end) infinite; }
.demo-draw .demo-target-two { animation: demo-target-two 3.2s steps(1,end) infinite; }
.demo-route-complete { opacity: .45; }
.demo-execute-wash { fill:#020911;opacity:.56;animation:demo-execute-wash 3.2s linear infinite; }
.demo-execute-frame { fill:none;stroke:#79e4f2;stroke-width:1;opacity:.82;animation:demo-execute-frame 3.2s linear infinite; }
.demo-resume-ring { fill:none;stroke:#d9fbff;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:demo-resume-ring 3.2s ease-out infinite; }
.demo-execute .demo-grid { animation:demo-execute-grid 3.2s linear infinite; }
.demo-execute .demo-enemy-body { animation:demo-execute-enemy 3.2s linear infinite; }
.demo-execute .demo-enemy-core { animation:demo-execute-core 3.2s linear infinite; }
.demo-execute .demo-bullet { fill:#c7c0b8;stroke:#8d8884;filter:drop-shadow(0 0 3px #b8aea4); }
.demo-execute-bullet-one { animation:demo-execute-bullet-one 3.2s linear infinite; }
.demo-execute-bullet-two { animation:demo-execute-bullet-two 3.2s linear infinite; }
.demo-player-execute { offset-path: path("M70 175C120 155 170 112 235 92S330 128 395 155L445 130"); animation: demo-execute-player 3.2s cubic-bezier(.12,.7,.22,1) infinite; }
.demo-kill-one { animation: demo-kill-one 3.2s steps(1,end) infinite; }
.demo-kill-two { animation: demo-kill-two 3.2s steps(1,end) infinite; }
.demo-impact { opacity: 0; fill: none; stroke: #e9feff; stroke-width: 2.5; filter: drop-shadow(0 0 7px #79e4f2); }
.demo-impact-one { animation: demo-impact-one 3.2s ease-out infinite; }
.demo-impact-two { animation: demo-impact-two 3.2s ease-out infinite; }
.briefing-progress { display: flex; justify-content: center; gap: 7px; margin-bottom: 10px; }
.briefing-progress i { width: 28px; height: 2px; background: #29475a; }
.briefing-progress i.is-active { background: var(--cyan); box-shadow: 0 0 7px #79e4f266; }
.briefing-actions { display: grid; grid-template-columns: 110px 130px minmax(220px,330px); justify-content: center; gap: 8px; }
.briefing-back { border: 1px solid #3f6175; background: #101f30; color: #8eabc0; font: 700 11px Consolas, monospace; letter-spacing: .12em; }
.briefing-skip { border: 1px solid #29475a; background: transparent; color: #6f91a4; font: 10px Consolas, monospace; letter-spacing: .08em; }
.briefing-begin {
  display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; margin: 0; padding: 10px 24px;
  border: 1px solid #b8f8ff; background: var(--cyan); color: #102331; font: 700 13px Consolas, monospace; letter-spacing: .18em;
}
.briefing-begin kbd { min-width: 62px; border-color: #173c49; letter-spacing: 0; }
.briefing-begin:hover { background: #a1f4fc; }
.masthead-logo { line-height: 0; }
.masthead-logo img { display: block; width: clamp(112px, 14vw, 150px); height: auto; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.utilities { display: flex; gap: 5px; }
.utilities button { border: 0; padding: 8px 10px; background: transparent; color: var(--muted); font-size: 12px; }
.utilities button:hover { background: var(--panel); color: var(--ink); }
.game { border: 1px solid var(--line); background: var(--panel); transition: border-color .16s ease, box-shadow .16s ease; }
.hud {
  display: grid; grid-template-columns: minmax(190px, 1fr) auto minmax(300px, 1fr); align-items: center;
  min-height: 58px; padding: 7px 18px; gap: 20px; border-bottom: 1px solid var(--line); font-family: Consolas, monospace;
}
.hud span { font-size: 9px; letter-spacing: .16em; color: #7896aa; }
.hud strong { font-weight: 400; font-variant-numeric: tabular-nums; }
.status-stat { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 11px; }
.status-stat > span { grid-column: 1 / -1; margin-bottom: 3px; }
#phase { font-size: 15px; color: #a4becf; letter-spacing: .06em; transition: color .14s ease, text-shadow .14s ease; }
#status-action { justify-self: end; color: #5f7f94; font-size: 9px; letter-spacing: .12em; white-space: nowrap; transition: color .14s ease; }
.stopped #status-action { color: #93d4dd; }
.route-drawing #status-action, .route-ready #status-action { color: #d9fcff; text-shadow: 0 0 8px #79e4f252; }
.wave-stat { position: relative; min-width: 100px; text-align: center; }
.wave-stat::before { content: ""; position: absolute; top: 8px; left: 4px; width: 1px; height: 30px; background: #477087; transform: rotate(18deg); }
.wave-stat > span { display: block; margin-bottom: 1px; }
#wave { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
#wave-current { color: #e6fbff; font-size: 25px; }
#wave i { color: #4d7185; font-size: 13px; font-style: normal; }
#wave-total { color: #86a7ba; font-size: 13px; }
.hud-secondary { display: flex; align-items: end; justify-content: flex-end; gap: clamp(18px, 3vw, 34px); }
.hud-secondary > div { display: grid; gap: 2px; text-align: right; }
.hud-secondary strong { color: #a9c1d0; font-size: 14px; }
.life-stat { min-width: 42px; padding-left: 16px; border-left: 1px solid #30475b; }
.life-stat strong { color: #e7f6fb; font-size: 18px; }
.stopped #phase { color: var(--cyan); text-shadow: 0 0 10px #79e4f24d; } .executing #phase { color: #fff; }
.stopped .game { border-color: #46798b; box-shadow: 0 0 0 1px #79e4f210; }
.stop-phase-pulse { animation: stop-phase-pulse .22s ease-out; }
#stop-time { display: inline-block; transform-origin: center; transition: color .12s ease, text-shadow .12s ease, transform .12s ease; }
.charge {
  position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) 54px; align-items: center; gap: 12px;
  min-height: 38px; padding: 6px 18px; border-bottom: 1px solid var(--line); font: 10px Consolas, monospace; color: var(--muted);
}
.charge::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: #47788b; transform: skewX(-18deg); transition: background .14s ease, box-shadow .14s ease; }
.stopped .charge::before, .ready .charge::before { background: var(--cyan); box-shadow: 0 0 8px #79e4f257; }
.charge label { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; letter-spacing: .12em; }
.charge label span { color: #7593a7; font-size: 9px; }
#stop-time { color: #9bb5c4; font-size: 16px; letter-spacing: 0; }
.stopped #stop-time { color: #e9fdff; }
.charge progress { min-width: 0; width: 100%; height: 7px; border: 1px solid #344e62; background: transparent; appearance: none; }
.charge progress::-webkit-progress-bar { background: #1f3041; }
.charge progress::-webkit-progress-value { background: #668793; transition: background .12s ease; }
.charge progress::-moz-progress-bar { background: #668793; }
.ready .charge progress::-webkit-progress-value { background: var(--cyan); }
.ready .charge progress::-moz-progress-bar { background: var(--cyan); }
.stopped .charge progress::-webkit-progress-value { background: #a6f6ff; box-shadow: 0 0 7px #79e4f266; }
.stopped .charge progress::-moz-progress-bar { background: #a6f6ff; }
.ready #gauge-value { color: var(--cyan); }
#gauge-value { min-width: 46px; text-align: right; color: #7e9bae; letter-spacing: .06em; }
.stopped #gauge-value { color: #c5f9ff; }
.stop-critical .charge progress::-webkit-progress-value { background: #ffb16e; }
.stop-critical .charge progress::-moz-progress-bar { background: #ffb16e; }
.stop-final .charge progress::-webkit-progress-value { background: #fff; }
.stop-final .charge progress::-moz-progress-bar { background: #fff; }
.controls {
  display: grid; grid-template-columns: repeat(3, minmax(110px, 140px)) minmax(240px, 360px); justify-content: end;
  gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); background: #101d2d;
}
.mobile-command-zone { display: contents; }
.move-pad { display: none; position: relative; min-height: 108px; border-top: 1px solid #35596c; background: #0a1624; color: #7899ac; touch-action: none; user-select: none; overflow: hidden; }
.touch-controls .move-pad { display: block; }
.move-pad header { position: absolute; inset: 8px 10px auto; z-index: 2; display: flex; justify-content: space-between; pointer-events: none; font: 9px Consolas, monospace; letter-spacing: .14em; }
.move-pad header strong { color: var(--cyan); font-weight: 500; }
.move-pad[aria-disabled="true"] header strong { color: #657d8e; }
.move-pad-surface { position: absolute; inset: 0; background-image: linear-gradient(#20344726 1px,transparent 1px),linear-gradient(90deg,#20344726 1px,transparent 1px); background-size: 28px 28px; }
.move-pad-surface::before,.move-pad-surface::after { content:""; position:absolute; left:50%; top:50%; background:#38596b; opacity:.52; transform:translate(-50%,-50%); }
.move-pad-surface::before { width: 38px; height: 1px; }
.move-pad-surface::after { width: 1px; height: 38px; }
.move-pad-origin,.move-pad-cursor { position:absolute; left:var(--pad-start-x,50%); top:var(--pad-start-y,58%); width:10px; height:10px; border:1px solid #79e4f2; border-radius:50%; opacity:0; transform:translate(-50%,-50%); }
.move-pad-cursor { left:var(--pad-x,50%); top:var(--pad-y,58%); width:15px; height:15px; background:#79e4f229; box-shadow:0 0 8px #79e4f252; }
.move-pad-vector { position:absolute; left:var(--pad-start-x,50%); top:var(--pad-start-y,58%); width:var(--pad-length,0px); height:1px; background:var(--cyan); opacity:0; transform:rotate(var(--pad-angle,0rad)); transform-origin:left center; box-shadow:0 0 5px #79e4f2; }
.move-pad.is-active .move-pad-origin,.move-pad.is-active .move-pad-cursor,.move-pad.is-active .move-pad-vector { opacity:.9; }
.move-pad[aria-disabled="true"] { filter:saturate(.45); opacity:.68; }
.touch-draw-pad .move-pad { border-color:#57909f;background:#081827;box-shadow:inset 0 0 18px #0d82952e; }
.touch-draw-pad .move-pad header span,.touch-draw-pad .move-pad header strong { color:#b7f8ff; }
.touch-draw-pad .move-pad-surface::before,.touch-draw-pad .move-pad-surface::after { background:#57909f; }
.practice-pad-finger,.practice-button-finger { display:none; pointer-events:none; fill:#081522; stroke:#c8fbff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px #79e4f27a); }
.practice-pad-finger circle,.practice-button-finger circle { fill:none; stroke:#79e4f2; opacity:.3; }
.practice-move.touch-controls .practice-pad-finger,.practice-draw.touch-controls .practice-pad-finger { display:block; position:absolute; z-index:3; left:42%; top:46%; width:30px; height:38px; animation:practice-pad-swipe 1.25s ease-in-out infinite; }
.controls button {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 7px 14px;
  border: 1px solid #31485c; background: #111f2f; color: #7995a8; font: 600 11px Consolas, monospace; letter-spacing: .04em;
  transition: color .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.controls button:not(:disabled):hover { border-color: #6ebdca; color: #d6f7fa; }
.controls button:disabled { opacity: .38; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 25px; padding: 0 6px; border: 1px solid currentColor; border-bottom-width: 2px; border-radius: 2px; font: 700 12px Consolas, monospace; }
#time-stop kbd { height: 29px; min-width: 62px; font-size: 13px; }
.touch-controls kbd { display: none; }
.stopped:not(.touch-controls) #time-stop:disabled { cursor: default; }
#time-stop { position:relative; background: #172a3b; color: #8faaba; border-color: #466174; font-weight: 700; }
.practice-freeze.touch-controls #time-stop .practice-button-finger,.practice-execute.touch-controls #time-stop .practice-button-finger { display:block; position:absolute; right:11%; top:-27px; z-index:3; width:30px; height:38px; animation:practice-button-tap 1s ease-in-out infinite; }
.ready:not(.stopped) #time-stop { background: var(--cyan); color: #102331; border-color: #b8f8ff; box-shadow: inset 0 0 0 1px #ffffff38, 0 0 10px #79e4f226; }
.stopped #time-stop.execute-waiting { opacity: .55; }
.stopped #time-stop.execute-ready { opacity: 1; background: var(--cyan); color: #102331; border-color: #d7fbff; box-shadow: inset 0 0 0 1px #ffffff52, 0 0 13px #79e4f252; }
.stopped #time-stop.execute-ready kbd { border-color: #214d59; }
.executing #time-stop { opacity: .7; }
.arena-wrap { position: relative; overflow: hidden; background: #0e1926; }
.modal-result .arena-wrap { position: fixed; inset: 0; z-index: 80; }
.arena-wrap::after {
  content: ""; position: absolute; inset: 3px; z-index: 2; pointer-events: none;
  border: 1px solid #79e4f2; box-shadow: inset 0 0 13px #79e4f217, 0 0 8px #79e4f212;
  opacity: 0; transition: opacity .16s ease-out, border-color .12s ease, box-shadow .12s ease;
}
.stopped .arena-wrap::after { opacity: .64; animation: stop-frame-pulse 2.4s ease-in-out infinite; }
.stop-warning .arena-wrap::after { opacity: .76; animation-duration: .9s; }
.stop-critical .arena-wrap::after { opacity: .9; animation-duration: .42s; box-shadow: inset 0 0 17px #79e4f22e, 0 0 10px #79e4f226; }
.stop-critical #stop-time { color: #d8fbff; text-shadow: 0 0 11px #79e4f2; animation: stop-time-pulse .42s ease-in-out infinite alternate; }
.stop-final .arena-wrap::after { opacity: 1; animation-duration: .22s; border-color: #c8f8ff; }
.stop-final #stop-time { color: #fff; text-shadow: 0 0 15px #79e4f2; animation-duration: .22s; }
canvas { display: block; width: 100%; height: clamp(280px, calc(100svh - 272px), 690px); touch-action: none; cursor: crosshair; }
.touch-controls canvas { touch-action: pan-y pinch-zoom; cursor: default; }
.callout { position: absolute; top: 9%; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; white-space: nowrap; color: #c4f9ff; text-shadow: 0 2px 12px #08121e; font: italic 700 calc(22px + var(--strength, 1) * 2px) Consolas, monospace; }
.callout small { display: block; margin-top: 4px; font: 16px Consolas, monospace; color: var(--cyan); }
.near-miss-feedback { position:absolute;left:50%;top:18%;z-index:4;transform:translateX(-50%);pointer-events:none;white-space:nowrap;color:#fff1b8;text-shadow:0 0 12px #ffe09b88,0 2px 7px #07111d;font:italic 700 clamp(16px,2vw,24px) Consolas,monospace;letter-spacing:.08em;animation:near-miss-pop .18s ease-out; }
.near-miss-feedback[hidden]{display:none}.near-miss-feedback small{margin-left:9px;color:#9ef5f2;font-size:.72em}
body.near-miss .charge{animation:near-miss-charge .28s ease-out}body.near-miss .charge progress::-webkit-progress-value{background:#fff3be;box-shadow:0 0 14px #ffe69d}body.near-miss .charge progress::-moz-progress-bar{background:#fff3be;box-shadow:0 0 14px #ffe69d}
.wave-banner { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; color: #d6fbff; text-shadow: 0 2px 18px #08121e; font: italic 700 clamp(28px, 5vw, 52px) Consolas, monospace; letter-spacing: .12em; }
.wave-banner[hidden] { display: none; }
.wave-banner.wave-enter { animation: wave-enter .7s cubic-bezier(.16,.8,.25,1) both; }
.wave-banner.final-wave { color: #fff; text-shadow: 0 0 15px #79e4f28c, 0 3px 20px #07111d; }
.tutorial-prompt { position: absolute; left: 50%; top: 8%; z-index: 3; display:flex; align-items:center; gap:9px; transform: translateX(-50%); padding: 7px 12px; border-left: 2px solid var(--cyan); background: #081522d9; color: #d9fbff; white-space: nowrap; font: 700 clamp(11px, 1.7vw, 15px) Consolas, monospace; letter-spacing: .08em; pointer-events: none; animation: tutorial-in .18s ease-out; }
.tutorial-prompt[hidden] { display: none; }
.tutorial-prompt kbd { height: 22px; margin-right: 8px; color: var(--cyan); font-size: 10px; }
.tutorial-prompt .guide-mouse { position:relative; display:inline-block; width:17px; height:25px; border:1.5px solid #b8f7ff; border-radius:8px; box-shadow:0 0 5px #79e4f24d; }
.tutorial-prompt .guide-mouse::before { content:""; position:absolute; left:50%; top:0; height:9px; border-left:1px solid #b8f7ff; }
.tutorial-prompt .guide-mouse::after { content:""; position:absolute; inset:1px 8px 14px 1px; background:#79e4f252; border-radius:5px 0 0; }
.practice-freeze:not(.touch-controls) .tutorial-prompt kbd,.practice-execute:not(.touch-controls) .tutorial-prompt kbd { animation:practice-key-pulse 1s ease-in-out infinite; }
.lock-ready { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); pointer-events: none; color: #d9fdff; text-align: center; text-shadow: 0 0 14px #79e4f2; font: italic 700 clamp(18px, 3vw, 30px) Consolas, monospace; animation: ready-pulse .65s ease-in-out infinite alternate; }
.lock-ready small { display: block; margin-top: 4px; font-size: 12px; font-style: normal; color: var(--cyan); }
.lock-ready[hidden] { display: none; }
.all-locked { color: #fff !important; text-shadow: 0 0 12px var(--cyan); }
.lock-pulse { animation: lock-pulse .13s ease-out; }
@keyframes lock-pulse { 50% { transform: scale(1.35); color: #fff; text-shadow: 0 0 12px var(--cyan); } }
@keyframes ready-pulse { to { opacity: .72; transform: translateX(-50%) scale(1.03); } }
@keyframes stop-phase-pulse { 45% { color: #fff; text-shadow: 0 0 18px #79e4f2; transform: translateX(2px); } }
@keyframes stop-frame-pulse { 50% { opacity: .9; box-shadow: inset 0 0 18px #79e4f226, 0 0 11px #79e4f21c; } }
@keyframes stop-time-pulse { to { transform: scale(1.08); } }
@keyframes title-cut-in {
  0% { opacity: 0; transform: translateX(-90vw) rotate(18deg); }
  34% { opacity: .9; }
  100% { opacity: 0; transform: translateX(90vw) rotate(18deg); }
}
@keyframes title-logo-in { to { opacity: 1; clip-path: inset(0); } }
@keyframes title-menu-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes demo-evade-player {
  0%,16%,88%,100% { transform:translate(118px,150px) }
  34%,72% { transform:translate(118px,67px) }
}
@keyframes demo-evade-input {
  0%,13%,91%,100% { transform:translate(143px,174px) }
  31%,75% { transform:translate(143px,91px) }
}
@keyframes demo-evade-bullet {
  0%,12% { transform:translate(366px,150px) }
  82%,100% { transform:translate(42px,150px) }
}
@keyframes demo-freeze-bullet {
  0%,10% { transform:translate(365px,130px);fill:var(--demo-bullet);stroke:var(--demo-bullet-stroke) }
  44%,100% { transform:translate(252px,130px);fill:#c7c0b8;stroke:#8d8884 }
}
@keyframes demo-freeze-enemy {
  0%,43% { fill:var(--demo-enemy);stroke:var(--demo-enemy-stroke) }
  44%,100% { fill:var(--demo-enemy-stop);stroke:var(--demo-enemy-stop-stroke) }
}
@keyframes demo-freeze-core { 0%,43% { fill:#ff9c9c } 44%,100% { fill:#777075 } }
@keyframes demo-freeze-player { 0%,43% { fill:var(--demo-player);stroke:var(--demo-player-stroke) } 44%,100% { fill:var(--demo-player-stop);stroke:#fff } }
@keyframes demo-freeze-wash { 0%,43% { opacity:0 } 44%,100% { opacity:.55 } }
@keyframes demo-freeze-grid { 0%,43% { opacity:.34 } 44%,100% { opacity:.12 } }
@keyframes demo-freeze-state { 0%,43% { opacity:0 } 44%,100% { opacity:.86 } }
@keyframes demo-normal-state { 0%,43% { opacity:1 } 44%,100% { opacity:0 } }
@keyframes demo-key-press {
  0%,35%,50%,100% { opacity:1;transform:translate(var(--demo-input-x),var(--demo-input-y)) scale(1);filter:drop-shadow(0 0 4px #79e4f24d) }
  40%,46% { opacity:.82;transform:translate(var(--demo-input-x),calc(var(--demo-input-y) + 3px)) scale(.92);filter:drop-shadow(0 0 10px #79e4f2) }
}
@keyframes demo-route-draw {
  0%,10% { stroke-dashoffset:1 }
  72%,88% { stroke-dashoffset:0 }
  100% { stroke-dashoffset:-1 }
}
@keyframes demo-input-draw {
  0%,9% { offset-distance:0%; opacity:.62;transform:translateY(0) }
  12% { offset-distance:0%; opacity:1;transform:translateY(2px) }
  18%,72% { opacity:1;transform:translateY(2px) }
  72% { offset-distance:100% }
  80% { offset-distance:100%;opacity:1;transform:translateY(0) }
  100% { offset-distance:100%;opacity:0;transform:translateY(0) }
}
@keyframes demo-mouse-draw-button { 0%,9%,80%,100% { fill:#173142 } 10%,79% { fill:#79e4f2 } }
@keyframes demo-click-origin { 0%,9%,100% { opacity:0;transform:scale(.65) } 11% { opacity:.9;transform:scale(.65) } 20% { opacity:0;transform:scale(1.65) } }
@keyframes demo-pad-move-finger { 0%,100% { transform:translate(-16px,7px);opacity:.55 } 18% { transform:translate(-16px,9px);opacity:1 } 55%,76% { transform:translate(18px,-8px);opacity:1 } 88% { transform:translate(18px,-8px);opacity:.35 } }
@keyframes demo-touch-draw-cursor { 0%,10% { offset-distance:0%;opacity:.6 } 16% { offset-distance:0%;opacity:1 } 72%,86% { offset-distance:100%;opacity:1 } 100% { offset-distance:100%;opacity:.25 } }
@keyframes demo-pad-draw-finger { 0%,9%,88%,100% { transform:translate(-18px,7px);opacity:.55 } 13% { transform:translate(-18px,9px);opacity:1 } 39% { transform:translate(17px,-8px);opacity:1 } 65% { transform:translate(-5px,-5px);opacity:1 } 78% { transform:translate(20px,5px);opacity:1 } 84% { transform:translate(20px,5px);opacity:.5 } }
@keyframes demo-target-one { 0%,36% { opacity:.42 } 37%,88% { opacity:1;filter:drop-shadow(0 0 8px #79e4f2) } 89%,100% { opacity:.42 } }
@keyframes demo-target-two { 0%,63% { opacity:.42 } 64%,88% { opacity:1;filter:drop-shadow(0 0 8px #79e4f2) } 89%,100% { opacity:.42 } }
@keyframes demo-execute-key-press {
  0%,12%,20%,100% { opacity:1;transform:translate(var(--demo-input-x),var(--demo-input-y)) scale(1);filter:drop-shadow(0 0 4px #79e4f24d) }
  14%,18% { opacity:.85;transform:translate(var(--demo-input-x),calc(var(--demo-input-y) + 3px)) scale(.92);filter:drop-shadow(0 0 10px #79e4f2) }
}
@keyframes demo-execute-wash { 0%,19% { opacity:.56 } 25%,100% { opacity:0 } }
@keyframes demo-execute-frame { 0%,19% { opacity:.82 } 25%,100% { opacity:0 } }
@keyframes demo-execute-grid { 0%,19% { opacity:.12 } 25%,100% { opacity:.34 } }
@keyframes demo-resume-ring { 0%,19%,100% { opacity:0;transform:scale(.65) } 20% { opacity:.95;transform:scale(.65) } 29% { opacity:0;transform:scale(4.2) } }
@keyframes demo-execute-enemy { 0%,19% { fill:var(--demo-enemy-stop);stroke:var(--demo-enemy-stop-stroke) } 25%,100% { fill:var(--demo-enemy);stroke:var(--demo-enemy-stroke) } }
@keyframes demo-execute-core { 0%,19% { fill:#777075 } 25%,100% { fill:#ff9c9c } }
@keyframes demo-execute-bullet-one { 0%,19% { transform:translate(308px,66px);fill:#c7c0b8;stroke:#8d8884 } 25% { transform:translate(308px,66px);fill:var(--demo-bullet);stroke:var(--demo-bullet-stroke) } 100% { transform:translate(102px,190px);fill:var(--demo-bullet);stroke:var(--demo-bullet-stroke) } }
@keyframes demo-execute-bullet-two { 0%,19% { transform:translate(355px,190px);fill:#c7c0b8;stroke:#8d8884 } 25% { transform:translate(355px,190px);fill:var(--demo-bullet);stroke:var(--demo-bullet-stroke) } 100% { transform:translate(465px,72px);fill:var(--demo-bullet);stroke:var(--demo-bullet-stroke) } }
@keyframes demo-execute-player {
  0%,25% { offset-distance:0%; opacity:1 }
  53% { offset-distance:44%; opacity:1 }
  74% { offset-distance:84%; opacity:1 }
  86%,100% { offset-distance:100%; opacity:1 }
}
@keyframes demo-kill-one { 0%,52% { opacity:1 } 53%,100% { opacity:0 } }
@keyframes demo-kill-two { 0%,73% { opacity:1 } 74%,100% { opacity:0 } }
@keyframes demo-impact-one {
  0%,52%,63%,100% { opacity:0;stroke-width:1 }
  53% { opacity:1;stroke-width:4 }
  62% { opacity:0;stroke-width:1 }
}
@keyframes demo-impact-two {
  0%,73%,84%,100% { opacity:0;stroke-width:1 }
  74% { opacity:1;stroke-width:4 }
  83% { opacity:0;stroke-width:1 }
}
@keyframes title-cut-out {
  0% { opacity: 0; transform: translateX(-70vw) rotate(18deg); }
  45% { opacity: 1; }
  100% { opacity: 0; transform: translateX(70vw) rotate(18deg); }
}
@keyframes wave-enter { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.92); letter-spacing: .28em; } 22% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-52%) scale(1.02); letter-spacing: .12em; } }
@keyframes tutorial-in { from { opacity: 0; transform: translate(-50%,-4px); } }
@keyframes practice-key-pulse { 50% { transform:translateY(2px); color:#fff; box-shadow:0 0 9px #79e4f2; } }
@keyframes practice-pad-swipe { 0%,100% { transform:translate(-22px,8px); opacity:.35 } 25% { opacity:1 } 70% { transform:translate(35px,-15px); opacity:1 } 88% { opacity:.15 } }
@keyframes practice-button-tap { 0%,100% { transform:translateY(-7px); opacity:.25 } 45%,65% { transform:translateY(6px); opacity:1 } }
@keyframes result-in { from { opacity: 0; } }
@keyframes near-miss-pop{from{opacity:0;transform:translate(-50%,8px) scale(.9)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes near-miss-charge{0%{filter:brightness(1)}35%{filter:brightness(1.9)}100%{filter:brightness(1)}}
@keyframes life-hit { 45% { color: #fff; text-shadow: 0 0 15px #ff6971; transform: scale(1.35); } }
.result { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 11px; background: #0d1727e8; animation: result-in .18s ease-out; }
.result[hidden], details[hidden] { display: none; }
.result > span { color: var(--muted); font-size: 12px; }
.result strong { font: italic 700 clamp(34px, 6vw, 60px) Consolas, monospace; color: var(--red); }
.result button { background: var(--cyan); color: #112332; border: 0; padding: 13px 28px; margin-top: 6px; font-weight: 700; }
.formal-result > span { letter-spacing: .15em; }
.formal-result dl, .complete dl { display: flex; gap: clamp(18px, 5vw, 46px); margin: 4px 0; }
.formal-result dl div, .complete dl div { text-align: center; }
.formal-result dt, .complete dt { color: var(--muted); font: 10px Consolas, monospace; letter-spacing: .12em; }
.formal-result dd, .complete dd { margin: 4px 0 0; color: var(--ink); font: 24px Consolas, monospace; font-variant-numeric: tabular-nums; }
.complete > img { width: min(330px, 52vw); height: auto; margin-bottom: -5px; filter: drop-shadow(0 5px 11px #2ad9e725); }
.complete > strong { color: #d8fcff; text-shadow: 0 0 12px #79e4f252; font-size: clamp(27px, 5vw, 50px); }
.complete button kbd { margin-left: 7px; border-color: #112332; }
.result-actions { display: flex; align-items: stretch; justify-content: center; gap: 8px; }
.result .result-actions button { min-width: 145px; margin-top: 6px; }
.result .result-actions .secondary-action { border: 1px solid #54788b; background: #172a3c; color: #d7edf4; }
.life-hit { animation: life-hit .22s ease-out; }
.rule-intro strong { color: var(--cyan); line-height: 1.05; }
.result p { margin: 0; color: var(--ink); font-size: 14px; }
.rule-diagram { padding: 9px 14px; border: 1px solid #43667a; color: var(--muted); font: 12px Consolas, monospace; }
.rule-diagram b { padding: 0 10px; color: var(--cyan); }
.practice-note { padding: 8px 14px; border-left: 2px solid var(--cyan); color: var(--cyan); text-align: center; font: 700 13px Consolas, monospace; }
.practice-note small { color: var(--ink); font: 12px "Yu Gothic UI", sans-serif; }
.practice-note[hidden] { display: none; }
.assist-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-width: min(92%, 520px); }
.assist-choices[hidden], .assist-choices button[hidden] { display: none; }
.assist-choices p { grid-column: 1 / -1; color: var(--muted); font-size: 12px; text-align: center; }
.result .assist-choices button { margin: 0; padding: 9px 13px; border: 1px solid #54788b; background: #172a3c; color: var(--ink); font: 700 12px Consolas, monospace; }
.result .assist-choices button:hover { border-color: var(--cyan); color: var(--cyan); }
.result .assist-choices kbd { color: var(--cyan); }
.incomplete > span { color: #ffb16e; }
.incomplete > strong { color: var(--red); }
footer { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; padding-top: 10px; }
footer p { margin: 0; } footer > span { color: #617d93; }
details { margin-top: 14px; border: 1px solid var(--line); padding: 12px; color: var(--muted); font: 11px Consolas, sans-serif; }
details label { display: block; margin-top: 12px; } details output { display: block; margin-top: 10px; overflow-wrap: anywhere; }
@media(max-width:900px) and (min-width:651px) {
  .hud { grid-template-columns: minmax(170px, 1fr) auto minmax(250px, 1fr); gap: 12px; padding-inline: 14px; }
  .hud-secondary { gap: 16px; }
  .controls { grid-template-columns: repeat(3, minmax(88px, 1fr)) minmax(190px, 1.6fr); }
}
@media(max-width:650px) {
  .shell { padding: 10px; }
  .title-screen { padding: 16px; }
  .title-logo { width: min(100%, calc(100vw - 32px), calc(42vh * 3)); }
  .title-tagline { margin-bottom: 15px; letter-spacing: .28em; }
  .title-start { min-width: min(250px, 80vw); padding: 11px 20px; }
  .title-info { max-width: 340px; min-height: 38px; margin: 5px auto 0; line-height: 1.5; }
  .settings-panel { margin-top: 4px; padding: 7px 10px; }
  .briefing-screen { padding: 12px; }
  .briefing-header { padding-bottom: 8px; }
  .briefing-header strong { font-size: 12px; letter-spacing: .11em; }
  .briefing-pages { margin: 8px 0 7px; }
  .briefing-page { grid-template-columns: 1fr; min-height: 0; }
  .briefing-copy { padding: 13px 15px 12px; border-right: 0; border-bottom: 1px solid #29475a; }
  .briefing-copy h2 { margin: 6px 0 7px; font-size: 18px; line-height:1.08; }
  .briefing-copy p { margin-bottom: 8px; font-size: 11px; line-height:1.5; }
  .briefing-demo { min-height: 0; height: min(37vh,250px); }
  .briefing-actions { grid-template-columns: 82px 1fr; }
  .briefing-skip { grid-column: 1; grid-row: 2; min-height: 32px; }
  .briefing-begin { grid-column: 2; grid-row: 1 / 3; }
  .briefing-begin { min-height: 44px; padding-block: 7px; }
  .masthead-logo img { width: 116px; }
  .masthead { margin-bottom: 8px; } .utilities { gap: 0; } .utilities button { font-size: 11px; padding: 8px; }
  .hud { grid-template-columns: minmax(0, 1fr) auto; min-height: 82px; padding: 6px 10px; gap: 5px 10px; }
  .hud span { font-size: 8px; letter-spacing: .08em; }
  .status-stat { min-width: 0; column-gap: 7px; }
  #phase { font-size: 12px; } #status-action { overflow: hidden; text-overflow: ellipsis; font-size: 8px; }
  .wave-stat { min-width: 72px; } .wave-stat::before { left: 1px; height: 25px; }
  #wave-current { font-size: 20px; } #wave i, #wave-total { font-size: 11px; }
  .hud-secondary { grid-column: 1 / -1; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 4px; border-top: 1px solid #24394c; }
  .hud-secondary > div { display: flex; align-items: baseline; gap: 7px; text-align: left; }
  .hud-secondary strong { font-size: 13px; } .life-stat { min-width: 0; padding-left: 0; border-left: 0; } .life-stat strong { font-size: 15px; }
  .controls { padding: 7px; gap: 7px; } .controls button { min-height: 44px; padding: 7px 8px; font-size: 11px; }
  .controls button { gap: 5px; } kbd { min-width: 21px; padding: 0 4px; font-size: 11px; }
  .charge { grid-template-columns: 82px minmax(0, 1fr) 44px; min-height: 35px; padding: 5px 10px; gap: 7px; }
  .charge label { display: block; } .charge label span { display: block; font-size: 8px; } #stop-time { font-size: 14px; line-height: 1; }
  .controls { display: grid; grid-template-columns: repeat(3, 1fr); }
  #time-stop { grid-column: 1 / -1; }
  canvas { height: auto; aspect-ratio: 8 / 5; }
  footer { flex-wrap: wrap; font-size: 10px; }
  .callout { font-size: calc(17px + var(--strength, 1) * 1px); } .callout small { font-size: 12px; }
  .result { gap: 5px; padding: 10px; } .result button { margin-top: 5px; padding: 10px 16px; }
  .formal-result dl { gap: 15px; } .formal-result dd { font-size: 18px; }
  .result .result-actions button { min-width: 126px; }
  .complete > img { width: min(280px, 72vw); }
  .assist-choices { gap: 5px; } .result .assist-choices button { padding: 7px 9px; font-size: 11px; }
}
@media(max-height:520px) and (min-width:651px) {
  .shell { padding: 5px 16px; } .masthead { margin-bottom: 3px; }
  .touch-controls .masthead, .touch-controls footer { display: none; }
  .title-screen { padding: 10px 24px; }
  .title-logo { width: min(62vw, 680px, calc(42vh * 3)); }
  .title-tagline { margin: 0 0 8px; }
  .title-start { min-height: 38px; padding: 7px 24px; }
  .title-secondary { margin-top: 5px; }
  .title-info { min-height: 18px; margin-top: 1px; }
  .settings-panel { width: min(100%, 390px); padding-block: 5px; }
  .settings-panel label { min-height: 28px; }
  .briefing-screen { padding: 9px 20px; }
  .briefing-header { padding-bottom: 7px; }
  .briefing-pages { margin: 7px 0 5px; }
  .briefing-page { min-height: 230px; grid-template-columns:minmax(220px,.8fr) minmax(340px,1.2fr); }
  .briefing-copy { padding:14px 20px; }
  .briefing-copy h2 { margin:6px 0 8px; font-size:18px; }
  .briefing-copy p { margin-bottom:9px; font-size:10px; line-height:1.45; }
  .briefing-demo { min-height:230px; }
  .briefing-progress { margin-bottom:5px; }
  .briefing-begin { min-height: 42px; padding-block: 6px; }
  .utilities button { padding: 3px 10px; } .hud { min-height: 44px; padding: 3px 14px; } #wave-current { font-size: 20px; }
  .charge { min-height: 31px; padding-block: 3px; }
  canvas { height: min(280px,calc(100svh - 105px)); min-height: 220px; } footer { padding-top: 4px; }
  .controls { padding: 4px 10px; } .controls button { min-height: 44px; padding-block: 5px; }
  .touch-controls .game { display:grid; grid-template-columns:minmax(0,1fr) minmax(205px,26vw); }
  .touch-controls .hud,.touch-controls .charge { grid-column:1 / -1; }
  .touch-controls .arena-wrap { grid-column:1; grid-row:3; }
  .touch-controls .wave-banner { white-space: nowrap; font-size: clamp(22px,4vw,34px); }
  .touch-controls .mobile-command-zone { display:grid; grid-column:2; grid-row:3; grid-template-rows:minmax(88px,1fr) auto; border-left:1px solid var(--line); }
  .touch-controls .move-pad { min-height:88px; border-top:0; }
  .touch-controls .controls { grid-template-columns:repeat(3,1fr); align-content:end; padding:4px; gap:4px; }
  .touch-controls #time-stop { grid-column:1 / -1; }
}
@media(prefers-reduced-motion:reduce) {
  .stopped .arena-wrap::after, .stop-critical #stop-time, .lock-ready, .stop-phase-pulse { animation: none; }
  .stopped .arena-wrap::after { opacity: .78; }
  .stop-final .arena-wrap::after { opacity: 1; }
  .controls button, #phase, #status-action, #stop-time, .charge::before, .charge progress::-webkit-progress-value { transition: none; }
  .title-cut { display: none; }
  .title-logo, .title-tagline, .title-start, .title-secondary { animation: none; opacity: 1; transform: none; clip-path: none; }
  .title-content { transition: none; }
  .wave-banner.wave-enter, .tutorial-prompt, .near-miss-feedback, body.near-miss .charge, .result, .life-hit { animation: none; }
  .briefing-demo * { animation: none !important; }
  .demo-player-evade { transform:translate(118px,67px); }
  .demo-input-evade { transform:translate(143px,91px); }
  .demo-bullet-evade { transform:translate(42px,150px); }
  .demo-freeze .demo-grid { opacity:.12; }
  .demo-freeze .demo-stop-wash { opacity:.55; }
  .demo-freeze .demo-enemy-body,.demo-freeze .demo-enemy-part { fill:var(--demo-enemy-stop);stroke:var(--demo-enemy-stop-stroke); }
  .demo-freeze .demo-enemy-core { fill:#777075; }
  .demo-freeze .demo-player-body { fill:var(--demo-player-stop);stroke:#fff; }
  .demo-bullet-freeze { transform:translate(252px,130px);fill:#c7c0b8;stroke:#8d8884; }
  .demo-draw .demo-route-drawing { stroke-dashoffset:0; }
  .demo-input-draw,.demo-touch-draw-cursor { offset-distance:100%;transform:none; }
  .demo-draw .demo-mouse-button { fill:#173142; }
  .demo-click-origin { opacity:0; }
  .demo-draw .demo-target-one,.demo-draw .demo-target-two { opacity:1;filter:drop-shadow(0 0 8px #79e4f2); }
  .demo-freeze-frame,.demo-stop-label { opacity:.8; }
  .demo-normal-label { opacity:0; }
  .demo-player-execute { offset-distance:100%; }
  .demo-execute .demo-enemy { opacity:.22; }
  .demo-execute .demo-impact { opacity:.72;stroke-width:2.5; }
  .demo-execute-wash,.demo-execute-frame,.demo-resume-ring { opacity:0; }
  .demo-execute .demo-grid { opacity:.34; }
  .demo-execute .demo-enemy-body { fill:var(--demo-enemy);stroke:var(--demo-enemy-stroke); }
  .demo-execute .demo-enemy-core { fill:#ff9c9c; }
  .demo-execute-bullet-one { transform:translate(102px,190px);fill:var(--demo-bullet);stroke:var(--demo-bullet-stroke); }
  .demo-execute-bullet-two { transform:translate(465px,72px);fill:var(--demo-bullet);stroke:var(--demo-bullet-stroke); }
  .practice-pad-finger,.practice-button-finger,.practice-freeze:not(.touch-controls) .tutorial-prompt kbd,.practice-execute:not(.touch-controls) .tutorial-prompt kbd { animation:none; }
}