/* ── Reset & tokens ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Warm, muted, low-contrast. The old palette was cream-free: pure white paper, near-black blue ink and a Material light-blue accent, which is the colour system of a dashboard rather than a place you want to spend two minutes. Everything here is pulled towards paper and wood. */ --ink: #33291f; --ink-soft: #6b5a49; /* Still has to clear WCAG AA (4.5) on --paper for the city-card blurbs and record labels. #6f5d4c measures 5.9 on #fdf8f0; --good and --danger are darkened past their pretty values for the same reason. */ --ink-faint: #6f5d4c; --line: #e3d7c5; --paper: #fdf8f0; --accent: #2e7d70; --accent-warm: #dda23f; --danger: #b04a3e; --good: #3f7a4e; /* Text drawn straight onto the sky, as opposed to text inside a panel that brings its own background. Only these flip at night — flipping --ink globally would turn every panel's text white on white. */ --on-sky: #33291f; --on-sky-soft: #6b5a49; --accent-on-sky: #2e7d70; --radius: 14px; /* Shadows are warm too. A cool grey shadow under a cream card reads as grime; a warm one reads as depth. */ --shadow-1: 0 1px 2px rgba(74, 56, 38, 0.09), 0 3px 10px rgba(74, 56, 38, 0.07); --shadow-2: 0 8px 30px rgba(74, 56, 38, 0.18); --street-h: 92px; font-size: 16px; } html, body { height: 100%; width: 100%; overflow: hidden; font-family: ui-rounded, 'SF Pro Rounded', 'Hiragino Maru Gothic ProN', 'Varela Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; background: #f6efe3; color: var(--ink); -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* Sized to the *visible* viewport so iOS Safari's chrome cannot push the keyboard out of reach. */ body { position: relative; height: 100dvh; } /* The `hidden` attribute has to beat any `display` a class sets. `[hidden]` lives in the UA stylesheet at specificity (0,1,0) — exactly the same as a class selector — and on a tie the author stylesheet wins. So `.settings-panel { display: flex }` silently un-hid the panel: invisible (opacity 0) but laid out, inset:0, z-index 100, swallowing every click on every screen. Same for `.milestone-overlay`. This is the rule that makes `hidden` mean hidden, whatever else is declared. */ [hidden] { display: none !important; } /* Night. Set on by applySky(), because the sky is per-screen but the time of day is not. Panels keep their light surfaces and their dark text; only what sits on the sky inverts. */ .is-night { --on-sky: #f3ebdd; --on-sky-soft: #c3b5a2; --accent-on-sky: #7ec8b8; } /* The sky gradient paints over this, but body is the ground behind every screen transition and any gap — leaving it daylight-blue flashes white. */ .is-night body, html.is-night { background: #1f2130; } /* ── Buttons ────────────────────────────────────────────────────────────── */ .btn-primary, .btn-secondary { font: inherit; font-weight: 700; border-radius: var(--radius); cursor: pointer; transition: transform 0.1s ease, background 0.2s ease, opacity 0.2s ease; } .btn-primary { padding: 15px 22px; font-size: 16px; color: #fdf8f0; background: var(--ink); border: none; letter-spacing: 0.01em; } .btn-primary:active { transform: scale(0.98); } .btn-primary:disabled { opacity: 0.38; cursor: default; transform: none; } /* Dark-on-dark reads as broken (and, when disabled, as absent entirely). At night the primary action becomes the light thing on screen. */ .is-night .btn-primary { color: #33291f; background: #f3ebdd; } /* Explicit muted colours rather than blanket opacity: a light button faded to 0.34 over a dark ground turns into an indistinct grey smudge. */ .is-night .btn-primary:disabled { opacity: 1; color: rgba(243, 235, 221, 0.45); background: rgba(243, 235, 221, 0.12); } .btn-secondary { padding: 13px 28px; font-size: 15px; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); } .btn-secondary:active { transform: scale(0.98); } .btn-icon { position: absolute; top: 6px; right: 12px; width: 38px; height: 38px; font-size: 17px; line-height: 1; color: var(--ink-soft); background: rgba(253, 248, 240, 0.86); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; z-index: 6; } /* ── Toast ──────────────────────────────────────────────────────────────── */ /* Deliberately small and off to the side of the tower: a modal slab in the middle of the screen was fine when it appeared once, but §3 puts one of these on every completed floor. */ .toast { position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 8px); padding: 10px 18px; min-width: 180px; max-width: min(78vw, 380px); text-align: center; background: rgba(58, 45, 33, 0.93); color: #fdf8f0; border-radius: 999px; box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; z-index: 90; transition: opacity 0.18s ease, transform 0.18s ease; backdrop-filter: blur(6px); } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* Above the street and the tower, below the keyboard. */ .play-stage .toast { z-index: 20; } .toast-message { font-size: 15px; font-weight: 700; line-height: 1.3; } .toast-detail { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--accent-warm); letter-spacing: 0.01em; } .toast[data-tone='five'] { background: rgba(46, 98, 88, 0.94); } .toast[data-tone='best'] { background: linear-gradient(135deg, #a9741f, #dda23f); } /* ── On-screen keyboard ─────────────────────────────────────────────────── */ .keyboard { position: relative; z-index: 12; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(247, 240, 229, 0.96); border-top: 1px solid var(--line); } .kb-row { display: flex; justify-content: center; gap: 5px; } .kb-key { min-width: 30px; height: 44px; padding: 0 4px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid #d9cbb6; border-radius: 9px; box-shadow: 0 1px 0 #d9cbb6; cursor: pointer; transition: background 0.08s ease, transform 0.08s ease; } .kb-key:active, .kb-key.is-pressed { background: #ece0cd; transform: translateY(1px); box-shadow: none; } .kb-wide { min-width: 58px; font-size: 12px; } @media (min-width: 720px) { .kb-key { min-width: 42px; height: 48px; font-size: 16px; } .kb-wide { min-width: 76px; font-size: 13px; } } /* On a real desktop the on-screen keyboard is redundant — there is a physical one — and it was costing the tower about 160px of the height §1 is trying to give it. Gated on `pointer: fine` as well as width so a large touch device keeps its keys. */ @media (min-width: 900px) and (pointer: fine) { .keyboard { display: none; } } /* Nothing here needs to move for the game to be playable. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }