/* ── An old storybook, read by candlelight ─────────────────────────────
   Warm vellum-and-ink palette: deep, warm browns lit by candle-gold, with a
   herb-green for the softer accents and a rust for warnings. Nothing cold. */
:root {
  --bg: #14100b;                     /* warm near-black, like a dim room */
  --panel: rgba(31, 24, 16, 0.95);   /* oiled wood / worn leather */
  --panel-2: #241b10;                /* a raised card on that surface */
  --panel-edge: #4c3d28;             /* tarnished brass */
  --field: #191106;                  /* recessed ink-well for inputs */
  --ink: #f0e7d4;                    /* candlelit parchment */
  --ink-dim: #b4a284;                /* faded ink */
  --action: #dccaa4;                 /* *stage actions* — softer than speech, still clearly legible */
  --gold: #d8a441;
  --gold-soft: #f0d59a;
  --teal: #9dbd82;                   /* herb green — the cool accent, kept warm */
  --danger: #d9704f;                 /* warm rust */
  --hover: #33260f;                  /* candle-warm hover wash */
  --display: 'IM Fell English', Georgia, 'Times New Roman', serif;
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }

/* ── 9-slice game GUI (Kenney UI Pack — RPG Expansion, CC0) ─────────────────
   Artworked wooden frames via CSS border-image. The corners of each source PNG
   stay fixed while the edges tile (`round`) to any size, so one image frames a
   HUD pill or a full-screen panel and scales on desktop and mobile alike.
   Text-heavy panels keep a dark interior for legibility; the art supplies the
   ornate border. Buttons use the full button art with a pressed state. */
.ui-frame {
  /* the wooden window: ornate border, the element's own (dark) background shows
     through the middle so text stays crisp */
  border: var(--fw, 18px) solid transparent;
  border-image: url('/ui/kenney/panel_brown.png') 16 / var(--fw, 18px) / 0 round;
  border-radius: 12px;                 /* rounds the interior fill under the frame */
  background-clip: padding-box;
}
.ui-inset {
  /* a recessed sub-panel (message lists, wells) — its texture IS the fill */
  border: var(--iw, 16px) solid transparent;
  border-image: url('/ui/kenney/panelInset_brown.png') 18 fill / var(--iw, 16px) / 0 round;
}
/* Buttons carved from wood: the art is the whole button, and it sinks on press. */
.ui-btn {
  border: 12px solid transparent; border-image: url('/ui/kenney/buttonLong_brown.png') 14 fill / 12px 16px / 0 round;
  background: none; color: var(--ink); font-family: var(--display); letter-spacing: 0.3px;
  cursor: pointer; padding: 2px 6px; min-height: 46px; text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.ui-btn:hover { filter: brightness(1.08); }
.ui-btn:active { border-image-source: url('/ui/kenney/buttonLong_brown_pressed.png'); transform: translateY(1px); }
.ui-btn:disabled { filter: grayscale(0.4) brightness(0.85); cursor: default; text-shadow: none; }
/* A lighter "primary" variant for the main action on a screen. */
.ui-btn.primary { border-image-source: url('/ui/kenney/buttonLong_beige.png'); color: #3a2a12; text-shadow: 0 1px 0 rgba(255,244,214,0.4); }
.ui-btn.primary:active { border-image-source: url('/ui/kenney/buttonLong_beige_pressed.png'); }
/* Reading text is a warm book serif, not a system sans — this alone lifts the
   whole game out of "dashboard" and into "story". */
body { font-family: var(--serif); color: var(--ink); font-size: 16px; }
.hidden { display: none !important; }
kbd {
  background: #2b2114; border: 1px solid #4c3d28; border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 6px; font-family: var(--sans); font-size: 0.82em;
  color: var(--gold-soft);
}

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ── HUD ── */
#hud {
  position: fixed; top: 14px; left: 14px; display: flex; gap: 8px; z-index: 10;
  pointer-events: none;
}
.hud-pill {
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; letter-spacing: 0.4px;
}
#hud-map { font-family: var(--serif); color: var(--gold-soft); }
.hud-player { color: var(--ink-dim); }
/* The HUD is pointer-events: none so it never eats clicks meant for the
   world; every button in it has to opt back in. */
#journal-btn, #inventory-btn, #talents-btn, #gallery-btn {
  pointer-events: auto; cursor: pointer; color: var(--gold-soft);
  font-family: var(--sans);
}
#journal-btn:hover, #inventory-btn:hover, #talents-btn:hover, #gallery-btn:hover { border-color: var(--gold); }
#hud-gold { color: var(--gold-soft); }
#hud-clock { color: var(--ink-dim); font-variant-numeric: tabular-nums; }

#mock-badge {
  position: fixed; bottom: 12px; left: 14px; z-index: 10; font-size: 12px;
  color: #ffcf6e; background: rgba(60, 44, 12, 0.85); border: 1px solid #8a6a2a;
  border-radius: 6px; padding: 4px 10px;
}

/* ── interaction prompt ── */
#prompt {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 10;
  background: var(--panel); border: 1px solid var(--gold); border-radius: 10px;
  padding: 10px 18px; font-size: 15px; box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  animation: rise 0.18s ease-out;
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ── toasts ── */
#toasts {
  position: fixed; top: 14px; right: 14px; z-index: 40; display: flex;
  flex-direction: column; gap: 8px; max-width: 360px;
}
.toast {
  background: var(--panel); border: 1px solid var(--panel-edge); border-left: 3px solid var(--teal);
  border-radius: 8px; padding: 10px 14px; font-size: 14px; line-height: 1.45;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5); animation: rise2 0.25s ease-out;
}
.toast.story { border-left-color: var(--gold); color: var(--gold-soft); font-family: var(--serif); }
.toast.error { border-left-color: var(--danger); }
.toast.fade { opacity: 0; transition: opacity 0.6s; }
@keyframes rise2 { from { opacity: 0; transform: translateY(-8px); } }

/* ── dialogue panel ── */
#dialogue {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: min(1000px, calc(100vw - 40px)); height: min(86vh, 1000px);
  display: flex; flex-direction: column; z-index: 30;
  background-color: var(--panel);
  background-image: url('/ui/tex-parchment.svg');
  background-repeat: repeat; background-size: 240px;
  border: 18px solid transparent;
  border-image: url('/ui/kenney/panel_brown.png') 16 / 18px / 0 round;
  border-radius: 14px; background-clip: padding-box;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.65);
  animation: rise 0.2s ease-out;
}
#dlg-header {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--panel-edge);
}
#dlg-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 22px; color: #fff;
  background: #6b5334; border: 2px solid rgba(240, 213, 154, 0.3);
  background-size: cover; background-position: center; text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
#dlg-who { flex: 1; min-width: 0; }
#dlg-name { font-family: var(--serif); font-size: 18px; color: var(--gold-soft); }
#dlg-title { font-size: 12px; color: var(--ink-dim); }
#dlg-end {
  border: 11px solid transparent;
  border-image: url('/ui/kenney/buttonLong_brown.png') 16 fill / 11px 15px / 0 round;
  background: none; color: var(--gold-soft); font-family: var(--display); font-size: 13px;
  cursor: pointer; min-height: 40px; padding: 0 6px; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
#dlg-end:hover { filter: brightness(1.1); }
#dlg-end:active { border-image-source: url('/ui/kenney/buttonLong_brown_pressed.png'); transform: translateY(1px); }
#dlg-end:disabled { filter: grayscale(0.4) brightness(0.85); cursor: default; }

#dlg-messages { flex: 1; overflow-y: auto; padding: 14px 16px; scroll-behavior: smooth; }
/* EB Garamond's 400 weight reads thin on a dark panel; 500 with a little more
   leading keeps the book feel but restores legibility. */
.msg { max-width: 82%; margin-bottom: 10px; padding: 9px 14px; border-radius: 12px;
  font-size: 16.5px; line-height: 1.62; font-weight: 500; letter-spacing: 0.1px;
  white-space: pre-wrap; overflow-wrap: break-word; position: relative; }
/* every spoken message can be envisioned as of that moment — hover 🖼 */
.msg-envision {
  position: absolute; top: -9px; right: 8px;
  background: var(--panel); border: 1px solid var(--panel-edge); color: var(--gold-soft);
  border-radius: 999px; width: 26px; height: 22px; font-size: 12px; line-height: 1;
  cursor: pointer; padding: 0; opacity: 0; pointer-events: none; transition: opacity 0.12s;
}
.msg:hover .msg-envision { opacity: 1; pointer-events: auto; }
.msg-envision:hover { border-color: var(--gold); background: var(--hover); }
.msg em { color: var(--action); font-style: italic; font-weight: 500; }
.msg.npc {
  background: #2b2114; border: 1px solid #4a3b26; border-bottom-left-radius: 4px;
  margin-right: auto;
}
.msg.player {
  background: #24301c; border: 1px solid #405230; border-bottom-right-radius: 4px;
  margin-left: auto; text-align: left;
}
.msg.system { background: none; border: none; color: var(--ink-dim); font-size: 12.5px;
  font-style: italic; text-align: center; max-width: 100%; }
.msg.typing { color: var(--ink-dim); }
/* a reply still arriving: a soft cursor at the end of what has landed */
.msg.npc.streaming::after {
  content: '▌'; color: var(--gold-soft); opacity: 0.75;
  animation: caret 1.05s step-end infinite; margin-left: 1px;
}
@keyframes caret { 50% { opacity: 0; } }
.msg.npc.streaming .dots::after, .msg.typing .dots::after {
  content: '·'; animation: dots 1.2s steps(3, end) infinite; letter-spacing: 3px;
}
@keyframes dots { 33% { content: '··'; } 66% { content: '···'; } }

/* the "meet" card — a glimpse of a character shown before any AI call, so the
   player can decide whether to engage (or remember who they are) */
.dlg-preview { max-width: 100%; margin: 6px 2px; animation: rise 0.2s ease-out; }
.prev-tagline {
  margin: 0 0 12px; font-family: var(--serif, inherit);
  font-size: 17px; line-height: 1.6; font-weight: 500; font-style: italic;
  color: var(--ink);
}
.prev-memory {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-dim);
  padding-top: 10px; border-top: 1px solid var(--panel-edge);
}
/* Speak / Leave sit in the options tray */
.prev-actions { display: flex; gap: 8px; width: 100%; }
.prev-speak, .prev-leave {
  cursor: pointer; border: 11px solid transparent; background: none;
  color: var(--ink); font-size: 15.5px; font-weight: 500; font-family: inherit;
  min-height: 46px; padding: 3px 10px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  border-image: url('/ui/kenney/buttonLong_dark_brown.png') 16 fill / 11px 15px / 0 round;
}
.prev-speak { flex: 2; color: var(--gold-soft); }
.prev-leave { flex: 1; }
.prev-speak:hover, .prev-leave:hover { filter: brightness(1.09); }
.prev-speak:active, .prev-leave:active {
  border-image-source: url('/ui/kenney/buttonLong_brown_pressed.png'); transform: translateY(1px);
}
.prev-speak:disabled { filter: grayscale(0.4) brightness(0.85); cursor: default; }

/* the player's choices — how they speak */
#dlg-options {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 16px 4px; border-top: 1px solid var(--panel-edge);
  max-height: 42%; overflow-y: auto;
}
#dlg-options.waiting { opacity: 0.4; pointer-events: none; }
.dlg-option {
  position: relative; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  border: 11px solid transparent;
  border-image: url('/ui/kenney/buttonLong_dark_brown.png') 16 fill / 11px 15px / 0 round;
  background: none; color: var(--ink);
  padding: 3px 8px; min-height: 44px; font-size: 15.5px; line-height: 1.4; font-weight: 500; font-family: inherit;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  animation: rise 0.2s ease-out;
}
.dlg-option:hover { filter: brightness(1.09); }
.dlg-option:active { border-image-source: url('/ui/kenney/buttonLong_brown_pressed.png'); transform: translateY(1px); }
.dlg-option:disabled { filter: grayscale(0.4) brightness(0.85); cursor: default; }
.dlg-option em { color: var(--action); font-style: italic; font-weight: 500; }
.opt-key {
  flex: none; width: 15px; text-align: center; font-size: 10.5px;
  color: var(--ink-dim); border: 1px solid var(--panel-edge); border-radius: 4px;
  padding: 1px 0; line-height: 1.3;
}
.dlg-option:hover .opt-key { color: var(--gold-soft); border-color: var(--gold); }
.opt-text { flex: 1; }
.opt-icon { flex: none; }
.opt-empty { color: var(--ink-dim); font-size: 13px; font-style: italic; text-align: center; padding: 8px; }

/* "do or say something else" menu rows — visually distinct from spoken lines */
.dlg-option.dlg-more {
  border-left-color: var(--teal); color: var(--ink-dim); font-style: italic;
}
.dlg-option.dlg-more:hover { color: var(--gold-soft); }
.dlg-option.dlg-back {
  border-left-color: var(--panel-edge); color: var(--ink-dim);
  background: transparent;
}
.dlg-option.dlg-cat { border-left-color: var(--teal); }
.dlg-option.dlg-cat .opt-text, .dlg-option.dlg-directive .opt-text { font-style: normal; }
.dlg-option.dlg-directive { border-left-color: #6a5636; }

#dlg-tools { display: flex; gap: 8px; padding: 6px 16px 12px; align-items: stretch; }
#dlg-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--panel-edge); }
/* The envision button carries a whole feature, so it reads as the primary
   action — labelled and given the width — but stays within the panel's palette:
   a soft gold-tinted outline rather than a solid block that fights the UI. */
#dlg-envision {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 16px; cursor: pointer; font-family: var(--display);
  font-size: 15px; letter-spacing: 0.3px; color: var(--gold-soft);
  border: 13px solid transparent;
  border-image: url('/ui/kenney/buttonLong_brown.png') 16 fill / 13px 18px / 0 round;
  background: none; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
#dlg-envision .ev-icon { font-size: 18px; }
#dlg-envision:hover { filter: brightness(1.1); }
#dlg-envision:active { border-image-source: url('/ui/kenney/buttonLong_brown_pressed.png'); transform: translateY(1px); }
#dlg-provider {
  background: none; border: 1px solid var(--panel-edge); color: var(--ink-dim);
  border-radius: 999px; min-height: 40px; padding: 0 14px; font-size: 11.5px;
  cursor: pointer; flex: none; font-family: inherit; letter-spacing: 0.3px;
}
#dlg-provider:hover { border-color: var(--gold); color: var(--gold-soft); }
#dlg-envision:disabled { filter: grayscale(0.4) brightness(0.85); cursor: default; }
#dlg-envision.waiting { animation: quill 1.1s ease-in-out infinite; }
@keyframes quill { 50% { opacity: 0.55; } }

/* Scene-generation tracker — a strip below the header that holds a slow image
   in view while the conversation carries on, then becomes the finished thumb. */
#dlg-genbar {
  display: flex; align-items: center; gap: 12px; width: auto;
  margin: 0 16px; padding: 8px 10px; text-align: left; cursor: default;
  background: rgba(212, 169, 79, 0.06); border: 1px solid var(--panel-edge);
  border-left: 3px solid var(--gold); border-radius: 10px;
  font-family: inherit; color: var(--ink); animation: rise 0.2s ease-out;
}
#dlg-genbar.done { cursor: zoom-in; }
#dlg-genbar.done:hover { border-color: var(--gold); background: rgba(212, 169, 79, 0.1); }
#dlg-genbar.error { border-left-color: #b45a52; background: rgba(180, 90, 82, 0.08); }
#dlg-genbar.error #dlg-genbar-label { color: #e2a19a; }
#dlg-genbar.error #dlg-genbar-thumb { color: #e2a19a; font-size: 18px; }
#dlg-genbar-thumb {
  flex: none; width: 40px; height: 40px; border-radius: 7px;
  background: var(--field) center/cover no-repeat; border: 1px solid var(--panel-edge);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#dlg-genbar-thumb .spin {
  width: 18px; height: 18px; border: 2px solid var(--panel-edge);
  border-top-color: var(--gold); border-radius: 50%; animation: spin 0.9s linear infinite;
}
#dlg-genbar-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#dlg-genbar-label {
  font-family: var(--serif); font-size: 13.5px; color: var(--gold-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#dlg-genbar-sub { font-size: 11.5px; color: var(--ink-dim); }
#dlg-genbar-close {
  flex: none; width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim); font-size: 13px; border: 1px solid transparent;
}
#dlg-genbar-close:hover { border-color: var(--panel-edge); color: var(--gold-soft); }

/* Phone-sized screens: the panel is near full-bleed, so trim the chrome and
   keep the envision button and tracker as comfortable tap targets. */
@media (max-width: 640px) {
  #dialogue { width: calc(100vw - 16px); height: min(90vh, 1000px); bottom: 8px; }
  #dlg-messages { padding: 12px 12px; }
  #dlg-genbar { margin: 0 10px; gap: 10px; padding: 7px 9px; }
  #dlg-genbar-thumb { width: 34px; height: 34px; }
  #dlg-tools { padding: 6px 10px 10px; }
  #dlg-form { padding: 10px; }
  /* touch has no hover, so surface each message's envision affordance faintly */
  .msg-envision { opacity: 0.55; pointer-events: auto; }
}

/* scene images inline in the transcript */
.msg.scene { max-width: 100%; padding: 0; background: none; border: none; margin: 12px auto; text-align: center; }
.msg.scene img {
  max-width: 100%; border-radius: 12px; border: 1px solid var(--panel-edge);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5); cursor: zoom-in; display: block; margin: 0 auto;
}
.msg.scene .scene-cap { font-size: 11px; color: var(--ink-dim); margin-top: 5px; font-style: italic; }
.msg.scene .scene-controls { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.msg.scene .scene-retry, .msg.scene .scene-remove {
  background: none; border: 1px solid var(--panel-edge); color: var(--ink-dim);
  border-radius: 999px; padding: 3px 12px; font-size: 12px; cursor: pointer; font-family: var(--sans);
}
.msg.scene .scene-retry:hover { border-color: var(--gold); color: var(--gold-soft); }
.msg.scene .scene-remove:hover { border-color: var(--danger); color: var(--danger); }
.msg.scene .scene-retry:disabled, .msg.scene .scene-remove:disabled { opacity: 0.5; cursor: default; }
.msg.scene.pending { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--gold-soft);
  font-family: var(--serif); min-height: 90px; border: 1px dashed var(--panel-edge); border-radius: 12px; }
.msg.scene.pending .spin { width: 18px; height: 18px; border: 2px solid var(--panel-edge); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* lightbox */
/* At sea, hide land-only HUD chrome — supplies/gold/compass are on the canvas. */
body.ocean-mode #hud-player,
body.ocean-mode #hud-gold,
body.ocean-mode #journal-btn,
body.ocean-mode #inventory-btn,
body.ocean-mode #talents-btn { display: none; }

/* Ocean rumour log (press R at sea) — a weathered chart on the captain's table. */
.rumour-log { position: fixed; top: 90px; left: 20px; z-index: 40; width: min(360px, 90vw);
  max-height: 70vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: 10px; padding: 14px 16px; color: var(--ink); box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.rumour-log h3 { margin: 0 0 10px; font-family: var(--display); color: var(--gold-soft); }
.rumour-log .muted { color: var(--ink-dim); font-size: 14px; }
.rl-item { border-top: 1px solid rgba(240,231,212,0.09); padding: 10px 0; }
.rl-item.pinned { background: rgba(157,189,130,0.12); border-radius: 6px; padding: 10px 8px; }
.rl-text { font-family: var(--serif); font-size: 15px; line-height: 1.45; }
.rl-meta { font-size: 12px; color: var(--ink-dim); margin: 4px 0 8px; }
.rl-pin { background: var(--panel-2); color: var(--gold-soft); border: 1px solid var(--panel-edge); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 13px; }
.rl-item.pinned .rl-pin { background: #29311c; color: #d8ecc4; border-color: #5f7a45; }
.rl-close { margin-top: 12px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--panel-edge); border-radius: 6px; padding: 6px 14px; cursor: pointer; }

/* Ocean shipyard (press U at sea). */
.shipyard { position: fixed; top: 90px; right: 20px; z-index: 40; width: min(340px, 90vw);
  max-height: 74vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: 10px; padding: 14px 16px; color: var(--ink); box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.shipyard h3 { margin: 0 0 10px; font-family: var(--display); color: var(--gold-soft); display: flex; justify-content: space-between; align-items: baseline; }
.sy-gold { color: var(--gold-soft); font-size: 14px; font-family: var(--sans); }
.sy-row { border-top: 1px solid rgba(240,231,212,0.09); padding: 9px 0; }
.sy-head { display: flex; justify-content: space-between; align-items: baseline; }
.sy-name { font-weight: 600; }
.sy-pips { color: #9dbd82; letter-spacing: 2px; font-size: 12px; }
.sy-blurb { font-size: 12.5px; color: var(--ink-dim); margin: 3px 0 8px; line-height: 1.4; }
.sy-buy { background: linear-gradient(180deg, #e0b45e, #b98730); color: #2a1e0a; border: 1px solid #6d4f1e; border-radius: 6px; padding: 5px 13px; cursor: pointer; font-size: 13px; box-shadow: inset 0 1px 0 rgba(255,244,214,0.4); }
.sy-buy:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.sy-close { margin-top: 12px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--panel-edge); border-radius: 6px; padding: 6px 14px; cursor: pointer; }

/* Limp-home blackout: fade to black while several days pass at sea. */
.ocean-fade { position: fixed; inset: 0; z-index: 58; background: #05060a; opacity: 0; pointer-events: none; transition: opacity 0.9s ease; }
.ocean-fade.on { opacity: 1; }

#lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(4,3,10,0.88); display: flex; align-items: center; justify-content: center; cursor: zoom-out; animation: fadein 0.15s; }
.lb-stage { display: flex; align-items: center; gap: 14px; max-width: 96vw; }
.lb-figure { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; cursor: default; min-width: 0; }
.lb-figure img { max-width: min(88vw, 1100px); max-height: 86vh; border-radius: 8px; box-shadow: 0 12px 60px rgba(0,0,0,0.7); }
.lb-caption { margin-top: 12px; max-width: min(88vw, 760px); padding: 9px 14px; background: rgba(18,16,31,0.9);
  border: 1px solid var(--panel-edge); border-radius: 8px; color: var(--ink);
  font-size: 14px; line-height: 1.45; text-align: center; cursor: default; }
.lb-count { position: absolute; top: 10px; right: 12px; padding: 3px 9px; border-radius: 20px;
  background: rgba(10,7,3,0.7); color: var(--ink); font-size: 12px; letter-spacing: 0.5px; pointer-events: none; }
.lb-remove { position: absolute; top: 10px; left: 12px; padding: 4px 11px; border-radius: 20px;
  background: rgba(10,7,3,0.7); color: var(--ink-dim); border: 1px solid var(--panel-edge);
  font-size: 12px; cursor: pointer; font-family: var(--sans); z-index: 2; }
.lb-remove:hover { border-color: var(--danger); color: var(--danger); }
.lb-remove:disabled { opacity: 0.5; cursor: default; }
.lb-nav { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: rgba(18,16,31,0.85); color: var(--ink); border: 1px solid var(--panel-edge);
  font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: filter 0.12s, transform 0.12s; }
.lb-nav:hover { filter: brightness(1.4); transform: scale(1.08); }
.lb-nav.hidden, .lb-caption.hidden, .lb-count.hidden { display: none; }
@keyframes fadein { from { opacity: 0; } }
#dlg-input {
  flex: 1; background: var(--field); color: var(--ink); border: 1px solid var(--panel-edge);
  border-radius: 8px; padding: 10px 12px; font-size: 14.5px; outline: none;
}
#dlg-input:focus { border-color: var(--teal); }
#dlg-input:disabled { opacity: 0.55; }
/* Primary action — a light wooden button (Kenney), lettered in dark ink. */
button[type="submit"], #dlg-send {
  border: 13px solid transparent;
  border-image: url('/ui/kenney/buttonLong_beige.png') 16 fill / 13px 18px / 0 round;
  background: none; color: #3a2a12; font-family: var(--display); font-size: 15px; letter-spacing: 0.4px;
  cursor: pointer; min-height: 48px; padding: 0 10px; text-shadow: 0 1px 0 rgba(255, 244, 214, 0.45);
}
button[type="submit"]:hover, #dlg-send:hover { filter: brightness(1.06); }
button[type="submit"]:active, #dlg-send:active {
  border-image-source: url('/ui/kenney/buttonLong_beige_pressed.png'); transform: translateY(1px);
}
button[type="submit"]:disabled, #dlg-send:disabled { filter: grayscale(0.4) brightness(0.88); cursor: default; text-shadow: none; }

/* ── journal ── */
#journal {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100vw); z-index: 35;
  display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--panel-edge);
  box-shadow: -14px 0 48px rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px);
  animation: slide-in 0.22s ease-out;
}
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } }
#jr-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px;
  border-bottom: 1px solid var(--panel-edge);
}
#jr-title { font-family: var(--serif); font-size: 17px; color: var(--gold-soft); white-space: nowrap; }
#jr-search {
  flex: 1; min-width: 0; background: var(--field); color: var(--ink);
  border: 1px solid var(--panel-edge); border-radius: 8px; padding: 8px 11px;
  font-size: 13.5px; outline: none;
}
#jr-search:focus { border-color: var(--teal); }
#jr-close {
  background: none; border: 1px solid var(--panel-edge); color: var(--ink-dim);
  border-radius: 8px; width: 32px; height: 32px; cursor: pointer; flex: none;
}
#jr-close:hover { border-color: var(--gold); color: var(--gold-soft); }
#jr-body { flex: 1; overflow-y: auto; padding: 12px; }

.jr-day {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-dim); margin: 14px 4px 6px;
}
.jr-card {
  width: 100%; text-align: left; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--panel-edge); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font: inherit;
  display: block;
}
.jr-card:hover { border-color: var(--teal); }
.jr-card .jc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.jr-card .jc-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.jr-card .jc-name { font-family: var(--serif); color: var(--gold-soft); font-size: 14.5px; flex: 1; }
.jr-card .jc-time { font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
.jr-card .jc-preview {
  font-size: 12.5px; color: var(--ink-dim); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jr-card .jc-meta { font-size: 11px; color: var(--ink-dim); margin-top: 5px; }
.jr-card .jc-meta .mem { color: var(--gold-soft); }
.jr-empty { color: var(--ink-dim); text-align: center; padding: 40px 20px; font-size: 13.5px; line-height: 1.7; }
mark { background: rgba(212, 169, 79, 0.35); color: #ffe9b3; border-radius: 3px; padding: 0 1px; }

#jr-back {
  background: none; border: none; color: var(--teal); cursor: pointer;
  font: inherit; font-size: 13px; padding: 2px 4px; margin-bottom: 10px;
}
#jr-back:hover { text-decoration: underline; }
#jr-detail-head { margin-bottom: 12px; }
#jr-detail-head .jd-name { font-family: var(--serif); font-size: 18px; color: var(--gold-soft); }
#jr-detail-head .jd-sub { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.jmsg {
  max-width: 92%; margin-bottom: 8px; padding: 7px 11px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.55; font-weight: 500; white-space: pre-wrap; overflow-wrap: break-word;
}
.jmsg.npc { background: #2b2114; border: 1px solid #4a3b26; border-bottom-left-radius: 4px; margin-right: auto; }
.jmsg.player { background: #24301c; border: 1px solid #405230; border-bottom-right-radius: 4px; margin-left: auto; }
.jmsg em { color: var(--action); font-style: italic; font-weight: 500; }
.jmsg .jflag {
  display: block; font-size: 10px; color: #ffcf6e; margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.jr-summary {
  margin-top: 16px; border: 1px solid #6b5620; border-radius: 10px;
  background: linear-gradient(180deg, rgba(212, 169, 79, 0.10), rgba(212, 169, 79, 0.04));
  padding: 12px 14px;
}
.jr-summary .js-head {
  font-family: var(--serif); color: var(--gold-soft); font-size: 13.5px; margin-bottom: 6px;
}
.jr-summary .js-text { font-size: 13px; line-height: 1.6; color: var(--ink); }
.jr-summary.none { border-style: dashed; opacity: 0.7; }
.jr-summary .js-notes { margin: 6px 0 0; padding-left: 18px; }
.jr-summary .js-notes li { font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); margin-bottom: 2px; }

/* ── inventory ── */
#inventory {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(350px, 100vw); z-index: 35;
  display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--panel-edge);
  box-shadow: -14px 0 48px rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px);
  animation: slide-in 0.22s ease-out;
}
#inv-head {
  display: flex; align-items: center; gap: 10px; padding: 14px;
  border-bottom: 1px solid var(--panel-edge);
}
#inv-title { font-family: var(--serif); font-size: 17px; color: var(--gold-soft); flex: 1; }
#inv-gold { color: var(--gold-soft); font-size: 14px; white-space: nowrap; }
#inv-close {
  background: none; border: 1px solid var(--panel-edge); color: var(--ink-dim);
  border-radius: 8px; width: 32px; height: 32px; cursor: pointer; flex: none;
}
#inv-close:hover { border-color: var(--gold); color: var(--gold-soft); }
#inv-body { flex: 1; overflow-y: auto; padding: 12px; }
.inv-item {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--panel-2); border: 1px solid var(--panel-edge); border-radius: 10px;
  padding: 11px 12px; margin-bottom: 8px;
}
.inv-item .ii-icon {
  font-size: 26px; line-height: 1; flex: none; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--field); border: 1px solid var(--panel-edge); border-radius: 8px;
}
.inv-item .ii-name { font-family: var(--serif); color: var(--gold-soft); font-size: 14.5px; }
.inv-item .ii-qty { color: var(--ink-dim); font-size: 12px; margin-left: 6px; }
.inv-item .ii-desc { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; margin-top: 3px; }
.inv-empty { color: var(--ink-dim); text-align: center; padding: 40px 20px; font-size: 13.5px; line-height: 1.7; }

/* ── title screen ── */
/* ── talents ── */
/* The tree needs room to read as a tree, so this one is a full-screen
   overlay rather than a side drawer like the journal and pack. */
#talents {
  position: fixed; inset: 0; z-index: 35;
  display: flex; flex-direction: column;
  width: min(1800px, 100vw); margin: 0 auto;
  background: var(--panel); border-left: 1px solid var(--panel-edge);
  border-right: 1px solid var(--panel-edge);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px);
  animation: rise 0.2s ease-out;
}
#tal-head {
  display: flex; align-items: center; gap: 10px; padding: 14px;
  border-bottom: 1px solid var(--panel-edge);
}
#tal-title { font-family: var(--serif); font-size: 17px; color: var(--gold-soft); flex: 1; }
#tal-points { color: var(--gold-soft); font-size: 14px; white-space: nowrap; }
#tal-points.none-left { color: var(--ink-dim); }
#tal-close {
  background: none; border: 1px solid var(--panel-edge); color: var(--ink-dim);
  border-radius: 8px; width: 32px; height: 32px; cursor: pointer; flex: none;
}
#tal-close:hover { border-color: var(--gold); color: var(--gold-soft); }
#tal-blurb { color: var(--ink-dim); font-size: 12.5px; line-height: 1.5; margin: 12px 14px 0; }
/* the written portrait of the current build */
#tal-nature {
  margin: 12px 14px 0; padding: 11px 13px;
  background: var(--panel-2); border: 1px solid var(--panel-edge);
  border-left: 3px solid var(--gold); border-radius: 10px;
}
#tal-nature-summary {
  font-family: var(--serif); font-size: 14.5px; color: var(--gold-soft); line-height: 1.5;
}
#tal-nature-instruction {
  margin: 7px 0 0; font-size: 13px; color: var(--ink); line-height: 1.6;
}
#tal-nature-offer {
  margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--teal);
  font-size: 12.5px; color: var(--teal); line-height: 1.55;
}
#tal-nature-note {
  margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--panel-edge);
  font-size: 11px; color: var(--ink-dim); line-height: 1.5; font-style: italic;
}
/* the tree's own .tt-scroll does the scrolling, so the detail panel can stay put */
#tal-body { flex: 1; min-height: 0; overflow: hidden; padding: 12px 14px; }
#tal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 14px; border-top: 1px solid var(--panel-edge);
}
#tal-reset, #cr-back {
  background: none; border: 1px solid var(--panel-edge); color: var(--ink-dim);
  border-radius: 8px; padding: 9px 16px; font-size: 13.5px; cursor: pointer; font-family: inherit;
}
#tal-reset:hover, #cr-back:hover { border-color: var(--gold); color: var(--gold-soft); }
#tal-reset:disabled { opacity: 0.4; cursor: default; }
#tal-save, #cr-begin {
  background: linear-gradient(180deg, #e0b45e, #b98730); color: #2a1e0a;
  border: 1px solid #6d4f1e; border-radius: 8px; padding: 9px 20px;
  font-family: var(--display); font-size: 14.5px; letter-spacing: 0.4px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
}
#tal-save:hover, #cr-begin:hover { filter: brightness(1.06); }
#tal-save:disabled, #cr-begin:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

/* the tree itself — branch columns of tiers, joined by short connectors */
.tt-tree { text-align: left; --tt-line: #5a4a30; --tt-gap: 20px; --tt-hgap: 10px; }
/* tree on the left, one description panel on the right */
/* flex:1 matters when the host is itself a flex row (#cr-tree); without it the
   layout shrink-wraps its content and the tree gets a fraction of the width */
.tt-layout {
  display: flex; gap: 18px; align-items: stretch;
  flex: 1; min-width: 0; min-height: 0; height: 100%;
}
.tt-scroll { flex: 1; min-width: 0; overflow-y: auto; padding-right: 4px; }
.tt-detail {
  flex: none; width: 300px; align-self: flex-start; position: sticky; top: 0;
  background: var(--panel-2); border: 1px solid var(--panel-edge);
  border-left: 3px solid var(--gold); border-radius: 12px; padding: 14px 16px;
}
.tt-detail-hint { color: var(--ink-dim); font-size: 13px; font-style: italic; line-height: 1.5; }
.tt-detail-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tt-detail-name { font-family: var(--serif); font-size: 19px; color: var(--gold-soft); flex: 1; }
.tt-detail-state { font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; }
.tt-detail-state.taken { color: #b6d29a; }
.tt-detail-state.open { color: var(--gold); }
.tt-detail-state.shut { color: var(--ink-dim); }
.tt-detail-desc { margin: 10px 0 0; font-size: 14px; color: var(--ink); line-height: 1.65; }
.tt-detail-from {
  margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--panel-edge);
  font-size: 12px; color: var(--teal); line-height: 1.45;
}
.tt-detail-act { margin-top: 6px; font-size: 11.5px; color: var(--ink-dim); font-style: italic; }

.tt-cols {
  /* Columns are sized in proportion to each branch's widest tier (set when the
     tree renders), so a branch that forks three ways gets half again the room
     of one that forks two — and every node in the tree ends up the same width.
     The fallback is only used if a tree renders before that runs. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; align-items: start;
}
/* Below this the 300px detail panel costs the tree more than it is worth —
   a three-way fork gets squeezed to unreadable slivers. Put it underneath and
   give the branches the whole width. */
@media (max-width: 1400px) {
  .tt-layout { flex-direction: column; }
  .tt-detail { width: auto; align-self: stretch; position: static; }
}
.tt-branch { display: flex; flex-direction: column; }
.tt-tier {
  position: relative; display: flex; gap: var(--tt-hgap); align-items: stretch;
  margin-top: var(--tt-gap);
}
.tt-tier.root { margin-top: 0; }
.tt-tier > .tt-node { flex: 1; min-width: 0; }

/* stem down from the tier above */
.tt-tier:not(.root)::before {
  content: ''; position: absolute; left: 50%; top: calc(var(--tt-gap) / -1);
  width: 1px; height: calc(var(--tt-gap) / 2); background: var(--tt-line);
}
/* A fork: a bus across the children, with a stub down into each. The children
   are equal shares of the row minus its gaps, so each end of the bus sits half
   a child-width in — which lands exactly on the outermost stubs, for any
   number of children (--n is set per row when the tree renders). */
.tt-tier.split::after {
  content: ''; position: absolute; top: calc(var(--tt-gap) / -2);
  --tt-child: calc((100% - (var(--n) - 1) * var(--tt-hgap)) / var(--n));
  left: calc(var(--tt-child) / 2); right: calc(var(--tt-child) / 2);
  height: 1px; background: var(--tt-line);
}
.tt-tier.split > .tt-node::before {
  content: ''; position: absolute; left: 50%; top: calc(var(--tt-gap) / -2);
  width: 1px; height: calc(var(--tt-gap) / 2); background: var(--tt-line);
}
/* a single node under a fork closes it back up; so does plain succession */
.tt-tier:not(.split):not(.root)::after {
  content: ''; position: absolute; left: 50%; top: calc(var(--tt-gap) / -2);
  width: 1px; height: calc(var(--tt-gap) / 2); background: var(--tt-line);
}
.tt-tier.merge::after { top: calc(var(--tt-gap) / -2); }
.tt-branch-head {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 0 2px 6px; border-bottom: 1px solid var(--panel-edge);
}
.tt-icon { font-size: 16px; }
.tt-bname { font-family: var(--serif); font-size: 15px; color: var(--gold-soft); flex: 1; }
.tt-spent { font-size: 11.5px; color: var(--gold); }
.tt-tagline { flex-basis: 100%; font-size: 11px; color: var(--ink-dim); line-height: 1.4; }

/* crossings — blended-build nodes, which name their two branches in words */
.tt-crossings { margin-top: 26px; }
.tt-cross-head { border-bottom-color: rgba(212, 169, 79, 0.35); }
.tt-cross-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin-top: 10px;
}
.tt-cross-row .tt-node { border-style: dashed; }
.tt-cross-row .tt-node.picked { border-style: solid; }

.tt-node {
  position: relative; cursor: pointer; font-family: inherit; text-align: left;
  display: flex; align-items: center; gap: 8px;
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--panel-edge);
  border-radius: 9px; padding: 9px 11px; min-height: 40px;
}
.tt-node:hover, .tt-node:focus-visible { border-color: var(--gold); background: var(--hover); outline: none; }
.tt-node[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.tt-node[aria-disabled="true"]:hover { background: var(--panel-2); }
.tt-node.picked {
  background: #29311c; border-color: #5f7a45;
  box-shadow: 0 0 0 1px rgba(95, 122, 69, 0.4);
}
.tt-node.picked .tt-cost { color: #b6d29a; }
/* min-width:0 is load-bearing: without it a flex item refuses to shrink below
   its longest word, so "Swaggering" would push its node wider than the tier
   allows and spill the whole row out of the column. */
.tt-name {
  font-family: var(--serif); font-size: 14.5px; color: var(--gold-soft);
  flex: 1; min-width: 0; line-height: 1.3; overflow-wrap: break-word;
}
.tt-cost {
  flex: none; font-size: 12px; color: var(--ink-dim);
  min-width: 18px; text-align: right;
}

/* character creation, step two */
#title-box.wide { max-width: min(1800px, 96vw); }
#creation { text-align: left; }
#creation h2 {
  margin: 0 0 6px; font-family: var(--serif); font-weight: normal;
  font-size: 20px; color: var(--gold-soft); text-align: center;
}
#cr-blurb { color: var(--ink-dim); font-size: 13px; line-height: 1.55; text-align: center; margin: 0 auto 10px; max-width: 620px; }
#cr-points { text-align: center; color: var(--gold-soft); font-size: 14px; margin-bottom: 14px; }
#cr-points.none-left { color: var(--ink-dim); }
#cr-tree { display: flex; height: 56vh; overflow: hidden; padding: 2px; }
#cr-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }

#title-screen {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  /* Candle-glow from above, a hint of forest below — warm light in a dark room. */
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(214, 158, 74, 0.24), transparent 62%),
    radial-gradient(900px 520px at 82% 112%, rgba(96, 118, 66, 0.22), transparent 60%),
    var(--bg);
  transition: opacity 0.5s; overflow-y: auto;
}
#title-screen.fading { opacity: 0; pointer-events: none; }
#title-box { text-align: center; padding: 32px; max-width: 720px; width: 100%; }
#title-star { color: var(--gold); font-size: 28px; text-shadow: 0 0 18px rgba(216, 164, 65, 0.85); }
#title-box h1 {
  font-family: var(--display); font-size: clamp(44px, 7.5vw, 68px); margin: 10px 0 8px;
  color: var(--gold-soft); letter-spacing: 1px; text-shadow: 0 2px 26px rgba(216, 164, 65, 0.3);
}
#title-desc { color: var(--ink-dim); font-size: 17px; line-height: 1.65; margin: 0 auto 28px; max-width: 560px; font-style: italic; }
#title-panels { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.title-panel {
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 14px;
  padding: 20px 22px; width: 300px; text-align: left;
}
.title-panel h2 {
  margin: 0 0 14px; font-family: var(--serif); font-weight: normal;
  font-size: 18px; color: var(--gold-soft);
}
#new-game-form { display: flex; flex-direction: column; gap: 10px; }
#new-name {
  background: var(--field); color: var(--ink); border: 1px solid var(--panel-edge);
  border-radius: 8px; padding: 10px 12px; font-size: 14.5px; outline: none;
}
#new-name:focus { border-color: var(--gold); }
#new-appearance {
  background: var(--field); color: var(--ink); border: 1px solid var(--panel-edge);
  border-radius: 8px; padding: 9px 11px; font-size: 13px; outline: none;
  width: 100%; resize: vertical; font-family: inherit; line-height: 1.45;
}
#new-appearance:focus { border-color: var(--gold); }
.jmsg-scene { margin: 8px 0; text-align: center; }
.jmsg-scene img { max-width: 100%; border-radius: 8px; border: 1px solid var(--panel-edge); cursor: zoom-in; }
#save-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.save-row { display: flex; gap: 6px; align-items: stretch; }
.save-btn {
  flex: 1; text-align: left; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--panel-edge); border-radius: 8px; padding: 9px 12px; cursor: pointer;
}
.save-btn:hover { border-color: var(--teal); }
.save-btn .save-name { font-size: 14.5px; }
.save-btn .save-meta { font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; }
.save-del {
  background: none; border: 1px solid var(--panel-edge); color: var(--ink-dim);
  border-radius: 8px; width: 34px; cursor: pointer; font-size: 15px;
}
.save-del:hover { border-color: var(--danger); color: var(--danger); }
.muted { color: var(--ink-dim); font-size: 13.5px; }
#title-hint { color: var(--ink-dim); font-size: 12.5px; margin-top: 30px; }
#title-error { color: var(--danger); font-size: 14px; margin-top: 16px; }

/* ── Names, titles and section headers wear the antique display face ──────
   Reading text stays in the book serif; anything that is a name or a heading
   is set in IM Fell so the eye reads it as a title, not a label. Appended last
   so it overrides the per-element serif each of these carried before. */
#hud-map, #dlg-name, #jr-title, #jr-detail-head .jd-name, .jr-card .jc-name,
.jr-summary .js-head, #inv-title, .inv-item .ii-name, #tal-title,
.tt-bname, .tt-detail-name, .title-panel h2, #creation h2, #title-box h1,
.rumour-log h3, .shipyard h3 {
  font-family: var(--display);
}
/* IM Fell's lowercase runs small; nudge the headline sizes up a touch so the
   display face reads at the same weight the old Georgia did. */
#dlg-name { font-size: 20px; }
#jr-title, #inv-title, #tal-title { font-size: 19px; }
.title-panel h2, #creation h2 { font-size: 21px; letter-spacing: 0.3px; }

/* ══════════════════════════════════════════════════════════════════════════
   Wooden-GUI skin (Kenney UI Pack — RPG Expansion, CC0)
   Appended last so it overrides the flat panel/button styles above. Panels keep
   their own dark interior for legibility; the art supplies frames and buttons.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── framed panels ── */
#journal, #inventory, #talents, .title-panel, .rumour-log, .shipyard {
  border: 16px solid transparent;
  border-image: url('/ui/kenney/panel_brown.png') 16 / 16px / 0 round;
  border-radius: 14px; background-clip: padding-box; box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}
#prompt {
  border: 13px solid transparent;
  border-image: url('/ui/kenney/panel_brown.png') 16 / 13px / 0 round;
  border-radius: 10px; background: var(--panel); background-clip: padding-box;
}
.hud-pill {
  border: 10px solid transparent;
  border-image: url('/ui/kenney/panel_brown.png') 16 / 10px / 0 round;
  border-radius: 8px; background: var(--panel); background-clip: padding-box;
}
#journal-btn:hover, #inventory-btn:hover, #talents-btn:hover, #gallery-btn:hover { filter: brightness(1.1); }
.toast {
  border: 11px solid transparent;
  border-image: url('/ui/kenney/panel_brown.png') 16 / 11px / 0 round;
  border-radius: 9px; background: var(--panel); background-clip: padding-box;
}

/* ── inputs as recessed insets ── */
#dlg-input, #jr-search, #new-name, #new-appearance {
  border: 12px solid transparent;
  border-image: url('/ui/kenney/panelInset_brown.png') 18 fill / 12px / 0 round;
  background: none; color: var(--ink);
}
#dlg-input:focus, #jr-search:focus, #new-name:focus, #new-appearance:focus { filter: brightness(1.08); }

/* ── primary wooden buttons (the main action on a screen) ── */
#tal-save, #cr-begin, .sy-buy {
  border: 13px solid transparent;
  border-image: url('/ui/kenney/buttonLong_beige.png') 16 fill / 13px 18px / 0 round;
  background: none; color: #3a2a12; font-family: var(--display); font-size: 14.5px; letter-spacing: 0.4px;
  cursor: pointer; min-height: 46px; padding: 0 12px; text-shadow: 0 1px 0 rgba(255,244,214,0.45);
}
#tal-save:hover, #cr-begin:hover, .sy-buy:hover { filter: brightness(1.06); }
#tal-save:active, #cr-begin:active, .sy-buy:active {
  border-image-source: url('/ui/kenney/buttonLong_beige_pressed.png'); transform: translateY(1px);
}
#tal-save:disabled, #cr-begin:disabled, .sy-buy:disabled { filter: grayscale(0.4) brightness(0.88); cursor: default; text-shadow: none; }

/* ── secondary wooden buttons (text) ── */
#tal-reset, #cr-back, .rl-pin, .rl-close, .sy-close, .save-btn {
  border: 11px solid transparent;
  border-image: url('/ui/kenney/buttonLong_brown.png') 16 fill / 11px 15px / 0 round;
  background: none; color: var(--gold-soft); font-family: var(--display); font-size: 13.5px;
  cursor: pointer; min-height: 42px; padding: 0 10px; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
#tal-reset:hover, #cr-back:hover, .rl-pin:hover, .rl-close:hover, .sy-close:hover, .save-btn:hover { filter: brightness(1.1); }
#tal-reset:active, #cr-back:active, .rl-pin:active, .rl-close:active, .sy-close:active, .save-btn:active {
  border-image-source: url('/ui/kenney/buttonLong_brown_pressed.png'); transform: translateY(1px);
}
#tal-reset:disabled { filter: grayscale(0.4) brightness(0.85); cursor: default; }
.save-btn { text-align: left; color: var(--ink); }
.save-btn .save-name { color: var(--gold-soft); }
.rl-item.pinned .rl-pin { color: #d8ecc4; }

/* ── square wooden buttons (close ✕, delete) ── */
#jr-close, #inv-close, #tal-close, .save-del {
  border: 10px solid transparent;
  border-image: url('/ui/kenney/buttonSquare_brown.png') 14 fill / 10px / 0 round;
  background: none; color: var(--gold-soft); width: 40px; height: 40px; padding: 0;
  cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
#jr-close:hover, #inv-close:hover, #tal-close:hover, .save-del:hover { filter: brightness(1.1); }
#jr-close:active, #inv-close:active, #tal-close:active, .save-del:active {
  border-image-source: url('/ui/kenney/buttonSquare_brown_pressed.png'); transform: translateY(1px);
}
.save-del:hover { color: var(--danger); }

/* ── lightbox nav arrows as round wooden buttons ── */
.lb-nav {
  border: 14px solid transparent;
  border-image: url('/ui/kenney/buttonRound_brown.png') 16 fill / 14px / 0 round;
  background: none; color: var(--gold-soft); width: 54px; height: 54px; border-radius: 0;
}
.lb-nav:hover { filter: brightness(1.12); transform: scale(1.06); }

/* readable placeholders on the recessed wooden inputs */
#dlg-input::placeholder, #jr-search::placeholder,
#new-name::placeholder, #new-appearance::placeholder { color: rgba(240, 231, 212, 0.62); }

/* Phone-sized screens: slimmer frames so the ornate borders don't eat the panel. */
@media (max-width: 640px) {
  #dialogue { border-width: 12px; border-image-width: 12px; }
  #journal, #inventory, #talents, .title-panel, .rumour-log, .shipyard,
  #prompt, .toast { border-width: 11px; border-image-width: 11px; }
  .dlg-option, #dlg-envision, #dlg-end,
  button[type="submit"], #dlg-send, #tal-save, #cr-begin, .sy-buy,
  #tal-reset, #cr-back, .rl-pin, .rl-close, .sy-close, .save-btn {
    border-image-width: 10px 14px;
  }
}

/* ── content cards inside the framed panels ── */
/* Journal entries: clickable wooden cards. */
.jr-card {
  border: 11px solid transparent;
  border-image: url('/ui/kenney/buttonLong_brown.png') 16 fill / 11px 15px / 0 round;
  background: none; color: var(--ink);
}
.jr-card:hover { filter: brightness(1.09); }
.jr-card .jc-preview, .jr-card .jc-meta { color: #e7dcc4; }
.jr-card .jc-time { color: #d8c9a8; }

/* Inventory items and written boxes: recessed wooden insets. */
.inv-item, .tt-detail, #tal-nature, .jr-summary {
  border: 12px solid transparent;
  border-image: url('/ui/kenney/panelInset_brown.png') 18 fill / 12px / 0 round;
  background: none;
}
.inv-item .ii-icon {
  border: 8px solid transparent;
  border-image: url('/ui/kenney/panelInset_beige.png') 18 fill / 8px / 0 round;
  background: none; color: #3a2a12;
}

/* Talent nodes: small wooden buttons; the chosen ones turn light. */
.tt-node {
  border: 8px solid transparent;
  border-image: url('/ui/kenney/buttonLong_brown.png') 16 fill / 8px 12px / 0 round;
  background: none; min-height: 48px;
}
.tt-node:hover, .tt-node:focus-visible { filter: brightness(1.1); background: none; outline: none; }
.tt-node[aria-disabled="true"] { filter: grayscale(0.5) brightness(0.72); }
.tt-node[aria-disabled="true"]:hover { filter: grayscale(0.5) brightness(0.72); background: none; }
.tt-node.picked { border-image-source: url('/ui/kenney/buttonLong_beige.png'); box-shadow: none; }
.tt-node.picked .tt-name { color: #2f2410; }
.tt-node.picked .tt-cost { color: #4a5a2a; }

/* ── contrast fixes: small/meta text that now rides on the lighter wood ──────
   Wood buttons & insets sit at luminance ~120; the faded --ink-dim (~168) used
   for numbers and meta lines is too close to it. Lift those to a light tone
   (the main body text already used light --ink, which reads fine on wood). */
.opt-key { color: var(--gold-soft); border-color: rgba(20, 12, 4, 0.5); }
.dlg-option:hover .opt-key { color: #fff2cf; border-color: rgba(20, 12, 4, 0.6); }
.dlg-option.dlg-more, .dlg-option.dlg-back { color: #e7dcc4; }
.tt-cost { color: var(--gold-soft); }
.tt-node.picked .tt-cost { color: #3f5320; }
.save-btn .save-meta { color: #e7dcc4; }
.inv-item .ii-qty, .inv-item .ii-desc { color: #ece1c9; }

/* meta text inside the wooden inset panels (talent detail, nature portrait,
   journal summary) — same lift from faded --ink-dim to a legible light tan. */
.tt-detail-hint, .tt-detail-state.shut,
#tal-nature-note, .jr-summary .js-notes li { color: #d8cbaa; }

/* ── sign-in gate (title screen) ─────────────────────────────────────────── */
#auth-panel form { display: flex; flex-direction: column; gap: 10px; }
#auth-panel input {
  width: 100%; border: 12px solid transparent;
  border-image: url('/ui/kenney/panelInset_brown.png') 18 fill / 12px / 0 round;
  background: none; color: var(--ink); font-family: var(--serif); font-size: 14.5px; outline: none;
}
#auth-panel input::placeholder { color: rgba(240, 231, 212, 0.6); }
#auth-panel button[type="submit"] { width: 100%; }
.auth-error { color: var(--danger); font-size: 13px; margin: 4px 0 0; }
.auth-toggle {
  background: none; border: none; color: var(--gold-soft); cursor: pointer;
  font-family: var(--serif); font-size: 13.5px; margin-top: 12px; padding: 4px;
  text-decoration: underline; text-underline-offset: 2px;
}
.auth-toggle:hover { color: var(--gold); }

/* the "signed in as … · Log out" strip, top-right of the title screen */
#account-bar {
  position: fixed; top: 14px; right: 16px; z-index: 55;
  display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-dim);
}
#account-bar .acct-email { color: var(--gold-soft); }
#account-bar #logout-btn {
  background: none; border: 1px solid var(--panel-edge); color: var(--ink-dim);
  border-radius: 8px; padding: 5px 11px; cursor: pointer; font-family: var(--sans); font-size: 12px;
}
#account-bar #logout-btn:hover { border-color: var(--gold); color: var(--gold-soft); }

/* ── image gallery (HUD 🖼) ──────────────────────────────────────────────── */
#gallery {
  position: fixed; inset: 0; z-index: 58; background: rgba(6, 4, 2, 0.72);
  display: flex; align-items: center; justify-content: center; animation: fadein 0.15s;
}
.gal-panel {
  width: min(1100px, 94vw); height: min(84vh, 900px); display: flex; flex-direction: column;
  background-color: var(--panel); background-image: url('/ui/tex-parchment.svg'); background-size: 240px;
  border: 16px solid transparent; border-image: url('/ui/kenney/panel_brown.png') 16 / 16px / 0 round;
  border-radius: 14px; background-clip: padding-box; box-shadow: 0 16px 60px rgba(0, 0, 0, 0.6);
}
.gal-head {
  display: flex; align-items: center; gap: 12px; padding: 4px 6px 12px;
  border-bottom: 1px solid var(--panel-edge);
}
.gal-title { font-family: var(--display); font-size: 19px; color: var(--gold-soft); }
.gal-count { flex: 1; font-size: 12.5px; color: var(--ink-dim); }
.gal-close {
  flex: none; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 10px solid transparent; border-image: url('/ui/kenney/buttonSquare_brown.png') 14 fill / 10px / 0 round;
  background: none; color: var(--gold-soft); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.gal-close:hover { filter: brightness(1.1); }
.gal-close:active { border-image-source: url('/ui/kenney/buttonSquare_brown_pressed.png'); transform: translateY(1px); }
.gal-grid {
  flex: 1; overflow-y: auto; align-content: start;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding: 14px 6px;
}
.gal-cell {
  position: relative; padding: 0; border: none; background: none; cursor: zoom-in;
  aspect-ratio: 4 / 3; border-radius: 10px;
}
.gal-cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border: 1px solid var(--panel-edge); border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4); transition: filter 0.12s, transform 0.12s;
}
.gal-cell:hover img { filter: brightness(1.08); transform: scale(1.02); }
.gal-tag {
  position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px);
  padding: 2px 8px; border-radius: 999px; background: rgba(10, 7, 3, 0.72); color: var(--gold-soft);
  font-size: 11px; pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gal-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-dim); padding: 44px 20px; font-size: 14px; line-height: 1.6; }
@media (max-width: 640px) {
  .gal-panel { width: calc(100vw - 16px); height: 90vh; border-width: 12px; border-image-width: 12px; }
  .gal-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
}