/* The end-of-run card — P5-0. WHAT THE PLAYER SEES. The clock hits zero, or the Sprocket touches the Fragment, and a small cream card rises into the middle of the screen: what happened, how much of the city was cleared, and one chunky button to go again. The city stays exactly where it was, still lit, still drawn, with the Sprocket turning gently behind the card. Nothing is blurred and nothing is curtained off, because the run ending is not the same thing as the world disappearing. WHY THIS IS A LINKED FILE AND NOT A TEMPLATE LITERAL. `js/ui/controls.js` inlines its ~40 lines of CSS, and P4-1 deleted eight render-blocking stylesheets from `index.html` to protect PRD-17 §1's 800 ms budget to interactive — so a new needs its reason stated. Those eight were SERIALISED (a styles.css that @imported seven more), which is the cost that mattered; this is one flat same-origin file of ~4 KB fetched in parallel with a module graph that already pulls a 1 MB vendored Three.js. Against that it is free. What it buys is that the card's design is editable as CSS by anyone, and that it is NOT a 200-line template literal inside a .js file — which is the exact shape that shipped `js/ui/controls.js` as a SyntaxError with 160 green tests behind it. TOKENS ARE DECLARED LOCALLY, WITH THEIR SOURCE FILE NAMED. `index.html` inlines only the dozen design-system values the page itself resolves, and this card needs a different dozen. Copying them here — traceable, one comment per line — keeps this file self-contained and adds nothing to the critical path. It is the same trade `index.html` documents: the values can drift, and the alternative is putting the whole design system back on the first paint. */ #fw-screens { /* --- tokens/colors.css --- */ --fw-cream: #FBF1D9; /* --cream-100, surface-card */ --fw-cream-lit: #FFFBEF; /* --cream-50, surface-card-raised */ --fw-tan: #C89B5A; /* --tan-400, border-card */ --fw-tan-track: #DCC395; /* --tan-300 */ --fw-brown: #6B3E1D; /* --brown-600, text-body */ --fw-brown-deep: #4A2A12; /* --brown-700, text-heading and the cartoon keyline */ --fw-brown-soft: #8A5326; /* --brown-500 */ --fw-gold: #FFC521; /* --gold-400 */ --fw-gold-lit: #FFE27A; /* --gold-200 */ --fw-gold-deep: #F5A916; /* --gold-500 */ --fw-gold-wall: #A9640A; /* --gold-700 */ --fw-red: #EE4A44; /* --red-400 */ --fw-red-deep: #D6323C; /* --red-500, status-danger */ --fw-red-wall: #B3232C; /* --red-600 */ /* --- tokens/radii.css, tokens/spacing.css, tokens/motion.css --- */ --fw-radius-card: 20px; /* --radius-card */ --fw-radius-button: 18px; /* --radius-button */ --fw-pad-card: 16px; /* --pad-card */ --fw-gap: 12px; /* --gap-stack */ --fw-inset: 14px; /* --hud-inset */ --fw-press-drop: 3px; /* --press-drop */ /* --fw-retry-min is written by js/ui/screens.js from RETRY_MIN_TOUCH_PX, so PRD-09 §5's 44 px floor is a single number with a test on it rather than one value in JS and another here. */ --fw-retry-min: 44px; position: fixed; inset: 0; z-index: 40; /* INERT, and this is the same lesson `index.html` and `js/ui/controls.js` both had to learn: a full-screen layer that intercepts pointer events eats drags the player meant for the game. Only the card itself opts back in. */ pointer-events: none; /* NO PAINT OF ANY KIND ON THIS LAYER. No colour, no scrim, no blur. The world behind the card is the thing the stop-stepping-keep-rendering split exists to preserve. */ display: flex; align-items: center; justify-content: center; /* ALL FOUR INSETS, IN BOTH ORIENTATIONS (PRD-09 §5). Portrait needs top and bottom; landscape on a notched phone needs left and right, which are the large ones there. `env()` resolves to 0 where there is no hardware intrusion, so on a desktop this is a flat 14 px margin. */ padding-top: calc(env(safe-area-inset-top, 0px) + var(--fw-inset)); padding-right: calc(env(safe-area-inset-right, 0px) + var(--fw-inset)); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--fw-inset)); padding-left: calc(env(safe-area-inset-left, 0px) + var(--fw-inset)); visibility: hidden; } #fw-screens.is-open { visibility: visible; } .fw-card { pointer-events: auto; /* Bounded on BOTH axes. Landscape is short, not merely narrow: at 915x412 the usable height is under 390 px, and a card sized only by its content would push its own retry button off the bottom of the screen — the one control on the one screen that has no other way out. */ width: 100%; max-width: 380px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: var(--fw-pad-card); display: flex; flex-direction: column; gap: var(--fw-gap); text-align: center; background: var(--fw-cream); border: 3px solid var(--fw-tan); border-radius: var(--fw-radius-card); /* tokens/elevation.css --shadow-card: the chunky bevel wall plus a soft ground shadow. */ box-shadow: 0 4px 0 rgba(122, 74, 32, 0.28), 0 10px 20px rgba(20, 12, 0, 0.22); animation: fw-card-pop var(--dur-celebrate, 600ms) var(--ease-bounce, cubic-bezier(.34,1.56,.64,1)) both; } @keyframes fw-card-pop { 0% { transform: scale(0.82) translateY(14px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } .fw-card-eyebrow { margin: 0; font-family: var(--font-ui, "Nunito", system-ui, sans-serif); font-weight: 900; font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fw-brown-soft); } .fw-card-heading { margin: 0; font-family: var(--font-display, "Baloo 2", system-ui, sans-serif); font-weight: 800; font-size: 40px; line-height: 1.02; letter-spacing: 0.01em; /* tokens/elevation.css --text-shadow-title: the cartoon drop the design system puts under every piece of display lettering. */ text-shadow: 0 4px 0 rgba(74, 42, 18, 0.5), 0 8px 12px rgba(0, 0, 0, 0.35); color: var(--fw-red-deep); } .fw-card[data-tone="win"] .fw-card-heading { color: var(--fw-gold-deep); } .fw-card-message { margin: 0; font-family: var(--font-ui, "Nunito", system-ui, sans-serif); font-weight: 700; font-size: 17px; line-height: 1.45; color: var(--fw-brown); } /* The objective block. The win is the Fragment AND roughly three quarters of the city's OBJECTS by count, so every card states where the run got to against that number — including a run that recovered the Fragment without clearing the city. Whether a city is actually clearable to 75% inside its time limit is a separate worldgen problem, so this reports rather than promises. */ .fw-card-objective { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--fw-cream-lit); border: 2px solid var(--fw-tan); border-radius: 14px; } .fw-card-objective-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .fw-card-objective-label { font-family: var(--font-ui, "Nunito", system-ui, sans-serif); font-weight: 900; font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fw-brown-soft); } .fw-card-objective-count { font-family: var(--font-display, "Baloo 2", system-ui, sans-serif); font-weight: 800; font-size: 24px; font-feature-settings: "tnum" 1; color: var(--fw-brown-deep); } .fw-card-meter { height: 12px; border-radius: 999px; background: var(--fw-tan-track); border: 2px solid var(--fw-brown-deep); overflow: hidden; } .fw-card-meter-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(180deg, var(--fw-gold-lit), var(--fw-gold-deep)); transition: width var(--dur-slow, 340ms) var(--ease-out, cubic-bezier(.22,.8,.3,1)); } .fw-card[data-objective-met="true"] .fw-card-meter-fill { background: linear-gradient(180deg, #8FD97C, #3FA34D); /* --green-400 -> --green-500 */ } /* The retry button. The design system's chunky bevel: a light top rim, a hard colour wall below, a soft ground shadow, and a press that drops the whole thing onto the wall. */ .fw-card-retry { min-height: var(--fw-retry-min); width: 100%; padding: 14px 26px; border: none; border-radius: var(--fw-radius-button); font-family: var(--font-display, "Baloo 2", system-ui, sans-serif); font-weight: 800; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; color: #FFFFFF; background: var(--fw-red); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), inset 0 -5px 0 rgba(0, 0, 0, 0.22), 0 5px 0 var(--fw-red-wall), 0 9px 14px rgba(20, 12, 0, 0.28); transition: transform var(--dur-fast, 150ms) var(--ease-out, cubic-bezier(.22,.8,.3,1)), box-shadow var(--dur-fast, 150ms) var(--ease-out, cubic-bezier(.22,.8,.3,1)); } .fw-card[data-tone="win"] .fw-card-retry { color: var(--fw-brown-deep); background: var(--fw-gold); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), inset 0 -5px 0 rgba(0, 0, 0, 0.22), 0 5px 0 var(--fw-gold-wall), 0 9px 14px rgba(20, 12, 0, 0.28); } .fw-card-retry:active { transform: translateY(var(--fw-press-drop)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), inset 0 -5px 0 rgba(0, 0, 0, 0.22), 0 2px 0 var(--fw-red-wall), 0 4px 8px rgba(20, 12, 0, 0.28); } .fw-card[data-tone="win"] .fw-card-retry:active { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), inset 0 -5px 0 rgba(0, 0, 0, 0.22), 0 2px 0 var(--fw-gold-wall), 0 4px 8px rgba(20, 12, 0, 0.28); } .fw-card-retry:focus-visible { outline: 3px solid var(--fw-brown-deep); outline-offset: 3px; } /* LANDSCAPE, AND SHORT PORTRAIT. PRD-09 §5 makes landscape a first-class layout rather than a breakpoint. Keyed on VIEWPORT HEIGHT instead of on `orientation`, because the thing that actually breaks is vertical room: a 915x412 phone, a split-screen window and a short desktop window all hit it, and none of them report the same orientation. */ @media (max-height: 560px) { .fw-card { max-width: 460px; gap: 8px; padding: 12px; } .fw-card-heading { font-size: 30px; } .fw-card-message { font-size: 15px; } .fw-card-objective { padding: 8px 10px; } .fw-card-objective-count { font-size: 20px; } .fw-card-retry { font-size: 18px; padding: 10px 20px; } } @media (prefers-reduced-motion: reduce) { .fw-card { animation-duration: 1ms; } .fw-card-meter-fill { transition-duration: 1ms; } }