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

/* ═══════════════════════════════════════════════════════════════
   GRAMOFON — "Spusti iglu. Pogodi vreme."

   Igra nije ekran nego PLOČA: omot, etiketa, izlazni žljeb.
   Sve je posuđeno iz državnih presaonica istočnog bloka — Jugoton,
   PGP-RTB, AMIGA, Hungaroton — gdje su tvrda crta, kataloški broj i
   raster bili cijela grafika.

   Pravila iz kojih se ne izlazi:
     · nijedan zaobljen ugao osim onoga što je STVARNO okruglo (ploča)
     · nijedna sjena s mutnoćom
     · nijedan prijelaz boje osim tiskarskog rastera
     · brojka godine uvijek Anton, uvijek najveća stvar na ekranu

   POTPIS: IGLA I IZLAZNI ŽLJEB. Igla se spušta kad isječak krene,
   diže se na otkrivanju, a godina se u tom trenutku UTISNE u etiketu
   kao matrični broj u izlaznom žljebu. Nigdje drugdje nema animacije.

   TRI PLOČE, JEDAN STROJ. Svaka zbirka nosi svoju etiketu:
     ex-YU     volovska krv na prljavom papiru      (Jugoton / PGP)
     klasika   žuti kartuš na bjelokosti            (Deutsche Grammophon)
     magyar    crno-bijeli pepito                   (Pepita / Hungaroton)
   Struktura je ista; mijenja se samo ploča boje i etiketa.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --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;

  /* ex-YU je zadana ploča */
  --papir:#e8dbb8;
  --papir-2:#d7c69b;
  --papir-3:#b3a075;
  --tinta:#15110c;
  --akcent:#a11722;          /* volovska krv — plohe */
  --akcent-2:#8d1019;        /* isti akcent za SITAN TEKST */
  --akcent-tekst:#f4ead2;
  --tocno:#3f6b2f;           /* tiskana maslinasta */
  --pogreska:#a11722;
  --pozor:#b8860d;
  --etiketa-boja:var(--akcent);
  --etiketa-tekst:#f4ead2;
  --katalog:"LSY 61";
  --raster:radial-gradient(circle at 50% 50%,rgba(21,17,12,.20) .9px,transparent 1.1px);
  --vinil-1:#100e0c;
  --vinil-2:#1c1917;
}

/* ── ploča: KLASIKA ───────────────────────────────────────────
   Deutsche Grammophon: žuti kartuš, crna, bjelokost. Godina ostaje
   Anton kao i drugdje — ona je jedina konstanta igre.              */
/* DG tiska besprijekorno: kartuš umjesto pomaknute ploče, bez lošeg registra */
[data-deck="classical"] .naslov{background:var(--akcent);color:#100f0d;
  border:3px solid var(--tinta);padding:4px 13px 6px;font-size:clamp(23px,3.7vw,38px)}
[data-deck="classical"] .naslov::before{content:none}
[data-deck="classical"]{
  --papir:#f1eade;
  --papir-2:#e2d9c6;
  --papir-3:#b6ac96;
  --tinta:#100f0d;
  --akcent:#e8b606;
  --akcent-2:#7d5c04;
  --akcent-tekst:#100f0d;
  --tocno:#2f6b45;
  --pogreska:#8f1d18;
  --pozor:#a8760a;
  --etiketa-boja:var(--akcent);
  --etiketa-tekst:#100f0d;
  --katalog:"GRM 138";
  --raster:radial-gradient(circle at 50% 50%,rgba(16,15,13,.16) .9px,transparent 1.1px);
}

/* ── ploča: MAGYAR ────────────────────────────────────────────
   Pepita — Hungarotonova pop etiketa. Pepito je doslovno šahovnica,
   pa je uzorak, a ne boja, ono što ovu ploču čini prepoznatljivom.  */
[data-deck="hungarian"]{
  --papir:#ebe7dd;
  --papir-2:#d9d4c7;
  --papir-3:#a9a396;
  --tinta:#141419;
  --akcent:#cf2027;
  --akcent-2:#a81920;
  --akcent-tekst:#f5f2ea;
  --tocno:#17734a;
  --pogreska:#cf2027;
  --pozor:#b8860d;
  --etiketa-boja:var(--tinta);
  --etiketa-tekst:#f5f2ea;
  --katalog:"SLPX 17";
  --raster:radial-gradient(circle at 50% 50%,rgba(20,20,25,.17) .9px,transparent 1.1px);
}
/* pepito na samom rubu stroja — uzorak, ne boja, nosi mađarsku ploču */
[data-deck="hungarian"] .rub{height:10px;
  background:repeating-conic-gradient(var(--tinta) 0 25%,var(--papir) 0 50%) 0 0/10px 10px}

/* ── ton: NEGATIV ─────────────────────────────────────────────
   Domaćinski ekran stoji u zamračenoj sobi na televizoru. Zamjena
   papira i tinte okreće cijeli sustav u negativ bez ijedne nove
   komponente — isti stroj, ugašeno svjetlo.                        */
[data-tone="ink"]{
  --akcent:#cf2530;          /* volovska krv se na crnom ne vidi — otvori je */
  --akcent-2:#e2707a;        /* sitan tekst na crnom traži još svjetliji ton */
  --papir:#131110;
  --papir-2:#1e1a17;
  --papir-3:#4a4238;
  --tinta:#f0e5c9;
  --raster:radial-gradient(circle at 50% 50%,rgba(240,229,201,.13) .9px,transparent 1.1px);
}
[data-tone="ink"][data-deck="classical"]{--akcent-2:#e8c95e;--papir:#121110;--papir-2:#1d1b18;--papir-3:#4c463a;--tinta:#f3ecdd}
[data-tone="ink"][data-deck="hungarian"]{--akcent:#e0333a;--akcent-2:#e88b90;--papir:#111114;--papir-2:#1b1b20;--papir-3:#454550;--tinta:#f2efe7}

*{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;line-height:1.5;overflow-x:hidden;
}
/* pjege i vlakna — papir nikad nije čist */
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,.13),transparent 60%),
    radial-gradient(ellipse 30% 40% at 88% 72%,rgba(150,120,60,.11),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:.45;
}
[data-tone="ink"] body::before,body[data-tone="ink"]::before{mix-blend-mode:screen;opacity:.16}
::selection{background:var(--akcent);color:var(--akcent-tekst)}
:focus-visible{outline:3px solid var(--akcent);outline-offset:2px}
a{color:inherit}

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

/* ── zaglavlje ────────────────────────────────────────────── */
.zaglavlje{border-bottom:3px solid var(--tinta);background:var(--papir-2);
  background-image:var(--raster);background-size:4px 4px}
.ploca-stroja{max-width:1400px;margin:0 auto;padding:11px 18px;display:flex;
  align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between}
.znak{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;min-width:0}

/* wordmark: crvena ploča otisnuta 3px pored crne — loše registriran offset */
.naslov{position:relative;isolation:isolate;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(26px,4.4vw,44px);line-height:.88;letter-spacing:.005em;color:var(--tinta)}
.naslov::before{content:attr(data-t);position:absolute;left:-3px;top:2px;color:var(--akcent);z-index:-1}
.slogan{font-family:var(--kond);font-weight:500;text-transform:uppercase;
  letter-spacing:.19em;font-size:clamp(8.5px,1.35vw,11.5px);margin-top:5px;opacity:.88}
.slogan i{font-style:normal;color:var(--akcent-2);font-weight:600}

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

/* ── PLOČA (potpis) ───────────────────────────────────────────
   Vinil je uvijek taman: ploča ne mijenja boju s tonom papira.     */
.gramofon{position:relative;display:grid;place-items:center;flex:none}
.ploca{
  width:var(--d,min(38vh,300px));height:var(--d,min(38vh,300px));border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,var(--vinil-1) 0 2px,var(--vinil-2) 2px 4px);
  display:grid;place-items:center;position:relative;
  box-shadow:0 0 0 3px var(--tinta);
}
/* jedini odsjaj koji si dopuštamo: svjetlo koje prelazi preko žljebova */
.ploca::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 74%,rgba(255,244,214,.09) 80%,transparent 86%)}
.ploca.vrti{animation:okret 2.6s linear infinite}
@keyframes okret{to{transform:rotate(360deg)}}

.etiketa{width:42%;height:42%;border-radius:50%;background:var(--etiketa-boja);
  color:var(--etiketa-tekst);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:15%;z-index:2;text-align:center;box-shadow:0 0 0 2px var(--tinta);
  position:relative;padding:4px}
.etiketa b{font-family:var(--display);font-size:clamp(15px,2.6vw,26px);line-height:.95;
  letter-spacing:.02em;display:block}
.etiketa small{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;display:block;margin-top:3px;opacity:.8}
/* rupa za osovinu */
.etiketa::after{content:"";position:absolute;width:9%;height:9%;min-width:6px;min-height:6px;
  border-radius:50%;background:var(--papir);box-shadow:0 0 0 1.5px rgba(0,0,0,.5)}
[data-deck="classical"] .etiketa{border:3px double var(--tinta)}
[data-deck="hungarian"] .etiketa{
  background:repeating-conic-gradient(#141419 0 25%,#f5f2ea 0 50%) 0 0/11px 11px}
[data-deck="hungarian"] .etiketa b,[data-deck="hungarian"] .etiketa small{
  background:#141419;color:#f5f2ea;padding:1px 7px}

/* IGLA — miruje podignuta, spušta se na žljeb dok svira */
.igla{position:absolute;top:3%;right:-4%;width:52%;height:9px;background:var(--papir-3);
  border:2px solid var(--tinta);transform-origin:calc(100% - 8px) 50%;
  transform:rotate(10deg);transition:transform .55s cubic-bezier(.3,.8,.3,1);z-index:3}
.igla::before{content:"";position:absolute;left:-9px;top:-9px;width:26px;height:23px;
  background:var(--tinta);clip-path:polygon(0 0,100% 0,100% 100%,32% 100%)}  /* glava s iglom */
.igla::after{content:"";position:absolute;right:-11px;top:-9px;width:24px;height:24px;
  border-radius:50%;background:var(--papir-2);border:2px solid var(--tinta)}  /* osovina */
.gramofon.svira .igla{transform:rotate(-8deg)}

/* ── polje / ploča s okvirom ──────────────────────────────── */
.polje{border:3px solid var(--tinta);background:var(--papir);position:relative}
.polje-kod{position:absolute;top:-9px;left:12px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;background:var(--papir);padding:0 7px;text-transform:uppercase}
.polje-kod.desno{left:auto;right:12px;color:var(--akcent-2)}

/* ── dugmad ───────────────────────────────────────────────── */
.gumb{font-family:var(--kond);font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  font-size:15px;padding:11px 24px;cursor:pointer;text-decoration:none;display:inline-block;
  border:3px solid var(--tinta);background:var(--akcent);color:var(--akcent-tekst);
  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 17px}
.gumb.tih:hover{background:var(--tinta);color:var(--papir)}
.gumb.prazan{background:transparent;color:var(--tinta);border-color:var(--papir-3);font-size:13px;padding:9px 17px}
.gumb.prazan:hover{background:var(--tinta);color:var(--papir);border-color:var(--tinta)}
.gumb.velik{font-family:var(--display);letter-spacing:.03em;font-size:clamp(20px,3vw,34px);
  padding:13px 40px;border-width:4px}
.gumb[disabled]{pointer-events:none;color:var(--papir-3);border-color:var(--papir-3);background:var(--papir)}
.red{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:14px}

/* ── natpisi ──────────────────────────────────────────────── */
.oznaka{font-family:var(--kond);font-weight:600;font-size:clamp(10px,1.4vw,13px);
  letter-spacing:.24em;text-transform:uppercase}
.oznaka b{color:var(--akcent-2)}
.sitno{font-family:var(--mono);font-size:11px;letter-spacing:.05em;opacity:.68;line-height:1.7}
.napomena{font-family:var(--slab);font-size:14px;line-height:1.6;max-width:52ch;margin:0 auto}

/* ── GODINA: utisnuta u izlazni žljeb ─────────────────────── */
.godina{position:relative;isolation:isolate;font-family:var(--display);line-height:.82;
  font-size:clamp(84px,20vw,240px);letter-spacing:-.01em;color:var(--tinta);
  font-variant-numeric:tabular-nums}
.godina::before{content:attr(data-g);position:absolute;left:-5px;top:4px;color:var(--akcent);z-index:-1}
.godina.utisni{animation:utisni .42s cubic-bezier(.2,1.4,.4,1)}
@keyframes utisni{from{transform:scale(.82) rotate(-1.5deg);opacity:0}to{transform:none;opacity:1}}

/* ── traka vremena ────────────────────────────────────────── */
.traka{width:min(72vw,780px);height:12px;border:3px solid var(--tinta);background:var(--papir);
  margin-top:22px;padding:0}
.traka .puni{height:100%;background:var(--akcent);width:100%;transition:width .25s linear}

/* ── žig ──────────────────────────────────────────────────── */
.zig{display:inline-block;font-family:var(--stencil);font-size:clamp(16px,3.4vw,30px);
  letter-spacing:.06em;border:4px double currentColor;padding:5px 20px;transform:rotate(-4deg)}
.zig.tocno{color:var(--tocno)}
.zig.promasaj{color:var(--pogreska)}
.upozorenje{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--pozor);
  color:var(--pozor);font-family:var(--kond);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 10px;transform:rotate(-1deg);background:var(--papir)}
.upozorenje.jako{border-color:var(--pogreska);color:var(--pogreska)}

/* ═══════════ DOMAĆINSKI EKRAN ═══════════════════════════════ */
.pozornica{min-height:100vh;display:flex;flex-direction:column}
.scena{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:20px;gap:clamp(10px,2vh,20px)}
.hostinfo{font-family:var(--mono);font-size:10px;line-height:1.8;text-transform:uppercase;
  letter-spacing:.06em;text-align:right;border:2px solid var(--tinta);padding:6px 10px;background:var(--papir)}
.hostinfo b{color:var(--akcent);font-size:13px;letter-spacing:0}
.upitnik{font-family:var(--display);font-size:clamp(70px,15vw,180px);line-height:.85;color:var(--tinta)}
.pjesma{font-family:var(--slab);font-weight:600;font-size:clamp(20px,3.6vw,46px);
  line-height:1.15;max-width:22ch;margin-top:14px}
.izvodjac{font-family:var(--kond);font-weight:600;font-size:clamp(13px,2vw,24px);
  text-transform:uppercase;letter-spacing:.14em;color:var(--akcent-2);margin-top:8px}
.upravljanje{border-top:3px solid var(--tinta);background:var(--papir-2);
  background-image:var(--raster);background-size:4px 4px;
  padding:10px 16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center}
.grupa{display:flex;align-items:center;gap:7px;border:2px solid var(--tinta);padding:4px 8px;background:var(--papir)}
.grupa > span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.grupa input[type=range]{width:104px;accent-color:var(--akcent)}

/* ═══════════ IGRA ═══════════════════════════════════════════ */
.stol{max-width:1400px;margin:0 auto;padding:16px 16px 30px;width:100%;
  min-height:calc(100vh - 124px);display:flex;flex-direction:column}
.ekipe{display:grid;gap:12px;margin-bottom:14px}
.ekipa{border:3px solid var(--tinta);background:var(--papir);padding:0}
.ekipa .kapa{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:5px 10px;background:var(--papir-2);border-bottom:3px solid var(--tinta)}
.ekipa.na-redu .kapa{background:var(--tinta);color:var(--papir)}
.ekipa.na-redu{box-shadow:4px 4px 0 var(--akcent)}
.ekipa .ime{font-family:var(--display);font-size:clamp(15px,2vw,23px);text-transform:uppercase;
  line-height:1;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ekipa .desno{display:flex;align-items:center;gap:12px;flex:none}
.zetoni{font-family:var(--mono);font-size:15px;letter-spacing:2px;cursor:pointer;color:var(--akcent-2)}
.ekipa.na-redu .zetoni{color:var(--papir)}
.rezultat{font-family:var(--display);font-size:clamp(17px,2.4vw,26px);line-height:1;font-variant-numeric:tabular-nums}
.rezultat small{font-family:var(--mono);font-size:11px;opacity:.6}

/* kartica = mala etiketa iz omota */
.niz{display:flex;flex-wrap:wrap;gap:7px;padding:10px}
.kartica{position:relative;border:2px solid var(--tinta);background:var(--papir);
  width:clamp(86px,7.4vw,116px);padding:6px 7px 7px;cursor:pointer;text-align:center;
  transition:background .09s,color .09s}
.kartica:hover{background:var(--tinta);color:var(--papir)}
.kartica .kg{font-family:var(--display);font-size:clamp(17px,2.1vw,23px);line-height:1;
  font-variant-numeric:tabular-nums}
.kartica .ki{font-family:var(--kond);font-weight:600;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--akcent-2);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kartica:hover .ki{color:var(--papir)}
.kartica .kn{font-family:var(--slab);font-size:10.5px;line-height:1.25;margin-top:1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kartica.pocetna{border-style:dashed;color:var(--papir-3);border-color:var(--papir-3)}
.kartica.pocetna .ki{color:var(--papir-3)}
.kartica.pocetna:hover{background:var(--papir-3);color:var(--papir)}
.kartica.svjeza{box-shadow:3px 3px 0 var(--tocno)}
.kartica .sflag{position:absolute;top:2px;right:4px;font-size:10px;line-height:1}

/* utori: gdje se spušta igla */
.utori{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:7px;
  max-width:1340px;margin:6px auto 0}
.utor{font-family:var(--kond);font-weight:600;background:var(--papir);color:var(--tinta);
  border:3px dashed var(--tinta);padding:14px 16px;cursor:pointer;min-width:clamp(112px,10vw,158px);
  display:flex;flex-direction:column;justify-content:center;gap:2px;line-height:1.15;
  font-size:clamp(14px,1.8vw,19px);font-variant-numeric:tabular-nums;
  transition:background .09s,color .09s}
.utor small{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.utor:hover{background:var(--tinta);color:var(--papir);border-style:solid}
.utor:hover small{opacity:.85}
.sidro{background:var(--papir-2);border:3px solid var(--tinta);padding:14px 10px;
  min-width:clamp(74px,6.4vw,98px);display:flex;flex-direction:column;justify-content:center;
  font-family:var(--display);font-size:clamp(16px,2.1vw,23px);line-height:1;
  font-variant-numeric:tabular-nums}
.sidro small{font-family:var(--mono);font-size:8.5px;letter-spacing:.04em;text-transform:uppercase;
  opacity:.62;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92px;
  font-family:var(--kond);font-weight:500}

.sredina{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:11px;padding:10px 0 4px}
.pobjeda{font-family:var(--display);font-size:clamp(30px,7vw,72px);line-height:1;
  text-transform:uppercase;position:relative;isolation:isolate}
.pobjeda::before{content:attr(data-t);position:absolute;left:-4px;top:3px;color:var(--akcent);z-index:-1}

/* ── postavljanje partije ─────────────────────────────────── */
.postava{max-width:1000px;margin:0 auto;padding:24px 16px 50px}
.postava-mreza{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin:16px 0}
.polje-unos{border:3px solid var(--tinta);background:var(--papir);padding:9px 11px}
.polje-unos .lbl{font-family:var(--kond);font-weight:600;font-size:9.5px;letter-spacing:.19em;
  text-transform:uppercase;opacity:.75;display:block;margin-bottom:5px}
.polje-unos select,.polje-unos input{width:100%;font-family:var(--kond);font-weight:600;font-size:16px;
  background:transparent;border:0;border-bottom:2px solid var(--tinta);color:var(--tinta);
  padding:3px 0 4px;text-transform:uppercase;letter-spacing:.04em}
.polje-unos select:focus,.polje-unos input:focus{outline:0;border-bottom-color:var(--akcent)}
.polje-unos .pod{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;opacity:.6;margin-top:5px}
.imena{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.imena input{font-family:var(--kond);font-weight:600;font-size:15px;letter-spacing:.05em;
  text-transform:uppercase;padding:9px 12px;border:3px solid var(--tinta);background:var(--papir);
  color:var(--tinta);width:160px}
.imena input:focus{outline:0;border-color:var(--akcent)}

/* ── modal ────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;background:rgba(10,8,6,.82);display:grid;place-items:center;
  z-index:50;padding:20px}
.mbox{border:4px solid var(--tinta);background:var(--papir);padding:22px;max-width:430px;width:100%;
  text-align:center;box-shadow:8px 8px 0 var(--akcent)}
.mbox h3{font-family:var(--display);font-size:22px;text-transform:uppercase;line-height:1.05}
.mbox .pod{font-family:var(--mono);font-size:11px;opacity:.65;margin:5px 0 15px;letter-spacing:.04em}
.mbox input{font-family:var(--display);font-size:26px;text-align:center;width:150px;padding:8px;
  border:3px solid var(--tinta);background:var(--papir);color:var(--tinta);margin-bottom:14px}

/* ── telefon ──────────────────────────────────────────────── */
.telefon{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:26px 20px;text-align:center;gap:18px}
.telefon .brojka{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  border:2px solid var(--tinta);padding:3px 10px}
.telefon h1{font-family:var(--display);font-size:clamp(32px,10vw,58px);text-transform:uppercase;line-height:1}
.dodir{width:min(60vw,230px);height:min(60vw,230px);border-radius:50%;border:4px solid var(--tinta);
  background:var(--akcent);color:var(--akcent-tekst);font-family:var(--display);font-size:21px;
  letter-spacing:.06em;cursor:pointer;display:grid;place-items:center;text-transform:uppercase}
.dodir:active{background:var(--tinta);color:var(--papir)}
.odgovor{border:3px solid var(--tinta);background:var(--papir);padding:20px;width:100%;max-width:420px}

/* ── admin / pregled ──────────────────────────────────────── */
.omot{max-width:1240px;margin:0 auto;padding:22px 18px 60px}
.omot h1{font-family:var(--display);font-size:clamp(26px,4vw,40px);text-transform:uppercase;line-height:1}
.brojilo{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,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:9.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.7}
.brojilo .pozor b{color:var(--pozor)}
.tabla{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
.tabla th{font-family:var(--kond);font-weight:600;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;text-align:left;padding:6px 9px;background:var(--tinta);color:var(--papir);
  white-space:nowrap}
.tabla td{padding:6px 9px;border-bottom:1px solid var(--papir-2)}
.tabla tr:hover td{background:var(--papir-2)}
/* značka stanja u katalogu — NE zvati je .znak: to je logotip u zaglavlju,
   a kasnije pravilo tiho preuzme zaglavlje (2px okvir oko wordmarka). */
.stanje{display:inline-block;font-family:var(--kond);font-weight:600;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;padding:1px 7px;border:2px solid currentColor}
.stanje.h{color:var(--tocno)} .stanje.m{color:var(--pozor)} .stanje.l{color:var(--pogreska)}
.stanje.ok{color:var(--tocno)} .stanje.ne{color:var(--papir-3)}
.crte{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.crte > div{border:2px solid var(--tinta);padding:6px 10px;font-family:var(--mono);font-size:11px}
.crte b{font-family:var(--display);font-size:15px;margin-left:6px}
code{font-family:var(--mono);font-size:12px;border:2px solid var(--tinta);padding:1px 6px;background:var(--papir-2)}
.veze{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase}
.veze a{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:760px){
  .ploca-stroja{padding:9px 12px;gap:12px}
  .specke{display:none}
  .stol{padding:12px 10px 30px}
  .niz{padding:8px}
  .utor{min-width:100px;padding:11px 12px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}