/* Oxanium (SIL Open Font License) supplies the console display lettering.
   Body copy stays in the platform font for small-size legibility. */
@font-face {
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/oxanium-latin.woff2') format('woff2');
}
:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #d6dcda;
  background: #080c0d;
  font-synthesis: none;
  --muted: #758481;
  --line: #26302d;
  --cyan: #a1c7ba;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100svh; display: flex; flex-direction: column; }
button, input, a { font: inherit; }
button { cursor: pointer; color: inherit; border: 0; background: transparent; }
a { color: var(--cyan); }
button:disabled { opacity: .3; cursor: default; }
button:hover:not(:disabled) { color: #fff; }
button:focus-visible, a:focus-visible, canvas:focus-visible, input:focus-visible, summary:focus-visible { outline: 1px solid var(--cyan); outline-offset: 6px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.quiet { padding: 8px 0; font-size: 11px; color: var(--muted); }
main { flex: 1; display: grid; place-items: center; padding: 48px 5vw 24px; }
.landing { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0; }
/* A single decision on an otherwise quiet surface. */
.boot-page:not(.playing) { background: radial-gradient(ellipse at 50% 46%, #12201b24, transparent 46%), #050807; }
.boot-page:not(.playing) main { min-height: 100svh; padding: 80px 24px; }
.boot-page .landing { width: 100%; padding: 0 0 4vh; text-align: center; }
.landing-overline { margin: 0 0 20px; padding-left: .38em; font: 400 .5625rem/1.5 system-ui, sans-serif; letter-spacing: .38em; text-transform: uppercase; color: #92a39b; }
.boot-page .landing h1 { margin: 0; padding-left: .2em; font: 300 clamp(2.75rem, 7.5vw, 6rem)/1.15 'Oxanium', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #cbd8d2; }
.boot-page .begin { display: inline-flex; align-items: center; justify-content: center; gap: 20px; margin-top: 42px; min-width: 112px; min-height: 48px; padding: 12px 18px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #a5b8ad; font: 400 .8125rem/1.5 system-ui, sans-serif; letter-spacing: .02em; }
.boot-page .begin svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.boot-page .begin:active { transform: scale(.97); background: #b2d2be0a; }
.boot-page .begin:focus-visible { outline: 1px solid #a8c5b4; outline-offset: 3px; }
.boot-page .landing-footer { position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); padding: 0; }
.landing-footer button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; color: #80938a; }
.landing-footer svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; }
.landing-footer button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .boot-page .begin:hover { color: #e1ece5; background: #b2d2be08; border-color: #b2d2be12; }
  .landing-footer button:hover { color: #d1dfd7; background: #b2d2be08; }
}
@media (max-height: 480px) { .boot-page:not(.playing) main { padding: 48px 24px; } .boot-page .landing { padding-bottom: 0; } .boot-page .begin { margin-top: 24px; } }
.game-panel { width: min(100%, 880px); }
.viewport { position: relative; aspect-ratio: 4/3; display: grid; place-items: center; isolation: isolate; }
canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.playing canvas { opacity: 1; }
h1 { font: clamp(72px, 12vw, 112px)/1 Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.065em; margin: 0 0 34px; color: #c7d1cb; }
.begin { min-height: 44px; font-size: 12px; padding: 12px 14px; color: #aebfb4; letter-spacing: .2px; }
.begin span { margin-left: 16px; font-size: 15px; }
.game-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 54px; margin-top: 16px; }
.toolbar-status { font-size: 10px; color: var(--muted); }
.toolbar-buttons { display: flex; gap: 6px; }
.toolbar-buttons button { display: grid; place-items: center; width: 36px; height: 36px; color: #87988e; border-radius: 50%; }
.toolbar-buttons button:hover { background: #b6d5c308; }
.toolbar-buttons svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
#sound[aria-pressed="true"] { color: var(--cyan); }
body:not(.playing) .game-toolbar { visibility: hidden; }
.focus-overlay, .boot-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; background: #080c0d8c; gap: 18px; }
.boot-overlay { background: #080c0d; }
.boot-overlay strong { font-size: 13px; font-weight: 400; color: #91a99d; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #20392e; border-top-color: #adc8b9; animation: spin 1.5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
footer { padding: 24px 24px 28px; text-align: center; color: #78877f; font-size: 10px; line-height: 1.7; }
footer p { margin: 0; }
.viewport:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; background: #000; }
dialog { width: min(560px, calc(100% - 32px)); max-height: 85svh; padding: 32px; border: 1px solid var(--line); color: #c9d5ce; background: #0e1512; }
dialog::backdrop { background: #030605d9; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
h2 { font: 22px Georgia, "Times New Roman", serif; font-weight: 400; margin: 0; }
.dialog-heading button { font-size: 24px; color: var(--muted); padding: 0 4px; }
.eyebrow { font-size: 9px; letter-spacing: .7px; color: var(--muted); }
.archive-panel h2 { font-family: inherit; font-size: 16px; margin: 8px 0 24px; }
.build-facts { display: flex; flex-wrap: wrap; gap: 20px 36px; }
.build-facts span { display: block; font-size: 8px; color: var(--muted); letter-spacing: .8px; margin-bottom: 6px; }
.build-facts strong { font-size: 11px; font-weight: 400; }
.import-buttons { display: flex; gap: 20px; margin-top: 24px; }
.import-buttons button { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #3a5146; padding: 10px 0; font-size: 11px; flex: 1; text-align: left; }
.local-note { font-size: 9px; color: var(--muted); margin-top: 12px; }
.local-note span { display: none; }
.import-status { font-size: 10px; color: var(--cyan); line-height: 1.6; overflow-wrap: anywhere; }
.section-rule { height: 1px; background: var(--line); margin: 28px 0; }
.mission-heading, .archive-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mission-heading .muted { font-size: 9px; }
.mission-list { margin-top: 16px; }
.mission { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 0; text-align: left; }
.mission-num { font-size: 9px; color: #5e7367; }
.mission-text { flex: 1; }
.mission-text strong { font-size: 12px; font-weight: 400; }
.mission-text small { display: none; }
.mission.selected { color: #b5d7c4; }
.mission-detail { margin-top: 18px; }
.mission-detail p, .empty-list { font-size: 11px; line-height: 1.6; }
.powers { display: flex; gap: 12px; font-size: 9px; color: var(--muted); text-transform: lowercase; }
.mission-note, .muted { color: var(--muted); }
.stop-button { margin-top: 24px; font-size: 10px; color: #b9998c; }
.archive-footer { margin-top: 24px; }
#frame-info { font-size: 9px; }
.dialog-prose { color: #9cafa3; font-size: 12px; line-height: 1.85; }
.dialog-prose strong { color: #d2ded6; font-weight: 500; }
.dialog-note { font-size: 10px; color: var(--muted); line-height: 1.8; margin-top: 20px; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.control-row, .setting-row, .diagnostic-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); padding: 12px 0; font-size: 11px; }
.control-row kbd { font: 10px ui-monospace, monospace; color: var(--cyan); text-align: right; }
.setting-row input { accent-color: var(--cyan); max-width: 160px; }
.diagnostic-row { font-size: 10px; align-items: start; line-height: 1.6; }
.diagnostic-row span:first-child { color: var(--muted); }
.diagnostic-row span:last-child { text-align: right; }
.hash { font: 9px ui-monospace, monospace; overflow-wrap: anywhere; color: var(--muted); line-height: 1.7; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 20; background: #14221b; border: 1px solid var(--line); padding: 14px 20px; max-width: 90vw; font-size: 11px; line-height: 1.6; }
@media (max-width: 600px) {
  main { padding: 30px 16px; }
  .game-toolbar { margin-top: 8px; }
  footer { padding: 24px 20px; font-size: 9px; }
  dialog { padding: 24px; }
  .control-grid { grid-template-columns: 1fr; }
  .toolbar-buttons { gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.archive-missions { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 24px; }
.archive-missions summary { font-size: 11px; color: var(--muted); cursor: pointer; }
.archive-missions[open] summary { margin-bottom: 20px; }
/* One primary action; folder guidance stays available on demand. */
.setup-alert { width: min(400px, calc(100% - 32px)); border-radius: 18px; padding: 28px; max-height: calc(100dvh - 32px); box-shadow: 0 24px 80px #0006; }
.setup-alert .dialog-heading { margin-bottom: 8px; }
.setup-alert h2 { font: 600 20px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.02em; }
#play-title { font-weight: 600; }
#play-title .prototype-version { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; font-weight: 400; letter-spacing: 0; color: #8b9c92; }
#close-play { flex-shrink: 0; align-self: flex-start; }
.setup-alert .dialog-heading button { width: 36px; height: 36px; margin: -8px -8px -8px 0; border-radius: 50%; font-size: 24px; }
.setup-alert .dialog-heading button:hover { background: #ffffff0a; }
.setup-alert .alert-intro { font-size: 14px; line-height: 1.5; color: #aab9b1; margin: 0; }
.setup-alert .choose-folder { display: block; width: 100%; margin-top: 26px; min-height: 44px; border: 0; border-radius: 9px; background: #c6d5cb; color: #0a140e; font-size: 14px; font-weight: 600; text-align: center; }
.setup-alert .choose-folder:hover:not(:disabled) { background: #e1ece4; color: #0a140e; }
.setup-alert .choose-folder:active:not(:disabled) { background: #aebfb4; }
.setup-alert .local-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; text-align: center; color: #8b9c92; }
.setup-alert code { font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: #c1d1c7; overflow-wrap: anywhere; }
.folder-help { margin-top: 24px; padding-top: 16px; border-top: 1px solid #c6d5cb14; font-size: 12px; line-height: 1.6; color: #aab9b1; }
.folder-help summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding: 4px 0; list-style: none; cursor: pointer; color: #aab9b1; border-radius: 4px; }
.folder-help summary::-webkit-details-marker { display: none; }
.folder-help summary svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .65; }
.folder-help[open] summary svg { transform: rotate(90deg); }
.setup-alert :is(summary, button):focus-visible { outline: 2px solid #96b8a5; outline-offset: 4px; }
.folder-help-content > p { margin: 12px 0; color: #8fA298; }
.folder-example { overflow: hidden; border: 1px solid #c6d5cb14; border-radius: 10px; background: #080f0b; }
.folder-example-root { display: flex; align-items: center; gap: 8px; padding: 12px; background: #c6d5cb0e; color: #d4e4d9; font-weight: 500; }
.folder-example-root svg { fill: #95bba51a; stroke: #95bba5; stroke-width: 1.4; stroke-linejoin: round; flex-shrink: 0; }
.folder-example-badge { margin-left: auto; font-size: 10px; font-weight: 400; color: #9fc5ae; }
.folder-example-files { display: grid; gap: 6px; margin: 12px 0 12px 22px; padding-left: 18px; border-left: 1px solid #c6d5cb24; color: #8b9e92; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.folder-example-files span { position: relative; }
.folder-example-files span::before { content: ''; position: absolute; left: -18px; top: .7em; width: 10px; height: 1px; background: #c6d5cb24; }
.folder-example-more { color: #61776a; }
.setup-alert .fallback-picker { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; font-size: 11px; color: #8b9c92; }
.fallback-browse { position: relative; display: inline-flex; align-items: center; min-height: 32px; color: #b9d0c2; cursor: pointer; border-radius: 4px; }
.fallback-browse input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.fallback-browse:focus-within { outline: 2px solid #96b8a5; outline-offset: 4px; }
.fallback-browse:has(input:disabled) { opacity: .4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .folder-help summary:hover, .fallback-browse:hover { color: #e1ece4; } }
.setup-status { font-size: 12px; line-height: 1.6; margin: 16px 0 0; color: #94ab9d; overflow-wrap: anywhere; }
.setup-status:empty { display: none; }
.alert-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
.alert-actions button { min-height: 36px; font-size: 12px; color: #aab9b1; }
@media (max-width: 600px) { .setup-alert { padding: 24px; } }

.world-heading { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px; font-size: 12px; }
.world-heading strong { font-weight: 400; }
.world-detail, .world-note { font-size: 10px; line-height: 1.7; color: var(--muted); }
.menu-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6% 8%; background: linear-gradient(transparent 45%, #03060570); }
.menu-logo { width: 86%; height: 32%; object-fit: contain; }
.menu-name { margin-top: 4%; font-size: clamp(20px, 4vw, 36px); }
.menu-box { width: min(100%, 340px); padding: 16px 20px; border: 1px solid #527771; background: #091917e8; text-align: center; }
.menu-box h2 { font: inherit; font-size: 14px; }
.menu-box h2:empty, .menu-box p:empty { display: none; }
.menu-box p { font-size: 11px; line-height: 1.6; }
.menu-actions { display: grid; }
.menu-actions button { min-height: 40px; font-size: 14px; }
.menu-actions button:focus { color: #8dce84; }
.fallback-picker { display: grid; gap: 10px; margin-top: 14px; font-size: 11px; line-height: 1.6; }
.fallback-picker input { width: 100%; min-height: 36px; color: var(--muted); }
.world-note summary { cursor: pointer; }
.world-note p { overflow-wrap: anywhere; }
#level-picker { display: grid; gap: 10px; margin-top: 24px; font-size: 11px; }
#level-select { width: 100%; padding: 12px; color: #c9d5ce; background: #09110d; border: 1px solid var(--line); font: inherit; }
#level-select:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }
.setup-status.error { color: #e4a28c; }
.wasm-page.playing main { padding-top: 24px; }
.wasm-page.playing .game-panel { width: min(100%, 1100px); }
.wasm-page .viewport { height: min(65svh, 760px); aspect-ratio: auto; }
.wasm-page .focus-overlay { background: transparent; }
.wasm-page #capture { background: #080c0dba; padding: 14px 20px; }
.wasm-page .viewport:fullscreen { width: 100vw; height: 100vh; }
.wasm-page.boot-page .game-panel { width: min(100%, 880px, 86svh); }
.wasm-page.boot-page .viewport { height: auto; aspect-ratio: 4/3; }
.wasm-page.boot-page .viewport:fullscreen { height: 100vh; aspect-ratio: auto; }

/* The real directory input receives the click; its label keeps the existing
   button appearance and keyboard focus treatment. */
.wasm-page .folder-control { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #3a5146; padding: 10px 0; font-size: 11px; flex: 1; text-align: left; cursor: pointer; }
.wasm-page .folder-control input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wasm-page .folder-control:focus-within { outline: 1px solid var(--cyan); outline-offset: 6px; }
.wasm-page .folder-control:has(input:disabled) { opacity: .3; cursor: default; }
.wasm-page .folder-control input:disabled { cursor: default; }

.control-guide { margin-top: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.control-keys { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0 0 10px; padding: 0; }
.control-keys li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.control-keys kbd { padding: 2px 5px; border: 1px solid var(--line); border-radius: 3px; font: inherit; color: #c9d5ce; background: #0c1510; }
.control-hint { display: block; font-size: 10px; margin-bottom: 10px; }
.control-settings { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.control-settings label { display: inline-flex; align-items: center; gap: 8px; }
.control-settings input[type="range"] { width: 100px; accent-color: #a5c4b3; }
.control-settings input[type="checkbox"] { accent-color: #a5c4b3; }
.control-settings output { min-width: 4ch; font-variant-numeric: tabular-nums; }
.control-guide details { margin-top: 10px; }
.control-guide summary { cursor: pointer; width: fit-content; }
.control-guide details .control-keys { margin-top: 12px; }
@media (max-width: 480px) { .control-keys { gap: 8px 12px; } .control-settings { gap: 10px; } }

/* The player is a quiet console surface. Nothing animates beside the game. */
.boot-page.playing { background: radial-gradient(ellipse at 50% 48%, #18302140, transparent 66%), #050807; }
.wasm-page.boot-page.playing main { padding: 24px; min-height: 100svh; }
.boot-page.playing > footer { display: none; }
.wasm-page.boot-page .game-panel { width: min(100%, 960px, calc((100svh - 144px) * 4 / 3)); }
.player-heading { display: flex; justify-content: center; align-items: center; gap: 9px; margin-bottom: 22px; color: #94a596; }
.player-heading strong { font-size: 15px; font-weight: 500; letter-spacing: -.04em; }
.player-mark { width: 5px; height: 5px; border-radius: 50%; background: #99c971; box-shadow: 0 0 12px #8dca6f55; }
.boot-page.playing .viewport { background: #000; border-radius: 3px; box-shadow: 0 0 0 1px #b6dbbd12, 0 20px 80px #0007; }
.boot-page.playing canvas:focus { outline: none; }
.boot-page.playing canvas:focus-visible { outline: none; }
.player-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.player-hint { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; font-size: 11px; color: #839487; }
.player-hint span { display: inline-flex; align-items: center; gap: 6px; }
.player-hint kbd { font: inherit; color: #b1bfb4; }
.player-actions { display: flex; gap: 4px; align-items: center; }
.player-actions button { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 8px; font-size: 12px; color: #a6b5aa; }
.player-actions button:active { background: #b9dcba14; }
.player-actions svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.player-status { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: #e4a28c; }
.player-status:not(.error) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.player-settings { width: min(480px, calc(100% - 32px)); padding: 28px; border-radius: 18px; max-height: calc(100dvh - 32px); box-shadow: 0 24px 80px #0008; }
.player-settings .dialog-heading { margin-bottom: 20px; }
.player-settings h2 { font: 600 20px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.02em; }
.player-settings .dialog-heading button { width: 36px; height: 36px; border-radius: 50%; margin: -8px -8px -8px 0; }
.player-settings .control-guide { border: 0; padding: 0; margin: 0; font-size: 12px; color: #a6b5aa; }
.player-settings .control-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.player-settings .control-keys li { white-space: normal; }
.player-settings .control-keys kbd { white-space: nowrap; font-size: 11px; }
.player-settings .control-hint { margin: 20px 0; font-size: 12px; color: #8fa194; }
.player-settings .control-settings { padding: 20px 0; border-block: 1px solid #c6d5cb14; gap: 16px; }
.player-settings .control-settings label:first-child { width: 100%; justify-content: space-between; }
.player-settings .control-settings input[type="range"] { flex: 1; max-width: 140px; min-width: 60px; }
.player-settings .control-settings input[type="checkbox"] { width: 16px; height: 16px; }
.player-settings summary { min-height: 44px; align-content: center; cursor: pointer; }
.player-about { margin-top: 12px; font-size: 11px; line-height: 1.7; color: #8fa194; }
.player-about p { overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
  .player-actions button:hover, .player-settings .dialog-heading button:hover { background: #b9dcba0c; color: #d9e5d9; }
}
@media (max-width: 600px) {
  .wasm-page.boot-page.playing main { padding: 16px; }
  .player-bar { flex-direction: column; gap: 8px; }
  .player-hint { justify-content: center; }
  .wasm-page.boot-page .game-panel { width: min(100%, calc((100svh - 188px) * 4 / 3)); }
  .player-settings { padding: 24px; }
  .player-settings .control-keys { gap: 12px; }
}

/* Sony Profeel Pro KX-21HV1: static front elevation, based on the supplied
   photographs. Only the narrow glass edge shades the live picture. */
.boot-page { background: radial-gradient(ellipse at 50% 42%, #252729, #101112 65%, #090a0b); }
.wasm-page.boot-page main { padding: 28px 18px 36px; }
.wasm-page.boot-page .game-panel {
  container-type: inline-size;
  position: relative;
  width: min(100%, 1180px, calc((100svh - 72px) * 1.27));
  padding: 0;
  border: 1px solid #4a4a50;
  border-right-color: #16171c;
  border-bottom-color: #0c0d11;
  border-radius: 5px 5px 3px 3px;
  background: #292a31;
  box-shadow: 1px 1px 0 #08090c, 3px 4px 0 #121318, 0 16px 24px #0008, 0 35px 70px #0005;
}
.tv-topline { position: relative; height: 6cqw; min-height: 22px; display: flex; align-items: center; padding-left: 8.5%; border-radius: 4px 4px 0 0; border-top: 1px solid #ffffff15; border-bottom: 2px solid #101115; background: linear-gradient(100deg, #303039, #30313a 50%, #3e4049); box-shadow: inset 0 -1px #ffffff06, inset -2px 0 #ffffff0d; }
.tv-trinitron { display: flex; align-items: center; gap: 2px; color: #a0a0a5; font: 600 clamp(6px, 1.05cqw, 12px)/1 Arial, sans-serif; letter-spacing: -.3px; text-shadow: 0 1px #111; }
.tv-trinitron > span { margin-left: 3px; }
.tv-trinitron i { width: 1.2cqw; height: .65cqw; min-height: 3px; border-radius: 50%; background: #bb5946; box-shadow: inset 0 1px #ffffff24, 0 1px 1px #0008; }
.tv-trinitron i:nth-child(2) { background: #559d70; }
.tv-trinitron i:nth-child(3) { background: #457ea0; }
.tv-face { display: grid; grid-template-columns: 5.8% minmax(0, 1fr) 5.8%; border-top: 1px solid #ffffff08; }
.tv-left-rail { background: linear-gradient(90deg, #25262d, #2f3038 80%, #15161d); border-right: 1px solid #0a0b10; box-shadow: inset 1px 0 #ffffff07; }
.tv-surround { position: relative; padding: 2.2% 4.8% 3%; background: linear-gradient(90deg, #494c58, #242630 5%, #0c0e14 9%, #07090d 90%, #20232c 97%, #13151d); border: 2px solid #101117; border-top-color: #080a0e; border-bottom-color: #484a55; box-shadow: 0 0 0 1px #ffffff09, inset 0 8px 7px #0009, inset 0 -7px 5px #0009; }
.tv-surround::before, .tv-surround::after { content: ''; position: absolute; left: 0; right: 0; height: 2.4%; pointer-events: none; }
.tv-surround::before { top: 0; background: linear-gradient(#11131a, #05070a); clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); }
.tv-surround::after { bottom: 0; background: linear-gradient(#090b10, #252832); clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%); }
.boot-page .viewport, .boot-page.playing .viewport { background: linear-gradient(100deg, transparent 75%, #b6c7c90c 81%, #bac9ca19 83%, transparent 85%), radial-gradient(ellipse at 38% 32%, #303d3b, #202b2a 65%, #11191a); border-radius: 3% / 4%; box-shadow: 0 0 0 2px #030508, 2px 0 3px #6b747347, -2px 0 2px #6b747333; }
.boot-page canvas { border-radius: inherit; background: #000; }
.boot-page .viewport:fullscreen { border-radius: 0; box-shadow: none; background: #000; }
.tv-right-rail { position: relative; border-left: 2px solid #0c0e13; background: linear-gradient(90deg, #32343d, #2d2f38 75%, #3c3e46); box-shadow: inset 1px 0 #ffffff16, inset -1px 0 #ffffff0c; }
.tv-switch-cover { height: 17%; margin: 2px 3px 0; border-bottom: 2px solid #171921; background: linear-gradient(100deg, #373942, #31333c); box-shadow: inset 0 1px #ffffff0b, 0 1px #ffffff12; }
.tv-power { position: relative; display: grid; place-items: center; width: 100%; height: max(44px, 4cqw); margin-block: -12px; padding: 0 8%; z-index: 1; }
.tv-power i { display: block; width: 100%; height: 1.25cqw; min-height: 7px; background: linear-gradient(100deg, #777a81, #555b62 20%, #676c73 80%, #484c54); border: 1px solid #191d24; box-shadow: inset 0 1px #ffffff36, 0 1px #000, 0 2px #ffffff14; }
.tv-power:active i { background: #41464d; box-shadow: inset 0 1px 3px #000; }
.tv-power:focus-visible { outline: 2px solid #b6c3cc; outline-offset: 2px; }
.tv-model { display: block; margin: 8% 0 0; text-align: center; color: #757984; font: 500 clamp(3px, .44cqw, 6px)/1.7 Arial, sans-serif; letter-spacing: .2px; }
.tv-model small { display: block; font: inherit; }
.tv-power-light { position: absolute; bottom: 2%; left: 24%; right: 24%; height: 2px; background: #9eae94; box-shadow: 0 -1px #12171a; }
.tv-bottom { display: grid; place-items: center; height: 4.7cqw; min-height: 22px; border-top: 2px solid #11131a; border-bottom: 2px solid #181a20; background: linear-gradient(100deg, #30313a, #383943 55%, #30323a); box-shadow: inset 0 1px #ffffff09; }
.tv-bottom strong { font: 900 clamp(10px, 2.1cqw, 25px)/1 Georgia, 'Times New Roman', serif; letter-spacing: .02em; color: #b8bac3; text-shadow: 0 1px 1px #090a10, 0 -1px #ffffff36; transform: scaleX(1.15); }
/* Glass lip sits over the picture at the aperture edge. */
.boot-page .viewport::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1px solid #a8c0ba14; box-shadow: inset 0 2px 5px #0009, inset 3px 0 8px #0006, inset -3px 0 8px #0007, inset 0 -2px 4px #b7c9c51c; }
.boot-page .viewport:fullscreen::after { display: none; }
.tv-phosphor { position: absolute; top: 50%; left: 1%; width: 98%; height: 2px; opacity: 0; pointer-events: none; background: #d7e7df; box-shadow: 0 0 5px #b6d9ca90; }
.monitor-starting .viewport, .monitor-stopping .viewport { background: #030504; }
.monitor-stopping .tv-power-light { background: #454b46; }
.boot-page .monitor-off .viewport { background: #000; }
.boot-page .monitor-off .viewport::after { display: none; }
.monitor-off canvas, .monitor-off .landing { visibility: hidden; }
.monitor-off .tv-power-light { background: #454b46; }
.monitor-menu { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }
.monitor-menu button { min-height: 44px; padding: 0; font-size: 12px; color: #acbab2; }
@media (max-width: 600px) {
  .wasm-page.boot-page main { padding: 16px 10px; }
  .wasm-page.boot-page .game-panel { width: min(100%, calc((100svh - 48px) * 1.27)); }
  .tv-surround { border-width: 1px; }
  .tv-power { width: 44px; margin-left: calc((100% - 44px) / 2); padding-inline: 13px; }
}
.playing dialog { border-color: #a4bc9c26; border-radius: 18px; background: #0d1510; box-shadow: 0 24px 80px #000b; }
.player-settings .control-guide, .player-settings .control-hint, .player-about { font-size: .8125rem; line-height: 1.6; }
.system-info-link { min-height: 44px; margin-top: 12px; padding: 0; font-size: .8125rem; color: #a6b6aa; }
@media (max-width: 600px) {
  .wasm-page.boot-page main { padding: 20px 12px; }

}
@media (max-width: 380px) { .player-settings .control-keys { grid-template-columns: 1fr; } .player-settings .control-settings label:first-child { flex-wrap: wrap; } }

/* The landing and the original game share the same physical screen aperture. */
.wasm-page.boot-page .viewport > .landing { position: absolute; inset: 0; width: 100%; padding: 0; border-radius: inherit; background: #050907; }
.wasm-page.boot-page .landing h1 { font-size: clamp(24px, 9.5cqw, 112px); letter-spacing: .5em; padding-left: .5em; }
.wasm-page.boot-page .landing-overline { font-size: clamp(6px, .85cqw, 10px); margin-bottom: clamp(12px, 2cqw, 24px); }
.wasm-page.boot-page .begin { margin-top: clamp(14px, 4cqw, 44px); }
.wasm-page.boot-page .landing-footer { position: absolute; right: 12px; bottom: 12px; padding: 0; }
.boot-page canvas:focus, .boot-page canvas:focus-visible { outline: none; }

/* Tube raster: scanlines and an RGB aperture grille sit above title and OSD.
   Static layers avoid flicker and leave the live renderer unfiltered. */
.boot-page .viewport { overflow: hidden; }
.crt-raster { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, #0003 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, #ff302004 0 1px, #30ff5005 1px 2px, #3050ff04 2px 3px);
  box-shadow: inset 0 0 5cqw #0008; }
.playing .crt-raster { opacity: .4; }
.viewport:has(#play-dialog[open]) .crt-raster { opacity: 1; }
.monitor-off .crt-raster { visibility: hidden; }
.tv-phosphor { z-index: 5; }
.wasm-page.boot-page .viewport > .landing { background: radial-gradient(ellipse, #122019 0%, #060c09 65%, #020504); }
.wasm-page.boot-page .landing h1 { color: #e3eee2; text-shadow: 0 0 2px #e6ffe9, 0 0 15px #a4ffc43b, 2px 0 #7bff971c; }
.wasm-page.boot-page .landing-overline { color: #c8d7c7; font: 400 clamp(9px, 1.15cqw, 14px)/1.5 'Lucida Console', Monaco, monospace; }
.wasm-page.boot-page .begin { color: #79ee75; border-radius: 0; font: 600 clamp(13px, 1.65cqw, 20px)/1.4 'Lucida Console', Monaco, monospace; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 6px #65ff6b60; }
.wasm-page.boot-page .begin svg { display: none; }
.wasm-page.boot-page .begin::before { content: '▸'; }
.wasm-page.boot-page .begin,
.wasm-page.boot-page .begin:is(:hover, :focus, :focus-visible, :active) { border: 0; outline: none; box-shadow: none; background: transparent; }
.wasm-page.boot-page .begin:is(:hover, :focus-visible) { color: #f0ffed; text-shadow: 0 0 8px #aaff9280; }
.wasm-page.boot-page .begin:focus-visible::before { color: #f0ffed; transform: scale(1.25); }

/* White menu labels and green values follow the television service OSD. */
#viewport > #play-dialog { position: absolute; inset: 0; z-index: 2; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; padding: 7% 10% 6%; overflow: auto; border: 0; border-radius: inherit; background: radial-gradient(ellipse at 45% 40%, #0c1913, #030806 85%); box-shadow: none; color: #e2eddf; font: 600 clamp(13px, 2cqw, 24px)/1.4 'Lucida Console', Monaco, monospace; text-shadow: 0 0 2px #eaffdf70, 0 0 7px #b6ffbd25; scrollbar-width: thin; scrollbar-color: #345b38 #030806; }
.osd-heading { display: flex; justify-content: space-between; gap: 12px; padding-bottom: .55em; border-bottom: 1px solid #7de67970; letter-spacing: .04em; }
.channel-ident { color: #7ded76; }
.osd-readout { display: grid; grid-template-columns: 1fr auto; gap: .12em 1em; margin: 1.1em 0 1.25em; }
.osd-readout > :nth-child(even) { color: #7ded76; }
#play-dialog .choose-folder, #play-dialog #close-play, #play-dialog #start-session, #play-dialog .folder-help summary { display: flex; align-items: center; width: 100%; min-height: 36px; margin: 0; padding: .12em 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-shadow: inherit; letter-spacing: 0; text-align: left; }
#play-dialog .choose-folder { position: relative; color: #7ded76; }
#play-dialog .choose-folder > span:first-child { position: absolute; right: calc(100% + .35em); }
#play-dialog :is(.choose-folder, #close-play, #start-session, summary):hover:not(:disabled), #play-dialog :is(button, summary):focus-visible { color: #91ff84; background: #6fe86612; }
#play-dialog :is(button, summary, input):focus-visible { outline: 1px solid #7ded7670; outline-offset: 3px; }
#play-dialog .osd-note { margin: .35em 0 1em; color: #b5c7b5; font-size: .62em; font-weight: 400; line-height: 1.5; }
#play-dialog .folder-help { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; }
#play-dialog .folder-help summary svg { display: none; }
#play-dialog .folder-help summary::after { content: '+'; margin-left: auto; color: #7ded76; }
#play-dialog .folder-help[open] summary::after { content: '−'; }
#play-dialog .folder-help-content { padding: .3em 0 .8em; font: 400 clamp(11px, 1.3cqw, 15px)/1.5 'Lucida Console', Monaco, monospace; color: #b5c7b5; }
#play-dialog .folder-help-content p { color: inherit; }
#play-dialog .folder-example { border-radius: 0; background: transparent; }
#play-dialog .folder-example-root { background: transparent; }
#play-dialog .folder-example-badge { border-radius: 0; color: #7ded76; background: transparent; }
#play-dialog .fallback-picker, #play-dialog .fallback-browse { font: inherit; color: #7ded76; }
#play-dialog .setup-status { margin: .5em 0; overflow-wrap: anywhere; font: 400 clamp(11px, 1.3cqw, 15px)/1.5 'Lucida Console', Monaco, monospace; color: #b5e9b0; }
#play-dialog .setup-status:empty { display: none; }
#play-dialog .setup-status.error { color: #fff0ca; }
#play-dialog .alert-actions { margin: 0; }
.osd-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 1.5em; padding-top: .6em; border-top: 1px solid #7de67970; color: #7ded76; font-size: .55em; font-weight: 400; }
.osd-loading { margin: .8em 0; color: #7ded76; font-size: .65em; }
.osd-activity { display: block; height: .55em; margin-top: .6em; overflow: hidden; background: #7ded7618; }
.osd-activity::after { content: ''; display: block; width: 30%; height: 100%; background: #7ded76; box-shadow: 0 0 8px #7ded76; animation: osd-reading 1.8s ease-in-out infinite alternate; }
@keyframes osd-reading { from { transform: translateX(0); } to { transform: translateX(234%); } }
#play-dialog[aria-busy="true"] .folder-help, #play-dialog[aria-busy="true"] .osd-footer { display: none; }
#play-dialog button:disabled { opacity: .5; cursor: wait; }
.monitor-off #play-dialog { visibility: hidden; }
.viewport:has(> #play-dialog[open]) > :is(.landing, canvas) { visibility: hidden; }
/* Preserve the cabinet's size when the signal switches to the game. */
.wasm-page.boot-page.playing main { padding: 28px 18px 36px; }
@media (max-width: 600px) {
  .wasm-page.boot-page.playing main { padding: 20px 12px; }
  #viewport > #play-dialog { padding: 6% 9%; }
  .osd-readout { margin: .7em 0; }
  #play-dialog .osd-note { font-size: 10px; }
  .osd-footer { font-size: 9px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .osd-activity::after { animation: none; width: 100%; opacity: .6; } }

.game-panel:has(#play-dialog[open]) > .player-status { display: none; }

/* A single OSD list: white labels, green focus, no competing readouts. */
#play-dialog .osd-heading { border: 0; margin-bottom: 1.4em; padding: 0; }
#play-dialog .osd-heading h2 { margin: 0; font: inherit; color: #e2eddf; }
#play-dialog :is(.choose-folder, #close-play, #start-session, .folder-help summary) {
  position: relative; min-height: 44px; padding: .25em .45em; color: #e2eddf;
}
#play-dialog .choose-folder > span:first-child { position: static; }
#play-dialog :is(.choose-folder, #close-play, #start-session, .folder-help summary)::before {
  content: '▸'; position: absolute; right: calc(100% + .15em); color: #7ded76; opacity: 0;
}
#viewport > #play-dialog :is(button, summary):focus { color: #7ded76; background: transparent; outline: none; }
#viewport > #play-dialog :is(button, summary):focus::before { opacity: 1; }
#play-dialog :is(button, summary):hover:not(:focus) { color: #e2eddf; background: #ffffff08; }
#play-dialog .folder-help summary::after { content: none; }
#play-dialog .folder-help-content { padding-left: .65em; }
#play-dialog .osd-footer { justify-content: flex-start; gap: 2em; margin-top: 2.5em; border: 0; color: #b5c7b5; }
#viewport > #play-dialog { text-shadow: 0 0 4px #b6ffbd35; }

/* Cold phosphor illumination is separate from the undistorted picture. */
.tv-warmup { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; background: radial-gradient(ellipse, #8da99c 0%, #466354 65%, #0c1811 100%); transform-origin: center; }

#play-dialog .legal-info a { color: #7ded76; text-underline-offset: .2em; }
#play-dialog .legal-info a:focus-visible { outline: 1px solid #7ded76; outline-offset: 3px; }