@charset "UTF-8";
@import url("/static/css/fonts.css");

/* ═══════════════════════════════════════════════════════════════
   OBRAZAC MIL-15
   Igra nije ekran nego OBRAZAC koji stroj popunjava.

   Pravila iz kojih se ne izlazi:
     · nijedan zaobljen ugao
     · nijedna sjena s mutnoćom
     · nijedan prijelaz boje osim tiskarskog rastera
   Sve je puna boja, tvrda crna linija i raster.

   POTPIS: pomak crvene ploče. Crvena je otisnuta 3 px pored crne, kao
   loše registriran offset. Pojavljuje se na TRI mjesta -- naslov, trenutna
   stepenica, pečat na kraju -- i nigdje drugdje.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --papir:#e3d9b4;          /* prljavo žut, pjegav */
  --papir-2:#d2c69a;        /* druga ploča papira, sjenčanje */
  --papir-3:#b9ab74;
  --tinta:#17140f;          /* topla crna, nikad #000 */
  --krv:#9d1420;            /* volovska krv */
  --modra:#2d4f63;          /* mutna petrolej plava */
  --zelen:#3d6b32;          /* tiskana maslinasta zelena -- TOČNO */
  --zut:#c9971a;            /* senf, za zaključan odgovor */

  --display:"Anton",Impact,sans-serif;
  --kond:"Oswald",sans-serif;
  --slab:"Zilla Slab",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --stencil:"Saira Stencil One","Anton",sans-serif;

  --raster:radial-gradient(circle at 50% 50%,rgba(23,20,15,.22) .9px,transparent 1.1px);
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--slab);color:var(--tinta);background:var(--papir);
  min-height:100vh;overflow-x:hidden;line-height:1.5;
}
/* pjege i vlakna papira */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(ellipse 40% 30% at 12% 18%,rgba(150,120,60,.14),transparent 60%),
    radial-gradient(ellipse 30% 40% at 88% 72%,rgba(150,120,60,.12),transparent 60%),
    radial-gradient(ellipse 25% 20% at 60% 6%,rgba(120,100,50,.10),transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;opacity:.5;
}
::selection{background:var(--krv);color:var(--papir)}
:focus-visible{outline:3px solid var(--krv);outline-offset:2px}

/* ── zaglavlje ─────────────────────────────────────────────── */
.rub{height:9px;background:var(--tinta)}
.rub-2{height:3px;background:var(--krv)}

header{border-bottom:3px solid var(--tinta);background:var(--papir-2);
  background-image:var(--raster);background-size:4px 4px}
.ploca-stroja{max-width:1160px;margin:0 auto;padding:15px 18px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between}
.znak{display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit}
.zvijezda{width:70px;height:70px;flex:none;border:3px solid var(--tinta);display:block}

/* POTPIS 1 — naslov s pomaknutom crvenom pločom */
.naslov{position:relative;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(34px,7vw,62px);line-height:.86;letter-spacing:.01em;color:var(--tinta)}
.naslov::before{content:attr(data-t);position:absolute;left:-3px;top:2px;
  color:var(--krv);z-index:-1}
.slogan{font-family:var(--kond);font-weight:500;text-transform:uppercase;
  letter-spacing:.15em;font-size:clamp(9px,1.7vw,12px);margin-top:5px}

.specke{font-family:var(--mono);font-size:9.5px;line-height:1.8;text-transform:uppercase;
  letter-spacing:.04em;border:2px solid var(--tinta);padding:7px 11px;background:var(--papir)}
.specke div{display:flex;gap:10px;justify-content:space-between}
.specke b{font-weight:500;color:var(--krv)}
.specke i{font-style:normal;font-variant-numeric:tabular-nums}

/* ── raspored ──────────────────────────────────────────────── */
.stol{max-width:1160px;margin:0 auto;padding:22px 18px 70px;
  display:grid;grid-template-columns:1fr 244px;gap:26px;align-items:start}
@media(max-width:900px){.stol{grid-template-columns:1fr;gap:18px}}

/* ── ploča s pitanjem ─────────────────────────────────────── */
.polje{border:3px solid var(--tinta);background:var(--papir);position:relative;
  margin-bottom:14px}
.polje-kod{position:absolute;top:-9px;left:12px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;background:var(--papir);padding:0 7px}
.polje-kod.desno{left:auto;right:12px;color:var(--krv)}
.ploca{padding:24px 28px;text-align:center;
  font-family:var(--slab);font-weight:500;font-size:clamp(17px,2.4vw,25px);line-height:1.36;
  min-height:96px;display:flex;align-items:center;justify-content:center}

/* ── odgovori ─────────────────────────────────────────────── */
.odgovori{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:620px){.odgovori{grid-template-columns:1fr}}
.odg{position:relative;display:flex;align-items:stretch;text-align:left;
  border:3px solid var(--tinta);background:var(--papir);color:var(--tinta);
  font-family:var(--slab);font-weight:500;font-size:clamp(14.5px,1.9vw,18px);
  animation:pojava .26s backwards;transition:background .09s,color .09s}
.odg[data-klik]{cursor:pointer}
.odg:nth-child(1){animation-delay:.03s}.odg:nth-child(2){animation-delay:.09s}
.odg:nth-child(3){animation-delay:.15s}.odg:nth-child(4){animation-delay:.21s}
@keyframes pojava{from{opacity:0}to{opacity:1}}
.odg .slovo{font-family:var(--display);font-size:20px;line-height:1;flex:none;
  width:46px;display:flex;align-items:center;justify-content:center;
  background:var(--tinta);color:var(--papir);border-right:3px solid var(--tinta)}
.odg .tekst{padding:13px 15px;flex:1;display:flex;align-items:center}

.odg[data-klik]:hover{background:var(--tinta);color:var(--papir)}
.odg[data-klik]:hover .slovo{background:var(--papir);color:var(--tinta)}

.odg.zakljucan{background:var(--zut);color:var(--tinta)}
.odg.zakljucan .slovo{background:var(--krv);color:var(--papir)}

.odg.tocan{background:var(--zelen);color:var(--papir)}
.odg.tocan .slovo{background:var(--papir);color:var(--zelen)}
.odg.tocan::after{content:"TAČNO";position:absolute;right:-5px;top:-11px;
  font-family:var(--kond);font-weight:600;font-size:10px;letter-spacing:.16em;
  border:2px solid var(--papir);background:var(--zelen);color:var(--papir);
  padding:2px 7px;transform:rotate(-3deg)}

.odg.netocan{background:var(--tinta);color:var(--papir)}
.odg.netocan .slovo{background:var(--papir);color:var(--tinta)}
.odg.netocan .tekst{text-decoration:line-through;text-decoration-thickness:2px}

.odg.mrtav{pointer-events:none;color:var(--papir-3);border-color:var(--papir-3);
  background-image:var(--raster);background-size:3px 3px}
.odg.mrtav .slovo{background:var(--papir-3);color:var(--papir)}
.odg.mrtav .tekst{text-decoration:line-through;text-decoration-thickness:2px}

.udio{font-family:var(--mono);font-size:12px;padding:0 12px;display:flex;align-items:center;
  border-left:2px dotted currentColor;flex:none;font-variant-numeric:tabular-nums}

/* ── džokeri ──────────────────────────────────────────────── */
.dzokeri{display:flex;gap:9px;margin:14px 0 0;flex-wrap:wrap}
.dz{flex:1;min-width:130px;border:3px solid var(--tinta);background:var(--papir);
  padding:8px 10px;text-align:center;transition:background .09s,color .09s;cursor:pointer}
.dz b{display:block;font-family:var(--kond);font-weight:600;font-size:14px;
  letter-spacing:.13em;text-transform:uppercase}
.dz small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.04em;
  text-transform:uppercase;margin-top:1px;opacity:.62}
.dz:not(.potrosen):hover{background:var(--tinta);color:var(--papir)}
.dz.potrosen{cursor:default;color:var(--papir-3);border-color:var(--papir-3);
  background-image:var(--raster);background-size:3px 3px}
.dz.potrosen b{text-decoration:line-through}

/* ── ljestvica ────────────────────────────────────────────── */
.ljestve{border:3px solid var(--tinta);background:var(--papir);position:sticky;top:14px}
.ljestve .kapa{background:var(--tinta);color:var(--papir);font-family:var(--kond);
  font-weight:600;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding:5px 10px;display:flex;justify-content:space-between}
.stepenica{position:relative;display:flex;align-items:center;gap:8px;padding:5px 10px;
  border-bottom:1px solid var(--papir-2);font-family:var(--kond);font-weight:500;
  font-size:13.5px;text-transform:uppercase;letter-spacing:.04em}
.stepenica:last-child{border-bottom:0}
.kvaka{font-family:var(--mono);font-size:11px;width:10px;flex:none}
.stepenica .br{font-family:var(--mono);font-size:10px;min-width:20px;text-align:right;
  font-variant-numeric:tabular-nums}
.stepenica.sigurna .br{background:var(--krv);color:var(--papir);padding:1px 4px;
  min-width:auto;text-align:center}
.stepenica.prosla{color:var(--papir-3)}
.stepenica.prosla .br{color:var(--papir-3)}
.stepenica.prosla .kvaka{color:var(--zelen)}

/* POTPIS 2 — trenutna stepenica: crna traka s pomaknutom crvenom pločom */
.stepenica.sada{background:var(--tinta);color:var(--papir);font-weight:600;z-index:1}
.stepenica.sada .br{color:var(--papir)}
.stepenica.sada.sigurna .br{background:var(--papir);color:var(--tinta)}
.stepenica.sada::before{content:"";position:absolute;inset:0;background:var(--krv);
  transform:translate(3px,2px);z-index:-1}

/* ── dugmad ───────────────────────────────────────────────── */
.red{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.gumb{font-family:var(--kond);font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  font-size:16px;padding:11px 26px;cursor:pointer;text-decoration:none;display:inline-block;
  border:3px solid var(--tinta);background:var(--krv);color:var(--papir);
  transition:background .09s,color .09s}
.gumb:hover{background:var(--tinta);color:var(--papir)}
.gumb.tih{background:var(--papir);color:var(--tinta);font-size:13px;padding:9px 18px}
.gumb.tih:hover{background:var(--tinta);color:var(--papir)}

/* ── dosje pitanja ────────────────────────────────────────── */
.dosje{margin-top:16px;border:3px solid var(--tinta);background:var(--papir);
  padding:0 14px 13px;position:relative}
.dosje .polje-kod{color:var(--tinta)}
.dosje dl{display:grid;grid-template-columns:auto 1fr auto;gap:3px 8px;
  font-family:var(--mono);font-size:11.5px;margin-top:13px;align-items:baseline}
.dosje dt{text-transform:uppercase;letter-spacing:.07em;opacity:.6;white-space:nowrap}
.dosje .vodilja{border-bottom:1px dotted var(--tinta);opacity:.4;transform:translateY(-3px)}
.dosje dd{text-align:right;font-variant-numeric:tabular-nums}
.napomena{margin-top:10px;display:inline-block;border:2px solid var(--krv);color:var(--krv);
  font-family:var(--kond);font-weight:600;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;padding:2px 8px;transform:rotate(-1.2deg)}

/* ── kraj: pečat ──────────────────────────────────────────── */
.kraj{text-align:center;padding:24px 16px 8px}
/* POTPIS 3 — pečat s pomakom */
.pecat{position:relative;display:inline-block;font-family:var(--stencil);
  font-size:clamp(20px,4.6vw,36px);letter-spacing:.06em;color:var(--krv);
  border:4px double var(--krv);padding:8px 26px;transform:rotate(-5deg);margin-bottom:20px}
.kraj .oznaka{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;opacity:.6}
.kraj .cin{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(30px,7.5vw,64px);line-height:1;margin-top:3px}
.kraj .pod{font-family:var(--mono);font-size:12px;margin-top:9px;opacity:.7}

/* ── prazno / brojke ──────────────────────────────────────── */
.prazno{text-align:center;padding:42px 22px;font-size:15px;line-height:1.9}
.prazno code{font-family:var(--mono);font-size:11.5px;border:2px solid var(--tinta);
  padding:2px 7px;display:inline-block;margin:3px;background:var(--papir-2)}
.brojka{font-family:var(--display);font-size:clamp(46px,10vw,78px);line-height:.9}
.mala{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  margin-top:14px;opacity:.62;text-align:center}
.brojilo{display:grid;grid-template-columns:repeat(auto-fit,minmax(134px,1fr));gap:10px;margin:16px 0 20px}
.brojilo > div{border:3px solid var(--tinta);padding:9px 11px;background:var(--papir)}
.brojilo b{display:block;font-family:var(--display);font-size:26px;line-height:1}
.brojilo span{font-family:var(--kond);font-size:10px;letter-spacing:.15em;text-transform:uppercase;opacity:.7}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ── identitetska pločica ─────────────────────────────────── */
.igrac-traka{max-width:1160px;margin:0 auto;padding:10px 18px;display:flex;
  gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap;
  border-bottom:3px solid var(--tinta)}
.ja{display:flex;align-items:center;gap:10px;min-width:0}
.ja-ime{font-family:var(--display);font-size:clamp(20px,3.4vw,28px);line-height:1;
  text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ja-gost{font-family:var(--kond);font-weight:600;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;border:2px solid var(--tinta);padding:1px 6px;opacity:.6}
.ja-elo{display:flex;align-items:baseline;gap:7px;background:var(--tinta);
  color:var(--papir);padding:4px 11px 5px;flex:none}
.ja-elo b{font-family:var(--mono);font-weight:700;font-size:20px;line-height:1;
  font-variant-numeric:tabular-nums}
.ja-elo small{font-family:var(--kond);font-weight:500;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.72;white-space:nowrap}
.ja-elo.skok{background:var(--zelen)}
.ja-elo.pad{background:var(--krv)}
.veze{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase}
.veze a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--tinta);padding-bottom:1px}
.veze a:hover{background:var(--tinta);color:var(--papir);border-bottom-color:transparent}
@media(max-width:560px){.veze{gap:10px;font-size:9.5px}}

/* ── biranje igrača ───────────────────────────────────────── */
.imena{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0}
.ime{border:3px solid var(--tinta);background:var(--papir);padding:7px 16px;cursor:pointer;
  font-family:var(--kond);font-weight:600;font-size:15px;letter-spacing:.08em;
  text-transform:uppercase;transition:background .09s,color .09s}
.ime:hover,.ime.izabran{background:var(--tinta);color:var(--papir)}
.upis{display:flex;gap:0;justify-content:center;margin-top:12px}
.upis input{font-family:var(--slab);font-size:16px;padding:10px 13px;width:min(300px,70vw);
  border:3px solid var(--tinta);border-right:0;background:var(--papir);color:var(--tinta)}
.upis input::placeholder{color:var(--papir-3)}
.upis button{font-family:var(--kond);font-weight:600;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;padding:10px 18px;border:3px solid var(--tinta);
  background:var(--tinta);color:var(--papir);cursor:pointer}
.upis button:hover{background:var(--krv)}

/* ── tabla rezultata ──────────────────────────────────────── */
.tabla{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;margin-top:12px}
.tabla th{font-family:var(--kond);font-weight:600;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;text-align:right;padding:6px 9px;background:var(--tinta);
  color:var(--papir);white-space:nowrap}
.tabla th:first-child,.tabla td:first-child{text-align:left}
.tabla td{padding:6px 9px;text-align:right;border-bottom:1px solid var(--papir-2);
  font-variant-numeric:tabular-nums}
.tabla tr:last-child td{border-bottom:0}
.tabla .ime-igraca{font-family:var(--kond);font-weight:600;font-size:14px;
  text-transform:uppercase;letter-spacing:.05em}
.tabla .vodeci td{background:var(--papir-2)}
.tabla .mjesto{font-family:var(--display);font-size:17px;width:26px}
.znak-ishoda{display:inline-block;font-family:var(--kond);font-weight:600;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:1px 7px;border:2px solid currentColor}
.znak-ishoda.pobjeda{color:var(--zelen)}
.znak-ishoda.pad{color:var(--krv)}
.znak-ishoda.odustao{color:var(--tinta);opacity:.6}
.znak-ishoda.prekinuto{color:var(--papir-3)}
.omot{overflow-x:auto}

/* ── obrasci prijave ──────────────────────────────────────── */
.obrazac{display:flex;flex-direction:column;gap:13px}
.obrazac label{display:flex;flex-direction:column;gap:4px;font-family:var(--kond);
  font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.obrazac input{font-family:var(--slab);font-size:17px;padding:11px 13px;
  border:3px solid var(--tinta);background:var(--papir);color:var(--tinta);width:100%}
.obrazac input:focus{outline:3px solid var(--krv);outline-offset:0}
.obrazac small{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;
  text-transform:none;opacity:.6}
.obrazac .gumb{margin-top:4px;width:100%;text-align:center}
.gumb.puni{width:100%;text-align:center}
.upozorenje{border:3px solid var(--krv);background:var(--krv);color:var(--papir);
  padding:9px 13px;margin-bottom:15px;font-family:var(--kond);font-weight:500;
  font-size:13px;letter-spacing:.05em}
.crta{display:flex;align-items:center;gap:10px;margin:15px 0;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.5}
.crta::before,.crta::after{content:"";flex:1;height:2px;background:var(--tinta);opacity:.35}

/* ── Elo ──────────────────────────────────────────────────── */
.elo-pomak{margin-top:14px;border:3px solid var(--tinta);background:var(--papir);
  padding:9px 14px;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;
  display:flex;gap:8px;align-items:baseline}
.elo-pomak b{font-family:var(--display);font-size:20px;letter-spacing:.02em}
.elo-pomak.gore{border-left:9px solid var(--zelen)}
.elo-pomak.dolje{border-left:9px solid var(--krv)}

/* ── prijava pitanja ──────────────────────────────────────── */
.zastor{position:fixed;inset:0;z-index:50;background:rgba(23,20,15,.72);
  display:flex;align-items:center;justify-content:center;padding:18px;
  background-image:var(--raster);background-size:4px 4px}
.zastor .kutija{width:min(560px,100%);margin:0;max-height:92vh;overflow:auto}
.razlozi{display:flex;flex-direction:column;gap:6px}
.raz{text-align:left;font-family:var(--slab);font-size:15px;padding:9px 12px;cursor:pointer;
  border:3px solid var(--tinta);background:var(--papir);color:var(--tinta);
  transition:background .09s,color .09s}
.raz:hover{background:var(--papir-2)}
.raz.izabran{background:var(--tinta);color:var(--papir)}
.zastor textarea{font-family:var(--slab);font-size:15px;padding:10px 12px;width:100%;
  border:3px solid var(--tinta);background:var(--papir);color:var(--tinta);
  margin-top:4px;resize:vertical}
.zastor textarea:focus{outline:3px solid var(--krv);outline-offset:0}
.citat{border-left:9px solid var(--krv);background:var(--papir-2);padding:10px 14px;
  font-family:var(--slab);font-size:15px;font-style:italic}
.pokazi{font-family:var(--kond);font-weight:600;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;padding:5px 0}
.dokaz{width:100%;border:3px solid var(--tinta);margin-top:8px;display:block}

/* ── veza: poruka s druge strane žice ─────────────────────── */
.veza{margin-top:14px;border:3px solid var(--tinta);background:var(--papir);
  padding:12px 15px;position:relative}
.veza::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;background:var(--tinta)}
.veza.siguran::before{background:var(--zelen)}
.veza.nagađa::before{background:var(--krv)}
.veza-tko{font-family:var(--kond);font-weight:600;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;margin-left:9px;display:flex;gap:9px;align-items:baseline}
.veza-tko span{font-family:var(--mono);font-size:9px;letter-spacing:.08em;opacity:.55;
  text-transform:none}
.veza-kaze{font-family:var(--slab);font-size:17px;font-style:italic;margin:5px 0 0 9px}

/* ── vidljiva greška ──────────────────────────────────────── */
.kvar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--krv);
  color:var(--papir);padding:11px 16px;font-family:var(--mono);font-size:12px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:3px solid var(--tinta)}
.kvar b{font-family:var(--kond);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.kvar button{font-family:var(--kond);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 12px;border:2px solid var(--papir);
  background:var(--papir);color:var(--tinta);cursor:pointer;margin-left:auto}

/* ── izbor načina igre ────────────────────────────────────── */
.nacini{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 14px}
@media(max-width:640px){.nacini{grid-template-columns:1fr}}
.nacin{text-align:left;border:3px solid var(--tinta);background:var(--papir);
  color:var(--tinta);padding:16px 18px;cursor:pointer;font-family:var(--slab);
  transition:background .09s,color .09s;display:flex;flex-direction:column;gap:4px}
.nacin:hover{background:var(--tinta);color:var(--papir)}
.nacin b{font-family:var(--display);font-size:22px;text-transform:uppercase;
  letter-spacing:.02em;line-height:1}
.nacin span{font-size:14px;line-height:1.35}
.nacin small{font-family:var(--mono);font-size:10px;letter-spacing:.05em;opacity:.6}
.nacin.rc{border-left:9px solid var(--krv)}
.nacin.rc:hover{border-left-color:var(--papir)}
.zivoti-izbor{display:flex;gap:14px;margin-top:8px;font-family:var(--kond);
  font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:default}
.zivoti-izbor label{display:flex;gap:5px;align-items:center;cursor:pointer}

/* ── tobogan: životi i uspon ──────────────────────────────── */
.tobogan{border:3px solid var(--tinta);background:var(--papir);position:sticky;top:14px}
.tobogan .kapa{background:var(--krv);color:var(--papir);font-family:var(--kond);
  font-weight:600;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding:5px 10px;display:flex;justify-content:space-between}
.tob-red{display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 12px;border-bottom:1px solid var(--papir-2);font-family:var(--mono);font-size:11px}
.tob-red:last-child{border-bottom:0}
.tob-red b{font-family:var(--display);font-size:24px;line-height:1}
.tob-red span{text-transform:uppercase;letter-spacing:.12em;opacity:.65}
.zivot{display:inline-block;width:15px;height:15px;margin-right:4px;
  background:var(--krv);clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.zivot.potrosen{background:var(--papir-3)}
.niz{font-family:var(--kond);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-size:11px;border:2px solid var(--zelen);color:var(--zelen);padding:1px 7px}

/* ── kartoteka: tri rang liste kao registri jednog fascikla ── */
.kartoteka{max-width:620px;margin:0 auto;width:100%}
.evidencija{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.62;margin:0 0 7px 3px}
.registri{display:flex;align-items:flex-end;margin:0 0 -3px 14px;position:relative;z-index:2}
.reg{font-family:var(--kond);font-weight:600;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;border:3px solid var(--tinta);border-bottom:none;
  background:var(--tinta);color:var(--papir);padding:7px 13px 5px;margin-right:-3px;
  cursor:pointer;transform:translateY(2px)}
.reg small{font-family:var(--mono);font-size:9px;opacity:.65;margin-left:5px}
.reg:hover{color:var(--zut)}
/* aktivni jezičak: papir, izvučen, i PAPIRNATIM donjim rubom prekrije crni
   okvir ispod sebe -- jezičak i list postaju jedan komad papira */
.reg.aktivan{position:relative;z-index:3;background:var(--papir);color:var(--tinta);
  transform:none;border-bottom:3px solid var(--papir);margin-bottom:-3px;padding-bottom:8px}
.reg.aktivan:hover{color:var(--tinta)}
.reg .rl{position:relative}
.reg.aktivan .rl::before{content:attr(data-t);position:absolute;left:-2px;top:1px;
  color:var(--krv);z-index:-1}
.karton{border:3px solid var(--tinta);background:var(--papir);position:relative;z-index:1}
.karton .tabla td{padding:9px 10px}
.moj-red{border-top:3px solid var(--tinta);padding:8px 12px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.65}
.znak-nacina{display:inline-block;font-family:var(--kond);font-weight:600;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:1px 7px;border:2px solid var(--tinta)}
.znak-nacina.rollercoaster{border-color:var(--krv);color:var(--krv)}

/* ── visinomjer (tobogan) ─────────────────────────────────── */
.uspon-graf{position:relative;border-bottom:3px solid var(--tinta);background:var(--papir)}
.uspon-graf svg{display:block;width:100%}
.rekord-pecat{position:absolute;top:7px;right:8px;z-index:2;font-family:var(--stencil);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--krv);
  border:3px double var(--krv);padding:2px 9px;transform:rotate(-4deg);
  animation:pecatiranje .18s ease-out}
@keyframes pecatiranje{from{transform:rotate(-4deg) scale(1.7);opacity:0}}
.uspon-brojke{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 11px;font-family:var(--kond);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase}
.uspon-brojke b{font-family:var(--mono);font-size:13px;font-weight:700}
@media(max-width:900px){.tobogan{position:static;order:-1}}

/* ── veliki redni broj pitanja (tobogan) ──────────────────── */
.polje.s-rednim{margin-top:20px}
.redni{position:absolute;top:-18px;left:12px;background:var(--papir);
  border:3px solid var(--tinta);padding:3px 13px 4px;
  display:flex;align-items:baseline;gap:8px;z-index:2}
.redni small{font-family:var(--kond);font-weight:600;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase}
.redni b{font-family:var(--display);font-size:27px;line-height:1}