/* ============================================================
   MEHMET'İN KÖYÜ — The Illuminated Codex UI
   --------------------------------------------------------------
   A medieval codex come to life: warm earthen parchment graded in
   layers, a single saturated GOLD accent, illuminated drop-caps,
   wax-seal controls, scroll-unroll panel motion. Every value sits
   on an 8px rhythm. Display serif (Cormorant) for titles, an
   inscriptional face (Cinzel) for the brand mark, EB Garamond for
   reading, JetBrains Mono for chrome. One material language.
   ============================================================ */

/* ---------- Fonts ----------------------------------------------------------
   Loaded via <link> in index.html (parallel, non-blocking). Fallbacks are
   system serif/mono so the page is readable before webfonts arrive.     */

/* ---------- Design tokens ------------------------------------------------- */
/* Three tiers, per mobile-designer: primitive → semantic → component.
   Parchment is a 4-stop graded material, not one flat tone.            */
:root {
  /* --- Parchment (primitive, graded from face to edge) --- */
  --parch-1:  #f6eac6;   /* lightest face  */
  --parch-2:  #f1e1b8;   /* base           */
  --parch-3:  #e7d09a;   /* mid tone       */
  --parch-4:  #d8bd86;   /* warm edge      */
  --parch-face:     linear-gradient(160deg, var(--parch-1) 0%, var(--parch-2) 38%, var(--parch-3) 100%);
  --parch-edge:     linear-gradient(168deg, var(--parch-2), var(--parch-4));

  /* --- Ink (semantic) --- */
  --ink:        #2e1d0c;   /* primary text on parchment (~9:1, AAA) */
  --ink-soft:   #5b4427;   /* secondary text (~6.5:1, AA)            */
  --ink-faint:  #8a6f47;   /* tertiary / hints                       */

  /* --- Gold — the ONE saturated accent (primitive + tints) --- */
  --gold:       #c8983a;
  --gold-bright:#e8b84b;
  --gold-leaf:  #f3d27a;   /* lightest, used for leaf/highlight */
  --gold-deep:  #8a6320;   /* shaded edge / shadow tone         */
  --gold-line:  rgba(200,152,58,.45);

  /* --- Wax (seal / destructive accents — desaturated, not a 2nd accent) --- */
  --wax:        #7a2b25;
  --wax-bright: #9c3a32;

  /* --- Surfaces (HUD, against the 3D scene) --- */
  --hud-bg:     rgba(28,18,8,.74);
  --hud-bg-deep:rgba(18,11,4,.86);
  --hud-text:   #f0e0b8;
  --hud-text-dim:#cdb68a;

  /* --- Structure --- */
  --shadow-soft: 0 8px 24px rgba(20,12,4,.32);
  --shadow-card: 0 22px 60px rgba(18,10,2,.55), 0 2px 0 rgba(255,240,200,.12) inset;
  --shadow-gold: 0 0 0 1px var(--gold-line), 0 8px 28px rgba(120,80,20,.28);
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* --- Type scale (Major Third 1.250) --- */
  --step--1: 0.80rem;
  --step-0:  1.00rem;   /* 16 — base body */
  --step-1:  1.25rem;   /* 20 */
  --step-2:  1.56rem;   /* 25 */
  --step-3:  1.95rem;   /* 31 */
  --step-4:  2.44rem;   /* 39 */
  --step-5:  3.05rem;   /* 49 */

  /* --- Type families --- */
  --ff-display: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --ff-serif:   "EB Garamond", Georgia, "Times New Roman", serif;
  --ff-inscript:"Cinzel", "Cormorant Garamond", Georgia, serif;
  --ff-mono:    "JetBrains Mono", "Courier New", ui-monospace, monospace;

  /* --- Motion --- */
  --ease-out:   cubic-bezier(.16,.84,.44,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:   .14s;
  --dur-mid:    .28s;
  --dur-slow:   .48s;
}

/* ---------- Reset / base -------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #0c0a06;
  font-family: var(--ff-serif);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

canvas { display: block; position: fixed; inset: 0; z-index: 0; }

/* Scene vignette — frames the live 3D world like the edge of an illuminated
   page. Soft darkening + faint inner gold keyline at the very border. Sits
   ABOVE the canvas but BELOW the HUD and overlays; pointer-events:none so it
   never blocks input. Pure CSS → zero cost. */
#scene-vignette {
  position: fixed; inset: 0; z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(ellipse 130% 105% at 50% 46%,
      transparent 58%,
      rgba(20,12,4,0.20) 82%,
      rgba(12,7,2,0.46) 100%);
  box-shadow: inset 0 0 0 1px rgba(200,152,58,0.18);
  mix-blend-mode: multiply;
}

::selection { background: var(--gold-bright); color: #2a1c0a; }

/* Visible focus everywhere — AA requirement & a codex gold-ring motif. */
:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* ---------- Overlays ----------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  display: none;
  align-items: center; justify-content: center;
  padding: var(--space-4);
  background:
    radial-gradient(ellipse at center, rgba(22,14,5,.55), rgba(5,3,1,.90));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.overlay.show {
  display: flex;
  animation: overlay-in var(--dur-mid) var(--ease-out) forwards;
}
@keyframes overlay-in { to { opacity: 1; } }

/* ---------- Parchment card (the shared material) ------------------------- */
.card {
  position: relative;
  background: var(--parch-face);
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius-l);
  box-shadow:
    var(--shadow-card),
    inset 0 0 0 1px rgba(255,244,214,.35),
    inset 0 0 90px rgba(150,110,40,.18);
  padding: var(--space-6) var(--space-6);
  max-width: 92vw;
  animation: card-rise var(--dur-slow) var(--ease-spring) both;
}
/* Faint paper grain layered over the gradient. */
.card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 22%, rgba(120,85,30,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 64%, rgba(120,85,30,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 45% 88%, rgba(120,85,30,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 18%, rgba(120,85,30,.04) 0 1px, transparent 2px);
  background-size: 120px 120px, 90px 90px, 150px 150px, 70px 70px;
  pointer-events: none;
  opacity: .8;
  mix-blend-mode: multiply;
}
/* Gold inner rule — the illuminated border motif, drawn just inside the edge. */
.card::after {
  content: "";
  position: absolute; inset: 7px;
  border: 1px solid var(--gold-line);
  border-radius: calc(var(--radius-l) - 4px);
  pointer-events: none;
}
@keyframes card-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.intro-card {
  text-align: center;
  max-width: 560px;
  padding: var(--space-6) var(--space-6) var(--space-5);
}
.panel-card {
  width: min(720px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
  text-align: left;
  padding: var(--space-6);
}
.panel-card::-webkit-scrollbar { width: 10px; }
.panel-card::-webkit-scrollbar-track { background: transparent; }
.panel-card::-webkit-scrollbar-thumb {
  background: var(--gold); border-radius: 6px;
  border: 3px solid transparent; background-clip: content-box;
}

/* ---------- Intro / illuminated cover ------------------------------------ */
.crest {
  font-size: 56px; line-height: 1;
  filter: drop-shadow(0 4px 7px rgba(20,12,4,.5));
  margin-bottom: var(--space-1);
}
/* The gold rule that crowns the title — an illuminated-capital motif. */
.intro-card .crest-rule {
  width: 120px; height: 2px; margin: 0 auto var(--space-3);
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  position: relative;
}
.intro-card .crest-rule::before,
.intro-card .crest-rule::after {
  content: ""; position: absolute; top: 50%; width: 5px; height: 5px;
  background: var(--gold-bright); border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 6px rgba(232,184,75,.6);
}
.intro-card .crest-rule::before { left: 6px; }
.intro-card .crest-rule::after  { right: 6px; }

.intro-card h1 {
  margin: 0 0 var(--space-1);
  font-family: var(--ff-inscript);
  font-weight: 600;
  font-size: var(--step-4);
  letter-spacing: .06em;
  line-height: 1.1;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,250,230,.45);
}
.tagline {
  margin: 0 0 var(--space-4);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-1);
  color: var(--ink-soft);
  line-height: 1.4;
}
.byline {
  font-family: var(--ff-serif);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  max-width: 42ch;
  margin: 0 auto var(--space-4);
}
.byline b { font-weight: 600; color: var(--ink); }
.muted { color: var(--ink-soft); font-size: var(--step--1); }

/* ---------- Keyboard controls grid --------------------------------------- */
.controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}
.controls-grid > div {
  background: rgba(46,29,12,.06);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-m);
  padding: var(--space-2) var(--space-1);
  display: flex; flex-direction: column; gap: var(--space-1);
  align-items: center;
  font-size: var(--step--1);
  color: var(--ink-soft);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.controls-grid > div:hover {
  transform: translateY(-2px);
  background: rgba(200,152,58,.12);
}

kbd {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: var(--step--1);
  font-weight: 500;
  background: linear-gradient(180deg, #3a2917, #251609);
  color: var(--parch-1);
  border-radius: var(--radius-s);
  padding: 3px var(--space-2);
  box-shadow: 0 2px 0 #150c04, inset 0 1px 0 rgba(255,240,200,.18);
  border: 1px solid #1c130a;
  line-height: 1.4;
}

/* ---------- Buttons ------------------------------------------------------- */
/* Primary: a tooled-leather / gilded plaque. Press = spring. */
.btn {
  font-family: var(--ff-inscript);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--parch-1);
  background: linear-gradient(180deg, #6e4a23 0%, #4a3015 100%);
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  position: relative;
  box-shadow:
    0 5px 0 #26180a,
    0 10px 20px rgba(20,12,4,.45),
    inset 0 1px 0 rgba(255,224,160,.22);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
/* Gold inner keyline on the button face. */
.btn::after {
  content: "";
  position: absolute; inset: 3px;
  border: 1px solid var(--gold-line);
  border-radius: calc(var(--radius-m) - 2px);
  pointer-events: none;
}
.btn:hover {
  background: linear-gradient(180deg, #7d5429, #563819);
  transform: translateY(-2px);
  box-shadow:
    0 7px 0 #26180a,
    0 13px 24px rgba(20,12,4,.5),
    inset 0 1px 0 rgba(255,224,160,.25);
}
.btn:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 #26180a,
    0 3px 8px rgba(20,12,4,.4),
    inset 0 1px 0 rgba(255,224,160,.18);
}

.hint {
  margin-top: var(--space-4);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Skip link — keyboard users jump straight to the enter action. */
.skip-link {
  position: fixed; top: -60px; left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  font-family: var(--ff-inscript);
  font-size: var(--step--1);
  background: var(--ink);
  color: var(--gold-leaf);
  border: 1px solid var(--gold-deep);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-m);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-3); }

/* Intro primary + secondary actions sit side by side. */
.intro-actions {
  display: flex; gap: var(--space-3);
  justify-content: center; align-items: center;
  flex-wrap: wrap;
  margin: 0 0 var(--space-2);
}
/* Ghost / secondary button — outlined, parchment-tone, lower visual weight
   than the primary gilded plaque so the CTA hierarchy stays clear. */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--gold-deep);
  box-shadow: none;
  font-size: var(--step-0);
  padding: var(--space-2) var(--space-5);
}
.btn-ghost::after { display: none; }
.btn-ghost:hover {
  background: rgba(200,152,58,.14);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(120,80,20,.18);
}
.btn-ghost:active { transform: translateY(0); box-shadow: none; }

/* Exploration progress bar shown on the pause screen. */
.intro-progress { margin: 0 0 var(--space-4); }
.intro-progress-bar {
  height: 8px; width: 260px; max-width: 70vw;
  margin: 0 auto var(--space-2);
  background: rgba(46,29,12,.18);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  overflow: hidden;
}
.intro-progress-bar span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  border-radius: 999px;
  transition: width var(--dur-slow) var(--ease-out);
}
.intro-progress-text {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
  letter-spacing: .04em;
}

/* Shared close button for full overlays (guide). Wax-seal motif like the
   panel close, smaller. */
.overlay-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--wax-bright), var(--wax) 70%);
  color: rgba(255,235,210,.92);
  border: 1px solid #5a1f1a;
  font-size: 14px; font-weight: 700; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  z-index: 3;
  box-shadow: 0 3px 8px rgba(40,10,6,.5), inset 0 1px 2px rgba(255,180,160,.35);
  transition: transform var(--dur-fast) var(--ease-spring), filter var(--dur-fast) var(--ease-out);
}
.overlay-close:hover { transform: scale(1.08) rotate(-4deg); filter: brightness(1.1); }
.overlay-close:active { transform: scale(.96); }

/* ---------- Fatal / WebGL-error fallback --------------------------------- */
.fatal-fix { text-align: left; font-size: var(--step--1); line-height: 1.6; margin: var(--space-3) 0; }
.fatal-fix ul { padding-left: var(--space-5); margin: var(--space-2) 0; }
.fatal-fix li { margin: var(--space-2) 0; }
.fatal-fix code,
.fatal-fix b { font-weight: 600; }
.fatal-fix code {
  font-family: var(--ff-mono);
  font-size: .76rem;
  background: var(--ink);
  color: var(--parch-1);
  padding: 1px var(--space-2);
  border-radius: var(--radius-s);
  border: 1px solid #1c130a;
}

/* ============================================================
   HUD — sits over the live 3D scene
   Dark-stained glass chips with gold keylines. pointer-events:none
   on the container, auto on each interactive piece.
   ============================================================ */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }

.hud-box {
  position: absolute;
  font-family: var(--ff-serif);
  background: var(--hud-bg);
  color: var(--hud-text);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-m);
  padding: var(--space-2) var(--space-3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-soft);
  line-height: 1.4;
}
.hud-box.small {
  font-family: var(--ff-mono);
  font-size: var(--step--1);
  letter-spacing: .01em;
}

/* Location chip — inscriptional, with a gold marker */
#location {
  top: var(--space-3); left: var(--space-3);
  font-family: var(--ff-inscript);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: .04em;
  display: flex; align-items: center; gap: var(--space-2);
}
#location::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px rgba(232,184,75,.7);
  flex: none;
}

/* Top-right cluster: minimap stacked above the icon + lang buttons. */
.hud-right {
  position: absolute;
  top: var(--space-3); right: var(--space-3);
  display: flex; flex-direction: column;
  align-items: flex-end; gap: var(--space-2);
}
.hud-right-buttons {
  display: flex; gap: var(--space-2);
  align-items: center;
}
/* Square icon button (guide) matching the lang coin's weight. */
.hud-icon-btn {
  font-family: var(--ff-mono);
  font-size: var(--step-0);
  line-height: 1;
  cursor: pointer;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--hud-bg);
  color: var(--gold-leaf);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-s);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-soft);
  pointer-events: auto;
  transition: transform var(--dur-fast) var(--ease-spring),
              background var(--dur-fast) var(--ease-out);
}
.hud-icon-btn:hover {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #2a1c0a;
  transform: translateY(-1px);
}

/* Minimap — framed like a vellum map under glass */
#minimap {
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius-m);
  box-shadow:
    var(--shadow-soft),
    inset 0 0 0 3px rgba(20,12,4,.55),
    inset 0 0 0 4px var(--gold-line);
  background: rgba(20,14,6,.6);
  display: block;
  pointer-events: auto;
}

/* Exploration progress chip — bottom-right, a small "seen / total" tally. */
.explore-chip {
  bottom: var(--space-3); right: var(--space-3);
  font-variant-numeric: tabular-nums;
  color: var(--gold-leaf);
  display: none;            /* shown once js adds .active */
}
.explore-chip.active { display: block; }
.explore-chip.complete { color: var(--gold-bright); }

/* Crosshair — a quill-nib dot in a gold ring; subtle pulse */
#crosshair {
  position: absolute; top: 50%; left: 50%;
  width: 22px; height: 22px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(243,210,122,.7);
  border-radius: 50%;
  box-shadow:
    0 0 10px rgba(0,0,0,.55),
    inset 0 0 6px rgba(243,210,122,.18);
  animation: crosshair-pulse 2.8s var(--ease-out) infinite;
}
#crosshair::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 3px; height: 3px;
  transform: translate(-50%,-50%);
  background: rgba(243,210,122,.95);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(243,210,122,.8);
}
@keyframes crosshair-pulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1);    opacity: .85; }
  50%      { transform: translate(-50%,-50%) scale(1.08); opacity: 1;   }
}

/* Interaction prompt — pops with a spring when shown */
#prompt {
  top: calc(50% + 30px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: none;
  font-family: var(--ff-display);
  font-size: var(--step-1);
  white-space: nowrap;
  letter-spacing: .01em;
}
#prompt.show {
  display: block;
  animation: prompt-pop var(--dur-mid) var(--ease-spring) forwards;
}
@keyframes prompt-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);   }
}
#prompt kbd {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #2a1c0a;
  border-color: var(--gold-deep);
  box-shadow: 0 2px 0 var(--gold-deep), inset 0 1px 0 rgba(255,255,255,.4);
}
#prompt b { color: var(--gold-leaf); font-weight: 600; }

#controls-hint { bottom: var(--space-3); left: var(--space-3); max-width: 46ch; }
#tip {
  bottom: var(--space-3); left: 50%; transform: translateX(-50%);
  max-width: 70vw; text-align: center;
  font-style: italic;
  color: var(--hud-text-dim);
}


/* ============================================================
   INFO PANEL — a manuscript page
   ============================================================ */
/* Wax-seal close button (desaturated red wax on parchment). */
#panel-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, var(--wax-bright), var(--wax) 70%);
  color: rgba(255,235,210,.92);
  border: 1px solid #5a1f1a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow:
    0 3px 8px rgba(40,10,6,.5),
    inset 0 1px 2px rgba(255,180,160,.35),
    inset 0 -2px 4px rgba(0,0,0,.35);
  transition: transform var(--dur-fast) var(--ease-spring),
              filter var(--dur-fast) var(--ease-out);
}
#panel-close:hover { transform: scale(1.08) rotate(-4deg); filter: brightness(1.1); }
#panel-close:active { transform: scale(.96); }

/* Panel header — title with a gold underline rule + dotted terminators */
.panel-head {
  display: flex; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  position: relative;
  padding-right: 56px; /* room for the wax seal */
}
.panel-head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--gold-bright) 0, var(--gold-bright) 14px,
    transparent 14px, transparent 18px,
    var(--gold-line) 18px, var(--gold-line) calc(100% - 18px),
    transparent calc(100% - 18px), transparent calc(100% - 14px),
    var(--gold-bright) calc(100% - 14px));
}
#panel-icon {
  font-size: 46px; line-height: 1;
  filter: drop-shadow(0 3px 5px rgba(20,12,4,.4));
  flex: none;
}
#panel-title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--step-3);
  line-height: 1.15;
  color: var(--ink);
}
#panel-sub {
  margin: var(--space-1) 0 0;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--step-0);
  color: var(--ink-soft);
}

/* --- Panel body: the manuscript page ------------------------------------ */
#panel-body { padding-top: var(--space-2); }

#panel-body p.intro {
  position: relative;
  font-family: var(--ff-serif);
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--ink);
  background: rgba(200,152,58,.10);
  border-left: 3px solid var(--gold-bright);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
  margin: 0 0 var(--space-4);
}
/* The SIGNATURE DETAIL: a gold-leaf illuminated drop-cap on the first
   letter of every intro paragraph. Floats the capital, gilds it, gives
   it a soft glow — the visual rhyme of an illuminated manuscript. */
#panel-body p.intro::first-letter {
  font-family: var(--ff-inscript);
  font-weight: 700;
  float: left;
  font-size: 3.1em;
  line-height: .8;
  padding: .08em .12em 0 0;
  margin-left: -.12em;
  color: var(--gold-deep);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,240,200,.25);
  filter: drop-shadow(0 1px 1px rgba(120,80,20,.3));
}

#panel-body section { margin: var(--space-4) 0; }
#panel-body h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--ff-inscript);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-bottom: var(--space-1);
  position: relative;
}
#panel-body h3::after {
  content: "";
  position: absolute; left: 0; bottom: 0; width: 38px; height: 1px;
  background: var(--gold-line);
}
#panel-body p {
  margin: var(--space-1) 0;
  line-height: 1.6;
  font-size: var(--step-0);
  color: var(--ink);
}
#panel-body ul {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
  list-style: none;
}
#panel-body li {
  position: relative;
  margin: var(--space-1) 0;
  line-height: 1.55;
  font-size: var(--step-0);
  padding-left: var(--space-2);
}
/* Gold lozenge bullets instead of default discs. */
#panel-body li::before {
  content: "";
  position: absolute; left: -12px; top: .62em;
  width: 5px; height: 5px;
  background: var(--gold-bright);
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px var(--gold-deep);
}

/* Stats — gold-rimmed vellum tiles */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--space-2);
}
.stat {
  background: rgba(46,29,12,.06);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-2);
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.stat:hover { transform: translateY(-2px); border-color: var(--gold); }
.stat b {
  display: block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--step-3);
  color: var(--gold-deep);
  line-height: 1.1;
}
.stat span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.3;
}

/* Rows table — a ledger */
table.rows { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
table.rows th {
  text-align: left;
  padding: var(--space-2);
  font-family: var(--ff-inscript);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold-deep);
  white-space: nowrap;
  border-bottom: 1px solid var(--gold-line);
}
table.rows td {
  padding: var(--space-2);
  border-top: 1px solid rgba(200,152,58,.18);
  line-height: 1.45;
  color: var(--ink);
  vertical-align: top;
}
table.rows tr:nth-child(even) td { background: rgba(46,29,12,.045); }

/* Project cards — bound leaves */
.project {
  background: rgba(46,29,12,.05);
  border: 1px solid var(--gold-line);
  border-left: 3px solid var(--gold-bright);
  border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0;
}
.project-head {
  display: flex; justify-content: space-between; gap: var(--space-2);
  align-items: baseline; flex-wrap: wrap;
}
.project-head b {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--step-2);
  color: var(--ink);
}
.project-head span {
  font-size: var(--step--1);
  font-style: italic;
  color: var(--ink-soft);
}
.project-url {
  font-family: var(--ff-mono);
  font-size: var(--step--1);
  color: var(--gold-deep);
  margin-top: var(--space-1);
}
.project-metric {
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: var(--space-1) 0;
}
.project ul { margin: var(--space-1) 0; }
.tech {
  margin-top: var(--space-2);
  display: flex; flex-wrap: wrap; gap: var(--space-1);
}
.tech span {
  font-family: var(--ff-mono);
  font-size: .72rem;
  background: linear-gradient(180deg, #3a2917, #251609);
  color: var(--parch-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-s);
  border: 1px solid #1c130a;
  box-shadow: inset 0 1px 0 rgba(255,240,200,.12);
}

/* NPC dialog — spoken lines, gold quote-bar */
.dialog p {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.5;
  margin: var(--space-3) 0;
  padding: 0 0 0 var(--space-3);
  border-left: 3px solid var(--gold-bright);
  color: var(--ink);
}
.dialog p.last {
  color: var(--ink-soft);
  border-left-color: var(--gold-line);
}

/* Links — bound ribbon buttons */
.links {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gold-line);
}
.links a {
  font-family: var(--ff-mono);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  color: var(--parch-1);
  background: linear-gradient(180deg, #6e4a23, #4a3015);
  border: 1px solid var(--gold-deep);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-s);
  box-shadow: 0 3px 0 #26180a, inset 0 1px 0 rgba(255,224,160,.2);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.links a:hover {
  background: linear-gradient(180deg, #7d5429, #563819);
  transform: translateY(-2px);
}
.links a:active { transform: translateY(1px); box-shadow: 0 1px 0 #26180a; }

/* ============================================================
   Language toggle — a stamped coin / wax-tag
   ============================================================ */
.lang-btn {
  position: absolute;
  top: var(--space-3); right: var(--space-3);
  z-index: 6;
  font-family: var(--ff-inscript);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: .12em;
  cursor: pointer;
  background: linear-gradient(180deg, #3a2917, #221408);
  color: var(--gold-leaf);
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius-s);
  padding: var(--space-1) var(--space-3);
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(20,12,4,.5), inset 0 1px 0 rgba(255,224,160,.16);
  transition: transform var(--dur-fast) var(--ease-spring),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.lang-btn:hover {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #2a1c0a;
  transform: translateY(-1px);
}
.lang-btn:active { transform: translateY(1px); }
/* HUD variant — translucent coin over the scene (sits in the top-right cluster). */
.hud-lang {
  position: static;          /* flows inside .hud-right-buttons */
  background: var(--hud-bg);
  color: var(--gold-leaf);
  border-color: var(--gold-line);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hud-lang:hover {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #2a1c0a;
}

/* ============================================================
   GUIDE / VILLAGE MAP — an index of every place
   ============================================================ */
.guide-card {
  width: min(880px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
  padding: var(--space-6);
  text-align: left;
}
.guide-card::-webkit-scrollbar { width: 10px; }
.guide-card::-webkit-scrollbar-thumb {
  background: var(--gold); border-radius: 6px;
  border: 3px solid transparent; background-clip: content-box;
}
.guide-header { margin-bottom: var(--space-4); padding-right: 48px; }
.guide-header h2 {
  margin: 0 0 var(--space-1);
  font-family: var(--ff-inscript);
  font-weight: 600;
  font-size: var(--step-3);
  letter-spacing: .04em;
  color: var(--ink);
}
.guide-sub {
  margin: 0 0 var(--space-4);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--ink-soft);
  line-height: 1.4;
}
.guide-progress-row {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
}
.guide-progress-bar {
  flex: 1 1 160px;
  height: 7px;
  background: rgba(46,29,12,.18);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  overflow: hidden;
}
.guide-progress-bar span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  border-radius: 999px;
  transition: width var(--dur-slow) var(--ease-out);
}
.guide-progress-text {
  font-family: var(--ff-mono);
  font-size: var(--step--1);
  color: var(--ink-soft);
  white-space: nowrap;
}
.guide-progress-text b { color: var(--gold-deep); }

/* The grid of place cards. */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}
.guide-item {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-1);
  text-align: left;
  cursor: pointer;
  background: rgba(46,29,12,.05);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-m);
  padding: var(--space-3);
  font-family: var(--ff-serif);
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.guide-item:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  background: rgba(200,152,58,.10);
  box-shadow: var(--shadow-gold);
}
.guide-item:focus-visible { border-color: var(--gold-bright); }
.guide-item-head {
  display: flex; align-items: center; gap: var(--space-2);
}
.guide-item-icon { font-size: 26px; line-height: 1; flex: none; }
.guide-item-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--ink);
  line-height: 1.15;
}
.guide-item-sub {
  font-size: var(--step--1);
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.35;
}
/* Visited state: a stamped "seen" mark + muted accent. */
.guide-item.visited {
  border-color: rgba(200,152,58,.55);
  background: rgba(200,152,58,.07);
}
.guide-item.visited::after {
  content: "";
  position: absolute; top: 8px; right: 10px;
  width: 14px; height: 14px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  -webkit-mask: var(--check-svg) center / contain no-repeat;
  mask: var(--check-svg) center / contain no-repeat;
}
.guide-item-cta {
  margin-top: auto;
  font-family: var(--ff-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--gold-deep);
  text-transform: uppercase;
}
.guide-item.visited .guide-item-cta { color: var(--ink-faint); }

.guide-footer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gold-line);
}
.guide-footer h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--ff-inscript);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.guide-contact-cta {
  margin: 0 0 var(--space-3);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--ink-soft);
}
.guide-footer .links { margin-top: 0; padding-top: 0; border-top: none; }

/* Check-mark SVG used as the visited badge mask (data URI token). */
:root { --check-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); }

/* ============================================================
   Reduced motion — strip every animation, keep static states
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .overlay { opacity: 1; }
  #crosshair { animation: none; }
}

/* ============================================================
   Small screens — keep the codex readable on narrow viewports
   ============================================================ */
@media (max-width: 540px) {
  .card { padding: var(--space-5) var(--space-4); }
  .intro-card h1 { font-size: var(--step-3); }
  .tagline { font-size: var(--step-0); }
  #panel-title { font-size: var(--step-2); }
  #panel-icon { font-size: 38px; }
  #location { font-size: var(--step-0); }
  .controls-grid { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
  #minimap { width: 120px; height: 120px; }
  .guide-card { padding: var(--space-5) var(--space-4); }
  .guide-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .explore-chip { bottom: var(--space-3); right: var(--space-3); }
  /* On very small screens the bottom-left controls hint and the tip can
     collide; let the tip move up a touch and shrink. */
  #tip { max-width: 80vw; }
}

/* ============================================================
   TOUCH / MOBILE CONTROLS
   --------------------------------------------------------------
   The on-screen joystick + look-drag + buttons live in #touch-ui,
   built by engine/touch.js. Hidden on desktop (no body.touch class);
   shown only during play (#touch-ui.active). The body.touch class is
   added by main.js when isTouch is true.
   ============================================================ */

/* Suppress browser gestures on touch devices during play so drags don't
   scroll/zoom the page. */
body.touch { touch-action: none; overscroll-behavior: none; }

/* On touch devices, swap the desktop control hint for the touch hint inside
   the intro card. The desktop grid stays for non-touch. */
.touch-hint { display: none; }
body.touch .controls-grid:not(.touch-hint) { display: none; }
body.touch .touch-hint { display: grid; }
.t-ico { font-size: 1.1em; line-height: 1; margin-right: 0.2em; }

/* The HUD "WASD walk · Mouse look" strip is meaningless on touch. */
body.touch #controls-hint { display: none; }

/* Touch control overlay — invisible until active. */
#touch-ui { display: none; }
body.touch #touch-ui.active { display: block; }

/* Joystick base — appears dynamically at the touch origin (left half). */
.joy-base {
  position: fixed;
  width: 130px; height: 130px;
  margin: -65px 0 0 -65px;          /* center on the touch origin */
  border-radius: 50%;
  border: 2px solid rgba(200,152,58,.5);
  background: radial-gradient(circle, rgba(34,22,9,.35), rgba(34,22,9,.15));
  pointer-events: none;
  z-index: 8;
  box-shadow: 0 0 24px rgba(0,0,0,.4) inset;
}
.joy-base.hidden { display: none; }
.joy-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-leaf), var(--gold) 70%);
  border: 2px solid rgba(243,210,122,.9);
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 18px rgba(232,184,75,.45);
  transition: none;
}

/* On-screen action buttons (bottom-right thumb arc). */
.touch-btn {
  position: fixed;
  z-index: 9;
  width: 78px; height: 78px;
  border-radius: 50%;
  border: 2px solid rgba(200,152,58,.6);
  background: radial-gradient(circle at 35% 30%, rgba(60,40,16,.7), rgba(28,18,8,.85));
  color: var(--gold-leaf);
  font-family: var(--ff-inscript);
  font-size: 30px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  backdrop-filter: blur(2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  transition: opacity var(--dur-fast), box-shadow var(--dur-fast),
              background var(--dur-fast);
}
.touch-interact { bottom: 40px; right: 28px; }
.touch-run {
  bottom: 132px; right: 52px;
  width: 60px; height: 60px; font-size: 24px;
}
.touch-btn:disabled {
  opacity: 0.28;
  box-shadow: none;
}
.touch-btn.ready {
  border-color: var(--gold-leaf);
  box-shadow: 0 0 22px rgba(232,184,75,.6), 0 4px 16px rgba(0,0,0,.45);
  animation: touchPulse 1.8s ease-in-out infinite;
}
.touch-run.active {
  background: radial-gradient(circle at 35% 30%, rgba(200,152,58,.55), rgba(120,80,20,.7));
  border-color: var(--gold-leaf);
}
@keyframes touchPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(232,184,75,.45), 0 4px 16px rgba(0,0,0,.45); }
  50%      { box-shadow: 0 0 30px rgba(232,184,75,.8),  0 4px 16px rgba(0,0,0,.45); }
}

/* The interact/run buttons would clash with the bottom-right minimap HUD
   cluster on phones — nudge the HUD cluster up on touch devices. */
body.touch .hud-right { top: var(--space-3); }
body.touch .hud-right-buttons { gap: var(--space-2); }

/* Landscape phones are short — keep the buttons reachable but out of the
   minimap's way. */
@media (max-width: 900px) and (orientation: landscape) {
  .touch-interact { bottom: 24px; right: 24px; width: 66px; height: 66px; }
  .touch-run { bottom: 24px; right: 104px; width: 54px; height: 54px; font-size: 22px; }
}