/* =====================================================================
   NODBLOCKS - skupni slog stirih strani: /nodblocks/ in tri pravne.

   Tu stoji samo tisto, kar je na vseh stirih ISTO: paleta, ploscica,
   napisi, seznami, noga. Kar je lastno eni strani (zaslon igre, kazalo ob
   strani, lestvica), stoji v tisti strani. Barve so barve Nodblocksa -
   iste kot v nb.js, ker ena paleta ne sme obstajati v dveh kopijah, ki se
   razideta ze pri prvem popravku.
   ===================================================================== */

:root{
  --void:#07060d; --pit:#0f0d16; --shade:#1a1721; --slate:#2b2637;
  --ash:#4a4360; --haze:#8a82a6;
  --cyan:#00eefc; --cyan1:#00a6bd; --cyan0:#06525e;
  --pink:#ff80e4; --lav:#ac89ff; --coral:#ff6e84; --white:#f5eefc;
  --ink:#b6afca;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--void)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0;padding:0}
body{min-height:100%;color:var(--ink);overflow-x:hidden;
  font:15px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  -webkit-text-size-adjust:100%}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
b,strong{color:var(--white);font-weight:400}
a{color:var(--cyan)}
a:focus-visible,button:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
/* Izrisan napis ima ob sebi isto besedo v span.sr - za bralnike, iskalnike
   in za tistega, ki mu skripta ne stece. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Polje blokov za stranjo in tancica cezenj: brez tancice bi besedilo
   lezalo na kamnu. */
#field{position:fixed;inset:0;z-index:-2}
.veil{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,6,13,.62),rgba(7,6,13,.88) 45%,rgba(7,6,13,.94))}

/* Ploscica: devetdelni okvir, ki ga nb.js naredi iz pikslov. Robu ne
   pripada barva - nosi jo samo vogalna kljukica. */
.panel{border:8px solid transparent;border-image:var(--fr) 4 fill stretch;
  padding:10px 18px 22px;margin:0 0 26px}
.panel.c{border-image:var(--fr-c) 4 fill stretch}
.panel.p{border-image:var(--fr-p) 4 fill stretch}
.panel.d{border-image:var(--fr-d) 4 fill stretch}

main{max-width:960px;margin:0 auto;padding:0 14px 40px}
section{scroll-margin-top:18px}
p{margin:0 0 14px}
h1,h2,h3{margin:0;font-weight:400;line-height:0}
h1[data-px],h2[data-px],h3[data-px],p[data-px],div[data-px]{line-height:0;margin:0 0 14px}
h3[data-px]{margin-top:26px}
.lead{color:var(--white)}
.dim{color:var(--haze)}
.cap{color:var(--ash);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:6px 0 0}

/* Gumb je ista ploscica kot vse ostalo, samo da vodi ven. */
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:22px 0 8px}
.btn{display:inline-block;border:8px solid transparent;
  border-image:var(--fr-c) 4 fill stretch;padding:10px 18px 12px;
  text-decoration:none;line-height:0;cursor:pointer;background:none;font:inherit}
.btn.q{border-image:var(--fr) 4 fill stretch}
.btn:hover{border-image:var(--fr-p) 4 fill stretch}

/* Kartice */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  margin:0 0 8px}
.card{border:8px solid transparent;border-image:var(--fr-d) 4 fill stretch;
  padding:12px 14px 16px}
.card canvas{margin:0 0 10px}
.card p{font-size:14px;margin:0}
.card .t{margin:0 0 8px}
.gest{display:flex;gap:12px;align-items:flex-start}
.gest canvas{flex:0 0 auto}
/* Stolpec ob glavi mora imeti SVOJO sirino in ne sirine svojega napisa:
   brez min-width:0 se stisne na platno naslova in ga potisne cez kartico. */
.gest>div{flex:1 1 0;min-width:0}
/* V kartici glava NE stoji ob besedilu: stolpec, ki ostane, je preozek za
   naslov in ta bi se moral pomanjsati pod merilo sosedov. */
.card .gest{display:block}
.card .gest canvas{margin:0 0 10px}

/* Seznami */
ul.list{list-style:none;margin:0 0 14px;padding:0}
ul.list li{padding-left:16px;position:relative;margin:0 0 3px}
ul.list li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;
  background:var(--cyan0)}
.two{display:grid;gap:6px 26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* Noga: podpis studia in edina pot domov. */
footer{max-width:960px;margin:0 auto;padding:0 14px 60px;text-align:center}
footer .home{display:inline-block;line-height:0;margin:26px 0 10px}
#menu{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;margin:8px 0 18px}
#menu a{line-height:0;text-decoration:none;padding:6px 0}
.legal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px}
.legal a{color:var(--haze);text-decoration:none}
.legal a:hover{color:var(--cyan)}
.legal a[aria-current]{color:var(--cyan)}
.fine{color:var(--ash);font-size:12px;line-height:1.7;max-width:620px;margin:0 auto}