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

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

   The game is not a screen but a RECORD: sleeve, label, run-out groove.
   Everything here is borrowed from the state pressing plants of the
   Eastern bloc — Jugoton, PGP-RTB, AMIGA, Hungaroton — where a hard rule,
   a catalogue number and a print screen were the whole of the graphic
   design.

   Rules that never get broken:
     · no rounded corner except on something that is ACTUALLY round (the record)
     · no shadow with any blur to it
     · no colour gradient except a print screen
     · the year is always set in Anton, always the largest thing on screen

   SIGNATURE: THE NEEDLE AND THE RUN-OUT GROOVE. The needle drops when the
   clip starts, lifts on the reveal, and at that instant the year gets
   STAMPED into the label like a matrix number in a run-out groove. There
   is no animation anywhere else in the system.

   ONE HOUSE, THREE RECORDS. The page has ONE face — yellow cartouche and
   black ink on paper — because that's how every real record house works:
   DG, Blue Note and ECM print the same sleeve for everything, and the disc
   inside tells you which record it is. A deck is identified by its LABEL
   ON THE DISC and its catalogue number, never by the colour of the page:
     ex-YU       full label              LSY 61
     classical   double ring             GRM 138
     magyar      pepito (checkerboard)   SLPX 17
   (Decks used to have three different palettes. Two of the three were
   nearly the same red anyway — a distinction that promises more than it
   delivers — and boldness spent across three places is boldness spent
   nowhere.)
   ═══════════════════════════════════════════════════════════════ */

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

  /* house style: yellow cartouche, black ink, paper */
  --papir:#f0e9db;
  --papir-2:#e1d8c4;
  --papir-3:#b2a894;
  --tinta:#12110f;
  --akcent:#e8b606;          /* yellow — PLANES only (button, label, selection) */
  --akcent-2:#7d5c04;        /* dark gold — SMALL TEXT; yellow under 14px is illegible */
  --akcent-tekst:#12110f;    /* always black on yellow */
  --tocno:#2f6b45;           /* status colour, never decoration */
  --pogreska:#a3201b;
  --pozor:#8a6a05;
  --etiketa-boja:var(--akcent);
  --etiketa-tekst:#12110f;
  --katalog:"LSY 61";
  --raster:radial-gradient(circle at 50% 50%,rgba(18,17,15,.17) .9px,transparent 1.1px);
  --ploha:var(--tinta);      /* solid plane; muted in the negative theme */
  --akcent-blijedi:#f6e7ad;  /* a hint of the accent: mouse hover */
  --vinil-1:#100e0c;
  --vinil-2:#1c1917;
}

/* The only thing that tells decks apart: the catalogue number and the SHAPE of the label on the disc. */
[data-deck="classical"]{--katalog:"GRM 138"}
[data-deck="hungarian"]{--katalog:"SLPX 17"}
[data-deck="uk"]{--katalog:"PARLO R"}
[data-deck="eurovision"]{--katalog:"EBU 56"}
[data-deck="italian"]{--katalog:"SANR 58"}
[data-deck="french"]{--katalog:"BARCL 70"}
[data-deck="film"]{--katalog:"REEL 35"}
[data-deck="crtani"]{--katalog:"CEL 16"}
[data-deck="serije"]{--katalog:"PAL 625"}
[data-deck="reklame"]{--katalog:"SPOT 30"}
[data-deck="epp"]{--katalog:"EPP 625"}
[data-deck="istok"]{--katalog:"DDR 12"}



/* ── tone: NEGATIVE ───────────────────────────────────────────
   The host screen sits on a television in a darkened room. Swapping
   paper and ink flips the whole system into negative without adding a
   single new component — same machine, lights off.                  */
[data-tone="ink"]{
  --papir:#121110;
  --papir-2:#1d1b18;
  --papir-3:#4a4238;
  /* Not near-white: 16:1 on black is mathematically brilliant and, to an
     eye two metres away, painful — large numerals halo and blur their own
     edges. 12.8:1 is sharp without burning. */
  --tinta:#dcd4c1;
  --akcent-2:#e8c95e;        /* on black, small text goes to a lighter gold */
  /* Yellow is muted here because in the negative it is not a spot of
     colour but a PLANE: a „spusti iglu" button covering half a television
     in full yellow at midnight is a flash, not a colour. */
  --akcent:#dca80c;
  /* The solid plane isn't near-white either. A mathematically exact
     inversion is useless to an eye two metres away — this is the same
     plane, just turned down. */
  --ploha:#c4bba8;
  --akcent-blijedi:#3d3417;
  --raster:radial-gradient(circle at 50% 50%,rgba(242,236,220,.13) .9px,transparent 1.1px);
}

/* The machine's edge bar is 9px across the full width: in the negative
   that becomes a bright band over everything. Let a THIN yellow line
   glow beneath it instead of a thick white one. */
[data-tone="ink"] .rub{background:var(--papir-3)}
/* The sleeve is a photograph — the brightest thing on a dark page.
   Dimmed slightly, a face is still recognisable without lighting up the
   room. */
[data-tone="ink"] .omot-ploce,[data-tone="ink"] .karton img{filter:brightness(.86)}
/* yellow text on a light plane has no contrast in the negative — put it back on dark */
[data-tone="ink"] [data-deck="hungarian"] .etiketa b,
[data-tone="ink"] [data-deck="hungarian"] .etiketa small{background:var(--papir-2)}

*{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;
}
/* speckle and fibre — paper is never clean */
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}

/* ── machine edge ───────────────────────────────────────────── */
.rub{height:9px;background:var(--tinta);position:relative;z-index:3}
.rub-2{height:3px;background:var(--akcent);position:relative;z-index:3}

/* ── header ───────────────────────────────────────────────── */
.zaglavlje{position:relative;z-index:3;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: yellow cartouche with black lettering — the house mark, the same on every deck */
.naslov{position:relative;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(23px,3.9vw,38px);line-height:.9;letter-spacing:.01em;
  color:var(--akcent-tekst);background:var(--akcent);border:3px solid var(--tinta);
  padding:4px 13px 6px}
.naslov::before{content:none}
.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)}

/* ── THE RECORD (signature) ─────────────────────────────────────
   The vinyl is always dark: the record doesn't change colour with
   the paper tone.                                                  */
.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);
}
/* the one glint we allow ourselves: light crossing the grooves */
.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}
/* spindle hole */
.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)}
/* the SHAPE of the label, not its colour, says which deck this is */
[data-deck="classical"] .etiketa{border:3px double var(--tinta)}
[data-deck="hungarian"] .etiketa{
  background:repeating-conic-gradient(var(--tinta) 0 25%,var(--akcent) 0 50%) 0 0/11px 11px}
[data-deck="hungarian"] .etiketa b,[data-deck="hungarian"] .etiketa small{
  background:var(--tinta);color:var(--akcent);padding:1px 7px}

/* THE NEEDLE — rests raised, drops onto the groove while playing */
.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%)}  /* headshell with stylus */
.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)}  /* spindle */
.gramofon.svira .igla{transform:rotate(-8deg)}

/* ── field / bordered panel ───────────────────────────────── */
.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)}

/* ── buttons ──────────────────────────────────────────────── */
.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(--ploha);color:var(--papir)}
.gumb.tih{background:var(--papir);color:var(--tinta);font-size:13px;padding:9px 17px}
.gumb.tih:hover{background:var(--ploha);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(--ploha);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}

/* ── labels ───────────────────────────────────────────────── */
.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}

/* ── THE YEAR: stamped into the run-out groove ─────────────── */
.godina{position:relative;isolation:isolate;font-family:var(--display);line-height:.92;
  padding-top:.06em;
  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}}

/* ── SLEEVE WALL (idle title screen) ──────────────────────────────
   A record-shop window: a grid of uneven tiles, some doubled, sleeves
   fading in and out each at their own pace. The 3px gap is a PLANE that
   separates — the same rule as the gaps between bars in a chart.
   The selection panel sits on a solid backing, so text never lands on
   the picture: legibility is never left to chance depending on
   whatever sleeve happens to be underneath. */
.zid{position:fixed;inset:0;z-index:0;display:grid;gap:3px;overflow:hidden;
  grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(5,1fr);
  grid-auto-flow:dense;pointer-events:none}
@media(max-width:700px){.zid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr)}}
.zid .plocica{position:relative;overflow:hidden;background:var(--papir-2)}
.zid .plocica.velika{grid-column:span 2;grid-row:span 2}
.zid .plocica img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:.08;transform:scale(1.045);
  transition:opacity 1.7s ease, transform 9s linear}
.zid .plocica.vidljiv img{opacity:.44;transform:scale(1)}

/* THE SAME WALL, THREE ROLES
   shop window — while a deck is being chosen: ambience, nothing clickable
   selection  — deck chosen: a shelf of sleeves, picked by eye and click
   dimmed     — something is playing: the wall steps back for the answer  */
.zid.izbor{pointer-events:auto}
.zid.izbor .plocica{cursor:pointer}
.zid.izbor .plocica.vidljiv img{opacity:.78}
.zid.izbor .plocica:hover img,
.zid.izbor .plocica:focus-within img{opacity:1;transform:scale(1.03)}
.zid.izbor .plocica:hover{outline:3px solid var(--akcent);outline-offset:-3px;z-index:1}
.zid.prigusen .plocica.vidljiv img{opacity:.16}
.zid.prigusen .plocica{cursor:default}

/* The caption only appears on hover: a sleeve is chosen by EYE, and the
   name is a fallback for when you're unsure. There's no year here — the
   year is the whole game. */
.zid .natpis{position:absolute;left:0;right:0;bottom:0;display:block;
  background:var(--papir);color:var(--tinta);font-family:var(--kond);font-weight:600;
  font-size:11px;letter-spacing:.03em;padding:5px 7px;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transform:translateY(101%);transition:transform .14s ease}
.zid.izbor .plocica:hover .natpis,
.zid.izbor .plocica:focus-within .natpis{transform:none}

/* bar above the shelf */
/* The instructions float directly below the header, so they don't sit in
   the middle of the shelf and cover the very sleeves you need to pick. */
.traka-izbor{position:fixed;top:clamp(96px,13vh,132px);left:50%;transform:translateX(-50%);
  z-index:3;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  background:var(--papir);border:3px solid var(--tinta);padding:8px 15px;max-width:94vw}

/* ── DECK SELECTION ──────────────────────────────────────────────
   Three decks, each showing ITS OWN sleeves. One wall mixing everything
   together wasn't a choice, it was noise — and decks are kept separate
   precisely so the eras don't blur into each other. */
#s-lock{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;
  align-items:center;gap:clamp(14px,2.4vh,26px);padding:clamp(8px,2vh,20px) 0}
.izbor-zaglavlje{text-align:center}
.izbor-zaglavlje .naslov.velik-znak{font-size:clamp(28px,5vw,50px);padding:4px 14px 7px;
  display:inline-block}
/* There used to be seven decks, now there are eleven. At the old sizing the
   second half fell off the bottom of the screen — and the title screen has
   to show ALL of them at once, because a choice you can't see doesn't
   exist. */
.izbor-ploca{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:clamp(7px,1vw,12px);width:min(1520px,97vw)}
.deck-panel{aspect-ratio:4/5}
@media(max-width:760px){.izbor-ploca{grid-template-columns:repeat(auto-fit,minmax(126px,1fr))}}
/* The chip strip must never wrap to three rows above the header. */
.ploce-prekidac{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:56vw}

.deck-panel{position:relative;overflow:hidden;cursor:pointer;padding:0;
  border:3px solid var(--tinta);background:var(--papir-2);
  aspect-ratio:3/4;display:block;text-align:left;color:var(--tinta)}
/* on a phone the tile used to be a thin strip: the caption was eating the sleeves */
@media(max-width:760px){
  .deck-panel{aspect-ratio:5/3}
  .natpis-ploce{padding:9px 12px 10px;gap:3px}
  .natpis-ploce .gumb.puni{margin-top:2px;padding:5px 14px}
  .deck-etiketa{width:26px;height:26px}
}
.mini-zid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);gap:2px}
.mini-zid img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:.4;transition:opacity 2.5s ease}
.deck-panel:hover .mini-zid img,
.deck-panel:focus-visible .mini-zid img{opacity:.78}
.deck-panel:hover,.deck-panel:focus-visible{outline:4px solid var(--akcent);outline-offset:-4px}

.natpis-ploce{position:absolute;left:0;right:0;bottom:0;background:var(--papir);
  border-top:3px solid var(--tinta);padding:9px 10px 10px;
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.natpis-ploce b{font-family:var(--kond);font-weight:600;font-size:clamp(11.5px,1.2vw,14px);
  letter-spacing:.09em;text-transform:uppercase;line-height:1.15}
.natpis-ploce small{font-family:var(--mono);font-size:9.5px;opacity:.7}
.natpis-ploce .gumb.puni{margin-top:4px;font-size:12px;padding:6px 16px}
.deck-panel:hover .natpis-ploce .gumb{background:var(--akcent);color:var(--akcent-tekst)}

.izbor-podnozje{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  justify-content:center;text-align:center;max-width:min(1180px,94vw)}

/* deck switcher in the header — the same choice, always within reach */
.ploce-prekidac{display:flex;gap:5px}
.cip{font-family:var(--kond);font-weight:600;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 9px;cursor:pointer;
  border:2px solid var(--tinta);background:var(--papir);color:var(--tinta)}
.cip:hover{background:var(--ploha);color:var(--papir)}
.cip.na{background:var(--akcent);color:var(--akcent-tekst)}
@media(max-width:620px){.ploce-prekidac{display:none}}
.ploca-izbor{position:relative;z-index:2;background:var(--papir);
  border:4px solid var(--tinta);padding:20px clamp(16px,3.5vw,40px) 18px;
  text-align:center;max-width:min(760px,94vw);
  display:flex;flex-direction:column;align-items:center}
.ploca-izbor .naslov.velik-znak{font-size:clamp(28px,5vw,50px);padding:4px 14px 7px}
.ploca-izbor .slogan{margin-top:8px}

.deckovi{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.deck{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
  border:3px solid var(--tinta);background:var(--papir);color:var(--tinta);
  padding:11px 15px 10px;min-width:clamp(140px,20vw,190px);
  transition:background .09s,color .09s}
.deck b{font-family:var(--kond);font-weight:600;font-size:14px;letter-spacing:.09em;
  text-transform:uppercase;line-height:1.1}
.deck small{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;opacity:.7}
.deck:hover,.deck:focus-visible{background:var(--ploha);color:var(--papir)}
.deck:hover small{opacity:.85}
/* mini label: the same shape a deck is recognised by on the disc itself */
.deck-etiketa{width:34px;height:34px;border-radius:50%;background:var(--akcent);
  box-shadow:0 0 0 2px var(--tinta);display:block;position:relative}
.deck-etiketa::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
  margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--papir)}
.deck-etiketa[data-deck="classical"]{border:3px double var(--tinta)}
.deck-etiketa[data-deck="hungarian"]{
  background:repeating-conic-gradient(var(--tinta) 0 25%,var(--akcent) 0 50%) 0 0/8px 8px}

/* ── SLEEVE NEXT TO THE ANSWER ────────────────────────────────
   A square with a hard edge, like a record in its sleeve. This image is
   the one place in the system where a photograph enters, so it carries
   the same border as everything else and never gets a shadow or a
   rounded corner. */
.otkrivenje{display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,3vw,34px);flex-wrap:wrap;width:100%}
.otkrivenje .odgovor-tekst{display:flex;flex-direction:column;align-items:center;min-width:0}
.omot-ploce{width:clamp(118px,20vw,232px);height:clamp(118px,20vw,232px);object-fit:cover;
  border:3px solid var(--tinta);background:var(--papir-2);flex:none;display:block}
@media(max-width:620px){.omot-ploce{width:132px;height:132px}}

/* ── SLEEVE BACK: the reverse side next to the revealed answer ──────
   The year is still the biggest thing on screen; below it comes
   everything the database knows about the card, in rows with dotted
   leaders like an index card. The data doesn't compete with the answer
   — it comes after it. */
.karton{border:4px solid var(--tinta);background:var(--papir);position:relative;
  padding:22px clamp(16px,3vw,30px) 18px;max-width:min(900px,94vw);
  display:flex;flex-direction:column;align-items:center}
.karton .polje-kod{background:var(--papir)}
.dosje{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin-top:16px;
  width:100%;max-width:620px;font-family:var(--mono);font-size:11.5px;align-items:baseline}
.dosje dt{text-transform:uppercase;letter-spacing:.07em;opacity:.55;white-space:nowrap}
.dosje dd{text-align:right;font-variant-numeric:tabular-nums}
.dosje dd a{color:var(--akcent-2);text-decoration:none;border-bottom:1px dotted currentColor}
@media(max-width:560px){.dosje{font-size:10.5px;gap:2px 8px}}

/* ── time bar ─────────────────────────────────────────────── */
.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}

/* ── stamp ────────────────────────────────────────────────── */
.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)}

/* ═══════════ HOST SCREEN ══════════════════════════════════ */
.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{position:relative;z-index:3;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)}

/* ═══════════ GAME ═══════════════════════════════════════════ */
.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(--ploha);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}

/* card = a small label taken from the sleeve */
.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(--ploha);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}
/* THE STARTING CARD is no longer dashed. A dashed border used to mean two
   things — "an empty slot you can pick" and "the card you started with" —
   so the same mark was saying two different things on the same screen. The
   starting card is now solid but quiet instead: a faded image and a grey
   border. Dashed now means only one thing: empty. */
.kartica.pocetna{color:var(--papir-3);border-color:var(--papir-3)}
.kartica.pocetna .omot-karte{filter:grayscale(1);opacity:.55;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}

/* slots: where the needle drops */
.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(--ploha);color:var(--papir);border-style:solid}
.utor:hover small{opacity:.85}
/* THE CHOSEN SLOT — the decision has to be readable from the far end of
   the table, not printed small underneath. The plane changes colour, the
   needle marks the spot, and the neighbouring anchors get an outline so
   it's visible WHICH gap is being contested. */
.utor.odabran{background:var(--akcent);color:var(--akcent-tekst);border-style:solid;
  box-shadow:inset 0 0 0 3px var(--tinta)}
.utor.odabran small{opacity:.92}
.igla-znak{display:block;font-size:11px;line-height:1;margin-bottom:2px}
.utor.prikaz{cursor:default}
.utor.prikaz:not(.odabran):hover{background:var(--papir);color:var(--tinta);border-style:dashed}
.utor.prikaz.odabran:hover{background:var(--akcent);color:var(--akcent-tekst)}
.odluka{border:3px solid var(--tinta);background:var(--papir-2);padding:11px 12px 13px;
  margin-bottom:4px;max-width:1340px}
.odluka .oznaka{margin-bottom:8px}
.odluka .utori{margin-top:0}

.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.uz-odabran{box-shadow:inset 0 0 0 3px var(--akcent)}
.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}
/* The end of the deck comes BELOW the answer, set off by the machine's
   rule line — you see first whether the last card landed, and only then
   that the game is over. */
.kraj-ploce{border-top:3px solid var(--tinta);margin-top:18px;padding-top:16px;
  width:min(900px,100%);display:flex;flex-direction:column;align-items:center;gap:9px}
.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}

/* ── game setup ──────────────────────────────────────────── */
.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)}

/* ── ROOM ─────────────────────────────────────────────────────────
   The code gets read out over the phone, so it has to be big and free of
   ambiguous characters (no O/0 or I/1 in the alphabet that generates
   it). */
.soba-kod{font-family:var(--display);font-size:clamp(44px,9vw,86px);line-height:1;
  letter-spacing:.14em;margin-top:6px}
.soba-veza{font-family:var(--mono);font-size:12px;border:2px dashed var(--tinta);
  padding:8px 12px;margin:6px auto 0;display:inline-block;cursor:pointer;word-break:break-all}
.soba-veza:hover{background:var(--ploha);color:var(--papir)}
.soba-igraci{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.igrac{font-family:var(--kond);font-weight:600;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;border:3px solid var(--tinta);background:var(--papir);padding:7px 13px}
.igrac.ja{background:var(--akcent);color:var(--akcent-tekst)}
.igrac small{font-family:var(--mono);font-size:9px;text-transform:lowercase;opacity:.65;
  letter-spacing:0;margin-left:5px}

/* ── 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}

/* ── phone ───────────────────────────────────────────────── */
.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(--ploha);color:var(--papir)}
.odgovor{border:3px solid var(--tinta);background:var(--papir);padding:20px;width:100%;max-width:420px}

/* ── admin / overview ─────────────────────────────────────── */
.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(--ploha);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)}
/* status badge in the catalogue — do NOT call it .znak: that name is the
   logo in the header, and a later rule would quietly hijack the header
   (a 2px border around the wordmark). */
.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(--ploha);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}
}
/* KIOSK MODE ON A 4K SCREEN: clamp() upper bounds are computed for normal
   viewing, so at 3840px everything looks tiny from three metres away.
   Zoom scales the whole system in one move instead of rewriting every
   bound by hand. */
@media(min-width:2200px){ body{ zoom:1.45 } }
@media(min-width:3200px){ body{ zoom:1.9 } }

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

/* ── NOTE FROM THE TABLE ────────────────────────────────────────
   Bottom right, collapsed to a tab. Mid-game it must not claim anything
   beyond its own corner, and open it must sit above everything except
   the modal (which is at z-index 50). */
.bil{position:fixed;right:14px;bottom:14px;z-index:45;font-family:var(--kond)}
.bil-jezicak{font:600 12px/1 var(--kond);letter-spacing:.12em;text-transform:uppercase;
  padding:9px 13px;border:3px solid var(--tinta);background:var(--papir-2);color:var(--tinta);
  cursor:pointer;opacity:.62;transition:opacity .15s}
.bil-jezicak:hover{opacity:1;background:var(--ploha);color:var(--papir)}
.bil-ploca{display:none;width:min(340px,calc(100vw - 28px));border:3px solid var(--tinta);
  background:var(--papir);box-shadow:0 10px 0 rgba(0,0,0,.28)}
.bil.otvoren .bil-ploca{display:block}
.bil.otvoren .bil-jezicak{display:none}
.bil-vrh{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 11px;background:var(--ploha);color:var(--papir);
  font:600 11px/1 var(--kond);letter-spacing:.16em;text-transform:uppercase}
.bil-x{background:none;border:0;color:inherit;font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
/* What the note is about — this is the whole point of the box, so it comes BEFORE the field. */
.bil-uz{padding:8px 11px;font-family:var(--mono);font-size:11px;line-height:1.45;
  border-bottom:1px solid var(--papir-2);color:var(--akcent-2)}
.bil-vrste{display:flex;gap:5px;flex-wrap:wrap;padding:9px 11px 0}
.bil textarea{width:calc(100% - 22px);margin:9px 11px;padding:8px;font-family:var(--slab);
  font-size:14px;border:2px solid var(--papir-3);background:var(--papir-2);color:var(--tinta);
  resize:vertical}
.bil textarea:focus{outline:2px solid var(--akcent);outline-offset:0}
.bil-dno{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:0 11px 11px}
.bil-dno .gumb{padding:7px 15px;font-size:12px}
@media(max-width:620px){.bil{right:8px;bottom:8px}}

/* note list */
.bil-red{border:3px solid var(--tinta);background:var(--papir-2);padding:11px 13px;margin-bottom:9px}
.bil-red.gotovo{opacity:.45}
.bil-red .zaglavak{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;color:var(--akcent-2)}
.bil-red .rec{font-family:var(--slab);font-size:16px;margin:6px 0 8px;line-height:1.45}
.bil-vrsta{font:600 10px/1 var(--kond);letter-spacing:.14em;text-transform:uppercase;
  padding:3px 7px;background:var(--akcent);color:var(--akcent-tekst)}
.bil-vrsta[data-v="greska"]{background:var(--pogreska);color:var(--papir)}
.bil-vrsta[data-v="ideja"]{background:var(--papir-3);color:var(--tinta)}

/* ── SCREEN ───────────────────────────────────────────────────
   The video sits OUTSIDE #mid because that middle section gets
   rewritten every polling round; inside it, the trailer would stutter
   once a second. */
.platno{margin:0 auto 14px;width:min(100%,880px);padding:0 4px}
.platno-okvir{position:relative;border:3px solid var(--tinta);background:#000;
  box-shadow:0 8px 0 rgba(0,0,0,.3)}
/* film-strip perforation along the edge — the only decoration in the file, and it carries meaning */
.platno-okvir::before,.platno-okvir::after{content:"";position:absolute;top:0;bottom:0;width:9px;
  background:repeating-linear-gradient(to bottom,var(--tinta) 0 7px,transparent 7px 15px);
  opacity:.5;pointer-events:none}
.platno-okvir::before{left:-12px}
.platno-okvir::after{right:-12px}
.platno video{display:block;width:100%;max-height:min(62vh,560px);background:#000}
/* The jukebox carries both a header and a control bar, so the screen has
   to fit in what's left — otherwise you'd watch the trailer by
   scrolling. */
#h-platno{margin-bottom:10px}
#h-platno video{max-height:min(52vh,480px)}
@media(max-width:620px){.platno-okvir::before,.platno-okvir::after{display:none}}

/* ── PROJECTOR: academy leader ───────────────────────────────
   What used to sit at the head of every reel. For a film deck this is the
   equivalent of the spinning record — a machine waiting for someone to
   switch it on. */
.projektor{display:flex;justify-content:center;margin:8px 0 12px}
.vodic{position:relative;width:var(--d);height:var(--d);border-radius:50%;
  border:4px solid var(--tinta);background:
    radial-gradient(circle at 50% 50%,var(--papir-2) 0 62%,var(--papir) 62% 100%);
  overflow:hidden;isolation:isolate}
.vodic .kriz{position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;background:var(--tinta);opacity:.5}
.vodic .kriz.uspravno{left:calc(50% - 1px);top:0;bottom:0;right:auto;width:2px;height:auto}
/* the hand sweeps the circle in one second — exactly as on a real leader */
.vodic .kazaljka{position:absolute;left:50%;top:0;width:3px;height:50%;background:var(--akcent);
  transform-origin:50% 100%;transform:translateX(-50%) rotate(0deg)}
.projektor.radi .kazaljka{animation:vodic-krug 1s linear infinite}
@keyframes vodic-krug{to{transform:translateX(-50%) rotate(360deg)}}
.vodic .broj{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:calc(var(--d) * .46);color:var(--tinta);
  line-height:1;letter-spacing:-.02em}
/* a poster is not a sleeve: 2:3 is its shape, and the title sits at the bottom */
[data-deck="film"] .omot-ploce,[data-deck="crtani"] .omot-ploce,[data-deck="serije"] .omot-ploce,[data-deck="reklame"] .omot-ploce,[data-deck="epp"] .omot-ploce,[data-deck="istok"] .omot-ploce{width:clamp(104px,15vw,176px);height:auto;aspect-ratio:2/3;
  object-fit:cover}

/* ── CARD ────────────────────────────────────────────────────
   One look in both places: the team panel and the placement row. These
   used to be two components — a panel with no picture, and a middle row
   with a picture whose size depended on however much space flex left
   over. The same game looked different on the left than it did in the
   middle.

   The shape is an upright rectangle, as in the original game: a SQUARE
   thumbnail on top, the year below it, then the artist. The width is
   FIXED — the moment it's only given a `min-width`, the image stretches
   whenever a team has fewer cards. */
.karta-w{width:clamp(74px,5.8vw,96px)}
.kartica,.sidro{
  flex:0 0 auto;
  width:clamp(74px,5.8vw,96px);
  min-width:0;
  padding:6px 6px 8px;
  text-align:center;
  display:flex;flex-direction:column;align-items:stretch;gap:0;
}
.omot-karte{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;
  border:2px solid var(--tinta);margin-bottom:6px;background:var(--papir-3);
}
.omot-karte.prazno{background:
  repeating-linear-gradient(45deg,var(--papir-3) 0 5px,transparent 5px 10px)}
.sidro{width:clamp(94px,7.4vw,124px);
  background:var(--papir-2);border:3px solid var(--tinta);
  font-family:var(--display);font-size:clamp(17px,2.2vw,25px);line-height:1;
  font-variant-numeric:tabular-nums;justify-content:flex-start}
.sidro small{font-family:var(--kond);font-weight:500;font-size:10px;
  letter-spacing:.05em;text-transform:uppercase;opacity:.62;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sidro b{font-weight:inherit;display:block}

/* An empty slot has to LOOK empty: no plane, and narrower than a card. */
.utor{background:transparent;min-width:0;width:clamp(86px,6.6vw,112px);
  padding:10px 7px;font-size:clamp(14px,1.8vw,19px)}
.utor:hover{background:var(--ploha)}
@media(max-width:620px){
  .kartica{width:64px;padding:5px 4px 6px}
  .sidro{width:78px;padding:5px 4px 7px}
  .utor{width:72px;padding:8px 5px}
  }

/* ── ENDGAME ────────────────────────────────────────────────────
   When someone reaches the target the game does NOT stop, so the table
   has to know at once why play is continuing — otherwise it looks
   broken. */
.zavrsni-natpis{border:3px solid var(--tinta);background:var(--papir-2);
  padding:8px 14px 10px;margin-bottom:4px;max-width:64ch;text-align:center}
.zavrsni-natpis b{display:block;font-family:var(--display);letter-spacing:.04em;
  font-size:clamp(17px,2.6vw,28px);line-height:1;text-transform:uppercase}
.zavrsni-natpis span{display:block;font-family:var(--kond);font-size:12.5px;
  opacity:.72;margin-top:5px;line-height:1.35}
.zavrsni-natpis.majstor{background:var(--akcent);color:var(--akcent-tekst);
  border-color:var(--tinta)}
.zavrsni-natpis.majstor span{opacity:.85}
/* a team that can no longer win stays visible, but goes quiet */
.ekipa.ispao{opacity:.42}
.ekipa.ispao .kapa{background:var(--papir)}
/* someone else's game: visible, but clearly not yours */
.zavrsni-natpis.tudja-partija{background:var(--papir-3);color:var(--papir);
  border-color:var(--tinta)}
.zavrsni-natpis.tudja-partija span{opacity:.9}


/* ── MOUSE HOVER ────────────────────────────────────────────────
   Hover used to do a FULL INVERSION: the plane turned to ink, the text to
   paper. While slots and cards were small text fields that was clear and
   fast. Now that they carry a PICTURE, a solid black plane fights the
   sleeve and looks like something burned out — especially on a big
   screen, where that's half the table gone black.

   Hover now HINTS rather than repaints: an empty slot gets a pale accent
   and a firm border, a card gets an accent-coloured shadow. The full
   accent stays reserved for SELECTED, so the three states step clearly:
       dashed empty  →  pale on hover  →  full accent when selected
   The text stays in ink throughout, so contrast never jumps (15:1 in the
   light theme, 8.4:1 in the dark one). */
.utor:hover,.utor:focus-visible{
  background:var(--akcent-blijedi);
  color:var(--tinta);
  border-style:solid;
  border-color:var(--akcent);
}
.utor:hover small{opacity:.8;color:var(--tinta)}
.utor.prikaz:not(.odabran):hover{background:transparent;border-style:dashed;
  border-color:var(--tinta)}
.utor.odabran:hover{background:var(--akcent);color:var(--akcent-tekst);
  border-color:var(--tinta)}

/* A card with a picture doesn't get repainted — it just lifts. */
.kartica:hover{background:var(--papir-2);color:var(--tinta);
  box-shadow:3px 3px 0 var(--akcent)}
.kartica:hover .ki{color:var(--akcent-2)}
.kartica:hover .omot-karte{border-color:var(--akcent)}
.kartica.pocetna:hover{background:var(--papir-2);color:var(--papir-3);
  box-shadow:3px 3px 0 var(--papir-3)}
.kartica.pocetna:hover .omot-karte{border-color:var(--papir-3)}
/* flag next to the country of origin — drawn, so it doesn't depend on the device's font */
.zastava{display:inline-block;vertical-align:-3px;margin-right:7px;
  border:1px solid var(--tinta);box-shadow:1px 1px 0 rgba(0,0,0,.18)}
.red-zastava{display:flex;align-items:center;gap:0}
.zemlja-ime{font-family:var(--kond);font-weight:600;letter-spacing:.02em}

/* ── DECK CROSS-SECTION ────────────────────────────────────────
   Thirteen decks, side by side. Density is ONE colour at varying
   strength, not thirteen accent colours: nobody can tell thirteen colours
   apart, and they wouldn't mean anything anyway — a deck isn't a category
   you memorise by colour, it's a row you read. The axis is shared, so the
   bars can be compared; that's the whole point of the chart. */
.presjek-mreza{font-family:var(--mono);font-size:11px;overflow-x:auto;padding-bottom:4px}
.pm-zaglavlje,.pm-red{display:grid;align-items:center;gap:2px;
  grid-template-columns:118px 30px repeat(var(--stupaca),minmax(26px,1fr)) 52px;
  min-width:640px}
.pm-zaglavlje{color:var(--akcent-2);letter-spacing:.04em;padding-bottom:3px}
.pm-dek{text-align:center}
.pm-dek::before{content:"’"}
.pm-skupina{font-family:var(--kond);font-weight:600;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--akcent-2);margin:9px 0 3px;
  border-bottom:1px solid var(--papir-2);padding-bottom:3px}
.pm-ime{font-family:var(--kond);font-weight:600;font-size:12.5px;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-prije{text-align:right;color:var(--akcent-2);font-size:10px;padding-right:4px}
.pm-broj{text-align:right;font-variant-numeric:tabular-nums;color:var(--akcent-2)}
/* one colour, strength carries the quantity — 2px of gap so the cells don't fuse together */
.pm-celija{height:20px;display:flex;align-items:center;justify-content:center;
  font-size:9px;
  background:color-mix(in srgb, var(--tinta) calc(var(--jacina) * 82%), var(--papir-2));
  transition:color .1s}
.pm-celija.prazna{background:transparent;box-shadow:inset 0 0 0 1px var(--papir-2)}
/* The number on hover sits on its OWN chip, not directly on the cell.
   I first coloured it to track the background's strength — but text and
   background move in the same direction, so at the middle of the scale
   contrast falls to 1.1:1 and the number disappears. A chip carries its
   own backing, so it's readable at every strength. */
.pm-celija i{font-style:normal;visibility:hidden}
.pm-red:hover .pm-celija:not(.prazna) i{
  visibility:visible;background:var(--papir);color:var(--tinta);
  padding:1px 3px;line-height:1;box-shadow:0 0 0 1px var(--papir-3)}
.pm-red:hover .pm-ime{color:var(--akcent-2)}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .pm-celija{background:var(--tinta);opacity:calc(.14 + var(--jacina) * .86)}
  .pm-celija.prazna{opacity:1}
}

.presjek-tabla td{vertical-align:middle}
.presjek-tabla .d{text-align:right;font-variant-numeric:tabular-nums}
.pm-medij{color:var(--akcent-2);font-size:12px;margin-right:3px}
.traka-celija{white-space:nowrap}
.traka-celija b{font-family:var(--mono);font-size:11px;font-weight:600;
  font-variant-numeric:tabular-nums;margin-left:7px}
.mini-traka{display:inline-block;width:96px;height:9px;background:var(--papir-2);
  vertical-align:-1px;position:relative}
.mini-traka i{display:block;height:100%;background:var(--tinta)}
/* A miss is NOT the same measurement as a hit: a different metric needs a
   different mark — stripes instead of a solid plane, so it never reads as
   "same column, different number". */
.mini-traka.promasaj i{background:repeating-linear-gradient(45deg,
  var(--pogreska) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--pogreska)}
.tiho{color:var(--papir-3);font-family:var(--kond)}
@media(max-width:620px){
  .pm-zaglavlje,.pm-red{grid-template-columns:82px 24px repeat(var(--stupaca),minmax(18px,1fr)) 42px;
    min-width:520px}
  .mini-traka{width:60px}
}

/* ── LOGIN ───────────────────────────────────────────────── */
.prijava-ploca{border:3px solid var(--tinta);background:var(--papir-2);
  padding:clamp(22px,4vw,40px);width:min(440px,92vw);text-align:center;
  box-shadow:7px 7px 0 var(--akcent)}
.prijava-obrazac{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.prijava-obrazac input{flex:1;min-width:180px;padding:11px 12px;font-family:var(--mono);
  font-size:15px;border:3px solid var(--tinta);background:var(--papir);color:var(--tinta)}
.prijava-obrazac input:focus{outline:3px solid var(--akcent);outline-offset:0}

/* ── GAMES ──────────────────────────────────────────────────────
   One card per game. A deck is recognised by ITS OWN label (the same
   colour it carries in the game itself), so you don't need to read the
   title to know what was played. */
.filtar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.filtar input{flex:1;min-width:240px;padding:10px 12px;font-family:var(--slab);
  font-size:15px;border:3px solid var(--tinta);background:var(--papir);color:var(--tinta)}
.filtar input:focus{outline:3px solid var(--akcent);outline-offset:0}
.cipovi{display:flex;flex-wrap:wrap;gap:4px}

.partije-mreza{display:grid;gap:11px;
  grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}
.partija{border:3px solid var(--tinta);background:var(--papir-2);padding:0;
  display:flex;flex-direction:column}
.p-vrh{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:6px 11px;background:var(--ploha);color:var(--papir)}
.p-ploca{font-family:var(--display);font-size:15px;letter-spacing:.02em;
  text-transform:uppercase;line-height:1.1}
.p-ploca::before{content:var(--katalog);font-family:var(--mono);font-size:8.5px;
  letter-spacing:.1em;opacity:.65;display:block;text-transform:none}
.p-kad{font-family:var(--mono);font-size:10px;opacity:.75;white-space:nowrap}
.p-ekipe{padding:9px 11px 4px;display:flex;flex-direction:column;gap:3px}
.p-ekipa{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:2px 0;border-bottom:1px dotted var(--papir-3)}
.p-ekipa:last-child{border-bottom:0}
.p-ime{font-family:var(--kond);font-weight:600;font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-bod{font-family:var(--display);font-size:20px;line-height:1;font-variant-numeric:tabular-nums}
/* The winner isn't marked with colour but with a STAMP — colour would be confused with the deck's own colour. */
.p-ekipa.pobjednik .p-ime::after{content:"★";color:var(--akcent-2);margin-left:6px;font-size:12px}
.p-ekipa.pobjednik .p-bod{color:var(--akcent-2)}
.p-brojke{display:flex;flex-wrap:wrap;gap:9px;padding:6px 11px 9px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--akcent-2);border-top:1px solid var(--papir-3)}
.p-brojke b{font-family:var(--display);font-size:14px;color:var(--tinta);
  margin-right:3px;letter-spacing:0}
.p-soba{border:1px solid var(--akcent-2);padding:1px 5px}
.p-najteza{padding:7px 11px;border-top:1px solid var(--papir-3);
  font-family:var(--slab);font-size:12px;line-height:1.4}
.p-oznaka{font-family:var(--kond);font-weight:600;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--akcent-2);display:block}
.p-najteza b{font-variant-numeric:tabular-nums}
.p-mimo{color:var(--pogreska);font-family:var(--mono);font-size:10px;margin-left:5px}
.p-nedovrsena{padding:5px 11px;font-family:var(--kond);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--papir-3);border-top:1px solid var(--papir-3)}
@media(max-width:620px){.partije-mreza{grid-template-columns:1fr}}
.veza-dalje{text-decoration:none;display:inline-flex;align-items:baseline;gap:9px}
.veza-dalje span{font-family:var(--kond);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--akcent-2);border-bottom:2px solid var(--akcent)}
.veza-dalje:hover span{background:var(--akcent);color:var(--akcent-tekst)}

/* ════════════════════════════════════════════════════════════
   KVIZ — the television version

   One rule carries the whole layout: THE PAGE NEVER SCROLLS. Everything
   fits inside the height of the screen, and the only thing allowed to
   slide is the year timeline, and only horizontally, within its own
   band. You don't scroll on a television — there's no mouse and no
   thumb, and whatever isn't visible simply doesn't exist.

   Measurements are in `vmin`, not pixels: the same layout works on a
   laptop and a 4K television without a single media query, because
   everything scales with the screen.
   ═══════════════════════════════════════════════════════════ */
.kviz-body{overflow:hidden;height:100dvh}
.kviz{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;
  gap:clamp(6px,1vh,14px);padding:clamp(8px,1.4vh,18px) clamp(10px,1.6vw,26px)}

/* ── teams ── */
.k-ekipe{display:flex;gap:clamp(6px,1vw,14px);justify-content:center;flex-wrap:wrap}
.k-ekipa{display:flex;align-items:baseline;gap:clamp(6px,.8vw,12px);
  border:3px solid var(--tinta);background:var(--papir-2);padding:clamp(3px,.6vh,8px) clamp(9px,1.1vw,18px)}
.k-ekipa.na-redu{background:var(--akcent);color:var(--akcent-tekst);
  box-shadow:5px 5px 0 var(--tinta)}
.k-ime{font-family:var(--display);font-size:clamp(15px,2.1vmin,34px);text-transform:uppercase;
  line-height:1;letter-spacing:.02em}
.k-bod{font-family:var(--display);font-size:clamp(17px,2.6vmin,42px);line-height:1;
  font-variant-numeric:tabular-nums}
.k-bod i{font-family:var(--mono);font-size:.44em;font-style:normal;opacity:.6}
.k-zet{font-family:var(--mono);font-size:clamp(9px,1.2vmin,18px);letter-spacing:2px;opacity:.75}

/* ── stage ── */
.k-scena{position:relative;display:flex;align-items:center;justify-content:center;
  border:3px solid var(--tinta);background:var(--papir-2);overflow:hidden;min-height:0}
.k-player{position:absolute;inset:0;opacity:0;pointer-events:none}
.k-player.vidljiv{opacity:1;z-index:2}
/* YouTube and the record are TWO screens stacked over the whole stage —
   never one below the other: stacked, the hidden one would fall out of
   frame and be heard but not seen. Only the active source's screen is
   shown. */
.k-player #yt,.k-player iframe,.k-player #lokvid{position:absolute;inset:0;
  width:100%;height:100%;display:block}
.k-player.lok #yt,.k-player.lok iframe{display:none}
.k-player:not(.lok) #lokvid{display:none}
/* THE THIRD MACHINE: same overlay slot and show/hide convention as the
   player above, but for a still image. Letterboxed like local video
   (object-fit:contain, black bars) rather than cropped — a Bruegel cropped
   to a square is a different painting. */
/* The picture and its caption stand TOGETHER, centred, at their natural
   size. The picture used to be stretched to the full height with the
   caption glued to the bottom, leaving a black hole gaping between them
   across half the screen — the biggest thing on the stage was empty
   space. */
.k-slika{position:absolute;inset:0;opacity:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(6px,1.2vh,16px);padding:clamp(6px,1.5vh,22px)}
.k-slika.vidljiv{opacity:1;z-index:2}
.k-slika>img{flex:0 1 auto;max-width:100%;min-height:0;object-fit:contain;
  display:block;border:2px solid var(--tinta);background:#000}
/* The question, on a plate across the foot of the picture. A caption laid
   over a photograph is unreadable half the time — dark on dark, light on
   light — so it gets solid ground of its own and the picture is simply
   shorter. Same idiom as the year strip on a timeline card. */
.k-pitanje{display:none}
/* The caption sits IMMEDIATELY below the picture, like a caption under a
   photograph — not a band glued to the bottom of the screen, miles away
   from whatever it describes. */
.k-pitanje.ima{display:flex;flex:0 0 auto;max-width:100%;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(6px,1.1vh,15px) clamp(12px,2.2vw,34px);
  background:var(--tinta);color:var(--papir);
  font-family:var(--slab);font-weight:600;line-height:1.2;
  font-size:clamp(15px,2.4vmin,40px);
  border-bottom:4px solid var(--akcent)}
.k-zastor{position:relative;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(8px,2vh,26px);width:100%;height:100%;
  background:var(--papir-2)}

/* SIGNATURE: a ring that empties out. When there's only listening to do,
   the screen has nothing to show — so it shows TIME instead, in a way
   that reads from three metres away. */
.k-ploca-okvir{position:relative;width:clamp(150px,34vmin,420px);aspect-ratio:1}
.k-prsten{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.k-prsten circle{fill:none;stroke-width:3.2}
.k-prsten-trag{stroke:var(--papir-3);opacity:.35}
.k-prsten-tok{stroke:var(--akcent);stroke-dasharray:289;stroke-dashoffset:289;
  stroke-linecap:butt}
.k-ploca{position:absolute;inset:9%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--vinil-2) 0 27%,var(--vinil-1) 27% 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.06)}
.k-ploca.vrti{animation:k-vrti 1.8s linear infinite}
@keyframes k-vrti{to{transform:rotate(360deg)}}
.k-etiketa{width:42%;aspect-ratio:1;border-radius:50%;background:var(--etiketa-boja);
  color:var(--etiketa-tekst);display:flex;flex-direction:column;align-items:center;
  justify-content:center;line-height:1}
.k-etiketa b{font-family:var(--display);font-size:clamp(15px,3.4vmin,52px)}
.k-etiketa small{font-family:var(--kond);font-weight:600;font-size:clamp(7px,1.1vmin,16px);
  letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.k-poruka{text-align:center;line-height:1.15}
.k-poruka b{display:block;font-family:var(--display);font-size:clamp(22px,5vmin,78px);
  text-transform:uppercase;letter-spacing:.01em}
.k-poruka span{font-family:var(--kond);font-weight:600;font-size:clamp(11px,1.7vmin,26px);
  letter-spacing:.2em;text-transform:uppercase;opacity:.6}

/* ── reveal: the year is the star ── */
.k-otkrivenje{position:relative;z-index:4;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(8px,2vh,30px);background:var(--papir-2);padding:clamp(8px,2vh,26px)}
.k-zig{font-family:var(--display);font-size:clamp(13px,2vmin,30px);letter-spacing:.22em;
  text-transform:uppercase;padding:clamp(2px,.5vh,7px) clamp(10px,1.4vw,22px);
  border:3px solid currentColor}
.k-zig.tocno{color:var(--tocno)} .k-zig.promasaj{color:var(--pogreska)}
/* THE REVEAL IS A STACK, NOT A ROW. Side by side, the year had to be
   sized against the viewport and overflowed a narrow column — on a music
   deck (left column 32%) it ran clean over the timeline. Verdict, then
   sleeve, then year and title beneath it: everything measured against the
   COLUMN, so it cannot spill into the board no matter how narrow. */
.k-karta{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(6px,1.4vh,18px);max-width:100%;min-width:0}
.k-karta .k-tekst{max-width:100%;min-width:0}
/* The sleeve keeps ITS OWN aspect ratio: a film poster is upright and
   must never get cropped to a square — „The Young Girls of Rochef…" is
   not a title. Height is the anchor, width follows the image. */
.k-omot{height:auto;width:auto;max-height:clamp(130px,31vh,400px);max-width:100%;
  border:3px solid var(--tinta);box-shadow:7px 7px 0 var(--akcent)}
.k-godina{font-family:var(--display);font-size:var(--god,clamp(46px,9vmin,150px));
  line-height:.9;position:relative;isolation:isolate;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.k-godina::before{content:attr(data-g);position:absolute;left:-.045em;top:.045em;
  color:var(--akcent);z-index:-1}
.k-naslov{font-family:var(--slab);font-weight:600;font-size:clamp(14px,2.2vmin,32px);
  line-height:1.2;margin-top:clamp(2px,.6vh,9px);overflow-wrap:anywhere}
.k-izvodjac{font-family:var(--kond);font-weight:600;font-size:clamp(12px,1.9vmin,30px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--akcent-2)}
/* Attribution line for an image card — museum, collection or licence, only
   shown when the server actually sends one (info.source and friends). Small
   and quiet: the year is still the punchline, this is the fine print. */
.k-izvor{font-family:var(--mono);font-size:clamp(9px,1.3vmin,18px);opacity:.6;
  margin-top:clamp(2px,.5vh,8px);letter-spacing:.02em}
.k-kraj{display:flex;align-items:baseline;gap:clamp(10px,1.6vw,26px);margin-top:clamp(4px,1vh,14px)}
.k-kraj span{font-family:var(--kond);font-weight:600;font-size:clamp(10px,1.5vmin,22px);
  letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.k-kraj b{font-family:var(--display);font-size:clamp(26px,6vmin,96px);line-height:1;
  text-transform:uppercase;position:relative;isolation:isolate}
.k-kraj b::before{content:attr(data-t);position:absolute;left:-4px;top:4px;
  color:var(--akcent);z-index:-1}

/* ── footer ──
   The height is FIXED, not derived from the content. „Spusti iglu" is a
   tall button, while „ponovi" and „druga igla" are short ones — so every
   phase change made the whole layout jump up and down. The bar now always
   claims the same space, and the content centres inside it. A screen that
   moves on its own looks broken even when everything is working
   correctly. */
.k-dno{display:flex;align-items:center;gap:clamp(8px,1.4vw,22px);
  min-height:clamp(46px,6.4vmin,104px)}
/* The main button sits in the CENTRE OF THE SCREEN, not the centre of
   whatever space is left over. That's why the left and right sides are
   equal width, with the button between them — otherwise the width of the
   right side pushes it left the moment anything gets added there. */
.k-lijevo,.k-desno{display:flex;align-items:center;gap:9px;flex:1 1 0;min-width:0}
.k-lijevo{justify-content:flex-start}
.k-desno{justify-content:flex-end}
.k-znak{font-family:var(--display);font-size:clamp(12px,1.8vmin,30px);letter-spacing:.04em}
.k-kat{font-family:var(--mono);font-size:clamp(8px,1.1vmin,16px);opacity:.5}
.k-kat::before{content:var(--katalog)}
.k-gumbi{display:flex;gap:clamp(6px,1vw,16px);align-items:center;flex-wrap:nowrap;
  justify-content:center;flex:0 0 auto;min-height:inherit}
.k-gumbi .gumb.velik{font-size:clamp(15px,2.4vmin,38px);padding:clamp(7px,1.2vh,18px) clamp(16px,2.4vw,44px)}
.k-tih{font-family:var(--kond);font-weight:600;font-size:clamp(11px,1.7vmin,26px);
  letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--tinta);
  background:transparent;color:var(--tinta);padding:clamp(4px,.9vh,13px) clamp(9px,1.3vw,24px);
  cursor:pointer;text-decoration:none}
.k-tih:hover{background:var(--akcent);color:var(--akcent-tekst);border-color:var(--akcent)}

/* ── setup ── */
.k-postava{position:fixed;inset:0;z-index:20;display:flex;align-items:center;
  justify-content:center;background:var(--papir);padding:20px}
.k-postava-ploca{border:3px solid var(--tinta);background:var(--papir-2);
  padding:clamp(20px,3.4vmin,44px);width:min(560px,94vw);text-align:center;
  box-shadow:9px 9px 0 var(--akcent)}
.k-podnaslov{font-family:var(--kond);font-weight:600;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.6;margin:10px 0 20px}
.k-polje{display:block;text-align:left;margin-bottom:12px}
.k-polje span{display:block;font-family:var(--kond);font-weight:600;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-bottom:3px}
.k-polje select,.k-polje input{width:100%;padding:9px 10px;font-family:var(--slab);
  font-size:15px;border:3px solid var(--tinta);background:var(--papir);color:var(--tinta)}
.k-polja2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.k-nota{font-family:var(--kond);font-size:11px;opacity:.55;margin-top:16px;line-height:1.45}
.k-jez{padding:clamp(3px,.6vh,8px) clamp(6px,.8vw,12px);font-size:clamp(9px,1.2vmin,17px)}
.k-jez.na{background:var(--akcent);color:var(--akcent-tekst);border-color:var(--akcent)}

/* ── PROJECTOR on the quiz screen: a reel, not a record ───── */
.k-vodic{position:absolute;inset:9%;border-radius:50%;overflow:hidden;isolation:isolate;
  border:3px solid var(--tinta);
  background:radial-gradient(circle at 50% 50%,var(--papir-2) 0 62%,var(--papir) 62% 100%)}
.k-kriz{position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;background:var(--tinta);opacity:.45}
.k-kriz.uspravno{left:calc(50% - 1px);top:0;bottom:0;right:auto;width:2px;height:auto}
.k-kazaljka{position:absolute;left:50%;top:0;width:4px;height:50%;background:var(--akcent);
  transform-origin:50% 100%;transform:translateX(-50%)}
.k-vodic.radi .k-kazaljka{animation:k-vodic-krug 1s linear infinite}
@keyframes k-vodic-krug{to{transform:translateX(-50%) rotate(360deg)}}
.k-broj{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:clamp(34px,11vmin,150px);line-height:1;color:var(--tinta)}

/* ── HOST: microphone and line ─────────────────────────────────
   A voice, not a face. The microphone belongs to the same world as the
   record and the label, and the line changes every round so the
   broadcast has a tone of voice. */
/* The host is NOT a button. In this system a border and an offset shadow
   are the sign that something is clickable — so the line used to look
   like the biggest button on screen and kept drawing the hand toward it.
   Now it reads as a quote instead: no border, italics, a thin yellow rule
   at the side and a microphone marking who's speaking. */
.k-domacin{display:flex;align-items:center;gap:clamp(8px,1.2vw,18px);
  max-width:min(88%,900px);padding:clamp(2px,.4vh,7px) 0 clamp(2px,.4vh,7px) clamp(8px,1.1vw,16px);
  border:0;background:none;box-shadow:none;border-left:3px solid var(--akcent)}
.k-mik{width:clamp(17px,2.6vmin,40px);height:auto;flex:0 0 auto}
.k-mik{opacity:.7}
.k-mik .mik-tijelo{fill:var(--tinta)}
.k-mik .mik-reske{stroke:var(--papir);stroke-width:1.6;stroke-linecap:round}
.k-mik .mik-jaram,.k-mik .mik-noga{fill:none;stroke:var(--tinta);stroke-width:3;
  stroke-linecap:round}
.k-rijec{font-family:var(--slab);font-weight:500;font-style:italic;
  font-size:clamp(13px,2vmin,32px);line-height:1.3;text-align:left;opacity:.86}
/* the line enters as though spoken, not as though it just appeared */
.k-domacin.govori{animation:k-govor .34s cubic-bezier(.2,.9,.3,1)}
@keyframes k-govor{
  from{opacity:0;transform:translateY(7px) scale(.985)}
  to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .k-domacin.govori{animation:none}
  .k-vodic.radi .k-kazaljka{animation:none}}
/* Every number gives a short "tick" — on a real leader that was the flash of a frame change. */
.k-broj.kucaj{animation:k-kuc .9s cubic-bezier(.2,.9,.3,1)}
@keyframes k-kuc{
  0%{transform:scale(1.24);opacity:.35}
  18%{transform:scale(1);opacity:1}
  100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.k-broj.kucaj{animation:none}}
/* When cards get squeezed, the cover drops away — only the year remains.
   Better a narrow card in the right place than a wide one in the wrong
   one. */
.k-karta-mala.uska{padding:clamp(4px,.8vh,10px) 2px;justify-content:center}
.k-karta-mala.uska b{font-size:clamp(11px,1.6vmin,22px)}

/* Leaving a game: the second click is the confirmation, so the button has to look different. */
.k-odustani.pozor{background:var(--pogreska);color:var(--papir);border-color:var(--pogreska)}

/* NOTE ON THE QUIZ SCREEN — the tab isn't shown because a ✎ already sits
   in the footer, and the bottom right is taken by fullscreen and language
   controls. The panel opens on the left instead, where there's room. */
.kviz-body .bil{right:auto;left:14px;bottom:14px}
.kviz-body .bil-jezicak{display:none}
.kviz-body .bil.otvoren .bil-ploca{display:block}

/* ── CHALLENGE: every rival timeline at once ───────────────────
   The decision is „gdje bi je TI stavio" [where would YOU place it], so
   every timeline is visible at the same time — you don't pick a team
   first and a spot second. The year is hidden, and that's stated in
   capitals: if anyone thinks they can see it, the whole mechanic falls
   apart. */
.k-prigovor{display:flex;flex-direction:column;gap:clamp(7px,1.4vh,18px);
  width:100%;height:100%;justify-content:center}
.k-tajna{display:flex;align-items:center;gap:clamp(8px,1.2vw,18px);flex-wrap:wrap;
  justify-content:center;text-align:center;border:3px solid var(--tinta);
  background:var(--papir);padding:clamp(5px,.9vh,12px) clamp(10px,1.4vw,22px)}
.k-tajna-znak{font-family:var(--display);font-size:clamp(20px,3.4vmin,52px);
  color:var(--akcent-tekst);background:var(--akcent);line-height:1;
  padding:clamp(1px,.3vh,5px) clamp(8px,1vw,16px)}
.k-tajna span{font-family:var(--kond);font-weight:600;font-size:clamp(11px,1.7vmin,26px);
  letter-spacing:.04em}
.k-tajna b{font-family:var(--slab);font-size:clamp(11px,1.5vmin,22px);opacity:.72;
  flex-basis:100%}

/* The width of the name column and the gap live in ONE place, so the
   axis and the grid can never drift away from the rows. The axis used to
   have only a margin with no matching gap and sat those few pixels out of
   alignment. */
.k-mini{position:relative;height:clamp(30px,4.4vmin,64px)}
.k-mini-karta{position:absolute;top:0;bottom:0;transform:translateX(-50%);
  border:2px solid var(--tinta);background:var(--papir);display:flex;
  align-items:center;justify-content:center;font-family:var(--display);
  font-size:clamp(10px,1.4vmin,20px);font-variant-numeric:tabular-nums;z-index:2}
.k-prigovor-dno{display:flex;gap:clamp(8px,1.2vw,18px);justify-content:center;
  align-items:center;flex-wrap:wrap}
/* outcome of a challenge — has to be visible, a token was spent */
.k-ishod{font-family:var(--kond);font-weight:600;font-size:clamp(12px,1.8vmin,26px);
  letter-spacing:.06em;text-transform:uppercase;padding:clamp(3px,.6vh,9px) clamp(10px,1.4vw,20px);
  border:3px solid currentColor;margin-top:clamp(4px,1vh,14px)}
.k-ishod.uspjelo{color:var(--tocno)}
.k-ishod.palo,.k-ishod.propalo{color:var(--pogreska)}
/* the spot the active team picked — makes clear what's being voted on */
.k-utor.zakljucan{border-style:solid;border-color:var(--akcent);opacity:.95;
  box-shadow:inset 0 0 0 3px var(--akcent-blijedi)}
/* shared axis beneath every rival timeline — years line up by column */
/* grid: the same years, running vertically through every row */
.k-resetka{position:absolute;left:calc(var(--lijevo) + var(--raz));right:0;top:0;bottom:0;
  pointer-events:none;z-index:0}
.k-resetka i{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--papir-3);
  opacity:.85}
/* a team that didn't click first — visible, but not interactive */
/* announcement of who is challenging — a token must never be spent in silence */
.k-najava{font-family:var(--display);font-size:clamp(14px,2.2vmin,34px);letter-spacing:.03em;
  text-transform:uppercase;text-align:center;background:var(--akcent);color:var(--akcent-tekst);
  padding:clamp(3px,.6vh,9px) clamp(10px,1.4vw,20px);box-shadow:4px 4px 0 var(--tinta)}

/* A fault gets ACKNOWLEDGED. A silent page that isn't playing anything looks like a broken game. */
.k-kvar{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vh,14px);
  border:3px solid var(--pogreska);background:var(--papir);
  padding:clamp(8px,1.4vh,18px) clamp(12px,1.8vw,26px);max-width:min(90%,760px)}
.k-kvar b{font-family:var(--slab);font-weight:600;font-size:clamp(13px,2vmin,30px);
  text-align:center;color:var(--pogreska)}
/* while loading, the message pulses quietly so it's visible that something is happening */
.k-poruka.ucitava b{animation:k-puls 1.1s ease-in-out infinite}
@keyframes k-puls{50%{opacity:.42}}
@media(prefers-reduced-motion:reduce){.k-poruka.ucitava b{animation:none}}

/* A button waiting on YouTube MUST say so. A click used to be invisible
   anywhere, so the only outcome was click-click-click followed by a
   no-response message after twelve seconds — and those seconds were
   counted from the last click, not the first. */
.k-tih.ucitava{opacity:.45;pointer-events:none;position:relative}
.k-tih.ucitava::after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--akcent);animation:k-ceka 1s ease-in-out infinite}
@keyframes k-ceka{0%,100%{transform:scaleX(.15);opacity:.5}50%{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.k-tih.ucitava::after{animation:none;transform:scaleX(1)}}
/* a brief notice: something happened, but it isn't a fault that needs a decision */
.k-kvar.tiho{border-color:var(--akcent-2);background:var(--papir-2)}
.k-kvar.tiho b{color:var(--akcent-2);font-size:clamp(11px,1.6vmin,24px)}
/* source switch: two states, always clear which one is active */
.k-izvor-izbor{display:flex;gap:0;border:3px solid var(--tinta)}
.k-iz{flex:1;padding:9px 10px;font-family:var(--kond);font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;background:var(--papir);color:var(--tinta);
  border:0;cursor:pointer}
.k-iz + .k-iz{border-left:3px solid var(--tinta)}
.k-iz.na{background:var(--akcent);color:var(--akcent-tekst)}
/* footer indicator: which source is active right now, and a click changes it */
.k-izvor-znak{font-family:var(--mono);font-size:clamp(8px,1vmin,14px);letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--papir-3);background:transparent;
  color:var(--tinta);opacity:.6;padding:clamp(2px,.4vh,5px) clamp(5px,.7vw,9px);
  cursor:pointer;margin-left:clamp(5px,.8vw,12px)}
.k-izvor-znak:hover{opacity:1;background:var(--tinta);color:var(--papir);border-color:var(--tinta)}
.k-kvar-gumbi{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
#lokvid{background:#000;object-fit:contain}

/* ── TWO-COLUMN STAGE ───────────────────────────────────────────
   Left third: the machine, the voice and the score — everything that
   gets WATCHED.
   Right two-thirds: every player's timeline, all the time.

   The reason isn't space, it's the game. At a real table everyone has
   their cards in front of them and is already placing the song in their
   head while it plays; whoever's turn it is just reaches first. So the
   timelines stay up always, and the only thing that changes is who's
   allowed to click. That's how three screens — play, challenge, reveal —
   became one picture. */
.k-scena{display:grid;grid-template-columns:minmax(0,32%) minmax(0,1fr);
  gap:clamp(8px,1.2vw,20px);align-items:stretch;padding:clamp(6px,1vh,14px);
  border:3px solid var(--tinta);background:var(--papir-2);overflow:hidden;min-height:0}
.k-stup{position:relative;display:flex;align-items:center;justify-content:center;
  border-right:2px solid var(--papir-3);padding-right:clamp(6px,1vw,16px);min-width:0}
.k-stup .k-zastor,.k-stup .k-otkrivenje{position:absolute;inset:0;padding:clamp(4px,1vh,12px)}
.k-ploca-okvir{width:min(100%,clamp(96px,20vmin,260px))}
.k-poruka.tajna b{color:var(--akcent-tekst);background:var(--akcent);
  padding:2px clamp(6px,1vw,14px);display:inline-block}

.k-scena.sa-slikom{grid-template-columns:minmax(0,62%) minmax(0,1fr)}
.k-scena.sa-slikom .k-stup{padding-right:0;border-right:none}
/* Centered as a GROUP, rows close together, the axis hugging the last row:
   the decade verticals then read as one grid passing through every row.
   space-evenly pushed the rows apart until they were unrelated islands and
   the axis floated a hand's width below anything it measured. */
.k-ploce{display:flex;flex-direction:column;gap:clamp(8px,1.8vh,26px);min-width:0;
  justify-content:center;overflow:hidden}
/* THE SHELF. Cards stand evenly spaced on a line, the way they lie on the
   table in the physical game; years are read off the cards. This replaced a
   scale where every card sat at its own year — honest, and it failed four
   screenshots in a row: the leftmost card cut off, slot slivers between
   close years, giant empty boxes across history's gaps. Flexbox makes that
   whole failure class impossible: two boxes cannot overlap. */
.k-red{display:flex;flex-direction:column;gap:4px;
  border-left:3px solid transparent;
  padding:clamp(4px,.8vh,10px) clamp(6px,.8vw,14px);
  flex:0 0 auto;min-width:0}
/* The active row is a highlight, not a cage: a full border became a frame
   that clipped its own contents, and read as broken symmetry against the
   frameless rows. */
.k-red.na-redu{border-left-color:var(--akcent);background:var(--papir)}
.k-red.izazivac{border-left-color:var(--tocno)}
.k-red.utisan{opacity:.34}

/* Name above the shelf: a side column had to be measured, stole width, and
   the first card kept landing on top of it. */
.k-red-ime{display:flex;align-items:baseline;gap:clamp(6px,1vw,14px);
  line-height:1;overflow:hidden;white-space:nowrap}
.k-red-ime span{font-family:var(--display);font-size:clamp(12px,1.9vmin,30px);
  text-transform:uppercase;overflow:hidden;text-overflow:ellipsis}
.k-red-ime i{font-family:var(--mono);font-style:normal;font-size:clamp(8px,1vmin,15px);
  letter-spacing:2px;color:var(--akcent)}
.k-red-ime b{font-family:var(--display);font-size:clamp(12px,1.9vmin,30px);
  font-variant-numeric:tabular-nums;margin-left:auto}
.k-red-ime b em{font-family:var(--mono);font-style:normal;font-size:.45em;opacity:.55}

/* Cards and carets stand ON the shelf line (align-items:flex-end + the
   border-bottom). Heights come from JS via .k-ploce custom properties. */
.k-polica{position:relative;height:var(--pojas,120px);
  /* The BASELINE is the timeline — it must read from the couch on every
     row, not only the active one. */
  border-bottom:3px solid var(--tinta);min-width:0}
.k-red.na-redu .k-polica{border-bottom-color:var(--akcent)}
/* decade verticals tie every row to the same scale, so an empty stretch of
   someone's timeline reads as "the 1950s", not as a rendering mistake */
.k-mreza{position:absolute;top:0;bottom:0;width:0;border-left:1px solid var(--tinta);
  opacity:.13;pointer-events:none}
/* the honesty stalk: from a nudged token to its true year on the baseline */
.k-veza{position:absolute;bottom:-2px;height:3px;background:var(--akcent-2);
  opacity:.85;z-index:4}
.k-tocka{position:absolute;bottom:-2px;width:0;height:10px;
  border-left:2px solid var(--akcent);z-index:4}
/* the shared axis under all rows */
.k-osred{padding-top:0}
.k-os{position:relative;height:var(--os,36px)}
.k-tick{position:absolute;top:0;width:0}
.k-tick i{position:absolute;top:0;left:-1px;height:7px;border-left:2px solid var(--tinta)}
.k-tick em{position:absolute;top:11px;transform:translateX(-50%);
  font-family:var(--mono);font-style:normal;font-size:clamp(9px,1.1vmin,16px);
  letter-spacing:.05em;font-variant-numeric:tabular-nums;opacity:.85;white-space:nowrap}

/* A WON YEAR IS A MARK, NOT A PICTURE.
   Covers on the board cost so much width that every mark had to be nudged
   off its own year to fit — which made the board lie: 1977 read as if it
   sat before 1975. A hairline stem with a node at its foot has no width to
   fight over, so every mark stands on its EXACT year. The sleeve lives one
   hover away in .k-list and costs the board nothing until asked for. */
.k-mark{position:absolute;top:0;bottom:0;width:0;z-index:5;cursor:default}
.k-stup-god{position:absolute;bottom:0;left:-1px;width:2px;height:64%;
  background:var(--akcent);opacity:.65}
.k-cvor{position:absolute;bottom:-4px;left:50%;width:9px;height:9px;border-radius:50%;
  background:var(--akcent);transform:translateX(-50%)}
.k-god-mala{position:absolute;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-weight:500;font-size:clamp(9px,1.1vmin,15px);
  letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--akcent);
  white-space:nowrap;pointer-events:none}
/* two tiers: a colliding label drops a line instead of sliding sideways,
   because a shifted label would be the very lie the marks just stopped
   telling */
.k-god-mala.t0{bottom:-19px}
.k-god-mala.t1{bottom:-34px}
.k-mark:hover .k-stup-god,.k-mark:focus .k-stup-god{opacity:1;width:3px;left:-1.5px}
.k-mark:hover .k-cvor,.k-mark:focus .k-cvor{width:12px;height:12px;bottom:-5.5px}

/* THE WHOLE CARD, ON DEMAND. Shrinking the token loses nothing — cover,
   year, title, artist move here, costing no room until hovered or focused.
   Opens upward, except in the first row where there is nothing above. */
.k-list{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);
  width:max(150px,min(24vw,300px));padding:7px;z-index:9;
  border:2px solid var(--tinta);background:var(--papir);
  box-shadow:7px 7px 0 var(--akcent);
  display:flex;flex-direction:column;gap:3px;text-align:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .12s ease,transform .12s ease}
.k-k:hover .k-list,.k-k:focus .k-list,.k-k:focus-within .k-list{
  opacity:1;visibility:visible;transform:translate(-50%,0)}
.k-red:first-child .k-list{bottom:auto;top:calc(100% + 8px);transform:translate(-50%,-4px)}
.k-red:first-child .k-k:hover .k-list,
.k-red:first-child .k-k:focus .k-list{transform:translate(-50%,0)}
.k-list img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  border:1px solid var(--tinta)}
.k-list b{font-family:var(--display);font-size:clamp(19px,2.6vmin,38px);line-height:1;
  font-variant-numeric:tabular-nums}
.k-list em{font-family:var(--slab);font-style:normal;font-weight:600;
  font-size:clamp(11px,1.4vmin,19px);line-height:1.2}
.k-list i{font-family:var(--kond);font-style:normal;font-size:clamp(9px,1.1vmin,15px);
  letter-spacing:.08em;text-transform:uppercase;color:var(--akcent-2)}
@media(prefers-reduced-motion:reduce){.k-list{transition:none}}

/* A slot IS the gap between neighbouring tokens: where history left a
   bigger hole, the target is bigger — which is exactly where players are
   most often torn. On rows that may not place it stays a quiet dashed
   outline, so every screen keeps reading as the same timeline. */
.k-u{position:absolute;bottom:0;height:calc(var(--pojas,120px) * .56);
  align-items:center;
  border:2px dashed var(--tinta);border-bottom:none;background:transparent;
  cursor:pointer;padding:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;line-height:1.1;
  font-family:var(--kond);font-weight:600;font-size:clamp(10px,1.3vmin,19px);
  font-variant-numeric:tabular-nums;color:var(--tinta);overflow:hidden;z-index:1}
.k-u small{font-family:var(--mono);font-size:clamp(6px,.8vmin,11px);
  letter-spacing:.12em;text-transform:uppercase;opacity:.55}
.k-u.mrtav{cursor:default;opacity:.28}
.k-u:hover{background:var(--akcent-blijedi);border-style:solid;border-color:var(--akcent)}
.k-u.mrtav:hover{background:transparent;border-style:dashed;border-color:var(--tinta)}
.k-u.odabran{background:var(--akcent);color:var(--akcent-tekst);border-style:solid;
  border-color:var(--tinta);box-shadow:inset 0 0 0 2px var(--tinta);opacity:1;z-index:4}
.k-u.zakljucan{border-style:solid;border-color:var(--akcent);opacity:1;
  box-shadow:inset 0 0 0 2px var(--akcent-blijedi);z-index:2}

@media(max-width:900px){
  .k-scena{grid-template-columns:1fr;grid-template-rows:minmax(0,34%) minmax(0,1fr)}
  .k-stup{border-right:0;border-bottom:2px solid var(--papir-3);padding-right:0}
}