/* Základní vrstvy, proměnné a písma. Vzhled jednotlivých obrazovek je ve styles/ui.css. */

:root {
  /* škálování textu z nastavení přístupnosti (1 až 2) */
  --text-scale: 1;
  /* velikost UI jednotky odvozená z okna, aby UI bylo ostré a úměrné v 1280x720 i 1920x1080 */
  --u: clamp(12px, calc(min(1vw, 1.78vh) * 1.32), 26px);
  --fs: calc(var(--u) * var(--text-scale));

  --font-title: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --font-read: Georgia, "Iowan Old Style", "Palatino Linotype", Cambria, "Times New Roman", serif;
  --font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* paleta UI (odvozená z palety světa) */
  --ink: #2a1f17;
  --ink-soft: #5a4630;
  --paper: #efe4c4;
  --paper-light: #f7f0dc;
  --paper-dark: #d6c497;
  --leather: #4a2f1d;
  --leather-dark: #2e1c13;
  --panel: rgba(38, 25, 17, 0.9);
  --panel-solid: #2a1b12;
  --panel-edge: #8c5d37;
  --gold: #ecc65c;
  --gold-soft: #cc9c34;
  --moss: #71913c;
  --teal: #327a66;
  --text-light: #f4ead2;
  --text-dim: #c9b892;
  --focus: #ffe7a0;
  --danger: #d9785a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0d1412;
  color: var(--text-light);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

#game-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #0d1412;
}

/* Pozadí hlavního menu (džungle): přes celé okno, kreslí src/render/menuScene.js. */
#menu-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

/* Pixelový svět: velikost a poloha nastavuje renderer (celočíselné škálování). */
#world {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Vrstva UI přes celý viewport v plném rozlišení. */
#ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-size: var(--fs);
}
#ui > * { pointer-events: auto; }
#ui .hud, #ui .hud * { pointer-events: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0; }
}