/* ============================================================
   Verb Collector — atmospheric redesign
   --------------------------------------------------------------
   The world outside the manuscript is a midnight scriptorium.
   The manuscript itself is candlelit vellum: yellower, browner,
   uneven, with a warm glow at the upper-left corner where the
   candle sits. Major headings are chiseled small-caps; body is
   manuscript serif; stats are scribe's typewriter.
   ============================================================ */

:root {
  /* Vellum — yellower and more varied than the old cream */
  --vellum:        #e9d9b0;
  --vellum-soft:   #ddc996;
  --vellum-deep:   #c7ad7c;
  --vellum-shadow: #9c8758;

  /* Ink — warm sepia black, not pure */
  --ink:           #1a140a;
  --ink-soft:      #4a3c25;
  --ink-faint:     #80694a;

  /* Rules and gilt */
  --rule:          #a4895a;
  --rule-soft:     #cdb787;
  --gilt:          #b9893a;

  /* Wax / accent — deeper, more dramatic burgundy */
  --wax:           #781421;
  --wax-bright:    #a72131;
  --wax-dark:      #4a0b14;

  /* Tolkien storybook palette — forest, sky, gold leaf.
     These augment (not replace) the vellum/ink/wax world above. */
  --moss:          #5d6f3e;
  --moss-deep:     #2a341e;
  --moss-soft:     #8a9466;
  --sky:           #6e7d8a;
  --sky-deep:      #3a4a5a;
  --sky-soft:      #a8b8c4;
  --gold-leaf:     #c8932e;
  --gold-leaf-soft: #f4d28a;
  --blood:         #5a1018;       /* oxblood — darker alt to wax */
  --rust:          #9a4a1c;       /* burnt umber */
  --dawn:          #f0c080;       /* dawn / illuminated highlight */

  /* Outside the page — midnight scriptorium */
  --night:         #0e0a12;
  --night-mid:     #1a1320;
  --night-warm:    #2a1b16;
  --candle:        #f6c980;
  --candle-deep:   #c98742;

  --bg-card:       #f0debb;
  --bg-card-disabled: #b8a47e;
  --shadow:        rgba(20, 12, 4, 0.45);
  --shadow-soft:   rgba(20, 12, 4, 0.22);

  --font-display:  'Cinzel', 'IM Fell English', 'Georgia', serif;
  --font-script:   'IM Fell English', 'Georgia', serif;
  --font-smallcap: 'IM Fell English SC', 'Cinzel', 'Georgia', serif;
  --font-blackletter: 'UnifrakturCook', 'Pirata One', 'IM Fell English', serif;
  --font-body:     'Special Elite', 'Courier New', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  padding: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
}

/* ----------------------------------------------------------------
   The world outside the page — a dark scriptorium with a single
   candle in the upper-left and a faint smoke-warm haze.
---------------------------------------------------------------- */
body {
  position: relative;
  padding: 22px;
  background:
    /* candle warmth from upper left */
    radial-gradient(ellipse 60% 50% at 12% 8%, rgba(246, 201, 128, 0.18), transparent 65%),
    /* deeper warm pool lower right */
    radial-gradient(ellipse 70% 60% at 88% 90%, rgba(42, 27, 22, 0.55), transparent 70%),
    /* base midnight */
    linear-gradient(180deg, #0e0a12 0%, #14101a 60%, #0a0710 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

/* faint floating motes / smoke noise above the dark */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.45  0 0 0 0 0.28  0 0 0 0.18 0'/></filter><rect width='420' height='420' filter='url(%23n)'/></svg>");
  background-size: 420px 420px;
}

/* subtle candle flicker dot — anchored top-left of viewport, atmospheric */
body::after {
  content: '';
  position: fixed;
  top: 2vh;
  left: 3vw;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(246, 201, 128, 0.45) 0%, rgba(246, 201, 128, 0.18) 30%, transparent 70%);
  filter: blur(8px);
  animation: candle-flicker 5.3s ease-in-out infinite;
}

@keyframes candle-flicker {
  0%, 100% { opacity: 0.78; transform: scale(1) translateY(0); }
  18%      { opacity: 0.95; transform: scale(1.04) translateY(-2px); }
  31%      { opacity: 0.62; transform: scale(0.96) translateY(1px); }
  47%      { opacity: 0.88; transform: scale(1.02) translateY(-1px); }
  68%      { opacity: 0.72; transform: scale(0.98) translateY(0); }
  82%      { opacity: 0.92; transform: scale(1.03) translateY(-1px); }
}

/* ----------------------------------------------------------------
   The manuscript page — glowing vellum on the dark.
---------------------------------------------------------------- */
.app {
  max-width: 1020px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  padding: 38px 44px 44px;
  z-index: 1;
  color: var(--ink);
  background:
    /* candle warmth on the page from upper left */
    radial-gradient(ellipse 70% 55% at 18% 10%, rgba(255, 215, 145, 0.42), transparent 65%),
    /* page edge darkening */
    radial-gradient(ellipse 92% 92% at 50% 50%, transparent 58%, rgba(60, 40, 14, 0.32) 100%),
    /* vellum tint variations */
    radial-gradient(ellipse 40% 30% at 70% 80%, rgba(168, 130, 78, 0.18), transparent 60%),
    radial-gradient(ellipse 35% 25% at 85% 25%, rgba(120, 92, 50, 0.16), transparent 65%),
    linear-gradient(160deg, var(--vellum) 0%, var(--vellum-soft) 70%, var(--vellum-deep) 100%);
  box-shadow:
    0 0 60px 6px rgba(246, 201, 128, 0.18), /* page glow */
    0 30px 80px rgba(0, 0, 0, 0.65),
    0 8px 24px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(60, 40, 14, 0.45),
    inset 0 0 0 6px var(--vellum-soft),
    inset 0 0 0 7px rgba(60, 40, 14, 0.35),
    inset 0 0 90px rgba(80, 50, 16, 0.22);
}

/* Heavy paper grain on top of the vellum */
.app::before {
  content: '';
  position: absolute;
  inset: 8px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.09  0 0 0 0 0.05  0 0 0 0.55 0'/></filter><rect width='320' height='320' filter='url(%23g)'/></svg>");
  background-size: 320px 320px;
}

/* Watermark of a faint sentence behind everything */
.app::after {
  content: 'verbum est gladius — a sentence is a sword';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  text-align: center;
  font-family: var(--font-script);
  font-style: italic;
  font-size: 2.4rem;
  letter-spacing: 6px;
  color: rgba(60, 40, 14, 0.08);
  pointer-events: none;
  z-index: 0;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}

.app > * { position: relative; z-index: 1; }

/* Decorative corner brackets — drawn as SVG, four of them */
.corner {
  position: absolute;
  width: 64px;
  height: 64px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.85;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%234a3c25' stroke-width='1.4' stroke-linecap='round'><path d='M3 30 V14 c0 -6 5 -11 11 -11 H30'/><path d='M9 24 V18 c0 -3 2 -5 5 -5 H22'/><path d='M3 30 c8 0 14 -6 14 -14'/><circle cx='14' cy='14' r='2.2' fill='%234a3c25'/><path d='M30 3 q -6 1 -10 5' stroke-dasharray='1 3'/><path d='M3 30 q 1 -6 5 -10' stroke-dasharray='1 3'/></svg>");
}
.corner.tl { top: 10px; left: 10px; }
.corner.tr { top: 10px; right: 10px; transform: scaleX(-1); }
.corner.bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
.corner.br { bottom: 10px; right: 10px; transform: scale(-1, -1); }

/* ----------------------------------------------------------------
   Run sentence — the chapter heading.
---------------------------------------------------------------- */
.run-sentence {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  border-bottom: 2px double var(--rule);
  padding: 6px 0 22px 0;
  color: var(--ink);
  position: relative;
}
.run-sentence::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 120px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'><path fill='%234a3c25' d='M60 1c-3 0-6 2-7 5-1 2-2 3-3 3-3 0-6-1-9-2l-1-1c-1 0-3 0-4 1l-26 4v1l32-1c1-1 3-2 5-2l4 1c1 0 3 0 4-1 1-2 3-3 5-3h2c2 0 4 1 5 3 1 1 3 1 4 1l4-1c2 0 4 1 5 2l32 1v-1l-26-4c-1-1-3-1-4-1l-1 1c-3 1-6 2-9 2-1 0-2-1-3-3-1-3-3-5-7-5z'/><circle cx='60' cy='7' r='1.6' fill='%237a1a1f'/></svg>");
  pointer-events: none;
}

.run-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 1.5px;
  line-height: 1.4;
  flex: 1;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5), 0 2px 6px rgba(70, 40, 10, 0.18);
  /* The chronicle writes itself in — on first load, and again whenever a new
     scene extends the run sentence (the element is re-keyed in App.tsx). */
  animation: ink-write 1300ms cubic-bezier(0.45, 0, 0.55, 1) both;
}
.run-text .drop {
  font-family: var(--font-blackletter);
  font-size: 3rem;
  float: left;
  line-height: 0.85;
  margin: 4px 10px 0 0;
  padding: 4px 6px 0 0;
  color: var(--wax);
  text-shadow:
    1px 1px 0 rgba(255, 230, 170, 0.55),
    0 3px 6px rgba(0, 0, 0, 0.2);
}
.run-progress {
  font-family: var(--font-smallcap);
  color: var(--ink-soft);
  font-size: 0.78rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--rule);
  padding: 4px 10px;
  background: rgba(255, 240, 200, 0.4);
  box-shadow: inset 0 0 6px rgba(120, 90, 40, 0.15);
}
.run-progress::before { content: '\2767 '; color: var(--wax); margin-right: 4px; }
.run-progress::after  { content: ' \2767'; color: var(--wax); margin-left: 4px; }

/* ----------------------------------------------------------------
   Combat grid layout.
---------------------------------------------------------------- */
.combat {
  display: grid;
  grid-template-areas:
    "scene scene"
    "strip strip"
    "sentence sentence"
    "permanent permanent"
    "hand hand"
    "footer log";
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  position: relative;
}

.scene-panel     { grid-area: scene; }
.stat-strip      { grid-area: strip; }
.log             { grid-area: log; min-height: 0; }
.sentence-area   { grid-area: sentence; }
.permanent-strip { grid-area: permanent; }
.hand            { grid-area: hand; }
.footer          { grid-area: footer; }
.player          { display: none; }
.enemies         { display: none; }

/* ----------------------------------------------------------------
   Portraits — illuminated panels.
---------------------------------------------------------------- */
.portrait {
  position: relative;
  background:
    radial-gradient(ellipse 80% 80% at 50% 0%, rgba(255, 240, 200, 0.5), transparent 70%),
    linear-gradient(165deg, var(--vellum-soft) 0%, var(--vellum-deep) 100%);
  border: 1px solid var(--rule);
  padding: 14px 16px 14px 18px;
  min-width: 240px;
  box-shadow:
    0 2px 6px var(--shadow),
    inset 0 0 0 1px rgba(255, 240, 200, 0.4),
    inset 0 0 14px rgba(80, 50, 16, 0.22);
}
/* tiny corner ornaments on every portrait */
.portrait::before,
.portrait::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%237a1a1f' stroke-width='1.1' stroke-linecap='round'><path d='M1 7 V4 c0 -2 1 -3 3 -3 H7'/><circle cx='4' cy='4' r='1' fill='%237a1a1f'/></svg>");
}
.portrait::before { top: 4px; left: 4px; }
.portrait::after  { top: 4px; right: 4px; transform: scaleX(-1); }

.portrait.enemy {
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  display: flex;
  gap: 14px;
  align-items: center;
}
.portrait.enemy:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow:
    0 6px 14px var(--shadow),
    inset 0 0 0 1px rgba(255, 240, 200, 0.45),
    inset 0 0 14px rgba(80, 50, 16, 0.22);
}
.portrait.enemy.revealed {
  border-color: var(--wax);
  box-shadow:
    0 0 0 1px var(--wax-dark),
    0 6px 14px var(--shadow),
    inset 0 0 0 1px rgba(255, 240, 200, 0.45),
    inset 0 0 14px rgba(120, 50, 30, 0.28);
}

/* Enemy art — an illuminated frame around the icon */
.enemy-art {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  position: relative;
  color: var(--ink);
  padding: 10px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 240, 200, 0.55), transparent 60%),
    linear-gradient(160deg, var(--vellum) 0%, var(--vellum-deep) 100%);
  border: 1px solid var(--ink-soft);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px var(--vellum),
    inset 0 0 0 2px var(--gilt),
    inset 0 0 0 3px var(--vellum-soft),
    inset 0 0 14px rgba(40, 20, 4, 0.32),
    0 2px 4px var(--shadow-soft);
}
.enemy-art::before,
.enemy-art::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23b9893a'><path d='M0 0 L12 0 L12 2 L4 2 L4 4 L2 4 L2 12 L0 12 Z'/></svg>");
}
.enemy-art::before { top: 2px; left: 2px; }
.enemy-art::after  { bottom: 2px; right: 2px; transform: rotate(180deg); }
.enemy-icon {
  margin: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

.reveal-glyph {
  position: absolute;
  top: -8px;
  right: -8px;
  color: var(--vellum);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 200, 160, 0.7), transparent 60%),
    var(--wax);
  border-radius: 50%;
  padding: 4px;
  border: 1px solid var(--wax-dark);
  box-shadow: 0 2px 4px var(--shadow), inset 0 -1px 2px rgba(0,0,0,0.3);
}
.enemy-body { flex: 1 1 auto; min-width: 0; }

.portrait-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
  line-height: 1.1;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.55);
}
.portrait.you .portrait-name {
  color: var(--wax-dark);
}

/* HP bar — quill-stroke style */
.hp-bar {
  position: relative;
  background:
    linear-gradient(to bottom, var(--vellum) 0%, var(--vellum-soft) 100%);
  border: 1px solid var(--ink);
  height: 18px;
  margin: 4px 0;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
}
.hp-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background:
    linear-gradient(180deg, var(--wax-bright) 0%, var(--wax) 50%, var(--wax-dark) 100%);
  transition: width 300ms ease;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,180,160,0.18);
}
.hp-text {
  position: relative;
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--vellum);
  mix-blend-mode: difference;
  line-height: 18px;
  letter-spacing: 1px;
}

.intent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-smallcap);
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
}
.intent svg { color: var(--wax); }

.stats-row {
  display: flex;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 8px;
  flex-wrap: wrap;
}
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid var(--rule);
  background:
    linear-gradient(180deg, rgba(255,240,200,0.6) 0%, rgba(220,195,140,0.5) 100%);
  border-radius: 9999px;
  font-family: var(--font-smallcap);
  font-size: 0.74rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,240,200,0.6), 0 1px 1px var(--shadow-soft);
}
.stat-pill svg { color: var(--wax); }

.adj-tags {
  margin-top: 8px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
/* Wax-seal style tags */
.tag {
  font-family: var(--font-smallcap);
  border: 1px solid var(--wax-dark);
  padding: 2px 10px;
  font-size: 0.72rem;
  letter-spacing: 2px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 200, 170, 0.55), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(0, 0, 0, 0.25), transparent 60%),
    linear-gradient(180deg, var(--wax-bright) 0%, var(--wax) 60%, var(--wax-dark) 100%);
  color: var(--vellum);
  border-radius: 9999px;
  text-transform: uppercase;
  font-weight: bold;
  box-shadow: 0 2px 3px var(--shadow), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,200,170,0.3);
}

/* ----------------------------------------------------------------
   Sentence bar — the scribe's working line.
---------------------------------------------------------------- */
.sentence-area { display: flex; flex-direction: column; gap: 8px; position: relative; }
.sentence-area::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -8px;
  right: -8px;
  bottom: -6px;
  pointer-events: none;
  border: 1px solid transparent;
  background-image:
    linear-gradient(90deg, transparent 0%, var(--rule) 12%, var(--rule) 88%, transparent 100%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 0, 0 100%;
}
.sentence-area::after {
  content: '';
  position: absolute;
  top: -6px;
  left: -8px;
  right: -8px;
  bottom: -6px;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, transparent 0%, var(--rule) 12%, var(--rule) 88%, transparent 100%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

.sentence-bar {
  padding: 18px 14px 18px 36px;
  min-height: 64px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  background:
    /* red rubrication margin line */
    linear-gradient(
      to right,
      transparent 0,
      transparent 20px,
      var(--wax) 20px,
      var(--wax) 21px,
      transparent 21px
    ),
    /* faint horizontal scribe-rule lines */
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 22px,
      rgba(122, 90, 40, 0.18) 22px,
      rgba(122, 90, 40, 0.18) 23px
    );
}
.placeholder {
  color: var(--ink-faint);
  letter-spacing: 2px;
  font-style: italic;
  font-family: var(--font-script);
  font-size: 1.1rem;
}
.token {
  position: relative;
  font-family: var(--font-body);
  font-size: 1.05rem;
  background:
    linear-gradient(180deg, var(--vellum) 0%, var(--vellum-soft) 100%);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 7px 14px;
  cursor: pointer;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 0 2px 3px var(--shadow-soft), inset 0 1px 0 rgba(255,240,200,0.5);
  transition: transform 100ms ease, background 100ms ease, box-shadow 100ms ease;
  /* Each freshly-tapped word is inked onto the page left-to-right. Because
     React keeps existing token nodes mounted (keys are positional), only the
     newly appended token runs this on mount. */
  animation: ink-write 420ms cubic-bezier(0.5, 0, 0.5, 1) both;
}
/* The wet nib: a dark ink edge that rides the reveal as the word is written,
   then lifts off the page. */
.token::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 6px;
  height: calc(100% + 6px);
  pointer-events: none;
  border-radius: 60% 60% 50% 50%;
  background: radial-gradient(ellipse at 50% 30%, rgba(26, 20, 10, 0.85), rgba(26, 20, 10, 0.15) 70%, transparent);
  filter: blur(1px);
  animation: nib-travel 420ms cubic-bezier(0.5, 0, 0.5, 1) both;
}
.token:hover {
  background: linear-gradient(180deg, var(--vellum) 0%, var(--vellum) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px var(--shadow-soft), inset 0 1px 0 rgba(255,240,200,0.7);
}

/* Handwriting: ink laid down left-to-right, wet then settling sharp/dark.
   Extra bottom room in the clip avoids shearing descenders mid-stroke. */
@keyframes ink-write {
  0%   { clip-path: inset(0 100% -20% 0); filter: blur(0.8px); opacity: 0.3; }
  55%  { filter: blur(0.3px); opacity: 1; }
  100% { clip-path: inset(0 0 -20% 0); filter: blur(0); opacity: 1; }
}
/* The nib rides the writing edge and lifts away at the end. */
@keyframes nib-travel {
  0%   { left: 0;          opacity: 0; }
  12%  { opacity: 0.9; }
  85%  { opacity: 0.9; }
  100% { left: calc(100% - 6px); opacity: 0; }
}
.preview {
  font-size: 0.9rem;
  color: var(--ink-soft);
  letter-spacing: 0.5px;
  min-height: 1.2em;
  padding: 0 4px 0 36px;
  font-family: var(--font-script);
  font-style: italic;
}
/* The live prediction re-inks whenever the composed sentence changes
   (the inner span is re-keyed on its text in CombatScreen). */
.preview-ink {
  display: inline-block;
  animation: ink-fade 260ms ease-out both;
}
@keyframes ink-fade {
  0%   { opacity: 0; filter: blur(1.2px); transform: translateY(1px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* Respect reduced-motion: drop the handwriting + candle animations and just
   show the finished ink. */
@media (prefers-reduced-motion: reduce) {
  .token,
  .run-text,
  .preview-ink { animation: none !important; }
  .token::after { display: none !important; }
  body::after { animation: none !important; }
}
.sentence-actions {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  align-items: center;
  padding: 4px 4px 4px 0;
}
.sentence-actions button {
  font-family: var(--font-smallcap);
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 8px 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.sentence-actions button:hover:not(:disabled) {
  background: var(--vellum);
  color: var(--wax-dark);
}
.sentence-actions button:disabled {
  color: var(--ink-faint);
  border-color: var(--rule-soft);
  cursor: not-allowed;
  opacity: 0.5;
}

/* ----------------------------------------------------------------
   The wax seal — the cast & end turn button.
---------------------------------------------------------------- */
.sentence-actions .primary {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: none;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--vellum);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: 0.7rem;
  line-height: 1.15;
  cursor: pointer;
  /* irregular seal edge via clip-path-ish: use border-radius variation */
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 210, 180, 0.55), transparent 45%),
    radial-gradient(circle at 70% 75%, rgba(0, 0, 0, 0.4), transparent 55%),
    radial-gradient(ellipse at 50% 50%, var(--wax-bright) 0%, var(--wax) 50%, var(--wax-dark) 100%);
  box-shadow:
    0 6px 10px rgba(40, 0, 4, 0.55),
    0 2px 3px rgba(0,0,0,0.4),
    inset 0 -4px 8px rgba(0,0,0,0.45),
    inset 0 4px 8px rgba(255, 200, 170, 0.32),
    inset 0 0 0 2px rgba(60, 8, 14, 0.5);
  transition: transform 140ms cubic-bezier(.2,.7,.2,1.1), box-shadow 140ms ease, filter 140ms ease;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.45), 0 1px 0 rgba(255,200,170,0.18);
  /* the irregular seal silhouette */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 2 C58 2 60 8 67 9 C74 10 80 6 85 11 C90 16 87 23 91 28 C95 33 99 36 98 44 C97 52 91 54 92 62 C93 70 99 74 94 80 C89 86 82 84 76 88 C70 92 70 98 62 98 C54 98 52 93 44 93 C36 93 32 99 26 95 C20 91 22 84 17 80 C12 76 4 76 4 68 C4 60 9 58 8 50 C7 42 1 39 5 32 C9 25 16 27 21 22 C26 17 24 9 32 6 C40 3 42 2 50 2 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 2 C58 2 60 8 67 9 C74 10 80 6 85 11 C90 16 87 23 91 28 C95 33 99 36 98 44 C97 52 91 54 92 62 C93 70 99 74 94 80 C89 86 82 84 76 88 C70 92 70 98 62 98 C54 98 52 93 44 93 C36 93 32 99 26 95 C20 91 22 84 17 80 C12 76 4 76 4 68 C4 60 9 58 8 50 C7 42 1 39 5 32 C9 25 16 27 21 22 C26 17 24 9 32 6 C40 3 42 2 50 2 Z' fill='black'/></svg>");
  mask-size: 100% 100%;
}
.sentence-actions .primary::before {
  /* inner sigil — quill crossed lines */
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.42);
  background:
    radial-gradient(circle at 50% 50%, transparent 30%, rgba(0,0,0,0.18) 70%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 200, 170, 0.18),
    inset 0 0 12px rgba(0,0,0,0.4);
  pointer-events: none;
}
.sentence-actions .primary::after {
  /* sigil mark — a quill cross */
  content: '';
  position: absolute;
  inset: 18px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center 14px;
  background-size: 56px 56px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' fill='none' stroke='%23f2dbb0' stroke-width='1.3' stroke-linecap='round' opacity='0.85'><path d='M28 4 V52'/><path d='M14 18 L42 38'/><path d='M42 18 L14 38'/><path d='M28 4 q -3 6 0 12 q 3 -6 0 -12 Z' fill='%23f2dbb0'/><circle cx='28' cy='42' r='3' fill='%23f2dbb0'/></svg>");
  opacity: 0.9;
}
.sentence-actions .primary span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.55), 0 1px 0 rgba(255,200,170,0.22);
}
.sentence-actions .primary:hover:not(:disabled) {
  transform: translateY(-2px) rotate(-1deg);
  filter: brightness(1.05);
  box-shadow:
    0 10px 18px rgba(40, 0, 4, 0.65),
    0 4px 6px rgba(0,0,0,0.5),
    inset 0 -4px 8px rgba(0,0,0,0.45),
    inset 0 4px 8px rgba(255, 200, 170, 0.45),
    inset 0 0 0 2px rgba(60, 8, 14, 0.5);
}
.sentence-actions .primary:active:not(:disabled) {
  transform: translateY(2px) scale(0.98);
  box-shadow:
    0 2px 4px rgba(40, 0, 4, 0.5),
    inset 0 -2px 6px rgba(0,0,0,0.5),
    inset 0 2px 4px rgba(255, 200, 170, 0.2),
    inset 0 0 0 2px rgba(60, 8, 14, 0.5);
  filter: brightness(0.95);
}
.sentence-actions .primary:disabled {
  background:
    radial-gradient(ellipse at 50% 50%, #847058 0%, #5a4b38 100%);
  color: rgba(255, 240, 200, 0.55);
  cursor: not-allowed;
  filter: grayscale(0.45);
  opacity: 0.7;
  animation: none;
}

/* When the seal is armed (sentence composed, not yet cast), give it a
   slow breathing glow so the eye is gently drawn to the action. */
.sentence-actions .primary:not(:disabled) {
  animation: seal-breathe 3.4s ease-in-out infinite;
}
@keyframes seal-breathe {
  0%, 100% {
    box-shadow:
      0 6px 10px rgba(40, 0, 4, 0.55),
      0 2px 3px rgba(0, 0, 0, 0.4),
      inset 0 -4px 8px rgba(0, 0, 0, 0.45),
      inset 0 4px 8px rgba(255, 200, 170, 0.32),
      inset 0 0 0 2px rgba(60, 8, 14, 0.5);
  }
  50% {
    box-shadow:
      0 6px 14px rgba(160, 30, 40, 0.55),
      0 2px 3px rgba(0, 0, 0, 0.4),
      inset 0 -4px 8px rgba(0, 0, 0, 0.45),
      inset 0 4px 10px rgba(255, 200, 170, 0.45),
      inset 0 0 0 2px rgba(60, 8, 14, 0.5);
  }
}
.sentence-actions .primary:hover:not(:disabled),
.sentence-actions .primary:active:not(:disabled) {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .sentence-actions .primary:not(:disabled) { animation: none; }
}

/* ----------------------------------------------------------------
   Permanent noun strip — marginalia.
---------------------------------------------------------------- */
.permanent-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
}
.strip-label {
  font-family: var(--font-smallcap);
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 4px;
}
.strip-label::before { content: '\2767'; color: var(--wax); margin-right: 6px; opacity: 0.7; }
.strip-divider {
  width: 1px;
  height: 22px;
  background: var(--rule);
  margin: 0 8px;
}
.word {
  font-family: var(--font-body);
  border: 1px solid var(--ink-soft);
  background: transparent;
  color: var(--ink-soft);
  padding: 4px 11px;
  font-size: 0.82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 100ms ease, border-color 100ms ease, background 100ms ease;
}
.word:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: rgba(255, 240, 200, 0.45);
}
.word.noun.collected {
  border-style: dashed;
  color: var(--ink);
  border-color: var(--ink);
}
.word.noun.taxed {
  color: var(--wax);
  border-color: var(--wax);
  border-style: dotted;
}
.word.noun.taxed:hover {
  background: rgba(122, 20, 33, 0.1);
}

/* ----------------------------------------------------------------
   Hand of cards — manuscript pages.
---------------------------------------------------------------- */
.hand {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 168px;
  padding: 16px 0 8px;
  justify-content: center;
  perspective: 900px;
}
.card {
  font-family: var(--font-body);
  background:
    radial-gradient(ellipse 70% 35% at 50% 0%, rgba(255, 240, 200, 0.55), transparent 70%),
    radial-gradient(ellipse 40% 20% at 80% 100%, rgba(180, 140, 80, 0.25), transparent 70%),
    linear-gradient(165deg, var(--bg-card) 0%, var(--vellum-soft) 100%);
  border: 1px solid var(--ink);
  width: 156px;
  min-height: 156px;
  padding: 16px 11px 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  box-shadow:
    0 4px 8px var(--shadow),
    0 1px 0 rgba(255, 240, 200, 0.4) inset,
    inset 0 0 0 1px rgba(255, 240, 200, 0.35);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1.08), box-shadow 220ms ease, background 220ms ease;
  transform-origin: center bottom;
}
.card::before {
  /* aged edges — darker corners */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 24px rgba(80, 50, 16, 0.25),
    inset 0 0 0 1px rgba(60, 40, 14, 0.18);
}
.card::after {
  /* corner ornament */
  content: '';
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%237a1a1f' stroke-width='1' stroke-linecap='round'><path d='M1 13 V10 c0 -2 1 -3 3 -3 H7'/><circle cx='4' cy='10' r='0.9' fill='%237a1a1f'/></svg>");
  opacity: 0.7;
}
.hand .card:nth-child(odd)  { transform: translateY(3px)  rotate(-1.4deg); }
.hand .card:nth-child(even) { transform: translateY(0)    rotate(1.4deg); }
.hand .card:nth-child(3n)   { transform: translateY(2px)  rotate(0.6deg); }
.card:hover:not(.disabled) {
  transform: translateY(-14px) rotate(0deg) scale(1.05);
  box-shadow:
    0 14px 26px rgba(0,0,0,0.4),
    0 4px 8px var(--shadow),
    inset 0 0 0 1px rgba(255, 240, 200, 0.5);
  z-index: 2;
}
.card.disabled {
  background:
    linear-gradient(165deg, var(--bg-card-disabled) 0%, #8e7a55 100%);
  color: var(--ink-faint);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.78;
  filter: grayscale(0.35);
}
.card-cost {
  position: absolute;
  top: 6px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 210, 180, 0.55), transparent 50%),
    radial-gradient(circle at 50% 50%, var(--wax) 0%, var(--wax-dark) 100%);
  color: var(--vellum);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  line-height: 1;
  border: 1px solid var(--wax-dark);
  box-shadow: 0 2px 3px var(--shadow-soft), inset 0 -1px 2px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,200,170,0.3);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
}
.card.disabled .card-cost {
  background: linear-gradient(180deg, #847058 0%, #5a4b38 100%);
  border-color: #5a4b38;
}
.card-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 2.5px;
  font-size: 1.08rem;
  text-transform: uppercase;
  padding-right: 36px;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.55);
  line-height: 1.15;
}
.card-desc {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.35;
  margin-top: 2px;
}
.card.adjective {
  background:
    radial-gradient(ellipse 70% 35% at 50% 0%, rgba(255, 240, 200, 0.55), transparent 70%),
    linear-gradient(165deg, #e9d5a8 0%, #d5bd84 100%);
  border-style: dashed;
}
.card.adjective .card-name {
  color: var(--wax-dark);
}
.card.adjective .card-cost {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 230, 200, 0.55), transparent 50%),
    radial-gradient(circle at 50% 50%, #2c241a 0%, #1a140a 100%);
}
.empty-hand {
  color: var(--ink-faint);
  font-style: italic;
  letter-spacing: 1.5px;
  padding: 28px;
  font-family: var(--font-script);
  font-size: 1.05rem;
}

/* ----------------------------------------------------------------
   Footer.
---------------------------------------------------------------- */
.footer {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,200,170,0.4), transparent 55%),
    radial-gradient(circle, var(--wax) 0%, var(--wax-dark) 100%);
  border-radius: 50%;
  margin-top: -9px;
  box-shadow: 0 1px 2px var(--shadow-soft), inset 0 -1px 1px rgba(0,0,0,0.4);
}
.end-turn {
  font-family: var(--font-smallcap);
  background:
    linear-gradient(180deg, var(--vellum) 0%, var(--vellum-deep) 100%);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 10px 24px;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 100ms ease;
  box-shadow: 0 2px 3px var(--shadow-soft), inset 0 1px 0 rgba(255,240,200,0.5);
}
.end-turn:hover {
  background: linear-gradient(180deg, var(--ink) 0%, var(--night-mid) 100%);
  color: var(--vellum);
  border-color: var(--ink);
  transform: translateY(-1px);
}
.piles {
  display: flex;
  gap: 16px;
  color: var(--ink-soft);
  font-family: var(--font-smallcap);
  font-size: 0.82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.pile { display: inline-flex; align-items: center; gap: 5px; }
.pile svg { color: var(--wax); }

/* ----------------------------------------------------------------
   Log — the chronicler's ledger.
---------------------------------------------------------------- */
.log {
  background:
    linear-gradient(165deg, rgba(255, 240, 200, 0.5) 0%, rgba(220, 195, 140, 0.45) 100%);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.6;
  overflow-y: auto;
  max-height: 200px;
  box-shadow:
    inset 0 1px 4px rgba(60, 40, 14, 0.22),
    inset 0 0 0 1px rgba(255, 240, 200, 0.45);
  position: relative;
}
.log::before {
  content: 'CHRONICLE';
  position: absolute;
  top: -10px;
  left: 12px;
  font-family: var(--font-smallcap);
  font-size: 0.7rem;
  letter-spacing: 4px;
  color: var(--ink-soft);
  background: var(--vellum-soft);
  padding: 1px 8px;
  border: 1px solid var(--rule);
}
.log-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding-left: 6px;
  border-left: 1px solid transparent;
}
.log-line + .log-line { margin-top: 3px; }
.log-line:last-child {
  border-left-color: var(--wax);
  border-left-style: dotted;
}
.log-turn {
  color: var(--wax);
  min-width: 32px;
  font-family: var(--font-smallcap);
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  font-weight: bold;
  text-align: center;
  padding: 1px 6px;
  border: 1px solid var(--wax-dark);
  border-radius: 9999px;
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(255, 200, 170, 0.4), transparent 70%),
    rgba(255, 240, 200, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.6), 0 1px 1px var(--shadow-soft);
}
.log-text { color: var(--ink); }

/* ----------------------------------------------------------------
   End-game / reward / run-end.
---------------------------------------------------------------- */
.endgame {
  text-align: center;
  padding: 60px 24px 50px;
  position: relative;
}
.endgame h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 12px;
  font-size: 2.6rem;
  margin: 0 0 16px 0;
  color: var(--ink);
  text-shadow:
    0 1px 0 rgba(255, 240, 200, 0.7),
    0 4px 16px rgba(60, 30, 6, 0.35);
}
.endgame h2::before,
.endgame h2::after {
  content: '\2767';
  color: var(--wax);
  font-size: 1.6rem;
  margin: 0 18px;
  vertical-align: middle;
  letter-spacing: 0;
}
.end-flavor {
  color: var(--ink-soft);
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.15rem;
  margin-bottom: 32px;
  letter-spacing: 0.5px;
}
.endgame .primary {
  position: relative;
  font-family: var(--font-smallcap);
  background:
    linear-gradient(180deg, var(--vellum) 0%, var(--vellum-deep) 100%);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 12px 30px;
  letter-spacing: 4px;
  text-transform: uppercase;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 120ms ease, color 120ms ease, transform 100ms ease,
              box-shadow 120ms ease;
  box-shadow: 0 3px 5px var(--shadow-soft), inset 0 1px 0 rgba(255,240,200,0.5);
}
.endgame .primary:hover {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 180, 140, 0.5), transparent 70%),
    linear-gradient(180deg, var(--wax) 0%, var(--wax-dark) 100%);
  border-color: var(--wax-dark);
  color: var(--vellum);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 170, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 4px 8px rgba(80, 20, 0, 0.55);
}
/* Same illuminated flourish under the endgame button as the title screen. */
.endgame .primary::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: 42px;
  height: 7px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 7' fill='none' stroke='%237a1a1f' stroke-width='0.8' stroke-linecap='round' opacity='0.75'><path d='M2 3.5 q 5 -2.5 9 0 q 5 2.5 10 0'/><path d='M23 3.5 q 5 -2.5 9 0 q 4 2 8 0'/><circle cx='21' cy='3.5' r='1.1' fill='%237a1a1f'/></svg>");
  opacity: 0.85;
  pointer-events: none;
}
.final-sentence {
  max-width: 720px;
  margin: 0 auto 40px auto;
  padding: 28px 36px;
  border-top: 2px double var(--rule);
  border-bottom: 2px double var(--rule);
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--ink);
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 240, 200, 0.55), transparent 80%),
    linear-gradient(180deg, var(--vellum-soft) 0%, transparent 100%);
  text-align: left;
  position: relative;
}
.final-sentence::first-letter {
  font-family: var(--font-blackletter);
  font-size: 3.4em;
  font-style: normal;
  float: left;
  line-height: 0.9;
  padding: 4px 10px 0 0;
  color: var(--wax);
  text-shadow:
    1px 1px 0 rgba(255, 230, 170, 0.55),
    0 4px 8px rgba(0, 0, 0, 0.22);
}

.reward-screen {
  text-align: center;
  padding: 50px 24px 40px;
}
.reward-screen h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 10px;
  font-size: 2rem;
  margin: 0 0 10px 0;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.7), 0 3px 12px rgba(60, 30, 6, 0.3);
}
.reward-screen h2::before,
.reward-screen h2::after {
  content: '\2767';
  color: var(--wax);
  font-size: 1.3rem;
  margin: 0 14px;
  vertical-align: middle;
  letter-spacing: 0;
}
.reward-flavor {
  color: var(--ink-soft);
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.1rem;
  margin-bottom: 34px;
  letter-spacing: 0.5px;
}
.reward-cards {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.reward-card {
  width: 195px;
  min-height: 140px;
}
.reward-card .card-cost {
  font-size: 1rem;
}
.reward-skip { margin-top: 20px; }
.reward-skip .skip {
  font-family: var(--font-smallcap);
  background: transparent;
  border: 1px solid var(--ink-faint);
  color: var(--ink-faint);
  padding: 9px 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 0.78rem;
  cursor: pointer;
}
.reward-skip .skip:hover { border-color: var(--ink); color: var(--ink); }

/* ----------------------------------------------------------------
   Decorative dividers.
---------------------------------------------------------------- */
.flourish {
  display: block;
  margin: 14px auto;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'><path fill='%234a3c25' d='M100 1c-3 0-6 2-7 5-1 2-2 3-3 3-4 0-8-2-12-2-3 0-7 1-10 3l-2 1c-3 1-6 1-8-1L0 9v1l59 2c3 0 5-1 6-3 1-1 3-2 5-2l5 1 7 1c2 0 4-1 5-2 1-2 3-3 5-3h16c2 0 4 1 5 3 1 1 3 2 5 2l7-1 5-1c2 0 4 1 5 2 1 2 3 3 6 3l59-2V9l-58 1c-2 2-5 2-8 1l-2-1c-3-2-7-3-10-3-4 0-8 2-12 2-1 0-2-1-3-3-1-3-4-5-7-5h-7z'/><circle cx='100' cy='7' r='1.8' fill='%237a1a1f'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* ----------------------------------------------------------------
   Mobile.
---------------------------------------------------------------- */
@media (max-width: 720px) {
  body { padding: 10px; }
  .app {
    padding: 22px 18px 26px;
    gap: 14px;
  }
  .corner { width: 40px; height: 40px; }
  .app::after { font-size: 1.4rem; letter-spacing: 3px; }
  .combat {
    grid-template-areas:
      "scene"
      "strip"
      "sentence"
      "permanent"
      "hand"
      "footer"
      "log";
    grid-template-columns: 1fr;
  }
  .run-sentence {
    flex-direction: column;
    align-items: stretch;
    padding: 4px 0 18px;
    gap: 6px;
  }
  .run-text { font-size: 1.05rem; letter-spacing: 1px; }
  .run-text .drop { font-size: 2.2rem; margin-right: 6px; }
  .run-progress {
    align-self: flex-start;
    font-size: 0.62rem;
    letter-spacing: 2px;
    padding: 2px 8px;
  }
  .portrait { min-width: 0; padding: 10px 12px; }
  .portrait.enemy { gap: 10px; }
  .enemy-art { width: 60px; height: 60px; padding: 6px; }
  .portrait-name { font-size: 0.92rem; letter-spacing: 2px; }
  .stats-row { font-size: 0.72rem; gap: 6px; }
  .stat-pill { font-size: 0.65rem; padding: 1px 6px; letter-spacing: 1.5px; }
  .intent { font-size: 0.74rem; }
  .tag { font-size: 0.62rem; padding: 1px 6px; letter-spacing: 1.5px; }
  .sentence-bar { padding: 14px 8px 14px 28px; min-height: 56px; }
  .token { font-size: 0.95rem; padding: 5px 10px; letter-spacing: 1.5px; }
  .placeholder { font-size: 0.95rem; }
  .preview { font-size: 0.78rem; padding-left: 28px; }
  .sentence-actions { gap: 10px; }
  .sentence-actions button { padding: 7px 14px; font-size: 0.7rem; letter-spacing: 2px; }
  .sentence-actions .primary { width: 96px; height: 96px; font-size: 0.6rem; letter-spacing: 1.5px; }
  .sentence-actions .primary::after { background-size: 38px 38px; background-position: center 10px; }
  .sentence-actions .primary span { bottom: 10px; }
  .permanent-strip { gap: 5px; padding: 8px 0; }
  .strip-label { font-size: 0.62rem; letter-spacing: 2px; }
  .word { padding: 3px 8px; font-size: 0.72rem; letter-spacing: 1.5px; }
  .hand { gap: 10px; min-height: 0; padding: 8px 0 4px; }
  .card { width: calc(50% - 5px); padding: 12px 9px 10px; min-height: 130px; }
  .card-name { font-size: 0.82rem; letter-spacing: 0.8px; padding-right: 22px; }
  .card-desc { font-size: 0.72rem; }
  .card-cost { font-size: 0.7rem; width: 18px; height: 18px; }
  .end-turn { padding: 9px 16px; font-size: 0.75rem; letter-spacing: 2.5px; }
  .piles { font-size: 0.72rem; gap: 10px; letter-spacing: 1.5px; }
  .log { max-height: 140px; font-size: 0.74rem; padding: 10px 12px; }
  .log::before { font-size: 0.62rem; }
  .reward-card { width: 45%; max-width: 220px; }
  .endgame h2 { font-size: 1.7rem; letter-spacing: 6px; }
  .endgame h2::before, .endgame h2::after { font-size: 1.1rem; margin: 0 10px; }
  .reward-screen h2 { font-size: 1.4rem; letter-spacing: 5px; }
  .reward-screen h2::before, .reward-screen h2::after { font-size: 0.95rem; margin: 0 8px; }
  .final-sentence { font-size: 1.05rem; padding: 18px 20px; }
  .final-sentence::first-letter { font-size: 2.6em; }
}

/* ============================================================
   Title / Map / Scene screens (Phase A foundation)
   ============================================================ */

.title-app {
  max-width: 720px;
  text-align: center;
  padding-top: 80px;
  padding-bottom: 80px;
}
.title-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 30px;
}
.title-mark { color: var(--wax); opacity: 0.85; }
.title-name {
  font-family: var(--font-display);
  font-size: 3.2rem;
  letter-spacing: 9px;
  margin: 0;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,240,200,0.5), 0 3px 8px rgba(50,30,5,0.25);
}
.title-flavor {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 0 0 20px;
  letter-spacing: 1px;
}
.title-actions { display: flex; gap: 14px; }
.title-btn {
  position: relative;
  font-family: var(--font-smallcap);
  font-size: 0.95rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 12px 32px;
  border: 1px solid var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 240, 200, 0.45) 0%, transparent 60%),
    var(--vellum);
  color: var(--ink);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 2px 3px var(--shadow-soft);
  transition: background 120ms ease, color 120ms ease, transform 80ms ease,
              box-shadow 120ms ease;
}
.title-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 4px 6px var(--shadow-soft);
}
.title-btn:active { transform: translateY(1px); }
.title-btn.primary {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(60, 40, 20, 0.4), transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, var(--night-mid) 100%);
  color: var(--vellum);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 3px 6px rgba(20, 10, 0, 0.45);
}
.title-btn.primary:hover {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 180, 140, 0.5), transparent 70%),
    linear-gradient(180deg, var(--wax) 0%, var(--wax-dark) 100%);
  border-color: var(--wax-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 170, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 4px 8px rgba(80, 20, 0, 0.55);
}
/* Small illuminated flourish under each title button to echo manuscript
   chapter openers. */
.title-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 36px;
  height: 6px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 6' fill='none' stroke='%237a1a1f' stroke-width='0.7' stroke-linecap='round' opacity='0.7'><path d='M2 3 q 4 -2 7 0 q 4 2 7 0'/><path d='M20 3 q 4 -2 7 0 q 4 2 7 0'/><circle cx='18' cy='3' r='1' fill='%237a1a1f'/></svg>");
  opacity: 0.85;
  pointer-events: none;
}
.title-meta {
  margin-top: 36px;
  display: flex;
  gap: 24px;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.82rem;
  align-items: center;
  position: relative;
}
.title-meta::before,
.title-meta::after {
  content: '';
  flex: 0 0 60px;
  height: 1px;
  background:
    linear-gradient(90deg, transparent 0%, var(--rule) 50%, transparent 100%);
  opacity: 0.6;
}
.title-meta > div {
  font-style: italic;
  font-family: var(--font-script);
}
.title-meta-label {
  font-family: var(--font-smallcap);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink-faint);
  margin-right: 6px;
}

/* ---- Map ---- */
.map-screen {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  padding: 8px 0 24px;
}
.map-intro {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.1rem;
  letter-spacing: 2px;
}
.map-prompt { padding: 4px 12px; border-bottom: 1px dashed var(--rule); }
.map-offers {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.scene-card {
  font-family: var(--font-body);
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(255,240,200,0.45), transparent),
    var(--bg-card);
  border: 1px solid var(--ink);
  width: 220px;
  min-height: 180px;
  padding: 18px 16px 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 3px 8px var(--shadow);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.scene-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px var(--shadow);
}
.scene-card.scene-combat_elite { border-color: var(--wax); }
.scene-card.scene-combat_boss { border-color: var(--wax-dark); box-shadow: 0 4px 16px rgba(120,20,33,0.4); }
.scene-art {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--vellum-soft);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.scene-glyph {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--wax);
}
.scene-lead {
  font-family: var(--font-smallcap);
  font-size: 0.7rem;
  letter-spacing: 3px;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.scene-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}
.map-ink-bar {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 10px;
  padding: 8px 16px;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
}
.ink-amount {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink);
}
.ink-amount svg { color: var(--wax); }
.ink-action {
  font-family: var(--font-smallcap);
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid var(--ink-soft);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ink-action:hover:not(:disabled) {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--vellum-soft);
}
.ink-action:disabled { opacity: 0.4; cursor: not-allowed; }
.ink-action .cost {
  color: var(--wax);
  font-family: var(--font-body);
  font-weight: bold;
}
.peek-panel {
  margin-top: 6px;
  padding: 10px 16px;
  background: rgba(255,240,200,0.4);
  border: 1px dashed var(--rule);
}
.peek-label {
  font-family: var(--font-smallcap);
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.peek-list { display: flex; gap: 8px; flex-wrap: wrap; }
.peek-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  padding: 2px 8px;
  border: 1px solid var(--rule);
  background: var(--vellum);
}
.peek-glyph { color: var(--wax); font-family: var(--font-display); }
.hide-banner {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--wax);
  font-size: 0.95rem;
  padding: 8px;
  letter-spacing: 1px;
}
.map-progress {
  margin-top: 6px;
  font-family: var(--font-smallcap);
  letter-spacing: 3px;
  color: var(--ink-faint);
  font-size: 0.78rem;
  text-transform: uppercase;
}
.title-link {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  margin-left: 10px;
  font-size: 0.85rem;
  line-height: 1;
  vertical-align: middle;
}
.title-link:hover { color: var(--ink); border-color: var(--ink); }

/* ---- Generic scene screen frame ---- */
.scene-screen {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 0;
}
.scene-header { text-align: center; padding: 8px 4px 16px; }
.scene-header h2 {
  font-family: var(--font-display);
  letter-spacing: 7px;
  font-size: 1.9rem;
  margin: 0 0 8px;
  color: var(--ink);
}
.scene-flavor {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.5;
}
.scene-footer {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.scene-leave, .scene-confirm {
  font-family: var(--font-smallcap);
  font-size: 0.85rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 10px 28px;
  background:
    linear-gradient(180deg, rgba(255, 240, 200, 0.45) 0%, transparent 60%),
    var(--vellum);
  border: 1px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 2px 3px var(--shadow-soft);
  transition: transform 100ms ease, box-shadow 100ms ease, background 100ms ease;
}
.scene-confirm {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(60, 40, 20, 0.4), transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, var(--night-mid) 100%);
  color: var(--vellum);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 3px 6px rgba(20, 10, 0, 0.45);
}
.scene-leave:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 4px 6px var(--shadow-soft);
}
.scene-confirm:hover {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255, 180, 140, 0.5), transparent 70%),
    linear-gradient(180deg, var(--wax) 0%, var(--wax-dark) 100%);
  border-color: var(--wax-dark);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 170, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 4px 8px rgba(80, 20, 0, 0.55);
}

/* ---- Shop ---- */
.ink-balance {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--wax);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--gold-leaf);
  border-radius: 9999px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 225, 160, 0.4), transparent 80%),
    var(--vellum);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.6),
    inset 0 -1px 0 rgba(135, 95, 30, 0.18),
    0 1px 2px var(--shadow-soft);
}
.shop-section { padding: 12px 0; border-top: 1px dashed var(--rule); }
.shop-section:first-of-type { border-top: none; padding-top: 0; }
.shop-section-label {
  font-family: var(--font-smallcap);
  font-size: 0.75rem;
  letter-spacing: 3px;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 12px;
  text-align: center;
  position: relative;
}
.shop-section-label::before,
.shop-section-label::after {
  content: '\2767';
  color: var(--wax);
  font-size: 0.85rem;
  margin: 0 12px;
  vertical-align: middle;
  letter-spacing: 0;
  opacity: 0.7;
}
.shop-items {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.shop-item {
  width: 200px;
  min-height: 120px;
  background:
    radial-gradient(ellipse 70% 35% at 50% 0%, rgba(255, 240, 200, 0.55), transparent 70%),
    linear-gradient(165deg, var(--bg-card) 0%, var(--vellum-soft) 100%);
  border: 1px solid var(--ink);
  padding: 10px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.5),
    inset 0 0 0 1px rgba(255, 240, 200, 0.3),
    0 2px 4px var(--shadow-soft);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.shop-item:hover:not(.unaffordable) {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.5),
    inset 0 0 0 1px rgba(255, 240, 200, 0.5),
    0 6px 10px var(--shadow);
}
.shop-item.unaffordable { opacity: 0.5; cursor: not-allowed; }
.shop-item-name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
}
.shop-item-desc {
  font-size: 0.72rem;
  color: var(--ink-soft);
  line-height: 1.3;
  flex: 1;
}
.shop-item-price {
  font-family: var(--font-body);
  color: var(--wax);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
}

/* ---- Shrine ---- */
.shrine-deck { padding: 0 8px; }
.shrine-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.shrine-card {
  width: 150px;
  background:
    radial-gradient(ellipse 70% 35% at 50% 0%, rgba(255, 240, 200, 0.55), transparent 70%),
    linear-gradient(165deg, var(--bg-card) 0%, var(--vellum-soft) 100%);
  border: 1px solid var(--ink);
  padding: 10px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.5),
    inset 0 0 0 1px rgba(255, 240, 200, 0.3),
    0 2px 4px var(--shadow-soft);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 120ms ease;
}
.shrine-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.5),
    inset 0 0 0 1px rgba(255, 240, 200, 0.5),
    0 6px 10px var(--shadow);
}
.shrine-card.picked {
  border-color: var(--wax);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.5),
    inset 0 0 0 1px rgba(255, 240, 200, 0.5),
    0 0 0 2px var(--wax-bright),
    0 4px 10px rgba(120, 20, 33, 0.35);
}
.shrine-card-cost {
  position: absolute;
  top: 6px;
  right: 8px;
  background: var(--ink);
  color: var(--vellum);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.85rem;
}
.shrine-card-name {
  font-family: var(--font-display);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.shrine-card-desc {
  font-size: 0.68rem;
  color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1.3;
}
.shrine-modes {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 12px;
}
.shrine-mode {
  width: 200px;
  padding: 14px;
  background:
    radial-gradient(ellipse 70% 35% at 50% 0%, rgba(255, 240, 200, 0.5), transparent 70%),
    linear-gradient(165deg, var(--vellum) 0%, var(--vellum-soft) 100%);
  border: 1px solid var(--ink);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.55),
    inset 0 0 0 1px rgba(255, 240, 200, 0.3),
    0 2px 4px var(--shadow-soft);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.shrine-mode:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.55),
    inset 0 0 0 1px rgba(255, 240, 200, 0.5),
    0 6px 10px var(--shadow);
}
.shrine-mode-label {
  font-family: var(--font-smallcap);
  letter-spacing: 3px;
  text-transform: uppercase;
}
.shrine-mode-desc { font-size: 0.78rem; color: var(--ink-soft); margin-top: 4px; }

/* ---- Fire ---- */
.fire-choices, .fire-relic-list {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}
.fire-choice, .fire-relic {
  width: 220px;
  padding: 16px;
  background:
    radial-gradient(ellipse 70% 35% at 50% 0%, rgba(255, 200, 140, 0.5), transparent 70%),
    linear-gradient(165deg, var(--vellum) 0%, var(--vellum-soft) 100%);
  border: 1px solid var(--ink);
  cursor: pointer;
  text-align: center;
  font-family: var(--font-body);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.55),
    inset 0 0 0 1px rgba(255, 220, 170, 0.35),
    0 2px 4px var(--shadow-soft);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.fire-choice:hover, .fire-relic:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.55),
    inset 0 0 0 1px rgba(255, 220, 170, 0.55),
    0 6px 12px rgba(255, 100, 30, 0.25);
}
.fire-choice-label, .fire-relic-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.fire-choice-desc, .fire-relic-desc {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 6px;
  line-height: 1.4;
}

/* ---- Mirror ---- */
.mirror-cards {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-height: 480px;
  overflow-y: auto;
  padding: 10px 4px;
}
.mirror-card {
  width: 140px;
  padding: 10px;
  background:
    radial-gradient(ellipse 70% 35% at 50% 0%, rgba(180, 220, 240, 0.35), transparent 70%),
    linear-gradient(165deg, var(--bg-card) 0%, var(--vellum-soft) 100%);
  border: 1px solid var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.5),
    inset 0 0 0 1px rgba(180, 220, 240, 0.25),
    0 2px 4px var(--shadow-soft);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 120ms ease;
}
.mirror-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.5),
    inset 0 0 0 1px rgba(180, 220, 240, 0.55),
    0 6px 12px rgba(40, 80, 120, 0.25);
}
.mirror-card.adjective { border-style: dashed; }
.mirror-card.picked {
  border-color: var(--wax);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.5),
    inset 0 0 0 1px rgba(180, 220, 240, 0.55),
    0 0 0 2px var(--wax-bright),
    0 4px 10px rgba(120, 20, 33, 0.35);
}
.mirror-card-name {
  font-family: var(--font-display);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.mirror-card-desc { font-size: 0.68rem; color: var(--ink-soft); margin-top: 4px; line-height: 1.3; }

.empty {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--ink-faint);
  text-align: center;
}

/* mobile tweaks for the new screens */
@media (max-width: 720px) {
  .title-name { font-size: 2.2rem; letter-spacing: 6px; }
  .scene-card { width: calc(50% - 12px); min-height: 150px; padding: 12px 10px; }
  .scene-art { width: 56px; height: 56px; }
  .scene-label { font-size: 0.95rem; }
  .shop-item, .shrine-card, .fire-choice, .fire-relic { width: calc(50% - 8px); }
  .mirror-card { width: calc(50% - 6px); }
}

/* ----------------------------------------------------------------
   Potion tray — three vials sealed in wax along the combat margin.
---------------------------------------------------------------- */
.potion-tray {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.potion-slot {
  flex: 1 1 0;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--font-smallcap);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.potion-slot-empty {
  border: 1px dashed var(--ink-faint);
  color: var(--ink-faint);
  background: transparent;
  font-size: 0.62rem;
  font-style: italic;
}
.potion-slot-filled {
  border: 1px solid var(--wax-dark);
  color: var(--vellum);
  font-weight: bold;
  font-size: 0.72rem;
  cursor: pointer;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 200, 170, 0.55), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(0, 0, 0, 0.25), transparent 60%),
    linear-gradient(180deg, var(--wax-bright) 0%, var(--wax) 60%, var(--wax-dark) 100%);
  box-shadow: 0 2px 3px var(--shadow), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,200,170,0.3);
}
.potion-slot-filled:hover:not(:disabled) { filter: brightness(1.1); }
.potion-slot-filled:disabled { opacity: 0.45; cursor: not-allowed; }

/* ============================================================
   Phase C wiring — relic strip + player tray
   ============================================================ */
.relic-strip {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.relic-chip {
  font-family: var(--font-smallcap);
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--gilt);
  background:
    radial-gradient(ellipse 70% 60% at 50% 0, rgba(255,225,160,0.5), transparent),
    var(--vellum);
  color: var(--ink-soft);
  cursor: help;
  white-space: nowrap;
  box-shadow: 0 1px 2px var(--shadow-soft);
}
.player-tray {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
}
.player-tray .ink-amount {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--wax);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

@media (max-width: 720px) {
  .relic-chip { font-size: 0.55rem; padding: 1px 6px; }
}

/* Inventory chips for held nouns (GRAB / drops). */
.inventory-strip {
  margin-top: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.inventory-label {
  font-family: var(--font-smallcap);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 2px;
}
.inventory-chip {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  padding: 2px 8px;
  border: 1px dashed var(--ink-soft);
  background: var(--paper);
  color: var(--ink);
  cursor: help;
}

/* ----------------------------------------------------------------
   Audio settings — a tiny popover anchored next to the home button
   in the run header. Manuscript palette: vellum panel, ink text,
   wax for the slider thumb / active states.
---------------------------------------------------------------- */
.audio-settings {
  position: relative;
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}
.audio-button {
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 240, 200, 0.7), transparent 60%),
    var(--vellum);
  border: 1px solid var(--ink-soft);
  color: var(--ink-soft);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 1px 1px var(--shadow-soft);
  transition: color 100ms ease, border-color 100ms ease, box-shadow 100ms ease,
              transform 100ms ease;
}
.audio-button:hover {
  color: var(--ink);
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 2px 3px var(--shadow-soft);
}
.audio-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: 220px;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255, 240, 200, 0.55), transparent 80%),
    linear-gradient(180deg, var(--vellum) 0%, var(--vellum-soft) 100%);
  border: 1px solid var(--ink-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 6px 22px var(--shadow);
  padding: 28px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-body);
  color: var(--ink);
  text-align: left;
}
.audio-popover .audio-popover-title,
.audio-popover::before {
  display: none;
}
/* Manuscript header — small caps with ❧ flourishes either side. */
.audio-popover::after {
  content: '\2767  scribe\2019s tools  \2767';
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-smallcap);
  font-size: 0.62rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--wax);
  opacity: 0.85;
  pointer-events: none;
}
.audio-popover::before {
  /* tiny wax-coloured tab pointing at the trigger */
  content: '';
  position: absolute;
  top: -6px;
  right: 8px;
  width: 10px;
  height: 10px;
  background: var(--vellum);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  transform: rotate(45deg);
}
.audio-row {
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.audio-row label {
  color: var(--ink-soft);
  font-family: var(--font-smallcap);
}
.audio-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, transparent 70%),
    var(--vellum-deep);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.18);
}
.audio-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 200, 170, 0.55), transparent 55%),
    radial-gradient(circle, var(--wax) 0%, var(--wax-dark) 100%);
  border: 1px solid var(--wax-dark);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 170, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 1px 2px var(--shadow-soft);
}
.audio-row input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 200, 170, 0.55), transparent 55%),
    radial-gradient(circle, var(--wax) 0%, var(--wax-dark) 100%);
  border: 1px solid var(--wax-dark);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 170, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 1px 2px var(--shadow-soft);
}
.audio-val {
  font-family: var(--font-body);
  color: var(--ink-faint);
  font-size: 0.65rem;
  text-align: right;
}
.audio-mute-row {
  grid-template-columns: 56px 1fr;
}
.audio-mute-row input[type="checkbox"] {
  justify-self: start;
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--ink-soft);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 240, 200, 0.55) 0%, transparent 70%),
    var(--vellum);
  cursor: pointer;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 1px 1px var(--shadow-soft);
  transition: background 100ms ease, border-color 100ms ease;
}
.audio-mute-row input[type="checkbox"]:hover { border-color: var(--ink); }
.audio-mute-row input[type="checkbox"]:checked {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 200, 170, 0.55), transparent 60%),
    linear-gradient(180deg, var(--wax) 0%, var(--wax-dark) 100%);
  border-color: var(--wax-dark);
}
.audio-mute-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: -1px;
  width: 5px;
  height: 10px;
  border: solid var(--vellum);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


/* ============================================================
   Tolkien storybook redesign — scene panel, hero figure, scene
   enemy portraits, marginalia, card stripes, map previews, and
   end-screen vignettes. Layered ON TOP of the existing vellum
   manuscript palette, not a replacement.
   ============================================================ */

/* ---- Scene panel — illustrated tableau above combat ---- */
.scene-panel {
  position: relative;
  min-height: 360px;
  border: 1px solid var(--ink);
  overflow: hidden;
  background: linear-gradient(165deg, #cdb98a 0%, #b8a072 100%);
  box-shadow:
    0 4px 14px var(--shadow),
    inset 0 0 0 1px var(--vellum-soft),
    inset 0 0 0 5px var(--vellum-deep),
    inset 0 0 0 6px var(--ink-soft),
    inset 0 0 32px rgba(60, 40, 14, 0.45);
}
.scene-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.scene-figures {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: 14px;
  padding: 14px 18px;
  align-items: end;
  min-height: 340px;
}
/* gold border ornament on each corner of the scene panel */
.scene-panel::before,
.scene-panel::after {
  content: '';
  position: absolute;
  top: 6px;
  width: 26px;
  height: 26px;
  pointer-events: none;
  z-index: 3;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%23c8932e' stroke-width='1.4' stroke-linecap='round'><path d='M2 14 V8 c0 -3 3 -6 6 -6 H14'/><path d='M6 12 V10 c0 -2 1 -3 3 -3 H11'/><circle cx='8' cy='8' r='1.5' fill='%23c8932e'/></svg>");
}
.scene-panel::before { left: 6px; }
.scene-panel::after  { right: 6px; transform: scaleX(-1); }

/* ---- Hero figure (left side of scene panel) ---- */
.scene-hero {
  position: relative;
  cursor: pointer;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0 8px;
  transition: transform 200ms ease, filter 200ms ease;
}
.scene-hero:hover { transform: translateY(-3px); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); }
.hero-svg {
  width: 100%;
  max-width: 200px;
  height: auto;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.45));
  animation: hero-idle 5.6s ease-in-out infinite;
  transform-origin: center bottom;
}
.scene-hero:hover .hero-svg { animation-play-state: paused; }
@keyframes hero-idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-svg { animation: none; }
}
.hero-stamps {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-stamp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 9999px;
  font-family: var(--font-smallcap);
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: bold;
  border: 1px solid var(--ink);
  box-shadow: 0 2px 3px var(--shadow), inset 0 1px 0 rgba(255,240,200,0.4);
}
.hero-stamp.hero-hp {
  background: linear-gradient(180deg, var(--wax-bright) 0%, var(--wax-dark) 100%);
  color: var(--vellum);
}
.hero-stamp.hero-en {
  background: linear-gradient(180deg, var(--gold-leaf-soft) 0%, var(--gold-leaf) 100%);
  color: var(--ink);
}
.hero-stamp.hero-bk {
  background: linear-gradient(180deg, var(--sky-soft) 0%, var(--sky-deep) 100%);
  color: var(--vellum);
}
.hero-hpbar {
  position: relative;
  width: 92%;
  max-width: 180px;
  height: 6px;
  background: rgba(40, 20, 4, 0.55);
  border: 1px solid var(--ink);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.45);
}
.hero-hpbar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(180deg, var(--wax-bright) 0%, var(--wax) 60%, var(--wax-dark) 100%);
  transition: width 300ms ease;
}

/* ---- Scene enemies (right side of scene panel) ----
   Enemies live IN the scene at ground level — no boxed portrait, no gold
   frame, no parchment background. The EnemyIcon SVG sits directly on the
   landscape with its meta (name / HP / intent) just below.
*/
.scene-enemies {
  display: flex;
  gap: 18px;
  align-items: end;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.scene-enemy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: transform 180ms ease, filter 180ms ease;
}
.scene-enemy:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}
.scene-enemy:focus-visible { outline: 2px solid var(--gold-leaf); outline-offset: 4px; }
.scene-enemy-figure {
  position: relative;
  width: 96px;
  height: 96px;
  color: var(--ink);
  /* a soft shadow under the figure, sitting on the ground */
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.45));
  animation: enemy-idle 4.8s ease-in-out infinite;
  transform-origin: center bottom;
}
/* Stagger each enemy's idle so the row doesn't move in lockstep. */
.scene-enemy:nth-child(odd)  .scene-enemy-figure { animation-delay: -1.6s; animation-duration: 5.4s; }
.scene-enemy:nth-child(3n)   .scene-enemy-figure { animation-delay: -3.0s; animation-duration: 6.2s; }
.scene-enemy:hover .scene-enemy-figure { animation-play-state: paused; }
@keyframes enemy-idle {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-1.5px) scale(1.012); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-enemy-figure { animation: none; }
}
.scene-enemy-figure .enemy-icon {
  width: 100%;
  height: 100%;
  color: var(--ink);
}
/* Per-creature color tinting. The EnemyIcon uses currentColor as the mask
   fill, so changing color here paints the silhouette. */
.scene-enemy-figure .enemy-icon[data-noun="GOBLIN"]        { color: #506d2f; }
.scene-enemy-figure .enemy-icon[data-noun="GOBLIN_SHAMAN"] { color: #6e8a44; }
.scene-enemy-figure .enemy-icon[data-noun="BIG_GOBLIN"]    { color: #3d5421; }
.scene-enemy-figure .enemy-icon[data-noun="WOLF"]          { color: #3d3a36; }
.scene-enemy-figure .enemy-icon[data-noun="MUSHROOM"]      { color: #8c2f24; }
.scene-enemy-figure .enemy-icon[data-noun="TREE"]          { color: #3a2a14; }
.scene-enemy-figure .enemy-icon[data-noun="THORN"]         { color: #2c241a; }
.scene-enemy-figure .enemy-icon[data-noun="GREEN_KNIGHT"]  { color: #1d3318; }
.scene-enemy-figure .reveal-glyph {
  position: absolute;
  top: -4px;
  right: -4px;
  color: var(--gold-leaf);
  background: var(--ink);
  border-radius: 50%;
  padding: 2px;
}
.scene-enemy-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: 110px;
}
.scene-enemy-name {
  font-family: var(--font-smallcap);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  color: var(--vellum);
  text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 6px rgba(0,0,0,0.6);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.scene-enemy-hpbar {
  position: relative;
  width: 96px;
  height: 7px;
  background: rgba(20, 12, 4, 0.7);
  border: 1px solid rgba(0,0,0,0.6);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}
.scene-enemy-hpfill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(180deg, var(--wax-bright) 0%, var(--wax) 60%, var(--wax-dark) 100%);
  transition: width 300ms ease;
}
.scene-enemy-hptext {
  position: absolute;
  inset: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.56rem;
  line-height: 7px;
  color: var(--vellum);
  letter-spacing: 0.5px;
  mix-blend-mode: difference;
}
.scene-enemy-intent {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-smallcap);
  font-size: 0.6rem;
  color: var(--vellum);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 1px 6px;
  background: rgba(20, 12, 4, 0.7);
  border-radius: 9999px;
  border: 1px solid rgba(184, 137, 58, 0.5);
  white-space: nowrap;
}
.scene-enemy-intent svg { color: var(--gold-leaf); }
.scene-enemy.revealed .scene-enemy-figure {
  filter: drop-shadow(0 0 8px rgba(167, 33, 49, 0.7)) drop-shadow(0 6px 4px rgba(0,0,0,0.45));
}
.scene-enemy-adjs { margin-top: 2px; justify-content: center; }

/* ---- Compact stat strip below the scene ---- */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255,235,180,0.18), transparent 70%),
    var(--vellum-soft);
  box-shadow: 0 1px 2px var(--shadow-soft), inset 0 1px 0 rgba(255,240,200,0.45);
}
.stat-strip .strip-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.stat-strip .stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--ink);
  background: var(--vellum);
  border: 1px solid var(--rule);
  border-radius: 9999px;
  letter-spacing: 0.5px;
}
.stat-strip .stat-pill svg { color: var(--wax); }
.stat-strip .stat-pill.ink { color: var(--wax); border-color: var(--gold-leaf); }
.stat-strip .stat-pill.ink svg { color: var(--gold-leaf); }
.stat-strip .tag {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 1px;
  padding: 1px 8px;
  border-radius: 9999px;
  background: var(--wax-dark);
  color: var(--vellum);
  border: 1px solid var(--wax);
  text-transform: uppercase;
}
.stat-strip .strip-relics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.stat-strip .relic-chip {
  font-family: var(--font-smallcap);
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  background: rgba(184, 137, 58, 0.18);
  border: 1px solid var(--gold-leaf);
  color: var(--ink-soft);
  border-radius: 4px;
}
.stat-strip .inventory-chip {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 1px;
  padding: 2px 8px;
  background: var(--moss-soft, var(--vellum));
  border: 1px dashed var(--ink-soft);
  color: var(--ink);
  border-radius: 4px;
}
.stat-strip .potion-tray {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.stat-strip .potion-slot {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  font-size: 0.55rem;
  border-radius: 50%;
}
.stat-strip .potion-slot-empty {
  border: 1px dashed var(--ink-faint);
  background: transparent;
}
.stat-strip .potion-slot-empty .potion-empty-label { display: none; }
.stat-strip .potion-slot-filled {
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 60%), var(--wax);
  color: var(--vellum);
  border: 1px solid var(--wax-dark);
}
.stat-strip .potion-slot-filled .potion-sentence {
  font-size: 0.5rem;
  line-height: 1;
}

/* ---- Phase vignette behind the run-sentence drop cap ---- */
.run-text { position: relative; }
.run-text .drop-wrap {
  position: relative;
  float: left;
  margin: 4px 12px 0 0;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.run-text .drop-wrap .phase-vignette {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88px;
  height: 88px;
  transform: translate(-50%, -50%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.run-text .drop-wrap .drop {
  position: relative;
  z-index: 1;
  float: none;
  margin: 0;
  padding: 0 4px;
}

/* ---- Marginalia decorations on the .app container ---- */
.margin-vine {
  position: absolute;
  top: 80px;
  bottom: 80px;
  width: 38px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
}
.margin-vine-left  { left: 6px; }
.margin-vine-right { right: 6px; transform: scaleX(-1); }
.margin-bird {
  position: absolute;
  width: 70px;
  height: 70px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.margin-bird-tr { top: 60px; right: 56px; }
.margin-bird-bl { bottom: 56px; left: 56px; transform: scaleX(-1); }
.margin-flourish {
  position: absolute;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 0;
}
.margin-flourish-tl { top: 70px; left: 70px; }
.margin-flourish-tr { top: 70px; right: 70px; transform: scaleX(-1); }
.margin-flourish-bl { bottom: 70px; left: 70px; transform: scaleY(-1); }
.margin-flourish-br { bottom: 70px; right: 70px; transform: scale(-1, -1); }

/* ---- Cards: rarity stripe + verb glyph corner ---- */
.card {
  padding-top: 26px;             /* room for rarity stripe */
  position: relative;
  overflow: hidden;
}
.card-stripe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  z-index: 1;
  border-bottom: 1px solid var(--ink-soft);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 12px,
      rgba(0,0,0,0.06) 12px 13px
    ),
    linear-gradient(180deg, var(--moss-soft) 0%, var(--moss) 100%);
}
.card-stripe.rare-common {
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(0,0,0,0.06) 12px 13px),
    linear-gradient(180deg, #e6c98a 0%, #c8a466 100%);
}
.card-stripe.rare-uncommon {
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(0,0,0,0.06) 12px 13px),
    linear-gradient(180deg, var(--moss-soft) 0%, var(--moss-deep) 100%);
}
.card-stripe.rare-rare {
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(0,0,0,0.06) 12px 13px),
    linear-gradient(180deg, var(--rust) 0%, var(--blood) 100%);
}
.card-stripe.rare-legendary {
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(0,0,0,0.06) 12px 13px),
    linear-gradient(180deg, var(--gold-leaf-soft) 0%, var(--gold-leaf) 100%);
}
.card-glyph-corner {
  position: absolute;
  top: 18px;
  left: 8px;
  width: 22px;
  height: 22px;
  z-index: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}
.card .card-name {
  padding-left: 30px;
}
/* card-cost stays in top-right but needs to sit above the stripe */
.card .card-cost { top: 16px; z-index: 2; }

/* ---- Map screen scene previews ---- */
.scene-card {
  padding-top: 14px;
  overflow: hidden;
}
.scene-card .map-preview {
  width: 100%;
  max-width: 180px;
  height: 80px;
  border: 1px solid var(--ink-soft);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 200, 0.4),
    inset 0 0 10px rgba(40, 20, 4, 0.3),
    0 2px 4px var(--shadow-soft);
  background: var(--vellum-soft);
  margin-bottom: 4px;
}
.scene-card {
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1.08),
              box-shadow 180ms ease,
              border-color 180ms ease;
}
.scene-card:hover {
  transform: translateY(-6px) rotate(-0.6deg);
  border-color: var(--ink);
}
.scene-card.scene-combat_normal:hover { border-color: var(--moss-deep); }
.scene-card.scene-combat_elite:hover  { border-color: var(--wax); }
.scene-card.scene-combat_boss:hover   { border-color: var(--blood); }
.scene-card.scene-shop:hover          { border-color: var(--gold-leaf); }
.scene-card.scene-fire:hover          { border-color: var(--rust); }
.scene-card.scene-shrine:hover        { border-color: var(--sky-deep); }
.scene-card.scene-mirror:hover        { border-color: var(--sky); }
/* hide the original scene-art block now that we have the map-preview */
.scene-card .scene-art { display: none; }
.scene-card-enemy {
  margin-top: -36px;
  margin-bottom: 4px;
  z-index: 1;
  color: var(--ink);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
.scene-card-glyph {
  margin-top: -28px;
  margin-bottom: 4px;
  z-index: 1;
}
.scene-card-glyph .scene-glyph {
  display: inline-block;
  background: var(--vellum-soft);
  border: 1px solid var(--gold-leaf);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  line-height: 36px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--wax);
  box-shadow: 0 2px 4px var(--shadow-soft);
}

/* ---- End-screen vignettes ---- */
.end-vignette {
  display: block;
  width: 100%;
  max-width: 720px;
  height: 200px;
  margin: 0 auto 24px;
  border: 1px solid var(--ink);
  box-shadow:
    0 6px 14px var(--shadow),
    inset 0 0 0 1px var(--vellum-soft),
    inset 0 0 0 3px var(--gold-leaf),
    inset 0 0 0 4px var(--vellum-soft);
}
.end-vignette-loss { filter: grayscale(0.5) brightness(0.85); }

/* ---- Mobile (≤720px) tweaks for the storybook layer ---- */
@media (max-width: 720px) {
  .combat {
    grid-template-areas:
      "scene"
      "strip"
      "sentence"
      "permanent"
      "hand"
      "footer"
      "log";
    grid-template-columns: 1fr;
  }
  .scene-panel { min-height: 240px; }
  .scene-figures {
    grid-template-columns: 110px 1fr;
    gap: 10px;
    padding: 10px 12px;
    min-height: 240px;
  }
  .hero-svg { max-width: 110px; }
  .hero-stamp { font-size: 0.6rem; padding: 2px 6px; letter-spacing: 1px; }
  .scene-enemy { width: 88px; }
  .scene-enemy-art { width: 80px; height: 80px; padding: 5px; }
  .scene-enemy-name { font-size: 0.65rem; letter-spacing: 1px; }
  .scene-enemy-intent { font-size: 0.55rem; padding: 1px 5px; letter-spacing: 1px; }
  .scene-enemy-hp { height: 7px; }
  .scene-enemy-hp-text { font-size: 0.55rem; line-height: 7px; }
  .scene-panel::before, .scene-panel::after { width: 16px; height: 16px; }
  .run-text .drop-wrap .phase-vignette { width: 50px; height: 50px; opacity: 0.45; }
  .margin-vine, .margin-bird, .margin-flourish { display: none; }
  .scene-card .map-preview { height: 56px; }
  .card { padding-top: 22px; }
  .card .card-name { padding-left: 24px; }
  .card-glyph-corner { width: 16px; height: 16px; top: 16px; left: 6px; }
  .card-stripe { height: 12px; }
  .card .card-cost { top: 12px; }
  .end-vignette { height: 130px; margin-bottom: 16px; }
}

/* ============================================================
   Scene illustrations — title banner, fire blaze, mirror plate
   ============================================================ */
.title-banner-wrap {
  width: 100%;
  max-width: 520px;
  margin: 0 auto 18px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 4px 14px rgba(20, 12, 4, 0.45),
    inset 0 0 0 1px var(--vellum-soft),
    inset 0 0 0 3px var(--gold-leaf),
    inset 0 0 0 4px var(--vellum-soft);
}
.title-banner {
  display: block;
  width: 100%;
  height: 180px;
}
@media (max-width: 720px) {
  .title-banner { height: 130px; }
  .title-banner-wrap { margin-bottom: 12px; }
}

.scene-illustration {
  display: flex;
  justify-content: center;
  margin: 0 auto 14px;
  width: 100%;
}
.fire-blaze {
  width: 180px;
  height: 180px;
  filter: drop-shadow(0 8px 18px rgba(255, 120, 30, 0.35));
}
.mirror-plate {
  width: 160px;
  height: 200px;
  filter: drop-shadow(0 6px 14px rgba(20, 12, 4, 0.5));
}
@media (max-width: 720px) {
  .fire-blaze   { width: 140px; height: 140px; }
  .mirror-plate { width: 120px; height: 150px; }
  .scene-illustration { margin-bottom: 8px; }
}

.endgame-banner {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 18px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  overflow: hidden;
  box-shadow:
    0 6px 18px rgba(20, 12, 4, 0.45),
    inset 0 0 0 1px var(--vellum-soft),
    inset 0 0 0 3px var(--gold-leaf),
    inset 0 0 0 4px var(--vellum-soft);
}
.endgame-banner .end-vignette {
  width: 100%;
  height: 180px;
  display: block;
  margin: 0;
}
@media (max-width: 720px) {
  .endgame-banner .end-vignette { height: 140px; }
}

/* Merchant + Shrine illustration sizing */
.merchant-stall {
  width: 220px;
  height: 160px;
  filter: drop-shadow(0 6px 14px rgba(20, 12, 4, 0.45));
  border: 1px solid var(--ink);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--vellum-soft), inset 0 0 0 3px var(--gold-leaf), inset 0 0 0 4px var(--vellum-soft);
}
.shrine-stone {
  width: 200px;
  height: 200px;
  filter: drop-shadow(0 6px 14px rgba(20, 12, 4, 0.45));
  border: 1px solid var(--ink);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--vellum-soft), inset 0 0 0 3px var(--gold-leaf), inset 0 0 0 4px var(--vellum-soft);
}
@media (max-width: 720px) {
  .merchant-stall { width: 180px; height: 130px; }
  .shrine-stone   { width: 160px; height: 160px; }
}

/* Hero scale bump — give the figure more presence in the scene */
.hero-svg { max-width: 220px; }
@media (max-width: 720px) {
  .hero-svg { max-width: 150px; }
}

/* Reward laurel illustration above the VICTORY heading */
.reward-laurel-wrap {
  width: 220px;
  margin: 0 auto -6px;
  filter: drop-shadow(0 4px 10px rgba(20, 12, 4, 0.35));
}
.reward-laurel { display: block; width: 100%; height: auto; }
@media (max-width: 720px) {
  .reward-laurel-wrap { width: 180px; margin-bottom: -10px; }
}

/* Slow drift on the scene-backdrop clouds + ground fog — brings the static
   painting to life without being distracting. Respect reduced-motion. */
.scene-clouds {
  animation: cloud-drift 90s linear infinite;
  transform-origin: center;
}
.scene-fog {
  animation: fog-drift 60s ease-in-out infinite alternate;
}
@keyframes cloud-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-180px); }
}
@keyframes fog-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(40px); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-clouds, .scene-fog { animation: none; }
}

/* Title banner: birds drift slowly across the sky and the sun glows
   softly. Subtle enough to feel like a still landscape, not a busy GIF. */
.title-birds {
  animation: title-birds-drift 38s linear infinite;
  transform-origin: center;
}
.title-sun-halo {
  animation: title-sun-pulse 9s ease-in-out infinite;
  transform-origin: 300px 148px;
}
@keyframes title-birds-drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-30px, -4px); }
  100% { transform: translate(0, 0); }
}
@keyframes title-sun-pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .title-birds, .title-sun-halo { animation: none; }
}

/* Tiny cloaked figure on the title banner — bob with each step. */
.title-figure {
  animation: title-figure-walk 1.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center bottom;
}
@keyframes title-figure-walk {
  0%, 100% { transform: translate(296px, 198px); }
  50%      { transform: translate(296px, 197px); }
}
@media (prefers-reduced-motion: reduce) {
  .title-figure { animation: none; }
}

/* Campfire flame — outer + inner flame stretch/squeeze with offset
   timings, glow halo throbs gently. Two different durations so they
   don't sync up. transform-origin sits at the base of the flame so
   the squash reads as licking upward. */
.fb-outer {
  animation: fire-flicker 1.7s ease-in-out infinite;
  transform-origin: 120px 204px;
}
.fb-inner {
  animation: fire-flicker-inner 1.1s ease-in-out infinite;
  transform-origin: 120px 188px;
}
.fb-glow {
  animation: fire-glow-pulse 3.1s ease-in-out infinite;
  transform-origin: 120px 155px;
}
@keyframes fire-flicker {
  0%, 100% { transform: scale(1, 1)       skewX(0deg); }
  25%      { transform: scale(1.02, 0.97) skewX(-0.6deg); }
  50%      { transform: scale(0.98, 1.03) skewX(0.4deg); }
  75%      { transform: scale(1.01, 0.98) skewX(-0.2deg); }
}
@keyframes fire-flicker-inner {
  0%, 100% { transform: scale(1, 1)       translateY(0); opacity: 0.95; }
  40%      { transform: scale(1.04, 0.94) translateY(-2px); opacity: 1; }
  70%      { transform: scale(0.96, 1.05) translateY(1px); opacity: 0.9; }
}
@keyframes fire-glow-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.05); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-outer, .fb-inner, .fb-glow { animation: none; }
}

/* Merchant lantern — tiny flame flickers, halo throbs softly. The
   flame is centred at the lantern glass (178,110), the halo at the
   stall (186,106). */
.ms-flame-outer {
  animation: lantern-flicker 0.9s ease-in-out infinite;
  transform-origin: 178px 113px;
}
.ms-flame-inner {
  animation: lantern-flicker 0.7s ease-in-out infinite reverse;
  transform-origin: 178px 112px;
}
.ms-halo {
  animation: lantern-halo 2.6s ease-in-out infinite;
  transform-origin: 186px 106px;
}
@keyframes lantern-flicker {
  0%, 100% { transform: scaleY(1)    translateY(0); }
  50%      { transform: scaleY(1.18) translateY(-0.5px); }
}
@keyframes lantern-halo {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.04); opacity: 0.88; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-flame-outer, .ms-flame-inner, .ms-halo { animation: none; }
}

/* Mirror plate — glass sheen drifts slowly and the highlight crescent
   breathes in/out, so the surface looks reflective instead of painted. */
.mp-sheen {
  animation: mirror-sheen 7.4s ease-in-out infinite;
  transform-origin: 120px 130px;
}
.mp-highlight {
  animation: mirror-highlight 4.8s ease-in-out infinite;
}
@keyframes mirror-sheen {
  0%, 100% { opacity: 0.5; transform: translateX(0); }
  50%      { opacity: 0.7; transform: translateX(3px); }
}
@keyframes mirror-highlight {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-sheen, .mp-highlight { animation: none; }
}

/* Shrine candle — same offset-flicker pattern as the lantern. */
.ss-flame-outer {
  animation: lantern-flicker 1.1s ease-in-out infinite;
  transform-origin: 161px 180px;
}
.ss-flame-inner {
  animation: lantern-flicker 0.8s ease-in-out infinite reverse;
  transform-origin: 161px 178px;
}
.ss-flame-glow {
  animation: shrine-glow 2.9s ease-in-out infinite;
  transform-origin: 161px 180px;
}
@keyframes shrine-glow {
  0%, 100% { opacity: 0.18; transform: scale(1); }
  50%      { opacity: 0.28; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-flame-outer, .ss-flame-inner, .ss-flame-glow { animation: none; }
}

/* Permanent-strip noun/connector chips — make them feel like inked stamps
   on the page. Add hover lift, sharper border, slight ink-bleed shadow. */
.permanent-strip .word {
  position: relative;
  background:
    radial-gradient(ellipse 65% 55% at 50% 0%, rgba(255,240,200,0.45), transparent 80%),
    var(--vellum);
  border: 1px solid var(--ink);
  box-shadow:
    0 1px 2px var(--shadow-soft),
    inset 0 -1px 0 rgba(0,0,0,0.12);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.permanent-strip .word:hover {
  transform: translateY(-1px);
  background:
    radial-gradient(ellipse 65% 55% at 50% 0%, rgba(255,240,200,0.7), transparent 80%),
    var(--vellum);
  box-shadow:
    0 3px 5px var(--shadow-soft),
    inset 0 -1px 0 rgba(0,0,0,0.12);
}
.permanent-strip .word.connector {
  font-style: italic;
  letter-spacing: 1px;
  color: var(--ink-soft);
  border-color: var(--ink-soft);
}
.permanent-strip .word.connector:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.permanent-strip .word.collected {
  background:
    radial-gradient(ellipse 65% 55% at 50% 0%, rgba(255,225,170,0.55), transparent 80%),
    var(--vellum-soft);
  border-color: var(--gold-leaf);
  color: var(--ink);
  font-weight: 700;
}

/* Map ink-action buttons (PEEK / HIDE) — give them the inked-stamp feel
   to match the noun/connector chips. */
.ink-action {
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,240,200,0.4), transparent 80%),
    var(--vellum);
  border: 1px solid var(--ink-soft);
  color: var(--ink-soft);
  box-shadow:
    0 1px 2px var(--shadow-soft),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  transition: transform 120ms ease, background 120ms ease, color 120ms ease,
              border-color 120ms ease, box-shadow 120ms ease;
}
.ink-action:hover:not(:disabled) {
  transform: translateY(-1px);
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,225,170,0.7), transparent 80%),
    var(--vellum);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow:
    0 3px 5px var(--shadow-soft),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.ink-action .cost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  padding: 0 5px;
  margin-left: 2px;
  background: var(--wax);
  color: var(--vellum);
  border-radius: 9999px;
  font-size: 0.65rem;
  line-height: 14px;
  height: 14px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
}

/* Card-glyph corner — bump its presence so the verb category reads at
   a glance instead of as a small smudge. */
.card-glyph-corner {
  width: 28px !important;
  height: 28px !important;
  opacity: 0.78;
  color: var(--ink);
  filter: drop-shadow(0 1px 0 rgba(255, 240, 200, 0.45));
}
.card:hover .card-glyph-corner { opacity: 1; }
@media (max-width: 720px) {
  .card-glyph-corner { width: 22px !important; height: 22px !important; }
}

/* Folio chip in the run-sentence header — give it a deckle-edge inked
   look so it doesn't read as a plain box. */
.run-progress {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,240,200,0.45), transparent 80%),
    rgba(255, 240, 200, 0.4);
  border: 1px solid var(--rule);
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 200, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px var(--shadow-soft);
}

/* Stat-strip pills — inked-vellum stamps with a soft top-light so they
   read as small pressed counters instead of flat outlines. */
.stat-strip .stat-pill {
  background:
    linear-gradient(180deg, rgba(255, 240, 200, 0.55) 0%, transparent 60%),
    var(--vellum);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 1px 1px var(--shadow-soft);
}
.stat-strip .stat-pill.ink {
  background:
    linear-gradient(180deg, rgba(255, 225, 160, 0.4) 0%, transparent 60%),
    var(--vellum);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, 0.7),
    inset 0 -1px 0 rgba(135, 95, 30, 0.18),
    0 1px 1px var(--shadow-soft);
}
.stat-strip .tag {
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(255, 180, 140, 0.5), transparent 65%),
    linear-gradient(180deg, var(--wax) 0%, var(--wax-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 170, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 1px 1px var(--shadow-soft);
}

/* PASS / end-turn button — keep its inked-stamp body but tighten the
   pressed-in feel with a deeper inset shadow on hover. */
.end-turn::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 200, 170, 0.55), transparent 60%),
    radial-gradient(circle, var(--wax) 0%, var(--wax-dark) 100%);
  box-shadow: 0 1px 1px var(--shadow-soft), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.end-turn:hover {
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.3),
    0 2px 3px var(--shadow-soft);
}

/* Preview line — a subtle ruled writing-guide under the predicted
   sentence so the empty page actually looks like a page. */
.preview {
  position: relative;
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.preview::after {
  content: '';
  position: absolute;
  left: 36px;
  right: 4px;
  bottom: 0;
  height: 1px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--rule) 0 6px,
      transparent 6px 10px
    );
  opacity: 0.45;
  pointer-events: none;
}

/* CLEAR + the implicit "secondary" sentence-action button — inked-stamp
   so it doesn't read as a flat outlined rectangle next to the wax seal. */
.sentence-actions button:not(.primary) {
  background:
    linear-gradient(180deg, rgba(255, 240, 200, 0.5) 0%, transparent 60%),
    var(--vellum);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 1px 2px var(--shadow-soft);
  transition: transform 100ms ease, background 100ms ease, color 100ms ease,
              box-shadow 100ms ease;
}
.sentence-actions button:not(.primary):hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 3px 5px var(--shadow-soft);
}
.sentence-actions button:not(.primary):disabled {
  background: transparent;
  box-shadow: none;
}

/* Deck / discard piles — read as small stacks of folios, not bare text.
   The double border-bottom hints at sheets layered underneath. */
.pile {
  padding: 3px 10px 4px;
  background:
    linear-gradient(180deg, rgba(255, 240, 200, 0.45) 0%, transparent 70%),
    var(--vellum);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.6),
    0 1px 0 var(--vellum-soft),
    0 2px 0 var(--rule),
    0 3px 0 var(--vellum-soft),
    0 4px 0 var(--rule),
    0 5px 2px var(--shadow-soft);
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.pile:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.6),
    0 1px 0 var(--vellum-soft),
    0 2px 0 var(--rule),
    0 3px 0 var(--vellum-soft),
    0 4px 0 var(--rule),
    0 6px 3px var(--shadow-soft);
}