:root{color-scheme:dark;--cream:#ffedc6;--red:#e3213d;--ink:#161326;--viewport-height:100dvh;--shell-width:min(100vw,56.25dvh);--shell-height:min(100dvh,177.7778vw)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#000;color:var(--cream);overscroll-behavior:none}body{font-family:ui-monospace,Menlo,Consolas,monospace;-webkit-tap-highlight-color:transparent}button,a.button{font:inherit;font-weight:900;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #ffe9a6;outline-offset:1px}[hidden]{display:none!important}.app{width:100%;height:var(--viewport-height);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000}.console{position:relative;isolation:isolate;width:var(--shell-width);height:var(--shell-height);flex:none;overflow:hidden;border-radius:5.6%/3.15%;background:#f6e6c8;user-select:none;-webkit-user-select:none}.skin{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;-webkit-user-drag:none}.skin-menu{display:none}.title-state .skin-menu{display:block}.title-state .skin-play{display:none}.screen{position:absolute;left:5.787037%;top:8.723958%;width:88.425926%;height:66.927083%;border-radius:3.65%/2.72%;overflow:hidden;background:#121526;z-index:1;touch-action:none}.title-state .screen{visibility:hidden;pointer-events:none}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none}.hotspot,.control{position:absolute;border:0;padding:0;margin:0;background:transparent;color:transparent;pointer-events:auto;font-size:0}.hotspot:active{background:#10060c25}.top-controls,.title-actions,.game-controls{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}.top-controls{z-index:7}.sound,.help{display:none;top:.65%;width:9.4%;height:5.2%;border-radius:18%}.sound{left:76.27%}.help{left:86.57%}.title-state .sound,.title-state .help{display:block}.pause{left:84.6%;top:.85%;width:11.2%;height:5.1%;border-radius:18%}.title-state .pause{display:none}.muted .sound:after{content:'';position:absolute;left:13%;top:48%;width:74%;height:5%;background:#ffebbe;transform:rotate(-40deg)}.paused .pause:after{content:'';position:absolute;inset:18%;border-radius:8%;background:#d00921}.paused .pause:before{content:'';position:absolute;left:43%;top:30%;width:24%;height:40%;z-index:1;background:#ffe8bc;clip-path:polygon(0 0,100% 50%,0 100%)}.title-actions{display:none}.title-state .title-actions{display:block}.play{left:5.2%;top:75.6%;width:89.6%;height:10.2%;border-radius:5%/25%}.title-help{left:24.6%;top:86.7%;width:50.8%;height:6.4%;border-radius:6%/25%}.title-state .game-controls,.ending .game-controls,.finished .game-controls{display:none}.control{top:79.15%;width:27.5%;height:15.1%;touch-action:none}.duck{left:6.5%}.jump{left:36.1%}.fire{left:65.9%}.control:after{content:'';position:absolute;left:12%;top:2.5%;width:76%;aspect-ratio:1;border-radius:50%;opacity:0;background:#10070a26;box-shadow:inset 0 5px 12px #0008;pointer-events:none}.control.pressed:after,.control:active:after{opacity:1}.ending .pause,.finished .pause{pointer-events:none}.loading-banner{position:absolute;z-index:10;left:9%;right:9%;top:70%;padding:10px;border:2px solid #ffd69a;border-radius:8px;background:#1a142de8;color:#fff0c9;font-size:clamp(10px,3vw,15px);text-align:center;font-weight:900}.toast{position:fixed;z-index:200;left:50%;bottom:18px;transform:translateX(-50%);padding:11px 18px;max-width:90vw;border:1px solid #f0c98f;border-radius:8px;background:#242238f2;color:#ffe8b7;font-size:12px;text-align:center}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* Precise brand and control layout over the approved console artwork. */
.title-branding,.controls-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.title-branding{display:none}.title-state .title-branding{display:block}.title-state .controls-art{display:none}.hero-brand-mark{filter:drop-shadow(0 1.5px 1px #10081b99)}

/* Sound belongs to the active game, beside pause; the title keeps its gear. */
.header-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}.title-state .gameplay-sound-art{display:none}.sound{display:block;left:73.5%;top:.6%;width:10.5%;height:5.6%}.title-state .sound{display:none}.muted .sound:after{left:19%;width:65%}

.header-title-clean{display:none}.title-state .header-title-clean{display:block}.title-state .header-game-clean{display:none}

/* Pixel pizza outlines decorate only the spare desktop space. */
.app{position:relative}.console{z-index:1}
.desktop-pizzas{display:none;position:absolute;inset-block:0;width:max(0px,calc((100% - var(--shell-width))/2 - 36px));pointer-events:none;z-index:0}
.desktop-pizzas.left{left:16px}.desktop-pizzas.right{right:16px}
.pizza-field{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;max-width:560px;aspect-ratio:600/760;background-image:url("assets/ui/pizza-pattern.svg");background-size:200% 100%;background-repeat:no-repeat}
.desktop-pizzas.left .pizza-field{background-position:left center}.desktop-pizzas.right .pizza-field{background-position:right center}
@media(min-width:900px) and (hover:hover) and (pointer:fine){.desktop-pizzas{display:block}}

/* Menus use the console's warm paper, red ink and native pixel alphabet. */
@font-face{font-family:"FDS Pixel";src:url("assets/ui/fds-pixel.woff") format("woff");font-weight:700;font-display:swap}
.screen{container-type:size}
.screen-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:#080b16b8;z-index:15}
.card,.modal-card{color-scheme:light;color:#211d25;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;border:2px solid #241d23;border-radius:5px;background:linear-gradient(135deg,#fff1d5,#f3dfb9);box-shadow:0 5px 0 #0b0a0e,0 0 0 2px #e3c7a2,inset 0 0 0 2px #fff5e2;scrollbar-color:#bba07e #f3dfb9;scrollbar-width:thin}
.card{width:100%;max-height:100%;overflow:auto;padding:18px;text-align:center}
.card:before{content:"";display:block;height:10px;margin:0 0 15px;background:repeating-conic-gradient(#d51f32 0 25%,transparent 0 50%) 0 0/10px 10px}
.eyebrow{display:block;font-size:10px;line-height:1.4;letter-spacing:1px;font-weight:800;color:#ae2330}
.card h2,.modal-card h2{font-family:"FDS Pixel",ui-monospace,monospace;font-weight:700;letter-spacing:-.025em;color:#251e25;line-height:1.35;text-wrap:balance}
.card h2{font-size:clamp(18px,6cqw,27px);margin:8px 0 10px}
.card p{font-size:clamp(12px,3.4cqw,14px);line-height:1.45;margin:8px 0}
.card .menu-meta{font-size:clamp(10px,3cqw,12px);line-height:1.5;color:#715c43}
.card .score{display:block;font-family:"FDS Pixel",ui-monospace,monospace;font-size:clamp(26px,9.5cqw,42px);font-weight:700;line-height:1.15;letter-spacing:-.03em;color:#b91f30;margin:4px 0}
.recap-label{display:block;font-size:9px;font-weight:800;line-height:1.4;letter-spacing:.07em;color:#715c43}
.card .gold{color:#a3222d;font-weight:800}
.card button,.modal-card button,a.button{display:block;width:100%;min-height:42px;margin:10px 0 0;padding:10px 8px;border:2px solid #2b2228;border-radius:4px;background:#fff0d0;color:#2b2228;box-shadow:0 3px 0 #a78a67,inset 0 1px #fff8e8;font-family:"FDS Pixel",ui-monospace,monospace;font-size:12px;font-weight:700;line-height:1.45;text-align:center;text-decoration:none}
.card button.primary,.modal-card button.primary{background:linear-gradient(#ed2438,#ce0927);border-color:#641d27;color:#fff1d4;box-shadow:0 3px 0 #641d27,inset 0 1px #ff8290}
.card button:disabled{opacity:.5;cursor:default}
.card button:active:not(:disabled),.modal-card button:active,a.button:active{transform:translateY(2px);box-shadow:0 1px 0 #805d43}
.card button:focus-visible,.modal-card button:focus-visible,.modal-card a:focus-visible,.result-details summary:focus-visible{outline:2px solid #a91e30;outline-offset:3px}
.menu-grid{display:flex;gap:8px}
.menu-grid button{flex:1;font-size:clamp(10.5px,3cqw,12px);min-width:0}

.card button.quiet{background:transparent;border:0;box-shadow:none;color:#79513f;font:700 11px/1.5 system-ui,sans-serif;min-height:34px;margin-top:12px;padding:6px}
.pause-card .menu-meta{padding:10px 0;margin:12px 0;border-top:1px solid #d0b68e;border-bottom:1px solid #d0b68e}

/* A three-step route makes each completed stage and next stop explicit. */
.journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;list-style:none;padding:0;margin:22px 0 18px;position:relative}
.journey:before{content:"";position:absolute;left:16%;right:16%;top:16px;height:2px;background:#cfb68f}
.journey li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.journey-index{display:grid;place-items:center;width:34px;height:34px;border:2px solid #b59b78;border-radius:5px;background:#f6e5c4;color:#79644c;font:700 16px/1 "FDS Pixel",monospace;box-shadow:0 2px 0 #ddc29d}
.journey-label{font-size:clamp(9px,2.7cqw,11px);font-weight:900;letter-spacing:.01em;color:#67553e}
.journey-state{font-size:8px;line-height:1.3;letter-spacing:.05em;color:#78644d}
.journey li.is-complete .journey-index{background:#d51f32;color:#fff0ce;border-color:#8e2331;box-shadow:0 2px 0 #8e2331}
.journey li.is-complete .journey-label{color:#372832}
.journey li.is-next .journey-index{background:#fff1d5;border-color:#d51f32;color:#b91f30;box-shadow:0 0 0 3px #e3b785}
.journey li.is-next .journey-label,.journey li.is-next .journey-state{color:#b91f30;font-weight:900}
.stage-recap{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;align-items:center;text-align:left;border-top:1px solid #cfb68f;border-bottom:1px solid #cfb68f;padding:10px 0;margin-top:14px}
.stage-recap .score{font-size:clamp(23px,7.8cqw,32px)}
.stage-recap p{font-size:12px;line-height:1.45;margin:0;text-align:right}
.stage-card .menu-meta{margin:10px 0 15px}

/* Keep the result's score and actions visible, with optional detailed stats. */
.result-card{padding:16px}
.result-card h2{color:#b91f30}
.result-card p{margin:7px 0}
.result-scoreboard{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,.6fr);align-items:center;gap:12px;text-align:left;border-top:1px solid #cfb68f;border-bottom:1px solid #cfb68f;padding:8px 0;margin:12px 0}
.result-scoreboard #recordLabel{font-size:11px;line-height:1.45;text-align:right;margin:0}
.medals{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;list-style:none;margin:10px 0;padding:0}
.medals li{border:1px solid #cdac7e;border-radius:3px;background:#ead0a3;color:#4d3729;padding:4px 6px;font-size:10px;font-weight:800;line-height:1.3}
.result-card .next-challenge{font-size:11px;line-height:1.4;color:#715c43;margin:8px 0}
.result-details{text-align:left;font-size:11px;margin:10px 0}
.result-details summary{cursor:pointer;font-size:10px;font-weight:800;line-height:1.5;color:#a3222d;letter-spacing:.04em;padding:4px 0}
.result-details p{white-space:pre-line;font-size:11px;line-height:1.6;color:#715c43;background:#f1d9b3;padding:8px;border-radius:3px}
.result-card button{min-height:40px;margin-top:8px}

.global-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:#080b16bd}
.modal-card{width:min(100%,385px);max-height:90dvh;overflow:auto;padding:22px 18px}
.modal-card h2{font-size:22px;margin:10px 0 16px}
.modal-card p{font-size:13px;line-height:1.6;margin:12px 0}
.modal-card b{color:#a3222d}
.modal-card small{display:block;color:#78644d;font-size:10px;line-height:1.5;margin-top:15px}
.modal-card .keyboard{font-size:11px!important;color:#4b372b;background:#edd2a8;padding:12px;border-radius:3px}
.share-card{padding:12px}
.share-card img{display:block;width:100%;max-height:64dvh;object-fit:contain;border-radius:3px}
.toast{background:#f7e5c3;color:#372832;border:2px solid #c52338;box-shadow:0 3px 0 #110c13;font:700 12px/1.4 system-ui,sans-serif}
.loading-banner{background:#fff0d0;color:#a3222d;border:2px solid #8e2331;font:700 11px/1.5 "FDS Pixel",monospace}

@container(max-height:500px){
  .screen-overlay{padding:8px}
  .card{padding:12px}
  .card:before{height:8px;margin-bottom:9px;background-size:8px 8px}
  .card h2{font-size:clamp(18px,6cqw,24px);margin:6px 0 8px}
  .card p{font-size:12px;margin:6px 0;line-height:1.4}
  .card button{min-height:38px;padding:8px;margin-top:8px;font-size:11px}
  .menu-grid button{font-size:10.5px}
  .result-card .score{font-size:clamp(26px,9cqw,34px)}
  .result-card p{margin:5px 0}
  .result-scoreboard{margin:8px 0;padding:6px 0}
  .medals{margin:7px 0;gap:4px}
  .medals li{font-size:9px;padding:3px 5px}
  .result-card .next-challenge{font-size:11px;margin:6px 0}
  .result-details{margin:6px 0}
  .result-details p{font-size:11px}
  .result-card .menu-grid button{min-height:35px}
  .journey{margin:17px 0 14px}
  .journey li{gap:5px}
  .journey-state{font-size:8px}
  .stage-recap{margin-top:12px;padding:8px 0}
  .stage-card .menu-meta{font-size:10px;margin:8px 0 12px}
}
@container(max-width:300px){
  .result-card .medals{display:none}
  .result-scoreboard{padding:4px 0;margin:6px 0}
  .result-card .menu-grid button{font-family:system-ui,sans-serif;font-size:11px;font-weight:800}
}

/* Keyboard help stays in the spare black gutter, separate from the game. */
.desktop-help{display:none;position:absolute;left:calc((100% - var(--shell-width))/4);bottom:24px;transform:translateX(-50%);width:calc((100% - var(--shell-width))/2 - 48px);max-width:220px;z-index:1;color:#f0d9b7;font:12px/1.4 system-ui,sans-serif;pointer-events:none}
.desktop-help-title{font-size:10px;font-weight:800;letter-spacing:.16em;color:#c4ac8d;margin:0 0 12px}
.desktop-help dl{margin:0}.desktop-help dl>div{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:7px 0}
.desktop-help dt{display:flex;align-items:center;gap:4px;margin:0}.desktop-help dd{margin:0;color:#f0d9b7;font-size:12px}
.desktop-help kbd{display:inline-grid;place-items:center;min-width:23px;min-height:23px;padding:3px 5px;border:1px solid #8b7156;border-radius:3px;background:#211c1a;color:#ffebcd;box-shadow:0 2px 0 #554230;font:700 10px/1 ui-monospace,monospace}
.desktop-help .key-or{font-size:10px;color:#887663}
.desktop-help small{display:block;margin-top:12px;font-size:10px;line-height:1.6;color:#b49d7e}
@media(min-width:900px) and (min-height:620px) and (hover:hover) and (pointer:fine){.desktop-help{display:block}}

.result-card .score{font-size:clamp(19px,6.2cqw,28px);letter-spacing:0;overflow-wrap:anywhere;text-align:center;color:#b91f30}.result-scoreboard{grid-template-columns:1fr;text-align:center}.result-scoreboard #recordLabel{text-align:center}
.result-card .result-coupon{font:900 clamp(19px,6.2cqw,28px)/1.15 ui-monospace,Menlo,Consolas,monospace;letter-spacing:0;overflow-wrap:anywhere}

/* Reference title is displayed intact; hotspots match its authored buttons. */
.title-state .header-art{display:none}
.title-state .help{left:86%;top:.7%;width:9%;height:5%}
.title-state .play{left:5%;top:75.7%;width:89%;height:10.4%}
.title-state .title-help{left:24%;top:86.8%;width:52%;height:6.5%}
/* Equal-size pixel arcade controls, aligned to one shared grid. */
.game-controls{inset:auto 5.8% 6.4%;width:88.4%;height:15.4%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5%;align-items:stretch;background:none}
.control{position:relative;inset:auto;width:100%;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center;gap:4%;color:#211c20;touch-action:none;-webkit-touch-callout:none}
.key-face{position:static;display:block;width:80%;aspect-ratio:1;margin:0;align-self:center;border:0;border-radius:0;background:none;box-shadow:none;transform:none;pointer-events:none}
.key-face img{display:block;width:100%;height:100%;image-rendering:auto;pointer-events:none;-webkit-user-drag:none}
.key-label{position:static;display:block;margin:0;min-height:1em;max-width:100%;font-family:'FDS Pixel',monospace;font-weight:700;font-size:clamp(9px,calc(var(--shell-width) * .034),23px);line-height:1.1;letter-spacing:0;text-align:center;white-space:nowrap;pointer-events:none}
.control:after{display:none}
.control:active .key-face,.control.pressed .key-face{transform:translateY(2px);filter:brightness(.84)}
.control:focus-visible{outline:2px solid #a91e30;outline-offset:2px}
.card button,.modal-card button,a.button{font-family:"FDS Pixel",ui-monospace,monospace;font-weight:700;letter-spacing:.015em}

.controls-clean-skin{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;clip-path:inset(77% 0 5.2% 0)}
.title-state .controls-clean-skin{display:none}

/* Cover help is already available below Play; replace only its baked-in gear. */
.title-gear-cover{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.title-state .title-gear-cover{display:block}
.top-controls .help{display:none}
/* Sound and pause share one square cap, baseline, icon size and hit area. */
.top-controls .sound,.top-controls .pause{display:grid;place-items:center;top:.85%;width:9%;height:auto;aspect-ratio:1;padding:0;border:2px solid #5f4937;border-radius:20%;color:#ffedc6;background:linear-gradient(145deg,#454348,#19191f 78%);box-shadow:0 2px 2px #412c2760,inset 0 1px 1px #b7a38c,inset 0 -3px 2px #0007}
.top-controls .sound{left:74.1%}
.top-controls .pause{left:84.7%;border-color:#7c2530;background:linear-gradient(145deg,#f43a43,#c50b27 78%);box-shadow:0 2px 2px #412c2760,inset 0 1px 1px #ff9a8d,inset 0 -3px 2px #830c2560}
.top-controls svg{display:block;width:65%;height:65%;pointer-events:none}
.top-controls .sound:after,.paused .top-controls .pause:before,.paused .top-controls .pause:after{display:none}
.top-controls .play-symbol,.top-controls .sound-off{display:none}
.paused .top-controls .pause-symbol,.muted .top-controls .sound-waves{display:none}
.paused .top-controls .play-symbol,.muted .top-controls .sound-off{display:block}
.top-controls button:active{filter:brightness(.88)}
.title-state .top-controls .sound,.title-state .top-controls .pause{display:none}