:root {
  --bg: #0e1116;
  --panel: rgba(20, 26, 36, 0.82);
  --panel-solid: #141a24;
  --input-bg: #0d1219;
  --chip-bg: rgba(13, 18, 25, 0.7);
  --chip-hover-bg: rgba(110, 168, 255, 0.12);
  --ghost-bg: rgba(13, 18, 25, 0.7);
  --tile-bg: rgba(13, 18, 25, 0.82);
  --tile-bg-strong: rgba(13, 18, 25, 0.92);
  --tile-bg-soft: rgba(13, 18, 25, 0.7);
  --scene-loading-bg: rgba(8, 11, 16, 0.7);
  --overlay: rgba(8, 11, 16, 0.78);
  --overlay-soft: rgba(8, 11, 16, 0.55);
  --chat-bg: rgba(255, 255, 255, 0.05);
  --dock-bg: rgba(13, 18, 25, 0.82);
  --text: #eef3fb;
  --muted: #9fb0c7;
  --accent: #6ea8ff;
  --accent-2: #56d6a0;
  --warm: #f5b76b;
  --border: rgba(255, 255, 255, 0.12);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --composer-radius: 22px;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow: hidden;
}

.hidden { display: none !important; }

/* ---------- Password gate ---------- */
body.gate-locked { overflow: hidden; }
.gate-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(110, 168, 255, 0.14), transparent 60%),
    var(--bg);
}
.gate-card {
  width: min(100%, 380px);
  padding: 28px 24px 24px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--panel-solid);
  box-shadow: var(--shadow);
  text-align: center;
}
.gate-title {
  margin: 0 0 10px;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.gate-hint {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}
.gate-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gate-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}
.gate-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(110, 168, 255, 0.18);
}
.gate-submit {
  padding: 11px 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(120deg, var(--accent), #7c8bff);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.gate-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(110, 168, 255, 0.28);
}
.gate-error {
  margin: 12px 0 0;
  color: #ff8a8a;
  font-size: 0.85rem;
}
body.day .gate-screen {
  background:
    radial-gradient(circle at 18% 14%, rgba(245, 183, 107, 0.22), transparent 42%),
    radial-gradient(circle at 82% 86%, rgba(214, 122, 70, 0.16), transparent 44%),
    linear-gradient(180deg, #fbf5ec 0%, #f1e6d3 100%);
}
body.day .gate-card {
  background: rgba(253, 247, 238, 0.92);
  border-color: rgba(120, 80, 40, 0.12);
}
body.day .gate-title {
  color: #5b3a1a;
  background: linear-gradient(90deg, #c87838, #a64f1f, #d68a4a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Day mode ---------- */
/* Flip the whole palette to light via CSS variables so every surface picks it up consistently.
   The scene photo stays as-is, but all the UI chrome turns light and airy. Translucent fills
   keep the background gradients visible through panels for a cohesive, layered feel. */
body.day {
  --bg: #e9edf4;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-solid: rgba(255, 255, 255, 0.92);
  --input-bg: rgba(255, 255, 255, 0.8);
  --chip-bg: rgba(255, 255, 255, 0.6);
  --chip-hover-bg: rgba(47, 109, 240, 0.10);
  --ghost-bg: rgba(255, 255, 255, 0.68);
  --tile-bg: rgba(255, 255, 255, 0.78);
  --tile-bg-strong: rgba(255, 255, 255, 0.88);
  --tile-bg-soft: rgba(255, 255, 255, 0.6);
  --scene-loading-bg: rgba(243, 246, 251, 0.72);
  --overlay: rgba(8, 11, 16, 0.78);
  --overlay-soft: rgba(8, 11, 16, 0.55);
  --chat-bg: rgba(0, 0, 0, 0.05);
  --dock-bg: rgba(255, 255, 255, 0.82);
  --text: #1b2330;
  --muted: #57617a;
  --accent: #2f6df0;
  --accent-2: #1f9d6b;
  --warm: #b67d18;
  --border: rgba(14, 24, 46, 0.14);
  --shadow: 0 18px 50px rgba(20, 30, 60, 0.16);
}
/* Light-mode overrides for surfaces whose dark default used a literal color or a gradient that
   needs a lighter tint. Most surfaces now pick up light values automatically via the CSS
   variables above; only the ones below need an explicit rule. */
body.day .focus-back,
body.day .chat-reopen { color: var(--text); }
body.day .interact-extra { background: var(--tile-bg-soft); }
body.day .dock { background: var(--dock-bg); }
/* Warm-toned dock surface on the start screen: same translucent white as the chat sidebar but
   with a slight amber wash so the start screen and sidebar feel like one warm family. */
body.day .lib-dock { background: rgba(253, 247, 238, 0.78); }
body.day .scene-bar h2,
body.day .scene-title-en,
body.day .scene-mood { text-shadow: 0 1px 8px rgba(255, 255, 255, 0.6); }
body.day .cost-pop,
body.day .bag-pop,
body.day .use-menu,
body.day .obj-hover { background: var(--panel-solid); color: var(--text); }
body.day .obj-hover .oh-de { color: var(--text); }
body.day .obj-hover .oh-en { color: var(--muted); }
body.day .worldmap {
  background:
    radial-gradient(circle at 18% 14%, rgba(245, 183, 107, 0.22), transparent 42%),
    radial-gradient(circle at 82% 86%, rgba(214, 122, 70, 0.16), transparent 44%),
    linear-gradient(180deg, #fbf5ec 0%, #f1e6d3 100%);
}
body.day .worldmap-svg {
  background:
    radial-gradient(circle at 50% 40%, rgba(200, 120, 56, 0.08), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120, 80, 40, 0.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(120, 80, 40, 0.05) 0 1px, transparent 1px 44px);
}
body.day .wm-label { fill: #5b3a1a; stroke: #f1e6d3; }
body.day .wm-edge-label { fill: #7a5530; stroke: #f1e6d3; }
body.day .wm-edge { stroke: rgba(120, 80, 40, 0.35); }
body.day .wm-rect.placeholder { fill: #eadfce; stroke: rgba(120, 80, 40, 0.35); }
body.day .wm-rect { stroke: rgba(120, 80, 40, 0.55); }
body.day .worldmap-title { color: #5b3a1a; text-shadow: 0 1px 8px rgba(255, 255, 255, 0.6); }
body.day .worldmap-close,
body.day .worldmap-info { background: rgba(253, 247, 238, 0.92); color: var(--text); }

/* ---------- Start screen ---------- */
.start {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  position: relative;
  background:
    radial-gradient(circle at 20% 12%, rgba(110, 168, 255, 0.20), transparent 42%),
    radial-gradient(circle at 82% 88%, rgba(86, 214, 160, 0.14), transparent 42%),
    var(--bg);
}

/* Light-mode start screen: a soft warm cream/amber wash that mirrors the chat sidebar's
   translucent white panels, with gentle warm radial highlights in place of the cool blue ones. */
body.day .start {
  background:
    radial-gradient(circle at 18% 14%, rgba(245, 183, 107, 0.22), transparent 42%),
    radial-gradient(circle at 82% 86%, rgba(214, 122, 70, 0.16), transparent 44%),
    linear-gradient(180deg, #fbf5ec 0%, #f1e6d3 100%);
}
/* Warm tint for the start-screen title gradient in light mode. */
body.day .start-title {
  color: #5b3a1a;
  background: linear-gradient(90deg, #c87838, #a64f1f, #d68a4a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Left library sidebar (start screen) ---------- */
.lib-dock {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  height: 100vh;
  z-index: 20;
  width: 280px;
  max-width: 88vw;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  padding-bottom: 18px;
  background: var(--dock-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.25s ease;
}
.lib-dock.minimized { transform: translateX(-100%); pointer-events: none; }
.lib-dock-title {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 4px;
}
.lib-dock-footer {
  position: relative;
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.lib-dock-footer .menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  top: auto;
  width: auto;
}
.lib-settings-btn { width: 100%; justify-content: center; }
.lib-toggle {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 21;
  border: 1px solid var(--border);
  background: var(--tile-bg-strong);
  color: var(--muted);
  border-radius: 0 8px 8px 0;
  width: 22px; height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}
.lib-toggle:hover { color: var(--text); border-color: var(--accent); }
.lib-chevron { transition: transform 0.2s ease; }
.lib-books { display: none; }
.lib-toggle.minimized {
  width: 48px;
  height: 64px;
  flex-direction: row;
  border-radius: 0 10px 10px 0;
  padding: 0 10px 0 8px;
}
.lib-toggle.minimized .lib-chevron { transform: rotate(180deg); }
.lib-toggle.minimized .lib-books { display: block; }
.lib-toggle:not(.minimized) {
  left: 280px;
  width: 22px;
  height: 64px;
  flex-direction: column;
  border-radius: 0 8px 8px 0;
  padding: 0;
}
.lib-toggle:not(.minimized) .lib-books { display: none; }
.lib-toggle:not(.minimized) .lib-chevron { transform: none; }

/* Recent adventures list inside the left sidebar. */
.start-center {
  width: min(620px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.start-title {
  margin: 0 0 8px;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The single composer: a pill where the textarea and send button share the same grid cell,
   matching the chat-input-wrap layout (text vertically centered, button bottom-right). */
.start-composer {
  display: grid;
  grid-template-areas: "input";
  width: 100%;
  max-width: 560px;
  padding: 0;
  border-radius: var(--composer-radius);
  border: 1px solid var(--border);
  background: var(--input-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.start-composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(110, 168, 255, 0.18);
}
.start-composer textarea {
  grid-area: input;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 44px 12px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  resize: none;
  min-height: 56px;
  max-height: 200px;
  overflow-y: auto;
}
.start-composer textarea::placeholder { color: var(--muted); opacity: 0.85; }
.start-composer textarea:focus { outline: none; }

.send-btn {
  position: relative;
  grid-area: input;
  justify-self: end;
  align-self: end;
  margin: 0 6px 6px 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--composer-radius);
  background: linear-gradient(120deg, var(--accent), #7c8bff);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 1;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.send-btn .send-icon {
  display: block;
  flex: 0 0 auto;
}
.send-btn:hover { transform: scale(1.05); box-shadow: 0 6px 18px rgba(110, 168, 255, 0.3); }
.send-btn:disabled { opacity: 0.5; cursor: progress; }

.start-notice {
  margin: 4px 0 0;
  max-width: 560px;
  color: #c62828;
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
}
body.day .start-notice { color: #b71c1c; }

/* Suggestion chips: small, centered. */
#start-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  max-width: 640px;
  margin-top: 14px;
}
#start-chips button {
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
#start-chips button:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--chip-hover-bg);
}
/* Warm-tone tweaks for the start-screen suggestion chips so they harmonize with the cream
   background instead of looking cool against it. */
body.day #start-chips button { color: #6b4a2a; }
body.day #start-chips button:hover { color: #5b3a1a; border-color: #c87838; background: rgba(245, 183, 107, 0.18); }

.start-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 22px;
}
.start-status-row .spinner {
  width: 18px; height: 18px;
  border-width: 2px;
  flex: 0 0 auto;
}
.start-status-row .status { margin: 0; }

/* World list: each row looks like a chat bubble (light grey bg, rounded), inside the sidebar.
   `flex: 1` makes it fill the dock from below the title down to the footer (settings button),
   so the adventures list stretches the full vertical space available. */
.world-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px;
  /* Custom scrollbar: a thin pill that slides along the right edge, no track background. */
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}
.world-list::-webkit-scrollbar { width: 6px; }
.world-list::-webkit-scrollbar-track { background: transparent; }
.world-list::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.35);
  border-radius: 999px;
}
.world-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  background: var(--chat-bg);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.12s ease;
}
.world-row:hover { background: var(--chip-hover-bg); }
.world-row .wr-main { min-width: 0; flex: 1; }
.world-row .wr-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem; }
.world-row .wr-meta { font-size: 0.7rem; color: var(--muted); }
.world-row .wr-cost { font-size: 0.7rem; color: var(--accent-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.world-row .wr-restart {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  display: grid; place-items: center;
}
.world-row .wr-restart:hover { color: var(--text); border-color: var(--accent); }

/* Bottom-left menu (both screens): worlds button + settings dots. */
.start-bottom-left {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
}
.adventure-bottom-left { position: fixed; }
.bottom-btn {
  border: 1px solid var(--border);
  background: var(--ghost-bg);
  color: var(--muted);
  border-radius: 10px;
  padding: 0 14px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(6px);
  height: 36px;
  box-sizing: border-box;
}
.bottom-btn:hover { color: var(--text); border-color: var(--accent); }

/* Settings / menu popup panel. */
.menu-panel {
  position: absolute;
  left: 18px;
  bottom: 62px;
  z-index: 21;
  width: 240px;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-panel-wide { width: 300px; }
.lib-dock-footer .menu-panel-wide { width: 100%; }
.adventure-bottom-left ~ .menu-panel,
#menu-panel {
  position: fixed;
  left: 50%;
  top: 58px;
  transform: translateX(-50%);
  bottom: auto;
}
.menu-panel.hidden { display: none; }
.menu-row { display: flex; align-items: center; }
.menu-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.menu-toggle:hover { background: rgba(110, 168, 255, 0.12); }
.menu-toggle .icon { flex: 0 0 auto; }
.menu-info {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.menu-info-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.menu-select {
  width: 100%;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
}

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 0.9rem; color: var(--muted); margin-bottom: 6px; }
.field em { color: var(--muted); opacity: 0.8; font-style: italic; }

input[type="text"], select, textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
}
textarea { resize: vertical; }

button.primary {
  border: 0;
  border-radius: 14px;
  padding: 14px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(120deg, var(--accent), #7c8bff);
  color: #08111f;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
button.primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(110, 168, 255, 0.28); }
button.primary:disabled { opacity: 0.6; cursor: progress; transform: none; box-shadow: none; }

.status { margin: 10px 0 0; font-size: 0.88rem; color: var(--muted); min-height: 1.2em; }
.status.error { color: #ff8a8a; }

/* ---------- Adventure ---------- */
.adventure { position: fixed; inset: 0; }

.scene-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #0a0e14;
  transition: background-image 0.4s ease;
}
.scene-image::after {
  content: "";
  position: absolute;
  inset: 0;
  /* No dark overlay — the scene image shows through unfiltered. The title uses a bright
     text-shadow for legibility instead. */
  pointer-events: none;
}

.scene-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  background: var(--scene-loading-bg);
  z-index: 5;
  color: var(--muted);
}
.spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.start-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  min-height: 22px;
}
.start-status-row .spinner {
  width: 18px; height: 18px;
  border-width: 2px;
  flex: 0 0 auto;
}
.start-status-row .status { margin: 0; }

.scene-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 9;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px;
  pointer-events: none;
}
.scene-bar > * { pointer-events: auto; }
.scene-title-block { max-width: 33vw; }
.scene-bar h2 { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.3; text-shadow: 0 0 2px rgba(255,255,255,1), 0 0 8px rgba(255,255,255,0.96), 0 0 16px rgba(255,255,255,0.88), 0 0 28px rgba(255,255,255,0.72), 0 1px 2px rgba(0,0,0,0.45); }
.scene-title-en { margin: 1px 0 0; color: var(--muted); font-size: 0.82rem; font-weight: 400; text-shadow: 0 0 2px rgba(255,255,255,0.98), 0 0 8px rgba(255,255,255,0.9), 0 0 16px rgba(255,255,255,0.78), 0 1px 2px rgba(0,0,0,0.45); }

/* Top icons: clock (day + phase), diary (book), map (globe). */
.top-icons {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
  align-items: center;
}
.top-icon {
  border: 1px solid var(--border);
  background: var(--ghost-bg);
  color: var(--text);
  border-radius: 10px;
  height: 34px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(6px);
}
.top-icon:hover { border-color: var(--accent); }
.top-icon .icon { flex: 0 0 auto; }
/* Lucide line icons are slightly thicker than the surrounding text at the same pixel size, so
   we scale the icons down a touch and lean on the SVG's stroke for visual weight matching. */
.top-icon .icon { width: 16px; height: 16px; }
.top-icon { font-size: 0.78rem; }
.clock-label { font-size: 0.78rem; white-space: nowrap; }
.top-icon.rewound { color: var(--warm); border-color: var(--warm); }

button.ghost {
  border: 1px solid var(--border);
  background: var(--ghost-bg);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
}
button.ghost:hover { border-color: var(--accent); }

/* 3-state audio button (now inside the menu, but keep the style for the crossed state). */
.audio-ico-svg { transition: opacity 0.12s ease; }
.audio-muted .audio-ico-svg path:nth-child(2) { display: none; }
.audio-muted .audio-ico-svg::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px;
  top: 50%;
  height: 2px;
  background: #ff8a8a;
  transform: rotate(-20deg);
  border-radius: 2px;
}

/* Reachable scenes: a vertical rail down the LEFT edge, leaving the bottom free for objects. */
.exits-rail {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  max-width: 280px;
  max-height: 80vh;
  overflow-y: auto;
}
.exits-rail:empty { display: none; }

/* Interactables + bag: centered cluster at the lower edge of the viewport. */
.interact-dock {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 370px);
}
.adventure.no-dock .interact-dock { max-width: calc(100vw - 60px); }
.interact-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.interact-extra {
  justify-content: center;
  max-width: min(70vw, 760px);
  padding: 8px;
  border-radius: 14px;
  background: var(--overlay-soft);
  backdrop-filter: blur(4px);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-row-label {
  align-self: center;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-right: 2px;
}
.exit {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border);
  background: var(--tile-bg);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  text-align: left;
  backdrop-filter: blur(4px);
  transition: border-color 0.12s ease;
}
.exit:hover { border-color: var(--accent); }
.exit .exit-label { font-weight: 600; font-size: 1.02rem; }
.exit .exit-kind { font-size: 0.7rem; color: var(--warm); text-transform: uppercase; letter-spacing: 0.05em; }
.exit.proposed { opacity: 0.55; cursor: default; border-style: dashed; }
.exit.proposed:hover { transform: none; border-color: var(--border); }
.exit.back .exit-kind { color: var(--accent); }
.exit .exit-sub { font-size: 0.76rem; color: var(--muted); }

/* ---------- Dock (character + chat) ---------- */
/* One continuous form from top to bottom: the dock is a single translucent panel, and the chat
   log has a subtly different background tone so it reads as a distinct area without looking
   blocky. Narrower (~80% of the old width). The toggle sits at the vertical midpoint of the
   left edge, like a tab. */
.dock {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  z-index: 7;
  width: 313px;
  max-width: 88vw;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  padding-bottom: 18px;
  background: var(--dock-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 1px solid var(--border);
  transition: transform 0.25s ease;
}

/* Minimize / reopen: a tab on the left edge at mid-height when the dock is open, and a wider
   pill pinned to the right edge of the viewport when the dock is minimized. In the open state it
   shows a right-pointing chevron (click to close). In the minimized state the chevron flips left
   and the chat bubble appears beside it (click to reopen).
   The toggle lives OUTSIDE the dock element but inside `#adventure` (which is `position: fixed;
   inset: 0`), so `position: fixed` keeps it at the viewport edge regardless of the dock's own
   transform or pointer-events state. */
.dock-toggle {
  position: fixed;
  left: auto;
  right: 313px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  border: 1px solid var(--border);
  background: var(--tile-bg-strong);
  color: var(--muted);
  border-radius: 8px 0 0 8px;
  width: 22px; height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0;
  pointer-events: auto;
  transition: all 0.25s ease;
}
.dock-toggle:hover { color: var(--text); border-color: var(--accent); }
.dock-chevron { transition: transform 0.2s ease; }
.dock-bubble { display: none; }
/* Minimized state: slide to the right edge of the viewport, widen to fit chevron + bubble
   side by side, and round the left corners so it hugs the screen edge. */
.dock-toggle.minimized {
  position: fixed;
  left: auto;
  right: 0;
  top: 50%;
  width: 48px;
  height: 64px;
  flex-direction: row;
  border-radius: 10px 0 0 10px;
  transform: translateY(-50%);
  padding: 0 10px 0 8px;
  z-index: 20;
  pointer-events: auto;
}
.dock-toggle.minimized .dock-chevron { transform: rotate(180deg); }
.dock-toggle.minimized .dock-bubble { display: block; }
.dock.minimized { transform: translateX(100%); pointer-events: none; }
/* The old separate chat-reopen button is unused. */
.chat-reopen { display: none !important; }

.character-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 2px 8px;
}
.character-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.portrait {
  width: 72px; height: 72px;
  border-radius: 12px;
  background: var(--input-bg) top center / cover no-repeat;
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.character-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.character-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.character-card strong { font-size: 1rem; font-weight: 600; }
.character-role { font-size: 0.8rem; color: var(--muted); font-weight: 400; }
.character-emotion { font-size: 0.8rem; color: var(--accent-2); white-space: nowrap; flex: 0 0 auto; font-weight: 400; }
.character-goal {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 400;
}
.character-goal .char-dream, .character-goal .char-want {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.character-goal .char-dream { color: var(--accent-2); }
.bond { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; width: 100%; }
.bond-label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; flex: 0 0 auto; font-weight: 400; }
.bond-track { flex: 1; height: 5px; min-width: 0; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; }
.bond-fill { display: block; height: 100%; border-radius: 99px; transition: width 0.4s ease; }

/* Journal overlay */
.journal {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: rgba(4, 6, 10, 0.66);
  display: grid;
  place-items: center;
  padding: 24px;
}
body.day .journal { background: rgba(40, 60, 100, 0.35); }
body.day .jr-person { border-bottom-color: rgba(40, 60, 100, 0.15); }
body.day .bond-track { background: rgba(40, 60, 100, 0.15); }
.journal.hidden { display: none; }
.journal-card {
  width: min(560px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.journal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.journal-head h3 { margin: 0; font-size: 1.1rem; }
.journal-body { overflow-y: auto; padding: 12px 18px 18px; }
.jr-sec { margin-top: 14px; }
.jr-sec > h4 { margin: 0 0 6px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-2); }
.jr-sec p { margin: 4px 0; font-size: 0.9rem; }
.jr-sec ul { margin: 4px 0; padding-left: 18px; font-size: 0.88rem; }
.jr-sec li { margin: 2px 0; }
.jr-dim { color: var(--muted); font-size: 0.82rem; }
.jr-done { color: var(--muted); text-decoration: line-through; }
.jr-mys { margin: 8px 0; }
.jr-person { margin: 8px 0; padding-bottom: 6px; border-bottom: 1px dashed rgba(255,255,255,0.06); }
.jr-goal { font-size: 0.82rem; color: var(--muted); font-style: italic; }
.jr-log { list-style: none; padding-left: 0; }
.jr-sug-list { list-style: none; padding-left: 0; }
.jr-sug { display: flex; gap: 8px; align-items: baseline; margin: 4px 0; font-size: 0.88rem; }
.jr-sug-k { font-size: 0.9rem; opacity: 0.7; }
.jr-sug-t { flex: 1; }
.jr-sug-accept, .jr-sug-dismiss {
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 6px;
  opacity: 0.5;
  transition: opacity 0.12s ease;
}
.jr-sug-accept:hover { opacity: 1; color: var(--accent); }
.jr-sug-dismiss:hover { opacity: 1; color: var(--muted); }
.jr-log li { display: flex; gap: 8px; align-items: baseline; margin: 3px 0; }
.jr-when { flex: 0 0 auto; font-size: 0.72rem; color: var(--accent-2); min-width: 110px; }
.jr-bio { margin-top: 4px; }
.jr-bio ul { margin: 2px 0; padding-left: 16px; font-size: 0.82rem; }

/* ---------- World clock ---------- */
.clock-btn { display: inline-flex; align-items: center; gap: 6px; }
.clock-btn .clock-ico { font-size: 0.95rem; line-height: 1; }
.clock-btn .clock-label { font-size: 0.78rem; white-space: nowrap; }
.clock-btn.rewound { color: var(--warm); border-color: var(--warm); }

.clock-panel {
  position: absolute;
  inset: 0;
  z-index: 61;
  background: rgba(4, 6, 10, 0.55);
  display: grid;
  place-items: start center;
  padding: 64px 16px 16px;
}
.clock-panel.hidden { display: none; }
.clock-card {
  width: min(340px, 100%);
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 14px 16px 16px;
}
.clock-head { display: flex; align-items: center; justify-content: space-between; }
.clock-head h3 { margin: 0; font-size: 1.05rem; }
.clock-readout { display: flex; align-items: center; gap: 14px; margin: 12px 2px 8px; }
.clock-phase-ico { line-height: 1; color: var(--accent); }
.clock-phase-ico .icon { display: block; }
.clock-readout-text { display: flex; flex-direction: column; }
.clock-weekday { font-size: 1.25rem; font-weight: 700; }
.clock-date { color: var(--muted); font-size: 0.9rem; }
.clock-phase { color: var(--accent); font-size: 0.9rem; text-transform: capitalize; }
.clock-weather { color: var(--muted); font-size: 0.85rem; margin: 0 2px 12px; text-transform: capitalize; }
.clock-controls {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.clock-step {
  width: 40px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text);
  font-size: 1rem; cursor: pointer;
}
.clock-step:hover { background: rgba(255,255,255,0.12); }
body.day .clock-step { background: rgba(20,30,60,0.06); }
.clock-frontier { font-size: 0.72rem; color: var(--warm); min-width: 64px; text-align: center; }
.clock-appointments { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.clock-appt-head { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-2); }
.clock-appt {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 10px;
  padding: 7px 10px; color: var(--text); cursor: pointer;
}
.clock-appt:hover { background: rgba(110,168,255,0.16); }
.clock-appt-when { font-size: 0.78rem; font-weight: 600; }
.clock-appt-note { font-size: 0.8rem; color: var(--muted); }

/* World map (scene-graph explorer) — fills the whole viewport */
.worldmap {
  position: fixed;
  inset: 0;
  z-index: 62;
  background: #070a10;
}
.worldmap.hidden { display: none; }
.worldmap-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background:
    radial-gradient(circle at 50% 40%, rgba(108, 140, 255, 0.07), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 44px);
  cursor: grab;
  touch-action: none;
}
.worldmap-svg:active { cursor: grabbing; }
.worldmap-title {
  position: absolute;
  top: 14px; left: 18px;
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: #e6edff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.worldmap-close {
  position: absolute;
  top: 12px; right: 14px;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: #e6edff;
  background: rgba(12, 16, 24, 0.72);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.worldmap-close:hover { border-color: var(--accent); }
.worldmap-info {
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  color: var(--muted);
  font-size: 0.8rem;
  background: rgba(10, 14, 21, 0.88);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 8px 7px 16px;
}
.worldmap-info.hidden { display: none; }
.worldmap-info-close {
  flex: none;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.worldmap-info-close:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
.worldmap-empty {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  max-width: 320px;
}
.worldmap-empty.hidden { display: none; }

/* edges */
.wm-edge { stroke: rgba(160, 180, 220, 0.35); stroke-width: 1.5; }
.wm-edge-label {
  fill: var(--muted);
  font-size: 9px;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #0a0e15;
  stroke-width: 3px;
  pointer-events: none;
}
/* nodes */
.wm-node { cursor: pointer; }
.wm-rect { fill: none; stroke: rgba(180, 200, 235, 0.5); stroke-width: 1.5; }
.wm-rect.placeholder { fill: #161d2a; stroke: rgba(180, 200, 235, 0.3); }
.wm-node:hover .wm-rect { stroke: var(--accent); }
.wm-node.current .wm-rect { stroke: var(--warm); stroke-width: 2.5; }
/* Free-floating places (mentioned, no path yet) — dashed outline signals "discoverable". */
.wm-node.floating .wm-rect { stroke-dasharray: 5 4; opacity: 0.8; }
.wm-node.floating .wm-label { opacity: 0.7; font-style: italic; }
.wm-label {
  fill: #d7def0;
  font-size: 11px;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #0a0e15;
  stroke-width: 3px;
}
.wm-node.current .wm-label { fill: var(--warm); }
.wm-here {
  fill: var(--warm);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-anchor: middle;
}
.wm-charbadge { fill: var(--accent); stroke: #0a0e15; stroke-width: 1.5; }
.jr-dream { color: var(--accent-2); }
.jr-secret { font-size: 0.82rem; color: var(--accent); }
.jr-add { display: flex; gap: 6px; margin-top: 8px; }
.jr-add input { flex: 1; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; color: var(--text); font: inherit; font-size: 0.85rem; }

/* Inline menu: pick an inventory item to use with an object */
.use-menu {
  flex: 1 1 100%;
  z-index: 50;
  margin-top: 4px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.use-menu-item {
  text-align: left;
  background: transparent;
  color: var(--text);
  border: 0;
  border-radius: 6px;
  padding: 7px 9px;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
}
.use-menu-item:hover { background: rgba(108, 140, 255, 0.18); }

/* Focus mode: a closer-in view of the scene (subject in the foreground). The scene image swaps to
   the focused render and a back button appears at the left edge; the chat stays usable. */
.focus-back {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  border: 1px solid var(--border);
  background: var(--tile-bg-strong);
  color: #fff;
  border-radius: 12px;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: border-color 0.12s ease;
}
.focus-back:hover { border-color: var(--accent); }
.focus-back-ico { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.focus-back.hidden { display: none; }
.focus-loading {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 10, 0.35);
}
.focus-loading.hidden { display: none; }

/* Scene "situation" banner — the player's current stance (sitting with someone, etc.) */
.scene-situation {
  position: absolute;
  left: 50%;
  top: 84px;
  transform: translateX(-50%);
  z-index: 8;
  max-width: min(70%, 640px);
  text-align: center;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-style: italic;
  color: #fff;
  background: var(--scene-loading-bg);
  border: 1px solid var(--border);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.scene-situation.hidden { display: none; }

/* Character action buttons (companion toggle + closer + give money). All the same size. */
.character-actions { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 2px; align-items: stretch; }
.character-actions-icons { display: flex; flex-shrink: 0; gap: 6px; align-items: center; }
.char-act {
  border: 1px solid var(--border);
  background: var(--tile-bg-soft);
  color: var(--text);
  border-radius: 999px;
  width: 36px; height: 36px;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  flex: 0 0 auto;
}
.char-act:hover { border-color: var(--accent); }
.char-act.on { background: rgba(245, 183, 107, 0.18); border-color: var(--warm); }
.char-act .icon { width: 15px; height: 15px; }

/* Non-interactive badge showing what the character is currently doing — German only,
   up to two lines, to the right of the icon buttons. */
.char-tag {
  display: flex;
  align-items: center;
  font-size: 0.76rem;
  line-height: 1.25;
  color: var(--muted);
  font-weight: 400;
  font-style: italic;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--chat-bg);
  min-height: 40px;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.char-tag-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}

/* Switcher for multiple people present in a scene */
.present-chars { display: flex; flex-wrap: wrap; gap: 6px; }
.present-chars:empty { display: none; }
.present-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--tile-bg-soft);
  color: var(--text);
  border-radius: 999px;
  padding: 3px 10px 3px 3px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
}
.present-chip:hover { border-color: var(--accent); }
.present-chip.active { border-color: var(--accent); background: rgba(108, 140, 255, 0.18); }
.present-av {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--input-bg) top center / cover no-repeat;
  flex: 0 0 auto;
}
.present-name { white-space: nowrap; }

.chat-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 10px;
  background: var(--chat-bg);
  border: 0;
  border-radius: 12px;
  min-height: 0;
  margin-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}
.chat-log::-webkit-scrollbar { width: 6px; }
.chat-log::-webkit-scrollbar-track { background: transparent; }
.chat-log::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.35); border-radius: 999px; }
.chat-empty { margin: auto; color: var(--muted); text-align: center; font-size: 0.88rem; font-weight: 400; }
.bubble {
  max-width: 90%;
  padding: 9px 12px;
  border-radius: 13px;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.bubble.user { align-self: flex-end; background: rgba(110, 168, 255, 0.18); border: 1px solid rgba(110,168,255,0.25); }
.bubble.assistant { align-self: flex-start; background: rgba(86, 214, 160, 0.12); border: 1px solid rgba(86,214,160,0.2); }
.bubble.assistant.speaking { box-shadow: 0 0 0 2px rgba(86,214,160,0.4); }
.bubble.narrator {
  align-self: center;
  max-width: 85%;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--muted);
  background: transparent;
  border: 0;
  text-align: center;
  opacity: 0.85;
}

/* Chat input: a pill wrapper where the textarea and send button are stacked on a grid so they
   share the same cell. The textarea single line is vertically centered via its own padding;
   the send button is positioned in the bottom-right corner of that cell so it stays anchored as
   the textarea grows. */
.chat-input-wrap {
  display: grid;
  grid-template-areas: "input";
  align-items: stretch;
  margin-top: auto;
  padding: 0;
  border-radius: var(--composer-radius);
  border: 1px solid var(--border);
  background: var(--input-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chat-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(110, 168, 255, 0.18);
}
.chat-input-wrap textarea {
  display: block;
  grid-area: input;
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  max-height: 200px;
  overflow-y: auto;
  resize: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  /* Equal top + bottom padding centers the single line within the wrap height. As the textarea
     grows, line-height (1.4) keeps the text comfortably centered inside each row. */
  padding: 10px 44px 10px 14px;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.4;
}
.chat-input-wrap textarea:focus { outline: none; }
/* Send button shares .send-btn with the start-screen composer (see above). */

.chat-options { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--muted); font-weight: 400; }
.chat-options label { display: inline-flex; gap: 6px; align-items: center; }

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  background: var(--tile-bg-strong);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 14px 22px;
  box-shadow: var(--shadow);
  max-width: min(70vw, 520px);
  text-align: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.toast strong { color: var(--accent-2); }

/* Interactable + inventory chips */
.interactable {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  background: var(--tile-bg);
  border-radius: 14px;
  padding: 6px 8px 6px 13px;
  color: var(--text);
  font: inherit;
  backdrop-filter: blur(4px);
}
.interactable { cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease; }
.interactable:hover { transform: translateY(-2px); border-color: var(--accent); }
.interactable.held { border-color: rgba(245, 183, 107, 0.5); }
.int-text { display: inline-flex; flex-direction: column; line-height: 1.2; }
.int-name { font-weight: 600; font-size: 1rem; }
.int-sub2 { color: var(--muted); }
.int-sub { font-size: 0.74rem; color: var(--muted); }
.int-actions { display: inline-flex; gap: 4px; }
.int-action {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  border-radius: 999px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
}
.int-action:hover { color: var(--text); border-color: var(--accent); }
.int-action.take { color: var(--warm); }
.int-action.buy { color: var(--accent); }
.int-action.give { color: var(--warm); }
.int-action.play { color: var(--accent-2); }

/* UI language toggle */
.start-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.start-top-actions { display: flex; align-items: center; gap: 8px; }
.lang-btn {
  border: 1px solid var(--border);
  background: var(--ghost-bg);
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lang-btn:hover { color: var(--text); border-color: var(--accent); }

/* Inline SVG icons (lucide-style stroke icons). */
.icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Object tiles (square image icons) for the objects row and the bag */
.obj-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
/* "+N" / "−" button revealing older objects */
.obj-more {
  width: 60px; height: 60px;
  flex: 0 0 auto;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--tile-bg);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
}
.obj-more:hover { color: var(--text); border-color: var(--accent); }

/* Bag: a single icon whose contents appear in a popover on hover / click */
.bag { position: relative; flex: 0 0 auto; }
.bag-btn {
  position: relative;
  width: 60px; height: 60px;
  border: 1px solid rgba(245, 183, 107, 0.5);
  border-radius: 12px;
  background: var(--tile-bg);
  color: var(--text);
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.bag-btn:hover { transform: translateY(-2px); border-color: var(--warm); }
.bag-ico { font-size: 1.5rem; line-height: 1; }
.bag-count {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--warm);
  color: #08111f;
  font-size: 0.72rem;
  font-weight: 700;
  display: grid; place-items: center;
}
.bag-pop {
  display: none;
  position: absolute;
  right: 0; bottom: calc(100% + 8px);
  max-width: 320px;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background: var(--tile-bg-strong);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 9;
}
.bag.open .bag-pop { display: flex; }

/* Purse: coin badge in the top icon bar, to the right of the map. */
.purse-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid rgba(245, 183, 107, 0.55);
  border-radius: 10px;
  background: var(--ghost-bg);
  color: var(--warm, #f5b76b);
  font-weight: 600;
  font-size: 0.78rem;
  flex: 0 0 auto;
  height: 34px;
  box-sizing: border-box;
  backdrop-filter: blur(6px);
  cursor: default;
}
.purse-badge.hidden { display: none; }
.purse-ico { font-size: 1.05rem; line-height: 1; }
.purse-amount { font-variant-numeric: tabular-nums; }
body.day .purse-badge { background: var(--tile-bg); }

.obj-tile {
  position: relative;
  width: 60px; height: 60px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--tile-bg) center / cover no-repeat;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.obj-tile:hover { transform: translateY(-2px); border-color: var(--accent); z-index: 7; }
.obj-tile.loading { display: grid; place-items: center; }
.inventory .obj-tile { border-color: rgba(245, 183, 107, 0.5); }
.obj-spin {
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.obj-hover {
  position: absolute;
  left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  color: #fff;
  background: var(--tile-bg-strong);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 9px;
  pointer-events: none;
}
.obj-tile:hover .obj-hover { display: flex; }
.obj-hover .oh-de { font-weight: 600; font-size: 0.9rem; color: #fff; }
.obj-hover .oh-en { font-size: 0.72rem; color: rgba(255, 255, 255, 0.72); }

/* Object detail popup */
.obj-popup {
  position: absolute; inset: 0;
  z-index: 30;
  display: grid; place-items: center;
  background: rgba(4, 6, 10, 0.6);
  backdrop-filter: blur(3px);
}
.obj-popup.hidden { display: none; }
.obj-card {
  position: relative;
  display: flex;
  gap: 26px;
  /* Width hugs the contents so the text column can be narrow while the image keeps its size. */
  width: auto;
  max-width: 96%;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px;
  box-shadow: var(--shadow);
}
.obj-close {
  position: absolute; top: 10px; right: 12px;
  border: 0; background: transparent; color: var(--muted);
  font-size: 1.1rem; cursor: pointer;
}
.obj-close:hover { color: var(--text); }
.obj-image {
  flex: 0 0 auto;
  width: min(620px, 40vw, 60vh);
  height: min(620px, 40vw, 60vh);
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--tile-bg) center / cover no-repeat;
}
.obj-image.loading { display: grid; place-items: center; }
.obj-image.loading::after {
  content: ""; width: 26px; height: 26px;
  border: 3px solid rgba(255, 255, 255, 0.18); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
/* Text column is intentionally narrow (~60% of the old width); the image stays full-size. */
.obj-body { flex: 0 1 auto; width: 200px; max-width: 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.obj-name { font-size: 1.6rem; line-height: 1.1; }
.obj-name-en { font-size: 0.92rem; color: var(--muted); }
.obj-desc-de { margin: 12px 0 0; color: var(--text); font-size: 1.05rem; line-height: 1.5; }
.obj-desc-de:empty { display: none; }
.obj-desc { margin: 8px 0 24px; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.obj-desc:empty { display: none; }
.obj-actions { display: flex; flex-wrap: wrap; gap: 8px; position: relative; margin-top: 8px; }
.obj-action {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  font: inherit; font-size: 0.88rem;
}
.obj-action:hover { border-color: var(--accent); }
.obj-action .oa-icon { font-size: 0.95rem; }
.obj-noact { color: var(--muted); font-size: 0.85rem; }
@media (max-width: 720px) {
  .obj-card { flex-direction: column; align-items: center; text-align: center; width: auto; }
  .obj-image { width: min(86vw, 86vw); height: min(86vw, 86vw); }
  .obj-body { width: 86vw; max-width: 86vw; }
  .obj-actions { justify-content: center; }
}

/* Click-to-look hint on the scene image */
.scene-image { cursor: crosshair; }

/* Debug overlay: the exact region sent to the vision model + the click point. */
.look-debug {
  position: absolute;
  display: none;
  border: 2px solid #ff3b6b;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28);
  border-radius: 4px;
  z-index: 8;
  pointer-events: none;
}
.look-debug-dot {
  position: absolute;
  display: none;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  background: #ff3b6b;
  border: 2px solid #fff;
  border-radius: 50%;
  z-index: 9;
  pointer-events: none;
}

/* Image-model badge (left of cost) */
.model-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--tile-bg-soft);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.82rem;
  color: var(--muted);
}
.model-badge:empty { display: none; }

/* Cost badge — small pill matching the bottom buttons' height. */
.cost-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--ghost-bg);
  border-radius: 10px;
  padding: 0 12px;
  height: 36px;
  box-sizing: border-box;
  font-size: 0.85rem;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  cursor: default;
  backdrop-filter: blur(6px);
}
/* Detailed breakdown on hover — appears above the badge */
.cost-pop {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: auto;
  top: auto;
  z-index: 20;
  min-width: 220px;
  max-width: min(280px, calc(100vw - 36px));
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--tile-bg-strong);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.82rem;
  text-align: left;
  cursor: default;
}
.cost-badge:hover .cost-pop { display: flex; }
.cost-pop-head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 2px;
}
.cost-row { display: flex; justify-content: space-between; gap: 18px; }
.cost-row-label { color: var(--muted); }
.cost-row-val { font-variant-numeric: tabular-nums; color: var(--text); }
.cost-total {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid var(--border);
}
.cost-total .cost-row-label, .cost-total .cost-row-val { color: var(--accent-2); font-weight: 600; }

/* Ambient + music */
.ambient-credit {
  position: absolute;
  left: 22px;
  bottom: 2px;
  z-index: 5;
  font-size: 0.7rem;
  color: rgba(159, 176, 199, 0.6);
  max-width: 50%;
  pointer-events: none;
}
.music-player {
  position: absolute;
  right: 329px;
  bottom: 18px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--tile-bg-strong);
  border: 1px solid var(--accent-2);
  border-radius: 10px;
  padding: 4px 10px;
  box-shadow: var(--shadow);
  max-width: 240px;
}
.music-icon { color: var(--accent-2); font-size: 0.85rem; }
.music-title { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-stop { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.9rem; }
.music-stop:hover { color: var(--text); }

/* When nobody is in the scene, the chat dock is hidden and the bars reclaim the space. */
.adventure.no-dock .music-player { right: 22px; }
.adventure.no-dock .ambient-credit { max-width: 70%; }

@media (max-width: 720px) {
  .lib-dock { width: 100%; max-width: 100%; }
  .lib-toggle:not(.minimized) { left: 100%; transform: translate(-100%, -50%); }
  .lib-toggle.minimized { width: 44px; height: 64px; }
  .dock { width: 100%; max-width: 100%; background: var(--overlay-soft); }
  .interact-dock { max-width: calc(100vw - 24px); }
  .exits-rail { max-width: 150px; }
  .music-player { right: 16px; }
  /* On mobile the dock is full-width, so the toggle only shows when minimized. */
  .dock-toggle:not(.minimized) { display: none; }
  .dock-toggle.minimized { display: flex; }
}