:root {
  color-scheme: light;
  --ink: #243328;
  --moss: #446845;
  --paper: #f5f0de;
  --wood: #5f4638;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 12% 8%, #fdf8e8 0, transparent 34%), linear-gradient(145deg, #e8e8c9, #d5ddbd 55%, #b8cba9); font-family: Georgia, 'Times New Roman', serif; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .35; background-image: repeating-linear-gradient(0deg, transparent 0 3px, #53674513 4px 5px); }
.page { width: min(100% - 2rem, 960px); margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) 0 3rem; position: relative; }
.game-topline, .guide, button { font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: .12em; }
.game-shell { padding: .85rem; background: var(--paper); border: 2px solid var(--wood); border-radius: 14px; box-shadow: 0 12px 0 #5f463825, 0 30px 70px #2433282e; }
.game-topline, .game-bottomline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .35rem .45rem .85rem; }
.game-topline { font-size: .75rem; }
.live-dot { color: #9f5530; }
.stage { position: relative; container-type: inline-size; touch-action: none; user-select: none; -webkit-user-select: none; }
.steer-guide { position: absolute; top: 0; bottom: 0; left: 42%; width: 16%; pointer-events: none; background: #ffffff26; border-inline: 2px dashed #263f3680; }
.pointer-anchor { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; pointer-events: none; border: 2px solid #263f36c0; border-radius: 50%; background: #ffffff40; box-shadow: 0 0 0 12px #ffffff1f; }
.touch-controls { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem .45rem 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.screen { position: absolute; inset: 3px; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 1.6cqw; text-align: center; pointer-events: none; color: #fff8e6; background: radial-gradient(ellipse at 50% 42%, #2433288c 0, #18221bd9 100%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.screen h1, .screen h2 { margin: 0; font-style: italic; font-weight: 700; letter-spacing: -.06em; line-height: .96; text-shadow: 0 .5cqw 0 #0000004d, 0 1.2cqw 4cqw #00000066; }
/* The title is Jason's title art, which carries its own lettering. */
.screen h1 { font-size: 0; }
.screen h1 img { display: block; width: 52cqw; height: auto; }
.screen h2 { font-size: 9cqw; }
.screen h2 img { display: block; width: 36cqw; height: auto; }
.screen p { margin: 0; font-size: max(.8rem, 2.5cqw); }
.screen .prompt { margin-top: 3.5cqw; font-family: 'Courier New', monospace; font-weight: 700; font-size: max(.68rem, 1.7cqw); letter-spacing: .2em; text-transform: uppercase; animation: prompt-pulse 1.8s ease-in-out infinite; }
.screen .prompt:empty { display: none; }
@keyframes prompt-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .screen .prompt { animation: none; } }
.gear { position: absolute; right: calc(3px + 1.6cqw); bottom: calc(3px + 1.6cqw); z-index: 3; display: grid; place-items: center; width: max(2.25rem, 5.2cqw); aspect-ratio: 1; padding: 0; color: #fff8e6; background: #18221bb3; border: 1px solid #fff8e666; border-radius: 50%; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.gear:hover, .gear:focus-visible, .gear[aria-expanded=true] { background: #18221bf2; border-color: #fff8e6; }
.gear svg { width: 62%; height: 62%; transition: transform .25s ease-out; }
.gear[aria-expanded=true] svg { transform: rotate(67.5deg); }
.settings { z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 2cqw; padding: 3cqw 5cqw; overflow-y: auto; pointer-events: auto; touch-action: pan-y; text-align: left; font-size: max(.66rem, 1.6cqw); background: #18221bf0; }
.settings h2 { font-size: max(1.1rem, 3.6cqw); }
.settings h3 { margin: 0 0 .7em; color: #f0915c; font-family: 'Courier New', monospace; font-size: .86em; letter-spacing: .2em; text-transform: uppercase; }
.settings p { font-size: inherit; }
.settings-body { display: grid; grid-template-columns: 4fr 5fr; gap: 1.5em 5cqw; width: 100%; }
.sliders { display: grid; grid-template-columns: auto minmax(3rem, 1fr) 2.2em; align-items: center; gap: .9em .8em; }
.sliders input { width: 100%; min-width: 0; margin: 0; accent-color: #f0915c; }
.sliders output { text-align: right; font-variant-numeric: tabular-nums; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: .35em 1em; margin: .7em 0; }
.keys dt { font-weight: 700; }
.keys dd { margin: 0; }
.settings kbd { padding: 0 .35em; font-family: 'Courier New', monospace; font-size: .92em; font-weight: 700; border: 1px solid #fff8e680; border-radius: 4px; }
.settings ul { display: grid; gap: .25em; margin: 0; padding-left: 1.1em; }
.settings-actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1em; }
.settings-actions[hidden] { display: none; }
/* The Donate link, in the settings above their buttons, and what it is for. */
.donate { flex: none; display: flex; flex-direction: column; align-items: center; gap: .45em; margin: 0; }
.donate[hidden] { display: none; }
.donate a { padding: .5em 1.6em; font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: .12em; font-size: .86em; color: #18221b; background: #ffd9a3; border: 1px solid #ffd9a3; border-radius: 999px; text-decoration: none; }
.donate a:hover, .donate a:focus-visible { color: #18221b; background: #fff8e6; border-color: #fff8e6; outline-offset: 2px; }
.donate span { font-size: .78em; color: #fff8e6; }
.settings-actions button { padding: .5em 1.6em; font-size: .86em; color: #fff8e6; background: transparent; border-color: #fff8e6; border-radius: 999px; }
.settings-actions button:hover, .settings-actions button:focus-visible { color: #18221b; background: #fff8e6; }
@container (max-width: 520px) { .settings-body { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .gear svg { transition: none; } }
/* The special for a finger that steers by dragging: a quarter of the way in from the right. */
.fire-button { position: absolute; right: 25%; bottom: 7cqw; z-index: 3; width: max(3.6rem, 10cqw); aspect-ratio: 1; padding: 0; transform: translateX(50%); font-family: 'Courier New', monospace; font-weight: 700; font-size: max(.7rem, 1.7cqw); letter-spacing: .1em; color: #fff8e6; background: #b5482acc; border: 2px solid #fff8e6aa; border-radius: 50%; touch-action: none; }
.fire-button:hover, .fire-button:focus-visible, .fire-button:active { color: #fff8e6; background: #d2572ff2; }
.hud-count { position: absolute; display: flex; align-items: center; gap: 1em; height: 0; pointer-events: none; white-space: nowrap; font-family: 'Trebuchet MS', 'Segoe UI', Roboto, system-ui, sans-serif; color: #fff6de; -webkit-font-smoothing: antialiased; }
.hud-count span { font-size: 6em; font-weight: 700; color: #ffd9a3; }
.hud-count b { font-size: 8.5em; font-weight: 800; font-variant-numeric: tabular-nums; }
.hud-score { gap: .8em; }
.hud-score b { font-size: 6em; }
.hud-score span { font-size: 4em; }
.hud-count[hidden] { display: none; }
.touch-controls[hidden], .steer-guide[hidden], .pointer-anchor[hidden], .screen[hidden], .fire-button[hidden] { display: none; }
.touch-controls div { display: flex; gap: .5rem; }
.touch-controls button { font-size: 1.1rem; min-width: 4rem; min-height: 3.2rem; touch-action: none; }
.audio select { font: inherit; letter-spacing: 0; padding: .3rem; }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; background: #dcefd4; border: 3px solid #263f36; image-rendering: pixelated; }
.game-bottomline { padding: .85rem .45rem .15rem; color: #466147; font-size: .96rem; }
.actions { display: flex; gap: .5rem; }
button { font-size: .72rem; color: var(--ink); background: #e4e8ce; border: 1px solid #506049; border-radius: 5px; padding: .6rem .75rem; cursor: pointer; }
button:hover, button:focus-visible { background: #c8d5a8; outline-offset: 2px; }
button:disabled { cursor: wait; opacity: .55; }
.guide { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem 2rem; padding-top: 1.8rem; color: #3b5540; font-size: .76rem; }
.guide strong { color: #a05231; }
.guide a { color: #3b5540; }
.audio { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .6rem 1.6rem; padding-top: 1rem; color: #3b5540; font-family: 'Courier New', monospace; font-weight: 700; font-size: .72rem; letter-spacing: .12em; }
.audio label { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 600px) { .page { width: min(100% - 1rem, 960px); padding-top: 1.25rem; } .game-shell { padding: .5rem; } .game-topline { font-size: .58rem; } .game-bottomline { align-items: flex-start; font-size: .82rem; } .guide { line-height: 1.8; } }
/* index.html: the game alone, filling the window at the view's 5:3 shape. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.play { display: grid; place-items: center; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; background: #101712; }
body.play::before { display: none; }
body.play img, body.play canvas { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.play-shell { width: min(100vw, 100vh * 5 / 3); width: min(100vw, 100dvh * 5 / 3); }
/* A phone held upright: the view lies a quarter turn clockwise, so the phone is turned anticlockwise to play.
   A phone with a pen, such as a Galaxy Ultra, reports its main pointer as fine; it is known by its touchscreen and narrow page. */
@media (orientation: portrait) and (pointer: coarse), (orientation: portrait) and (any-pointer: coarse) and (max-width: 600px) {
  .play-shell { position: fixed; top: 50%; left: 50%; width: min(100vh, 100vw * 5 / 3); width: min(100dvh, 100dvw * 5 / 3); transform: translate(-50%, -50%) rotate(90deg); }
  /* The settings scroll along the screen's width there. */
  .play .settings { touch-action: pan-x pan-y; }
}
.play canvas { border: 0; }
.play .screen { inset: 0; }
/* Clear the buttons along the top of the view. */
.play .settings { gap: 1.3cqw; padding-top: calc(1.5cqw + max(2rem, 4.4cqw)); padding-bottom: 1.5cqw; }
.play .screen-actions { margin-top: 2cqw; pointer-events: auto; }
.play .screen-actions button, .pill { font-size: max(.68rem, 1.5cqw); color: #fff8e6; background: #18221bb3; border: 1px solid #fff8e666; border-radius: 999px; padding: .55em 1.4em; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.play .screen-actions button:hover, .play .screen-actions button:focus-visible, .pill:hover, .pill:focus-visible { color: #fff8e6; background: #18221bf2; border-color: #fff8e6; }
.pill:disabled { opacity: 0; }
.corner-controls { position: absolute; top: 1.4cqw; left: 50%; z-index: 3; display: flex; align-items: center; gap: 1cqw; transform: translateX(-50%); }
.corner-controls .gear { position: static; width: max(2rem, 4.4cqw); }
.gear[hidden] { display: none; }
.play .touch-controls { position: absolute; inset: auto 0 0; z-index: 3; padding: 2cqw; pointer-events: none; }
.play .touch-controls button { pointer-events: auto; opacity: .8; }
.settings h3.later { margin-top: 1.6em; }
.choices { display: grid; gap: .8em; }
.choices label { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.choices select { max-width: 100%; font: inherit; padding: .25em; }
/* The screens between levels: what a level gathered, and Game over. */
.screen.result { pointer-events: auto; gap: 1.2cqw; }
.screen-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; margin-top: 1cqw; }
.screen-actions button { font-size: max(.7rem, 1.6cqw); color: #fff8e6; background: #18221bb3; border: 1px solid #fff8e6aa; border-radius: 999px; padding: .55em 1.6em; }
.screen-actions button:hover, .screen-actions button:focus-visible { color: #18221b; background: #fff8e6; }
.screen-actions button[hidden] { display: none; }
.stats { display: grid; grid-template-columns: auto auto; gap: .35em 2em; margin: .6em 0; font-size: max(.8rem, 2.1cqw); text-align: left; }
.stats dt { color: #f0c39a; }
.stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.stats .total { color: #f0915c; font-weight: 700; }
.settings .note { margin: 0; font-size: .85em; opacity: .8; }
.settings .note:empty { display: none; }
/* The credits, over the settings: one credit fades in over the one before. A
   name is a picture in the painted alphabet, as tall as --letter a line and
   no wider than --room. */
.screen.credits { z-index: 4; display: block; pointer-events: auto; background: #18221b; backdrop-filter: none; -webkit-backdrop-filter: none; }
.screen.credits[hidden] { display: none; }
.credits-slides { position: absolute; inset: 0; cursor: pointer; }
.credit { position: absolute; inset: 3cqw 4cqw 9cqw; display: grid; align-content: center; justify-items: center; align-items: center; gap: 2cqw 4cqw; opacity: 0; transition: opacity 1.2s ease-in-out; --letter: 11cqw; --room: 88cqw; }
.credit.shown { opacity: 1; }
.credit.with-photo { grid-template-columns: 1fr 1fr; --letter: 9cqw; --room: 44cqw; }
.credit-words { display: grid; justify-items: center; gap: 1.5cqw; }
.credit .role { max-width: var(--room); font-style: italic; font-size: max(.9rem, 2.8cqw); line-height: 1.2; color: #ffd9a3; text-wrap: balance; }
.credit .dedication { max-width: var(--room); font-style: italic; font-size: max(.8rem, 2.1cqw); line-height: 1.2; color: #ffd9a3; text-wrap: balance; }
.credit .aside { font-size: max(.7rem, 1.7cqw); opacity: .75; }
.credits canvas.lettered { display: block; width: auto; height: min(calc(var(--letter) * var(--lines)), calc(var(--room) / var(--ratio))); aspect-ratio: var(--ratio); background: none; border: 0; image-rendering: auto; }
.credit img { display: block; width: auto; height: min(47cqw, calc(44cqw / var(--ratio, 1))); aspect-ratio: var(--ratio, 1); border-radius: 1.6cqw; box-shadow: 0 0 0 .35cqw #fff8e6, 0 1.2cqw 3cqw #00000080; }
.credit img.badge, .credit img.phrase { border-radius: 0; box-shadow: none; }
.credit img.phrase { height: min(13cqw, calc(var(--room) / var(--ratio, 6.25))); aspect-ratio: var(--ratio, 6.25); }
.credit.thanks { --letter: 4.6cqw; --room: 30cqw; gap: 1cqw; }
.thanks-names { display: flex; flex-wrap: wrap; justify-content: center; gap: .4cqw 3.2cqw; max-width: 84cqw; margin-top: 2cqw; }
.credits .screen-actions { position: absolute; inset: auto 0 2.4cqw; margin: 0; pointer-events: none; }
.credits .screen-actions button { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .credit { transition: none; } }
/* A difficulty's loader picture, over everything as its first level starts:
   two seconds, the first and last half-second fading (LOADER_MS in main.ts). */
.loader-screen { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: #101712; animation: loader-show 2s linear both; }
.loader-screen[hidden] { display: none; }
.loader-screen img { display: block; width: auto; height: 88%; max-width: 92%; object-fit: contain; }
@keyframes loader-show { 0% { opacity: 0; } 25%, 75% { opacity: 1; } 100% { opacity: 0; } }