:root { color-scheme: dark; --ink: #111318; --panel: #171a20; --text: #f6f5f1; --muted: #c6c9cf; --gold: #f5b400; --gold-light: #ffe18a; font-family: system-ui, "Segoe UI", sans-serif; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { display: grid; min-width: 320px; min-height: 100svh; place-items: center; margin: 0; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); overflow-x: clip; background: radial-gradient(ellipse at 50% 0, rgba(245, 180, 0, .1), transparent 42%), var(--ink); color: var(--text); line-height: 1.45; }
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 4px; }
.not-found-main { width: min(100%, 490px); margin-inline: auto; text-align: center; }
.not-found-brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); font-size: 1rem; font-weight: 700; text-decoration: none; }
.not-found-brand svg { width: 32px; height: 29px; color: var(--gold); }
.not-found-code { margin: .9rem 0 .3rem; color: var(--gold); font-size: .67rem; font-weight: 700; letter-spacing: .14em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .4rem; font-family: "Segoe UI", sans-serif; font-size: clamp(1.55rem, 6vw, 2rem); letter-spacing: -.045em; }
.not-found-intro { margin-bottom: 1rem; color: var(--muted); font-size: .94rem; }
.road-game { padding: .9rem; border: 1px solid rgba(245, 180, 0, .42); border-radius: 13px; background: linear-gradient(145deg, rgba(245, 180, 0, .06), transparent 48%), var(--panel); box-shadow: 0 20px 60px rgba(0, 0, 0, .32); text-align: left; }
.game-heading { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .7rem; }
.game-heading h2 { margin-bottom: 0; font-family: "Segoe UI", sans-serif; font-size: clamp(1.3rem, 4.4vw, 1.75rem); font-weight: 750; line-height: 1.08; letter-spacing: -.04em; }
.game-ranks-label { margin: .25rem 0 .35rem; color: var(--gold-light); font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.game-ranks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin-bottom: .75rem; }
.game-rank { display: grid; min-height: 58px; align-content: center; gap: .12rem; padding: .45rem .55rem; border: 1px solid rgba(245, 180, 0, .2); border-radius: 7px; background: linear-gradient(145deg, rgba(245, 180, 0, .08), #101216 68%); }
.game-rank strong { color: var(--gold-light); font-family: "Courier New", monospace; font-size: .88rem; letter-spacing: .04em; }
.game-rank span { color: var(--muted); font-size: .64rem; line-height: 1.25; }
.game-hour-meter { display: grid; min-width: 106px; justify-items: end; margin: 0; padding: .35rem .5rem; border: 1px solid rgba(245, 180, 0, .25); border-radius: 5px; background: #101216; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.game-hour-meter span { color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .1em; }
.game-hour-meter strong { font-family: "Courier New", monospace; font-size: 1.05rem; letter-spacing: .04em; }
.game-screen { position: relative; display: flex; width: min(100%, 460px); height: clamp(260px, 62svh, 560px); align-items: center; justify-content: center; margin-inline: auto; overflow: hidden; border: 2px solid #45403a; border-radius: 5px; background: #1a211b; line-height: 0; }
.road-canvas { display: block; width: 100%; height: 100%; max-width: 100%; aspect-ratio: 3 / 4; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; user-select: none; -webkit-user-select: none; }
.game-overlay { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: .55rem; padding: 1.2rem; background: rgba(10, 13, 12, .88); color: var(--text); text-align: center; line-height: 1.5; }
.game-overlay[hidden] { display: none; }
.game-overlay p { max-width: 27ch; margin: 0; font-size: .9rem; }
.game-overlay .game-overlay-title { color: var(--gold-light); font-size: 1rem; font-weight: 800; letter-spacing: .08em; }
.game-status { min-height: 1.45em; margin: .65rem 0; color: var(--muted); font-size: .78rem; text-align: center; }
.game-controls { display: grid; grid-template-columns: 1fr 1.45fr 1fr; gap: .5rem; }
.game-controls button { min-height: 50px; border: 1px solid rgba(245, 180, 0, .48); border-radius: 6px; font-size: .88rem; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.game-steer { background: #22262d; color: var(--gold-light); font-size: 1rem !important; }
.game-steer:active, .game-start:active { transform: translateY(2px); }
.game-start { background: var(--gold); color: #17150c; }
.game-start:disabled { cursor: default; opacity: .7; }
.not-found-home { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .55rem; margin-top: .8rem; padding: .6rem 1rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 7px; color: var(--text); font-size: .88rem; font-weight: 700; text-decoration: none; transition: border-color .18s ease, color .18s ease; }
.not-found-home:hover { border-color: var(--gold); color: var(--gold-light); }
@media (max-width: 380px) { body { padding-inline: .7rem; } .road-game { padding: .6rem; } .game-heading { align-items: stretch; flex-direction: column; gap: .55rem; } .game-heading h2 { max-width: 18ch; font-size: clamp(1.5rem, 8vw, 1.85rem); } .game-hour-meter { justify-items: start; } .game-controls { gap: .35rem; } .game-ranks { gap: .3rem; } .game-rank { padding-inline: .4rem; } .game-rank span { font-size: .59rem; } }
@media (max-height: 680px) { body { align-items: start; } .not-found-main { padding-block: .25rem; } .game-screen { height: min(56svh, 390px); min-height: 220px; } }
@media (orientation: landscape) and (max-height: 560px) { body { align-items: start; } .not-found-main { width: min(100%, 720px); padding-block: .25rem; } .game-heading { margin-bottom: .4rem; } .game-ranks { margin-bottom: .45rem; } .game-rank { min-height: 48px; } .game-screen { height: min(66svh, 330px); min-height: 190px; } .game-status { margin-block: .4rem; } .game-controls button { min-height: 42px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }