:root { --bg: #0a1526; --bg-accent: #12233d; --fg: #eef2f9; --muted: #8fa0bd; --red: #e1001a; --border: #1e3a5f; } * { box-sizing: border-box; margin: 0; padding: 0; } :root { color-scheme: dark; } /* The dark base lives on the ROOT () so it fills the entire viewport, the overscroll/rubber-band area, and the iOS safe-area regions in every toolbar state. Everything else — the translucent .scene (opacity 0.4) and the body's gradient — layers on top of a guaranteed-dark root. Without this, is transparent, so any area the body doesn't cover falls through to the browser's default backdrop (white on iOS Safari, which has no dark color-scheme hint), and the 40%-opacity scene composites over it into a lighter-blue seam below the footer. This makes correctness independent of the body/scene viewport-height juggling below. */ html { height: 100%; background: var(--bg); } body { height: 100%; } body { font-family: "Inter", system-ui, -apple-system, sans-serif; background: radial-gradient(1100px 600px at 50% -8%, var(--bg-accent), transparent 70%), var(--bg); color: var(--fg); /* Sizes the flex column to the visible viewport. No longer load-bearing for the background — the dark base is on above, so any area this doesn't cover stays dark. dvh tracks the real viewport on iOS, where vh over-reports height (assumes the toolbar collapsed). */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; } /* background rocket-launch scene */ .scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.4; pointer-events: none; } .wrap { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2.25rem; text-align: center; padding: clamp(2.5rem, 8vh, 5rem) 1.5rem 2rem; } /* logo on a white panel so the navy wordmark reads on dark */ .site-header { position: relative; z-index: 1; width: 100%; background: #ffffff; padding: 0.85rem 1.5rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28); } .logo-img { height: 58px; width: auto; display: block; } /* preview-only placeholder shown until the real logo file is dropped in */ .logo-ph { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: clamp(1.3rem, 5vw, 1.9rem); letter-spacing: 0.02em; color: #b4c0d2; } /* definition block */ .def { max-width: 32rem; text-align: center; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55); } .word { font-family: "Inter", sans-serif; font-weight: 800; font-size: clamp(2rem, 6vw, 2.8rem); letter-spacing: -0.02em; color: var(--fg); margin-bottom: 0.4rem; } .word .src { display: block; font-size: 0.85rem; font-weight: 400; font-style: italic; color: var(--muted); letter-spacing: 0; margin-top: 0.35rem; } .pron { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1rem; color: var(--muted); margin-bottom: 0.15rem; } .pos { font-style: italic; color: var(--muted); font-size: 0.98rem; margin-bottom: 1.1rem; } .pos span { opacity: 0.85; } .def ol { list-style-position: inside; padding-left: 0; display: flex; flex-direction: column; gap: 0.6rem; } .def li { font-size: 1.08rem; line-height: 1.55; color: var(--fg); } .def li::marker { color: var(--red); font-weight: 700; } /* footer */ .foot { position: relative; z-index: 1; text-align: center; padding: 1.75rem 1.5rem 2.25rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.85rem; } .foot a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .foot a:hover { color: var(--fg); border-color: var(--red); } /* --- Chaos Blaster overlay (nothing loads until the hero rocket is clicked) --- */ .cb-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(7, 13, 24, 0.97); display: flex; align-items: center; justify-content: center; } .cb-overlay[hidden] { display: none; } .cb-canvas { display: block; touch-action: none; } .cb-chrome { position: absolute; z-index: 2; top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: flex; gap: 10px; } .cb-chrome button { background: rgba(205, 216, 232, 0.12); color: #cdd8e8; border: 1px solid rgba(205, 216, 232, 0.35); border-radius: 8px; font: 10px/1 "Press Start 2P", ui-monospace, monospace; padding: 13px 16px; min-width: 44px; min-height: 44px; cursor: pointer; } .cb-close { font-size: 14px !important; } .cb-chrome button:hover, .cb-chrome button:focus-visible { background: rgba(205, 216, 232, 0.25); } .cb-end { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; background: rgba(10, 21, 38, 0.82); color: #cdd8e8; font-family: "Press Start 2P", ui-monospace, monospace; padding: 24px; } .cb-end[hidden] { display: none; } .cb-end-cameo { color: #e1001a; font-size: 48px; line-height: 1; } .cb-end h2 { color: #ffffff; font-size: 18px; line-height: 1.7; margin: 0; max-width: 22ch; } .cb-end-score { font-size: 11px; line-height: 1.6; margin: 0; } .cb-again { background: #e1001a; border: none; color: #ffffff; font: 12px/1 "Press Start 2P", ui-monospace, monospace; border-radius: 8px; padding: 16px 22px; cursor: pointer; } .cb-again:hover, .cb-again:focus-visible { background: #b80016; } .cb-end-link a { color: #9aa9bf; font-size: 10px; } /* --- hero rocket: game entry hint --- */ /* the scene is pointer-events:none; re-enable just the rocket. The content wrap sits above the scene, so it passes clicks through except on its text. */ .wrap { pointer-events: none; } .wrap .def > * { pointer-events: auto; } .hero-rocket { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* No focus ring for mouse/touch activation (it read as a stray box on the faded background rocket); keep a crisp one only for real keyboard focus. */ .hero-rocket:focus:not(:focus-visible) { outline: none; } .hero-rocket:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; } .hero-rocket:hover, .hero-rocket:focus-visible { animation: cb-wiggle 0.9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .hero-rocket:hover .hero-flame, .hero-rocket:focus-visible .hero-flame { animation: cb-flicker 0.32s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0%; } @keyframes cb-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-1.4deg); } 75% { transform: rotate(1.4deg); } } @keyframes cb-flicker { from { transform: scaleY(0.82); } to { transform: scaleY(1.12); } } @media (prefers-reduced-motion: reduce) { .hero-rocket:hover, .hero-rocket:focus-visible, .hero-rocket:hover .hero-flame, .hero-rocket:focus-visible .hero-flame { animation: none; } }