/* Küstengarn: Das Licht der Muschelbucht - UI
   Drei Layouts, gesetzt von js/layout.js als Klasse am body:
   .layout-desktop  Bühne 16:9 oben, Bedienfeld darunter (Seitenverhältnis 1280:920)
   .layout-touch    Handy und Tablet quer: Bühne so groß wie möglich, Verben, Tasche und Knöpfe
                    halbtransparent an den Bildschirmrändern (Abschnitt "Touch" weiter unten)
   body.portrait    Touchgerät hochkant: Hinweis zum Drehen liegt über allem
   layout.js setzt außerdem --stage-w, --stage-h, --side-w, --band-h und --su (1 % der Bühnenbreite in px).
   --text-k ist die gewählte Textgröße (Einstellungen). */

:root {
  --ink: #f6ead0;
  --ink-dim: #c2ad87;
  --ink-faint: #8d7759;
  --brass: #d6a646;
  --brass-hi: #ffd987;
  --brass-lo: #8c6526;
  --wood: #23170f;
  --wood-2: #2f2016;
  --wood-3: #47321f;
  --wood-hi: #5d4229;
  --sea: #0c1219;
  --danger: #ff8f7a;
  --font-ui: "Alegreya Sans", system-ui, sans-serif;
  --font-display: "IM Fell English SC", Georgia, serif;
  --su: 12.8px;
  --stage-w: 1280px;
  --stage-h: 720px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  color: var(--ink);
  font-family: var(--font-ui);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body {
  background:
    radial-gradient(ellipse at 50% 35%, #1b2533 0%, var(--sea) 60%, #05080c 100%);
  display: grid;
  place-items: center;
}

svg { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------- Rahmen und Layouts ---------- */
#frame {
  position: relative;
  display: grid;
  grid-template-columns: var(--stage-w);
  grid-template-rows: var(--stage-h) 1fr;
  width: var(--frame-w, 100vw);
  height: var(--frame-h, 100vh);
  overflow: hidden;
  box-shadow: 0 0 0 1px #000, 0 30px 80px #000c;
  border-radius: 6px;
}
#stage { grid-area: 1 / 1; }
#panel { grid-area: 2 / 1; }
#choices { grid-area: 2 / 1; }

#stage {
  position: relative;
  background: #000;
  overflow: hidden;
}

#game, #game canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
}

/* ---------- Anzeigen auf der Bühne ---------- */
#hover-label {
  position: absolute;
  left: 50%; top: calc(var(--su) * 1.4);
  transform: translateX(-50%);
  padding: .15em .9em .2em;
  font: 700 clamp(13px, calc(var(--su) * 1.65), 24px) var(--font-ui);
  color: var(--ink);
  background: linear-gradient(#120b07d0, #120b07b0);
  border: 1px solid #d6a64666;
  border-radius: 999px;
  box-shadow: 0 4px 14px #0008;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
#hover-label.on { opacity: 1; }

#hud {
  position: absolute;
  top: calc(var(--su) * 1.1);
  right: calc(var(--su) * 1.1);
  display: flex;
  gap: clamp(6px, calc(var(--su) * .6), 10px);
  z-index: 5;
}
.hud-btn {
  --s: clamp(34px, calc(var(--su) * 3.4), 46px);
  width: var(--s); height: var(--s);
  padding: 0;
  display: grid; place-items: center;
  font-size: calc(var(--s) * .5);
  color: var(--ink);
  background: radial-gradient(circle at 50% 35%, #3a2a1ccc, #120b07dd);
  border: 1.5px solid #d6a64699;
  border-radius: 50%;
  box-shadow: 0 3px 10px #0009, inset 0 1px 0 #ffffff22;
  opacity: .82;
}
.hud-btn:hover, .hud-btn:focus-visible { opacity: 1; color: var(--brass-hi); border-color: var(--brass-hi); }
.hud-btn.on { color: #201409; background: radial-gradient(circle at 50% 35%, var(--brass-hi), var(--brass)); opacity: 1; }
.hud-btn[hidden] { display: none; }
body.cutscene-open #hud { display: none; }

.hud-btn { position: relative; }
.hud-btn .dot {
  position: absolute; top: -2px; right: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #ff9a5a; border: 2px solid #120b07;
  box-shadow: 0 0 8px #ff9a5a;
  animation: dot-pulse 1.6s ease-in-out infinite;
}
.hud-btn .dot[hidden] { display: none; }
@keyframes dot-pulse { 50% { transform: scale(1.3); } }

/* Banner für neues Ziel und "Zuletzt …" beim Weiterspielen */
#recap {
  position: absolute; left: 50%; top: calc(var(--su) * 6);
  transform: translate(-50%, -8px);
  max-width: min(86%, 640px);
  padding: .55em 1.2em .65em;
  text-align: center;
  background: linear-gradient(#1b120bee, #120b07f2);
  border: 1px solid var(--brass);
  border-radius: 10px;
  box-shadow: 0 10px 30px #000b;
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
  z-index: 5;
}
#recap.on { opacity: 1; transform: translate(-50%, 0); }
#recap small {
  display: block;
  font: 400 clamp(11px, calc(var(--su) * 1.1), 15px) var(--font-display);
  letter-spacing: .14em; color: var(--brass);
}
#recap span { font: 600 calc(clamp(13px, calc(var(--su) * 1.55), 20px) * var(--text-k, 1)) var(--font-ui); color: var(--ink); }

/* Mitmach-Momente */
.minigame {
  position: absolute; inset: 0; z-index: 9;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, #0b0705aa, #000d);
  opacity: 0; transition: opacity .35s ease;
}
.minigame.on { opacity: 1; }
.minigame .mg-card {
  width: min(92%, 520px);
  max-height: 94%; overflow-y: auto;
  padding: clamp(12px, calc(var(--su) * 1.6), 22px);
  text-align: center;
  background: linear-gradient(180deg, #33241af2, #1d140df5);
  border: 2px solid var(--brass);
  border-radius: 14px;
  box-shadow: 0 20px 50px #000c;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.minigame.shake .mg-card { animation: mg-shake .4s ease; }
@keyframes mg-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.minigame.won .mg-card { border-color: var(--brass-hi); box-shadow: 0 0 40px #ffd27a77, 0 20px 50px #000c; }
.minigame small { font: 400 13px var(--font-display); letter-spacing: .2em; color: var(--brass); }
.minigame h3 { margin: 0; font: 400 clamp(22px, calc(var(--su) * 2.6), 32px) var(--font-display); color: var(--brass-hi); }
.minigame .mg-help { margin: 0; color: var(--ink-dim); font-size: clamp(14px, calc(var(--su) * 1.4), 17px); }
.minigame .mg-status { margin: 0; min-height: 1.4em; font-weight: 700; color: var(--ink); }
.minigame .mg-stage { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.minigame .mg-big { font-size: 20px; padding: 12px 32px; }
.mg-lamp { position: relative; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, #ffe9b0 0%, #c08a2a 40%, #2a1c10 72%); box-shadow: 0 0 20px #ffd27a55; }
.mg-beam { position: absolute; left: 50%; top: 50%; width: 360px; height: 46px; margin: -23px 0 0 -180px; border-radius: 50%; background: radial-gradient(ellipse, #fff3c8ee, #ffd27a00 70%); opacity: 0; pointer-events: none; }
.mg-beam.on { animation: mg-flash .35s ease-out; }
@keyframes mg-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.mg-dots { display: flex; gap: 10px; }
.mg-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--brass); }
.mg-dots i.ok { background: var(--brass-hi); box-shadow: 0 0 10px #ffd27a; }
.mg-rope { margin: 0; padding-left: 1.4em; text-align: left; align-self: stretch; color: var(--brass-hi); min-height: 1em; }
.mg-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.mg-choices button { font-size: 15px; padding: 10px 8px; }
.mg-choices button:disabled { opacity: .35; }
.mg-tower { position: relative; width: 70px; height: 120px; border-radius: 8px 8px 0 0; background: repeating-linear-gradient(180deg, #c43a30 0 20px, #f2e8d6 20px 40px); overflow: hidden; border: 2px solid #3a2410; }
.mg-lens { position: absolute; left: 10px; right: 10px; top: 8px; height: 40px; border-radius: 50%; background: radial-gradient(circle, #fff6d0, #d6a646 60%, #6b4a1a); box-shadow: 0 0 14px #ffd27a; transition: transform .1s linear; }
.mg-bar { width: 100%; height: 14px; border-radius: 7px; background: #0008; border: 1px solid var(--brass-lo); overflow: hidden; }
.mg-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brass), var(--brass-hi)); }
.mg-pair { display: flex; gap: 12px; }
.mg-pair button { font-size: 18px; padding: 12px 22px; }
.minigame .mg-skip { font-size: 14px; }
.minigame .mg-skip[hidden] { display: none; }

/* Porträt der sprechenden Figur im Gespräch */
#portrait {
  position: absolute; bottom: calc(var(--su) * 2.2);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  z-index: 3;
}
#portrait.left { left: calc(var(--su) * 2.2); }
#portrait.right { right: calc(var(--su) * 2.2); }
#portrait.on { opacity: 1; transform: none; }
#portrait .pframe {
  --p: clamp(64px, calc(var(--su) * 10), 140px);
  width: var(--p); height: var(--p);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #4a3423, #160e08);
  border: 3px solid var(--brass);
  box-shadow: 0 0 0 2px #1d140d, 0 0 0 4px #d6a64666, 0 10px 24px #000b;
  display: grid; place-items: center;
}
#portrait img { width: 92%; height: 92%; object-fit: contain; transform: translateY(6%); }
#portrait.right img { transform: translateY(6%) scaleX(-1); }
#portrait b {
  font: 400 clamp(12px, calc(var(--su) * 1.3), 17px) var(--font-display);
  color: var(--brass-hi);
  padding: 2px 10px;
  background: #120b07dd;
  border: 1px solid #d6a64666;
  border-radius: 999px;
  white-space: nowrap;
}
body.cutscene-open #portrait { opacity: 0; }

#fade {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  z-index: 6;
}
#fade.on { opacity: 1; }

/* Kinobalken für Szenen in der Spielwelt */
#letterbox i {
  position: absolute; left: 0; right: 0; height: 0;
  background: #000;
  transition: height .7s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  z-index: 4;
}
#letterbox i:first-child { top: 0; }
#letterbox i:last-child { bottom: 0; }
#letterbox.on i { height: 11%; }

/* Kapitelkarte */
#title-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--su) * 1.2);
  padding: 0 6%;
  background: radial-gradient(ellipse at center, #1c140ef2, #000 75%);
  opacity: 0; pointer-events: none;
  transition: opacity .8s ease;
  text-align: center;
  z-index: 8;
}
#title-card.on { opacity: 1; pointer-events: auto; cursor: pointer; }
#title-card h2 {
  margin: 0;
  font: 400 clamp(15px, calc(var(--su) * 2.2), 30px) var(--font-display);
  color: var(--ink-dim);
  letter-spacing: .12em;
}
#title-card p {
  margin: 0;
  font: 400 clamp(24px, calc(var(--su) * 4.4), 60px) var(--font-display);
  color: var(--brass-hi);
  text-shadow: 0 0 calc(var(--su) * 3) #d6a64655;
  line-height: 1.1;
}
#title-card::before, #title-card::after {
  content: "";
  width: min(40%, 320px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}

/* ---------- Zwischensequenz ---------- */
#cutscene {
  position: absolute; inset: 0;
  background: #000;
  cursor: pointer;
  opacity: 0;
  transition: opacity .6s ease;
  z-index: 7;
  overflow: hidden;
}
#cutscene.on { opacity: 1; }
#cutscene[hidden] { display: none; }
#cutscene .cs-img {
  position: absolute; inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
  transition: opacity 1s ease;
  will-change: transform, opacity;
}
#cutscene .cs-img.show { opacity: 1; }
/* Langsame Fahrt über das Bild ("Ken Burns"), endet in Ruhe */
#cutscene .cs-img.pan-in    { animation: cs-in 9s ease-out forwards; }
#cutscene .cs-img.pan-out   { animation: cs-out 9s ease-out forwards; }
#cutscene .cs-img.pan-left  { animation: cs-left 9s ease-in-out forwards; }
#cutscene .cs-img.pan-right { animation: cs-right 9s ease-in-out forwards; }
#cutscene.still .cs-img { animation: none !important; }
/* Videoclip über dem Standbild. Das Standbild bleibt darunter, falls das Video fehlt oder lädt. */
#cutscene .cs-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
#cutscene .cs-vid.show { opacity: 1; }
#cutscene.still .cs-vid { display: none; }
@keyframes cs-in    { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes cs-out   { from { transform: scale(1.14); } to { transform: scale(1.03); } }
@keyframes cs-left  { from { transform: scale(1.12) translateX(3.5%); } to { transform: scale(1.12) translateX(-3.5%); } }
@keyframes cs-right { from { transform: scale(1.12) translateX(-3.5%); } to { transform: scale(1.12) translateX(3.5%); } }
#cutscene::after { /* Vignette und Filmkante */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 calc(var(--su) * 12) #000c;
}
#cutscene .cs-cap {
  position: absolute; left: 7%; right: 7%; bottom: 6%;
  padding: .7em 1.2em .8em;
  background: linear-gradient(#0b0705dd, #0b0705f4);
  border: 1px solid #d6a64666;
  border-radius: 10px;
  box-shadow: 0 10px 30px #000b;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  z-index: 1;
}
#cutscene .cs-cap.show { opacity: 1; transform: none; }
#cutscene .cs-cap[hidden] { display: none; }
#cutscene .cs-who {
  display: block;
  font: 400 clamp(13px, calc(var(--su) * 1.5), 21px) var(--font-display);
  color: var(--brass-hi);
  letter-spacing: .08em;
}
#cutscene .cs-text {
  margin: .25em 0 0;
  font: 500 calc(clamp(15px, calc(var(--su) * 2), 27px) * var(--text-k, 1)) var(--font-ui);
  color: var(--ink);
  line-height: 1.32;
}
#cutscene .cs-text.narration { font-style: italic; color: #efe2c4; }
#cutscene .cs-skip {
  position: absolute; right: calc(var(--su) * 1.2); top: calc(var(--su) * 1.2);
  z-index: 2;
  font: 600 clamp(12px, calc(var(--su) * 1.2), 16px) var(--font-ui);
  padding: .35em .9em;
  color: var(--ink-dim);
  background: #0009;
  border: 1px solid #d6a64655;
  border-radius: 999px;
}

/* ---------- Bedienfeld ---------- */
#panel {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, calc(var(--su) * .5), 8px);
  padding: clamp(6px, calc(var(--su) * .6), 10px) clamp(8px, calc(var(--su) * 1.2), 16px) clamp(8px, calc(var(--su) * .9), 14px);
  background:
    linear-gradient(180deg, #00000070, transparent 26%, transparent 80%, #00000060),
    repeating-linear-gradient(92deg, #ffffff05 0 2px, transparent 2px 9px, #00000014 9px 11px, transparent 11px 23px),
    linear-gradient(180deg, var(--wood-2), var(--wood));
  border-top: 3px solid var(--brass);
  box-shadow: inset 0 1px 0 #ffe7a666, inset 0 3px 0 #00000080;
}
/* Messingnieten in den Ecken */
#panel::before, #panel::after {
  content: ""; position: absolute; top: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff2c0, var(--brass) 45%, var(--brass-lo));
  box-shadow: 0 1px 1px #000a;
}
#panel::before { left: 7px; }
#panel::after { right: 7px; }

#sentence {
  align-self: center;
  min-width: 40%;
  max-width: 100%;
  padding: .1em 1.4em .15em;
  text-align: center;
  font: 700 clamp(13px, calc(var(--su) * 1.5), 20px) var(--font-ui);
  color: var(--brass-hi);
  letter-spacing: .02em;
  background: linear-gradient(#0a0604cc, #0a060499);
  border: 1px solid #d6a64640;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.5em;
}

#controls {
  flex: 1;
  display: grid;
  grid-template-columns: 42% 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(8px, calc(var(--su) * 1.4), 20px);
  min-height: 0;
}

button {
  font: 700 clamp(13px, calc(var(--su) * 1.5), 19px) var(--font-ui);
  color: var(--ink);
  background: linear-gradient(180deg, var(--wood-hi), var(--wood-3) 45%, var(--wood-2));
  border: 1px solid #7a5a3c;
  border-radius: 7px;
  padding: .3em .6em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff1f, 0 2px 0 #0008;
  transition: color .12s, border-color .12s, transform .08s, background .12s, box-shadow .12s;
}
button:hover, button:focus-visible { color: var(--brass-hi); border-color: var(--brass); }
button:active { transform: translateY(1px); box-shadow: inset 0 1px 3px #0008; }
button.active {
  color: #241507;
  background: linear-gradient(180deg, #ffe7a8, var(--brass-hi) 40%, var(--brass));
  border-color: #ffe7a8;
  box-shadow: 0 0 12px #ffd27a55, inset 0 1px 0 #fff8;
}
button.secondary { background: transparent; box-shadow: none; }
button[hidden] { display: none; }

#verbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(4px, calc(var(--su) * .45), 8px);
  min-height: 0;
}
#verbs button {
  display: flex; align-items: center; justify-content: center; gap: .4em;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(13px, calc(var(--su) * 1.6), 21px);
  min-height: 0; min-width: 0;
  overflow: hidden;
}
#verbs button svg { font-size: 1.15em; opacity: .85; }
#verbs button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#menu-btn { font-family: var(--font-ui) !important; color: var(--ink-dim); }

#inventory-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(4px, calc(var(--su) * .4), 8px);
  min-height: 0;
}
.inv-nav { display: grid; grid-template-rows: 1fr 1fr; gap: inherit; }
.inv-nav button { padding: 0 .35em; display: grid; place-items: center; font-size: clamp(14px, calc(var(--su) * 1.4), 20px); }
.inv-nav button:disabled { opacity: .3; cursor: default; }

#inventory {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(4px, calc(var(--su) * .4), 8px);
  min-height: 0;
}
#inventory li {
  position: relative;
  background: radial-gradient(ellipse at 50% 40%, #2a1c12, #120b06);
  border: 1px solid #5f4630;
  border-radius: 8px;
  box-shadow: inset 0 2px 6px #000c, 0 1px 0 #ffffff12;
  cursor: pointer;
  min-height: 0;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
#inventory li:empty { cursor: default; }
#inventory li[data-id]:hover, #inventory li:focus-visible {
  border-color: var(--brass); outline: none;
  box-shadow: inset 0 2px 6px #000c, 0 0 10px #d6a64644;
}
#inventory li.selected { border-color: var(--brass-hi); box-shadow: inset 0 0 14px #ffd27a77, 0 0 10px #ffd27a55; }
#inventory li.new { animation: pop .5s ease-out; }
#inventory img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 2px #000c); }
@keyframes pop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

body.busy #controls { opacity: .55; pointer-events: none; }

/* ---------- Dialogauswahl (überdeckt das Bedienfeld, im Querformat das Bild) ---------- */
#choices {
  position: relative;
  z-index: 3;
  margin: 0;
  padding: clamp(8px, calc(var(--su) * .9), 14px) clamp(10px, calc(var(--su) * 1.6), 22px);
  list-style: none;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(4px, calc(var(--su) * .4), 7px);
  overflow-y: auto;
  background:
    linear-gradient(180deg, #00000070, transparent 30%),
    linear-gradient(180deg, var(--wood-2), var(--wood));
  border-top: 3px solid var(--brass);
}
#choices[hidden] { display: none; }
#choices li button {
  width: 100%;
  display: flex; gap: .55em; align-items: baseline;
  text-align: left;
  font: 500 calc(clamp(14px, calc(var(--su) * 1.65), 21px) * var(--text-k, 1)) var(--font-ui);
  color: var(--ink);
  padding: .4em .8em;
  background: linear-gradient(90deg, #0000004d, #00000014);
  border: 1px solid #5a4230;
  border-left: 3px solid var(--brass-lo);
  border-radius: 6px;
  box-shadow: none;
}
#choices li button:hover, #choices li button:focus-visible {
  color: var(--brass-hi); border-left-color: var(--brass-hi);
  background: linear-gradient(90deg, #d6a64626, #00000014);
}
#choices li button::before { content: attr(data-n); font-family: var(--font-display); color: var(--brass); min-width: 1em; }

/* ---------- Titelbildschirm ---------- */
#title-screen {
  position: fixed; inset: 0; z-index: 35;
  overflow: hidden;
  background: #05080c;
  display: grid;
  place-items: center;
}
#title-screen[hidden] { display: none; }
#title-screen .ts-bg {
  position: absolute; inset: -4%;
  background: url("../assets/cut/intro_01.jpg") center / cover no-repeat;
  animation: ts-drift 40s ease-in-out infinite alternate;
  filter: saturate(1.05);
}
#title-screen .ts-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 0%, #0008 60%, #000c 100%),
    linear-gradient(180deg, #0006, transparent 35%, #000a);
}
@keyframes ts-drift { from { transform: scale(1.02) translateX(-1.5%); } to { transform: scale(1.1) translateX(1.5%); } }
#title-screen .ts-content {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 4vh, 40px);
  padding: max(16px, var(--safe-t)) 16px max(16px, var(--safe-b));
  text-align: center;
  animation: ts-in 1.6s ease-out both;
}
@keyframes ts-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#title-screen .ts-logo small {
  display: block;
  font: 400 clamp(13px, 1.6vw, 18px) var(--font-display);
  letter-spacing: .3em; color: var(--brass);
  text-shadow: 0 2px 8px #000;
}
#title-screen h1 {
  margin: .2em 0 0;
  font: 400 clamp(38px, 7.2vw, 96px) var(--font-display);
  line-height: .95;
  color: var(--brass-hi);
  text-shadow: 0 0 30px #ffd27a66, 0 4px 0 #3a2410, 0 8px 30px #000;
}
#title-screen .ts-menu { display: flex; flex-direction: column; gap: 10px; width: min(360px, 86vw); }
#title-screen .ts-menu button {
  font: 400 clamp(17px, 2vw, 22px) var(--font-display);
  padding: .55em 1em;
  background: linear-gradient(180deg, #2a1c12e6, #120b07ee);
  border: 1px solid #d6a64677;
  border-radius: 10px;
  backdrop-filter: blur(4px);
}
#title-screen .ts-menu button:hover, #title-screen .ts-menu button:focus-visible { border-color: var(--brass-hi); color: var(--brass-hi); }
#title-screen .ts-menu .ts-main {
  display: flex; flex-direction: column; gap: 2px;
  font-size: clamp(20px, 2.4vw, 26px);
  background: linear-gradient(180deg, #ffe7a8, var(--brass-hi) 40%, var(--brass));
  color: #241507; border-color: #ffe7a8;
  box-shadow: 0 0 24px #ffd27a55;
}
/* Der Hauptknopf hat beim Start den Fokus: dunkle Schrift behalten, sonst Gold auf Gold */
#title-screen .ts-menu .ts-main:hover, #title-screen .ts-menu .ts-main:focus-visible {
  color: #241507; border-color: #fff4d6;
  box-shadow: 0 0 0 3px #fff4d6aa, 0 0 32px #ffd27a99;
}
#title-screen .ts-menu .ts-main small { font: 600 13px var(--font-ui); color: #4a2e12; }
#title-screen .ts-menu .ts-main small:empty { display: none; }
#title-screen .ts-menu button[hidden] { display: none; }
#title-screen .ts-hint {
  position: absolute; bottom: max(10px, var(--safe-b)); left: 0; right: 0;
  text-align: center; font-size: 12px; color: #fff8; margin: 0;
}

/* ---------- Overlays ---------- */
.overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: max(12px, var(--safe-t)) max(12px, var(--safe-r)) max(12px, var(--safe-b)) max(12px, var(--safe-l));
  background: radial-gradient(ellipse at center, #1a1410cc, #000e);
  backdrop-filter: blur(3px);
  z-index: 40;
}
.overlay[hidden] { display: none; }
#login {
  background:
    linear-gradient(#000a, #000d),
    url("../assets/cut/intro_01.jpg") center / cover no-repeat,
    var(--sea);
}
.card {
  position: relative;
  width: min(100%, 460px);
  max-height: 100%;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 50% 0%, #4a3423 0%, transparent 70%),
    linear-gradient(180deg, #33241a, #1d140d);
  border: 2px solid var(--brass);
  border-radius: 16px;
  padding: 26px 28px;
  box-shadow: 0 0 0 4px #1d140d, 0 0 0 5px #d6a64655, 0 24px 70px #000d;
  display: flex; flex-direction: column; gap: 14px;
  user-select: text;
}
.card.wide { width: min(100%, 660px); }
.card h1, .card h2 { font: 400 34px var(--font-display); color: var(--brass-hi); margin: 0; text-align: center; line-height: 1.1; text-shadow: 0 0 18px #d6a64644; }
.card h1::after, .card h2::after {
  content: ""; display: block; margin: 10px auto 0; width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}
.card h2 { font-size: 28px; }
.card .sub { margin: -6px 0 4px; text-align: center; color: var(--ink-dim); font-style: italic; }
.card label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; color: var(--ink-dim); }
.card input:not([type=range]):not([type=checkbox]) {
  font: 500 18px var(--font-ui);
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid #6b4e36;
  background: #120c08;
  color: var(--ink);
  box-shadow: inset 0 2px 4px #000a;
}
.card input:focus { outline: 2px solid var(--brass); }
.card button { font-size: 18px; padding: 10px 18px; }
.card .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.card .error { color: var(--danger); min-height: 1.2em; margin: 0; }
.card .hint { font-size: 14px; color: var(--ink-dim); text-align: center; margin: 0; }
body.touch .mouse-only, body:not(.touch) .touch-only { display: none; }

/* Notizbuch: Papier statt Holz */
.notebook {
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, #8a6a4a22 27px 28px),
    linear-gradient(180deg, #efe2c6, #e2cfa8);
  color: #3a2616;
  border-color: #8c6526;
  box-shadow: 0 0 0 4px #2a1c12, 0 0 0 5px #d6a64655, 0 24px 70px #000d;
}
.notebook h2 { color: #6b3d16; text-shadow: none; }
.notebook h2::after { background: linear-gradient(90deg, transparent, #8c6526, transparent); }
.notebook h3 { margin: 0 0 6px; font: 400 19px var(--font-display); color: #6b3d16; letter-spacing: .04em; }
.notebook h3 .count { font: 600 14px var(--font-ui); color: #8a6a4a; }
.notebook section { display: flex; flex-direction: column; }
.notebook section[hidden] { display: none; }
.notebook ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.notebook li { font-size: calc(16px * var(--text-k, 1)); line-height: 1.38; }
.notebook li b { display: block; font-weight: 800; color: #4a2a12; }
.notebook li.done { color: #7d6a55; }
.notebook li.done b { text-decoration: line-through; text-decoration-color: #8c652688; }
.notebook li.done b::after { content: "  ✓"; color: #4f7a3a; text-decoration: none; }
.notebook li.new b::before { content: "neu  "; color: #c0521f; font-size: 12px; letter-spacing: .08em; }
.notebook details { background: #fff6; border: 1px solid #8c652655; border-radius: 8px; padding: 6px 10px; }
.notebook details summary { cursor: pointer; font-weight: 800; color: #4a2a12; }
.notebook details p { margin: 6px 0 2px; font-family: var(--font-ui); font-style: italic; }
.notebook .j-goal { background: #6b3d16; color: #fff3d6; border-radius: 10px; padding: 10px 14px; box-shadow: inset 0 2px 6px #0006; }
.notebook .j-goal small { font: 400 13px var(--font-display); letter-spacing: .14em; color: var(--brass-hi); }
.notebook .j-goal p { margin: 2px 0 0; font-size: 18px; font-weight: 700; }
.notebook button { color: var(--ink); }
.notebook .j-hint { border: 1px dashed #8c652699; border-radius: 10px; padding: 10px 14px; background: #fff4; gap: 6px; }
.notebook .j-hint ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }
.notebook .j-hint li { font-size: 16px; }
.notebook .j-hint li:last-child { font-weight: 700; }
.notebook .j-hint button { align-self: flex-start; font-size: 15px; padding: 7px 14px; }
.notebook .j-hint button.solution { background: linear-gradient(180deg, #8a3a1c, #5a220e); border-color: #c0521f; }

/* Chronik */
.chronik .chr-stats { margin: -4px 0 0; text-align: center; font-weight: 700; color: #6b3d16; }
.chronik h3 small { font: 500 13px var(--font-ui); color: #8a6a4a; letter-spacing: 0; }
.chronik .chr-endings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chronik .chr-endings li {
  padding: 8px 10px; border-radius: 8px; border: 1px solid #8c652666;
  background: #fff5; font-size: 14px; line-height: 1.25;
}
.chronik .chr-endings li b { display: block; font: 400 16px var(--font-display); color: #4a2a12; }
.chronik .chr-endings li.locked { background: #0000000f; color: #8a7a68; }
.chronik .chr-endings li.locked b { color: #9a8a78; }
.chronik .chr-decisions { display: flex; flex-direction: column; gap: 12px; }
.chronik .chr-dec b { display: block; margin-bottom: 4px; color: #4a2a12; }
.chronik .chr-opt { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; margin-top: 3px; border-radius: 6px; font-size: 15px; overflow: hidden; background: #0000000d; }
.chronik .chr-opt i { position: absolute; left: 0; top: 0; bottom: 0; background: #8c652633; z-index: 0; }
.chronik .chr-opt span { position: relative; z-index: 1; }
.chronik .chr-opt.mine { font-weight: 800; color: #3a1c08; }
.chronik .chr-opt.mine i { background: #d6a64688; }
.chronik .chr-opt.mine span:first-child::before { content: "▸ "; color: #c0521f; }
@media (max-width: 560px) { .chronik .chr-endings { grid-template-columns: repeat(2, 1fr); } }
.chapter-list { display: flex; flex-direction: column; gap: 8px; }
.chapter-list button { display: flex; gap: 12px; align-items: baseline; text-align: left; font-size: 17px; }
.chapter-list button small { font: 400 15px var(--font-display); color: var(--brass); min-width: 4.2em; }

#slots { display: flex; flex-direction: column; gap: 8px; }
.slot .thumb {
  position: relative; width: 96px; aspect-ratio: 16 / 9;
  border-radius: 6px; overflow: hidden;
  background: radial-gradient(ellipse, #2a1c12, #0d0805);
  border: 1px solid #6b4e36;
  display: grid; place-items: center;
}
.slot .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot .thumb .n { position: relative; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.slot .thumb img + .n { position: absolute; left: 5px; bottom: 1px; font-size: 18px; }
.slot {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center;
  background: #0006; border: 1px solid #5a4230; border-radius: 10px; padding: 8px 10px;
  box-shadow: inset 0 1px 3px #0008;
}
.slot .n { font: 400 22px var(--font-display); color: var(--brass); text-align: center; }
.slot .info { font-size: 16px; min-width: 0; }
.slot .info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .info small { display: block; color: var(--ink-dim); }
.slot button { font-size: 15px; padding: 6px 12px; }

.card label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
.card label.check input { width: 20px; height: 20px; accent-color: var(--brass); flex: none; }

.credits { font-size: 13px; color: var(--ink-dim); }
.credits summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.credits p { margin: 6px 0 0; line-height: 1.35; }

.volumes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.volumes label { font-size: 14px; }
.volumes input { accent-color: var(--brass); width: 100%; }

@media (max-width: 560px) {
  .card { padding: 20px 16px; }
  .card h1 { font-size: 28px; }
  .volumes { grid-template-columns: repeat(2, 1fr); }
  .slot { gap: 6px; padding: 6px 8px; grid-template-columns: auto 1fr auto auto; }
  .slot .thumb { width: 64px; }
  .slot button { padding: 6px 8px; font-size: 14px; }
}

#toast {
  position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translate(-50%, 20px);
  max-width: calc(100vw - 24px);
  background: #000d; color: var(--ink); border: 1px solid var(--brass);
  padding: 10px 18px; border-radius: 10px; font-size: 16px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast.error { border-color: var(--danger); color: var(--danger); }

/* ---------- Fokus: gut sichtbar für Tastatur und Gamepad ---------- */
:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 2px; }
body.pad :focus { outline: 3px solid var(--brass-hi); outline-offset: 2px; box-shadow: 0 0 0 7px #ffd27a33; }
#inventory li:focus-visible, body.pad #inventory li:focus { outline-offset: -1px; }
.card input:focus { outline: 2px solid var(--brass); }

/* ---------- Satzzeile mit Abbrechen-Knopf ---------- */
#sentence-bar { display: flex; justify-content: center; align-items: center; gap: 6px; min-width: 0; }
#sentence-bar #sentence { flex: 0 1 auto; }
#sentence-cancel {
  flex: none; display: grid; place-items: center;
  width: 1.9em; height: 1.9em; padding: 0; border-radius: 50%;
  font-size: clamp(11px, calc(var(--su) * 1.1), 15px);
}
#sentence-cancel[hidden] { display: none; }
#sentence { font-size: calc(clamp(13px, calc(var(--su) * 1.5), 20px) * var(--text-k, 1)); }

/* Tasche gibt es nur im Touch-Layout */
#inv-toggle { display: none; }

/* Verb leuchtet kurz auf, wenn es gewählt wird */
#verbs button.pop { animation: verb-pop .32s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes verb-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ---------- Zeile am Cursor (Maus und Gamepad) ---------- */
#cursor-label {
  position: absolute; left: 0; top: 0; z-index: 6;
  display: flex; align-items: center; gap: .45em;
  max-width: 60%;
  padding: .2em .7em .25em .5em;
  font: 700 calc(clamp(13px, calc(var(--su) * 1.4), 19px) * var(--text-k, 1)) var(--font-ui);
  color: var(--ink);
  background: linear-gradient(#1b120bea, #120b07e0);
  border: 1px solid #d6a64699;
  border-radius: 8px;
  box-shadow: 0 6px 16px #000a;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .12s;
  will-change: transform;
}
#cursor-label.on { opacity: 1; }
#cursor-label span { overflow: hidden; text-overflow: ellipsis; }
#cursor-label img { width: 1.9em; height: 1.9em; object-fit: contain; filter: drop-shadow(0 2px 2px #000c); }
#cursor-label img[hidden] { display: none; }
body.touch #cursor-label { display: none; }
body:not(.touch) #hover-label { display: none; }
body.pad #hover-label { display: none; }

/* Gamepad-Cursor */
#pad-cursor {
  position: absolute; left: 0; top: 0; z-index: 6;
  width: 32px; height: 32px; margin: -16px 0 0 -16px;
  background: center / contain no-repeat;
  pointer-events: none;
  display: none;
  filter: drop-shadow(0 2px 3px #000c);
}
body.pad #pad-cursor { display: block; }
body.pad #game canvas { cursor: none !important; }
body.cutscene-open #pad-cursor, body.choices-open #pad-cursor { display: none; }

/* ---------- Ladeanzeige ---------- */
#loading {
  position: absolute; left: 50%; bottom: calc(var(--su) * 2);
  transform: translate(-50%, 8px);
  display: flex; align-items: center; gap: .6em;
  padding: .35em 1em .4em .7em;
  font: 600 clamp(12px, calc(var(--su) * 1.3), 16px) var(--font-ui);
  color: var(--ink-dim);
  background: #0b0705d9;
  border: 1px solid #d6a64666;
  border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 9;
}
#loading.on { opacity: 1; transform: translate(-50%, 0); }
#loading i {
  width: 1.2em; height: 1.2em; border-radius: 50%;
  background: conic-gradient(from 0deg, #ffd27a 0 18%, transparent 30% 100%);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%);
  mask: radial-gradient(circle, transparent 38%, #000 40%);
  animation: beam 1s linear infinite;
}
@keyframes beam { to { transform: rotate(360deg); } }

/* ---------- Übergänge ---------- */
.overlay:not([hidden]) > .card { animation: card-in .28s cubic-bezier(.2, .8, .3, 1.15) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
#choices li { animation: choice-in .26s ease-out both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes choice-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
#cutscene.waiting .cs-cap.show::after {
  content: "▼"; position: absolute; right: 14px; bottom: 6px;
  font-size: 13px; color: var(--brass-hi);
  animation: bob 1s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(4px); opacity: .5; } }
body.reduce-fx *, body.reduce-fx *::before, body.reduce-fx *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }

/* ---------- Einstellungen ---------- */
.settings { gap: 12px; }
.set-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.set-tabs button { font-size: 16px; padding: 7px 14px; background: transparent; box-shadow: none; }
.set-tabs button[aria-selected="true"] { color: #241507; background: linear-gradient(180deg, #ffe7a8, var(--brass-hi) 40%, var(--brass)); border-color: #ffe7a8; }
.set-page { display: flex; flex-direction: column; gap: 14px; min-height: 220px; }
.set-page[hidden] { display: none; }
.set-row { display: flex; flex-direction: column; gap: 6px; }
.set-label { font-weight: 700; color: var(--ink-dim); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: #0007; border: 1px solid #5a4230; border-radius: 10px; }
.seg button { font-size: 15px; padding: 8px 6px; background: transparent; border-color: transparent; box-shadow: none; }
.seg button.active { color: #241507; background: linear-gradient(180deg, #ffe7a8, var(--brass-hi) 40%, var(--brass)); border-color: #ffe7a8; }
.set-preview {
  margin: 0; padding: 10px 14px; border-radius: 10px; background: #0008; border: 1px dashed #d6a64655;
  font: 800 calc(18px * var(--text-k, 1)) var(--font-ui); color: #ffe9a8; text-shadow: 0 2px 0 #000, 0 0 6px #000;
}
.set-preview b { color: var(--brass); }
.ctrl-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ctrl-card { background: #0006; border: 1px solid #5a4230; border-radius: 10px; padding: 10px 12px; }
.ctrl-card h3, .keys-title { margin: 0 0 6px; font: 400 18px var(--font-display); color: var(--brass-hi); }
.keys-title small { font: 500 13px var(--font-ui); color: var(--ink-dim); margin-left: 6px; }
.ctrl-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-dim); }
.ctrl-card b { color: var(--ink); }
.keymap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 14px; }
.keymap li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; }
.keymap .key {
  min-width: 5.5em; font: 700 14px var(--font-ui); padding: 5px 10px;
  background: linear-gradient(#f2e6cc, #cdb88e); color: #2a1a0c; border: 1px solid #8c6526; border-bottom-width: 3px; border-radius: 6px;
}
.keymap .key.capturing { background: var(--brass-hi); animation: dot-pulse 1s ease-in-out infinite; }
body.touch .settings .mouse-only { display: none; }

/* ---------- Drehhinweis (Touch hochkant) ---------- */
#rotate-hint { display: none; }
#rotate-hint.on {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: max(24px, var(--safe-t)) 28px max(24px, var(--safe-b));
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 40%, #2a1c12ee, #05080cf8 70%),
    url("../assets/cut/intro_01.jpg") center / cover no-repeat;
}
#rotate-hint h2 { margin: 0; font: 400 30px var(--font-display); color: var(--brass-hi); text-shadow: 0 0 20px #d6a64666; }
#rotate-hint p { margin: 0; max-width: 300px; font-size: 17px; line-height: 1.4; color: var(--ink); }
#rotate-hint button { font-size: 17px; padding: 11px 20px; margin-top: 6px; }
#rotate-hint button[hidden] { display: none; }
.rh-phone {
  width: 62px; height: 104px; border: 4px solid var(--brass-hi); border-radius: 12px;
  position: relative; margin-bottom: 8px;
  box-shadow: 0 0 24px #ffd27a44;
  animation: rh-turn 2.6s ease-in-out infinite;
}
.rh-phone i { position: absolute; left: 50%; bottom: 6px; width: 14px; height: 4px; margin-left: -7px; border-radius: 2px; background: var(--brass-hi); }
@keyframes rh-turn { 0%, 25% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }

/* ======================================================================
   Touch (Handy und Tablet, immer quer)
   Bühne in der Mitte, so groß es geht. Bedienung liegt halbtransparent an den Rändern:
   links die Verben, rechts oben Notizbuch/Hotspots/Menü, rechts unten die Tasche.
   Auf Handys landen die Leisten in den schwarzen Seitenrändern, auf 4:3-Tablets liegen sie über dem Bild.
   ====================================================================== */
.layout-touch #frame {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  display: grid; place-items: center;
  grid-template-columns: 1fr; grid-template-rows: 1fr;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  border-radius: 0; box-shadow: none;
  background: #000;
}
.layout-touch #stage { grid-area: 1 / 1; width: var(--stage-w); height: var(--stage-h); }

.layout-touch {
  --rail: clamp(42px, 11.5vh, 54px);
  --glass: #120b0799;
  --glass-hi: #2a1c12cc;
  --edge: 8px;
}
.layout-touch .rail-btn, .layout-touch #verbs button, .layout-touch .hud-btn, .layout-touch #inv-toggle {
  width: var(--rail); height: var(--rail);
  padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: radial-gradient(circle at 50% 35%, var(--glass-hi), var(--glass));
  border: 1.5px solid #d6a64680;
  box-shadow: 0 3px 10px #0007;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: .9;
}
.layout-touch #verbs button.active, .layout-touch .hud-btn.on {
  color: #201409; opacity: 1;
  background: radial-gradient(circle at 50% 35%, var(--brass-hi), var(--brass));
  border-color: #ffe7a8;
  box-shadow: 0 0 14px #ffd27a77;
}

.layout-touch #panel {
  grid-area: 1 / 1;
  position: absolute; inset: 0;
  padding: 0; gap: 0;
  background: none; border: none; box-shadow: none;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}
.layout-touch #panel::before, .layout-touch #panel::after { display: none; }
.layout-touch #panel > *, .layout-touch #controls > * { pointer-events: auto; }
.layout-touch #controls { display: contents; }

/* Verben: senkrechte Leiste links */
.layout-touch #verbs {
  position: absolute;
  left: calc(var(--safe-l) + var(--edge)); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 7px;
}
.layout-touch #verbs button span { display: none; }
.layout-touch #verbs button svg { font-size: calc(var(--rail) * .46); opacity: 1; }
.layout-touch #menu-btn { display: none !important; }

/* Schnellknöpfe: rechts oben, untereinander */
.layout-touch #hud {
  grid-area: 1 / 1;
  position: absolute; z-index: 11;
  top: calc(var(--safe-t) + var(--edge)); right: calc(var(--safe-r) + var(--edge));
  flex-direction: column; gap: 7px;
}
.layout-touch .hud-btn { font-size: calc(var(--rail) * .44); }

/* Tasche: rechts unten. Zeigt die Anzahl und den gehaltenen Gegenstand. */
.layout-touch #inv-toggle {
  display: grid;
  position: absolute;
  right: calc(var(--safe-r) + var(--edge)); bottom: calc(var(--safe-b) + var(--edge));
  width: calc(var(--rail) * 1.18); height: calc(var(--rail) * 1.18);
  font-size: calc(var(--rail) * .52);
}
.layout-touch #inv-toggle .count {
  position: absolute; right: -3px; top: -3px;
  min-width: 20px; height: 20px; padding: 0 5px;
  font: 800 12px/20px var(--font-ui); color: #201409;
  background: var(--brass-hi); border-radius: 10px; border: 2px solid #120b07;
}
.layout-touch #inv-toggle .count:empty { display: none; }
.layout-touch #inv-toggle .held {
  position: absolute; left: -10px; top: -10px; width: 30px; height: 30px; object-fit: contain;
  background: #120b07dd; border: 1.5px solid var(--brass-hi); border-radius: 50%; padding: 3px;
}
.layout-touch #inv-toggle .held[hidden] { display: none; }
body.inv-open #inv-toggle { color: #201409; background: radial-gradient(circle at 50% 35%, var(--brass-hi), var(--brass)); opacity: 1; }
#inv-toggle.bump { animation: bag-bump .5s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes bag-bump { 0% { transform: scale(1); } 35% { transform: scale(1.25) rotate(-6deg); } 100% { transform: scale(1); } }

/* Inventar-Schublade: eine Reihe am unteren Rand, gleitet herein */
.layout-touch #inventory-wrap {
  position: absolute;
  left: 50%; bottom: calc(var(--safe-b) + var(--edge));
  display: flex; align-items: center; gap: 6px;
  max-width: calc(100% - 2 * (var(--safe-r) + var(--rail) * 1.18 + var(--edge) * 2));
  padding: 6px;
  background: linear-gradient(#1b120bd9, #0b0705e6);
  border: 1.5px solid #d6a64699;
  border-radius: 14px;
  box-shadow: 0 10px 30px #000a;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translate(-50%, calc(100% + 30px));
  opacity: 0;
  visibility: hidden;
  transition: transform .26s cubic-bezier(.2, .8, .3, 1.1), opacity .2s, visibility 0s .26s;
}
body.inv-open #inventory-wrap { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .26s cubic-bezier(.2, .8, .3, 1.1), opacity .2s; }
.layout-touch #inventory {
  display: grid; grid-auto-flow: column; grid-template-rows: none;
  grid-template-columns: none;
  grid-auto-columns: 54px; gap: 6px;
}
.layout-touch #inventory li { width: 54px; height: 54px; }
.layout-touch #inventory li:empty { display: none; }
.layout-touch .inv-nav { display: flex; flex-direction: column; gap: 4px; }
.layout-touch .inv-nav button { width: 34px; height: 25px; padding: 0; }
.layout-touch #inv-prev svg { transform: rotate(-90deg); }
.layout-touch #inv-next svg { transform: rotate(-90deg); }
.layout-touch #inventory-wrap.single-page .inv-nav { display: none; }

/* Satzzeile: nur wenn ein Verb oder Gegenstand gewählt ist, über der Schublade */
.layout-touch #sentence-bar {
  position: absolute; left: 50%; top: calc(var(--safe-t) + var(--edge));
  transform: translateX(-50%);
  max-width: calc(100% - 2 * (var(--rail) + var(--edge) * 3));
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
body.has-selection.layout-touch #sentence-bar { opacity: 1; pointer-events: auto; }
.layout-touch #sentence {
  font-size: calc(15px * var(--text-k, 1));
  min-width: 0; padding: 6px 14px;
  background: #120b07cc; border: 1px solid #d6a64699; border-radius: 999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.layout-touch #sentence-cancel { width: 34px; height: 34px; font-size: 15px; background: #120b07cc; }

/* Name des gedrückten Hotspots oben, Banner etwas tiefer */
.layout-touch #hover-label { top: calc(var(--su) * 1.4); font-size: calc(15px * var(--text-k, 1)); }
body.has-selection.layout-touch #hover-label { top: calc(var(--su) * 1.4 + 46px); }
.layout-touch #recap { top: calc(var(--su) * 5); max-width: min(70%, 520px); padding: .4em 1em .5em; }
.layout-touch #recap span { font-size: calc(14px * var(--text-k, 1)); }

/* Dialogauswahl: halbtransparente Liste über dem unteren Bildrand */
.layout-touch #choices {
  grid-area: 1 / 1;
  position: absolute; z-index: 12;
  left: 50%; bottom: calc(var(--safe-b) + var(--edge));
  transform: translateX(-50%);
  width: fit-content;
  min-width: min(calc(var(--stage-w) - 16px), 420px);
  max-width: min(calc(var(--stage-w) - 16px), 900px);
  max-height: 54%;
  padding: 5px 6px;
  gap: 2px;
  justify-content: flex-start;
  background: linear-gradient(#120b0788, #0b0705b8);
  border: 1.5px solid #d6a64699;
  border-radius: 14px;
  box-shadow: 0 10px 30px #0008;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.layout-touch #choices li button {
  font-size: calc(15px * var(--text-k, 1)); padding: 6px 10px; min-height: 36px;
  background: transparent; border-color: transparent; border-left-color: transparent;
  text-shadow: 0 1px 2px #000, 0 0 6px #000;
}
.layout-touch #choices li button:hover, .layout-touch #choices li button:focus-visible, .layout-touch #choices li button:active {
  background: linear-gradient(90deg, #d6a64633, #0000); border-left-color: var(--brass-hi);
}
/* Im Gespräch tritt die Bedienung zurück */
body.choices-open.layout-touch #verbs, body.choices-open.layout-touch #inv-toggle, body.choices-open.layout-touch #hud { opacity: 0; pointer-events: none; }
.layout-touch #verbs, .layout-touch #inv-toggle, .layout-touch #hud { transition: opacity .25s; }
body.cutscene-open.layout-touch #panel, body.cutscene-open.layout-touch #hud { display: none; }
body.touch #frame > #choices[hidden] { display: none; }

/* Porträt im Gespräch: kleiner und durchscheinend */
.layout-touch #portrait { bottom: calc(var(--su) * 1.6); }
.layout-touch #portrait.left { left: calc(var(--su) * 1.6); }
.layout-touch #portrait.right { right: calc(var(--su) * 1.6); }
.layout-touch #portrait .pframe {
  --p: clamp(48px, calc(var(--su) * 7.5), 92px);
  border-width: 2px;
  background: radial-gradient(circle at 50% 35%, #4a342399, #160e0899);
  box-shadow: 0 0 0 1px #1d140d99, 0 6px 16px #0008;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.layout-touch #portrait b { font-size: 12px; padding: 1px 8px; background: #120b07aa; }
body.choices-open.layout-touch #portrait { opacity: 0; }

/* Zwischensequenz und Kapitelkarte füllen den ganzen Bildschirm */
.layout-touch #cutscene, .layout-touch #title-card { position: fixed; z-index: 30; }
.layout-touch #cutscene .cs-cap { bottom: calc(5% + var(--safe-b)); left: calc(6% + var(--safe-l)); right: calc(6% + var(--safe-r)); }
.layout-touch #cutscene .cs-text { font-size: calc(16px * var(--text-k, 1)); }
.layout-touch #cutscene .cs-skip { top: calc(10px + var(--safe-t)); right: calc(10px + var(--safe-r)); font-size: 14px; padding: 6px 12px; }
.layout-touch .minigame { position: fixed; z-index: 30; }

/* Tablet: Leisten waagerecht in den Streifen über und unter dem Bild */
body.bands #verbs {
  top: auto; transform: none; flex-direction: row;
  bottom: calc(var(--safe-b) + (var(--band-h) - var(--rail)) / 2);
}
body.bands #hud { flex-direction: row; top: calc(var(--safe-t) + (var(--band-h) - var(--rail)) / 2); }
body.bands #inv-toggle { bottom: calc(var(--safe-b) + (var(--band-h) - var(--rail) * 1.18) / 2); }
body.bands #inventory-wrap { bottom: calc(var(--safe-b) + var(--band-h) + 8px); }
body.bands #sentence-bar { top: calc(var(--safe-t) + (var(--band-h) - 34px) / 2); }
body.bands.has-selection #hover-label { top: calc(var(--su) * 1.4); }
body.bands #choices { bottom: calc(var(--safe-b) + 8px); max-height: calc(var(--band-h) + var(--stage-h) * .45); }

/* Niedrige Bildschirme (Handy quer): Fenster und Titel kompakter */
@media (max-height: 520px) {
  .card { padding: 14px 18px; gap: 10px; }
  .card h1, .card h2 { font-size: 23px; }
  .card h1::after, .card h2::after { margin-top: 6px; }
  .card button { font-size: 16px; padding: 8px 14px; }
  .card.wide { width: min(100%, 760px); }
  .set-page { min-height: 0; }
  #title-screen .ts-content { flex-direction: row; align-items: center; gap: 6vw; text-align: left; }
  #title-screen .ts-logo { max-width: 46vw; }
  #title-screen h1 { font-size: clamp(30px, 11vh, 58px); }
  #title-screen .ts-menu { width: min(300px, 40vw); gap: 7px; }
  #title-screen .ts-menu button { padding: .4em .8em; font-size: 17px; }
  #title-screen .ts-menu .ts-main { font-size: 19px; }
  #rotate-hint h2 { font-size: 24px; }
  #slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .slot { padding: 5px 7px; gap: 6px; }
  .slot .thumb { width: 54px; }
  .slot .info { font-size: 14px; }
  .slot button { font-size: 13px; padding: 5px 8px; }
  .card .row button { font-size: 15px; padding: 7px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.layout-desktop #hud-menu { display: none; }

/* ---------- Anmeldung mit Reitern ---------- */
.login-card { gap: 12px; }
.login-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 4px; border-radius: 10px;
  background: #120c08; box-shadow: inset 0 2px 4px #000a;
}
.login-tabs [role=tab] {
  font: 700 16px var(--font-ui); padding: 9px 8px;
  border: 0; border-radius: 7px; background: transparent; color: var(--ink-dim);
  box-shadow: none; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.login-tabs [role=tab]:hover { color: var(--ink); }
.login-tabs [role=tab][aria-selected=true] {
  color: #201409;
  background: radial-gradient(circle at 50% 30%, var(--brass-hi), var(--brass));
}
.login-tabs [role=tab]:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
.login-felder { display: flex; flex-direction: column; gap: 12px; }
.login-intro { margin: 0; color: var(--ink-dim); font-size: 15px; text-align: center; }
.feld-hinweis { margin: -6px 0 0; font-size: 13px; color: var(--ink-dim); }
.login-card[data-mode=login] .nur-register,
.login-card[data-mode=register] .nur-login { display: none; }
.pw-feld { position: relative; display: block; }
.pw-feld input { width: 100%; padding-right: 92px !important; box-sizing: border-box; }
.card .pw-zeigen {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font: 600 13px var(--font-ui); padding: 5px 10px;
  background: transparent; color: var(--brass-hi); border: 1px solid #6b4e36; border-radius: 6px; box-shadow: none;
}
.card .login-los { width: 100%; font-size: 19px; padding: 12px 18px; }
.card .login-los:disabled { opacity: .6; cursor: progress; }
.login-oder {
  display: flex; align-items: center; gap: 10px; margin: 2px 0;
  color: var(--ink-dim); font-size: 13px;
}
.login-oder::before, .login-oder::after { content: ""; flex: 1; height: 1px; background: #6b4e36; }
.google-knopf {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 16px var(--font-ui); text-decoration: none;
  padding: 10px 16px; border-radius: 8px;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0;
}
.google-knopf:hover { background: #f2f2f2; }
.google-knopf:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
.google-knopf svg { width: 20px; height: 20px; }
.login-google[hidden] { display: none; }
@media (max-height: 480px) {
  .login-card { padding: 14px 20px; gap: 8px; }
  .login-card h1 { font-size: 24px; }
  .login-card h1::after { margin-top: 6px; }
  .login-felder { gap: 8px; }
  .login-card input:not([type=range]):not([type=checkbox]) { padding: 8px 10px; font-size: 16px; }
  .card .login-los { padding: 9px 16px; }
}

/* ---------- Spannungsanzeige (Flut, Zeitdruck) ---------- */
#meter {
  position: absolute; top: max(10px, var(--safe-t)); left: 50%; transform: translateX(-50%);
  z-index: 30; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: 700 14px var(--font-ui); color: var(--ink);
  text-shadow: 0 1px 4px #000;
}
#meter[hidden] { display: none; }
#meter .meter-bar {
  width: min(260px, 50vw); height: 10px; border-radius: 6px;
  background: #0008; box-shadow: inset 0 0 0 1px #d6a64688; overflow: hidden;
}
#meter .meter-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #4aa3c7, #7fd0e6);
  transition: width .6s ease, background .3s ease;
}
#meter.danger .meter-bar i { background: linear-gradient(90deg, #c7684a, #ff8f6b); animation: meterPuls 1s ease-in-out infinite; }
@keyframes meterPuls { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { #meter.danger .meter-bar i { animation: none; } }
body.reduce-motion #meter.danger .meter-bar i { animation: none; }