/* Vzhled UI: obrazovky, menu, dialog a HUD (ARCHITECTURE kap. 11). Proměnné a písma jsou v base.css.
   Velikosti jdou přes --fs (už zahrnuje velikost textu z nastavení) a --u (měřítko okna), takže text 200 % nic neořeže.
   Deník a mapa jsou v ui-book.css. */
@import url("ui-book.css");

/* --- vrstvy ------------------------------------------------------------------------------------------- */
#ui > .hud-layer,
#ui > .dialog-layer { pointer-events: none; }
#ui > .screen-layer { pointer-events: none; }
#ui > .screen-layer.has-screen { pointer-events: auto; }
.hud-layer, .dialog-layer, .screen-layer { position: absolute; inset: 0; }
.hud-layer { transition: opacity .25s ease; }
.hud-layer.hud-hidden { opacity: 0; }

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  transition: none !important;
  animation: none !important;
}

/* --- obrazovky a kulisy ------------------------------------------------------------------------------- */
.screen { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--text-light); }
.screen.is-open { display: flex; }
.screen.is-under { display: none; }
.scrim { position: absolute; inset: 0; background: rgba(16, 11, 8, .5); backdrop-filter: blur(2px) saturate(.85); -webkit-backdrop-filter: blur(2px) saturate(.85); }
.scrim-dark { background: rgba(12, 8, 6, .72); }

.panel {
  position: relative;
  width: min(92vw, calc(var(--u) * 38));
  max-height: 92vh;
  overflow: auto;
  padding: 1.1em 1.4em 1.3em;
  border-radius: 10px;
  background: linear-gradient(170deg, #3d2818 0%, #2a1b12 58%, #24170f 100%);
  border: 2px solid #8c5d37;
  box-shadow: inset 0 0 0 3px #2a1a0e, inset 0 0 0 4px rgba(236, 198, 92, .18), 0 18px 50px rgba(0, 0, 0, .55);
  text-align: left;
}
/* prošití kolem panelu, stejné jako u deníku */
.panel::before {
  content: "";
  position: absolute;
  inset: .42em;
  border: 1.5px dashed rgba(236, 198, 92, .26);
  border-radius: 7px;
  pointer-events: none;
}
.panel-narrow { width: min(92vw, calc(var(--u) * 29)); }
.panel-wide { width: min(94vw, calc(var(--u) * 56)); }
.panel-title {
  margin: 0 0 .5em;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: calc(var(--fs) * 1.7);
  color: #f3dc98;
  letter-spacing: .02em;
  text-align: center;
}
.panel-text { margin: .2em 0 .7em; font-family: var(--font-read); font-size: calc(var(--fs) * 1.02); line-height: 1.55; color: #eadbb8; text-align: center; }
.panel-status { min-height: 1.4em; margin: .5em 0 0; font-size: calc(var(--fs) * .9); color: var(--text-dim); }
.panel-status.is-error { color: #f0b49a; }
.panel-kicker { font-size: calc(var(--fs) * .78); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); text-align: center; }
.panel-orn-top, .panel-orn-bottom { color: #8fa35a; opacity: .75; margin: 0 auto; width: 70%; }
.panel-orn-top { margin-bottom: .2em; }
.panel-orn-bottom { margin-top: .4em; transform: scaleY(-1); }

.ornament svg { display: block; width: 100%; height: auto; }
.ornament-corner svg { width: 100%; height: 100%; }

/* --- tlačítka a menu ---------------------------------------------------------------------------------- */
.menu, .btn-col, .menu-main { display: flex; flex-direction: column; gap: .45em; }
.btn-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: .4em; }
.btn {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: calc(var(--fs) * 2.5);
  padding: .5em .9em .55em 1.6em;
  margin: 0;
  border: 1px solid rgba(236, 198, 92, .22);
  border-radius: 6px;
  background: rgba(255, 240, 200, .045);
  color: var(--text-light);
  font: inherit;
  font-size: var(--fs);
  text-align: left;
  cursor: pointer;
  outline: none;
  user-select: none;
}
.btn .btn-label { font-size: calc(var(--fs) * 1.05); letter-spacing: .02em; }
.btn .btn-sub { display: block; margin-top: .15em; font-size: calc(var(--fs) * .8); color: var(--text-dim); line-height: 1.35; white-space: normal; }
.btn.is-focus {
  border-color: var(--gold);
  background: linear-gradient(90deg, rgba(236, 198, 92, .24), rgba(236, 198, 92, .06));
  box-shadow: inset 3px 0 0 var(--gold);
}
.btn.is-focus::before {
  content: "\25B8";
  position: absolute;
  left: .55em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
}
.btn:hover { border-color: rgba(236, 198, 92, .5); }
.btn[disabled] { opacity: .42; cursor: default; }
.btn[disabled]:hover { border-color: rgba(236, 198, 92, .22); }
.btn-danger .btn-label { color: #f2b49c; }
.btn-confirm { }
.btn-back, .btn-row .btn { width: auto; min-height: calc(var(--fs) * 2); }
.btn-row .btn { align-items: center; padding: .45em .9em; }

/* --- hlavní menu ------------------------------------------------------------------------------------ */
.screen-title { background: transparent; }
/* jen lehké ztmavení pod titulkem a menu, scéna za nimi zůstává čitelná */
.title-shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14, 10, 8, .74) 0%, rgba(14, 10, 8, .46) 26%, rgba(14, 10, 8, 0) 50%);
}
.title-wrap {
  position: absolute;
  left: 6vw;
  top: 0;
  bottom: 0;
  width: min(38vw, calc(var(--u) * 34));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .3em;
  overflow-y: auto;
  padding: 3vh 0;
}
/* bezpečné centrování: při velkém písmu se obsah neořízne nahoře, ale dá se posouvat */
.title-wrap > :first-child { margin-top: auto; }
.title-wrap > :last-child { margin-bottom: auto; }
.title-kicker { font-size: calc(var(--fs) * .9); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-soft); }
.title-name {
  margin: 0 0 .15em;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: calc(var(--u) * 3.1);
  line-height: 1.08;
  color: #f7e9c4;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .7), 0 1px 0 rgba(0, 0, 0, .6);
}
.title-name::after {
  content: "";
  display: block;
  width: 6em;
  max-width: 100%;
  height: 2px;
  margin-top: .3em;
  background: linear-gradient(90deg, var(--gold), rgba(236, 198, 92, 0));
}
.title-note { margin: 0 0 1.1em; font-size: calc(var(--fs) * .85); color: var(--text-dim); }
.menu-main { width: 100%; max-width: calc(var(--u) * 22); }
.menu-main .btn { min-height: calc(var(--fs) * 2.3); }
.title-status { min-height: 1.4em; font-size: calc(var(--fs) * .9); color: #f0b49a; }

/* --- pauza, nastavení, sloty, prolog --------------------------------------------------------------- */
.panel-pause { width: min(92vw, calc(var(--u) * 26)); }
.panel-pause .menu { margin-top: .4em; }
.panel-end .menu, .panel-quit .menu, .panel-recap .menu { margin-top: .5em; }
.panel-credits .credits-body { max-height: 52vh; overflow: auto; padding-right: .5em; }
.credits-body h3 { margin: .9em 0 .2em; font-family: var(--font-title); font-size: calc(var(--fs) * 1.25); color: #f3dc98; }
.credits-body p { margin: .15em 0; font-family: var(--font-read); font-size: calc(var(--fs) * .98); line-height: 1.5; color: #eadbb8; }

.settings-body { display: grid; grid-template-columns: minmax(9em, 13em) 1fr; gap: 1em; align-items: start; }
.settings-cats { gap: .35em; }
.settings-rows { gap: .4em; max-height: 58vh; overflow: auto; padding-right: .3em; }
.settings-cats .btn, .settings-rows .btn { min-height: calc(var(--fs) * 2.2); }
.settings-rows .btn .btn-sub { font-variant-numeric: tabular-nums; }

.slot-list { display: flex; flex-direction: column; gap: .4em; max-height: 60vh; overflow: auto; padding-right: .3em; }

.panel-prologue { width: min(94vw, calc(var(--u) * 50)); padding: 0; overflow: hidden; }
.prologue-art { background: #0d1412; line-height: 0; }
/* Ilustrace (zdroj 320x180 px) jen v celočíselném zvětšení: krok 320 CSS px při 1x, 160 při 2x (ostré pixely). */
.prologue-art canvas { width: 100%; height: auto; display: block; margin: 0 auto; image-rendering: pixelated; }
.prologue-art canvas { width: max(320px, round(down, 100%, 320px)); }
@media (min-resolution: 2dppx) { .prologue-art canvas { width: max(160px, round(down, 100%, 160px)); } }
.prologue-text {
  min-height: 4.4em;
  margin: 0;
  padding: .9em 1.4em .2em;
  font-family: var(--font-read);
  font-size: calc(var(--fs) * 1.2);
  line-height: 1.6;
  color: #f4ead2;
}
.prologue-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .4em 1.4em 1em; }
.prologue-foot .prologue-btns { display: flex; gap: .5em; }
.prologue-foot .prologue-btns.menu { flex-direction: row; }
.prologue-foot .btn { width: auto; min-height: calc(var(--fs) * 2); padding: .4em .9em; }
.prologue-count { font-size: calc(var(--fs) * .8); color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* --- karty výzvy (dialog, připomenutí) ----------------------------------------------------------- */
.card {
  margin: .45em 0;
  padding: .7em .9em;
  border-radius: 8px;
  background: rgba(255, 246, 220, .07);
  border: 1px solid rgba(236, 198, 92, .35);
}
.card-kicker { font-size: calc(var(--fs) * .72); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.card-title { font-family: var(--font-title); font-size: calc(var(--fs) * 1.15); color: #f7ecd0; }
.card-variant { margin-top: .2em; font-weight: 600; font-size: calc(var(--fs) * .95); }
.card-short { font-size: calc(var(--fs) * .9); color: var(--text-dim); line-height: 1.45; }
.card-place { margin-top: .3em; font-size: calc(var(--fs) * .8); color: var(--text-dim); }
.tag {
  display: inline-block;
  margin: .25em 0;
  padding: .15em .6em;
  border: 1px solid rgba(236, 198, 92, .55);
  border-radius: 999px;
  font-size: calc(var(--fs) * .75);
  color: #f3dc98;
}

/* --- dialogové pole ------------------------------------------------------------------------------------ */
.dlg {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  bottom: 3.2vh;
  transform: translateX(-50%);
  display: none;
  width: min(94vw, calc(var(--u) * 58));
  max-height: 48vh;
  padding: .75em 1.25em .55em;
  border-radius: 8px;
  background: rgba(30, 20, 14, .84);
  border: 1px solid rgba(140, 93, 55, .7);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  color: var(--text-light);
}
.dlg.is-open { display: block; }
.dlg::before {
  content: "";
  position: absolute;
  inset: .3em;
  border: 1px dashed rgba(236, 198, 92, .2);
  border-radius: 5px;
  pointer-events: none;
}
.dlg-head { display: flex; align-items: center; gap: .6em; min-height: 1.3em; }
.dlg-head:empty { display: none; }
.dlg-name { font-family: var(--font-title); font-size: calc(var(--fs) * 1.15); color: #f3dc98; letter-spacing: .02em; }
.dlg-echo { display: inline-flex; width: calc(var(--fs) * 1.3); height: calc(var(--fs) * 1.3); color: #cbb4ff; }
.dlg-echo svg, .echo-big svg, .tr-echo svg { width: 100%; height: 100%; display: block; }
.dlg-body { max-height: 36vh; overflow: auto; }
.dlg-text {
  margin: .25em 0 .3em;
  min-height: 2.8em;
  font-family: var(--font-read);
  font-size: calc(var(--fs) * 1.08);
  line-height: 1.58;
  color: #f4ead2;
}
.dlg-text.has-echo { box-shadow: inset 2px 0 0 #9b7fd6; padding-left: .6em; }
.dlg.is-narrator .dlg-text { font-style: italic; color: #e6d7b5; }
.dlg-choices { display: flex; flex-direction: column; gap: .35em; margin-top: .35em; }
.dlg-choices .btn { min-height: calc(var(--fs) * 2.1); padding: .4em .9em .45em 1.6em; }
.dlg-choices .btn-sub { margin-top: .1em; }
.dlg-card { margin-top: .3em; }
.dlg-foot { display: flex; align-items: center; justify-content: flex-end; gap: .7em; min-height: 1.2em; font-size: calc(var(--fs) * .78); color: var(--text-dim); }
.dlg-more { display: inline-block; width: 0; height: 0; opacity: 0; border-left: .4em solid transparent; border-right: .4em solid transparent; border-top: .5em solid var(--gold); transition: opacity .2s; }
.dlg-more.is-visible { opacity: .9; animation: dlg-bob 1.4s ease-in-out infinite; }
@keyframes dlg-bob { 50% { transform: translateY(3px); } }

/* --- prompt, oznámení, autosave, tutoriál, nápověda -------------------------------------------- */
.prompt {
  position: absolute;
  left: 50%;
  bottom: 7vh;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: .55em;
  white-space: nowrap;
  font-family: var(--font-title);
  font-size: calc(var(--fs) * 1.12);
  letter-spacing: .08em;
  color: #fffdf4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 6px rgba(255, 244, 210, .35), 0 0 1px rgba(0, 0, 0, .9);
}
.prompt.is-on { display: flex; }
.prompt-key {
  display: inline-block;
  min-width: 1.25em;
  padding: 0 .35em;
  border: 1px solid rgba(255, 253, 244, .75);
  border-radius: 4px;
  font-family: var(--font-ui);
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}

.notices { position: absolute; left: 2vw; top: 3vh; width: min(40vw, calc(var(--u) * 25)); display: flex; flex-direction: column; gap: .5em; }
.notice {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .5em .85em .5em .6em;
  border-radius: 6px;
  background: rgba(30, 20, 14, .86);
  border-left: 3px solid var(--gold);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  font-size: calc(var(--fs) * .98);
  line-height: 1.35;
  color: var(--text-light);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .25s ease, transform .25s ease;
}
.notice.is-in { opacity: 1; transform: none; }
.notice.is-out { opacity: 0; transform: translateX(-10px); }
.notice.is-reward { border-left-color: #c9a6ff; }
.notice-icon { flex: 0 0 auto; width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1); display: inline-flex; align-items: center; justify-content: center; }
.notice-icon canvas { width: 100%; height: 100%; image-rendering: pixelated; }

.autosave {
  position: absolute;
  left: 2vw;
  bottom: 2.4vh;
  opacity: 0;
  font-size: calc(var(--fs) * .8);
  color: rgba(244, 234, 210, .78);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  transition: opacity .3s ease;
}
.autosave.is-saving, .autosave.is-saved, .autosave.is-error { opacity: 1; }
.autosave.is-error { color: #f0b49a; }

.tutorial {
  position: absolute;
  top: 3.2vh;
  left: 50%;
  transform: translateX(-50%);
  max-width: 60vw;
  opacity: 0;
  padding: .35em 1em;
  border-radius: 999px;
  background: rgba(30, 20, 14, .6);
  color: var(--text-light);
  font-size: calc(var(--fs) * .95);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
  transition: opacity .4s ease;
}
.tutorial.is-on { opacity: 1; }

.hint {
  position: absolute;
  left: 50%;
  bottom: 15vh;
  transform: translateX(-50%);
  display: none;
  width: min(70vw, calc(var(--u) * 32));
  padding: .7em 1em .55em;
  border-radius: 8px;
  background: rgba(30, 20, 14, .92);
  border: 1px solid rgba(236, 198, 92, .45);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  color: var(--text-light);
}
.hint.is-on { display: block; }
.hint-head { font-family: var(--font-title); font-size: calc(var(--fs) * 1.05); color: #f3dc98; margin-bottom: .2em; }
.hint-text { margin: 0; font-family: var(--font-read); font-size: calc(var(--fs) * 1); line-height: 1.5; }
.hint-close { display: block; margin-top: .4em; text-align: right; font-size: calc(var(--fs) * .75); color: var(--text-dim); }

/* --- minimapa vpravo nahoře ---------------------------------------------------------------------- */
.minimap {
  position: absolute;
  right: 2vw;
  top: 3vh;
  width: calc(var(--u) * 15.5);
  aspect-ratio: 240 / 170;
}
.minimap.is-off { display: none; }
.minimap-canvas { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.minimap-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.7em;
  text-align: center;
  font-size: calc(var(--fs) * .72);
  letter-spacing: .06em;
  color: var(--text-light);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}

/* --- úzké obrazovky a text 200 % ---------------------------------------------------------------- */
/* Velké písmo (od 140 %): širší panely, nastavení pod sebou, obrazovky se dají svisle posouvat. */
.text-large .panel { width: min(96vw, calc(var(--u) * 56)); max-height: 94vh; }
.text-large .panel-pause { width: min(96vw, calc(var(--u) * 40)); }
.text-large .settings-body { grid-template-columns: 1fr; }
.text-large .menu.settings-cats { flex-direction: row; flex-wrap: wrap; }
.text-large .menu.settings-cats .btn { flex: 1 1 auto; width: auto; min-height: 0; padding-top: .35em; padding-bottom: .35em; }
.text-large .panel::before { display: none; }
.text-large .settings-rows { max-height: none; overflow: visible; }
.text-large .title-wrap { width: min(70vw, calc(var(--u) * 46)); }
.text-large .menu-main { max-width: none; }
.screen.is-open { overflow-y: auto; }
.screen > .panel { margin: auto; }
@media (max-width: 900px) {
  .settings-body { grid-template-columns: 1fr; }
  .title-wrap { left: 6vw; right: 6vw; width: auto; }
  .title-shade { background: linear-gradient(180deg, rgba(14, 10, 8, .9) 0%, rgba(14, 10, 8, .6) 55%, rgba(14, 10, 8, .2) 100%); }
  .minimap { width: 32vw; }
  .notices { width: 55vw; }
}

/* Oznámení během rozhovoru a čtení: odložená (skrytá a zastavená), po skončení se zobrazí znovu. */
.notices.is-deferred { opacity: 0; visibility: hidden; transition: opacity .2s; }