/* ---------------------------------------------------------------------
   Rev Rush — revrush.net

   Tipografija je zacasno sistemska. Od faze 8 naprej naslove risé
   PixelFont iz igre (5x7 bitna pisava), zato so tu vsi naslovi ze zdaj
   veliki, razprti in v enem stolpcu — da menjava pisave ne bo zahtevala
   nove postavitve.
   --------------------------------------------------------------------- */

:root {
  --ink: #f9f7f3;          /* PixelArt "W" */
  --gold: #f9c22e;
  --outline: #0e131d;      /* PixelArt "K" */
  --panel-w: min(30rem, 78vw);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: #0d0a16; }

body {
  color: var(--ink);
  font: 16px/1.6 var(--mono);
  overflow-x: hidden;
  /* Telo si ob nalozitvi vzame fokus, da puscici vozita brez prvega
     klika (glej `site.js`). Obroba okoli cele strani ni znak fokusa,
     ampak napaka v risbi. */
  outline: none;
  /* Visina se nastavi iz JS: telo je visoko toliko, kolikor je svet
     dolg. Navpicno kolesce zato ostane native — nicesar ne ugrabljamo,
     zato delujejo tipkovnica, drsnik in vztrajnost na dotik. */
}

/* --- svet ---------------------------------------------------------- */

#scene, #hero {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}
#scene { z-index: 0; }

/* Motorist ima SVOJE platno nad karticami (#rail je z-index 2).
   Z enim samim platnom bi ga kartica lahko prekrila, in glavni lik, ki
   se skrije za besedilo, ni vec glavni lik. Svet ostaja zadaj — kartica
   lebdi nad svetom, motorist nad kartico. */
#hero { z-index: 3; pointer-events: none; }

/* --- vsebina, ki potuje s svetom ------------------------------------ */

#rail {
  position: fixed;
  top: 0; left: 0;
  height: 100%;
  z-index: 2;
  will-change: transform;
  pointer-events: none;
}

/* Kartica se sredinja SAMA s `translateX(-50%)`, ne z odstevanjem
   izmerjene sirine v JS. Prva razlicica je racunala `left` iz
   `offsetWidth` ob postavitvi — ko se je okno pozneje spremenilo ali je
   pisava prispela z zamikom, je bila izmera zastarela in kartico je
   odrezalo z levega roba. Zdaj JS pove samo SREDISCE. */
.panel {
  position: absolute;
  top: 50%;
  width: var(--panel-w);
  transform: translate(-50%, -58%);
  pointer-events: auto;
  padding: 1.25rem 1.4rem;
  background: color-mix(in srgb, var(--outline) 78%, transparent);
  border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 3px;
  backdrop-filter: blur(3px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
  /* Plosca, visja od okna, dobi SVOJ drsnik. Navpicni scroll pripada
     svetu, zato bi bila vsebina pod robom plosce sicer nedosegljiva —
     na nizkem zaslonu (telefon lezece) sta garaza in lestvica najvisji.

     BREZ `overscroll-behavior: contain`. Ta je prvo razlicico ustavil:
     plosca z `overflow-y: auto` je drsni vsebnik tudi takrat, kadar nima
     kaj drsati, `contain` pa prekine verigo navzgor — kolesce nad
     kartico torej ni premaknilo nicesar in stran je na namizju obstala.
     Privzeto verizenje je tu pravilo in ne izjema: kadar plosca nima kaj
     drsati (skoraj vedno), gre kolesce naravnost v svet. */
  max-height: 86vh;
  overflow-y: auto;
}
.panel-wide { width: min(38rem, 86vw); }

/* Zacetna kartica stoji visje od ostalih, da motor pod njo ostane
   viden — obiskovalec mora ob prvem pogledu videti oboje: kaj stran
   ponuja in kaj se zgodi, ce zavrti. */
.panel-hero {
  width: min(34rem, 84vw);
  /* Dovolj visoko, da motorju pod njo ostane vidna tudi celada —
     obiskovalec mora ob prvem pogledu videti CELO vozilo, ne le koles.
     Ne vec: pri -92 % je naslov zlezel pod povezave na vrhu. */
  transform: translate(-50%, -88%);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .65);
}
.cta-store {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 1.4rem;
}

h1 {
  font-size: clamp(2.2rem, 7vw, 4.2rem);
  letter-spacing: .18em;
  line-height: 1.05;
  color: var(--gold);
  text-shadow: 0 3px 0 var(--outline);
}
h2 {
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  letter-spacing: .12em;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--outline);
  margin-bottom: .7rem;
}
.lead { font-size: 1.05rem; letter-spacing: .06em; margin: .8rem 0 .6rem; }
.panel p { opacity: .88; font-size: .92rem; }
.panel p + p { margin-top: .6rem; }
.soon { opacity: .55; font-style: italic; }

.stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .45rem 1rem;
  margin-top: 1rem;
  font-size: .82rem;
  letter-spacing: .05em;
}
.stats b { color: var(--gold); font-size: 1.15rem; margin-right: .35rem; }

/* Gumb in povezava sta v tem slogu ista stvar. Gumb za App Store je bil
   do izida igre `button`, od izida je `a` — slog se zato ni spremenil. */
.cta {
  display: inline-block;
  font: inherit;
  border: none;
  cursor: pointer;
  margin-top: 1.2rem;
  padding: .7rem 1.4rem;
  background: var(--gold);
  color: var(--outline);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 4px 0 #b8891a;
  transition: transform .12s, box-shadow .12s;
}
.cta:hover { transform: translateY(2px); box-shadow: 0 2px 0 #b8891a; }
.cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* --- HUD ------------------------------------------------------------ */

#hud {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 5;
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 var(--outline);
  pointer-events: none;
}
#hud i { font-style: normal; color: var(--gold); }

/* HUD je `pointer-events: none`, da ne lovi klikov na svet; gumb si
   mora dovoljenje vrniti sam, sicer ga ni mogoce pritisniti. */
.hud-btn {
  pointer-events: auto;
  font: inherit;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--outline) 70%, transparent);
  border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 2px;
  padding: .25rem .6rem;
  cursor: pointer;
}
.hud-btn[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.hud-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hud-right { display: flex; gap: 1.4rem; }
.hud-coins { transition: transform .12s ease-out; display: inline-block; }
.hud-coins.pop { animation: coinpop .28s ease-out; }
@keyframes coinpop {
  0%   { transform: scale(1) }
  40%  { transform: scale(1.32); filter: brightness(1.5) }
  100% { transform: scale(1) }
}

/* --- povezave na vrhu ------------------------------------------------
   Stojijo POD HUD in nad svetom. Pravno besedilo in podpora morata biti
   dosegljiva takoj, ne sele po prevozeni poti do zadnje kartice —
   recenzent App Store in obiskovalec, ki isce pomoc, ne vrtita kolesca.
   --------------------------------------------------------------------- */

#topnav {
  position: fixed;
  top: calc(max(1rem, env(safe-area-inset-top)) + 2.2rem);   /* pod HUD */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .9rem;
  /* Sidro `left: 50%` pomeni, da je za samodejno sirino na voljo samo
     DESNA polovica okna — brez `max-content` se je zadnja povezava na
     telefonu prelomila v drugo vrstico in navigacija je pojedla nebo. */
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: 0 .7rem;
  background: color-mix(in srgb, var(--outline) 62%, transparent);
  border: 2px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 2px;
  backdrop-filter: blur(3px);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Prst ni miskin kazalec: sama vrstica meri 16 px, navpicni odmik jo
   dvigne cez 40 px, ne da bi se videz spremenil. */
#topnav a {
  color: var(--ink);
  opacity: .72;
  text-decoration: none;
  padding: .7rem 0;
  white-space: nowrap;
}
#topnav a:hover { opacity: 1; color: var(--gold); }
#topnav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

#banner {
  position: fixed;
  top: 24%; left: 50%;
  transform: translate(-50%, -50%) scale(.9);
  z-index: 6;
  padding: .5rem 1.6rem;
  font-size: clamp(1rem, 3vw, 1.6rem);
  letter-spacing: .28em;
  color: var(--gold);
  background: color-mix(in srgb, var(--outline) 85%, transparent);
  border: 2px solid var(--gold);
  text-shadow: 0 2px 0 var(--outline);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s, transform .35s;
}
#banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Namig stoji NAD gumboma za voznjo in se umakne, ko obiskovalec zapelje;
   gumba ostaneta. Prva razlicica ga je imela v isti vrstici kot gumba —
   na 375 px sirine so si trije predmeti delili prostor, ki zadosca dvema. */
#hint {
  position: fixed;
  bottom: calc(max(1.2rem, env(safe-area-inset-bottom)) + 3.6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: .35rem;
  width: max-content;              /* isto sidro, isti razlog kot #topnav */
  max-width: calc(100vw - 8rem);   /* med gumboma za voznjo */
  text-align: center;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 var(--outline);
  animation: pulse 2.6s ease-in-out infinite;
  pointer-events: none;
  transition: opacity .4s;
}
.hint-main { font-size: clamp(1.05rem, 3vw, 1.45rem); color: var(--gold); }
/* Vrstica s tipkama je edino mesto, kjer stran pove, da se da voziti tudi
   brez kolesca; v drobnem tisku je bila napotek, ki ga nihce ne prebere.
   Spodnja meja steje, ne zgornja: na telefonu je `vw` premajhen in clamp
   pade nanjo. */
.hint-keys { font-size: clamp(.9rem, 2.4vw, 1.1rem); letter-spacing: .14em; }
#hint kbd {
  font: inherit;
  padding: .1rem .4rem;
  border: 2px solid color-mix(in srgb, var(--ink) 45%, transparent);
  border-radius: 2px;
}
#hint.gone { opacity: 0; }
@keyframes pulse { 0%, 100% { opacity: .38 } 50% { opacity: .92 } }

/* --- krmilo ---------------------------------------------------------- */

/* Gumba stojita v spodnjih kotih, ne na sredini: sredina je motorist in
   gumb cez glavnega lika je gumb, ki zakriva prav tisto, kar krmili. */
#drive {
  position: fixed;
  left: 0; right: 0;
  bottom: max(1.2rem, env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  justify-content: space-between;
  padding: 0 max(1rem, env(safe-area-inset-left));
  pointer-events: none;
}
.drive-btn {
  pointer-events: auto;
  touch-action: manipulation;      /* brez cakanja na dvojni tap */
  -webkit-user-select: none;
  user-select: none;
  width: 3.4rem;
  height: 3.4rem;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink);
  background: color-mix(in srgb, var(--outline) 72%, transparent);
  border: 2px solid color-mix(in srgb, var(--ink) 26%, transparent);
  border-radius: 2px;
  backdrop-filter: blur(3px);
  cursor: pointer;
  transition: transform .1s, border-color .1s, color .1s;
}
.drive-btn:hover { border-color: var(--gold); color: var(--gold); }
.drive-btn.on {
  border-color: var(--gold);
  color: var(--gold);
  transform: scale(.94);
  background: color-mix(in srgb, var(--gold) 18%, var(--outline));
}
.drive-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* --- pisava iz igre -------------------------------------------------- */

/* Besedilo ostane v DOM za bralnik zaslona in iskanje po strani, le
   vidno se skrije. `display:none` bi ga vzel tudi njim. */
.pf-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pf { position: relative; line-height: 0; }
.pf-canvas { image-rendering: pixelated; max-width: 100%; height: auto; }

/* --- garaza ---------------------------------------------------------- */

/* Garaza mora stati NAD motorjem, ne cez njega. Barvanje, ki zakrije
   prav tistega motorja, ki ga barvas, je gumb brez odgovora — celotna
   poanta te sekcije je, da se vozilo prebarva pred tvojimi ocmi. */
/* Sidrana je na VRH okna, ne na sredino: pri sredinskem sidru bi jo na
   nizjem zaslonu odrezalo zgoraj, ker je visja od ostalih plosc. */
/* Velja za VSE siroke plosce, ne le za garazo: siroke so tudi najvisje
   (lestvica, Premium, zakljucek), in sredinsko sidro jih na nizkem
   zaslonu dvigne pod HUD in pod povezave na vrhu. Pasica cez naslov je
   naslov, ki ga ni mogoce prebrati. Zgornje sidro je zato skupno. */
.panel-wide {
  top: max(6.2rem, 12vh);
  transform: translateX(-50%);
  /* Visina se meri OD SIDRA navzdol in konca nad gumboma za voznjo.
     Skupnih 86vh je pri zgornjem sidru premalo natancno: na nizkem oknu
     je plosca segla 12 px cez spodnji rob in cez gumba. */
  max-height: calc(100vh - max(6.2rem, 12vh) - 5rem);
}

.g-panel { margin-top: 1rem; }

/* Izbira vozila. Prej sta bila to dva boksa v garazni sobi za zadnjim
   svetom; odkar sobe ni, stoji izbira tam, kjer je barvanje. Vsak gumb
   kaze SVOJE vozilo v SVOJIH barvah — druga izbira mora biti vidna,
   sicer je to zaprta soba in ne garaza. */
.g-rides { display: flex; gap: .5rem; margin-bottom: .8rem; }
.g-ride {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .7rem .3rem .4rem;
  font: inherit; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 2px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 2px;
  cursor: pointer;
  opacity: .62;
}
.g-ride.on { opacity: 1; border-color: var(--gold); color: var(--gold); }
.g-ride:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.g-thumb { image-rendering: pixelated; height: 26px; width: auto; }

/* --- lestvica -------------------------------------------------------- */

.board { margin-top: 1rem; }
.board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.board-tabs { display: flex; gap: .4rem; }
.board-tab, .board-load {
  font: inherit; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 2px;
  padding: .45rem .8rem;
  cursor: pointer;
}
.board-tab.on { border-color: var(--gold); color: var(--gold); }
.board-load { background: none; border-color: var(--gold); color: var(--gold); }
.board-load:disabled { opacity: .5; cursor: default; }
.board-tab:focus-visible, .board-load:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}

.board-note { margin-top: .6rem; font-size: .7rem; opacity: .6; letter-spacing: .06em; }
.board-note.bad { color: var(--gold); opacity: .95; }

/* Seznam ima svojo visino in svoj drsnik: deset vrstic bi plosco raztegnilo
   cez cel telefon in motorist pod njo bi izginil. Verige navzgor tudi tu ne
   prekinjamo — kolesce nad kratkim seznamom mora voziti svet. */
.board-list {
  list-style: none;
  margin-top: .6rem;
  max-height: min(38vh, 320px);
  overflow-y: auto;
}
.b-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .15rem .35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  font-size: .78rem;
  letter-spacing: .06em;
}
.b-rank { width: 1.6rem; text-align: right; opacity: .55; font-size: .72rem; }
/* Prvi trije nosijo barvo medalje — isti trije toni kot oder v igri. */
.b-medal-1 .b-rank { color: var(--gold); opacity: 1; }
.b-medal-2 .b-rank { color: #d6dbeb; opacity: 1; }
.b-medal-3 .b-rank { color: #d18a4a; opacity: 1; }
.b-bike { image-rendering: pixelated; height: 24px; width: auto; flex: none; }
.b-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-crown { color: var(--gold); font-size: .8rem; }
.b-score { color: var(--gold); font-variant-numeric: tabular-nums; }

.g-zones { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.g-zone {
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .6rem;
  font: inherit; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.g-zone.on { border-color: var(--gold); }
.g-zone:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.g-chip {
  width: .8rem; height: .8rem;
  border: 1px solid var(--outline);
  display: inline-block;
}

.g-grid {
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  gap: 3px;
}
.g-swatch {
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 1px;
  padding: 0;
  cursor: pointer;
  min-width: 0;
}
/* Zlati obroc pomeni "to je izbrano" — isti znak kot v igri. */
.g-swatch.on { border-color: var(--gold); transform: scale(1.18); z-index: 1; }
.g-swatch:hover { transform: scale(1.12); }
.g-swatch:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.g-reset {
  margin-top: .8rem;
  padding: .4rem .8rem;
  font: inherit; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 2px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: 2px;
  cursor: pointer;
}
.g-reset:hover { border-color: var(--gold); color: var(--gold); }

@media (max-width: 640px) {
  .g-grid { grid-template-columns: repeat(9, 1fr); }
}

/* --- noga zakljucne kartice ------------------------------------------ */

.stats-wide { grid-template-columns: 1fr; }
.stats-wide li { display: flex; align-items: baseline; gap: .5rem; }

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.2rem;
  margin-top: .6rem;
  padding-top: .4rem;
  border-top: 2px solid color-mix(in srgb, var(--ink) 14%, transparent);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Prst ni miskin kazalec. Vrstica besedila je visoka 18 px, kar je pod
   vsakim priporocilom za dotik; navpicni odmik jo dvigne na ~44 px, ne
   da bi se videz spremenil. */
.foot-links a {
  color: var(--ink);
  opacity: .75;
  text-decoration: none;
  padding: .75rem 0;
  display: inline-block;
}
.foot-links a:hover { opacity: 1; color: var(--gold); text-decoration: underline; }
.foot-links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.foot-note { margin-top: .9rem; font-size: .72rem; opacity: .6; line-height: 1.8; }
/* Naslov e-poste je edina povezava v nogi zunaj `.foot-links`; brez
   odmika je visok 17 px, kar je pod vsakim priporocilom za dotik. */
.mail-link { color: var(--gold); padding: .5rem 0; display: inline-block; }

/* --- brez JS -------------------------------------------------------- */

.noscript {
  position: relative; z-index: 9;
  max-width: 34rem; margin: 22vh auto; padding: 2rem; text-align: center;
}
/* Videz naslova brez ranga naslova: prva raven je ze na zacetni kartici. */
.noscript-mark {
  font-size: clamp(2rem, 7vw, 3.6rem);
  letter-spacing: .18em;
  line-height: 1.05;
  color: var(--gold);
  text-shadow: 0 3px 0 var(--outline);
  margin-bottom: 1rem;
}
.noscript a { color: var(--gold); }

/* ---------------------------------------------------------------------
   Zmanjsano gibanje.

   Vodoravna voznja JE ta stran, zato je ni mogoce samo upocasniti —
   brez gibanja mora postati navaden navpicen dokument. Platno takrat
   miruje in kaze en sam, staticen svet; vsebina se zlozi pod njim.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body { height: auto !important; overflow-x: hidden; }

  #scene { position: fixed; opacity: .35; }
  /* Voznja je tu navpicna in native; vodoravno krmilo nima kaj krmiliti. */
  #hint, #banner, #drive { display: none; }

  #rail {
    position: relative;
    transform: none !important;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    padding: 6rem 1rem;
    width: 100%;
  }
  .panel {
    position: relative;
    top: auto; left: auto !important;
    transform: none;
    width: min(34rem, 92vw);
    /* Dokument tece navpicno; plosca ne rabi svojega drsnika. */
    max-height: none;
    overflow: visible;
  }
}

/* --- ozji zasloni --------------------------------------------------- */

@media (max-width: 640px) {
  :root { --panel-w: 84vw; }
  .stats { grid-template-columns: 1fr; }
  .panel { padding: 1rem 1.1rem; }
  /* Na ozkem zaslonu ostanejo v navigaciji same prve besede. Stiri polna
     imena se v eno vrstico ne prilegajo, dve vrstici pa bi pojedli nebo. */
  .nav-more { display: none; }
  #topnav { gap: 0 .7rem; font-size: .6rem; }
}


/* --- telefon pokoncno -------------------------------------------------

   Vodoravna voznja na pokoncnem telefonu ne deluje, in ne zaradi sloga.
   Merilo, ki drzi motorja dovolj velikega, pusti v kadru 305 od 874
   igrinih pikslov — tretjino polja — kartica pa je siroka 84 % zaslona.
   V tej tretjini kartica ni vec predmet, ki priplava mimo: je zid, ki se
   prireze z leve in odreze z desne, in besedilo je berljivo le tisti
   trenutek, ko je natanko na sredini.

   Zato je pokoncni telefon NAVPICNA stran. Kartice stojijo ena pod
   drugo in jih pomika brskalnik sam, z dokumentom; svet za njimi pa vozi
   naprej po ISTEM scrollu. Motor ni zamrznjen — vozi, skace, pobira
   cekine in menja svetove, medtem ko bereš, HUD pa steje razdaljo.

   Spodnja tretjina zaslona ostane prazna. Tam sta tla in motor, in
   glavni lik ne sme brati drobnega tiska izza kartice.

   Namizje in tablica se ne dotakneta, ležeci telefon tudi ne: tam je
   celo polje v kadru in vodoravna voznja je pravo branje.

   `no-preference` je del pogoja: kdor je izklopil gibanje, ima svojo
   postavitev nekaj vrstic visje in ta blok je ne sme povoziti. Isti niz
   stoji v `site.js`.
   --------------------------------------------------------------------- */

@media (max-width: 700px) and (orientation: portrait)
   and (prefers-reduced-motion: no-preference) {

  /* Tir ne visi vec na oknu, ampak na dokumentu. Kartice se pomikajo
     native, z drsenjem strani — v vsakem okvirju ni kaj transformirati,
     in osem plosc z `backdrop-filter` ne potuje vec cez platno. */
  #rail {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: auto;
    transform: none !important;
    will-change: auto;
  }

  /* Navpicni polozaj vsake kartice piše `site.js`: vsaka stoji na svojem
     delezu poti, zato prispe pred oci takrat, ko svet pripelje mimo.
     Tu je vse ostalo. */
  .panel, .panel-hero, .panel-wide {
    left: 50%;
    transform: translateX(-50%);
    width: min(30rem, 92vw);
    /* BREZ svojega drsnika in brez zgornje visine.
       Notranji drsnik je iz vodoravne postavitve, kjer je bil nujen:
       tam kartica visi na sredini okna in visoka nima kam. Tu se premika
       z dokumentom, zato ji ni treba drsati v sebi — samo prispeti mora.
       Isto pove veja za izklopljeno gibanje nekaj vrstic visje.

       Drsnik v kartici je na telefonu tudi skodljiv: kartica pokriva
       velik del zaslona, in poteg po njej premakne besedilo namesto
       sveta — ukrade prav tisto gesto, s katero se vozi.

       Kar je previsoko za pas nad motorjem, torej sega v motorja. To ni
       izjema, ampak pravilo te strani: motorist ima svoje platno NAD
       karticami (`#hero`, z-index 3) in vozi pred besedilom tudi na
       namizju. Nic se ne skrije — kvecjemu motor za hip prevozi cez
       zadnje vrstice. */
    max-height: none;
    overflow: visible;
  }
  .panel { padding: 1rem 1.1rem; }

  /* Gumba za voznjo odpadeta: scroll JE krmilo in na telefonu ga ima
     vsak prst. Gumb, ki podvaja potezo, je samo se en predmet na
     zaslonu, ki ga je premalo. */
  #drive { display: none; }

  /* Namig o tipkah pripada napravi s tipkovnico. */
  .hint-keys { display: none; }
  #hint {
    max-width: calc(100vw - 2rem);          /* gumbov, ki sta ga stiskala, ni vec */
    bottom: max(1.2rem, env(safe-area-inset-bottom));
  }
  /* `pulse` piše `opacity` in animacija v kaskadi premaga navadno
     pravilo — brez ustavitve namig po prvem potegu NE izgine. */
  #hint.gone { animation: none; opacity: 0; }

  /* Pasica o svetu se umakne iz bralnega pasu na tla, v prostor, ki sta
     ga izpraznila gumba za voznjo. Napis cez odstavek, ki ga bereš, je
     napis, ki ga nihce ne prebere do konca. */
  #banner {
    top: auto;
    bottom: calc(max(1.2rem, env(safe-area-inset-bottom)) + 3.4rem);
    font-size: 1rem;
    letter-spacing: .2em;
    transform: translate(-50%, 0) scale(.9);
  }
  #banner.show { transform: translate(-50%, 0) scale(1); }

  .stats { grid-template-columns: 1fr; }
  .g-grid { grid-template-columns: repeat(9, 1fr); }
  .nav-more { display: none; }
  #topnav { gap: 0 .7rem; font-size: .6rem; }

  /* --- kar se v 55 dvh ne prilega -----------------------------------

     Bralni pas med povezavami in celado meri 472 px, kartica dobi 460.
     Garaza je merila 618 px in Premium 548 — oba sta dobila svoj drsnik,
     in kartica z drsnikom na telefonu ukrade potezo, s katero se vozi.
     Prostora ni od kod vzeti: zgoraj so povezave, spodaj je motorist.
     Zato gre stran besedilo, ne pa krmilo.
     ------------------------------------------------------------------ */

  /* Garaza: odstavek pove, da se motor prebarva, medtem ko je prst se
     na barvi. Po tej predelavi motor stoji 8 px pod kartico in to sam
     pokaze — stavek opisuje nekaj, kar se zgodi pred ocmi. (618 -> 466) */
  #p-garage p { display: none; }
  /* Odmik je locil widget od odstavka, ki ga ni vec. (466 -> 461) */
  #p-garage .g-panel { margin-top: 0; }
  #p-garage h2 { margin-bottom: .3rem; }         /* 461 -> 454 */
  /* Gumb Ponastavi OSTANE. Barvanje se shrani v `localStorage`, zato
     obiskovalca, ki motorja prebarva v nekaj groznega, ta barva pocaka
     tudi ob naslednjem obisku — tovarniskih barv pa v paleti nic ne
     oznacuje, zato jih sam ne najde nazaj. To je edina pot nazaj in za
     14 px je ni vredno vzeti; namesto tega se stisne. (454 -> 446) */
  #p-garage .g-reset { margin-top: .5rem; padding: .3rem .7rem; font-size: .6rem; }

  /* Premium: tretji odstavek pove, da placilo ne kupi prednosti. Isto
     obljubi ze zacetna kartica ("never pay-to-win"), zato je tu ponovitev
     in ne edini zapis. (548 -> 397) */
  #p-premium p:nth-of-type(3) { display: none; }
}


/* --- intro ------------------------------------------------------------
   Stoji v HTML in ne caka na JS. Nalozilnik, ki ga narise sele skripta,
   se prikaze natanko takrat, ko ni vec potreben.
   --------------------------------------------------------------------- */

#intro {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.1rem;
  background: #0d0a16;
  transition: opacity .55s ease, visibility .55s;
}
#intro.done { opacity: 0; visibility: hidden; }

.intro-mark {
  font-size: clamp(1.6rem, 6vw, 3rem);
  letter-spacing: .3em;
  color: var(--gold);
  text-shadow: 0 3px 0 var(--outline);
  animation: introPulse 1.6s ease-in-out infinite;
}
@keyframes introPulse { 0%,100% { opacity:.75 } 50% { opacity:1 } }

.intro-bar {
  width: min(16rem, 60vw);
  height: 10px;
  border: 2px solid color-mix(in srgb, var(--ink) 30%, transparent);
  padding: 2px;
}
.intro-bar i {
  display: block;
  height: 100%;
  width: 8%;
  background: var(--gold);
  transition: width .3s ease;
}
.intro-note {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .5;
}

/* --- obvestilo o skrivnosti ------------------------------------------ */

#toast {
  position: fixed;
  left: 50%;
  bottom: 12vh;
  transform: translate(-50%, 12px);
  z-index: 8;
  padding: .55rem 1.2rem;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  background: color-mix(in srgb, var(--outline) 88%, transparent);
  border: 2px solid var(--gold);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  #intro { display: none; }
  .intro-mark { animation: none; }
}