@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   MNEMO SKIN — the night-gallery identity, worn over the game.

   This is NOT a second stylesheet for the game; it is a reskin through the
   design tokens gramofon.css is built on. The structure, spacing and
   behaviour of every screen stay identical — only the voice changes:

     paper & ink     →  ink & white
     Anton/Oswald   →  IBM Plex Sans (700 where Anton carried weight)
     press yellow   →  mint
     print raster   →  none (a gallery at night has clean air)

   Loaded only when the request came through mnemo.rs (data-site="mnemo",
   set server-side). gramofon.box.rs never loads this file, so the paper
   identity cannot regress. The mnemo identity ignores the light/dark
   cookie: a committed look, like the front door itself.
   ═══════════════════════════════════════════════════════════════ */

[data-site="mnemo"]{
  --display:"IBM Plex Sans",system-ui,sans-serif;
  --kond:"IBM Plex Sans",system-ui,sans-serif;
  --slab:"IBM Plex Sans",system-ui,sans-serif;
  --stencil:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --papir:#0b1113;           /* ink, not paper — the room is dark */
  --papir-2:#101a1d;
  --papir-3:#334246;         /* hairline gray-teal */
  --tinta:#f2f7f6;

  --akcent:#5ce8c9;          /* the one mint */
  --akcent-2:#7fd4c1;        /* small text that must read as accent */
  --akcent-tekst:#06201a;    /* on mint, always deep ink */
  --akcent-blijedi:rgba(92,232,201,.16);

  --tocno:#5ce8c9;
  --pogreska:#ff6f66;
  --pozor:#e8c95e;

  --ploha:#dbe7e4;
  --raster:none;
  --vinil-1:#0e1517;
  --vinil-2:#16211f;
  --etiketa-boja:var(--akcent);
  --etiketa-tekst:#06201a;
}

/* Anton is bold by drawing; Plex must be told. Every display-role element
   gets the weight the letterform used to carry by itself. */
[data-site="mnemo"] .k-postament,
[data-site="mnemo"] .k-red-ime span,
[data-site="mnemo"] .k-red-ime b,
[data-site="mnemo"] .k-godina,
[data-site="mnemo"] .k-kraj b,
[data-site="mnemo"] .k-list b,
[data-site="mnemo"] .k-oznaka,
[data-site="mnemo"] .k-broj,
[data-site="mnemo"] .k-znak,
[data-site="mnemo"] .naslov,
[data-site="mnemo"] .gumb{font-weight:700}

/* Labels breathe the landing's spaced-caps voice. */
[data-site="mnemo"] .k-u small,
[data-site="mnemo"] .obrva,
[data-site="mnemo"] .k-zig{letter-spacing:.34em}

/* The landing's hairline discipline: quiet 1px rules, no heavy frames. */
[data-site="mnemo"] .kviz{border-color:rgba(242,247,246,.28)}
[data-site="mnemo"] .k-scena{border-color:rgba(242,247,246,.28)}

/* The plinth shadow reads mint on ink — the one place the accent lands. */
[data-site="mnemo"] .k-postament{box-shadow:4px 4px 0 rgba(92,232,201,.28)}
[data-site="mnemo"] .k-red.na-redu .k-postament{box-shadow:4px 4px 0 var(--akcent)}

/* ═══ THE SHAPES, NOT JUST THE COLOURS ═══════════════════════════
   Recolouring the pressing-plant idioms — 3px borders, offset block
   shadows, stamp frames — still spoke DDR with a mint accent. The
   landing speaks another language entirely: hairlines, flat mint,
   spaced mono caps, air. These overrides re-voice the FORMS. */

/* Buttons: flat mint, no frame, mono spaced caps — the ZAIGRAJ voice. */
[data-site="mnemo"] .gumb{
  border:none;background:var(--akcent);color:var(--akcent-tekst);
  font-family:var(--mono);font-weight:500;letter-spacing:.34em;
  box-shadow:none;transition:background .12s}
[data-site="mnemo"] .gumb:hover{background:var(--tinta);color:var(--papir)}
[data-site="mnemo"] .gumb.tih,
[data-site="mnemo"] .k-tih{
  border:1px solid rgba(242,247,246,.32);background:transparent;
  color:var(--tinta);font-family:var(--mono);font-weight:500;
  letter-spacing:.22em;box-shadow:none}
[data-site="mnemo"] .k-tih:hover,[data-site="mnemo"] .gumb.tih:hover{
  background:var(--akcent);border-color:var(--akcent);color:var(--akcent-tekst)}

/* Frames become hairlines; the page frame breathes like the landing. */
[data-site="mnemo"] .kviz,
[data-site="mnemo"] .k-scena,
[data-site="mnemo"] .k-postava-ploca{border-width:1px;border-color:rgba(242,247,246,.28)}

/* The verdict stamp: spaced caps and colour carry it; the thick frame
   was the rubber-stamp idiom. A single hairline is enough. */
[data-site="mnemo"] .k-zig{border-width:1px;padding:8px 22px}

/* On mnemo the mark is already the landing's language — mint node, mint
   stem, mono year. Only the leaf needs re-voicing. */
/* Slots: hairline dashes, mint on approach, solid mint when chosen. */
[data-site="mnemo"] .k-u{border-width:1px;border-color:rgba(242,247,246,.38)}
[data-site="mnemo"] .k-red.na-redu .k-u,
[data-site="mnemo"] .k-red.izazivac .k-u{border-color:rgba(242,247,246,.55)}
[data-site="mnemo"] .k-u:hover{background:rgba(92,232,201,.14);border-color:var(--akcent)}
[data-site="mnemo"] .k-u.odabran{background:var(--akcent);color:var(--akcent-tekst);
  border-color:var(--akcent);box-shadow:none}
[data-site="mnemo"] .k-u.zakljucan{border-color:var(--akcent);box-shadow:none}

/* The baseline: a hairline like the route on the landing; the active row's
   turns mint. Presence comes from contrast, not thickness. */
[data-site="mnemo"] .k-polica{border-bottom-width:1px;
  border-bottom-color:rgba(242,247,246,.5)}
[data-site="mnemo"] .k-red.na-redu .k-polica{border-bottom-width:2px;
  border-bottom-color:var(--akcent)}
[data-site="mnemo"] .k-red.na-redu{background:rgba(92,232,201,.05)}

/* The hover leaf: an elevated ink panel, not a paper card with a thrown
   shadow. */
[data-site="mnemo"] .k-list{background:var(--papir-2);
  border:1px solid rgba(242,247,246,.28);box-shadow:0 18px 44px rgba(0,0,0,.5)}
[data-site="mnemo"] .k-list img{border:1px solid rgba(242,247,246,.3)}
[data-site="mnemo"] .k-god-mala{color:var(--akcent)}
[data-site="mnemo"] .k-list i{color:var(--akcent)}

/* Setup: the overlay is the front door's editorial voice — flat brand,
   hairline fields, mint CTA. The print-shadow trick on the wordmark was
   the one thing still shouting letterpress. */
[data-site="mnemo"] .naslov.velik-znak{background:none;color:var(--tinta);
  text-shadow:none;padding:0;letter-spacing:.1em}
[data-site="mnemo"] .naslov.velik-znak::before{display:none;content:none}
[data-site="mnemo"] .k-postava{background:rgba(11,17,19,.94)}
[data-site="mnemo"] .k-polje input,
[data-site="mnemo"] .k-polje select{
  background:transparent;border:none;border-bottom:1px solid rgba(242,247,246,.38);
  color:var(--tinta);box-shadow:none}
[data-site="mnemo"] .k-polje input:focus,
[data-site="mnemo"] .k-polje select:focus{border-bottom-color:var(--akcent);outline:none}
[data-site="mnemo"] .k-iz{border:1px solid rgba(242,247,246,.32);background:transparent;
  font-family:var(--mono);letter-spacing:.18em}
[data-site="mnemo"] .k-iz.na{background:var(--akcent);color:var(--akcent-tekst);
  border-color:var(--akcent)}

/* Header chips and the language row take the mono voice. */
[data-site="mnemo"] .k-jez,[data-site="mnemo"] .k-izvor-znak,
[data-site="mnemo"] .k-kat{font-family:var(--mono);letter-spacing:.18em}
[data-site="mnemo"] .k-jez.na{background:var(--akcent);color:var(--akcent-tekst)}

/* No letterpress double on the year. The offset print shadow is the pressing
   plant's signature; the landing writes its years flat and white, and at
   reveal size the doubled glyphs read as a rendering fault rather than a
   flourish — which is exactly how the owner reported it. */
[data-site="mnemo"] .k-godina::before{display:none;content:none}
[data-site="mnemo"] .k-godina{color:var(--tinta)}
[data-site="mnemo"] .k-kraj b::before{display:none;content:none}