:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  background: #0e100d;
  color: #f3ead3;
  --ink: #17130f;
  --parchment: #e9d6a8;
  --parchment-dark: #b99a62;
  --gold: #d7ae55;
  --moss: #35452d;
  --keyboard-offset: 0px;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #0e100d;
}

button,
input { font: inherit; }

button { touch-action: manipulation; }

.hidden { display: none !important; }

.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;
}

.vn-shell {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100dvh;
  background:
    radial-gradient(circle at 50% 20%, rgb(64 67 50 / 45%), transparent 55%),
    #0e100d;
}

.vn-stage {
  position: relative;
  width: min(100vw, calc(100dvh * 9 / 16));
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #25271e;
  box-shadow: 0 0 60px rgb(0 0 0 / 75%);
}

/* Brakujące ilustracje są jawnymi placeholderami, nie podmianą inną postacią. Po dostarczeniu
   assetu wystarczy wpisać ścieżkę w scene-manifest.js - widok i graf nie wymagają zmian. */
.vn-stage[data-placeholder="smithy"] {
  background:
    radial-gradient(circle at 48% 38%, rgb(225 125 48 / 36%), transparent 12%),
    linear-gradient(150deg, #3b281d 0%, #171714 48%, #080a09 100%);
}

.vn-stage[data-placeholder="camp"] {
  background:
    linear-gradient(168deg, transparent 0 46%, rgb(91 70 43 / 32%) 47% 52%, transparent 53%),
    radial-gradient(circle at 62% 22%, rgb(181 151 102 / 28%), transparent 24%),
    linear-gradient(#41443d, #181d19 52%, #0c0e0d);
}

.vn-stage[data-placeholder="well"] {
  background:
    radial-gradient(ellipse at 50% 54%, rgb(103 124 113 / 30%) 0 15%, transparent 16%),
    radial-gradient(ellipse at 50% 58%, #121a18 0 27%, transparent 28%),
    linear-gradient(#35413b, #151b18 58%, #090b0a);
}

.vn-stage[data-placeholder="tavern"] {
  background:
    radial-gradient(circle at 58% 30%, rgb(214 154 72 / 28%), transparent 18%),
    linear-gradient(90deg, rgb(66 43 25 / 72%) 0 8%, transparent 9% 86%, rgb(48 31 20 / 76%) 87%),
    linear-gradient(#3a2a20, #17130f 58%, #090807);
}

.vn-stage[data-placeholder="village"] {
  background:
    linear-gradient(155deg, transparent 0 48%, rgb(89 72 45 / 36%) 49% 57%, transparent 58%),
    radial-gradient(ellipse at 50% 72%, rgb(119 92 54 / 32%), transparent 34%),
    linear-gradient(#596058 0%, #283029 48%, #111410 100%);
}

.vn-stage[data-placeholder="bad-ending"] {
  background:
    radial-gradient(ellipse at 50% 48%, rgb(99 24 19 / 42%), transparent 25%),
    repeating-radial-gradient(ellipse at 50% 54%, #1d2824 0 8px, #111714 9px 18px);
}

.vn-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.002);
  opacity: 1;
  transition: opacity 280ms ease;
}

.vn-stage.is-changing .vn-art { opacity: 0.18; }

.vn-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(8 10 8 / 36%), transparent 18%, transparent 48%, rgb(8 8 7 / 58%) 70%, rgb(8 8 7 / 88%) 100%),
    linear-gradient(to right, rgb(0 0 0 / 16%), transparent 17%, transparent 83%, rgb(0 0 0 / 16%));
}

.vn-hud {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    12px
    max(12px, env(safe-area-inset-left));
  pointer-events: none;
}

.vn-objective {
  flex: 1;
  max-width: 88%;
  margin: 0;
  padding: 8px 11px;
  border: 1px solid rgb(233 214 168 / 28%);
  border-radius: 12px;
  background: rgb(18 17 13 / 68%);
  box-shadow: 0 3px 16px rgb(0 0 0 / 24%);
  color: #f1e5c8;
  font-size: clamp(0.72rem, 3.1vw, 0.9rem);
  line-height: 1.25;
  backdrop-filter: blur(7px);
}

.vn-hud-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
  pointer-events: auto;
}

.vn-lang,
.vn-audio {
  flex: 0 0 auto;
  min-width: 48px;
  min-height: 48px;
  padding: 0 10px;
  border: 1px solid rgb(233 214 168 / 36%);
  border-radius: 50%;
  background: rgb(18 17 13 / 72%);
  color: #f4e5bf;
  font-size: 0.78rem;
  font-weight: 700;
  pointer-events: auto;
  backdrop-filter: blur(7px);
}

.vn-audio {
  padding: 0;
  font-family: system-ui, sans-serif;
  font-size: 1.05rem;
}

.vn-stage.has-started .vn-lang {
  visibility: hidden;
  pointer-events: none;
}

.vn-card {
  position: absolute;
  z-index: 4;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--keyboard-offset));
  max-height: min(54dvh, 440px);
  overflow: auto;
  padding: clamp(15px, 4.4vw, 21px);
  border: 1px solid rgb(229 207 157 / 48%);
  border-radius: 18px 18px 12px 12px;
  background:
    linear-gradient(145deg, rgb(41 35 25 / 96%), rgb(19 18 15 / 94%)),
    #211d16;
  box-shadow: 0 12px 34px rgb(0 0 0 / 50%), inset 0 1px rgb(255 244 211 / 9%);
  backdrop-filter: blur(13px) saturate(0.8);
  transition: bottom 120ms ease, opacity 220ms ease, transform 220ms ease;
  scrollbar-width: thin;
}

.vn-stage.is-changing .vn-card {
  opacity: 0;
  transform: translateY(12px);
}

.vn-kicker {
  margin: 0 0 5px;
  color: var(--gold);
  font-size: clamp(0.7rem, 3vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vn-scene-title {
  margin: 0 0 15px;
  color: #f5ead0;
  font-size: clamp(1.24rem, 6vw, 1.75rem);
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
}

.vn-ending-copy {
  margin: -3px 0 16px;
  color: #dfd1b1;
  font-size: 0.98rem;
  line-height: 1.45;
}

.vn-choices {
  display: grid;
  gap: 9px;
  margin-top: 13px;
}

.vn-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 11px 13px;
  border: 1px solid rgb(215 174 85 / 60%);
  border-radius: 12px;
  background: linear-gradient(100deg, rgb(84 68 40 / 86%), rgb(30 27 20 / 88%));
  color: #f5ead0;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.vn-choice::after {
  content: "›";
  color: var(--gold);
  font-size: 1.7rem;
  line-height: 1;
}

.vn-choice-label {
  display: block;
  color: #f8e8bf;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
}

.vn-choice-hint {
  display: block;
  margin-top: 4px;
  color: #cfc2a4;
  font-size: 0.79rem;
  font-weight: 400;
  line-height: 1.25;
}

.vn-choice:disabled { opacity: 0.5; }

.vn-speaker-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

.vn-speaker {
  margin: 0;
  color: var(--gold);
  font-size: clamp(1rem, 4.8vw, 1.25rem);
  font-weight: 700;
}

.vn-speaker-voice {
  display: inline-flex;
}

.vn-line-voice {
  min-height: 0;
  margin: -7px 0 9px;
  text-align: right;
}

.vn-stage .dialogue-voice {
  min-width: 40px;
  min-height: 40px;
  padding: 5px 8px;
  border: 1px solid rgb(215 174 85 / 42%);
  border-radius: 50%;
  background: rgb(18 17 13 / 58%);
  color: #f3dfad;
  font: 0.82rem/1 system-ui, sans-serif;
}

.vn-stage .dialogue-voice-read {
  min-width: 44px;
  min-height: 36px;
  border-radius: 12px;
}

.vn-thinking {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 12px 0 rgb(215 174 85 / 65%), 24px 0 rgb(215 174 85 / 35%);
  animation: thinking 850ms ease-in-out infinite alternate;
}

@keyframes thinking {
  from { opacity: 0.35; transform: translateY(1px); }
  to { opacity: 1; transform: translateY(-1px); }
}

.vn-player-line {
  margin: 0 0 8px;
  padding-left: 10px;
  border-left: 2px solid rgb(215 174 85 / 55%);
  color: #c7baa0;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.35;
}

.vn-npc-line {
  min-height: 3.2em;
  margin: 0 0 14px;
  color: #f3ead3;
  font-size: clamp(1rem, 4.4vw, 1.18rem);
  line-height: 1.47;
  text-wrap: pretty;
}

.vn-npc-line.is-streaming::after {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 1em;
  margin-left: 0.18em;
  vertical-align: -0.13em;
  background: rgb(215 174 85 / 78%);
  animation: cursor 700ms steps(1) infinite;
}

@keyframes cursor { 50% { opacity: 0; } }

.vn-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.vn-button,
.vn-send {
  min-height: 48px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
}

.vn-button {
  width: 100%;
  padding: 10px 14px;
}

.vn-button-primary,
.vn-send {
  border: 1px solid #d6b46d;
  background: linear-gradient(#d2b36e, #ac8747);
  color: #1d1810;
  box-shadow: inset 0 1px rgb(255 244 205 / 44%), 0 3px 10px rgb(0 0 0 / 20%);
}

.vn-button-quiet {
  border: 1px solid rgb(233 214 168 / 32%);
  background: rgb(255 255 255 / 5%);
  color: #dfd0ae;
}

.vn-button:disabled,
.vn-send:disabled {
  cursor: default;
  opacity: 0.46;
}

.vn-form {
  display: flex;
  width: 100%;
  gap: 8px;
  margin: 0 0 10px;
}

.vn-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  padding: 0 13px;
  border: 1px solid rgb(229 207 157 / 42%);
  border-radius: 12px;
  outline: none;
  background: rgb(239 222 184 / 9%);
  color: #fff5de;
  font-family: system-ui, sans-serif;
  font-size: 16px;
}

.vn-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(215 174 85 / 18%);
}

.vn-send {
  flex: 0 0 auto;
  min-width: 62px;
  padding: 0 12px;
}

.guard-toast {
  position: absolute;
  z-index: 8;
  top: max(76px, calc(env(safe-area-inset-top) + 62px));
  left: 50%;
  width: calc(100% - 30px);
  padding: 11px 13px;
  transform: translateX(-50%);
  border: 1px solid rgb(255 234 185 / 40%);
  border-radius: 12px;
  background: rgb(30 25 18 / 94%);
  box-shadow: 0 6px 22px rgb(0 0 0 / 40%);
  color: #f6e8c6;
  font: 0.9rem/1.35 system-ui, sans-serif;
  text-align: center;
}

.guard-toast.yellow { border-color: #e1bd57; }
.guard-toast.red { border-color: #c85f51; }
.guard-toast.support { border-color: #7b9f73; }
.guard-toast.queue { border-color: #879bb6; }

.vn-fatal {
  position: absolute;
  z-index: 12;
  inset: 20% 14px auto;
  padding: 18px;
  border: 1px solid #c85f51;
  border-radius: 14px;
  background: rgb(34 18 15 / 96%);
  color: #ffe2d8;
  font: 0.95rem/1.45 system-ui, sans-serif;
}

@media (min-width: 720px) {
  .vn-card { left: 16px; right: 16px; bottom: 16px; }
  .vn-hud { padding-left: 16px; padding-right: 16px; }
}

@media (max-height: 700px) {
  .vn-card { max-height: 62dvh; }
  .vn-choice { min-height: 56px; padding-block: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Wspólny dla ISO i VN zestaw ikon głosu. Własne maski SVG zamiast emoji zapewniają ten sam
   wygląd w Chrome/Firefox/PWA niezależnie od systemowej czcionki. Własny głośnik oznacza odsłuch,
   przekreślony głośnik — wyłączone auto-czytanie, a kwadrat w tarczy — zatrzymanie. */
.dialogue-voice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
}

.voice-glyph {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.45em;
  height: 1.45em;
  background: currentColor;
  -webkit-mask: var(--voice-glyph) center / contain no-repeat;
  mask: var(--voice-glyph) center / contain no-repeat;
}

.voice-glyph-speaker {
  --voice-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 8h4l6-5v18l-6-5H2V8Zm13.2 1.2c1.6 1.6 1.6 4 0 5.6l-1.7-1.7c.7-.7.7-1.6 0-2.3l1.7-1.6Zm3.1-3.1c3.3 3.3 3.3 8.5 0 11.8l-1.7-1.7c2.3-2.3 2.3-6.1 0-8.4l1.7-1.7Z'/%3E%3C/svg%3E");
}

.voice-glyph-speaker-off {
  --voice-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 8h4l6-5v18l-6-5H2V8Zm.2-7L23 21l-2 2L.2 3 2.2 1Z'/%3E%3C/svg%3E");
}

.voice-glyph-stop {
  --voice-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3 2h18v10c0 5.2-3.7 8.5-9 10.8C6.7 20.5 3 17.2 3 12V2Zm6 6h6v6H9V8ZM5 4v8c0 3.8 2.5 6.3 7 8.4 4.5-2.1 7-4.6 7-8.4V4H5Z'/%3E%3C/svg%3E");
}

.voice-glyph-loading {
  --voice-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 2h14v3c0 3-1.7 5.2-4.1 7 2.4 1.8 4.1 4 4.1 7v3H5v-3c0-3 1.7-5.2 4.1-7C6.7 10.2 5 8 5 5V2Zm2 2v1c0 2.6 1.7 4.3 5 6.2 3.3-1.9 5-3.6 5-6.2V4H7Zm5 8.8C8.7 14.7 7 16.4 7 19v1h10v-1c0-2.6-1.7-4.3-5-6.2Z'/%3E%3C/svg%3E");
  animation: voice-hourglass 1.1s steps(2, end) infinite;
}

.voice-glyph-error {
  --voice-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='m12 1 11 11-11 11L1 12 12 1Zm-1.4 5h2.8v8h-2.8V6Zm0 10h2.8v2.8h-2.8V16Z'/%3E%3C/svg%3E");
}

.voice-glyph-label {
  font: 600 0.72em/1 system-ui, sans-serif;
}

.audio-toggle .voice-glyph,
.vn-audio .voice-glyph {
  width: 1.55em;
  height: 1.55em;
}

.audio-toggle,
.vn-audio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

@keyframes voice-hourglass {
  50% { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .voice-glyph-loading { animation: none; }
}