/* tokens.css — JEDEN design systém pro celou UW Sagu ("INK SLAB", 16. 7. 2026).
   De-AI-ifikace: pět her mělo pět identit (zelený terminál / neon teal / černá
   prázdnota / mobilní oranž). Tohle je jediný zdroj pravdy: tuš + papír + karmín
   + zlato, Bangers display, tvrdé offsetové stíny (podpis SWARM UI).
   Použití: @import url('../_common/tokens.css?v=1'); jako PRVNÍ řádek game.css,
   lokální proměnné přemapovat na tyhle tokeny (aliasy), ne kopírovat hodnoty.
   Flagship SWARM je záměrná výjimka (in-game "živá manga stránka" = světlý papír);
   meta vrstva (hub + hry) = tmavá tušová deska. */

@font-face{
  font-family:'Bangers';
  src:url('fonts/Bangers.ttf') format('truetype');
  font-display:swap;
}

:root{
  /* ---- barvy: tuš (teplé černé, NE modročerné ani #000) ---- */
  --ink-0:#0d0b09;        /* nejhlubší pozadí stránky */
  --ink-1:#141110;        /* pozadí sekcí */
  --ink-2:#1c1815;        /* panel */
  --ink-3:#262019;        /* panel zvednutý / hover */
  --ink-line:#3a332a;     /* jemné linky, bordery */

  /* ---- papír (text) ---- */
  --paper:#f2efe6;        /* primární text */
  --paper-dim:#b8b1a2;    /* sekundární text */
  --paper-mute:#7d7768;   /* terciární / popisky */

  /* ---- akcenty (červená = značka/nebezpečí, zlato = měna/odměna) ---- */
  --crimson:#c4232b;
  --crimson-hi:#e04a51;
  --gold:#c9a227;
  --gold-hi:#e6c14a;
  --jade:#4a9b6f;         /* JEN stav "hotovo/claimable" — nikdy dekorace */

  /* ---- typografie ---- */
  --font-display:'Arial Black',Impact,sans-serif;   /* nadpisy, tlačítka, velká čísla */
  --font-ui:'Segoe UI',system-ui,-apple-system,sans-serif;  /* běžný text */
  --font-mono:ui-monospace,'Cascadia Mono',Consolas,monospace; /* JEN taktická čísla/staty */

  /* ---- geometrie ---- */
  --radius-sm:3px;
  --radius-md:6px;
  --radius-lg:10px;
  --shadow-offset:5px 5px 0 rgba(0,0,0,.5);   /* tvrdý ink stín — podpis značky */
  --shadow-offset-sm:3px 3px 0 rgba(0,0,0,.45);
  --spine:4px solid var(--crimson);            /* karmínová páteř panelů vlevo */

  /* ---- textury (inline SVG, žádné requesty) ---- */
  /* halftone rastr — manga screentone na panely/hlavičky */
  --tex-halftone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='3' cy='3' r='1.1' fill='%23f2efe6' fill-opacity='0.05'/%3E%3Ccircle cx='10' cy='10' r='1.1' fill='%23f2efe6' fill-opacity='0.05'/%3E%3C/svg%3E");
  /* diagonální šrafy — zvýrazněné/aktivní plochy */
  --tex-hatch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 7l8-8M3 9l8-8' stroke='%23f2efe6' stroke-opacity='0.045' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* ============ sdílené stavební bloky (opt-in třídy) ============ */

/* panel: tuš deska + tvrdý stín + karmínová páteř */
.uw-panel{
  background:var(--ink-2);
  border:1px solid var(--ink-line);
  border-left:var(--spine);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-offset-sm);
}
.uw-panel--plain{ border-left:1px solid var(--ink-line); }

/* nadpis sekce: Bangers + mírný náklon + karmínové podtržení */
.uw-h{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:.06em;
  color:var(--paper);
  text-transform:uppercase;
}
.uw-h--tilt{ transform:rotate(-1.2deg); display:inline-block; }
.uw-kicker{
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper-mute);
}

/* tlačítko: ink tělo, Bangers, offset stín, press-in */
.uw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);
  font-size:17px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper);
  background:var(--ink-3);
  border:1.5px solid var(--ink-line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-offset-sm);
  padding:9px 18px;
  cursor:pointer;user-select:none;
  transition:transform .06s, box-shadow .06s, background .12s;
}
.uw-btn:hover{ background:#2e2720; }
.uw-btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.45); }
.uw-btn--primary{
  background:var(--crimson);
  border-color:#8f181f;
  box-shadow:var(--shadow-offset-sm), inset 0 -3px 0 rgba(0,0,0,.28);
}
.uw-btn--primary:hover{ background:var(--crimson-hi); }
.uw-btn--gold{ background:var(--gold); color:#241d06; border-color:#8a6d1a; }
.uw-btn--gold:hover{ background:var(--gold-hi); }
.uw-btn--ghost{ background:transparent; box-shadow:none; }
.uw-btn:disabled{ opacity:.4; cursor:default; transform:none; }

/* chip / resource pill */
.uw-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  color:var(--paper-dim);
  background:var(--ink-2);
  border:1px solid var(--ink-line);
  border-radius:999px;
  padding:4px 12px;
}
.uw-chip .ic{ color:var(--gold); }

/* progress bar: papír drážka + karmínová výplň */
.uw-bar{ height:8px;background:var(--ink-1);border:1px solid var(--ink-line);border-radius:2px;overflow:hidden; }
.uw-bar>i{ display:block;height:100%;background:var(--crimson);border-radius:1px; }
.uw-bar--gold>i{ background:var(--gold); }

/* ikonky (z icons.js) — dědí currentColor */
.uw-ic{ display:inline-block;vertical-align:-0.18em;width:1.1em;height:1.1em; }
.uw-ic svg{ width:100%;height:100%;display:block; }

/* backlink do hubu — jednotný napříč hrami (stejný jazyk jako SWARM) */
.uw-back{
  position:fixed;top:10px;left:10px;z-index:60;
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  color:var(--paper);text-decoration:none;
  background:var(--ink-2);
  border:1.5px solid var(--ink-line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-offset-sm);
  padding:5px 12px;
}
.uw-back:hover{ color:var(--crimson-hi);border-color:var(--crimson); }