@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --ink: #17352d;
  --ink-deep: #0e2923;
  --paper: #f4f0e5;
  --paper-dark: #e9e4d5;
  --coral: #ff765e;
  --coral-dark: #dc5f4d;
  --lime: #d8e86b;
  --butter: #f9dc87;
  --line: rgba(23, 53, 45, 0.2);
  --muted: #65756b;
  --mono: 'DM Mono', 'Courier New', monospace;
  --display: 'Space Grotesk', 'Trebuchet MS', sans-serif;
  --body: 'Manrope', 'Avenir Next', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.site-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 8%, rgba(216, 232, 107, .28), transparent 25rem),
    radial-gradient(circle at 84% 54%, rgba(255, 118, 94, .1), transparent 28rem),
    var(--paper);
}
.site-shell::before,
.site-shell::after {
  position: absolute;
  z-index: 0;
  display: block;
  content: '';
  pointer-events: none;
}
.site-shell::before {
  top: 6rem;
  right: -5rem;
  width: 16rem;
  height: 16rem;
  border: 1px solid rgba(23, 53, 45, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 2rem rgba(23, 53, 45, .025), 0 0 0 5rem rgba(23, 53, 45, .02);
}
.site-shell::after {
  top: 7rem;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--line);
}

.topbar,
.page-grid,
.site-footer { position: relative; z-index: 1; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1320px, calc(100% - 72px));
  height: 7rem;
  margin: 0 auto;
}
.brand { display: inline-flex; align-items: center; gap: .85rem; color: inherit; text-decoration: none; }
.brand-mark { position: relative; display: block; width: 2.4rem; height: 2.4rem; transform: rotate(-10deg); }
.brand-mark i, .brand-mark b { position: absolute; display: block; background: var(--coral); }
.brand-mark i { width: .68rem; height: .83rem; border-radius: 50%; }
.brand-mark i:nth-child(1) { top: .12rem; left: .92rem; transform: rotate(10deg); }
.brand-mark i:nth-child(2) { top: .55rem; left: .18rem; transform: rotate(-38deg); }
.brand-mark i:nth-child(3) { top: .75rem; left: 1.55rem; transform: rotate(40deg); }
.brand-mark i:nth-child(4) { top: 1.38rem; left: .25rem; transform: rotate(-20deg); }
.brand-mark b { top: .96rem; left: .75rem; width: 1.05rem; height: 1.2rem; border-radius: 48% 48% 58% 58%; }
.brand-copy { display: grid; gap: .14rem; }
.brand-copy strong { font: 700 1.1rem/1 var(--display); letter-spacing: -.05em; }
.brand-copy small, .best-run span, .sound-label { color: var(--muted); font: 500 .58rem/1 var(--mono); letter-spacing: .12em; }
.topbar-actions { display: flex; align-items: center; gap: 1.65rem; }
.best-run { display: grid; gap: .25rem; text-align: right; }
.best-run strong { font: 600 .9rem/1 var(--mono); letter-spacing: .05em; }
.icon-button, .pause-button, .tilt-button, .text-button { cursor: pointer; border: 0; color: inherit; background: transparent; }
.icon-button { display: inline-flex; align-items: center; gap: .55rem; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 2rem; transition: background .2s, color .2s; }
.icon-button:hover, .icon-button:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.speaker-bars { display: flex; align-items: flex-end; gap: 2px; height: .9rem; }
.speaker-bars i { display: block; width: 3px; border-radius: 2px; background: var(--coral); }
.speaker-bars i:nth-child(1) { height: .4rem; }
.speaker-bars i:nth-child(2) { height: .7rem; }
.speaker-bars i:nth-child(3) { height: .95rem; }

.page-grid { display: grid; grid-template-columns: minmax(205px, 1fr) minmax(380px, 440px) minmax(205px, 1fr); gap: clamp(2rem, 5vw, 7rem); align-items: center; width: min(1320px, calc(100% - 72px)); margin: 3.5rem auto 4rem; }
.story-column { align-self: center; padding-bottom: 2rem; }
.eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.35rem; color: var(--muted); font: 500 .62rem/1 var(--mono); letter-spacing: .12em; }
.eyebrow > span { display: block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 .25rem rgba(255, 118, 94, .16); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 1.3rem; color: var(--ink-deep); font: 700 clamp(2.7rem, 5vw, 4.7rem)/.91 var(--display); letter-spacing: -.085em; }
h1 em, h2 em { color: var(--coral); font-style: normal; }
.hero-copy { max-width: 22rem; margin-bottom: 2rem; color: var(--muted); font-size: .87rem; line-height: 1.75; }
.hero-rule { display: flex; align-items: center; gap: .65rem; max-width: 17rem; margin-bottom: 1.7rem; color: var(--muted); font: 500 .6rem/1 var(--mono); }
.hero-rule i { display: block; flex: 1; height: 1px; background: var(--line); }
.hero-rule span:first-child { color: var(--coral); }
.story-stats { display: flex; gap: 2rem; margin-bottom: 2.35rem; }
.story-stats > div { display: flex; align-items: center; gap: .55rem; }
.story-stats strong { color: var(--coral); font: 600 1.8rem/1 var(--display); letter-spacing: -.08em; }
.story-stats span { color: var(--muted); font: 500 .57rem/1.35 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.tip-card { display: flex; gap: .75rem; max-width: 18rem; padding: .9rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tip-icon { display: grid; flex: 0 0 1.4rem; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; color: var(--ink); background: var(--lime); font: 700 .75rem/1 var(--display); }
.tip-card strong, .card-kicker { font: 600 .58rem/1 var(--mono); letter-spacing: .11em; }
.tip-card p { margin: .35rem 0 0; color: var(--muted); font-size: .67rem; line-height: 1.5; }

.game-stage { display: flex; justify-content: center; }
.game-frame { width: min(100%, 440px); padding: .68rem; border-radius: 1.6rem; background: var(--ink); box-shadow: 0 2rem 5rem rgba(23, 53, 45, .18), 0 .5rem 0 rgba(23, 53, 45, .14); }
.frame-topline, .frame-bottomline { display: flex; align-items: center; justify-content: space-between; color: var(--paper); }
.frame-topline { min-height: 2.7rem; padding: 0 .45rem .5rem; }
.level-context { display: flex; align-items: center; gap: .55rem; }
.level-context span, .frame-note { color: rgba(244, 240, 229, .5); font: 500 .53rem/1 var(--mono); letter-spacing: .1em; }
.level-context strong { font: 600 .65rem/1 var(--mono); letter-spacing: .08em; }
.frame-actions { display: flex; align-items: center; gap: .65rem; }
.status-dot { display: flex; align-items: center; gap: .35rem; color: var(--lime); font: 500 .53rem/1 var(--mono); letter-spacing: .1em; }
.status-dot::before { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; content: ''; }
.status-dot.is-running::before { animation: pulse 1.4s infinite; }
.fullscreen-button { display: inline-flex; align-items: center; gap: .3rem; min-width: 3.3rem; height: 1.25rem; padding: .2rem .38rem; cursor: pointer; border: 1px solid rgba(244,240,229,.3); border-radius: 999px; color: rgba(244,240,229,.8); background: rgba(244,240,229,.04); }
.fullscreen-button:hover, .fullscreen-button:focus-visible, .fullscreen-button.is-active { color: var(--lime); outline: none; }
.fullscreen-copy { font: 600 .48rem/1 var(--mono); letter-spacing: .06em; }
.fullscreen-glyph { display: block; width: .78rem; height: .78rem; background: linear-gradient(currentColor,currentColor) left top/35% 1px no-repeat, linear-gradient(currentColor,currentColor) left top/1px 35% no-repeat, linear-gradient(currentColor,currentColor) right top/35% 1px no-repeat, linear-gradient(currentColor,currentColor) right top/1px 35% no-repeat, linear-gradient(currentColor,currentColor) left bottom/35% 1px no-repeat, linear-gradient(currentColor,currentColor) left bottom/1px 35% no-repeat, linear-gradient(currentColor,currentColor) right bottom/35% 1px no-repeat, linear-gradient(currentColor,currentColor) right bottom/1px 35% no-repeat; }
.pause-button { padding: .2rem; color: rgba(244,240,229,.65); font: 600 .7rem/1 var(--mono); letter-spacing: -.2em; }
.pause-button:hover, .pause-button:focus-visible { color: var(--coral); outline: none; }
.canvas-wrap { position: relative; width: 100%; aspect-ratio: 9 / 15.7; overflow: hidden; border-radius: 1.1rem; background: #a9cb7b; isolation: isolate; }
#gameCanvas { display: block; width: 100%; height: 100%; touch-action: none; }
.canvas-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(14, 41, 35, .08), transparent 22%, transparent 76%, rgba(14, 41, 35, .2)); mix-blend-mode: multiply; }
.game-hud { position: absolute; z-index: 3; top: 1rem; right: 1rem; left: 1rem; display: grid; grid-template-columns: 1fr 1.35fr 1fr; align-items: start; color: var(--ink); pointer-events: none; }
.hud-block { display: grid; gap: .26rem; }
.hud-block small, .distance-label { font: 600 .53rem/1 var(--mono); letter-spacing: .08em; }
.hud-block strong { font: 700 1.2rem/1 var(--display); letter-spacing: -.06em; }
.hud-center { padding-top: .1rem; text-align: center; }
.distance-label { display: block; margin-bottom: .4rem; }
.distance-track { height: 3px; overflow: hidden; border-radius: 2px; background: rgba(23,53,45,.2); }
.distance-track i { display: block; width: 0%; height: 100%; border-radius: inherit; background: var(--coral); transition: width .18s linear; }
.hud-lives { justify-items: end; }
.heart-row { display: flex; gap: .2rem; height: 1rem; }
.heart-row i { position: relative; display: block; width: .64rem; height: .82rem; transform: rotate(45deg) scale(.72); border-radius: 3px; background: var(--coral); }
.heart-row i::before, .heart-row i::after { position: absolute; width: .64rem; height: .64rem; border-radius: 50%; background: inherit; content: ''; }
.heart-row i::before { top: -.3rem; left: 0; }
.heart-row i::after { top: 0; left: -.3rem; }
.heart-row i.is-empty, .heart-row i.is-empty::before, .heart-row i.is-empty::after { background: rgba(23,53,45,.19); }
.run-toast { position: absolute; z-index: 4; top: 36%; left: 50%; color: var(--ink); font: 700 1.5rem/1 var(--display); letter-spacing: -.07em; opacity: 0; pointer-events: none; transform: translate(-50%, 1rem) rotate(-4deg); }
.run-toast.is-visible { animation: toast-up 1s ease-out both; }

.game-overlay { position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 18% 11% 10%; color: var(--ink); background: linear-gradient(160deg, rgba(244,240,229,.96), rgba(244,240,229,.88) 65%, rgba(216,232,107,.87)); transition: opacity .25s, visibility .25s; }
.game-overlay.is-hidden, .game-overlay[hidden] { visibility: hidden; opacity: 0; pointer-events: none; }
.overlay-kicker { display: flex; align-items: center; gap: .55rem; color: var(--muted); font: 500 .56rem/1 var(--mono); letter-spacing: .1em; }
.mini-paw { position: relative; display: inline-block; width: .95rem; height: .95rem; transform: rotate(-12deg); }
.mini-paw::before { position: absolute; top: .29rem; left: .24rem; width: .55rem; height: .57rem; border-radius: 48%; background: var(--coral); content: ''; }
.mini-paw::after { position: absolute; top: 0; left: .04rem; width: .23rem; height: .3rem; border-radius: 50%; background: var(--coral); box-shadow: .3rem -.08rem 0 var(--coral), .6rem .07rem 0 var(--coral); content: ''; }
.game-overlay h2 { margin: 1.15rem 0 .85rem; font: 700 clamp(2.2rem, 5vw, 3.35rem)/.93 var(--display); letter-spacing: -.09em; }
.overlay-copy { max-width: 19rem; margin-bottom: 1.2rem; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.level-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: .42rem; width: 100%; margin: .3rem 0 1.2rem; }
.level-chip { position: relative; min-height: 3.7rem; padding: .5rem .3rem; cursor: pointer; border: 1px solid rgba(23,53,45,.22); border-radius: .6rem; color: var(--muted); background: rgba(244,240,229,.38); text-align: left; transition: transform .2s, border .2s, background .2s, color .2s; }
.level-chip:hover { transform: translateY(-2px); }
.level-chip.is-selected { border-color: var(--coral); color: var(--ink); background: var(--paper); box-shadow: 0 4px 0 rgba(23,53,45,.1); }
.level-chip strong { display: block; margin-bottom: .28rem; color: var(--coral); font: 600 .75rem/1 var(--mono); }
.level-chip span { display: block; overflow: hidden; font: 600 .48rem/1.2 var(--mono); letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.level-chip b { position: absolute; top: .35rem; right: .35rem; color: var(--ink); font: 600 .55rem/1 var(--mono); }
.primary-button { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; min-height: 3.15rem; padding: .5rem .55rem .5rem 1rem; cursor: pointer; border: 0; border-radius: .62rem; color: var(--paper); background: var(--coral); box-shadow: 0 5px 0 var(--coral-dark); font: 700 .72rem/1 var(--display); letter-spacing: .04em; transition: transform .15s, box-shadow .15s, background .15s; }
.primary-button b { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .45rem; color: var(--ink); background: var(--lime); font-size: 1.1rem; }
.primary-button:hover, .primary-button:focus-visible { background: #ff836d; outline: none; transform: translateY(-2px); box-shadow: 0 7px 0 var(--coral-dark); }
.primary-button:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--coral-dark); }
.control-line { display: flex; align-items: center; flex-wrap: wrap; gap: .32rem; margin-top: 1rem; color: var(--muted); font: 500 .48rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.key-cap, .tilt-mini { padding: .28rem .32rem; border: 1px solid rgba(23,53,45,.2); border-radius: .22rem; color: var(--ink); font-size: .47rem; }
.tilt-mini { margin-left: .25rem; color: var(--coral-dark); border-color: rgba(220,95,77,.45); }
.text-button { padding: .7rem 0 .15rem; color: var(--muted); font: 500 .58rem/1 var(--mono); letter-spacing: .04em; text-decoration: underline; text-underline-offset: .25rem; }
.text-button:hover, .text-button:focus-visible { color: var(--coral); outline: none; }
.pause-overlay { align-items: center; justify-content: center; padding: 12%; text-align: center; background: rgba(244,240,229,.96); }
.pause-overlay .primary-button, .result-overlay .primary-button { max-width: 18rem; }
.pause-overlay .text-button { margin-top: 1.2rem; }
.result-overlay { padding-top: 15%; background: linear-gradient(160deg, rgba(244,240,229,.97), rgba(216,232,107,.92)); }
.result-overlay h2 { margin-bottom: .7rem; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin: .3rem 0 1.5rem; padding: .85rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-stats div { display: grid; gap: .28rem; padding-left: .55rem; border-left: 1px solid var(--line); }
.result-stats div:first-child { padding-left: 0; border-left: 0; }
.result-stats span { color: var(--muted); font: 500 .48rem/1 var(--mono); letter-spacing: .08em; }
.result-stats strong { font: 700 .92rem/1 var(--display); letter-spacing: -.06em; }
.result-actions { width: 100%; }
.touch-controls { position: absolute; z-index: 4; right: .85rem; bottom: .9rem; left: .85rem; display: none; justify-content: space-between; align-items: end; pointer-events: none; }
.touch-pad { display: flex; gap: .4rem; pointer-events: auto; }
.touch-pad button, .jump-button { cursor: pointer; border: 1px solid rgba(244,240,229,.55); color: var(--paper); background: rgba(23,53,45,.7); box-shadow: 0 3px 0 rgba(14,41,35,.45); backdrop-filter: blur(6px); }
.touch-pad button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .7rem; font-size: 1.1rem; }
.jump-button { display: grid; justify-items: center; min-width: 5rem; padding: .6rem .7rem .5rem; border-radius: .7rem; }
.jump-button span { font: 700 .62rem/1 var(--display); letter-spacing: .08em; }
.jump-button small { margin-top: .25rem; color: rgba(244,240,229,.7); font: 500 .4rem/1 var(--mono); }
.touch-pad button:active, .jump-button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(14,41,35,.45); }
.frame-bottomline { min-height: 2.5rem; padding: .4rem .45rem 0; }
.tilt-button { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem 0; color: var(--lime); font: 500 .52rem/1 var(--mono); letter-spacing: .05em; }
.tilt-button:hover, .tilt-button:focus-visible { color: var(--paper); outline: none; }
.tilt-glyph { display: grid; place-items: center; width: .9rem; height: .9rem; border: 1px solid currentColor; border-radius: 50%; font-size: .75rem; line-height: .7rem; }

.route-column { align-self: center; padding-bottom: 2rem; }
.route-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.route-heading .eyebrow { margin: 0; }
.route-count { color: var(--coral); font: 500 .58rem/1 var(--mono); }
.route-card, .controls-card { padding: 1.15rem; border: 1px solid var(--line); border-radius: .85rem; background: rgba(244,240,229,.45); }
.route-card { margin-bottom: 1rem; }
.route-card-top { display: flex; justify-content: space-between; color: var(--muted); font: 500 .55rem/1 var(--mono); letter-spacing: .08em; }
.route-card-top strong { color: var(--ink); font-weight: 600; }
.route-line { display: flex; align-items: center; margin: 1.6rem .1rem .7rem; }
.route-line i { display: grid; place-items: center; flex: 0 0 1rem; width: 1rem; height: 1rem; border: 3px solid var(--coral); border-radius: 50%; background: var(--paper); }
.route-line .route-finish { width: 1.3rem; height: 1.3rem; border: 0; color: var(--ink); background: var(--lime); font: 700 .65rem/1 var(--display); }
.route-dash { flex: 1; height: 1px; margin: 0 .35rem; background: repeating-linear-gradient(90deg, var(--coral) 0 5px, transparent 5px 10px); }
.route-labels { display: flex; justify-content: space-between; color: var(--muted); font: 500 .48rem/1 var(--mono); letter-spacing: .07em; }
.controls-card { display: grid; gap: .9rem; margin-bottom: 1rem; }
.card-kicker { color: var(--coral); }
.control-row { display: flex; align-items: center; gap: .7rem; }
.control-icon { display: grid; place-items: center; flex: 0 0 1.8rem; width: 1.8rem; height: 1.8rem; border: 1px solid var(--line); border-radius: .4rem; color: var(--ink); font: 600 .63rem/1 var(--mono); }
.space-icon { width: 2.3rem; flex-basis: 2.3rem; font-size: .43rem; }
.tilt-icon { border-color: rgba(255,118,94,.45); color: var(--coral); font-size: 1rem; }
.control-row div { display: grid; gap: .22rem; }
.control-row strong { font: 600 .67rem/1 var(--display); }
.control-row small { color: var(--muted); font: 500 .5rem/1 var(--mono); }
.quote-card { position: relative; padding: 1.35rem 1.1rem 1.15rem; border-radius: .8rem; color: var(--ink); background: var(--lime); transform: rotate(-1.5deg); }
.quote-mark { position: absolute; top: .55rem; right: .85rem; color: rgba(23,53,45,.2); font: 700 2.7rem/.7 Georgia, serif; }
.quote-card p { max-width: 11rem; margin-bottom: 1rem; font: 600 .88rem/1.35 var(--display); letter-spacing: -.03em; }
.quote-card small { font: 500 .48rem/1 var(--mono); letter-spacing: .08em; }
.site-footer { display: flex; justify-content: space-between; width: min(1320px, calc(100% - 72px)); margin: 0 auto; padding: 1.1rem 0 1.6rem; border-top: 1px solid var(--line); color: var(--muted); font: 500 .53rem/1 var(--mono); letter-spacing: .1em; }

@keyframes pulse { 50% { opacity: .35; } }
@keyframes toast-up { 0% { opacity: 0; transform: translate(-50%, 1rem) rotate(-4deg) scale(.8); } 18%, 68% { opacity: 1; transform: translate(-50%, 0) rotate(-4deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -1.3rem) rotate(-4deg) scale(1.05); } }
@keyframes bump { 50% { transform: translateX(-5px); } }
.game-frame.is-shaking { animation: bump .24s ease-in-out; }

#gameFrame:fullscreen, #gameFrame:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: max(.68rem, env(safe-area-inset-top)) max(.68rem, env(safe-area-inset-right)) max(.68rem, env(safe-area-inset-bottom)) max(.68rem, env(safe-area-inset-left));
  border-radius: 0;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}
#gameFrame:fullscreen .canvas-wrap, #gameFrame:-webkit-full-screen .canvas-wrap {
  flex: 1 1 auto;
  width: 100%;
  max-width: 560px;
  min-height: 0;
  margin: 0 auto;
  aspect-ratio: auto;
}
#gameFrame:fullscreen .frame-topline, #gameFrame:-webkit-full-screen .frame-topline,
#gameFrame:fullscreen .frame-bottomline, #gameFrame:-webkit-full-screen .frame-bottomline { flex: 0 0 auto; }

@media (orientation: landscape) {
  #gameFrame:fullscreen .canvas-wrap, #gameFrame:-webkit-full-screen .canvas-wrap { max-width: none; }
}

@media (max-width: 1080px) {
  .topbar, .page-grid, .site-footer { width: min(900px, calc(100% - 48px)); }
  .page-grid { grid-template-columns: minmax(180px, 1fr) minmax(340px, 410px); gap: 2.5rem; }
  .route-column { display: none; }
  h1 { font-size: clamp(2.6rem, 6vw, 4rem); }
}
@media (max-width: 700px) {
  .site-shell { min-height: 100dvh; }
  .topbar { width: calc(100% - 30px); height: 4.6rem; }
  .site-shell::after { top: 4.6rem; }
  .brand-mark { transform: scale(.85) rotate(-10deg); transform-origin: left center; }
  .brand-copy strong { font-size: .9rem; }
  .brand-copy small { font-size: .47rem; }
  .topbar-actions { gap: .35rem; }
  .best-run { display: none; }
  .icon-button { padding: .55rem; }
  .sound-label { display: none; }
  .page-grid { display: block; width: 100%; margin: 1.2rem auto 0; }
  .story-column { display: none; }
  .game-stage { display: block; width: 100%; }
  .game-frame { width: 100%; min-height: calc(100dvh - 5.2rem); padding: .45rem; border-radius: 1.35rem 1.35rem 0 0; box-shadow: 0 -1rem 3rem rgba(23,53,45,.12); }
  .frame-topline { min-height: 2.25rem; padding-bottom: .35rem; }
  .canvas-wrap { aspect-ratio: 9 / 15.7; max-height: calc(100dvh - 9.4rem); border-radius: 1rem; }
  .frame-note { display: none; }
  .frame-bottomline { justify-content: center; min-height: 2.35rem; }
  .touch-controls { display: flex; }
  .site-footer { display: none; }
  .game-overlay { padding-right: 9%; padding-left: 9%; }
  .game-overlay h2 { font-size: 2.55rem; }
  .level-picker { gap: .28rem; }
  .level-chip { min-height: 3.35rem; }
  .level-chip span { font-size: .42rem; }
}
@media (max-height: 700px) and (min-width: 701px) {
  .topbar { height: 5rem; }
  .site-shell::after { top: 5rem; }
  .page-grid { margin-top: 1.5rem; }
  .canvas-wrap { aspect-ratio: 9 / 14.4; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}