/* =====================================================================
   NEXT STOP · tema za igru (sesija Dizajn, smjer A „Metro karta budućnosti”, PRETPOSTAVKA)
   Poslužitelj je sam umeće iza /igra.css (vidi next-igra/server.js, oznaka <!--TEMA-->).
   Prevodi Platformine klase na sustav dizajna iz /assets/igra.css (tokeni --ns-*).
   Svijetli i tamni način po postavci mobitela, ručno: <html data-tema="svijetla|tamna">.
   Kontrast WCAG AA provjeren (projects/NEXT-IGRA/dizajn/provjera/kontrast.md).
   ===================================================================== */

/* fontovi: varijabilni Archivo (težina 500 do 900, širina 75 do 125 posto) i IBM Plex Sans s ćirilicom */
@font-face { font-family: "Archivo"; src: url("fonti/archivo-var.woff2") format("woff2"); font-weight: 500 900; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonti/ibm-plex-sans-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonti/ibm-plex-sans-var-cyr.woff2") format("woff2"); font-weight: 400 700; unicode-range: U+0400-045F, U+2116; font-display: swap; }

/* ---------- Platformini tokeni, svijetli način (zadano kad mobitel nije u tamnom) ---------- */
:root {
  --ink: #101029; --violet: #8D4ACD; --electric: #8D4ACD; --lavanda: #EEE5F8;
  --bg: #FFFFFF; --s1: #F7F3FC; --s2: #EEE5F8; --s3: #DCD3EA; --rub: rgba(16, 16, 41, .10);
  --tekst: #101029; --tih: #5B5A7A; --tiho: #6E6D8C; --dobro: #0C855C; --lose: #C8243D;
  --naslov: "Archivo", "IBM Plex Sans", system-ui, sans-serif; --font: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --r: 18px; --sjena: 0 10px 28px -14px rgba(16, 16, 41, .35);
  --t-polje: #FFFFFF; --t-gumb-sjena: 0 10px 24px -10px rgba(141, 74, 205, .8); --t-lijevo: #0B6E8F; --t-desno: #833AC9; --t-veza: #DCD3EA;
  --t-logo: url("logo/next-stop-kompaktni.svg");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="svijetla"]) {
    --bg: #101029; --s1: #181838; --s2: #1E1E44; --s3: #2A2A55; --rub: rgba(255, 255, 255, .10);
    --tekst: #FFFFFF; --tih: #B4B3D6; --tiho: #8F8EB5; --dobro: #3DDC97; --lose: #FF6B80;
    --sjena: 0 10px 30px rgba(0, 0, 0, .35); --t-polje: #101029; --t-lijevo: #5FD0F5; --t-desno: #C4A2EC; --t-veza: #34345E;
    --t-logo: url("logo/next-stop-kompaktni-inverzni.svg");
    color-scheme: dark;
  }
}
:root[data-tema="tamna"] {
  --bg: #101029; --s1: #181838; --s2: #1E1E44; --s3: #2A2A55; --rub: rgba(255, 255, 255, .10);
  --tekst: #FFFFFF; --tih: #B4B3D6; --tiho: #8F8EB5; --dobro: #3DDC97; --lose: #FF6B80;
  --sjena: 0 10px 30px rgba(0, 0, 0, .35); --t-polje: #101029; --t-lijevo: #5FD0F5; --t-desno: #C4A2EC; --t-veza: #34345E;
  --t-logo: url("logo/next-stop-kompaktni-inverzni.svg");
  color-scheme: dark;
}

html, body { background: var(--bg); color: var(--tekst); -webkit-font-smoothing: antialiased; }
a { color: var(--t-desno); }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-weight: 900; letter-spacing: -.025em; }
h1 { font-stretch: 115%; font-size: clamp(30px, 9vw, 38px); line-height: 1; }

/* logo umjesto teksta NEXT? STOP (tekst ostaje za čitače zaslona) */
.logo-tekst { font-size: 0 !important; color: transparent; width: 132px; height: 22px; background: var(--t-logo) no-repeat left center / contain !important; }
.ucitavanje .logo-tekst { width: 220px; height: 34px; background-position: center !important; }
.tocke i, .tocke i:nth-child(2), .tocke i:nth-child(3) { background: var(--violet); }

/* zaglavlje i značke */
.znacka { background: var(--s2); border: 0; font-family: var(--naslov); font-weight: 800; font-size: 14px; padding: 0 12px; height: 36px; display: inline-flex; align-items: center; gap: 4px; }
.ikona-gumb { width: 44px; height: 44px; background: transparent; border: 0; color: var(--tekst); }

/* gumbi: puni ljubičasti, zaobljeni, bez 3D ruba */
.gumb { min-height: 58px; border-radius: 30px; background: var(--violet); color: #fff; font-weight: 800; font-size: 18px; box-shadow: var(--t-gumb-sjena); transition: transform .14s cubic-bezier(.22, 1, .36, 1); }
.gumb:active { transform: scale(.97); box-shadow: var(--t-gumb-sjena); }
.gumb.drugi { background: var(--s2); color: var(--tekst); border: 0; box-shadow: none; }
.gumb.drugi:active { box-shadow: none; }
.gumb.ljubicasti { background: var(--violet); box-shadow: var(--t-gumb-sjena); }
.gumb.mali { min-height: 44px; border-radius: 22px; }
.gumb.tekst { background: none; box-shadow: none; color: var(--tih); min-height: 44px; }

/* kartice */
.kartica { background: var(--s1); border: 0; border-radius: 20px; box-shadow: none; }
.hero { background: radial-gradient(110% 90% at 100% 0%, rgba(141, 74, 205, .28), transparent 62%), var(--s2); }
.hero .veliko { font-stretch: 120%; letter-spacing: -.04em; font-size: clamp(42px, 13vw, 54px); }
.oznaka { font-family: var(--naslov); font-weight: 700; font-stretch: 80%; font-size: 13.5px; letter-spacing: .16em; color: var(--t-desno); }

/* metro traka: ljubičasta NEXT linija, stanice u boji linije */
.metro .st { width: 18px; height: 18px; border-width: 3.5px; background: var(--bg); }
.metro .st.prazna { border-color: var(--t-veza); background: var(--bg); }
.metro .st.sada { transform: scale(1.3); box-shadow: 0 0 0 5px rgba(141, 74, 205, .3); border-color: var(--tekst); }
.metro .veza { height: 6px; background: var(--t-veza); }
.metro .veza.prosla { background: var(--violet); }

/* vrijeme */
.sat { height: 10px; background: var(--s3); }
.sat i { background: linear-gradient(90deg, #8D4ACD, #C4A2EC); }
.sat.hitno i { background: var(--lose); }

/* runda */
.linija-oznaka { font-family: var(--naslov); font-weight: 800; font-size: 15px; color: var(--tekst); }
.linija-oznaka::before { width: 16px; height: 16px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--c); }
.izlagac-traka { background: rgba(141, 74, 205, .14); border: 0; border-radius: 14px; }
.pitanje { font-weight: 800; font-size: clamp(23px, 7vw, 28px); line-height: 1.12; letter-spacing: -.02em; }
.unos { background: var(--t-polje); border: 3px solid var(--tekst); border-radius: 16px; font-weight: 600; font-size: 20px; color: var(--tekst); }
.unos:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(141, 74, 205, .25); }
.prijedlozi { gap: 0; border-radius: 18px; overflow: hidden; background: var(--s2); }
.prijedlozi button { background: transparent; border: 0; border-bottom: 1px solid var(--rub); border-radius: 0; min-height: 52px; color: var(--tekst); }
.prijedlozi button:last-child { border-bottom: 0; }
.prijedlozi button:active { background: var(--s3); }
.opcija { background: var(--bg); border: 3px solid var(--s3); border-radius: 18px; color: var(--tekst); min-height: 58px; }
.opcija.tocna { border-color: var(--dobro); background: rgba(14, 159, 110, .14); }
.opcija.kriva { border-color: var(--lose); background: rgba(218, 44, 70, .12); }
.vm .opcija { font-weight: 800; }

/* procjena: kliznik */
.procjena-broj { font-stretch: 115%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.klizac::-webkit-slider-runnable-track { background: linear-gradient(90deg, #8D4ACD, #C4A2EC); }
.klizac::-moz-range-track { background: linear-gradient(90deg, #8D4ACD, #C4A2EC); }
.klizac::-webkit-slider-thumb { width: 36px; height: 36px; margin-top: -13px; border: 4px solid var(--tekst); background: var(--bg); }
.klizac::-moz-range-thumb { border: 4px solid var(--tekst); background: var(--bg); }
.fino button { background: var(--s2); border: 0; width: 56px; height: 48px; color: var(--tekst); }

/* dilema */
.dilema-karta { background: var(--s2); border: 0; box-shadow: var(--sjena); }
.dilema-karta .lijevo { color: var(--t-lijevo); }
.dilema-karta .desno { color: var(--t-desno); }

/* rezultat runde i kraj partije */
.rezultat .bodovi { font-stretch: 120%; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.rezultat .bonus { color: var(--t-desno); }
.cinjenica { background: var(--s2); border-radius: 14px; }
.traka-posto { background: var(--s3); }
.mjesta div { background: var(--s2); border-radius: 16px; }
.mjesta b { font-stretch: 112%; }
.stanice-popis .tockica { width: 16px; height: 16px; box-shadow: 0 0 0 3px var(--bg); }

/* obrasci i odabir škole */
.drzave button, .popis-skola button { background: var(--bg); border: 3px solid var(--s3); color: var(--tekst); }
.drzave button.odabrano, .popis-skola button.odabrano { border-color: var(--violet); background: rgba(141, 74, 205, .14); }
.kod-oporavka { background: var(--s2); border-color: var(--violet); color: var(--tekst); }
.koraci i { background: var(--s3); } .koraci i.da { background: var(--violet); }
.greska-tekst { color: var(--lose); }

/* ljestvica: mjesta kao stanice */
.lj li { align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rub); }
.lj li::before { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: inline-grid; place-items: center; box-shadow: inset 0 0 0 3px var(--tekst); color: var(--tekst);
  font-family: var(--naslov); font-weight: 900; font-size: 16px; content: counter(lj); font-variant-numeric: tabular-nums; }
.lj li:first-child::before { background: var(--tekst); color: var(--bg); box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--violet); }
.tabovi { background: var(--s2); border-radius: 16px; padding: 4px; gap: 4px; }
.tabovi button { border: 0; background: transparent; color: var(--tih); font-family: var(--naslov); font-weight: 800; min-height: 44px; border-radius: 12px; }
.tabovi button.da { background: var(--bg); color: var(--tekst); border: 0; box-shadow: 0 2px 8px rgba(16, 16, 41, .14); }

/* karta budućnosti (Platformina) */
.karta-svg text { font-family: var(--naslov); font-weight: 700; }

/* preklop, poruka */
.preklop { background: rgba(16, 16, 41, .9); }
#toast { background: var(--tekst); color: var(--bg); border-radius: 16px; }
#toast { transform: translateX(-50%) translateY(calc(100% + 48px)); }
#toast.vidljiv { transform: translateX(-50%) translateY(0); }

/* ---------- v0.2: Potez, budžet, posljedice, nadimci, privole, sef, NEXT tip (Platformine klase) ---------- */
.situacija { background: #101029; color: #fff; border-radius: 18px; padding: 14px 16px; margin: 0 0 12px; font-family: var(--naslov); font-weight: 700; font-size: 17px; line-height: 1.32; }
:root[data-tema="tamna"] .situacija { background: var(--s2); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="svijetla"]) .situacija { background: var(--s2); } }
.budzet { background: var(--s2); border-radius: 16px; padding: 12px 14px; gap: 8px; }
.resurs { color: var(--tih); font-size: 14px; font-weight: 600; }
.resurs b { color: var(--tekst); font-family: var(--naslov); font-weight: 900; font-size: 15px; }
.tockice { gap: 4px; }
.tockice i { width: 14px; height: 10px; border-radius: 5px; background: var(--s3); }
.tockice i.puna { background: var(--violet); }
.potez-karte { gap: 10px; }
.potez-karta { background: var(--bg); border: 3px solid var(--s3); border-radius: 16px; color: var(--tekst); min-height: 116px; transition: transform .14s cubic-bezier(.22, 1, .36, 1), border-color .14s; }
.potez-karta b { font-weight: 800; font-size: 15px; }
.potez-karta span { color: var(--tih); font-size: 13px; }
.potez-karta small { color: var(--tekst); font-family: var(--naslov); font-weight: 800; }
.potez-karta.izabrana { border-color: var(--violet); background: rgba(141, 74, 205, .10); box-shadow: 0 0 0 4px rgba(141, 74, 205, .22); }
.potez-karta.ne-stane { opacity: .45; }
.posljedica { background: var(--s2); border-radius: 14px; border-left: 5px solid var(--violet); padding: 10px 14px; animation: ns-tema-spoji .52s cubic-bezier(.22, 1, .36, 1) both; }
.posljedica:nth-of-type(2) { animation-delay: .2s; } .posljedica:nth-of-type(3) { animation-delay: .4s; } .posljedica:nth-of-type(4) { animation-delay: .6s; }
.posljedica b { font-family: var(--naslov); font-weight: 800; }
.posljedica.plus { border-left-color: var(--dobro); } .posljedica.minus { border-left-color: var(--lose); }
@keyframes ns-tema-spoji { from { transform: translateY(16px) scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }
.cip { background: var(--bg); border: 2px solid var(--s3); color: var(--tekst); min-height: 44px; }
.cip.da { border-color: var(--violet); background: rgba(141, 74, 205, .14); }
.privole { background: var(--s2); border-radius: 16px; padding: 14px; gap: 12px; }
.kvacica { min-height: 44px; align-items: center; }
.kvacica input { width: 24px; height: 24px; accent-color: #8D4ACD; }
.kvacica small { color: var(--tih); }
.obavezno { color: var(--t-desno); }
.sef-slova { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 46px); gap: 6px; }
.sef-slova i { width: auto; height: 48px; border-radius: 12px; background: var(--bg); border: 2px solid var(--s3); color: var(--tiho); }
.sef-slova i.moje { background: var(--violet); border-color: var(--violet); color: #fff; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--violet); }
.kartica.tip { background: radial-gradient(120% 90% at 100% 0%, rgba(141, 74, 205, .32), transparent 62%), var(--s2); box-shadow: inset 0 0 0 3px rgba(141, 74, 205, .55); }
.kartica.tip h2 { font-stretch: 112%; font-size: 30px; letter-spacing: -.03em; }
.napredak { height: 10px; background: var(--s3); }
.napredak i { background: linear-gradient(90deg, #8D4ACD, #C4A2EC); }
.kartica.opasno { box-shadow: inset 0 0 0 2px var(--lose); }
.probni-baner { background: #FFF4CC; color: #5C4400; border: 0; border-radius: 14px; }
:root[data-tema="tamna"] .probni-baner { background: #3a2a00; color: #FFD23F; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="svijetla"]) .probni-baner { background: #3a2a00; color: #FFD23F; } }
@media (prefers-reduced-motion: reduce) { .posljedica { animation: none; } }