:root { --neon: #b8ff4a; --neon2: #6cff2a; }

html, body {
  margin: 0; height: 100%; background: #000; overflow: hidden;
  font-family: 'VT323', monospace; color: #fff;
  /* mobile: no scrolling, zooming, pull-to-refresh, text selection or tap flashes */
  touch-action: none; user-select: none; -webkit-user-select: none;
  overscroll-behavior: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  position: fixed; inset: 0;
}

/* ---------- stage: 16:9 box, letterboxed ---------- */
/* dvh = the visible height on phones (without the browser bars); notch-safe padding */
#wrap {
  width: 100vw; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}
#stage { position: relative; aspect-ratio: 16 / 9; width: min(100%, 177.78vh); width: min(100%, 177.78dvh); }
#view { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 16 / 9; }   /* the game's picture (on a computer: the whole stage) */
/* phones: the stage fills the screen – up to a fifth wider than 16:9, the game's picture as wide
   as it, standing on its bottom (the top of the sky cut off); the HUD and buttons at the screen's
   edges. Wider still: black bars at the sides */
@media (pointer: coarse) {
  #wrap { container-type: size; }
  #stage { aspect-ratio: auto; width: min(100cqw, 222.2cqh); height: min(100cqh, 56.25cqw); overflow: hidden; }
  #mute { width: clamp(40px, 6vw, 56px); }
  #skip { font-size: clamp(16px, 2.6vw, 24px); }
}

/* touch hint arrows in the bottom corners (touch screens only) */
#touch-hint { display: none; }
@media (pointer: coarse) {
  #touch-hint {
    display: flex; justify-content: space-between; position: absolute; left: 2%; right: 2%; bottom: 3%;
    pointer-events: none; z-index: 5; font-size: clamp(32px, 8vw, 66px);
  }
  #touch-hint span {                /* as bold as the tutorial's horse: the lime with the printed grain boiling on it */
    color: transparent; background-image: var(--grain, none), linear-gradient(#6cb820, #6cb820);
    background-size: calc(min(100vw, 177.78vh) * .4), auto; -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(0 0 6px rgba(108, 184, 32, .45));   /* (the grain still: a filter re-drawn ten times a second costs phones) */
  }
}

/* phone held upright: the game needs landscape */
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em;
    position: fixed; inset: 0; z-index: 100; background: #000; color: var(--neon);
    font-size: 28px; text-align: center;
  }
  #rotate .rotate-icon { height: 64px; width: auto; fill: #6cb820; animation: turn 1.6s ease-in-out infinite; }
  #rotate .rotate-icon .screen { fill: #000; }
  #rotate .rotate-icon .dim { fill: #2f5a12; }
}
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
/* dot raster (js/ui/raster.js): laid over the normal picture at 20 % */
.dots { position: absolute; inset: 0; display: none; image-rendering: auto; opacity: .2; pointer-events: none; }
.dots canvas { position: absolute; inset: 0; image-rendering: auto; }   /* the sharp dots and the soft spots over them (stretched smoothly) */
body.raster .dots { display: block; }
#scanlines {                       /* retro CRT lines over everything, the loading screen too */
  position: absolute; inset: 0; pointer-events: none; z-index: 30;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.18) 2px 3px);
}

/* ---------- HUD ---------- */
#hud {
  position: absolute; top: 2.5%; left: 3%; right: 3%;
  display: flex; justify-content: space-between; pointer-events: none;
  font-size: clamp(16px, 2.8vw, 30px); text-shadow: 0 0 6px #000, 2px 2px 0 #000; line-height: 1;
}
/* each on one line: the score after the horse from the logo, the record after a cup,
   the speed before its unit */
#hud .line { display: flex; align-items: center; gap: .35em; }
#hud .line + .line { margin-top: .45em; }
#hud .right .line { justify-content: flex-end; }
#hud .label { color: var(--neon); font-size: .75em; }
#hud .icon { flex: none; height: .9em; }
#hud .icon.horse {
  aspect-ratio: 174 / 120; background: var(--horse, none) no-repeat center / contain;   /* (--horse: set by js/ui/account.js) */
  filter: drop-shadow(1px 1px 0 #000);
}
#hud .icon.cup { width: auto; height: .98em; filter: drop-shadow(1px 1px 0 #000); }   /* (like the logo's horse: a flat lime silhouette) */
#hud .right { text-align: right; }
/* by day (Pattaya, the motorway – a bright green picture) the horse and the cup filled
   black, their outline lime */
#hud.day .icon.horse { background-image: var(--horse-day, var(--horse, none)); }
#hud.day .icon.cup path { fill: #0a0806; }
#hud.day .icon.cup path:first-child { stroke-width: 3.6; }
#hud.day .icon.cup path:last-child { stroke: #81bb29; }

/* dev: jump buttons at the left side */
#devjump {
  position: absolute; left: 1%; top: 50%; transform: translateY(-50%); z-index: 36;
  display: flex; flex-direction: column; gap: .3em; font-size: clamp(10px, 1.4vw, 15px);
}
#devjump button {                  /* plain white text, no frame (a dark shadow keeps it readable) */
  font: inherit; color: #fff; background: none; border: 0; text-shadow: 1px 1px 0 #000, 0 0 4px #000;
  padding: .1em 0; cursor: pointer; text-align: left; touch-action: manipulation;
}
#devjump button:hover { text-decoration: underline; }

/* the boys' talk: skip it – white, in the top right corner (where the HUD is, hidden then) */
#skip {
  position: absolute; right: 2.5%; top: 3%; z-index: 35; padding: .4em 0 .4em .8em;
  font: inherit; font-size: clamp(12px, 1.8vw, 20px); color: #fff; background: none; border: 0; cursor: pointer;
  text-shadow: 1px 1px 0 #000, 0 0 4px #000; touch-action: manipulation;
}

/* sound on / off – a pixel speaker in the bottom right corner */
#mute { display: none; }   /* (no button: the M key mutes) */
#mute-old {
  position: absolute; right: 2.5%; bottom: 3%; z-index: 35;
  width: clamp(28px, 4.2vw, 48px); aspect-ratio: 4 / 3; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--neon); filter: drop-shadow(1px 1px 0 #000) drop-shadow(0 0 4px #000); opacity: .85;
  touch-action: manipulation;
}
#mute:hover { opacity: 1; }
#mute svg { width: 100%; height: 100%; display: block; fill: currentColor; }
#mute .cross { display: none; }
#mute[aria-pressed="true"] { color: #8a8e98; }
#mute[aria-pressed="true"] .waves { display: none; }
#mute[aria-pressed="true"] .cross { display: inline; }


/* ---------- overlays (title, game over, checkpoint) ---------- */
.overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  pointer-events: none; gap: 1.2em;
}
.hidden { display: none !important; }

.sub {
  font-size: clamp(16px, 2.8vw, 30px); line-height: 1.2;
  text-shadow: 2px 2px 0 #000, 0 0 8px #000;
}
.blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@keyframes pop { from { transform: scale(1.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- leaderboard sign-up ---------- */
.account { background: #000; pointer-events: auto; z-index: 25; }   /* (just black round the TV screen) */
#acc-full {                        /* in the top left corner: the game on the whole screen (phones) */
  position: absolute; top: 3%; left: 2.5%; z-index: 36; display: flex; align-items: center; gap: .45em;
  font: inherit; font-size: .85em; color: var(--neon); background: none; border: 0; cursor: pointer; padding: 0;
  text-shadow: 1px 1px 0 #000, 0 0 4px #000; touch-action: manipulation;
}
#acc-full svg { height: .9em; width: .9em; fill: currentColor; }
#acc-full.hidden { display: none; }
#acc-full-hint {                    /* (iPhones) under the button: how to get the game on the whole screen */
  position: absolute; top: calc(3% + 1.8em); left: 2.5%; z-index: 36; max-width: 22em; text-align: left;
  font-size: .8em; line-height: 1.35; color: var(--neon); background: rgba(0, 0, 0, .9); padding: .6em .8em;
  border-left: 2px solid var(--neon);
}
#acc-full-hint svg { height: .95em; width: .85em; fill: currentColor; vertical-align: -.1em; }
#acc-full-hint.hidden { display: none; }
#account.diving #acc-full { visibility: hidden; }
#acc-skip {                        /* white, in the top right corner of the screen (the speaker is in the bottom one) */
  position: absolute; right: 2.5%; top: 3%; z-index: 36; text-shadow: 1px 1px 0 #000, 0 0 4px #000;
  font: inherit; font-size: .85em; color: #fff; background: none; border: 0; cursor: pointer; padding: 0;
}
#acc-form {
  display: flex; flex-direction: column; align-items: stretch; gap: .45em;
  width: max-content; max-width: 92%; font-size: clamp(14px, 2.4vw, 26px); color: #fff;   /* as wide as the heading */
}
#acc-form input[type=text], #acc-form input:not([type]), #acc-form input[type=email] {
  font: inherit; color: var(--neon); background: #000; border: 0; padding: calc(.15em + 2px) calc(.4em + 2px);   /* no frame (the same size as with it) */
  outline: none; user-select: text; -webkit-user-select: text; touch-action: auto; border-radius: 0;
}
#acc-form input::placeholder { color: #2f6a18; }
/* phones: the dim greens a little lighter (on a small, bright-lit screen they were hard to read) */
.touch #acc-form input::placeholder, .touch .acc-consent { color: #4a9a22; }
.touch .acc-consent input { background: #4a9a22; }
/* the browser's autofill (and its preview): no white or blue box – black with the
   neon text like a typed value (the inset shadow paints over the browser's colour;
   the long transition keeps it from ever fading in) */
#acc-form input:-webkit-autofill, #acc-form input:-webkit-autofill:hover, #acc-form input:-webkit-autofill:focus,
#acc-form input:autofill {
  -webkit-text-fill-color: var(--neon); caret-color: var(--neon);
  -webkit-box-shadow: 0 0 0 1000px #000 inset; box-shadow: 0 0 0 1000px #000 inset;
  transition: background-color 600000s 0s, color 600000s 0s;
  font: inherit;
}
.acc-title {                       /* the form's heading, in the lettering of CHECKPOINT */
  align-self: flex-start; font-size: 2.4em; margin-bottom: .35em; white-space: nowrap;
  background-image: var(--grain-soft, none), linear-gradient(to bottom, #6cb820 66.7%, #0a0806 66.7% 69.3%, #6cb820 69.3%);   /* (the softer grain) */
  /* its left edge on the fields' text: their padding (.4em + 2px of the form = .4 / 2.4 em
     here) minus the lettering's own .06em in front */
  margin-left: calc(.4em / 2.4 - .06em + 2px);
}
.acc-consent {                     /* like the fields' labels: the same dim green, size and left edge */
  color: #2f6a18; line-height: 1.2; display: flex; gap: .4em; align-items: center; text-align: left;
  padding: 0 calc(.4em + 2px); cursor: pointer;
}
.acc-consent input {                /* a plain square, no frame: dim green, bright green when ticked */
  appearance: none; -webkit-appearance: none; width: .7em; height: .7em; margin: 0; flex: none;
  background: #2f6a18; border: 0; border-radius: 0; cursor: pointer;
}
.acc-consent input:checked { background: var(--neon); box-shadow: 0 0 6px #3a9a10; }
.acc-consent:has(input:checked) { color: var(--neon); }
.acc-consent a { color: inherit; text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; cursor: pointer; }   /* (the text: the page on the processing of personal data) */
.acc-consent.missing input { background: #ff7a7a; }                 /* (submitted without the tick) */
/* the conditions of the sign-up, over the form (js/ui/account.js): the text scrolls, the two
   answers at its end */
.terms { position: fixed; inset: 0; background: #000; pointer-events: auto; z-index: 26; justify-content: flex-start; touch-action: pan-y; user-select: text; -webkit-user-select: text; }   /* (the whole window: the scrollbar at its very edge) */
.terms-scroll {
  width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  padding: 6% max(4%, calc(50% - 21em)) 9%; text-align: left;
  font-size: calc(min(100vw, 177.78vh) * .019); line-height: 1.3; color: #6cb820;   /* (the game's green, as the form) */
  scrollbar-color: #6cb820 #000; scrollbar-width: thin;
}
/* the title as big as LEADERBOARD SIGNUP (2.4em of the form's clamp(14px, 2.4vw, 26px)) */
.terms-title { text-transform: uppercase; font-size: calc(2.4 * clamp(14px, 2.4vw, 26px)); margin-bottom: .6em; white-space: normal; padding-right: .1em; }
.terms-title.lettering { line-height: 1.38; }   /* (over .lettering's 1: a gap between the lines, the accents clear of the line over them) */
.terms-scroll p { margin: 0 0 .9em; }
.terms-buttons { display: flex; justify-content: flex-end; align-items: center; gap: 1.6em; margin-top: 2.6em; }
#terms-no { font: inherit; color: #6cb820; background: none; border: 0; outline: none; cursor: pointer; padding: .2em 0; }
#terms-yes {                       /* as the form's "hrát": the heading's green and grain */
  font: inherit; color: #000; border: 0; outline: none; cursor: pointer; padding: .2em 1.1em;
  background: #6cb820 var(--grain-soft, none); background-size: calc(min(100vw, 177.78vh) * .4); image-rendering: pixelated;
  animation: grain .4s steps(1) infinite;
}
#terms-yes:hover, #terms-yes:focus-visible { background-color: var(--neon); }
#terms-no:hover, #terms-no:focus-visible { color: var(--neon); }
.acc-error { color: #ff7a7a; min-height: 1.1em; font-size: .8em; text-align: center; line-height: 1.1; }
#acc-submit {                      /* a small box on the right, ending where the heading ends */
  align-self: flex-end; font: inherit; color: #000; border: 0;   /* (the same size as the fields' text) */
  background: #6cb820 var(--grain-soft, none); background-size: calc(min(100vw, 177.78vh) * .4); image-rendering: pixelated;   /* the heading's green and grain… */
  animation: grain .4s steps(1) infinite;                    /* …boiling like on the heading */
  padding: .2em 1.1em; cursor: pointer; margin-right: .31em;   /* (the heading's last letter ends a little inside its box) */
}
#acc-submit:hover, #acc-submit:focus-visible { background-color: var(--neon); }   /* the lighter green (like the ticked consent) */
#acc-submit:disabled { opacity: .5; }
.acc-offline { color: #8fd42a; font-size: .75em; text-align: center; }
/* the form on an old TV's screen, on black: no frame – just the glass, every edge bulging out
   (the clip path #crt-shape in index.html), nearly square (4:3), black; now and then a green
   glitch on it (js/ui/account.js) – and the red light under it */
.crt { position: relative; padding-bottom: 1.6em; font-size: clamp(12px, min(2.4vw, 4.4vh), 26px); }
@media (max-height: 560px) { .crt-screen { aspect-ratio: auto; } }   /* (a low phone screen: as high as the form needs) */
.crt-screen {
  position: relative; aspect-ratio: 4 / 3; box-sizing: border-box; clip-path: url(#crt-shape);
  display: flex; align-items: center; justify-content: center; padding: 1.6em 2.6em;
  background: #000;
  filter: url(#crt-bulge);           /* (everything on it bulging with the glass) */
}
/* WebKit: no SVG clip or bulge (it garbles them) – the glass's rounded corners only */
.webkit .crt-screen { clip-path: none; filter: none; border-radius: 2.4em / 3em; overflow: hidden; }
/* …and drawn by hand over it (js/ui/crt.js): the glass, the lettering, the fields – bulging as here */
.crt-canvas .crt-screen { clip-path: none; filter: none; background: transparent; border-radius: 0; overflow: visible; }
.crt-canvas .crt-screen::before, .crt-canvas .crt-screen::after { display: none; }
.crt-canvas #acc-form { opacity: 0; }   /* (there still for the taps and the typing – the canvas shows it) */
.crt-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* faint green lines over the whole glass, all the time (its shape showing on the black) */
.crt-screen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(108, 184, 32, .07) 0 2px, transparent 2px 5px);
}
/* the glitch: a band of green light at --gy (--gh high), the lines stronger, the picture jerked
   aside by --gx – faint */
.crt-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    linear-gradient(to bottom, transparent var(--gy, 40%), rgba(108, 184, 32, .38) var(--gy, 40%), rgba(108, 184, 32, .38) calc(var(--gy, 40%) + var(--gh, 6%)), transparent calc(var(--gy, 40%) + var(--gh, 6%))),
    repeating-linear-gradient(to bottom, rgba(108, 184, 32, .13) 0 2px, transparent 2px 5px);
}
.crt-screen.glitch::after { opacity: .55; }
.crt-screen.glitch #acc-form { transform: translateX(var(--gx, 0)); }
/* the fields straight on the glass: no black box behind the text (the browser's autofill neither) */
.crt #acc-form input[type=text], .crt #acc-form input:not([type]), .crt #acc-form input[type=email] { background: transparent; }
.crt #acc-form input:-webkit-autofill { -webkit-box-shadow: none; box-shadow: none; }
.crt #acc-form input:autofill { box-shadow: none; }
.crt-led { position: absolute; right: 9%; bottom: .35em; transform: translate(50%, 50%); pointer-events: none; image-rendering: auto; }   /* (the red light: LED dots, drawn by js/ui/account.js) */
.crt #acc-form { font-size: 1em; max-width: none; }
/* into the TV (js/ui/account.js diveIn): the form gone at once, the horse galloping in the middle (as
   tall as the title sequence's date, gliding there from the screen's middle), the TV zoomed round it –
   slowly, then faster – and gone into black; then the horse gone too */
.tv-horse-box {
  position: absolute; top: 50%; left: 50%; height: 30%; aspect-ratio: 37 / 24; display: none; pointer-events: none;
  transform: translate(-50%, calc(-50% + var(--hy, 0px))); opacity: 1;
  transition: transform 1.6s cubic-bezier(.45, 0, .55, 1) .1s, opacity .2s linear;
  /* the glow, as round the date (js/ui/intro.js: its blur laid over lighter) */
  filter: drop-shadow(0 0 .5vh rgba(108, 184, 32, .55)) drop-shadow(0 0 1.8vh rgba(108, 184, 32, .4));
}
.tv-horse {
  display: block; width: 100%; height: 100%;
  /* as the date and CHECKPOINT (css .lettering): the green, the thin dark cut across, the grain boiling on it */
  background-image: var(--grain, none), linear-gradient(to bottom, #6cb820 66.7%, #0a0806 66.7% 69.3%, #6cb820 69.3%);
  background-size: calc(min(100vw, 177.78vh) * .4), auto; image-rendering: pixelated;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: grain .4s steps(1) infinite;
}
/* the title sequence's film over it all: the grain (its light specks show on the black) and the dark vignette */
.tv-film {
  position: absolute; inset: 0; display: none; pointer-events: none;
  background-image: var(--grain, none), radial-gradient(ellipse 62% 70% at 50% 55%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .6) 100%);
  background-size: calc(min(100vw, 177.78vh) * .4), 100% 100%;
  animation: grain .4s steps(1) infinite;
}
#account.diving .tv-horse-box, #account.diving .tv-film { display: block; }
#account.horse-out .tv-horse-box { opacity: 0; }
#account.diving #acc-form, #account.diving #acc-skip { visibility: hidden; }
#account.diving .crt-screen::after { display: none; }              /* (no glitch on the way in) */
#account.diving .crt {
  transform-origin: 50% calc(50% - .8em);                           /* (the screen's middle: the light's room under it) */
  transform: scale(var(--zoom, 6)); opacity: 0; will-change: transform, opacity;
  transition: transform 1.6s cubic-bezier(.55, 0, .75, .85) .1s, opacity .45s linear 1.3s;
}

#gameover-info { white-space: nowrap; }       /* distance and score stay on one line, even on small screens */
/* game over (js/ui/gameover.js): GAME OVER and HIGH SCORES are drawn into a canvas
   over the picture; the table comes up under HIGH SCORES (.scores – as wide as the
   word, its rows one after another), then the distance, the score and what to
   press (.done); without a table those stay under GAME OVER (.plain). All sized by
   the stage (min(100vw, 177.78vh) is its width; the padding's % too), so the table
   always fits under the heading and its bars. */
#gameover { justify-content: flex-start; padding-top: 15%; gap: calc(min(100vw, 177.78vh) * .0156); box-sizing: border-box; }
#gameover.plain { padding-top: 35%; }
#gameover-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
#gameover > .board, #gameover > .sub { position: relative; visibility: hidden; font-size: calc(min(100vw, 177.78vh) * .0205); }   /* (over the canvas) */
#gameover.scores > .board, #gameover.done > .sub { visibility: visible; }
/* leaderboard: an arcade HIGH SCORES table (game over) – every rank in its own colour */
.board {
  font-size: clamp(13px, 2.7vw, 30px); line-height: 1.12; width: min(84%, 19em); letter-spacing: .08em;
  padding: .2em .9em .5em; text-shadow: 2px 2px 0 #000, 0 0 6px #000;   /* no box: a dark shadow keeps it readable */
}
.board-row { display: flex; gap: .9em; }
.board-row .rank { width: 3em; text-align: left; }
.board-row .nick { flex: 1; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.board-row .pts { text-align: right; }
.board-row { color: #6cb820; }                      /* the green of the form… */
.board-row.r2, .board-row.r3 { color: var(--neon); }   /* …the second and third in the lighter one… */
.board-row.r1 { color: #fff; }                        /* …and the winner in white */
.board-row.mine { animation: blink 1s steps(2, start) infinite; }
.board-note { text-align: center; color: #ff8a8a; font-size: .8em; }
.who { font-size: clamp(12px, 1.8vw, 20px); pointer-events: auto; text-shadow: 1px 1px 0 #000; }
.who b { color: var(--neon); font-weight: normal; }
.who a { color: #8fd42a; }

/* ---------- dev mode ---------- */
#dev {
  position: absolute; left: 2%; bottom: 3%; z-index: 40; pointer-events: none;
  font-size: clamp(12px, 1.8vw, 20px); line-height: 1.15; color: #ffd84a;
  text-shadow: 1px 1px 0 #000, 0 0 6px #000; white-space: pre;
}

/* ---------- loading screen ---------- */
.loading { background: #000; pointer-events: auto; z-index: 20; transition: opacity .5s; }
.loading.fadeout { opacity: 0; }
#loading-canvas { position: absolute; inset: 0; }
#loading-led { position: absolute; inset: 0; pointer-events: none; image-rendering: auto; }
#loading.intro #loading-led { display: none; }   /* (only over the skyline: not over the title sequence) */
/* The lettering of the title sequence (js/ui/intro.js), for the page's titles:
   Anton in the game's neon green, spaced like there (7 % of the capital height), a
   thin dark cut across the letters (at 30 % of the capital height above the
   baseline – Anton's capitals fill .065–.925em of the line here) and the printed
   grain boiling on it (--grain: the intro's own grain, set on the page by intro.js).
   .solid: the same without the cut (for small text, where the cut would vanish).
   The text only shows where its box is: room above the line for the accents
   (Í, Ž, Ů), taken back by the margin – the cut stays measured on the line. */
.lettering {
  font-family: Anton, Impact, 'Arial Narrow', sans-serif; font-weight: normal; line-height: 1;
  letter-spacing: .06em; padding-left: .06em;  /* (the spacing comes after the last letter too: balanced on the left) */
  padding-top: .3em; margin-top: -.3em; background-origin: content-box;
  color: transparent; text-shadow: none;
  background-image: var(--grain, none), linear-gradient(to bottom, #6cb820 66.7%, #0a0806 66.7% 69.3%, #6cb820 69.3%);
  background-size: calc(min(100vw, 177.78vh) * .4), auto;   /* the grain as big as in the intro */
  -webkit-background-clip: text; background-clip: text;
  image-rendering: pixelated;                  /* (chunky grain pixels, as in the intro) */
  animation: grain .4s steps(1) infinite;
}
.lettering.solid { background-image: var(--grain, none), linear-gradient(#6cb820, #6cb820); }
/* the lettering a little low-res, like the title sequence's (the SVG filter in index.html) */
.lettering { filter: url(#pixelate); }
.webkit .lettering { filter: none; }                               /* (WebKit garbles the SVG filter: the lettering without its pixelating) */
@keyframes grain {
  0% { background-position: 0 0, 0 0; }
  25% { background-position: -113px -57px, 0 0; }
  50% { background-position: -41px -171px, 0 0; }
  75% { background-position: -187px -89px, 0 0; }
}
/* the title sequence waits for the player with what to press above the word
   (--word-top: where the word's top stands then, set by js/ui/loading.js) */
#loading .load-prompt {
  position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: max-content;
  bottom: calc(100% - var(--word-top, 52%) + .55em);
  font-size: calc(min(100vw, 177.78vh) * .028); letter-spacing: .12em; padding-left: .12em;
  visibility: hidden; animation: none;
}
#loading.hold .load-prompt { visibility: visible; animation: grain .4s steps(1) infinite, blink 1s steps(2, start) infinite; }
/* LOADING… / CLICK TO START disappears the moment the title sequence (js/ui/intro.js) starts */
#loading.intro .load-start { visibility: hidden; animation: none; }
.load-start {                      /* in the middle of the skyline, like the subtitles on the Drive title card */
  position: absolute; top: calc(50% - .6em); left: 0; right: 0; text-align: center; line-height: 1.2;
  color: var(--neon); font-size: clamp(16px, 3.4vw, 38px);   /* (the game's light green) */
  letter-spacing: .14em; padding-left: .14em;   /* (the spacing comes after the last letter too: balanced on the left) */
  text-shadow: 2px 2px 0 #000, 0 0 8px rgba(150, 235, 70, .35);
}

/* ---------- checkpoint: black screen + chunky pixel title ---------- */
.blackout { background: #000; animation: fadein .15s ease-out; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* two layers of the same text: black outline + drop shadow underneath,
   the green gradient (light top, white line, darker bottom) on top */
.cp-title {
  position: relative; font-size: clamp(40px, 11vw, 124px); letter-spacing: .04em; line-height: 1;
  color: #000; animation: pop .3s ease-out;
  text-shadow:
    .09em 0 0 #000, -.09em 0 0 #000, 0 .09em 0 #000, 0 -.09em 0 #000,
    .09em .09em 0 #000, -.09em .09em 0 #000, .09em -.09em 0 #000, -.09em -.09em 0 #000,
    .16em .16em 0 #000;
}
.cp-title::after {
  content: attr(data-text); position: absolute; left: 0; top: 0;
  text-shadow: none;   /* the inherited outline shadows would paint over the gradient */
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(to bottom,
    #d6ffae 0%, #b4f07c 38%, #ffffff 38%, #ffffff 47%,
    #6fd23e 47%, #4cb82c 78%, #2f8f1f 78%, #2f8f1f 100%);
}

/* ---------- the intro: only road-sign chevrons, towards where to steer ----------
   flat green on black like the title sequence, no neon glow, they appear and go at once */
#tutorial {
  justify-content: flex-start; padding-top: 9%; box-sizing: border-box;
  /* a soft dark band behind the chevrons, so they read over the grey street */
  background: linear-gradient(to bottom, transparent 2%, rgba(10,8,6,.5) 7%, rgba(10,8,6,.5) 24%, transparent 32%);
}
.tut-card { display: flex; flex-direction: column; align-items: center; font-size: clamp(14px, 2.4vw, 26px); }   /* (sets the gaps between the chevrons) */

/* three chevrons lighting up one after another, towards where to steer */
.tut-chevrons { display: flex; gap: .45em; height: clamp(40px, 8vw, 90px); }
/* each chevron in the lettering of CHECKPOINT: the green with the printed grain boiling
   on it, glowing (on the row: the mask would cut a glow off) */
.tut-chevrons { filter: drop-shadow(0 0 5px rgba(150, 235, 70, .55)); }
.tut-chevrons .chev {
  display: block; height: 100%; aspect-ratio: 7 / 9; opacity: .18;
  background-image: var(--grain, none), linear-gradient(#6cb820, #6cb820);   /* (no cut across: just the green and the grain) */
  background-size: calc(min(100vw, 177.78vh) * .4), auto; image-rendering: pixelated;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h3v1H0zM1 1h3v1H1zM2 2h3v1H2zM3 3h3v1H3zM4 4h3v1H4zM3 5h3v1H3zM2 6h3v1H2zM1 7h3v1H1zM0 8h3v1H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h3v1H0zM1 1h3v1H1zM2 2h3v1H2zM3 3h3v1H3zM4 4h3v1H4zM3 5h3v1H3zM2 6h3v1H2zM1 7h3v1H1zM0 8h3v1H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: chev 1.1s steps(1) infinite, grain .4s steps(1) infinite;
}
.tut-chevrons .chev:nth-child(2) { animation-delay: .22s, 0s; }
.tut-chevrons .chev:nth-child(3) { animation-delay: .44s, 0s; }
@keyframes chev { 0% { opacity: 1; } 40%, 100% { opacity: .18; } }
#tutorial.left .tut-chevrons { transform: scaleX(-1); }      /* mirrored: points and runs to the left */

/* done: all the chevrons light up for a moment, then the card is gone */
.tut-card.leave .tut-chevrons .chev { animation: grain .4s steps(1) infinite; opacity: 1; }
.tut-card.leave { animation: tut-out .42s linear forwards; }
/* the horse in place of the chevrons (js/ui/hud.js: .running), galloping on the spot the
   way they point (the row's mirror turns it to the left) */
.tut-chevrons { position: relative; }
.tut-horse {
  position: absolute; top: 50%; left: 50%; height: 100%; aspect-ratio: 37 / 24;
  transform: translate(-50%, -50%); visibility: hidden;
  background-image: var(--grain, none), linear-gradient(#6cb820, #6cb820);   /* (as the chevrons: the lime and the grain) */
  background-size: calc(min(100vw, 177.78vh) * .4), auto; image-rendering: pixelated;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: grain .4s steps(1) infinite;
}
.tut-card.running .tut-horse { visibility: visible; }
.tut-card.running .tut-chevrons .chev { visibility: hidden; animation: none; }
@keyframes tut-out { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
#game, #game-dots, #game-boards { transition: filter .1s linear; }
/* the car radio: the song whose sign was just passed, bottom left (js/world/highway.js) */
.radio {
  position: absolute; left: 3%; bottom: 4%; z-index: 6; pointer-events: none;
  font-size: clamp(14px, 2.2vw, 24px); color: var(--neon); letter-spacing: .06em;
  text-shadow: 0 0 6px #000, 2px 2px 0 #000; animation: radio-in .35s steps(4) both;
}
@keyframes radio-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* the billboards' pictures, sharp (js/ui/billboards.js): over the dots, at the screen's own resolution */
#game-boards { position: absolute; inset: 0; pointer-events: none; image-rendering: auto; }
/* the boys' talk at the first petrol station (js/ui/talk.js): over the game, under the scanlines */
#talk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 22; pointer-events: none; image-rendering: auto; }
#talk-dots { z-index: 23; }
#logo-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 22; pointer-events: none; image-rendering: auto; }


/* ---------- the gate until the premiere (js/ui/gate.js) ---------- */
#gate {
  position: fixed; inset: 0; z-index: 300; background: #000;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto; touch-action: manipulation; transition: opacity .5s;
}
#gate.gone { opacity: 0; pointer-events: none; }
.gate-view { display: flex; flex-direction: column; align-items: center; gap: 1.4em; }
#gate-count { align-items: flex-start; gap: .4em; }
.gate-time { display: block; image-rendering: auto; }   /* (drawn by js/ui/gate.js: the lettering with the LED panel over it) */
.gate-link {
  font: inherit; font-size: clamp(20px, 2.6vw, 30px); letter-spacing: .08em; color: #8fd42a; text-transform: lowercase;
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
#gate-open { color: #3f6a1a; margin-left: calc(max(56px, min(190px, 14vw)) * .15); }   /* (darker, at the digits' left edge) */
.gate-link.small { font-size: clamp(16px, 2vw, 22px); color: #4f7a1c; }
.gate-link:hover, #gate-open:hover { color: var(--neon); }
#gate-form { align-items: flex-start; gap: .5em; }
#gate-input, #gate-form button {                                    /* the password and "vstoupit": one size, one left edge */
  font: inherit; font-size: clamp(24px, 3.4vw, 38px); letter-spacing: .12em; text-align: left;
}
#gate-input {
  width: min(72vw, 11em); color: var(--neon); background: transparent; border: 0; outline: none; padding: 0;
  user-select: text; -webkit-user-select: text; touch-action: manipulation; caret-color: transparent;   /* (no line under it, no blinking caret) */
}
#gate-input::placeholder { color: #2f5a12; opacity: 1; }
#gate-form button { color: #8fd42a; text-transform: lowercase; background: none; border: 0; padding: 0; cursor: pointer; }
#gate-form button:hover { color: var(--neon); }
#gate-back { margin-top: 1.2em; }
.gate-err { min-height: 1.2em; font-size: clamp(16px, 2vw, 22px); color: #ff8a8a; }
#gate-form.shake { animation: gate-shake .4s; }
@keyframes gate-shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }