/* ============================================================
   ECHOLALIA — THE WOODEN DESK
   Not a computer. A crude machine carved out of heavy oak and
   pine by someone who should have stopped at the third draft.
   Every surface is timber, iron, wax, and ink burned into grain.
   Tailwind does layout; this file does the wood.
   ============================================================ */

:root {
  --desk-dark: #120b06;      /* charred oak, the desk itself */
  --desk-mid: #1b1109;
  --board: #241710;          /* a pine board, sanded once */
  --board-hi: #2c1c12;
  --wood-border: #2a1d15;    /* the demanded timber edge */
  --wood-gap: #0b0603;       /* the black seam between planks */
  --iron: #6a6258;           /* nail heads, hinges */
  --iron-dark: #35302a;
  --ink: #d4c5b3;            /* aged parchment ink */
  --dim: #8a7a66;            /* faded pencil */
  --burn: #c79a5b;           /* ember amber — text burned into wood */
  --accent: #8e2f25;         /* wax seal / dried blood */
  --accent-glow: rgba(142, 47, 37, 0.35);
  --critic: #9b9689;         /* cold ash-grey ink */
  --critic-glow: rgba(155, 150, 137, 0.3);
  --muse: #b06452;           /* madder red, warm */
  --muse-glow: rgba(176, 100, 82, 0.32);
  --candle: #c79a5b;
  --font-type: 'Courier Prime', 'Courier New', monospace;
  --font-serif: 'EB Garamond', Georgia, serif;

  /* raw grain: stretched turbulence, brown, faint — layered over everything */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.14' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.10 0 0 0 0 0.05 0 0 0 0.30 0'/%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='2' seed='23'/%3E%3CfeColorMatrix values='0 0 0 0 0.20 0 0 0 0 0.13 0 0 0 0 0.07 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");

  /* letterpress: ink pressed deep into timber */
  --pressed: 0 1px 1px rgba(0, 0, 0, 0.75), 0 0 1px rgba(0, 0, 0, 0.4);
  --burned: 0 1px 1px rgba(0, 0, 0, 0.8), 0 0 7px rgba(150, 90, 35, 0.22);
}

* { scrollbar-width: thin; scrollbar-color: var(--wood-border) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #33221668, #22150dcc);
  border-radius: 2px;
}
*::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.25); }

/* ---------- the desk itself ---------- */
html, body {
  height: 100%;
  background:
    var(--grain),
    repeating-linear-gradient(90deg,
      #150d07 0px, #191008 46px, #140c06 92px, #170e08 138px,
      #120a05 176px, var(--wood-gap) 178px, var(--wood-gap) 181px),
    var(--desk-dark);
  color: var(--ink);
  font-family: var(--font-type);
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path d="M2 1 L2 14 L6 11 L9 17 L11 16 L8 10 L13 10 Z" fill="%23d4c5b3" stroke="%23120b06" stroke-width="1"/></svg>') 2 1, auto;
}

::selection { background: var(--accent); color: #f2e7d5; }

input, textarea, button { cursor: inherit; font-family: inherit; }
input:focus, textarea:focus, button:focus { outline: none; }

.hidden { display: none !important; }

/* ---------- candlelight over the desk ---------- */
#candlelight::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9990;
  background: radial-gradient(ellipse 130% 110% at 50% 42%,
    transparent 36%,
    rgba(6, 3, 1, 0.42) 66%,
    rgba(2, 1, 0, 0.88) 100%);
}
#candlelight::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9991;
  background: radial-gradient(58% 52% at 50% 56%,
    rgba(199, 154, 91, 0.06) 0%,
    rgba(199, 154, 91, 0.022) 45%,
    transparent 72%);
  animation: candle 7s ease-in-out infinite;
}
@keyframes candle {
  0%, 100% { opacity: 0.9; transform: translate(0, 0) scale(1); }
  23% { opacity: 1; transform: translate(3px, -2px) scale(1.015); }
  48% { opacity: 0.78; transform: translate(-2px, 1px) scale(0.99); }
  71% { opacity: 0.95; transform: translate(1px, -1px) scale(1.008); }
  86% { opacity: 0.84; transform: translate(-1px, 0) scale(1); }
}

/* ---------- utilities ---------- */
.fade-in { animation: fade-in 0.9s ease both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.shake { animation: shake 0.4s linear; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* a heavy handmade board: shared by windows, cards, and modals */
.wood-board, .win, #login-form, .vault-card, .lightbox-frame {
  background:
    var(--grain-soft),
    linear-gradient(178deg, var(--board-hi) 0%, var(--board) 45%, #1a0f09 100%);
  border: 3px solid var(--wood-border);
  border-radius: 4px;
  box-shadow:
    inset 0 2px 2px rgba(226, 186, 130, 0.05),   /* candle catching the top edge */
    inset 0 -4px 9px rgba(0, 0, 0, 0.55),        /* undercut */
    inset 0 0 26px rgba(0, 0, 0, 0.35),
    0 3px 0 rgba(0, 0, 0, 0.55),                 /* board thickness */
    0 22px 50px rgba(0, 0, 0, 0.8);              /* carved out of the desk */
}

/* ---------- headphone gate: a single candle on the writer's desk ---------- */
#headphone-gate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  gap: 15px;
  padding-bottom: 11vh;
  overflow: hidden;
  background: #0a0603 url('/static/assets/gate.jpg') center 42% / cover no-repeat;
  animation: gate-flicker 6s ease-in-out infinite;
}
/* scrim: deepen the edges and darken the foreground so the text can breathe */
#headphone-gate::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 34%, transparent 34%, rgba(6,3,1,0.4) 70%, rgba(3,1,0,0.86) 100%),
    linear-gradient(to bottom, transparent 44%, rgba(8,4,1,0.55) 74%, rgba(6,3,1,0.9) 100%);
}
/* the flame breathes — a warm glow laid exactly over the painted flame */
#headphone-gate::after {
  content: "";
  position: absolute; left: 50%; top: 26%; z-index: 0;
  width: 340px; height: 420px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(226,170,90,0.28) 0%, rgba(199,140,60,0.10) 45%, transparent 72%);
  mix-blend-mode: screen;
  animation: flame-breathe 5s ease-in-out infinite;
}
@keyframes gate-flicker {
  0%, 100% { filter: brightness(1); }
  46% { filter: brightness(1.05); }
  58% { filter: brightness(0.94); }
  63% { filter: brightness(1.02); }
  78% { filter: brightness(0.97); }
}
@keyframes flame-breathe {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  30% { opacity: 1; transform: translate(-50.5%, -51%) scale(1.06); }
  55% { opacity: 0.62; transform: translate(-49.5%, -49.5%) scale(0.97); }
  80% { opacity: 0.9; transform: translate(-50%, -50.5%) scale(1.03); }
}
.gate-sigil { display: none; } /* the candle is the sigil now */
.gate-line, .gate-sub, #gate-enter { position: relative; z-index: 1; }
.gate-line {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, 27px);
  letter-spacing: 0.34em; text-indent: 0.34em;
  color: #e7d6bc;
  text-shadow: 0 0 18px rgba(199,140,60,0.28), 0 2px 4px rgba(0,0,0,0.9);
}
.gate-sub {
  font-size: 11.5px; letter-spacing: 0.16em;
  color: #b6a488;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
#gate-enter {
  margin-top: 22px;
  padding: 0.8rem 2.6rem;
  border: 2px solid var(--wood-border);
  border-radius: 3px;
  background:
    var(--grain-soft),
    linear-gradient(180deg, rgba(42,26,16,0.92), rgba(20,12,7,0.92));
  color: var(--ink);
  font-size: 12px; letter-spacing: 0.3em; text-indent: 0.3em;
  text-shadow: var(--pressed);
  box-shadow: inset 0 1px 1px rgba(226, 186, 130, 0.09), 0 3px 0 rgba(0, 0, 0, 0.6), 0 10px 26px rgba(0, 0, 0, 0.7);
  transition: color 0.2s, box-shadow 0.2s, transform 0.1s;
}
#gate-enter:hover {
  color: #f2e7d5;
  box-shadow: inset 0 1px 1px rgba(226, 186, 130, 0.09), 0 0 26px rgba(199,140,60,0.4), 0 3px 0 rgba(0, 0, 0, 0.6);
}
#gate-enter:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(0,0,0,0.6); }

/* ---------- boot + login ---------- */
#boot-layer {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2.4rem;
}
#boot-log {
  font-size: 12.5px; line-height: 1.9;
  color: var(--burn);
  opacity: 0.88;
  width: min(560px, 86vw);
  min-height: 9.5rem;
  text-shadow: var(--burned);
}

#login-form {
  width: min(380px, 86vw);
  padding: 2rem 1.8rem 1.6rem;
  position: relative;
}
#login-form::before {
  /* a shallow carved groove around the board */
  content: "";
  position: absolute; inset: 7px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(226, 186, 130, 0.05);
  border-radius: 2px;
  pointer-events: none;
}
#login-form h1 {
  font-family: var(--font-serif);
  font-size: 24px; letter-spacing: 0.5em; text-indent: 0.5em;
  text-align: center; color: var(--ink);
  margin-bottom: 0.4rem;
  text-shadow: var(--burned);
}
#login-form .login-sub {
  text-align: center; font-size: 10px; color: var(--dim);
  letter-spacing: 0.2em; margin-bottom: 1.6rem;
  text-shadow: var(--pressed);
}
.login-field { margin-bottom: 1rem; }
.login-field label {
  display: block; font-size: 10px; letter-spacing: 0.25em;
  color: var(--dim); margin-bottom: 0.35rem;
  text-shadow: var(--pressed);
}
.login-field input {
  width: 100%;
  background: rgba(6, 3, 1, 0.6);
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(226, 186, 130, 0.05);
  border-radius: 2px;
  color: var(--ink);
  padding: 0.55rem 0.7rem;
  font-size: 14px;
}
.login-field input:focus { border-bottom-color: var(--burn); }
#login-error {
  color: #c05a44;
  font-size: 11.5px; line-height: 1.5;
  margin: 0.2rem 0 0.8rem;
  text-shadow: 0 0 8px var(--accent-glow), var(--pressed);
}
#login-submit {
  width: 100%;
  border: 2px solid var(--wood-border);
  border-radius: 3px;
  background: var(--grain-soft), linear-gradient(180deg, #2a1a10, #1c110a);
  color: var(--ink);
  letter-spacing: 0.3em; text-indent: 0.3em;
  font-size: 12px;
  padding: 0.65rem 0;
  text-shadow: var(--pressed);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
  transition: color 0.2s, box-shadow 0.2s, transform 0.1s;
}
#login-submit:hover { color: #f2e7d5; box-shadow: 0 0 20px var(--accent-glow), 0 3px 0 rgba(0, 0, 0, 0.5); }
#login-submit:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }

/* ---------- possession overlay (unchanged mechanics, ember light) ---------- */
#glitch-overlay {
  position: fixed; inset: 0; z-index: 9995;
  pointer-events: none;
  overflow: hidden;
}
#glitch-overlay .tear {
  position: absolute; left: 0; right: 0;
  height: 6%;
  background: linear-gradient(90deg,
    rgba(142, 47, 37, 0.85) 0%,
    rgba(199, 154, 91, 0.35) 40%,
    rgba(212, 197, 179, 0.15) 60%,
    transparent 85%);
  mix-blend-mode: screen;
  opacity: 0;
}
#glitch-overlay.glitch-boot .tear,
#glitch-overlay.glitching .tear {
  animation: tear 0.75s steps(3) infinite;
}
#glitch-overlay .tear:nth-child(1) { top: 12%; animation-delay: 0s; }
#glitch-overlay .tear:nth-child(2) { top: 33%; animation-delay: 0.12s; height: 3%; }
#glitch-overlay .tear:nth-child(3) { top: 58%; animation-delay: 0.05s; height: 9%; }
#glitch-overlay .tear:nth-child(4) { top: 79%; animation-delay: 0.19s; height: 2%; }
@keyframes tear {
  0% { opacity: 0; transform: translateX(-6%) scaleY(1); }
  10% { opacity: 0.9; transform: translateX(3%) scaleY(1.6); }
  35% { opacity: 0.35; transform: translateX(-2%) scaleY(0.6); }
  60% { opacity: 0.8; transform: translateX(5%) scaleY(1.2); }
  100% { opacity: 0; transform: translateX(0) scaleY(1); }
}
#glitch-overlay.glitch-boot { animation: boot-flash 1.3s steps(6) both; }
@keyframes boot-flash {
  0% { background-color: transparent; }
  15% { background-color: rgba(142, 47, 37, 0.16); }
  30% { background-color: rgba(199, 154, 91, 0.09); }
  45% { background-color: transparent; }
  70% { background-color: rgba(142, 47, 37, 0.09); }
  100% { background-color: transparent; }
}

/* ---------- the desktop: the desk under lamplight ---------- */
#desktop {
  position: fixed; inset: 0;
  background:
    radial-gradient(1100px 700px at 32% 24%, rgba(48, 30, 16, 0.22) 0%, transparent 62%),
    radial-gradient(900px 600px at 74% 82%, rgba(40, 24, 12, 0.20) 0%, transparent 58%),
    linear-gradient(rgba(9, 5, 2, 0.5), rgba(9, 5, 2, 0.6)),   /* scrim so the windows stay the focus */
    url('/static/assets/desk.jpg') center 46% / cover no-repeat,
    var(--desk-dark);
}
#desktop::before {
  /* the name, branded into the desk with an iron */
  content: "ECHOLALIA";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: clamp(60px, 12vw, 160px);
  letter-spacing: 0.3em; text-indent: 0.3em;
  color: rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 0 rgba(226, 186, 130, 0.045);
  pointer-events: none;
  user-select: none;
}

/* desktop icons — wooden shingles nailed to the desk */
#desktop-icons {
  position: absolute; bottom: 60px; left: 26px;
  display: flex; flex-direction: column-reverse; gap: 14px;
  z-index: 5;
}
.desk-icon {
  width: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: none;
  color: var(--ink);
  font-size: 10px; letter-spacing: 0.06em;
  opacity: 0.9;
  transition: opacity 0.15s;
}
.desk-icon:hover { opacity: 1; }
.desk-icon:hover .desk-icon-glyph {
  box-shadow: inset 0 1px 1px rgba(226, 186, 130, 0.08), 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(199, 154, 91, 0.18);
}
.desk-icon-glyph {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  position: relative;
  border: 2px solid var(--wood-border);
  border-radius: 3px;
  background: var(--grain-soft), linear-gradient(165deg, var(--board-hi), #1c110a);
  color: var(--dim);
  text-shadow: var(--pressed);
  box-shadow: inset 0 1px 1px rgba(226, 186, 130, 0.05), 0 2px 0 rgba(0, 0, 0, 0.5), 0 6px 12px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.15s;
}
.desk-icon-glyph::after {
  /* the nail it hangs from */
  content: "";
  position: absolute; top: 3px; left: 50%;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--iron), var(--iron-dark) 75%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}
.desk-glyph-critic { color: var(--critic); }
.desk-glyph-muse { color: var(--muse); }
.desk-icon span:last-child { text-shadow: var(--pressed); color: var(--ink); }

/* ---------- windows: heavy handmade boards ---------- */
#windows { position: absolute; inset: 0 0 44px 0; z-index: 10; pointer-events: none; }
#windows > * { pointer-events: auto; }

.win {
  position: absolute;
  display: flex; flex-direction: column;
  min-width: 280px; min-height: 180px;
  max-width: 96vw; max-height: calc(100vh - 60px);
}
.win::before {
  /* the carved groove inside the board's edge */
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 0 rgba(226, 186, 130, 0.04);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}
.win-focused {
  border-color: #33241a;
  box-shadow:
    inset 0 2px 2px rgba(226, 186, 130, 0.07),
    inset 0 -4px 9px rgba(0, 0, 0, 0.55),
    inset 0 0 26px rgba(0, 0, 0, 0.35),
    0 3px 0 rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(142, 47, 37, 0.18),
    0 26px 60px rgba(0, 0, 0, 0.85);
}
.win-opening { animation: win-open 0.25s ease-out; }
@keyframes win-open {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* titlebar: a dark pine strip nailed across the top */
.win-titlebar {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px 0 24px; height: 34px; flex: none;
  background:
    radial-gradient(circle 3px at 9px 50%, var(--iron) 0 1.6px, var(--iron-dark) 2.2px, transparent 3.2px),
    var(--grain-soft),
    linear-gradient(180deg, #1a100a 0%, #140c07 100%);
  border-bottom: 2px solid var(--wood-gap);
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 1px 0 rgba(226, 186, 130, 0.05), 0 2px 4px rgba(0, 0, 0, 0.4);
  font-family: var(--font-serif);
  font-variant: small-caps;
  font-size: 13.5px; letter-spacing: 0.14em;
  color: var(--dim);
  text-shadow: var(--pressed);
  user-select: none;
  touch-action: none;
  position: relative; z-index: 2;
}
.win-focused .win-titlebar { color: var(--ink); }
.win-dot {
  /* the maker's pin: iron by default, sealing wax for the voices */
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--iron), var(--iron-dark) 75%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}
.win-focused .win-dot {
  background: radial-gradient(circle at 35% 30%, #b04a32, #5e1e14 75%);
  box-shadow: 0 0 8px var(--accent-glow), 0 1px 1px rgba(0, 0, 0, 0.7);
}
.win-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.win-spacer { flex: 1; }

/* window controls: a bent nail folds it away, a wax blob seals it shut */
.win-btn {
  width: 20px; height: 20px; flex: none;
  border: none;
  background: none;
  font-size: 0;
  position: relative;
}
.win-btn::before {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 50%;
}
.win-min::before {
  border: 2px solid var(--iron-dark);
  background: transparent;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(226, 186, 130, 0.06);
}
.win-min:hover::before {
  border-color: var(--iron);
  box-shadow: 0 0 6px rgba(199, 154, 91, 0.3);
}
.win-close::before {
  inset: 3px;
  border-radius: 47% 53% 51% 49%;
  background: radial-gradient(circle at 38% 30%, #7e3428, #491710 78%);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(0, 0, 0, 0.5);
}
.win-close:hover::before {
  background: radial-gradient(circle at 38% 30%, #b04a32, #6e2318 78%);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.5), 0 0 9px var(--accent-glow);
}

.win-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  position: relative; z-index: 2;
}

/* ---------- taskbar: the heavy timber rail along the desk's edge ---------- */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 44px;
  z-index: 9000;
  display: flex; align-items: stretch; gap: 7px;
  background:
    var(--grain),
    linear-gradient(180deg, #221510 0%, #170e08 55%, #0f0804 100%);
  border-top: 3px solid var(--wood-gap);
  box-shadow:
    inset 0 2px 2px rgba(226, 186, 130, 0.06),
    inset 0 -6px 12px rgba(0, 0, 0, 0.6),
    0 -10px 30px rgba(0, 0, 0, 0.55);
  padding: 6px 9px;
  font-size: 11px;
}
#taskbar-sigil {
  display: flex; align-items: center; gap: 8px;
  padding: 0 13px;
  border: 2px solid rgba(20, 11, 6, 0.9);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(226, 186, 130, 0.05);
  color: var(--ink);
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: 0.22em; text-indent: 0.1em;
  font-size: 12.5px;
  text-shadow: var(--burned);
}
#taskbar-sigil .sigil-eye { color: var(--accent); font-size: 13px; }
#taskbar-windows { display: flex; gap: 7px; flex: 1; min-width: 0; }
.task-btn {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px;
  max-width: 190px;
  border: 2px solid rgba(20, 11, 6, 0.85);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.14);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  color: var(--dim);
  font-family: var(--font-serif);
  font-variant: small-caps;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-shadow: var(--pressed);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.15s, box-shadow 0.15s, background 0.15s;
}
.task-btn:hover { color: var(--ink); }
.task-active {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(226, 186, 130, 0.05);
  text-shadow: var(--burned);
}
.task-badge {
  min-width: 15px; height: 15px;
  padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 38% 30%, #a8402f, #5e1e14 80%);
  color: #f2e7d5;
  border-radius: 50%;
  font-family: var(--font-type);
  font-size: 9.5px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.task-ping { animation: task-ping 1.6s ease infinite; }
@keyframes task-ping {
  0%, 100% { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 12px var(--accent-glow); }
}
#taskbar-audio {
  padding: 0 12px;
  border: 2px solid rgba(20, 11, 6, 0.85);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.14);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  color: var(--dim);
  letter-spacing: 0.1em;
  font-size: 10.5px;
  text-shadow: var(--pressed);
  transition: color 0.15s;
}
#taskbar-audio:hover { color: var(--ink); }
#taskbar-audio.static-warn {
  color: #c05a44;
  animation: task-ping 1.2s ease infinite;
}

/* the vault: a lump of sealing wax pressed into the rail */
#taskbar-vault {
  width: 38px;
  border: none;
  background: transparent;
  font-size: 0;
  position: relative;
}
#taskbar-vault::before {
  content: "";
  position: absolute; inset: 7px 9px;
  border-radius: 46% 54% 52% 48%;
  background: radial-gradient(circle at 36% 28%, #7e3428, #491710 78%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(0, 0, 0, 0.55);
  transition: box-shadow 0.2s, background 0.2s;
}
#taskbar-vault::after {
  /* the impression of a key stamped in the wax */
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 1px rgba(226, 186, 130, 0.15);
}
#taskbar-vault:hover::before {
  background: radial-gradient(circle at 36% 28%, #a8402f, #5e1e14 78%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.55), 0 0 12px var(--accent-glow);
}
#taskbar-vault.vault-lit::before {
  background: radial-gradient(circle at 36% 28%, #b04a32, #6e2318 78%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.5), 0 0 14px rgba(199, 154, 91, 0.5);
}
#taskbar-clock {
  display: flex; align-items: center;
  padding: 0 13px;
  border: 2px solid rgba(20, 11, 6, 0.9);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
  color: var(--burn);
  letter-spacing: 0.2em;
  text-shadow: var(--burned);
}

/* ---------- voice windows ---------- */
.chat-body { background: transparent; }

[data-win-id="critic"] .win-dot {
  background: radial-gradient(circle at 35% 30%, #a8a396, #57534a 78%);
}
[data-win-id="muse"] .win-dot {
  background: radial-gradient(circle at 35% 30%, #c07460, #6e3626 78%);
}
[data-win-id="critic"].win-focused .win-dot { box-shadow: 0 0 8px var(--critic-glow), 0 1px 1px rgba(0, 0, 0, 0.7); }
[data-win-id="muse"].win-focused .win-dot { box-shadow: 0 0 8px var(--muse-glow), 0 1px 1px rgba(0, 0, 0, 0.7); }

/* the speaking board glows like a lantern behind wood */
.win-glow-critic {
  border-color: #3d372e !important;
  animation: glow-critic 1.6s ease-in-out infinite;
}
@keyframes glow-critic {
  0%, 100% { box-shadow: inset 0 2px 2px rgba(226,186,130,0.05), inset 0 -4px 9px rgba(0,0,0,0.55), 0 3px 0 rgba(0,0,0,0.55), 0 0 0 1px rgba(155, 150, 137, 0.18), 0 0 20px rgba(155, 150, 137, 0.1), 0 22px 50px rgba(0, 0, 0, 0.8); }
  50% { box-shadow: inset 0 2px 2px rgba(226,186,130,0.05), inset 0 -4px 9px rgba(0,0,0,0.55), 0 3px 0 rgba(0,0,0,0.55), 0 0 0 1px rgba(155, 150, 137, 0.42), 0 0 38px rgba(155, 150, 137, 0.22), 0 22px 50px rgba(0, 0, 0, 0.8); }
}
.win-glow-muse {
  border-color: #40261c !important;
  animation: glow-muse 1.6s ease-in-out infinite;
}
@keyframes glow-muse {
  0%, 100% { box-shadow: inset 0 2px 2px rgba(226,186,130,0.05), inset 0 -4px 9px rgba(0,0,0,0.55), 0 3px 0 rgba(0,0,0,0.55), 0 0 0 1px rgba(176, 100, 82, 0.2), 0 0 20px rgba(176, 100, 82, 0.12), 0 22px 50px rgba(0, 0, 0, 0.8); }
  50% { box-shadow: inset 0 2px 2px rgba(226,186,130,0.05), inset 0 -4px 9px rgba(0,0,0,0.55), 0 3px 0 rgba(0,0,0,0.55), 0 0 0 1px rgba(176, 100, 82, 0.48), 0 0 38px rgba(176, 100, 82, 0.26), 0 22px 50px rgba(0, 0, 0, 0.8); }
}

.chat-feed {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 14px 14px;
  display: flex; flex-direction: column; gap: 11px;
}
/* dialogue is ink soaked straight into the wood — no boxes */
.chat-msg {
  max-width: 94%;
  padding: 0;
  font-size: 13px; line-height: 1.75;
  animation: msg-in 0.35s ease-out;
  text-shadow: var(--pressed);
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg-critic { align-self: flex-start; color: #c6beae; }
.chat-msg-muse {
  align-self: flex-start;
  color: #d8b0a0;
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
}
.chat-msg-you {
  align-self: flex-end;
  text-align: right;
  color: var(--dim);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
}
.chat-msg-you::before { content: "— "; }
.chat-typing { color: var(--dim); letter-spacing: 0.3em; }
.chat-input-row {
  display: flex; flex: none;
  align-items: center;
  margin: 0 14px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 0 rgba(226, 186, 130, 0.06); /* a groove scored into the board */
}
.chat-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 2px;
  font-size: 13px;
  color: var(--ink);
  text-shadow: var(--pressed);
}
.chat-input::placeholder { color: #5c503f; font-family: var(--font-serif); font-style: italic; }
.chat-send {
  width: 34px;
  background: transparent;
  border: none;
  color: var(--dim); font-size: 16px;
  font-family: var(--font-serif);
  text-shadow: var(--pressed);
}
.chat-send:hover { color: var(--accent); }

/* ---------- the manuscript: paper nailed to a board ---------- */
.editor-body { background: transparent; }
.manuscript {
  flex: 1; min-height: 0;
  resize: none;
  background: rgba(8, 4, 2, 0.32);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
  border: none;
  border-radius: 2px;
  margin: 10px 12px 0;
  padding: 22px 26px;
  font-family: var(--font-type);
  font-size: 15.5px; line-height: 2;
  color: #ddd0bc;
  caret-color: var(--accent);
  text-shadow: var(--pressed);
}
.manuscript::placeholder { color: #5a4d3c; font-style: italic; font-family: var(--font-serif); }
.manuscript-locked { opacity: 0.55; transition: opacity 0.1s; }
.manuscript-possessed {
  color: #e6d3b4;
  caret-color: var(--candle);
  animation: possessed-breath 1.8s ease-in-out infinite;
}
@keyframes possessed-breath {
  0%, 100% { text-shadow: 0 0 6px rgba(199, 154, 91, 0.12), var(--pressed); }
  50% { text-shadow: 0 0 12px rgba(199, 154, 91, 0.28), var(--pressed); }
}
.editor-status {
  flex: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 18px 9px;
  font-size: 10px; letter-spacing: 0.15em;
  color: var(--dim);
  text-shadow: var(--pressed);
  background: transparent;
}
.editor-status-flash { animation: status-flash 0.5s ease; }
@keyframes status-flash {
  0% { background: var(--accent); color: #f2e7d5; }
  100% { background: transparent; color: var(--dim); }
}
.editor-status-flash .editor-rule { color: inherit; }
.editor-reading {
  font-family: var(--font-serif); font-style: italic;
  color: var(--candle);
  animation: ink-bleed 2s ease-in-out infinite;
}

/* ---------- OBSCURA: the archive drawer ---------- */
.browser-body { background: transparent; }
.browser-chrome {
  flex: none;
  display: flex; gap: 10px; align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(226, 186, 130, 0.05);
}
.browser-nav {
  width: 28px; height: 28px;
  border: none;
  background: transparent; color: var(--dim);
  font-size: 15px;
  text-shadow: var(--pressed);
}
.browser-nav:disabled { opacity: 0.35; }
.browser-address-row { flex: 1; display: flex; }
.browser-address {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 0 rgba(226, 186, 130, 0.06);
  padding: 6px 2px;
  font-size: 12.5px;
  color: var(--ink);
  text-shadow: var(--pressed);
}
.browser-address::placeholder { color: #5c503f; font-family: var(--font-serif); font-style: italic; }
.browser-address:focus { border-bottom-color: var(--burn); }
.browser-page {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 22px 28px;
  font-size: 13px; line-height: 1.7;
}
.browser-home {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
}
.browser-logo {
  font-family: var(--font-serif);
  font-size: 42px; letter-spacing: 0.35em; text-indent: 0.35em;
  color: var(--ink);
  text-shadow: var(--burned);
}
.browser-tagline { font-size: 10.5px; color: var(--dim); letter-spacing: 0.12em; text-shadow: var(--pressed); }
.browser-loading { color: var(--burn); font-size: 12px; text-shadow: var(--burned); }

.wiki { max-width: 56ch; }
.wiki-title {
  font-family: var(--font-serif);
  font-size: 27px;
  color: #e2d7c4;
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(226, 186, 130, 0.05);
  padding-bottom: 6px; margin-bottom: 4px;
  text-shadow: var(--burned);
}
.wiki-meta { font-size: 10px; color: var(--dim); margin-bottom: 16px; text-shadow: var(--pressed); }
.wiki p { margin-bottom: 12px; color: #c3b6a2; font-family: var(--font-serif); font-size: 15px; text-shadow: var(--pressed); }
.wiki i { color: #d3c4ac; }
.artifact-body hr {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 0 rgba(226, 186, 130, 0.05);
  margin: 14px 0;
}
.artifact-body h3 {
  font-family: var(--font-serif);
  font-size: 17px;
  color: #d3c4ac;
  margin: 14px 0 6px;
  text-shadow: var(--burned);
}
.artifact-body small { color: var(--dim); }
.artifact-forum .artifact-body blockquote {
  border-left: 3px solid var(--wood-border);
  margin: 12px 0;
  padding: 4px 12px;
  font-family: var(--font-type);
  font-size: 12.5px;
  color: #c6beae;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35);
}
.artifact-news .artifact-body > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 2.6em;
  float: left;
  line-height: 0.85;
  padding-right: 6px;
  color: #e2d7c4;
}
.wiki-notice {
  margin-top: 18px;
  border: 2px solid rgba(20, 11, 6, 0.85);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35);
  padding: 8px 12px;
  font-size: 11px; color: var(--dim);
  text-shadow: var(--pressed);
}

/* ---------- pictures/: plates in a wooden tray ---------- */
.gallery-body { background: transparent; }
.gallery-empty {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: var(--dim);
  font-family: var(--font-serif); font-style: italic;
  font-size: 13px; letter-spacing: 0.12em; line-height: 2;
  text-shadow: var(--pressed);
}
.gallery-grid {
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  padding: 14px;
  align-content: start;
}
.gallery-item {
  border: 2px solid var(--wood-border);
  border-radius: 2px;
  background: #0d0703;
  cursor: pointer;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 0 rgba(0, 0, 0, 0.45), 0 6px 14px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.15s, transform 0.15s;
  animation: msg-in 0.3s ease-out;
}
.gallery-item:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 3px 0 rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(199, 154, 91, 0.12);
}
.gallery-item img {
  width: 100%; aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  filter: sepia(0.25) contrast(1.04) brightness(0.96);
}
.gallery-item figcaption {
  padding: 5px 7px;
  font-size: 9px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  text-shadow: var(--pressed);
}

/* ---------- the vault modal ---------- */
#vault-modal {
  position: fixed; inset: 0; z-index: 9700;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 2, 1, 0.78);
  backdrop-filter: blur(2px);
  animation: fade-in 0.2s ease both;
}
.vault-card {
  width: min(430px, 88vw);
  padding: 1.7rem 1.6rem 1.4rem;
  position: relative;
}
.vault-card::before {
  content: "";
  position: absolute; inset: 7px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(226, 186, 130, 0.05);
  border-radius: 2px;
  pointer-events: none;
}
.vault-head {
  font-family: var(--font-serif);
  font-variant: small-caps;
  text-align: center;
  font-size: 17px; letter-spacing: 0.3em; text-indent: 0.3em;
  color: var(--burn);
  text-shadow: var(--burned);
  margin-bottom: 12px;
}
.vault-text {
  font-family: var(--font-serif);
  font-size: 14px; line-height: 1.65;
  color: #c3b6a2;
  margin-bottom: 10px;
  text-shadow: var(--pressed);
}
.vault-fine { font-size: 12px; font-style: italic; color: var(--dim); }
.vault-input {
  width: 100%;
  margin: 6px 0 14px;
  background: rgba(6, 3, 1, 0.6);
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(226, 186, 130, 0.05);
  border-radius: 2px;
  padding: 9px 11px;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.vault-input:focus { border-bottom-color: var(--burn); }
.vault-row { display: flex; gap: 8px; justify-content: center; }
.vault-btn {
  padding: 8px 16px;
  border: 2px solid var(--wood-border);
  border-radius: 3px;
  background: var(--grain-soft), linear-gradient(180deg, #2a1a10, #1c110a);
  color: var(--dim);
  font-size: 10.5px; letter-spacing: 0.2em; text-indent: 0.1em;
  text-shadow: var(--pressed);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  transition: color 0.2s, box-shadow 0.2s, transform 0.1s;
}
.vault-btn:hover { color: var(--ink); }
.vault-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55); }
.vault-save:hover { color: #f2e7d5; box-shadow: 0 0 16px var(--accent-glow), 0 2px 0 rgba(0, 0, 0, 0.5); }

/* ---------- thin-air states ---------- */
.static-toast {
  position: fixed;
  left: 50%; bottom: 68px;
  transform: translateX(-50%);
  z-index: 9600;
  padding: 11px 24px;
  border: 2px solid var(--wood-border);
  border-radius: 3px;
  background: var(--grain-soft), linear-gradient(180deg, #241710, #180e08);
  font-family: var(--font-serif); font-style: italic;
  font-size: 13.5px;
  color: #c3b6a2;
  text-shadow: var(--pressed);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 14px 40px rgba(0, 0, 0, 0.7);
  animation: toast-in 6s ease both;
}
@keyframes toast-in {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  8%, 82% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

.ink-bleed {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--dim);
  animation: ink-bleed 2.4s ease-in-out infinite;
}
@keyframes ink-bleed {
  0%, 100% { opacity: 0.35; letter-spacing: 0.02em; }
  50% { opacity: 0.85; letter-spacing: 0.06em; text-shadow: 0 0 10px rgba(199, 154, 91, 0.25); }
}

/* ---------- the grand collapse ---------- */
.win-dying { animation: win-die 0.75s ease-in both; }
@keyframes win-die {
  0% { transform: none; opacity: 1; filter: none; }
  30% { transform: translate(-4px, 2px) rotate(-0.6deg); }
  55% { transform: translate(5px, -2px) rotate(0.8deg); opacity: 0.9; }
  100% { transform: translate(-2px, 26px) rotate(-1.6deg) scale(0.96); opacity: 0; filter: brightness(0.4); }
}

#collapse-shroud {
  position: fixed; inset: 0; z-index: 9998;
  background:
    radial-gradient(70% 60% at 50% 54%, rgba(3, 1, 0, 0.72) 0%, rgba(3, 1, 0, 0.4) 52%, transparent 100%),
    url('/static/assets/finale.jpg') center 44% / cover no-repeat,
    #000;
  opacity: 0;
  transition: opacity 3.4s ease-in;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
}
#collapse-shroud.shroud-on { opacity: 1; }

.finale-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 32px);
  color: #cbb7a0;
  text-align: center;
  max-width: 30ch;
  line-height: 1.6;
  animation: finale-line-in 2.8s ease both;
  text-shadow: 0 0 26px rgba(199, 154, 91, 0.14);
}
@keyframes finale-line-in {
  from { opacity: 0; letter-spacing: 0.12em; }
  to { opacity: 1; letter-spacing: 0.02em; }
}
.finale-line-gone { transition: opacity 1.3s ease; opacity: 0 !important; }

.finale-card {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  animation: fade-in 2.2s ease both;
  text-align: center;
}
.finale-sigil {
  font-size: 34px;
  color: var(--accent);
  text-shadow: 0 0 26px var(--accent-glow);
  animation: gate-pulse 4s ease-in-out infinite;
}
.finale-title {
  font-family: var(--font-serif);
  font-size: 30px; letter-spacing: 0.5em; text-indent: 0.5em;
  color: var(--ink);
}
.finale-sub {
  font-family: var(--font-serif); font-style: italic;
  font-size: 13.5px; color: var(--dim);
  margin-bottom: 22px;
}
#export-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 1rem 2.3rem;
  border: 3px solid var(--wood-border);
  border-radius: 3px;
  background: var(--grain-soft), linear-gradient(180deg, #2a1a10, #180e08);
  color: var(--ink);
  font-size: 13px; letter-spacing: 0.28em; text-indent: 0.1em;
  text-shadow: var(--pressed);
  box-shadow: inset 0 1px 1px rgba(226, 186, 130, 0.06), 0 4px 0 rgba(0, 0, 0, 0.55), 0 12px 32px rgba(0, 0, 0, 0.6);
  transition: color 0.25s, box-shadow 0.25s, transform 0.1s;
}
#export-btn:hover {
  color: #f2e7d5;
  box-shadow: inset 0 1px 1px rgba(226, 186, 130, 0.06), 0 0 26px var(--accent-glow), 0 4px 0 rgba(0, 0, 0, 0.55);
}
#export-btn:active { transform: translateY(2px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6); }
.export-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 47% 53% 51% 49%;
  background: radial-gradient(circle at 35% 28%, #a8402f, #5e1e14 75%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.55), 0 0 12px var(--accent-glow);
  font-size: 14px;
  color: #f2e7d5;
}
#again-btn {
  margin-top: 10px;
  background: none; border: none;
  color: var(--dim);
  font-family: var(--font-serif); font-style: italic;
  font-size: 12.5px;
  text-decoration: underline dotted;
  text-shadow: var(--pressed);
}
#again-btn:hover { color: var(--ink); }

/* ---------- lightbox: a plate held up to the candle ---------- */
#lightbox {
  position: fixed; inset: 0; z-index: 9800;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 2, 1, 0.88);
  backdrop-filter: blur(2px);
  animation: fade-in 0.18s ease both;
}
.lightbox-frame {
  max-width: min(860px, 90vw);
}
.lightbox-frame img {
  display: block;
  max-width: 100%; max-height: 74vh;
  border-radius: 2px 2px 0 0;
  filter: sepia(0.2) contrast(1.05) brightness(0.97);
}
.lightbox-frame figcaption {
  padding: 10px 13px;
  font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--dim);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  text-shadow: var(--pressed);
}