:root {
  color-scheme: dark;
  --ink: #10162f;
  --paper: #fff4d6;
  --cyan: #5dd6e8;
  --teal: #18a7a0;
  --coral: #ff5a5f;
  --gold: #ffd34e;
  --shadow: #050817b8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; overflow: hidden; background: var(--ink); }
button, input { font: inherit; }
button { min-width: 44px; min-height: 44px; border: 1px solid #fff4d659; border-radius: 12px; padding: 10px 17px; color: var(--paper); background: #1c264be8; font-weight: 820; letter-spacing: .025em; cursor: pointer; box-shadow: inset 0 1px #ffffff26, 0 5px 14px #0306144d; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
button:hover, button:focus-visible { transform: translateY(-2px); border-color: var(--cyan); background: #263764; outline: none; }
button:active { transform: translateY(1px) scale(.98); }
button:disabled { opacity: .43; cursor: not-allowed; transform: none; }
button.primary { color: #102330; border-color: #fff0b5; background: linear-gradient(135deg, #ffd34e, #ff8c55); box-shadow: inset 0 1px #fff8, 0 8px 24px #ff77554d; }
button.primary:hover { background: linear-gradient(135deg, #ffe577, #ff9b62); }
[hidden] { display: none !important; }
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.paper-grain { pointer-events: none; position: fixed; inset: 0; z-index: 2; opacity: .15; mix-blend-mode: soft-light; background-image: repeating-linear-gradient(18deg, transparent 0 5px, #fff 6px 7px, transparent 8px 12px), repeating-linear-gradient(98deg, transparent 0 9px, #08142b 10px 11px); }
.game-shell { position: fixed; inset: 0; z-index: 5; pointer-events: none; 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)); }
.screen { position: absolute; inset: 0; pointer-events: none; }
.screen > * { pointer-events: auto; }
.paper-card { position: relative; color: var(--paper); border: 1px solid #fff4d670; background: linear-gradient(150deg, #182347f2, #11162ff5 65%); border-radius: 24px 8px 24px 8px; box-shadow: 0 24px 80px var(--shadow), inset 0 1px #fff3; }
.paper-card::after { content: ""; pointer-events: none; position: absolute; inset: 5px; border: 1px dashed #fff4d62b; border-radius: 19px 6px 19px 6px; }
.eyebrow { margin: 0 0 7px; color: var(--cyan); font-size: 11px; font-weight: 900; letter-spacing: .19em; }
.danger { color: #ff8795; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2 { margin: 0; padding-block: .04em; font-family: Georgia, "Times New Roman", serif; line-height: 1.08; }
h2 { font-size: clamp(30px, 5vw, 56px); }
h3 { margin: 0 0 7px; font-size: 20px; }
p { line-height: 1.55; }
.title-screen { isolation: isolate; overflow: hidden; }
.title-screen::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; background: linear-gradient(90deg, #07132ac2 0%, #07132a65 32%, transparent 58%), radial-gradient(circle at 78% 48%, transparent 0 26%, #06213b22 64%, #07132a8f 110%); }
.title-art, .title-art-layer { position: absolute; inset: 0; pointer-events: none; }
.title-art { z-index: 0; overflow: visible; contain: layout paint; background: #50d1dc; }
.title-art-layer img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.title-backdrop { inset: -5%; animation: title-backdrop-drift 18s ease-in-out infinite alternate; }
.title-backdrop img { object-fit: cover; object-position: center; }
.title-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #35c9dc12 0 56%, #08193638); mix-blend-mode: multiply; }
.title-midground { z-index: 1; inset: auto 0 -1px; height: clamp(170px, 32vh, 330px); overflow: hidden; filter: drop-shadow(0 -12px 24px #0b586a42); }
.title-midground-track { display: flex; width: 200vw; height: 100%; animation: title-midground-run 22s linear infinite; will-change: transform; }
.title-midground-track img { flex: 0 0 100vw; width: 100vw; object-fit: cover; object-position: center bottom; }
.title-speed-arc { z-index: 1; inset: 3% -1% 3% 38%; opacity: .92; animation: title-speed-arc 7.2s ease-in-out infinite; filter: drop-shadow(0 12px 18px #ff654e45); }
.title-speed-arc img { object-position: center; }
.title-pip-hero { z-index: 2; inset: 4% 2% 1% 43%; animation: title-pip-hero 3.6s ease-in-out infinite; filter: drop-shadow(0 24px 22px #04233d70) drop-shadow(0 0 12px #fff4d65e); will-change: transform; }
.title-pip-hero img { object-position: center bottom; }
.title-layout { position: absolute; z-index: 4; inset: 0; display: grid; align-items: center; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(clamp(24px, 5.5vw, 88px), env(safe-area-inset-left)); pointer-events: none; }
.title-lockup { width: min(500px, 40vw); max-height: calc(100vh - 40px); overflow-x: hidden; overflow-y: auto; padding: clamp(22px, 3vw, 34px); border-color: #fff4d6a3; background: linear-gradient(145deg, #101b3bf2, #10162fe8 62%, #0c3853e6); transform: skewY(-.7deg); box-shadow: 15px 18px 0 #0b4f6468, 0 28px 80px #041020a8, inset 0 1px #fff5; pointer-events: auto; }
.title-lockup > * { transform: skewY(.7deg); }
.title-lockup h1 { display: grid; font-size: clamp(54px, 6.2vw, 82px); letter-spacing: -.075em; overflow-wrap: normal; filter: drop-shadow(0 8px 0 #08112970); }
.title-lockup h1 span { display: block; padding: .08em .03em .12em; color: var(--paper); line-height: 1.16; }
.title-lockup h1 strong { display: block; margin-top: -.12em; padding: .08em .08em .12em .03em; color: var(--coral); font-style: italic; line-height: 1.16; }
.title-rivalry { display: inline-block; margin: 0 0 9px; padding: 5px 9px; border: 1px solid #ffd34e7a; border-radius: 3px 10px; color: #fff4d6; background: #111831bb; font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.title-rivalry span { color: var(--gold); }
.title-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.title-choice-row > button { min-width: 0; }
.title-lockup .button-row { flex-wrap: nowrap; }
.title-lockup button { min-height: 46px; }
.title-lockup .primary { position: relative; overflow: hidden; font-size: 17px; }
.title-lockup .primary::after { content: ""; position: absolute; inset: 0 auto 0 42%; width: 16%; transform: skewX(-24deg) scaleX(.3); background: #fff8; animation: title-button-flash 3.2s ease-in-out infinite; }
@keyframes title-backdrop-drift { from { transform: translate3d(0, 0, 0) scale(1.03); } to { transform: translate3d(-2.4%, -1.2%, 0) scale(1.08); } }
@keyframes title-midground-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes title-speed-arc { 0%, 100% { transform: rotate(-3deg) scale(.98); opacity: .78; } 50% { transform: rotate(3deg) scale(1.035); opacity: .97; } }
@keyframes title-pip-hero { 0%, 100% { transform: translate3d(0, 0, 0) rotate(.5deg); } 50% { transform: translate3d(0, -1.5%, 0) rotate(-1deg); } }
@keyframes title-button-flash { 0%, 62% { transform: skewX(-24deg) scaleX(.3); opacity: 0; } 70% { opacity: .8; } 88%, 100% { transform: skewX(-24deg) scaleX(1.5); opacity: 0; } }
.lede { max-width: 390px; margin: 16px 0 22px; color: #e4eeee; font-weight: 620; }
.microcopy { margin: 16px 0 0; color: #b7c8d2; font-size: 11px; }
.button-stack { display: grid; gap: 9px; }
.button-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.button-row > * { flex: 1 1 110px; }
.panel-screen { display: grid; place-items: center; padding: 20px; overflow: auto; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.panel-heading output { flex: 0 0 auto; color: var(--gold); font-weight: 900; }
.icon-button { position: relative; z-index: 1; padding: 0; border-radius: 50%; font-size: 24px; }
.tutorial-card, .stage-panel, .settings-card, .result-card, .credits-card, .win-card { width: min(780px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow-y: auto; padding: clamp(22px, 4vw, 38px); }
.tutorial-card article { display: grid; grid-template-columns: minmax(90px, 150px) 1fr; gap: 22px; align-items: center; min-height: 190px; padding: 22px; margin: 18px 0; border: 1px solid #fff4d633; border-radius: 16px; background: #0e1734a3; }
.tutorial-key, .coin-glyph, .shield-glyph { display: grid; place-items: center; min-height: 86px; border: 2px solid #fff4d6; border-radius: 16px 4px 16px 4px; color: var(--ink); background: var(--paper); box-shadow: 7px 8px 0 #5dd6e866; font-size: 28px; font-weight: 950; }
.tutorial-key.wide { font-size: 17px; }
.coin-glyph { color: #9a5b00; background: radial-gradient(circle, #fff9a5 0 22%, #ffd34e 24% 58%, #c98200 60% 68%, #ffd34e 70%); }
.shield-glyph { color: #dffcff; border-color: #8ff4ff; background: radial-gradient(circle, #eaffff 0 16%, #41dbe5 18% 55%, #087b92 58% 70%, #10162f 72%); box-shadow: 7px 8px 0 #5dd6e888, 0 0 22px #5dd6e877; }
.stage-list { display: grid; gap: 12px; }
.stage-card { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 15px; width: 100%; min-height: 86px; text-align: left; }
.stage-card strong, .stage-card small { display: block; }
.stage-card strong { margin-bottom: 5px; font-size: 18px; }
.stage-card small { color: #bcd0d5; }
.stage-number { color: var(--coral); font: italic 900 26px Georgia, serif; }
.stage-best { color: var(--gold); white-space: nowrap; }
.cutscene-screen { display: grid; align-items: end; justify-items: center; padding: 24px; overflow: hidden; background: #090b18; }
.cutscene-frame { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.cutscene-frame::after { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, #090b18e8 70%, #090b18); pointer-events: none; }
.cutscene-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cutscene-frame figcaption { position: absolute; z-index: 1; top: max(18px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); padding: 8px 12px; border: 1px solid #f1e6ce66; border-radius: 4px 12px; color: #f1e6ce; background: #0a0b10c9; font: 800 12px ui-monospace, monospace; }
.cutscene-caption { position: relative; z-index: 1; width: min(720px, calc(100vw - 36px)); max-height: 48vh; overflow-y: auto; padding: 24px 28px; border-color: #d4af3780; background: #0a0b10e8; }
.cutscene-caption h2 { font-size: clamp(30px, 6vw, 64px); }
.gameplay-hud { padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)); }
.hud-cluster { position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); display: flex; gap: 8px; }
.hud-cluster > div, .hud-stage, .hud-actions button { min-height: 52px; border: 1px solid #fff4d650; background: #10162fce; box-shadow: 0 8px 22px #02061266; }
.hud-cluster > div { display: grid; align-content: center; min-width: 90px; padding: 7px 12px; border-radius: 14px 5px; }
.hud-cluster small { color: #99b8c0; font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.hud-cluster strong { font: 800 18px ui-monospace, monospace; }
.hud-coin { grid-template-columns: 26px 1fr; align-items: center; }
.coin-icon { width: 22px; height: 22px; border: 4px solid var(--gold); border-radius: 50%; box-shadow: 0 0 12px #ffd34e99, inset 0 0 4px #fff; }
.hud-stage { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); padding: 15px 20px; border-radius: 5px 14px; color: var(--paper); font-size: 12px; font-weight: 850; letter-spacing: .08em; }
.boss-hud { position: absolute; top: max(76px, calc(env(safe-area-inset-top) + 70px)); left: 50%; display: grid; min-width: 270px; padding: 9px 16px; transform: translateX(-50%); border: 1px solid #d4af3788; border-radius: 4px 14px; background: #0a0b10df; box-shadow: 0 8px 24px #0009; text-align: center; }
.boss-hud span { color: #f1e6ce; font-size: 11px; font-weight: 950; letter-spacing: .14em; }
.boss-hud strong { color: #d4af37; font-size: 19px; letter-spacing: .22em; text-shadow: 0 0 12px #d4af3788; }
.boss-hud small { color: #8ecabb; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.shield-hud { position: absolute; top: max(76px, calc(env(safe-area-inset-top) + 70px)); left: max(14px, env(safe-area-inset-left)); display: grid; grid-template-columns: 28px auto; grid-template-rows: auto auto; column-gap: 8px; min-width: 112px; padding: 7px 11px; border: 1px solid #73edff99; border-radius: 14px 5px; color: #dffcff; background: #092f47df; box-shadow: 0 0 22px #5dd6e855, 0 8px 22px #02061266; }
.shield-hud span { grid-row: 1 / 3; align-self: center; color: #8ff4ff; font-size: 25px; text-shadow: 0 0 10px #5dd6e8; }
.shield-hud strong { font: 900 15px ui-monospace, monospace; }
.shield-hud small { color: #a8eaf0; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.hud-actions { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: flex; gap: 8px; pointer-events: auto; }
.hud-actions button { padding: 7px 11px; border-radius: 5px 14px; font-size: 10px; }
.momentum-entry-guide { position: absolute; bottom: max(58px, calc(env(safe-area-inset-bottom) + 52px)); left: 50%; width: min(430px, calc(100vw - 36px)); padding: 10px 14px 11px; transform: translateX(-50%); border: 1px solid #ff6479aa; border-radius: 15px 5px 15px 5px; color: var(--paper); background: linear-gradient(140deg, #10162fec, #301a32e8); box-shadow: 0 10px 26px #02061288, inset 0 1px #fff2; text-align: left; pointer-events: none; }
.entry-guide-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #ff8e9c; font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.entry-guide-heading strong { flex: 0 0 auto; font: 950 17px ui-monospace, monospace; letter-spacing: .02em; }
.momentum-entry-guide p { margin: 3px 0 2px; font-size: 13px; font-weight: 950; letter-spacing: .055em; line-height: 1.25; }
.momentum-entry-guide small { color: #d5c4cc; font: 850 9px ui-monospace, monospace; letter-spacing: .08em; }
.entry-guide-track { position: relative; display: block; height: 7px; margin-top: 6px; overflow: visible; border: 1px solid #fff4d65c; border-radius: 99px; background: #071024cc; }
.entry-guide-track b { position: absolute; inset: 0; transform: scaleX(.025); transform-origin: left; border-radius: inherit; background: linear-gradient(90deg, #ff6479, #ffd34e); box-shadow: 0 0 12px #ff647999; transition: transform .08s linear; }
.entry-guide-track em { position: absolute; top: -4px; right: -1px; width: 3px; height: 13px; transform: skewX(-12deg); background: #fff4d6; box-shadow: 0 0 9px #fff4d6; }
.momentum-entry-guide[data-status="approach-ready"], .momentum-entry-guide[data-status="tap-down"] { border-color: #ffd34ec7; background: linear-gradient(140deg, #10162fec, #3c3018e8); }
.momentum-entry-guide[data-status="approach-ready"] .entry-guide-heading, .momentum-entry-guide[data-status="tap-down"] .entry-guide-heading { color: #ffd34e; }
.momentum-entry-guide[data-status="tap-down"] { animation: entry-guide-tap 0.52s ease-in-out infinite alternate; }
.momentum-entry-guide[data-status="entry-armed"] { border-color: #76fff2d9; background: linear-gradient(140deg, #10162fec, #0a424be8); box-shadow: 0 0 24px #5dd6e866, 0 10px 26px #02061288; }
.momentum-entry-guide[data-status="entry-armed"] .entry-guide-heading { color: #76fff2; }
.momentum-entry-guide[data-status="entry-armed"] .entry-guide-track b { background: linear-gradient(90deg, #ffd34e, #76fff2); box-shadow: 0 0 14px #76fff2aa; }
@keyframes entry-guide-tap { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.025); } }
.charge-meter { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; width: min(340px, 44vw); transform: translateX(-50%); color: var(--paper); text-align: center; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-shadow: 0 2px 5px #000; }
.charge-meter i { display: block; height: 10px; margin-top: 6px; overflow: hidden; border: 1px solid #fff4d680; border-radius: 99px; background: #0d1530cc; }
.charge-meter b { display: block; width: 100%; height: 100%; transform: scaleX(.02); transform-origin: left; background: linear-gradient(90deg, var(--cyan), var(--gold), var(--coral)); box-shadow: 0 0 15px var(--coral); transition: transform .05s linear; }
.compact-card { width: min(410px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow-y: auto; padding: 34px; text-align: center; }
.toggle-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid #fff4d626; }
.toggle-row span { display: grid; gap: 4px; }
.toggle-row small { color: #a8bdc7; }
.toggle-row input { appearance: none; flex: 0 0 auto; width: 56px; height: 32px; border: 1px solid #fff4d666; border-radius: 99px; background: #222b49; cursor: pointer; }
.toggle-row input::after { content: ""; display: block; width: 24px; height: 24px; margin: 3px; border-radius: 50%; background: var(--paper); transition: transform .18s; }
.toggle-row input:checked { background: var(--teal); }
.toggle-row input:checked::after { transform: translateX(24px); }
.danger-button { position: relative; z-index: 1; margin-top: 20px; border-color: #ff879566; color: #ffb1b8; }
.rank-fold { float: right; display: grid; place-items: center; width: 120px; height: 120px; margin: 0 0 12px 20px; clip-path: polygon(50% 0, 100% 23%, 91% 84%, 50% 100%, 9% 84%, 0 23%); color: var(--ink); background: var(--gold); filter: drop-shadow(0 10px 14px #0008); }
.rank-fold span { font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.rank-fold strong { font: italic 900 58px/.7 Georgia, serif; }
.result-card dl, .credits-card dl { clear: both; display: grid; gap: 1px; overflow: hidden; margin: 22px 0; border-radius: 13px; background: #fff4d62a; }
.result-card dl div, .credits-card dl div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 15px; background: #10162f; }
dt { color: #a9c0c7; }
dd { margin: 0; font-weight: 820; }
.score-line { color: #bcd0d5; }
.score-line strong { color: var(--gold); }
.toast { position: fixed; z-index: 12; top: max(76px, calc(env(safe-area-inset-top) + 64px)); left: 50%; transform: translateX(-50%); max-width: min(340px, 72vw); padding: 9px 16px; border: 1px solid #fff4d670; border-radius: 12px 4px; color: var(--paper); background: #10162fcf; box-shadow: 0 8px 24px #0006; font-size: 13px; font-weight: 850; text-align: center; }
.toast[data-tone="danger"] { border-color: #ff6479; color: #ffd4d8; }
body.is-boss-active .toast { top: max(158px, calc(env(safe-area-inset-top) + 150px)); }
.touch-controls { display: none; position: fixed; z-index: 10; inset: auto max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); align-items: end; justify-content: space-between; pointer-events: none; }
.dpad, .touch-actions { display: flex; align-items: end; gap: 10px; pointer-events: auto; touch-action: none; }
.touch-controls button { min-width: 48px; min-height: 48px; padding: 5px; border-radius: 50% 12% 50% 12%; background: #10162f9c; box-shadow: 0 4px 13px #0005; touch-action: none; user-select: none; }
.touch-actions .dash-button { min-width: 92px; border-color: #ffb669; background: #702d47b3; }
.touch-actions .boost-button { min-width: 72px; border-color: #7eeff4; background: #126b78b8; }
.touch-actions .roll-button { min-width: 56px; border-color: #ffd96f; background: #695130bd; }
.dash-button small, .boost-button small { font-size: 8px; color: #ffe2c4; }
.orientation-fallback { position: fixed; z-index: 40; inset: 50% auto auto 50%; width: min(360px, calc(100vw - 36px)); transform: translate(-50%, -50%); padding: 26px; text-align: center; }
.rotate-icon { font-size: 48px; color: var(--cyan); }
.orientation-fallback h2 { font-size: 32px; }
.boot-status { position: fixed; z-index: 50; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 10px 15px; border-radius: 99px; color: var(--paper); background: #10162fe6; font-size: 12px; box-shadow: 0 10px 30px #0008; }
body.is-charging #game-canvas { filter: saturate(1.16) contrast(1.04); }
body.is-dashing .paper-grain { opacity: .28; transform: skewX(-5deg); }
body.is-boost-running .paper-grain { opacity: .22; transform: skewX(-3deg); }
body.is-momentum-rolling .paper-grain { opacity: .2; transform: skewX(-6deg); }
body.is-shielded #game-canvas { filter: saturate(1.12) contrast(1.03); }
body.is-boost-running .charge-meter b { box-shadow: 0 0 18px #5dd6e8, 0 0 30px #ffd34e88; }
body.is-ui-departing .game-shell { pointer-events: none; }
.ui-departure-visual {
  position: fixed !important;
  z-index: 70;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform-origin: 50% 46%;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  animation: ui-origami-bird-depart var(--ui-departure-duration, 840ms) cubic-bezier(.28, .02, .18, 1) both;
}
.ui-departure-visual > :not(.origami-bird__piece) {
  transform-origin: 50% 35%;
  animation: ui-origami-content-fold var(--ui-departure-duration, 840ms) ease-in both;
}
.origami-bird__piece {
  position: absolute;
  z-index: 4;
  display: block;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 9px 8px #07102366);
}
.origami-bird__body {
  left: 38%;
  top: 34%;
  width: 30%;
  aspect-ratio: 1;
  border: 2px solid #17213f99;
  clip-path: polygon(0 51%, 42% 0, 100% 45%, 59% 55%, 87% 100%, 40% 72%);
  background: linear-gradient(135deg, #fff8df 5%, #ffc94d 54%, #ff6d5f 55%, #df3c51 100%);
  animation: ui-origami-body-reveal var(--ui-departure-duration, 840ms) ease-out both;
}
.origami-bird__wing {
  top: 22%;
  width: 40%;
  height: 42%;
  border: 2px solid #17213f88;
  background: linear-gradient(145deg, #fff9e7 0 25%, #54d8e7 26% 59%, #167f9c 60%);
  transform-origin: 100% 78%;
}
.origami-bird__wing::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(8% 100%, 100% 0, 100% 10%);
  background: #17213f45;
}
.origami-bird__wing--left {
  left: 9%;
  clip-path: polygon(0 0, 100% 80%, 42% 100%);
  animation: ui-origami-wing-left var(--ui-departure-duration, 840ms) ease-in-out both;
}
.origami-bird__wing--right {
  right: 4%;
  clip-path: polygon(100% 0, 0 80%, 58% 100%);
  transform-origin: 0 78%;
  animation: ui-origami-wing-right var(--ui-departure-duration, 840ms) ease-in-out both;
}
.origami-bird__beak {
  left: 65%;
  top: 43%;
  width: 14%;
  height: 14%;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: #ff8a3d;
  animation: ui-origami-body-reveal var(--ui-departure-duration, 840ms) ease-out both;
}
@keyframes ui-origami-content-fold {
  0%, 16% { opacity: 1; transform: rotateX(0) scaleY(1); }
  28% { opacity: .72; transform: perspective(700px) rotateX(78deg) scaleY(.22); }
  35%, 100% { opacity: 0; transform: perspective(700px) rotateX(88deg) scaleY(.04); }
}
@keyframes ui-origami-body-reveal {
  0%, 27% { opacity: 0; transform: rotate(-18deg) scale(.3); }
  35% { opacity: 1; transform: rotate(-4deg) scale(1); }
  100% { opacity: 1; transform: rotate(7deg) scale(1); }
}
@keyframes ui-origami-wing-left {
  0%, 27% { opacity: 0; transform: rotate(25deg) scale(.2); }
  35% { opacity: 1; transform: rotate(5deg) scale(1); }
  46% { opacity: 1; transform: rotate(-32deg) scaleY(.72); }
  59% { opacity: 1; transform: rotate(8deg) scaleY(1.08); }
  72% { opacity: 1; transform: rotate(-29deg) scaleY(.76); }
  86%, 100% { opacity: 1; transform: rotate(7deg) scaleY(1); }
}
@keyframes ui-origami-wing-right {
  0%, 27% { opacity: 0; transform: rotate(-25deg) scale(.2); }
  35% { opacity: 1; transform: rotate(-5deg) scale(1); }
  46% { opacity: 1; transform: rotate(32deg) scaleY(.72); }
  59% { opacity: 1; transform: rotate(-8deg) scaleY(1.08); }
  72% { opacity: 1; transform: rotate(29deg) scaleY(.76); }
  86%, 100% { opacity: 1; transform: rotate(-7deg) scaleY(1); }
}
@keyframes ui-origami-bird-depart {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); filter: drop-shadow(0 12px 18px #0006); }
  18% { opacity: 1; transform: translate3d(0, -1vh, 0) perspective(900px) rotateX(16deg) rotate(-1deg) scale(.98, .88); }
  30% { opacity: 1; transform: translate3d(1vw, -2vh, 0) perspective(900px) rotateX(72deg) rotate(-5deg) scale(.72, .28); }
  35% { opacity: 1; transform: translate3d(4vw, -5vh, 0) rotate(-8deg) scale(.34, .27); filter: drop-shadow(0 16px 12px #0005); }
  52% { opacity: 1; transform: translate3d(23vw, -18vh, 0) rotate(3deg) scale(.29); }
  72% { opacity: .94; transform: translate3d(57vw, -43vh, 0) rotate(-4deg) scale(.22); }
  100% { opacity: .08; transform: translate3d(112vw, -88vh, 0) rotate(18deg) scale(.1); filter: drop-shadow(0 2px 2px #0000); }
}
@keyframes ui-origami-fold-fade {
  from { opacity: 1; transform: perspective(700px) rotateX(0) scale(1); }
  to { opacity: 0; transform: perspective(700px) rotateX(82deg) scale(.72, .14); }
}
body.is-reduced-effects .ui-departure-visual,
.ui-departure-visual.is-reduced {
  animation-name: ui-origami-fold-fade !important;
  animation-duration: 120ms !important;
}
body.is-reduced-effects .ui-departure-visual > :not(.origami-bird__piece),
.ui-departure-visual.is-reduced > :not(.origami-bird__piece) { animation: none !important; }
body.is-reduced-effects .ui-departure-visual .origami-bird__piece,
.ui-departure-visual.is-reduced .origami-bird__piece { display: none; }
body.is-reduced-effects .title-art-layer, body.is-reduced-effects .title-midground-track, body.is-reduced-effects .title-lockup .primary::after { animation: none; }
body.is-reduced-effects .title-backdrop { transform: scale(1.03); }
body.is-reduced-effects .title-speed-arc { opacity: .82; }
body.unsupported-orientation .game-shell, body.unsupported-orientation .touch-controls, body.unsupported-orientation .toast { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .title-art-layer, .title-midground-track, .title-lockup .primary::after { animation: none !important; }
  .title-backdrop { transform: scale(1.03); }
  .ui-departure-visual { animation-name: ui-origami-fold-fade !important; animation-duration: 120ms !important; }
  .ui-departure-visual > :not(.origami-bird__piece) { animation: none !important; }
  .ui-departure-visual .origami-bird__piece { display: none; }
}

@media (pointer: coarse) {
  body[data-screen="gameplay"] .touch-controls { display: flex; }
  .momentum-entry-guide { bottom: max(88px, calc(env(safe-area-inset-bottom) + 82px)); width: min(390px, 58vw); }
  .charge-meter { bottom: max(15px, env(safe-area-inset-bottom)); width: 28vw; }
}
@media (pointer: coarse) and (max-width: 900px) {
  .touch-actions { gap: 6px; }
  .touch-actions .boost-button { min-width: 64px; }
  .touch-actions .dash-button { min-width: 82px; }
}
@media (max-width: 900px) {
  .title-layout { padding: 16px max(16px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left)); }
  .title-lockup { width: min(410px, 47vw); padding: 19px; }
  .title-lockup h1 { font-size: clamp(44px, 7.7vw, 66px); }
  .title-pip-hero { inset: 4% 0 0 44%; }
  .title-speed-arc { inset: 4% -4% 2% 38%; }
  .title-midground { height: clamp(120px, 31vh, 220px); }
  .lede { margin: 10px 0 14px; font-size: 13px; }
  .microcopy { display: none; }
  .hud-cluster > div { min-width: 74px; padding: 6px 8px; }
  .hud-cluster strong { font-size: 14px; }
  .hud-stage { display: none; }
  .boss-hud { top: max(70px, calc(env(safe-area-inset-top) + 62px)); min-width: 210px; padding: 7px 11px; }
  .tutorial-card article { min-height: 130px; }
}
@media (max-height: 520px) {
  .title-layout { padding-block: 10px; }
  .title-lockup { width: min(400px, 46vw); max-height: calc(100vh - 20px); padding: 13px 17px; }
  .title-lockup h1 { font-size: clamp(38px, 11vh, 56px); }
  .title-rivalry { margin-bottom: 4px; padding: 3px 7px; font-size: 8px; }
  .title-lockup .eyebrow { margin-bottom: 1px; font-size: 8px; }
  .title-lockup .lede { display: none; }
  .title-lockup .button-stack { gap: 5px; }
  .title-choice-row, .title-lockup .button-row { gap: 5px; }
  .title-pip-hero { inset: 0 -1% -2% 43%; }
  .title-speed-arc { inset: -4% -4% -2% 36%; }
  .title-midground { height: 42vh; opacity: .88; }
  button { min-height: 44px; padding: 7px 12px; }
  .panel-screen { align-items: start; padding: 10px; }
  .tutorial-card, .stage-panel, .settings-card, .result-card, .credits-card, .win-card { max-height: calc(100vh - 20px); padding: 18px; }
  .tutorial-card article { min-height: 112px; margin: 8px 0; padding: 14px; }
  .touch-controls button { min-width: 48px; min-height: 48px; }
  .momentum-entry-guide { top: max(72px, calc(env(safe-area-inset-top) + 66px)); bottom: auto; width: min(350px, 52vw); padding: 7px 10px 8px; }
  .momentum-entry-guide p { font-size: 11px; }
  .cutscene-caption { max-height: 62vh; padding: 17px 22px; }
  .cutscene-caption p { margin: 7px 0; }
  .cutscene-frame img { object-position: center 30%; }
  .boss-hud { top: max(8px, env(safe-area-inset-top)); min-width: 190px; }
  body.is-boss-active .toast { top: max(76px, calc(env(safe-area-inset-top) + 70px)); }
}