/* =====================================================================
   SLOG IZ IGRE - skupen /nodblocks/ in /accessibility.html.

   Barve, pisave in okvirji tu niso "po motivih" iOS igre: vzeti so iz
   ContentView.swift. Paleta je razdelek Design System Colors, okvirji so
   RoundedRectangle(cornerRadius:).stroke(...), pisava je .system(weight:
   .black), ravna senca pod gumbom je .shadow(radius: 0, y: 4). Kar je
   drugace, je drugace zato, ker brskalnik nima kamere - ne zato, ker bi
   se stran hotela drugace obleci.

   Slike ni nobene: vsak blok, obraz in znak je narisan s kodo.

   Datoteko nosi sest strani: podstran igre, izjava o dostopnosti, obe
   pravni strani, press kit in podpora. Kar je lastno eni sami (zaslon,
   crkovnik, stevec slicic), stoji v njeni skripti; tu je samo tisto, kar
   je na vseh isto.
   ===================================================================== */

:root{
  /* --- Design System Colors, ContentView.swift ------------------------
     let bgDark        = Color(red: 0.08, green: 0.08, blue: 0.10)
     let primaryPeach  = Color(red: 1.00, green: 0.45, blue: 0.35)
     let accentPurple  = Color(red: 0.55, green: 0.35, blue: 0.90)
     let accentGreen   = Color(red: 0.20, green: 0.85, blue: 0.40)
     let accentBlue    = Color(red: 0.15, green: 0.65, blue: 1.00)
     let vibrantYellow = Color(red: 0.95, green: 0.85, blue: 0.20)      */
  --bg:#14141a;
  --peach:#ff735a;
  --purple:#8c59e6;
  --green:#33d966;
  --blue:#26a6ff;
  --yellow:#f2d933;
  --amber:#ff9933;          /* konec preliva v napisu BLOCKS */
  --gray:#8e8e93;           /* SwiftUI .gray */

  /* Ploskve in robovi so razmerja bele - natanko tista, ki jih uporablja
     igra: .white.opacity(0.05) za polnilo, 0.15 in 0.2 za rob. */
  --fill:rgba(255,255,255,.05);
  --fill2:rgba(255,255,255,.10);
  --edge:rgba(255,255,255,.15);
  --edge2:rgba(255,255,255,.20);
  --dim:rgba(255,255,255,.60);
  --dim2:rgba(255,255,255,.80);

  /* Pisava: .system(...) je na Applu SF Pro, drugod pa sistemska - v obeh
     primerih tista, ki je ze v napravi. Nobene pisave se ne prenasa. */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
    "Segoe UI",Roboto,system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0;padding:0}
body{
  min-height:100%;background:var(--bg);color:var(--gray);overflow-x:hidden;
  font:500 16px/1.6 var(--sans);
  /* V igri stoji ZStack nad kamero, zato ozadje ni cisto ravno. Kamere tu
     ni; namesto nje stoji dvoje komaj vidnih luci v barvah menija. */
  background-image:
    radial-gradient(1100px 620px at 50% -180px,rgba(140,89,230,.16),transparent 70%),
    radial-gradient(760px 520px at 92% 380px,rgba(255,115,90,.09),transparent 70%);
  background-attachment:fixed;
}
/* Platna te strani se risejo v zaslonskih pikslih in jih brskalnik ne
   raztegne - znak studia v nogi pa je 73x28 in ga CSS poveca trikrat.
   Brez tega pravila bi ga brskalnik zmehcal in iz blokov bi ostala
   packa. Isto pravilo stoji na naslovnici in na /revrush/. */
canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:3px solid var(--peach);outline-offset:3px;border-radius:4px}
b,strong{color:#fff;font-weight:800}
/* Izrisan napis ima ob sebi isto besedo za bralnike in iskalnike. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------------------------------------------------------------------
   NAPISI
   Vsak naslov v igri je .system(weight: .black) z razmikom med crkami -
   tracking(2) do tracking(3). Tu je isto: 900 in letter-spacing.
   ------------------------------------------------------------------ */
h1,h2,h3{margin:0;font-weight:900;color:#fff;line-height:1.06}
h2{font-size:clamp(26px,5.2vw,34px);letter-spacing:1.6px;margin:0 0 12px}
h3{font-size:clamp(17px,3.4vw,20px);letter-spacing:1.2px;margin:30px 0 10px}
p{margin:0 0 14px}
.lead{color:#fff;font-weight:700}
.cap{color:var(--gray);font-size:12px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;margin:8px 0 0}

/* Stevilka razdelka - ista vloga kot "NEW ERA OF GAMING" nad naslovom v
   igri: 14, .black, tracking(3), v barvi razdelka. */
.num{font-size:13px;font-weight:900;letter-spacing:3px;text-transform:uppercase;
  color:var(--green);margin:0 0 10px}
.num.p{color:var(--peach)} .num.v{color:var(--purple)}
.num.b{color:var(--blue)}  .num.y{color:var(--yellow)}

main{max-width:940px;margin:0 auto;padding:0 16px 40px}
section{scroll-margin-top:20px}

/* ---------------------------------------------------------------------
   PLOSCE
   .background(Color.white.opacity(0.05)).cornerRadius(20)
   .overlay(RoundedRectangle(cornerRadius: 20).stroke(accent, lineWidth: 3))
   ------------------------------------------------------------------ */
.panel{background:var(--fill);border:3px solid var(--edge);border-radius:20px;
  padding:22px 24px 26px;margin:0 0 20px}
.panel.green{border-color:var(--green)}
.panel.peach{border-color:var(--peach)}
.panel.purple{border-color:var(--purple)}
.panel.blue{border-color:var(--blue)}
.panel.quiet{border-width:2px;border-color:var(--edge);background:rgba(255,255,255,.03)}

/* Kartica v mrezi: ista plosca, en radij manjsa - kot featureRow v igri. */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin:18px 0 8px}
.card{background:var(--fill);border:2px solid var(--edge);border-radius:16px;padding:16px 18px 18px}
.card p{font-size:14px;margin:0}
.card .t{font-size:14px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;
  color:#fff;margin:0 0 8px}
.card canvas{margin:0 0 12px;border-radius:10px}
.card.c1{border-color:rgba(140,89,230,.55)} .card.c1 .t{color:var(--purple)}
.card.c2{border-color:rgba(255,115,90,.55)} .card.c2 .t{color:var(--peach)}
.card.c3{border-color:rgba(255,255,255,.30)}
.card.c4{border-color:rgba(38,166,255,.55)}  .card.c4 .t{color:var(--blue)}
.card.c5{border-color:rgba(51,217,102,.55)}  .card.c5 .t{color:var(--green)}

/* ---------------------------------------------------------------------
   GUMBI
   menuButtonView: radij 16, rob 3, .black, tracking(1.5). Izbrana postavka
   se napolni, malce zraste in dobi ravno senco. Na strani je "izbrana"
   tista, nad katero je kazalec - kar je najblizje temu, kar v igri naredi
   pogled.
   ------------------------------------------------------------------ */
.btn{display:inline-block;font:900 16px/1 var(--sans);letter-spacing:1.5px;
  text-transform:uppercase;text-align:center;text-decoration:none;
  padding:19px 26px;border-radius:16px;border:3px solid var(--edge);
  background:var(--bg);color:var(--dim);cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),background-color .18s,
    color .18s,border-color .18s,box-shadow .18s}
.btn:hover,.btn:focus-visible{transform:scale(1.03);text-decoration:none;
  box-shadow:0 4px 0 rgba(0,0,0,.3)}
.btn.primary{border-color:var(--peach);color:var(--peach)}
.btn.primary:hover,.btn.primary:focus-visible{background:var(--peach);color:#000}
.btn.second{border-color:var(--purple);color:var(--purple)}
.btn.second:hover,.btn.second:focus-visible{background:var(--purple);color:#000}
.btn.third{border-color:var(--green);color:var(--green)}
.btn.third:hover,.btn.third:focus-visible{background:var(--green);color:#000}

/* Gumb v trgovino nosi barvo lestvice: rumena je v igri barva rezultata in
   je na tej strani edina, ki pomeni "tu je cilj". Sij je isti kot pod
   naslovom LEADERBOARD, zato sta napisa vidno ista poteza.
   Utrip je pocasno dihanje sija in ne migetanje besedila - pod kazalcem se
   ustavi, ker takrat gumb pozornost ze ima in bi mu nihanje samo jemalo
   trdnost. */
.btn.store{border-color:var(--yellow);color:var(--yellow);
  text-shadow:0 0 10px rgba(242,217,51,.5)}
.btn.store:hover,.btn.store:focus-visible{background:var(--yellow);color:#000;
  text-shadow:none}
@keyframes store{
  0%,100%{box-shadow:0 0 0 0 rgba(242,217,51,0)}
  50%{box-shadow:0 0 24px 2px rgba(242,217,51,.42)}
}
@media (prefers-reduced-motion:no-preference){
  .btn.store{animation:store 2.8s ease-in-out infinite}
  .btn.store:hover,.btn.store:focus-visible{animation:none}
}
.cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:26px 0 6px}
.cta .btn{min-width:min(100%,300px)}

/* ---------------------------------------------------------------------
   PRIHOD
   ------------------------------------------------------------------ */
.hero{max-width:940px;margin:0 auto;padding:34px 16px 6px;text-align:center}
.kicker{font-size:13px;font-weight:900;letter-spacing:3px;text-transform:uppercase;
  color:var(--green);margin:0 0 16px}
.kicker.p{color:var(--peach)} .kicker.v{color:var(--purple)}
.kicker.b{color:var(--blue)}  .kicker.y{color:var(--yellow)}

/* V prihodu je kicker prva vrstica strani in ne oznaka razdelka, zato nosi
   vec. Na drugih straneh ostane pri trinajstih. */
.hero .kicker{font-size:clamp(14px,4vw,17px);margin-bottom:18px}

/* Ime studia je povezava, ki ni videti kot povezava: barvo podeduje od
   vrstice, sij pa vzame iz nje same, da drzi v vseh stirih barvah kickerja.
   Diha pocasi - trikrat pocasneje od pike na znacki AUTOPILOT, ker to ni
   stanje, ampak samo vabilo. */
.kicker .studio{color:inherit}
.kicker .studio:hover,.kicker .studio:focus-visible{color:#fff;text-decoration:none}
@keyframes studio{
  0%,100%{opacity:1;text-shadow:0 0 14px currentColor}
  50%{opacity:.5;text-shadow:none}
}
@media (prefers-reduced-motion:no-preference){
  .kicker .studio{animation:studio 3.6s ease-in-out infinite}
  .kicker .studio:hover,.kicker .studio:focus-visible{animation:none}
}

/* Napis: bela NOD, prelivna BLOCKS, vijolicna senca zamaknjena za 4 - ista
   trojica kot v landingPageView. Stisnjene crke (tracking -1) so tisto,
   kar iz napisa naredi znak. */
.mark{position:relative;display:inline-block;line-height:.94;
  font-size:clamp(46px,13vw,72px);font-weight:900;letter-spacing:-1px;
  white-space:nowrap}
.mark .lay{display:block}
.mark .sh{position:absolute;left:4px;top:4px;color:rgba(140,89,230,.8);z-index:0;
  -webkit-user-select:none;user-select:none}
.mark .fr{position:relative;z-index:1}
.mark .nod{color:#fff}
.mark .blk{background:linear-gradient(135deg,var(--peach),var(--amber));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mark .sh .nod,.mark .sh .blk{color:inherit;background:none;-webkit-text-fill-color:currentColor}
.tag{font-size:clamp(15px,3.2vw,17px);font-weight:500;color:var(--gray);margin:14px 0 0}

/* Zaslon in obraz stojita drug ob drugem, dokler je prostor za oba. */
.stage{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;
  justify-content:center;margin:26px 0 0;text-align:left}

/* --- naprava ---------------------------------------------------------
   Ohisje je gamePlayingView: bgDark, nad njo glava z rezultatom in tremi
   gumbi, pod njo deska. Radij ohisja je vecji od radija deske, ker je v
   igri ohisje zaslon telefona in ne ploscica. */
.device{background:var(--bg);border:2px solid var(--edge);border-radius:26px;
  padding:14px 14px 16px;box-shadow:0 18px 44px rgba(0,0,0,.55)}
.dev-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin:0 0 12px}
.dev-head .mark{font-size:20px;letter-spacing:-.5px}
.dev-head .mark .sh{left:2px;top:2px}
.meters{display:flex;gap:16px;margin:6px 0 0}
.meter{display:flex;align-items:baseline;gap:6px}
.meter span{font-size:12px;font-weight:700;color:var(--gray);letter-spacing:.5px}
.meter b{font-size:20px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.meter.lv b{color:var(--green)}
.keys{display:flex;gap:10px;margin-left:auto}
/* Gumb 44x44, radij 12, rob 2 v svoji barvi - iz vrstice R / nota / pokal. */
.key{width:44px;height:44px;border-radius:12px;background:var(--fill);
  border:2px solid;display:flex;align-items:center;justify-content:center;
  font:900 20px/1 var(--sans);cursor:pointer;padding:0;
  transition:background-color .15s,transform .15s}
.key:hover{transform:scale(1.06);text-decoration:none}
.key.r{border-color:rgba(38,166,255,.8);color:var(--blue)}
.key.r:hover{background:rgba(38,166,255,.16)}
.key.tr{border-color:rgba(51,217,102,.5);color:var(--green);background:var(--fill2)}
.key.tr:hover{background:rgba(51,217,102,.18)}
.key svg{width:20px;height:20px;fill:currentColor}

/* Obraz v kotu glave: na sirokem zaslonu ga ni, ker obraz takrat stoji ob
   napravi. Okvir je isti modri kot na kartici spodaj, da se vidi, da gre
   za isto glavo in ne za drugo risbo. */
.pip{display:none}

/* Deska stoji sredi ohisja. Ohisje je siroko najmanj 244, ker toliko
   potrebuje glava; deska pa se meri po visini zaslona in je na nizkem
   zaslonu ozja od tega - takrat bi brez tega pravila stala ob levem
   robu in pustila za sabo prazen pas. */
#board{display:block;margin:0 auto;border-radius:12px;touch-action:manipulation}
.dev-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 2px 0}

/* Znacka stanja: v igri je stanje pisano z barvo, ne z besedo - tu je oboje,
   ker stran gleda tudi tisti, ki igre se ni videl. */
.badge{font:900 11px/1 var(--sans);letter-spacing:2px;text-transform:uppercase;
  color:var(--green);border:2px solid rgba(51,217,102,.5);border-radius:999px;
  padding:7px 12px;background:rgba(51,217,102,.10);white-space:nowrap}
.badge .dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--green);margin-right:7px;vertical-align:1px}
@media (prefers-reduced-motion:no-preference){
  .badge .dot{animation:pulse 1.8s ease-in-out infinite}
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* Kretnja, ki jo obraz PRAV ZDAJ dela: prizge se tista, ki je stroj potegnil.
   Isti trije pragovi kot v renderer(_:didUpdate:). */
.gests{display:flex;gap:6px;flex-wrap:wrap}
.gest{font:800 9px/1 var(--sans);letter-spacing:1.1px;text-transform:uppercase;
  color:rgba(255,255,255,.28);border:2px solid rgba(255,255,255,.10);
  border-radius:8px;padding:6px 7px;transition:color .12s,border-color .12s,background-color .12s}
.gest.on{color:#000;background:var(--blue);border-color:var(--blue)}
.gest.on.p{background:var(--peach);border-color:var(--peach)}

/* --- obraz -----------------------------------------------------------
   Isti obraz iz blokov, ki stoji na /info/ - modri kvadrat, ki mezi, dvigne
   obrvi in odpre usta. Tam sledi kazalcu; tu sledi kosu, ki pada. */
.facecard{background:var(--fill);border:3px solid rgba(38,166,255,.45);
  border-radius:20px;padding:18px;width:min(100%,272px);text-align:center}
.facecard canvas{margin:0 auto 12px}
.facecard .t{font-size:13px;font-weight:900;letter-spacing:2px;text-transform:uppercase;
  color:var(--blue);margin:0 0 6px}
.facecard p{font-size:13px;margin:0;line-height:1.55}
.legend{list-style:none;margin:14px 0 0;padding:0;text-align:left}
.legend li{font-size:12.5px;font-weight:700;color:var(--dim);padding:5px 0 5px 16px;position:relative}
.legend li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:7px;
  border-radius:2px;background:var(--blue)}

/* --- stevilke --------------------------------------------------------
   Ista vrsta kot statRow v igri: stevilka .black v barvi, pod njo oznaka. */
.stats{list-style:none;display:grid;gap:12px;padding:0;margin:26px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.stats li{background:var(--fill);border:2px solid var(--edge);border-radius:16px;
  padding:16px 10px 14px;text-align:center}
.stats b{display:block;font-size:30px;font-weight:900;line-height:1;margin:0 0 8px;
  font-variant-numeric:tabular-nums}
.stats span{font-size:11px;font-weight:800;letter-spacing:1.6px;color:var(--gray)}
.stats .c{color:var(--blue)} .stats .p{color:var(--peach)}
.stats .v{color:var(--purple)} .stats .g{color:var(--green)}

/* ---------------------------------------------------------------------
   VITRINE IN SEZNAMI
   ------------------------------------------------------------------ */
.art{margin:20px 0 6px;text-align:center}
.art canvas{margin:0 auto;max-width:100%;height:auto;border-radius:12px}
.two{display:grid;gap:10px 28px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
ul.list{list-style:none;margin:0 0 14px;padding:0}
ul.list li{position:relative;padding:3px 0 3px 18px;font-size:14.5px}
ul.list li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:7px;
  border-radius:2px;background:var(--peach)}
.t{font-size:14px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:#fff}

/* Vrstica s kretnjo: glava levo, razlaga desno - featureRow iz igre. */
.row{display:flex;gap:14px;align-items:flex-start}
.row>div{flex:1 1 0;min-width:0}
.row canvas{flex:0 0 auto;border-radius:10px}

/* Video: ploscica z naslovom in povezavo, brez vdelanega predvajalnika. */
.vid{background:var(--fill);border:2px solid var(--edge);border-radius:16px;
  padding:16px 18px;margin:0 0 12px}
.vid .t{margin:0 0 8px;color:var(--blue)}
.vid.p .t{color:var(--peach)}
.vid p{font-size:14px;margin:0 0 10px}
.vid a{font-size:12px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase}

/* Lestvica: leaderboardOverlay - prvo mesto ima rob v breskovi in debelejsi
   rob od ostalih, tako kot v igri. */
#board-list{list-style:none;margin:16px 0 0;padding:0}
#board-list li{display:flex;align-items:center;gap:14px;margin:0 0 8px;
  padding:12px 16px;border-radius:16px;background:var(--fill);
  border:1px solid rgba(255,255,255,.10)}
#board-list li.top3{border-color:rgba(255,255,255,.5);background:var(--fill2)}
#board-list li.first{border:3px solid var(--peach)}
#board-list .r{width:2.6em;font-size:16px;font-weight:900;color:var(--gray);text-align:right}
#board-list .n{flex:1;font-size:16px;font-weight:900;letter-spacing:2px;color:var(--dim2)}
#board-list li.top3 .n{color:#fff;font-size:20px}
#board-list .s{font-size:18px;font-weight:900;color:rgba(255,115,90,.7);
  font-variant-numeric:tabular-nums}
#board-list li.top3 .s{color:#fff;font-size:22px}
#board-list li.first .s{color:var(--peach)}
/* Naslov lestvice je v igri edini napis v pisalnem stroju in v rumeni. */
.lb-title{font:900 clamp(24px,5vw,32px)/1 var(--mono);letter-spacing:2px;
  color:var(--yellow);text-shadow:0 0 10px rgba(242,217,51,.5);margin:0 0 12px}
#lb-state{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:1px;
  color:var(--gray);text-transform:uppercase;margin:12px 0 0}

.credits{font-size:13.5px;margin:0 0 6px}
.credits b{color:var(--blue);font-weight:900}

/* ---------------------------------------------------------------------
   NOGA
   "© 2026 KRULZ GAMES" je v igri 12, .black, bela z 0.2 - podpis in ne
   napis. Tu je isto, pod njim pa pot na ostale strani.
   ------------------------------------------------------------------ */
footer{max-width:940px;margin:0 auto;padding:14px 16px 64px;text-align:center}
#menu{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  max-width:660px;margin:26px auto 22px}
#menu .btn{font-size:14px;padding:17px 20px}
#menu .btn[aria-current]{border-color:var(--peach);color:var(--peach)}
.legal{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:0 0 18px}
.legal a{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--gray)}
.legal a:hover{color:#fff}
.legal a[aria-current]{color:var(--peach)}
/* Znak studia v nogi - ista mera in isti odmik kot v nogi /revrush/. */
.home{display:inline-block;margin:26px 0 0;padding:8px;line-height:0}

.sig{font-size:12px;font-weight:900;letter-spacing:2px;color:rgba(255,255,255,.2);
  margin:10px 0 10px}
.fine{font-size:12px;line-height:1.7;color:rgba(255,255,255,.28);max-width:640px;margin:0 auto}

@media (max-width:640px){
  .panel{padding:18px 16px 22px;border-radius:18px}
  .stage{gap:16px}
  .facecard{width:100%}
  .row{display:block}
  .row canvas{margin:0 0 12px}

  /* --- ozek zaslon: obraz gre v glavo naprave ------------------------
     Kartica z obrazom se tu postavi pod napravo in obraz na njej pade
     cez rob pogleda: kdor gleda desko, obraza ne vidi vec in deska je
     videti, kot da pada sama od sebe. Zato glava naprave postane vrsta
     z dvema stolpcema - levo znak in rezultat, desno obraz - obraz pa
     ostane na zaslonu ves cas, ko je na njem deska. Kartica spodaj
     obdrzi besedilo in izgubi platno; "The head above" v njej drzi
     naprej, ker je glava se vedno nad njo. */
  .dev-head{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:10px;align-items:stretch}
  .dev-head .hud{grid-column:1;min-width:0;display:flex;
    flex-direction:column;justify-content:space-between}
  .dev-head .pip{grid-column:2}
  /* Gumba se umakneta obrazu, ker bi ga sicer stala vrstice v glavi in
     bi zaradi nje deska padla nizje, kot sega zaslon. Nobeden od njiju
     ni izhod v sili: prikaz se po koncu igre sam zacne znova, lestvica
     pa stoji nizje na isti strani. */
  .dev-head .keys{display:none}
  /* Znak v glavi je tu drugic - prvic stoji kot naslov strani tik nad
     napravo -, zato se umakne v manjso mero in prepusti prostor obrazu. */
  .dev-head .mark{font-size:17px}
  /* Rezultat stoji pokonci, ker je stolpec ob obrazu preozek za obe meri
     v vrsti. Oznaka in stevilka sta svoj stolpec, da se stevilki poravnata
     druga pod drugo - tako kot v glavi igre. */
  .meters{display:grid;grid-template-columns:auto auto;justify-content:start;
    align-items:baseline;gap:6px 12px;margin:10px 0 0}
  .meters .meter{display:contents}
  .meters .meter span{font-size:11px}
  .meters .meter b{font-size:18px;line-height:1.2}

  .pip{display:block;text-align:center;background:var(--fill);
    border:2px solid rgba(38,166,255,.45);border-radius:14px;
    padding:6px 6px 5px}
  .pip canvas{display:block;margin:0 auto}
  .pip span{display:block;font:800 9px/1 var(--sans);letter-spacing:1.1px;
    color:var(--blue);margin:5px 0 0}

  /* Platno na kartici molci, ker isti obraz ze stoji v glavi naprave. */
  .facecard canvas{display:none}
}

/* ---------------------------------------------------------------------
   IZJAVA O DOSTOPNOSTI
   Ista paleta in isti okvirji; drugacen je samo material, ki ga nosita.
   ------------------------------------------------------------------ */
.top{max-width:940px;margin:0 auto;padding:30px 16px 6px}
.crumb{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.28);margin:0 0 20px}
.crumb a{color:var(--gray)}
.crumb a:hover{color:#fff;text-decoration:none}
.top h1{font-size:clamp(34px,8vw,52px);letter-spacing:2px;margin:12px 0 16px}
.top .lead{max-width:640px;font-size:17px}

/* Ostevilcen korak: stevilka je stolpec zase, da se besedilo pod njo ne
   zamakne - ista vrsta kot v igri, kjer stevilka stoji ob naslovu. */
.qa{display:flex;gap:16px;align-items:flex-start}
.qa .no{flex:0 0 auto;font-size:26px;font-weight:900;color:var(--blue);
  line-height:1.1;margin:0;font-variant-numeric:tabular-nums;min-width:1.6em}
.qa>div{flex:1 1 0;min-width:0}
.qa h2{font-size:clamp(19px,3.6vw,23px);letter-spacing:1.2px;margin:0 0 10px}
.step{background:var(--fill);border:2px solid var(--edge);border-radius:16px;
  padding:16px 18px;margin:0 0 12px}
.step:last-child{margin-bottom:0}
.step h3{font-size:15px;letter-spacing:1.2px;margin:0 0 8px}
.step p{font-size:14.5px;margin:0}
.step p+p{margin-top:10px}
.mail{margin:16px 0 0}
.mail a{font-size:16px;font-weight:900;letter-spacing:1px}

/* ---------------------------------------------------------------------
   CRKOVNIK
   letterBox(index:) iz igre: 50x60, radij 10, pisalni stroj .black 32.
   Izbrano mesto je polno in crno na cijan, z modrim sijem okoli; ostala
   so bela 0,15 z robom bele 0,3.
   ------------------------------------------------------------------ */
.typer{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:20px 0 6px}
.slots{display:flex;gap:8px}
.slot{width:clamp(38px,11vw,50px);height:clamp(46px,13vw,60px);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font:900 clamp(22px,6vw,32px)/1 var(--mono);
  background:var(--edge);color:#fff;border:2px solid rgba(255,255,255,.3);
  transition:background-color .1s,color .1s,border-color .1s,box-shadow .1s}
.slot.on{background:var(--blue);color:#000;border-color:#fff;
  box-shadow:0 0 12px rgba(38,166,255,.6)}
.slot.set{background:rgba(51,217,102,.16);border-color:rgba(51,217,102,.6);color:var(--green)}

/* ---------------------------------------------------------------------
   PRAVNE STRANI, PRESS KIT IN PODPORA
   Tri strani, ki se ne igrajo, in ena, ki je seznam dejstev. Isti okvirji
   in ista pisava; drugacno je samo to, da tu nic ne pade in nic ne utripa.
   ------------------------------------------------------------------ */
.stamp{font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--gray);margin:0}
/* Oznaka v seznamu je nosilec vrstice, zato nosi barvo razdelka. */
ul.list li b{color:var(--blue);font-weight:900}

/* Specifikacija: oznaka NAD vrednostjo, ker so oznake kratke in bi v
   stolpcu ob vrednosti pustile prazno polovico vrstice. */
.facts{display:grid;gap:18px 26px;margin:10px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.facts div{min-width:0}
.facts dt{font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gray);margin:0 0 5px}
.facts dd{margin:0;color:#fff;font-size:14.5px;font-weight:700;line-height:1.5;
  overflow-wrap:anywhere}

/* Stevec: edina stevilka, ki na strani o zasebnosti kaj pomeni, je nic. */
.meter{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin:20px 0 0}
.meter dl{margin:0;display:grid;grid-template-columns:auto auto;gap:8px 20px;
  align-items:center}
.meter dt{font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gray)}
.meter dd{margin:0;color:#fff;font-size:18px;font-weight:900;
  font-variant-numeric:tabular-nums}
.meter dd.zero{color:var(--green)}