/* ============================================================
   Fang & Blight — web UI
   Style translated from the Unified Design Compendium:
   parchment card faces, near-black gothic board, antique brass,
   domain accent gems, engraved silhouettes.
   ============================================================ */

:root {
  --char: #131013;
  --char-2: #1b1518;
  --char-3: #241c20;
  --ink: #1d150f;
  --parch: #efe4c9;
  --parch-2: #e2d4b0;
  --parch-3: #d5c29a;
  --sepia: #8a6d4a;
  --bark: #4a3826;
  --brass: #a98a4e;
  --brass-hi: #d8b878;
  --brass-lo: #6f5a33;
  --gem-red: #8f2a2c;
  --ember: #c33d1e;
  --molten: #d8681f;
  --violet: #7b5bc9;
  --teal: #2fa08a;
  --bone: #e8e0cc;
  --blood: #7a1f24;

  --font-title: 'Grenze Gotisch', 'Cinzel', serif;
  --font-caps: 'Cinzel', serif;
  --font-body: 'IM Fell English', Georgia, serif;     /* flavor only — short lines */
  --font-read: 'Alegreya', Georgia, serif;            /* anything meant to be read */

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.017' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23m)' opacity='0.6'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--char);
  color: var(--parch);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* the dark stone table */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 90% 70% at 50% 38%, #241b1f 0%, #161114 55%, #0b090b 100%);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background-image: var(--mottle);
  opacity: 0.14; mix-blend-mode: overlay; pointer-events: none;
}

.hidden { display: none !important; }

button {
  font-family: var(--font-caps);
  cursor: pointer;
  border: 1px solid var(--brass-lo);
  background: linear-gradient(180deg, #2a2118, #1a1410);
  color: var(--brass-hi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 9px 20px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(216, 184, 120, 0.15), 0 2px 8px rgba(0,0,0,0.5);
  transition: all 0.15s ease;
}
button:hover { color: var(--parch); border-color: var(--brass); box-shadow: inset 0 0 12px rgba(216,184,120,0.12), 0 2px 10px rgba(0,0,0,0.6); }
button:active { transform: translateY(1px); }
button.primary { border-color: var(--brass); background: linear-gradient(180deg, #3a2c1c, #241a11); }
button.danger { color: #e0967f; border-color: #6e3020; }
button.danger:hover { color: #ffb9a0; border-color: var(--ember); box-shadow: inset 0 0 12px rgba(195,61,30,0.2); }
button:disabled { opacity: 0.35; cursor: default; }

/* ============ ornamental panel ============ */
.panel {
  position: relative;
  border: 1px solid var(--brass-lo);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(38,29,26,0.85), rgba(22,17,19,0.9));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), inset 0 0 30px rgba(0,0,0,0.35);
}
.panel::before {
  content: '';
  position: absolute; inset: 3px;
  border: 1px solid rgba(169, 138, 78, 0.28);
  border-radius: 2px;
  pointer-events: none;
}

.caps-label {
  font-family: var(--font-caps);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--brass-hi);
}

/* ============================================================
   TITLE SCREEN
   ============================================================ */
#screen-title {
  position: fixed; inset: 0;
  z-index: 50;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 28%, rgba(72,48,80,0.28), transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(40,26,16,0.5), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 45%, #221a1e 0%, #141013 55%, #0a080a 100%);
}
.title-frame {
  position: absolute; inset: clamp(8px, 1.8vh, 16px);
  border: 1px solid rgba(169,138,78,0.4);
  outline: 1px solid rgba(169,138,78,0.14);
  outline-offset: 5px;
  pointer-events: none;
  z-index: 3;
}
.title-frame .fc {
  position: absolute;
  color: var(--brass);
  font-size: clamp(8px, 1.6vh, 12px);
  line-height: 1;
  text-shadow: 0 0 6px rgba(216,184,120,0.5);
}
.title-frame .fc.tl { top: -0.55em; left: -0.36em; }
.title-frame .fc.tr { top: -0.55em; right: -0.36em; }
.title-frame .fc.bl { bottom: -0.55em; left: -0.36em; }
.title-frame .fc.br { bottom: -0.55em; right: -0.36em; }

.title-inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(4px, 1.6vh, 16px);
  padding: clamp(16px, 4vh, 40px);
}
.logo-row { display: flex; align-items: center; gap: clamp(8px, 2vw, 26px); }
.thorn-branch {
  width: clamp(50px, 11vw, 150px); height: clamp(12px, 2.4vh, 24px);
  color: rgba(169,138,78,0.55);
  flex: none;
}
.title-logo {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(40px, min(13vh, 10.5vw), 110px);
  line-height: 0.95;
  color: var(--parch);
  text-align: center;
  text-shadow: 0 0 40px rgba(123,91,201,0.3), 0 3px 0 rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.9);
  letter-spacing: 0.01em;
}
#storm-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}
.title-logo .amp { color: var(--brass-hi); font-size: 0.55em; vertical-align: 12%; padding: 0 0.08em;
  text-shadow: 0 0 18px rgba(216,184,120,0.6); }
.title-tag {
  font-family: var(--font-body); font-style: italic;
  color: var(--brass); font-size: clamp(13px, 2.6vh, 20px);
}

/* the seal — dark circle, skull, four domain diamonds (rulebook cover motif) */
.title-seal {
  position: relative;
  width: clamp(96px, 24vh, 170px);
  aspect-ratio: 1;
  margin: clamp(2px, 1.2vh, 14px) 0;
  flex: none;
}
.seal-ring {
  position: absolute; inset: 4%;
  border-radius: 50%;
  border: 1px solid rgba(169,138,78,0.35);
}
.seal-circle {
  position: absolute; inset: 13%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #2e2233, #150f1a 75%);
  border: 1px solid rgba(169,138,78,0.55);
  box-shadow: 0 0 34px rgba(123,91,201,0.22), inset 0 0 22px rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
}
.seal-circle svg { width: 48%; height: 48%; color: var(--parch); opacity: 0.95;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)); }
.title-seal .seal-gem { position: absolute; width: 20%; height: 20%; }
.title-seal .seal-gem svg { filter: drop-shadow(0 0 4px currentColor); }
.title-seal .seal-gem.n { top: -7%; left: 50%; margin-left: -10%; }
.title-seal .seal-gem.s { bottom: -7%; left: 50%; margin-left: -10%; }
.title-seal .seal-gem.e { right: -7%; top: 50%; margin-top: -10%; }
.title-seal .seal-gem.w { left: -7%; top: 50%; margin-top: -10%; }

.title-buttons { display: flex; gap: clamp(8px, 1.6vw, 16px); margin-top: clamp(2px, 1vh, 10px); flex-wrap: wrap; justify-content: center; }
.title-paths {
  display: flex; align-items: center; gap: clamp(6px, 1.2vw, 14px);
  margin-top: clamp(4px, 1.2vh, 12px);
  flex-wrap: wrap; justify-content: center;
}
.path-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-caps);
  font-size: clamp(9px, 1.6vh, 11px);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--parch-3);
  border: 1px solid rgba(169,138,78,0.35);
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
  background: rgba(0,0,0,0.3);
  transition: all 0.15s ease;
  user-select: none;
}
.path-chip:hover { border-color: var(--brass); color: var(--parch); }
.path-chip:has(input:checked) { color: var(--brass-hi); border-color: var(--brass); box-shadow: inset 0 0 10px rgba(216,184,120,0.1); }
.path-chip input { accent-color: #a98a4e; margin: 0; }
#title-omens .path-chip:has(input:checked) { color: #c9a0e8; border-color: rgba(123,91,201,0.6); box-shadow: inset 0 0 10px rgba(123,91,201,0.12); }
.blood-moon {
  font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #e06a5a;
  margin-left: 10px;
  text-shadow: 0 0 10px rgba(195,61,30,0.6);
  animation: pulse-danger 1.6s ease-in-out infinite;
}
#torch-flame { line-height: 1; transition: font-size 0.4s ease; }
.relic-flash.omen { border-color: rgba(123,91,201,0.7); box-shadow: 0 10px 44px rgba(0,0,0,0.8), 0 0 24px rgba(123,91,201,0.35); }
.relic-flash.omen .rf-art svg { color: #b48fe8; width: 54px; height: 54px; }
.title-buttons button { font-size: clamp(11px, 2vh, 14px); padding: clamp(8px, 1.8vh, 13px) clamp(16px, 3vw, 30px); }
.title-foot {
  font-style: italic; color: rgba(169,138,78,0.75);
  font-size: clamp(11px, 2vh, 14px);
  letter-spacing: 0.04em;
  margin-top: clamp(2px, 1.4vh, 14px);
  text-align: center;
}

/* drifting spores */
.embers { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.embers span {
  position: absolute;
  bottom: -12px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216,184,120,0.9), rgba(216,184,120,0));
  animation: ember-rise linear infinite;
  opacity: 0;
}
.embers span:nth-child(3n) { background: radial-gradient(circle, rgba(169,143,232,0.85), rgba(169,143,232,0)); }
.embers span:nth-child(4n) { width: 3px; height: 3px; }
.embers span:nth-child(1)  { left: 8%;  animation-duration: 13s; animation-delay: 0s; }
.embers span:nth-child(2)  { left: 18%; animation-duration: 17s; animation-delay: 4s; }
.embers span:nth-child(3)  { left: 27%; animation-duration: 12s; animation-delay: 8s; }
.embers span:nth-child(4)  { left: 36%; animation-duration: 19s; animation-delay: 2s; }
.embers span:nth-child(5)  { left: 45%; animation-duration: 14s; animation-delay: 10s; }
.embers span:nth-child(6)  { left: 54%; animation-duration: 16s; animation-delay: 6s; }
.embers span:nth-child(7)  { left: 63%; animation-duration: 12.5s; animation-delay: 1s; }
.embers span:nth-child(8)  { left: 71%; animation-duration: 18s; animation-delay: 9s; }
.embers span:nth-child(9)  { left: 79%; animation-duration: 13.5s; animation-delay: 5s; }
.embers span:nth-child(10) { left: 86%; animation-duration: 15s; animation-delay: 12s; }
.embers span:nth-child(11) { left: 93%; animation-duration: 20s; animation-delay: 3s; }
.embers span:nth-child(12) { left: 12%; animation-duration: 21s; animation-delay: 14s; }
@keyframes ember-rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  8% { opacity: 0.9; }
  60% { opacity: 0.55; }
  100% { transform: translateY(-105vh) translateX(4vw); opacity: 0; }
}

/* ============================================================
   DOMAIN GEM (diamond token)
   ============================================================ */
.domain-gem {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  flex: none;
}
.domain-gem .gem-frame {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #241d16, #151013);
  border: 1px solid var(--brass-lo);
  transform: rotate(45deg);
  box-shadow: inset 0 0 4px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.5);
}
.domain-gem svg { position: relative; width: 68%; height: 68%; filter: drop-shadow(0 0 3px currentColor); }

/* ============================================================
   GAME SCREEN LAYOUT
   ============================================================ */
#screen-game {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: 1fr 292px;
  gap: 10px;
  padding: 10px;
}
#board {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

/* ---------- player edges ---------- */
.edge {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
}
.edge-info { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#player-edge .edge-info { max-width: 42%; }
.edge .plate {
  display: flex; align-items: center; gap: 10px;
  min-width: 150px;
}
.plate .portrait {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--brass-lo);
  background: radial-gradient(circle at 35% 30%, #2c2226, #120e11);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.8);
}
.plate .portrait svg { width: 60%; height: 60%; color: var(--parch-3); }
.plate .who .name { font-family: var(--font-title); font-size: 19px; color: var(--parch); line-height: 1; }
.plate .who .sub { font-size: 11px; color: var(--brass); font-style: italic; }
.plate .initiative-token {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--brass);
  background: radial-gradient(circle at 35% 30%, #4a3a20, #241a0d);
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 0 10px rgba(216,184,120,0.35);
  flex: none;
}
.plate .initiative-token svg { width: 64%; height: 64%; color: var(--brass-hi); }
.edge.has-initiative .initiative-token { display: flex; }

/* blight track */
.blight-track { display: flex; align-items: center; gap: 5px; }
.blight-track .cell {
  width: 17px; height: 17px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.blight-track .cell::before {
  content: '';
  position: absolute; inset: 2px;
  transform: rotate(45deg);
  border: 1px solid rgba(169,138,78,0.4);
  background: rgba(0,0,0,0.5);
}
.blight-track .cell.filled::before {
  background: radial-gradient(circle, #5a3a80, #2c1c42);
  border-color: var(--violet);
  box-shadow: 0 0 7px rgba(123,91,201,0.55);
}
.blight-track .cell.skull-cell::before { border-color: rgba(143,42,44,0.6); }
.blight-track .cell svg { position: relative; width: 12px; height: 12px; color: rgba(233,220,190,0.5); }
.blight-track .cell.filled svg { color: var(--bone); }
.blight-track.danger .cell.filled::before { animation: pulse-danger 1.2s ease-in-out infinite; }
@keyframes pulse-danger {
  0%, 100% { box-shadow: 0 0 7px rgba(195,61,30,0.5); }
  50% { box-shadow: 0 0 14px rgba(195,61,30,0.95); }
}
.track-wrap { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }

/* spoils + hand-count chips */
.chip {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(169,138,78,0.35);
  border-radius: 3px;
  background: rgba(0,0,0,0.35);
}
.chip .num { font-family: var(--font-title); font-size: 20px; color: var(--parch); line-height: 1; min-width: 14px; text-align: center; }
.chip .caps-label { font-size: 9px; }

/* relic slots on the edge */
.relic-slots { display: flex; gap: 6px; }
.relic-slot {
  width: 58px; height: 80px;
  border: 1px dashed rgba(169,138,78,0.3);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.relic-slot:empty::after { content: '◆'; color: rgba(169,138,78,0.25); font-size: 11px; }

/* warden hand (card backs) */
.mini-backs { display: flex; }
.mini-back {
  width: 34px; height: 48px;
  border-radius: 3px;
  border: 1px solid var(--brass-lo);
  background: linear-gradient(160deg, #221a1e, #120e11);
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
  margin-left: -14px;
  position: relative;
}
.mini-back:first-child { margin-left: 0; }
.mini-back::after {
  content: ''; position: absolute; inset: 30%;
  background: var(--gem-red);
  clip-path: polygon(50% 0, 78% 50%, 50% 100%, 22% 50%);
  opacity: 0.35;
}

/* ---------- midband ---------- */
#midband {
  display: grid;
  grid-template-columns: 128px 1fr 128px;
  gap: 12px;
  align-items: stretch;
  min-height: 0;
  padding: 6px 4px;
}
.mid-col {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  /* `safe` falls back to flex-start when content overflows, so the top label
     is never clipped by the centering (classic flexbox overflow trap) */
  justify-content: safe center;
  padding: 12px 8px;
  min-height: 0;
  overflow: hidden auto;
  scrollbar-width: none;
}
.mid-col::-webkit-scrollbar { display: none; }
@media (max-height: 620px) {
  .mid-col { justify-content: flex-start; }
}
.pile-stack { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pile-count { font-family: var(--font-title); font-size: 15px; color: var(--brass-hi); }

/* the pit */
.pit-hole {
  width: 84px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, #2a1f38 0%, #0d0a11 60%, #060508 100%);
  border: 1px solid rgba(123,91,201,0.3);
  box-shadow: inset 0 6px 18px rgba(0,0,0,0.95), 0 0 16px rgba(123,91,201,0.12);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.pit-hole svg { width: 26px; height: 26px; color: rgba(123,91,201,0.55); }
.pit-hole .pile-count { position: absolute; bottom: -4px; right: 2px; }

/* clash center */
#clash-center {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  justify-content: safe center;
  gap: 8px;
  min-width: 0;
  /* tall prompt plates scroll inside the band instead of bleeding over the hand */
  min-height: 0;
  overflow: hidden auto;
  scrollbar-width: none;
}
#clash-center::-webkit-scrollbar { display: none; }
#clash-row { display: flex; align-items: center; justify-content: center; gap: 34px; }
.clash-slot {
  width: calc(var(--card-w) + 10px);
  aspect-ratio: 5 / 7;
  border: 1px solid rgba(169,138,78,0.18);
  border-radius: 9px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.25);
  transition: box-shadow 0.3s ease;
}
/* brass corner brackets on the slots */
.clash-slot::before, .clash-slot::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  pointer-events: none;
}
.clash-slot::before {
  top: -2px; left: -2px;
  border-top: 2px solid rgba(169,138,78,0.55);
  border-left: 2px solid rgba(169,138,78,0.55);
  border-top-left-radius: 8px;
}
.clash-slot::after {
  bottom: -2px; right: -2px;
  border-bottom: 2px solid rgba(169,138,78,0.55);
  border-right: 2px solid rgba(169,138,78,0.55);
  border-bottom-right-radius: 8px;
}
.clash-slot .slot-label {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
}
.clash-slot.winner-glow { box-shadow: 0 0 26px rgba(216,184,120,0.5), inset 0 0 18px rgba(216,184,120,0.15); border-color: var(--brass-hi); }
.clash-slot.loser-dim .card { filter: brightness(0.55) saturate(0.7); }
.clash-slot.pit-sink .card { animation: sink-away 1.1s ease forwards; }
@keyframes sink-away {
  to { transform: translateY(26px) scale(0.82); opacity: 0; filter: saturate(0) brightness(0.4); }
}
.vs-mark {
  font-family: var(--font-title);
  color: var(--brass);
  font-size: 26px;
  text-shadow: 0 0 12px rgba(0,0,0,0.8);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.vs-mark .diamond { width: 14px; height: 14px; color: var(--gem-red); }

/* power badges shown at reveal */
.power-badge {
  position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%) scale(0);
  min-width: 34px; height: 34px; padding: 0 6px;
  border-radius: 50%;
  border: 1px solid var(--brass);
  background: radial-gradient(circle at 35% 30%, #3a2c1c, #16100b);
  color: var(--parch);
  font-family: var(--font-title); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.8), 0 0 10px rgba(216,184,120,0.3);
  z-index: 5;
}
.power-badge.pop { animation: badge-pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
@keyframes badge-pop { to { transform: translateX(-50%) scale(1); } }
.power-detail {
  position: absolute; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10.5px; font-style: italic; color: var(--brass-hi);
  text-shadow: 0 1px 3px #000;
  z-index: 5;
}
.power-detail.above { top: -34px; }
.power-detail.below { bottom: -34px; }

/* prompt plate */
#prompt-plate {
  min-height: 86px;
  width: min(620px, 92%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px;
  text-align: center;
}
#prompt-plate .p-title { font-family: var(--font-title); font-size: 22px; color: var(--parch); line-height: 1.1; }
#prompt-plate .p-sub { font-size: 14.5px; color: var(--parch-2); font-style: italic; max-width: 520px; line-height: 1.45; }
#prompt-plate .p-buttons { display: flex; gap: 10px; margin-top: 2px; flex-wrap: wrap; justify-content: center; }

/* ---------- market column ---------- */
#market-col .market-cards { display: flex; flex-direction: column; gap: 8px; }

/* ---------- hand ---------- */
#player-edge { min-height: clamp(100px, 26vh, 196px); align-items: flex-end; padding-bottom: clamp(6px, 1.5vh, 12px); }
#hand {
  flex: 1;
  display: flex; align-items: flex-end; justify-content: center;
  min-width: 0;
  height: clamp(90px, 23vh, 178px);
}
#hand .hand-card {
  transition: transform 0.18s ease, filter 0.18s ease;
  transform-origin: 50% 100%;
  margin: 0 -12px;
  position: relative;
}
#hand .hand-card:hover { transform: translateY(-22px) scale(1.06); z-index: 30 !important; }
#hand.pickable .hand-card { cursor: pointer; }
#hand.pickable .hand-card .card { box-shadow: 0 0 0 1px rgba(216,184,120,0.25), 0 4px 14px rgba(0,0,0,0.7); }
#hand .hand-card.selected { transform: translateY(-30px) scale(1.08); z-index: 40 !important; }
#hand .hand-card.selected .card { box-shadow: 0 0 0 2px var(--brass-hi), 0 0 22px rgba(216,184,120,0.5); }

/* ============================================================
   CARDS
   ============================================================ */
:root {
  --card-w: clamp(92px, min(26vh, 24vw), 158px);
  --card-w-hand: clamp(72px, min(21vh, 19vw), 124px);
  --card-w-big: clamp(140px, min(56vh, 58vw), 250px);
  --card-w-mini: clamp(44px, min(11vh, 11vw), 78px);
}
.card {
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  position: relative;
  perspective: 900px;
  font-size: calc(var(--card-w) / 15);
  box-shadow: 0 4px 14px rgba(0,0,0,0.7);
  background: transparent;
}
.card .card-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1);
}
.card.show-b .card-inner { transform: rotateY(180deg); }
.card .face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.card .face.b { transform: rotateY(180deg); }
/* the face skin fills its .face wrapper completely */
.card .face .face-fill {
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
}

.card.size-hand { width: var(--card-w-hand); font-size: calc(var(--card-w-hand) / 14.2); }
.card.size-big { width: var(--card-w-big); font-size: calc(var(--card-w-big) / 16); }
.card.size-mini { width: var(--card-w-mini); font-size: calc(var(--card-w-mini) / 13); }

/* ---- natural face ---- */
.cface.natural {
  background:
    radial-gradient(ellipse 120% 100% at 50% 0%, rgba(255,246,214,0.5), transparent 40%),
    radial-gradient(ellipse 130% 120% at 50% 100%, rgba(120,90,50,0.25), transparent 55%),
    linear-gradient(160deg, #eee1c2, #dccca3 65%, #d0bd90);
  color: var(--ink);
  border: 1px solid #a08a5c;
  box-shadow: inset 0 0 0 2px rgba(233,220,190,0.7), inset 0 0 24px rgba(120,90,50,0.28);
  position: relative;
}
.cface.natural::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.1; pointer-events: none;
}
.cface .frame-line {
  position: absolute; inset: 4.5%;
  border: 1px solid rgba(90,70,40,0.55);
  border-radius: 4px;
  pointer-events: none;
}
/* corner ornaments (curl + crack) shared by all faces */
.corner-set { position: absolute; inset: 3.5%; pointer-events: none; z-index: 2; }
.corner-set .cnr { position: absolute; width: 2em; height: 2em; }
.corner-set .cnr svg { width: 100%; height: 100%; display: block; }
.corner-set .cnr.tl { top: 0; left: 0; }
.corner-set .cnr.tr { top: 0; right: 0; transform: scaleX(-1); }
.corner-set .cnr.bl { bottom: 0; left: 0; transform: scaleY(-1); }
.corner-set .cnr.br { bottom: 0; right: 0; transform: scale(-1); }
.corner-set.sepia { color: rgba(90,70,40,0.5); }
.corner-set.brass { color: rgba(169,138,78,0.55); }
.corner-set.dim { opacity: 0.55; }

.cface .titlebar {
  position: relative;
  margin: 8.5% 8% 0;
  display: flex; align-items: center; gap: 4%;
  z-index: 2;
}
/* a soft banner wash behind the whole header, fading out below */
.cface .titlebar::before {
  content: '';
  position: absolute; inset: -14% -6% -22%;
  background: linear-gradient(180deg, rgba(255, 248, 225, 0.5), rgba(255, 248, 225, 0.22) 62%, transparent);
  border-radius: 6px;
  pointer-events: none;
  z-index: -1;
}
.cface.blighted .titlebar::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25) 62%, transparent);
}
.cface .stat-orb {
  width: 2.1em; height: 2.1em;
  min-width: 2.1em;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title);
  font-size: 1.25em;
  background: radial-gradient(circle at 35% 30%, #3b2f22, #14100b);
  color: var(--parch);
  border: 1px solid rgba(169,138,78,0.8);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.7);
}
.cface .nameplate {
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-title);
  font-size: 1.35em;
  line-height: 1.05;
  padding-top: 0.08em;
  min-height: 1.55em;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(90,70,40,0.6);
  border-bottom: 1px solid rgba(90,70,40,0.6);
}
.cface.natural .nameplate {
  color: var(--ink);
  border: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 248, 225, 0.72) 15%, rgba(255, 248, 225, 0.72) 85%, transparent 100%);
}
.cface .gem { width: 2em; height: 2em; min-width: 2em; }

.cface .art-zone {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 4% 9%;
  min-height: 0;
  position: relative;
  z-index: 1;
}
.cface.natural .art-zone { color: #241708; }
.creature-art { width: 100%; height: 100%; }

.cface .footline {
  text-align: center;
  padding-bottom: 7%;
  font-family: var(--font-caps);
  font-size: 0.82em;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  z-index: 1;
}
.cface.natural .footline { color: rgba(74,56,38,0.85); }

/* ---- blighted face ---- */
.cface.blighted {
  background:
    radial-gradient(ellipse 130% 90% at 50% 105%, rgba(0,0,0,0.6), transparent 60%),
    radial-gradient(ellipse 120% 100% at 50% 30%, #211a20 0%, #141014 60%, #0b090c 100%);
  color: var(--parch);
  border: 1px solid var(--brass-lo);
  box-shadow: inset 0 0 0 1.5px rgba(169,138,78,0.5), inset 0 0 26px rgba(0,0,0,0.8);
  position: relative;
}
.cface.blighted::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--mottle);
  opacity: 0.16; mix-blend-mode: overlay; pointer-events: none;
}
.cface.blighted .frame-line { border-color: rgba(169,138,78,0.4); }
.cface.blighted .nameplate {
  color: var(--parch);
  border: none;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.62) 15%, rgba(0, 0, 0, 0.62) 85%, transparent 100%);
  text-shadow: 0 0 8px rgba(0,0,0,0.9);
}
.cface.blighted .stat-orb {
  background: radial-gradient(circle at 35% 30%, #46311c, #191108);
  border-color: var(--brass);
  color: var(--brass-hi);
  box-shadow: 0 0 8px rgba(216,184,120,0.25), inset 0 -2px 4px rgba(0,0,0,0.8);
}
.cface.blighted .art-zone { padding: 2% 7%; }
.cface.blighted .ability-box {
  margin: 0 7% 6%;
  padding: 4% 5%;
  font-family: var(--font-body);
  font-size: 0.95em;
  line-height: 1.3;
  font-style: italic;
  color: var(--parch-2);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(169,138,78,0.35);
  border-radius: 3px;
  text-align: center;
  z-index: 1;
}
.cface.blighted .footline { color: rgba(169,138,78,0.8); }

/* ---- shared card back ---- */
.cface.cardback {
  background:
    linear-gradient(180deg, #17121a 0%, #100c12 100%);
  border: 1px solid var(--brass-lo);
  box-shadow: inset 0 0 0 1.5px rgba(169,138,78,0.45);
  align-items: center; justify-content: center;
  position: relative;
}
.cface.cardback .back-parch {
  position: absolute; top: 6%; left: 6%; right: 6%; bottom: 52%;
  background: linear-gradient(170deg, #e6d8b4, #cfbd92);
  border-radius: 4px 4px 40% 40% / 4px 4px 14% 14%;
  box-shadow: inset 0 0 12px rgba(120,90,50,0.4);
}
.cface.cardback .back-emblem {
  position: absolute; top: 16%; bottom: 24%; left: 50%; transform: translateX(-50%);
  width: 50%;
  color: var(--blood);
  /* no CSS filter here: filtered descendants break backface-visibility during flips */
  z-index: 2;
}
.cface.cardback .back-emblem svg { width: 100%; height: 100%; }
.cface.cardback::after {
  content: ''; position: absolute; inset: 4.5%;
  border: 1px solid rgba(169,138,78,0.4);
  border-radius: 4px;
}

/* ---- relic cards ---- */
.relic-card {
  width: clamp(52px, 13.5vh, 92px);
  aspect-ratio: 92 / 126;
  border-radius: 6px;
  border: 1px solid var(--brass-lo);
  background:
    radial-gradient(ellipse 120% 90% at 50% 20%, #241d22 0%, #131015 65%, #0c0a0d 100%);
  box-shadow: inset 0 0 0 1px rgba(169,138,78,0.35), 0 3px 10px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 5px 6px;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.relic-card .relic-art { width: 66%; aspect-ratio: 1; height: auto; color: var(--bone); filter: drop-shadow(0 0 7px rgba(232,224,204,0.28)); }
.relic-card .relic-name {
  font-family: var(--font-caps);
  font-size: clamp(5.5px, 1.05vh, 8.5px); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brass-hi);
  text-align: center;
  margin-top: auto;
  line-height: 1.35;
}
.relic-card.small { width: 58px; height: 80px; padding: 5px 3px 4px; }
.relic-card.small .relic-art { width: 38px; height: 38px; }
.relic-card.small .relic-name { font-size: 6.3px; }
.relic-card.usable { cursor: pointer; box-shadow: 0 0 0 1px var(--brass), 0 0 14px rgba(216,184,120,0.4); }
.relic-card.usable:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--brass-hi), 0 0 20px rgba(216,184,120,0.6); }
.relic-card.claimable { cursor: pointer; box-shadow: 0 0 0 1px var(--brass), 0 0 12px rgba(216,184,120,0.35); }
.relic-card.claimable:hover { transform: translateY(-3px) scale(1.04); }

/* ============================================================
   CHRONICLE (log)
   ============================================================ */
#chronicle {
  display: flex; flex-direction: column;
  min-height: 0;
  padding: 12px 0 8px;
}
#chronicle .chron-head {
  text-align: center;
  font-family: var(--font-title);
  font-size: 19px;
  color: var(--parch);
  padding-bottom: 4px;
}
#chronicle .thorn { height: 14px; color: var(--brass); opacity: 0.7; margin: 0 26px 6px; }
#chronicle .thorn svg { width: 100%; height: 100%; }
#log {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px 10px;
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--brass-lo) transparent;
  font-size: 14.5px;
  line-height: 1.4;
}
#log .entry { color: var(--parch-3); }
#log .entry.flavor { font-style: italic; color: var(--sepia); }
#log .entry.relic { color: var(--brass-hi); }
#log .entry.blight { color: #a98fd8; }
#log .entry.ability { color: #d8a878; }
#log .entry.win { color: var(--parch); }
#log .entry.grim { color: #b06a5a; font-style: italic; }
#log .entry.good { color: #8fbf9a; }
#log .entry.note { color: var(--parch-3); opacity: 0.8; }
#log .entry.reveal { color: var(--parch-2); }
#log .entry.clash-head {
  font-family: var(--font-caps); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 10px; color: var(--brass);
  border-bottom: 1px solid rgba(169,138,78,0.25);
  padding: 8px 0 3px; margin-top: 4px;
}

/* ============================================================
   MODALS
   ============================================================ */
#modal-root {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(5, 3, 6, 0.78);
  backdrop-filter: blur(2px);
}
#modal-root.open { display: flex; }
.modal {
  max-width: min(860px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 26px 34px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  animation: modal-in 0.25s ease;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(10px); } }
.modal .m-title { font-family: var(--font-title); font-size: 26px; color: var(--parch); text-align: center; line-height: 1.1; }
.modal .m-sub { font-style: italic; color: var(--parch-3); text-align: center; max-width: 560px; font-size: 14.5px; }
.modal .m-cards { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; padding: 6px 0; }
.modal .m-cards .pickable-card { cursor: pointer; transition: transform 0.15s ease; position: relative; }
.modal .m-cards .pickable-card:hover { transform: translateY(-6px); }
.modal .m-cards .pickable-card:hover .card { box-shadow: 0 0 0 2px var(--brass-hi), 0 0 22px rgba(216,184,120,0.5); }
.modal .m-cards .order-badge {
  position: absolute; top: -11px; right: -8px; z-index: 10;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gem-red); color: var(--bone);
  font-family: var(--font-title); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--brass-hi);
}
.modal .m-buttons { display: flex; gap: 12px; }
.modal .both-faces { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.modal .face-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* ============================================================
   GAME OVER
   ============================================================ */
#gameover-overlay {
  position: fixed; inset: 0; z-index: 95;
  display: none; align-items: center; justify-content: center;
  background: rgba(5, 3, 6, 0.86);
}
#gameover-overlay.open { display: flex; }
.go-plate { padding: 40px 60px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.go-plate .go-skull { width: 76px; height: 76px; color: var(--violet); filter: drop-shadow(0 0 22px rgba(123,91,201,0.7)); }
.go-plate .go-skull.gold { color: var(--brass-hi); filter: drop-shadow(0 0 22px rgba(216,184,120,0.5)); }
.go-plate h2 { font-family: var(--font-title); font-size: 44px; color: var(--parch); line-height: 1; }
.go-plate .go-sub { font-style: italic; color: var(--parch-3); font-size: 16px; max-width: 460px; }
.go-plate .go-score { display: flex; gap: 40px; margin: 12px 0; }
.go-plate .go-score .col { display: flex; flex-direction: column; gap: 2px; }
.go-plate .go-score .num { font-family: var(--font-title); font-size: 40px; color: var(--parch); }

/* ============================================================
   BESTIARY SCREEN
   ============================================================ */
#screen-bestiary {
  position: fixed; inset: 0; z-index: 60;
  overflow-y: auto;
  padding: 30px 40px 60px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(72,48,80,0.18), transparent 60%),
    #100d10;
}
#screen-bestiary .b-head { text-align: center; margin-bottom: 6px; }
#screen-bestiary .b-head h1 { font-family: var(--font-title); font-size: 44px; color: var(--parch); }
#screen-bestiary .b-head .sub { font-style: italic; color: var(--brass); }
#screen-bestiary .b-domain { margin: 30px auto 0; max-width: 1180px; }
#screen-bestiary .b-domain h2 {
  font-family: var(--font-caps); font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
#screen-bestiary .b-grid { display: flex; gap: 18px; flex-wrap: wrap; }
#screen-bestiary .flip-hint { text-align: center; color: var(--sepia); font-style: italic; margin-top: 10px; font-size: 14px; }
#screen-bestiary .b-card { cursor: pointer; }
#screen-bestiary .b-back { position: fixed; top: 22px; left: 26px; z-index: 65; }
#screen-bestiary .b-relics { display: flex; gap: 14px; flex-wrap: wrap; }
.relic-tip { font-size: 11.5px; color: var(--parch-3); font-style: italic; text-align: center; margin-top: 4px; max-width: 92px; line-height: 1.25; }

/* toast for the warden's hidden actions */
@keyframes float-up { from { opacity: 0; transform: translate(-50%, 8px); } 15% { opacity: 1; } 85% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -6px); } }

/* ============================================================
   DESIGN LAYER — ornament & atmosphere
   ============================================================ */

/* generated raster art fills a framed window */
.art-zone .art-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.art-zone .art-img.nat {
  border: 1px solid rgba(90,70,40,0.6);
  box-shadow: inset 0 0 12px rgba(60,40,20,0.35), 0 1px 3px rgba(60,40,20,0.3);
}
.art-zone .art-img.bli {
  border: 1px solid rgba(169,138,78,0.45);
  box-shadow: 0 0 14px rgba(0,0,0,0.6);
}
.relic-card .relic-img, .hp-relic-art .relic-img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(169,138,78,0.35);
  display: block;
}
.hp-relic-art { width: 120px; }
.relic-card .relic-img { flex: none; }

/* natural face: sparse ground flora strip */
.art-zone { position: relative; }
.ground-tufts {
  position: absolute;
  left: 6%; right: 6%; bottom: 8%;
  width: 88%; height: 9%;
  color: rgba(74,56,38,0.55);
  pointer-events: none;
}

/* blighted face: cracks + breathing corruption */
.crack-layer {
  position: absolute; inset: 2%;
  width: 96%; height: 96%;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
/* breathe with opacity, not filter — filters on face descendants break backface-visibility */
.cface.blighted .creature-art.blighted { animation: blight-breathe 3.4s ease-in-out infinite; }
@keyframes blight-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.86; }
}
.cface.blighted .stat-orb { animation: orb-smolder 3.4s ease-in-out infinite; }
@keyframes orb-smolder {
  0%, 100% { box-shadow: 0 0 8px rgba(216,184,120,0.25), inset 0 -2px 4px rgba(0,0,0,0.8); }
  50% { box-shadow: 0 0 13px rgba(216,184,120,0.45), inset 0 -2px 4px rgba(0,0,0,0.8); }
}

/* card back: nameplate strip */
.cface.cardback .back-title {
  position: absolute; bottom: 6.5%; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-caps);
  font-size: 0.78em;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(169,138,78,0.8);
  text-shadow: 0 1px 3px #000;
}

/* draw pile reads as a stack */
#pile-col .card.size-mini {
  box-shadow:
    3px 3px 0 -1px #0b090b, 3px 3px 0 0 rgba(169,138,78,0.45),
    6px 6px 0 -1px #0b090b, 6px 6px 0 0 rgba(169,138,78,0.3),
    0 8px 18px rgba(0,0,0,0.7);
}

/* the pit slowly churns */
.pit-hole::before {
  content: '';
  position: absolute; inset: 5%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(123,91,201,0.2) 18%, transparent 40%, rgba(123,91,201,0.1) 65%, transparent 85%);
  animation: pit-swirl 11s linear infinite;
}
@keyframes pit-swirl { to { transform: rotate(360deg); } }
.pit-hole svg { position: relative; z-index: 1; }

/* faint table emblem behind the clash */
#clash-center { position: relative; }
.table-emblem {
  position: absolute; top: 50%; left: 50%;
  width: min(46vh, 340px); height: min(46vh, 340px);
  transform: translate(-50%, -58%);
  color: var(--brass);
  opacity: 0.05;
  pointer-events: none;
}

/* panel headers get flanking marks */
.mid-col > .caps-label::before, .mid-col > .caps-label::after,
.pile-stack > .caps-label::before, .pile-stack > .caps-label::after {
  content: '◆';
  font-size: 0.72em;
  opacity: 0.55;
  margin: 0 0.55em;
  vertical-align: 8%;
}

/* blight track: thread the diamonds on a line */
.blight-track { position: relative; }
.blight-track::before {
  content: '';
  position: absolute; left: 3px; right: 3px; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(169,138,78,0.35) 12%, rgba(169,138,78,0.35) 88%, transparent);
}
.blight-track .cell { position: relative; z-index: 1; }

/* the ground — terrain marker */
#terrain-marker {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
  position: relative; z-index: 4;
  min-height: 30px;
}
.terrain-text {
  font-family: var(--font-caps);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}
.terrain-text i {
  font-family: var(--font-body); font-size: 12.5px;
  text-transform: none; letter-spacing: 0.03em;
  color: var(--parch-3);
}
#terrain-marker.pop { animation: terrain-pop 0.5s ease; }
@keyframes terrain-pop { from { opacity: 0; transform: translateY(-6px); } }
@media (max-height: 560px) {
  #terrain-marker { position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap; }
  #terrain-marker.pop { animation: terrain-pop-c 0.5s ease; }
  @keyframes terrain-pop-c { from { opacity: 0; } }
}
#log .entry.terrain { color: var(--brass-hi); font-style: italic; }

/* relic played — flash card */
.relic-flash {
  position: fixed; left: 50%; top: 16%;
  transform: translateX(-50%);
  z-index: 85;
  display: flex; align-items: center; gap: 14px;
  max-width: min(430px, 92vw);
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(44,34,30,0.97), rgba(24,18,20,0.97));
  border: 1px solid var(--brass);
  border-radius: 6px;
  box-shadow: 0 10px 44px rgba(0,0,0,0.8), 0 0 24px rgba(216,184,120,0.25);
  animation: rf-in 0.32s cubic-bezier(0.2, 1.2, 0.4, 1);
  pointer-events: none;
}
@keyframes rf-in { from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.92); } }
.relic-flash.gone { opacity: 0; transition: opacity 0.45s ease; }
.rf-art { width: 64px; flex: none; }
.rf-art .relic-art, .rf-art .relic-img { width: 64px; height: 64px; color: var(--bone); }
.rf-art .relic-img { object-fit: cover; border-radius: 4px; border: 1px solid rgba(169,138,78,0.4); }
.rf-who { font-size: 9px; }
.rf-name { font-family: var(--font-title); font-size: 20px; color: var(--parch); line-height: 1.1; }
.rf-text { font-size: 13px; font-style: italic; color: var(--parch-2); line-height: 1.35; }

/* prompt plate finials */
#prompt-plate::after {
  content: '';
  position: absolute; left: 12%; right: 12%; top: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(169,138,78,0.4), transparent);
}

/* ============================================================
   THE FIELD MANUAL
   ============================================================ */
#screen-manual {
  position: fixed; inset: 0; z-index: 62;
  overflow-y: auto;
  padding: 30px 40px 60px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(72,48,80,0.18), transparent 60%),
    #100d10;
}
#screen-manual .b-head h1 { font-family: var(--font-title); font-size: clamp(30px, 7vh, 44px); color: var(--parch); }
#screen-manual .b-head { text-align: center; margin-bottom: 6px; }
#screen-manual .b-head .sub { font-style: italic; color: var(--brass); }
#screen-manual .b-back { position: fixed; top: 22px; left: 26px; z-index: 65; }
#manual-content { max-width: 1100px; margin: 0 auto; }

.man-section { margin-top: clamp(24px, 5vh, 44px); }
.man-section h2 {
  font-family: var(--font-caps); font-size: 15px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--parch); margin-bottom: 14px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.man-gem { color: var(--gem-red); font-size: 12px; }
.man-note { font-family: var(--font-body); font-style: italic; text-transform: none; letter-spacing: 0.03em; font-size: 13px; color: var(--sepia); }
.man-lead { font-size: 15.5px; line-height: 1.6; color: var(--parch-2); max-width: 820px; }
.danger-text { color: #b48fe8; }

.man-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.man-step { padding: 16px 18px 14px; position: relative; }
.man-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.man-step-n {
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-size: 17px; color: var(--parch);
  background: radial-gradient(circle at 35% 30%, #3a2c1c, #16100b);
  border: 1px solid var(--brass); border-radius: 50%;
}
.man-step-title { font-family: var(--font-title); font-size: 21px; color: var(--parch); }
.man-step-rule { font-size: 13.5px; line-height: 1.5; color: var(--parch-3); margin-bottom: 10px; }
.man-actions { margin-bottom: 6px; }
.man-action-list { margin: 0 0 4px 16px; padding: 0; }
.man-action-list li { font-size: 13px; line-height: 1.5; color: var(--parch-2); margin-bottom: 4px; }
.man-action-list b { color: var(--brass-hi); }
.man-demo { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.man-demo-cap { font-size: 12px; font-style: italic; color: var(--sepia); max-width: 150px; }
/* the demo card flips via the standard .show-b mechanism (toggled by a timer in buildManual) */

/* aux screens: the peddler, trading post, craft guide */
.aux-screen {
  position: fixed; inset: 0; z-index: 61;
  overflow-y: auto;
  padding: 30px 40px 60px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(72,48,80,0.18), transparent 60%),
    #100d10;
}
.aux-screen .b-head h1 { font-family: var(--font-title); font-size: clamp(30px, 7vh, 44px); color: var(--parch); }
.aux-screen .b-head { text-align: center; margin-bottom: 14px; }
.aux-screen .b-head .sub { font-style: italic; color: var(--brass); font-family: var(--font-body); }
.aux-screen .b-back { position: fixed; top: 22px; left: 26px; z-index: 65; }
#peddler-wares, #post-wares, #craft-content { max-width: 1050px; margin: 0 auto; }

.title-links { display: flex; gap: clamp(12px, 3vw, 30px); margin-top: clamp(4px, 1.4vh, 12px); }
.title-links a {
  font-family: var(--font-caps); font-size: clamp(9px, 1.7vh, 11px);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass); text-decoration: none;
  transition: color 0.15s ease, text-shadow 0.15s ease;
}
.title-links a:hover { color: var(--parch); text-shadow: 0 0 10px rgba(216,184,120,0.5); }

.ember-purse {
  display: flex; align-items: baseline; gap: 8px;
  width: fit-content; margin: 0 auto 22px;
  padding: 10px 22px;
}
#ember-count { font-family: var(--font-title); font-size: 30px; color: var(--molten); text-shadow: 0 0 14px rgba(216,104,31,0.5); }
.ember-hint { font-family: var(--font-read); font-size: 12.5px; color: var(--parch-3); }

.wares-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.ware { padding: 20px 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.ware-icon { width: 54px; height: 54px; color: var(--brass-hi); }
.ware-icon svg { width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(216,184,120,0.3)); }
.ware-name { font-family: var(--font-title); font-size: 22px; color: var(--parch); }
.ware-text { font-family: var(--font-read); font-size: 15px; color: var(--parch-2); line-height: 1.55; flex: 1; }
.ware-img { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; border: 1px solid rgba(169,138,78,0.35); }
.ware-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wares-grid.post .ware { padding-top: 14px; }
.wares-grid.post .ware-img { aspect-ratio: 1 / 1; }
.ware.clickable { cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease; }
.ware.clickable:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.55); }
.ware.clickable:hover .ware-img { border-color: var(--brass-hi); }

/* one ware, up close */
.modal.ware-modal { max-width: 720px; width: min(720px, 94vw); }
.ware-detail { display: flex; gap: 18px; align-items: flex-start; text-align: left; }
.ware-detail-img {
  flex: 0 0 46%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px;
  border: 1px solid rgba(169,138,78,0.45);
}
.ware-detail-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ware-detail-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ware-detail-list {
  margin: 0; padding-left: 18px; font-family: var(--font-read);
  font-size: 15px; color: var(--parch-2); line-height: 1.65;
}
.modal.ware-modal .ware-text { font-size: 15.5px; }
.ware-opt-row { display: flex; gap: 7px; flex-wrap: wrap; }
.ware-opt {
  min-width: 42px; padding: 5px 10px; font-family: var(--font-caps);
  font-size: 12px; letter-spacing: 0.06em;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(169,138,78,0.4);
  color: var(--parch-2); border-radius: 3px; cursor: pointer;
}
.ware-opt.sel { border-color: var(--brass-hi); color: var(--parch); box-shadow: 0 0 8px rgba(216,184,120,0.25); }
.ware-detail-note { font-size: 13px; font-style: italic; color: var(--parch-3); }
/* the print's browsable art gallery */
.ware-gal {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px;
  scrollbar-width: thin; max-width: 100%;
}
.ware-gal-thumb {
  width: 54px; height: 54px; flex: none; object-fit: cover;
  border-radius: 3px; border: 1px solid rgba(169,138,78,0.35);
  cursor: pointer; opacity: 0.8;
}
.ware-gal-thumb:hover { opacity: 1; }
.ware-gal-thumb.sel { border-color: var(--brass-hi); opacity: 1; box-shadow: 0 0 8px rgba(216,184,120,0.3); }
.ware-gal-label { font-family: var(--font-caps); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-hi); }

/* voice subtitles: what the cast is saying, in a caption box above the hand */
#voice-subs {
  position: fixed; left: 50%; bottom: clamp(120px, 24vh, 200px);
  transform: translateX(-50%) translateY(8px);
  max-width: min(640px, 86vw);
  padding: 9px 18px 11px;
  background: rgba(16, 12, 14, 0.92);
  border: 1px solid rgba(169,138,78,0.5);
  border-radius: 7px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55);
  text-align: center;
  z-index: 930; pointer-events: none;
  opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
}
#voice-subs.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#voice-subs .vs-who {
  font-family: var(--font-caps); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brass-hi); margin-bottom: 2px;
}
#voice-subs .vs-text {
  font-family: var(--font-read); font-style: italic;
  font-size: 14.5px; line-height: 1.5; color: var(--parch);
}
.mix-check { font-family: var(--font-read); font-size: 13px; color: var(--parch-2); display: flex; align-items: center; gap: 7px; }

/* painted seals on the victory-path and omen chips */
.path-chip .chip-icon {
  width: 24px; height: 24px; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(169,138,78,0.5);
  box-shadow: 0 0 6px rgba(0,0,0,0.6);
  vertical-align: middle;
}
@media (max-width: 640px) {
  .ware-detail { flex-direction: column; }
  .ware-detail-img { flex: none; width: 100%; }
}

/* phone title screen: the tall column scrolls instead of clipping at both
   ends (flex centering overflow), buttons stack full width, and the path
   and omen chips become one tidy uniform column under centered headings */
@media (max-width: 640px) {
  .title-inner {
    justify-content: flex-start;
    overflow-y: auto;
    scrollbar-width: none;
    padding: max(14px, env(safe-area-inset-top)) 12px calc(28px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  .title-inner::-webkit-scrollbar { display: none; }
  .title-seal { margin: 8px 0 4px; flex: none; }
  .title-buttons {
    flex-direction: column; align-items: stretch;
    width: min(340px, 92vw); gap: 9px;
  }
  .title-buttons button { width: 100%; }
  .title-paths {
    display: grid; grid-template-columns: 1fr;
    gap: 7px; width: min(340px, 92vw);
    justify-items: stretch; margin-top: 8px;
  }
  .title-paths > .caps-label { text-align: center; margin-bottom: 2px; }
  .path-chip {
    width: 100%; box-sizing: border-box;
    justify-content: flex-start;
    padding: 9px 12px; font-size: 10.5px;
  }
  /* thumb-sized info targets: the seal grows, the ⓘ gets invisible padding */
  .path-chip .chip-icon { width: 34px; height: 34px; }
  .path-chip .chip-info { font-size: 15px; padding: 9px 7px; margin: -9px -2px; }
}
.model-shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.model-slot { padding: 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
#craft-content code { font-family: monospace; font-size: 0.9em; color: var(--brass-hi); background: rgba(0,0,0,0.4); padding: 1px 6px; border-radius: 3px; }

/* the guided hunt */
.man-guided {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 22px;
  flex-wrap: wrap;
}
.man-guided-title { font-family: var(--font-title); font-size: 24px; color: var(--parch); margin-bottom: 4px; }
.man-guided-sub { font-size: 13.5px; font-style: italic; color: var(--parch-3); max-width: 560px; line-height: 1.5; }

.tut-bar {
  position: fixed; right: 12px; bottom: 12px; z-index: 88;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(40,31,28,0.97), rgba(22,17,19,0.97));
  border: 1px solid var(--brass);
  border-radius: 5px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.7);
}
.tut-bar button { padding: 6px 12px; font-size: 10px; }
.tut-bubble {
  position: fixed; left: 50%; top: clamp(52px, 9vh, 76px);
  transform: translateX(-50%);
  z-index: 87;
  max-width: min(480px, 88vw);
  padding: 13px 20px;
  animation: rf-in 0.3s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.tut-say { font-size: 14.5px; line-height: 1.55; color: var(--parch-2); font-style: italic; text-align: center; }
.tut-ring {
  position: fixed; z-index: 86;
  border: 2px solid var(--brass-hi);
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 0 4000px rgba(5,3,6,0.35), 0 0 22px rgba(216,184,120,0.55), inset 0 0 14px rgba(216,184,120,0.2);
  animation: ring-pulse 1.6s ease-in-out infinite;
}
@keyframes ring-pulse {
  0%, 100% { border-color: var(--brass-hi); }
  50% { border-color: var(--ember); }
}
.tut-peek { position: absolute; z-index: 6; opacity: 0.95; pointer-events: none; }

/* worked example walkthrough */
.wx { display: flex; flex-direction: column; gap: 10px; }
.wx-stage {
  display: flex; align-items: stretch; justify-content: center; gap: clamp(10px, 4vw, 46px);
  padding: 16px 12px 18px;
}
.wx-side {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  min-width: 150px;
}
.wx-side.wx-hl { border-color: rgba(216,184,120,0.5); box-shadow: 0 0 18px rgba(216,184,120,0.12); }
.wx-side.wx-win { border-color: var(--brass-hi); box-shadow: 0 0 24px rgba(216,184,120,0.3); }
.wx-name { font-family: var(--font-title); font-size: 19px; color: var(--parch); }
.wx-init { color: var(--brass-hi); font-size: 14px; }
.wx-marks { font-size: 11px; color: #a98fd8; letter-spacing: 0.18em; }
.wx-marks .caps-label { margin-right: 6px; }
.wx-marks-dim { opacity: 0.25; }
.wx-slot {
  min-height: calc(var(--card-w-hand) * 1.45);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: relative;
}
.wx-empty {
  width: var(--card-w-hand); aspect-ratio: 5 / 7;
  border: 1px dashed rgba(169,138,78,0.3); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-caps); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(169,138,78,0.5);
}
.wx-peek { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wx-peek .caps-label { font-size: 8px; }
.wx-note { font-size: 12.5px; font-style: italic; color: var(--brass-hi); min-height: 18px; text-align: center; }
.wx-mid { display: flex; align-items: center; }
.wx-vs { color: var(--brass); font-size: 20px; }
.wx-caption {
  text-align: center;
  padding: 10px 18px;
  border-left: 2px solid rgba(169,138,78,0.4);
  border-right: 2px solid rgba(169,138,78,0.4);
}
.wx-step-title { font-family: var(--font-caps); text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; color: var(--brass-hi); display: block; margin-bottom: 4px; }
.wx-step-cap { font-size: 14.5px; color: var(--parch-2); font-style: italic; line-height: 1.5; }
.wx-controls { display: flex; align-items: center; justify-content: center; gap: 14px; }
.wx-dots { display: flex; gap: 7px; }
.wx-dot {
  width: 11px; height: 11px; padding: 0;
  border-radius: 0;
  transform: rotate(45deg);
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(169,138,78,0.45);
  box-shadow: none;
}
.wx-dot.on { background: var(--brass-hi); box-shadow: 0 0 8px rgba(216,184,120,0.6); }
@media (max-width: 640px) {
  .wx-stage { gap: 8px; }
  .wx-side { min-width: 0; padding: 8px 6px; }
  .wx-mid { display: none; }
}

.man-relics { display: flex; gap: 16px; flex-wrap: wrap; }
.man-relic { display: flex; flex-direction: column; align-items: center; width: 96px; }

.man-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 14px; }
@media (max-width: 980px) { .man-tables { grid-template-columns: 1fr; } }
.man-table { padding: 12px 16px; }
.man-table-head {
  font-family: var(--font-caps); letter-spacing: 0.2em; text-transform: uppercase; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(169,138,78,0.25);
}
.man-row {
  display: grid; grid-template-columns: 110px 150px 1fr; gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(169,138,78,0.1);
  font-size: 12.5px; line-height: 1.4;
  align-items: baseline;
}
.man-row:last-child { border-bottom: none; }
.man-row-nat { color: var(--parch-2); }
.man-row-bli { color: var(--brass-hi); font-style: italic; }
.man-row-ab { color: var(--parch-3); }
@media (max-width: 560px) { .man-row { grid-template-columns: 1fr; gap: 1px; } }

.man-center { text-align: center; margin-top: 16px; }
.man-edges { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.man-edge { font-size: 13px; line-height: 1.5; color: var(--parch-3); padding: 8px 12px; border-left: 2px solid rgba(169,138,78,0.35); }
.man-edge b { color: var(--parch-2); }

.man-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.man-tip { padding: 13px 16px; }
.man-tip-title { font-family: var(--font-title); font-size: 17px; color: var(--brass-hi); margin-bottom: 5px; }
.man-tip-body { font-size: 13px; line-height: 1.5; color: var(--parch-3); font-style: italic; }
.man-foot { text-align: center; font-style: italic; color: var(--sepia); margin: 40px 0 10px; }

/* in-game toggles */
#manual-toggle {
  position: fixed; right: 12px; top: 10px; z-index: 65;
  padding: 6px 12px; font-size: 10px;
}
#chron-toggle { right: 106px; }

/* ============================================================
   GENERATED UI CHROME (activates when art/ui_*.jpg exist)
   ============================================================ */
.title-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 30%;
  z-index: 0;
  pointer-events: none;
}
.plate .portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.seal-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  transform: scale(1.22);
  clip-path: circle(41%);
}
.gem-img {
  position: relative;
  display: inline-block;
  flex: none;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: var(--brass-lo);
}
.gem-img img {
  position: absolute; inset: 2px;
  width: calc(100% - 4px); height: calc(100% - 4px);
  object-fit: cover;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.thorn-img {
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: 0.85;
  display: block;
}
#chronicle .thorn:has(.thorn-img) { height: 26px; opacity: 1; }

/* ============================================================
   HOVER PREVIEW — big readable card at the screen edge
   ============================================================ */
#hover-preview {
  position: fixed;
  left: 14px; top: 50%;
  transform: translateY(-50%) scale(0.98);
  z-index: 80;
  display: none;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.12s ease;
  max-width: calc(var(--card-w-big) + 20px);
}
#hover-preview.open { display: flex; opacity: 1; transform: translateY(-50%) scale(1); }
#hover-preview.dock-right { left: auto; right: 14px; }
#hover-preview .card { box-shadow: 0 10px 40px rgba(0,0,0,0.85), 0 0 0 1px rgba(169,138,78,0.35); }
#hover-preview { max-width: calc(var(--card-w-big) + var(--card-w) + 40px); }
#hover-preview .hp-cards { display: flex; align-items: center; gap: 12px; }
#hover-preview .hp-other { display: flex; flex-direction: column; align-items: center; gap: 5px; }
#hover-preview .hp-other-label { font-size: 9px; }
@media (max-width: 760px) {
  #hover-preview .hp-other { display: none; }
  #hover-preview { max-width: calc(var(--card-w-big) + 20px); }
}
/* narrow panes: shrink the preview so it stops covering the table */
@media (max-width: 1000px) {
  #hover-preview { --card-w-big: clamp(140px, 28vw, 210px); --card-w: clamp(90px, 18vw, 130px); }
}

/* filtered descendants break backface-visibility — no CSS filters inside card faces */
.card .domain-gem svg { filter: none; }

/* hard guarantee on EVERY card: the resting face is the only visible face.
   (Blend modes and filters on face descendants break backface-visibility in Chrome,
   so 3D alone can never be trusted to hide the other side.) */
.card .face { transition: visibility 0s linear 0.28s; }
.card.show-b .face.a { visibility: hidden; }
.card:not(.show-b) .face.b { visibility: hidden; }

/* face-down flip: the card shudders without revealing */
.clash-slot .card.wobble { animation: hidden-flip 0.7s ease; }
@keyframes hidden-flip {
  0% { transform: rotateY(0) scale(1); }
  35% { transform: rotateY(34deg) scale(1.05); filter: drop-shadow(0 0 16px rgba(123,91,201,0.85)); }
  65% { transform: rotateY(-12deg) scale(1.02); filter: drop-shadow(0 0 10px rgba(123,91,201,0.5)); }
  100% { transform: rotateY(0) scale(1); }
}
#hover-preview .hp-info {
  background: linear-gradient(180deg, rgba(40,31,28,0.96), rgba(22,17,19,0.97));
  border: 1px solid var(--brass-lo);
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--parch-2);
  text-align: center;
  max-width: 100%;
}
#hover-preview .hp-info b { color: var(--parch); }
.hp-relic { padding: 16px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 200px; }
.hp-relic-art svg.relic-art { width: 90px; height: 90px; color: var(--bone); filter: drop-shadow(0 0 10px rgba(232,224,204,0.3)); }
.hp-relic-name { font-family: var(--font-caps); letter-spacing: 0.18em; text-transform: uppercase; font-size: 12px; color: var(--brass-hi); text-align: center; }
.hp-relic-text { font-size: 13px; font-style: italic; color: var(--parch-2); text-align: center; line-height: 1.45; }

/* ============================================================
   TITLE THUNDER — a procedural bolt strikes through the wordmark
   (drawn on #storm-canvas by initStorm(); these rules handle the
   text flare and the red pressure in the sky)
   ============================================================ */
.title-logo {
  position: relative;
  background-image: linear-gradient(100deg,
    var(--parch) 0%, var(--parch) 38%,
    #ffd9a0 45%, var(--ember) 50%, #ff9c6a 54%,
    var(--parch) 62%, var(--parch) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,0.85)) drop-shadow(0 0 26px rgba(123,91,201,0.25));
}
.title-logo.struck {
  animation: title-sweep 0.85s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes title-sweep {
  0% { background-position: 100% 0;
       filter: drop-shadow(0 3px 2px rgba(0,0,0,0.85)) drop-shadow(0 0 14px rgba(255,110,60,0.95)) drop-shadow(0 0 40px rgba(195,61,30,0.7)); }
  30% { filter: drop-shadow(0 3px 2px rgba(0,0,0,0.85)) drop-shadow(0 0 22px rgba(255,110,60,0.8)) drop-shadow(0 0 55px rgba(195,61,30,0.5)); }
  100% { background-position: 0% 0;
       filter: drop-shadow(0 3px 2px rgba(0,0,0,0.85)) drop-shadow(0 0 26px rgba(123,91,201,0.25)); }
}
.logo-row { position: relative; }
/* the red pressure that gathers in the sky while a bolt lives */
#screen-title::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 45% at 50% 16%, rgba(195,61,30,0.32), transparent 70%);
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
  z-index: 0;
}
#screen-title.storming::before { opacity: 1; }

/* ============================================================
   READABILITY LAYER — functional text uses the readable serif
   ============================================================ */
#log { font-family: var(--font-read); font-size: 15px; }
#log .entry.flavor { font-family: var(--font-body); }
#prompt-plate .p-sub { font-family: var(--font-read); font-style: normal; font-size: 15px; }
.cface .ability-box {
  font-family: var(--font-read);
  font-style: normal;
  font-size: 1.02em;
  line-height: 1.35;
  color: var(--parch);
}
.man-lead, .man-step-rule, .man-action-list li, .man-tip-body, .man-edge,
.man-guided-sub, .relic-tip, .wx-step-cap, .go-sub,
.modal .m-sub, .hp-relic-text, #hover-preview .hp-info, .tut-say {
  font-family: var(--font-read);
  font-style: normal;
}
.man-lead { font-size: 16.5px; }
.man-step-rule { font-size: 14.5px; }
.man-action-list li { font-size: 14px; }
.man-tip-body { font-size: 14px; }
.man-edge { font-size: 14px; }
.man-guided-sub { font-size: 14.5px; }
.relic-tip { font-size: 12.5px; }
.wx-step-cap { font-size: 15px; }
.modal .m-sub { font-size: 15.5px; }
.hp-relic-text { font-size: 14px; }
#hover-preview .hp-info { font-size: 13.5px; }
.tut-say { font-size: 15.5px; }
.man-row { font-size: 13.5px; font-family: var(--font-read); }
.man-row-bli { font-style: italic; }
.power-detail { font-family: var(--font-read); font-style: normal; font-size: 11.5px; }
.man-demo-cap { font-family: var(--font-read); font-style: italic; font-size: 12.5px; }

/* responsive squeeze */
@media (max-width: 1180px) {
  #screen-game { grid-template-columns: 1fr 230px; }
}

/* compact edges so the board fits small panes */
@media (max-width: 1100px) {
  .edge { gap: 8px; padding: 5px 10px; }
  .edge-info { gap: 8px; }
  .plate { min-width: 0; gap: 7px; }
  .plate .who .name { font-size: 15px; }
  .plate .who .sub { display: none; }
  .plate .portrait { width: 28px; height: 28px; }
  .plate .initiative-token { width: 17px; height: 17px; }
  .mini-back { width: 23px; height: 32px; margin-left: -10px; }
  .relic-slot { width: 40px; height: 55px; }
  .relic-card.small { width: 40px; height: 55px; padding: 3px 2px 2px; }
  .relic-card.small .relic-art { width: 25px; height: 25px; }
  .relic-card.small .relic-name { font-size: 4.4px; }
  .chip { padding: 3px 8px; gap: 5px; }
  .chip .num { font-size: 15px; }
  .blight-track { gap: 3px; }
  .blight-track .cell { width: 14px; height: 14px; }
  .blight-track .cell svg { width: 10px; height: 10px; }
  .track-wrap .caps-label { font-size: 8px; }
  #midband { grid-template-columns: 100px 1fr 100px; gap: 8px; }
  #market-col .market-cards { gap: 5px; }
  .mid-col { gap: 8px; padding: 8px 4px; }
}

/* phone portrait: stack the table */
@media (max-width: 640px) {
  #screen-game { padding: 6px; gap: 6px; }
  #board { gap: 6px; }
  #midband { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 6px; }
  #clash-center { order: 0; padding: 8px 0 4px; }
  #clash-row { gap: 26px; }
  .clash-slot .slot-label { display: none; }
  #market-col { order: 1; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; padding: 8px 6px; gap: 8px; }
  #market-col .market-cards { flex-direction: row; gap: 8px; }
  #market-col > .caps-label { width: 100%; text-align: center; }
  #pile-col { order: 2; flex-direction: row; justify-content: space-evenly; align-items: center; padding: 8px 6px; }
  #pile-col .pile-stack { flex-direction: row; align-items: center; gap: 8px; }
  .edge { flex-wrap: wrap; }
  #player-edge .edge-info { max-width: none; width: 100%; justify-content: space-between; }
  #player-edge { min-height: 0; }
  #hand { height: auto; min-height: calc(var(--card-w-hand) * 1.55); width: 100%; }
  #hand .hand-card { margin: 0 -8px; }
  .mini-backs { display: none; }
  #prompt-plate { width: 98%; min-height: 70px; }
  .power-detail { font-size: 9px; white-space: normal; width: 120px; text-align: center; }
  #manual-toggle { top: 6px; right: 8px; padding: 5px 8px; }
  #chron-toggle { top: 38px; right: 8px; padding: 5px 8px; }
}

/* chronicle becomes a slide-over on narrow screens */
#chron-toggle {
  display: none;
  position: fixed; right: 108px; top: 10px; z-index: 65;
  padding: 6px 12px;
  font-size: 10px;
}
#menu-toggle {
  position: fixed; right: 210px; top: 10px; z-index: 65;
  padding: 6px 12px; font-size: 10px;
}
@media (min-width: 981px) { #menu-toggle { right: 108px; } } /* chronicle is docked, not a button */
/* docked chronicle: the fixed buttons band sits over the panel's top — push
   the panel's content below it so "The Chronicle" head is never covered */
@media (min-width: 981px) { #screen-game #chronicle { padding-top: 42px; } }
@media (max-width: 640px) {
  #manual-toggle { top: 6px; right: 8px; padding: 5px 8px; }
  #chron-toggle { top: 40px; right: 8px; padding: 5px 8px; }
  #menu-toggle { top: 74px; right: 8px; padding: 5px 8px; }
}

/* the annotated card inspector */
.modal.insp { overflow-x: hidden; }
.insp-fact {
  max-width: 560px; margin: 4px auto 0;
  font-family: var(--font-read); font-style: italic;
  font-size: 13.5px; line-height: 1.6; color: var(--parch-2);
  border-top: 1px solid rgba(169,138,78,0.25);
  padding-top: 10px; text-align: center;
}
.insp-fact b {
  display: block; font-style: normal;
  font-family: var(--font-caps); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brass-hi); margin-bottom: 3px;
}
.insp-tabs { display: flex; gap: 10px; position: relative; z-index: 6; margin-bottom: 4px; }
.insp-tabs button { min-width: 120px; }
.modal.insp .m-buttons { margin-top: 12px; position: relative; z-index: 6; }
.insp-stage { z-index: 1; }
.insp-tabs button.on { color: var(--parch); border-color: var(--brass-hi); box-shadow: inset 0 0 12px rgba(216,184,120,0.18); }
.insp-stage {
  display: grid;
  grid-template-columns: minmax(120px, 200px) auto minmax(120px, 200px);
  gap: 14px 40px;
  align-items: center;
  width: 100%;
  padding: 8px 0;
}
.insp-cardbox { grid-column: 2; grid-row: 1 / span 2; }
.insp-callout {
  position: relative;
  font-family: var(--font-read);
  font-size: 13px; line-height: 1.45;
  color: var(--parch-2);
}
.insp-callout b {
  display: block;
  font-family: var(--font-caps); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-hi); margin-bottom: 3px;
}
.co-power { grid-column: 1; grid-row: 1; text-align: right; align-self: start; margin-top: 8%; }
.co-ground { grid-column: 3; grid-row: 1; align-self: start; margin-top: 8%; }
.co-effect { grid-column: 3; grid-row: 2; align-self: end; margin-bottom: 12%; }
.insp-callout::after {
  content: '';
  position: absolute; top: 13px;
  width: 30px; height: 1px;
  background: linear-gradient(90deg, rgba(169,138,78,0.15), var(--brass));
}
.co-power::after { right: -36px; }
.co-ground::after, .co-effect::after { left: -36px; transform: scaleX(-1); }
.insp-callout::before {
  content: '◆';
  position: absolute; top: 7px;
  font-size: 8px; color: var(--brass-hi);
}
.co-power::before { right: -44px; }
.co-ground::before, .co-effect::before { left: -44px; }
@media (max-width: 800px) {
  .insp-stage { grid-template-columns: 1fr; gap: 10px; justify-items: center; }
  .insp-cardbox { grid-column: 1; grid-row: 1; }
  .insp-callout { grid-column: 1 !important; grid-row: auto !important; text-align: left !important; max-width: 340px; margin: 0 !important; }
  .insp-callout::before, .insp-callout::after { display: none; }
}
@media (max-width: 980px) {
  /* the chronicle is undocked here, so the five fixed top-right buttons float
     over the full-width board — reserve a top band so they never sit on the
     Warden's panel (blight track, spoils) */
  #screen-game { padding-top: 46px; }
  /* the hand gets its own full-width row under the player info instead of
     fanning sideways into the blight track */
  #player-edge { flex-wrap: wrap; min-height: 0; }
  #player-edge .edge-info { max-width: none; width: 100%; justify-content: space-between; }
  #hand { width: 100%; flex-basis: 100%; height: auto; min-height: calc(var(--card-w-hand) * 1.5); }
  #screen-game { grid-template-columns: 1fr; }
  #screen-game #chronicle {
    display: flex;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(300px, 82vw);
    z-index: 64;
    transform: translateX(106%);
    transition: transform 0.28s ease;
    box-shadow: -10px 0 34px rgba(0,0,0,0.65);
    border-radius: 0;
  }
  #screen-game #chronicle.open { transform: none; }
  #screen-game #chron-toggle { display: block; }
}
/* short panes: the market column must fit three relics + the deck stack */
@media (max-height: 800px) {
  #market-col .relic-card { width: clamp(42px, 8.6vh, 72px); }
  #market-col .market-cards { gap: 5px; }
  #market-col, #pile-col { gap: 7px; padding: 7px 4px; }
  #market-col .relic-card .relic-name { font-size: 5px; }
}

@media (max-height: 560px) {
  .edge { padding: 4px 10px; gap: 8px; }
  #midband { padding: 2px 4px; gap: 8px; }
  #prompt-plate .p-title { font-size: 15px; }
  #prompt-plate .p-sub { font-size: 11px; }
  #prompt-plate .p-buttons button { font-size: 10px; padding: 6px 12px; }
  .clash-slot .slot-label { display: none; }
  .mid-col { gap: 6px; padding: 6px 4px; }
  /* the plate takes the vs-mark's place at the middle of the table */
  #clash-row { gap: clamp(220px, 38vw, 430px); }
  .vs-mark { display: none; }
  #prompt-plate {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(350px, 42vw);
    min-height: 0;
    padding: 10px 16px;
    z-index: 10;
    background: linear-gradient(180deg, rgba(40,31,28,0.95), rgba(22,17,19,0.96));
  }
}

/* ============================================================
   CHRONICLE EFFECTS · GROUND GLOW · EXPLAINERS · LODGE · TOGGLES
   ============================================================ */

/* -- the chronicle breathes: every entry slides in with its sigil -- */
#log .entry { display: flex; gap: 7px; align-items: baseline; animation: log-in 0.34s ease both; }
@keyframes log-in { from { opacity: 0; transform: translateX(-9px); } to { opacity: 1; transform: none; } }
#log .entry .e-ic { flex: 0 0 15px; text-align: center; font-size: 11.5px; opacity: 0.85; font-style: normal; }
#log .entry .e-tx { flex: 1; }
#log .entry.win { background: rgba(216, 179, 106, 0.08); border-left: 2px solid var(--brass); padding: 3px 6px; border-radius: 0 4px 4px 0; }
#log .entry.win .e-ic { color: var(--brass-hi); }
#log .entry.grim { background: rgba(176, 106, 90, 0.09); border-left: 2px solid #b06a5a; padding: 3px 6px; border-radius: 0 4px 4px 0; }
#log .entry.blight { border-left: 2px solid #a98fd8; padding-left: 6px; }
#log .entry.ability .e-ic { color: #d8a878; }
#log .entry.good .e-ic { color: #8fbf9a; }
#log .entry.clash-head { display: block; }

/* -- home ground: cards of the clash terrain glow in hand -- */
.hand-card.on-ground .card {
  box-shadow: 0 0 0 2px var(--ground-glow, #b03a2e), 0 0 18px -2px var(--ground-glow, #b03a2e);
  border-radius: 10px;
}
.hand-card .ground-tag {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  z-index: 6; pointer-events: none;
  background: var(--ground-glow, #b03a2e); color: #14100f;
  font-family: var(--font-caps); font-weight: 700; font-size: 10.5px; line-height: 1;
  padding: 3px 7px; border-radius: 9px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}

/* -- click a table piece to learn it -- */
.explain { cursor: help; }
.explain:hover { filter: brightness(1.18); }
.board-info-icon { width: 62px; height: 62px; margin: 4px auto 10px; color: var(--brass); opacity: 0.9; }
.board-info-icon svg { width: 100%; height: 100%; }

/* -- relic inspector art -- */
.insp-relic-art { width: min(44vh, 290px); max-width: 100%; margin: 0 auto; }
.relic-stage .insp-cardbox { display: flex; align-items: center; justify-content: center; }

/* -- the Lodge -- */
.m-input {
  background: #161014; border: 1px solid #3a2f33; color: var(--parch);
  font-family: var(--font-read); font-size: 14.5px;
  padding: 9px 12px; border-radius: 6px; min-width: 230px;
}
.m-input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 8px rgba(216, 184, 120, 0.15); }
.lodge-form { display: flex; flex-direction: column; gap: 9px; align-items: center; margin: 10px 0 4px; }
.lodge-form.row { flex-direction: row; justify-content: center; }
.lodge-form.row .m-input { min-width: 170px; }
.lodge-status { min-height: 18px; font-family: var(--font-read); font-size: 13px; color: #b06a5a; }
.lodge-contacts { margin: 8px auto 4px; width: min(340px, 90%); text-align: left; }
.lodge-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; max-height: 160px; overflow: auto; }
.lodge-friend {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid #322a2e;
  padding: 6px 10px; border-radius: 6px; font-family: var(--font-read); font-size: 14px;
}
.lodge-friend .fname { flex: 1; }
.lodge-friend .dot { width: 9px; height: 9px; border-radius: 50%; background: #4a4046; flex: 0 0 auto; }
.lodge-friend .dot.on { background: #8fbf9a; box-shadow: 0 0 6px #8fbf9a; }
.lodge-friend .fdel { background: none; border: none; color: var(--sepia); cursor: pointer; font-size: 13px; padding: 2px 5px; }
.lodge-friend .fdel:hover { color: #c25546; }
.lodge-dim { color: var(--sepia); font-style: italic; font-family: var(--font-read); font-size: 13.5px; }

/* -- home + sound toggles -- */
#home-toggle {
  position: fixed; right: 312px; top: 10px; z-index: 65;
  padding: 6px 12px; font-size: 10px;
}
@media (min-width: 981px) { #home-toggle { right: 210px; } }
/* the audio button joins the top-right chrome stack — no corner of its own to collide in */
#sound-toggle {
  position: fixed; right: 414px; top: 10px; z-index: 500;
  padding: 6px 12px; font-size: 10px; opacity: 0.85;
}
@media (min-width: 981px) { #sound-toggle { right: 312px; } }
#sound-toggle:hover { opacity: 1; }
@media (max-width: 640px) {
  #home-toggle { top: 108px; right: 8px; padding: 5px 8px; }
  #sound-toggle { top: 142px; right: 8px; padding: 5px 8px; }
}

/* -- scannable verdict lines in every explainer -- */
.board-tl {
  font-family: var(--font-read); font-weight: 700; font-size: 14.5px;
  color: var(--brass-hi); max-width: 420px; margin: 2px auto 8px;
}
.insp-callout span b, .m-sub b { color: var(--brass-hi); font-weight: 700; }

/* ============================================================
   THE BOOK OF FANG & BLIGHT — the lore campaign
   ============================================================ */
#screen-book { min-height: 100vh; display: grid; place-items: stretch; padding: 0; }
#book-content { width: 100%; min-height: 100vh; display: grid; place-items: center; padding: 30px 0; }
#book-content > .bk-cover, #book-content > .bk-page {
  width: min(1040px, 96vw);
  min-height: calc(100vh - 60px);
  display: flex; flex-direction: column; justify-content: center;
  box-sizing: border-box;
}
.bk-story .bk-art { max-height: 52vh; }
@media (min-width: 900px) {
  .bk-page.bk-story { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto 1fr auto; gap: 6px 34px; align-content: center; }
  .bk-story .bk-chapter { grid-column: 1 / -1; }
  .bk-story .bk-art { grid-row: 2; max-height: 62vh; height: 100%; aspect-ratio: auto; }
  .bk-story .bk-text { grid-row: 2; grid-column: 2; align-self: center; font-size: 18px; line-height: 1.75; }
  .bk-story .bk-nav, .bk-story .bk-tagline { grid-column: 1 / -1; }
}

.bk-cover {
  background: linear-gradient(160deg, #241a14, #170f0c 70%);
  border: 3px solid #4a382a; border-radius: 8px 14px 14px 8px;
  box-shadow: -10px 0 0 -4px #120c09, -18px 0 0 -8px #0c0806, 0 24px 60px rgba(0,0,0,0.6);
  padding: 46px 36px 40px; text-align: center; cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bk-cover:hover { transform: translateY(-4px); }
.bk-cover img { width: min(300px, 70%); border-radius: 6px; border: 2px solid #4a382a; }
.bk-cover-mark { width: 110px; margin: 0 auto; color: var(--brass); opacity: 0.85; }
.bk-cover-mark svg { width: 100%; height: auto; }
.bk-cover-title {
  font-family: var(--font-title); font-size: clamp(26px, 5vw, 38px);
  color: var(--brass-hi); margin-top: 18px; letter-spacing: 0.02em;
}
.bk-cover-sub { font-family: var(--font-body); font-style: italic; color: var(--sepia); font-size: 14px; max-width: 420px; margin: 8px auto 0; }
.bk-cover-hint { margin-top: 22px; opacity: 0.7; animation: bk-breathe 2.6s ease-in-out infinite; }
@keyframes bk-breathe { 0%,100% { opacity: 0.4; } 50% { opacity: 0.9; } }

.bk-page {
  background: linear-gradient(170deg, #221b15, #1a140f);
  border: 1px solid #4a382a; border-left: 6px double #4a382a; border-radius: 6px 12px 12px 6px;
  box-shadow: -8px 0 0 -3px #140e0a, 0 18px 50px rgba(0,0,0,0.55);
  padding: 26px 30px 24px;
  animation: bk-turn 0.4s ease;
}
@keyframes bk-turn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bk-page { animation: none; } }

.bk-h { font-family: var(--font-title); color: var(--brass-hi); font-size: 28px; margin: 0 0 4px; text-align: center; }
.bk-toc-sub { font-family: var(--font-body); font-style: italic; color: var(--sepia); text-align: center; font-size: 13.5px; margin-bottom: 18px; }
.bk-toc-list { display: flex; flex-direction: column; gap: 8px; }
.bk-toc-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 14px; border: 1px solid #3a2d22; border-radius: 6px;
  background: rgba(255,255,255,0.02); font-family: var(--font-read);
}
.bk-toc-row.open { cursor: pointer; }
.bk-toc-row.open:hover { border-color: var(--brass); background: rgba(216,184,120,0.06); }
.bk-toc-row.locked { opacity: 0.45; }
.bk-toc-num { font-family: var(--font-title); color: var(--blood-hi, #a8433f); min-width: 34px; }
.bk-toc-title { flex: 1; font-size: 16px; color: var(--parch); }
.bk-toc-domain { font-size: 11.5px; font-family: var(--font-caps); letter-spacing: 0.08em; }
.bk-toc-mark { color: var(--brass-hi); }

.bk-chapter { text-align: center; margin-bottom: 12px; opacity: 0.85; }
.bk-art {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 2px solid #4a382a; border-radius: 6px; background: #14100c;
}
.bk-art-empty { display: grid; place-items: center; color: #4a382a; font-size: 40px; }
.bk-text {
  font-family: var(--font-read); font-size: 16.5px; line-height: 1.65; color: var(--parch-2);
  margin: 16px 4px 6px;
}
.bk-text::first-letter {
  font-family: var(--font-title); font-size: 2.9em; line-height: 0.85;
  color: var(--blood-hi, #a8433f); float: left; padding: 4px 8px 0 0;
}
.bk-nav { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.bk-tagline { text-align: center; font-family: var(--font-body); font-style: italic; color: var(--sepia); font-size: 13.5px; margin-top: 10px; }

.bk-lesson {
  border: 1px solid var(--brass); border-radius: 8px;
  background: rgba(216, 184, 120, 0.05);
  padding: 16px 20px; margin: 14px 0 4px;
}
.bk-lesson-title { font-family: var(--font-caps); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-hi); margin-bottom: 8px; }
.bk-lesson-text { font-family: var(--font-read); font-size: 15.5px; line-height: 1.6; color: var(--parch-2); }
.bk-verdict { text-align: center; font-family: var(--font-read); font-size: 15px; color: var(--sepia); margin-bottom: 6px; }
.bk-verdict.win { color: #8fbf9a; }

/* ============================================================
   MIXER · REPLAY · CINEMA BARS · CARD BACK ART · PHONE DRAWERS
   ============================================================ */

/* -- the audio mixer -- */
.mixer { display: flex; flex-direction: column; gap: 12px; margin: 14px auto 6px; width: min(360px, 92%); }
.mix-row { display: flex; align-items: center; gap: 10px; }
.mix-mute { background: none; border: 1px solid #3a2f33; border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: 14px; }
.mix-label { flex: 0 0 150px; font-family: var(--font-read); font-size: 14px; color: var(--parch-2); text-align: left; }
.mix-row input[type=range] { flex: 1; accent-color: var(--brass); }

/* -- replay a creature's voice from the inspector -- */
.insp-cardbox { position: relative; }
.snd-replay {
  position: absolute; top: 8px; right: 8px; z-index: 8;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--brass); background: rgba(20, 16, 15, 0.82);
  font-size: 15px; cursor: pointer; padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.snd-replay:hover { background: rgba(216, 184, 120, 0.2); }

/* -- cinematic letterboxing during the apparition duel -- */
body::before, body::after {
  content: ''; position: fixed; left: 0; right: 0; height: 7vh; background: #000;
  z-index: 860; pointer-events: none;
  transition: transform 0.45s ease;
}
body::before { top: 0; transform: translateY(-101%); }
body::after { bottom: 0; transform: translateY(101%); }
body.cinema::before, body.cinema::after { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { body::before, body::after { transition: none; } }

/* -- generated card back -- */
.card .back-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* -- phone drawers: side columns collapse behind icon tabs -- */
.drawer-tab { display: none; }
@media (max-width: 640px) {
  .drawer-tab {
    display: flex; align-items: center; gap: 4px;
    position: fixed; top: 44%; z-index: 70;
    padding: 10px 8px; font-size: 15px; line-height: 1;
    border-radius: 0 10px 10px 0;
  }
  .drawer-tab span { font-size: 11px; font-family: var(--font-caps); color: var(--brass-hi); }
  .drawer-tab.left { left: 0; border-left: none; }
  .drawer-tab.right { right: 0; border-radius: 10px 0 0 10px; border-right: none; }
  #screen-game .mid-col {
    position: fixed; top: 12vh; bottom: 24vh; z-index: 68;
    width: min(220px, 62vw); overflow-y: auto;
    transition: transform 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  }
  #screen-game #pile-col { left: 0; transform: translateX(-105%); border-radius: 0 12px 12px 0; }
  #screen-game #market-col { right: 0; transform: translateX(105%); border-radius: 12px 0 0 12px; }
  #screen-game #pile-col.open, #screen-game #market-col.open { transform: translateX(0); }
  @media (prefers-reduced-motion: reduce) { #screen-game .mid-col { transition: none; } }
  /* the clash center takes the full width once the columns are drawers */
  #midband { grid-template-columns: 1fr; display: grid; }
  #clash-row { gap: 10px; }
}

/* ============================================================
   SPEAKER CHIP · THE PAW STRIKE · MIXER EXTRAS · BOOK WARDENS
   ============================================================ */
#speaker-chip {
  position: fixed; right: 14px; bottom: 52px; z-index: 940;
  display: flex; align-items: center; gap: 9px;
  background: rgba(24, 18, 16, 0.94); border: 1px solid var(--brass); border-radius: 30px;
  padding: 6px 8px 6px 6px;
  transform: translateX(130%); transition: transform 0.35s ease;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
#speaker-chip.show { transform: translateX(0); }
#speaker-chip .sc-icon { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 18px; color: var(--brass-hi); background: #14100c; border: 1px solid #3a2f28; }
#speaker-chip .sc-icon img { width: 100%; height: 100%; object-fit: cover; }
#speaker-chip .sc-name { font-family: var(--font-caps); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--parch-2); }
#speaker-chip .sc-paw { background: none; border: 1px solid #3a2f28; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 14px; padding: 0; }
#speaker-chip .sc-paw:hover { border-color: var(--blood-hi, #a8433f); background: rgba(168, 67, 63, 0.15); }
#speaker-chip .sc-fist { position: absolute; left: -34px; top: 50%; font-size: 24px; opacity: 0; transform: translate(-30px, -50%) rotate(-30deg); pointer-events: none; }
#speaker-chip.hit .sc-fist { animation: paw-strike 0.5s ease forwards; }
#speaker-chip.hit { animation: chip-knocked 1.1s ease 0.22s forwards; }
@keyframes paw-strike {
  0% { opacity: 0; transform: translate(-40px, -50%) rotate(-40deg) scale(0.7); }
  45% { opacity: 1; transform: translate(26px, -50%) rotate(0deg) scale(1.25); }
  70% { opacity: 1; transform: translate(20px, -50%) rotate(8deg) scale(1.1); }
  100% { opacity: 0; transform: translate(10px, -50%) rotate(10deg); }
}
@keyframes chip-knocked {
  0% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(26px) rotate(9deg); }
  55% { transform: translateX(60px) rotate(-5deg); opacity: 0.9; }
  100% { transform: translateX(150%) rotate(14deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #speaker-chip, #speaker-chip.hit, #speaker-chip.hit .sc-fist { animation: none; transition: opacity 0.2s; }
}
.mix-select, .mix-cycle {
  flex: 1; background: #161014; border: 1px solid #3a2f33; color: var(--parch);
  font-family: var(--font-read); font-size: 13.5px; padding: 7px 10px; border-radius: 6px; cursor: pointer;
}
.mix-select:focus, .mix-cycle:focus-visible { outline: none; border-color: var(--brass); }

/* ============================================================
   THE REAL BOOK — leather cover, facing parchment leaves, turns
   ============================================================ */
#screen-book {
  background: radial-gradient(ellipse at 50% 42%, #241c16 0%, #15100c 62%, #0c0906 100%);
}
#book-content { padding: 24px 0; }

/* -- the closed book -- */
.bkc-scene { display: grid; place-items: center; gap: 18px; perspective: 1600px; }
.bkc-book {
  position: relative; width: min(420px, 84vw); aspect-ratio: 3 / 4;
  cursor: pointer; transform-style: preserve-3d;
  transition: transform 0.3s ease;
}
.bkc-book:hover { transform: translateY(-6px) rotateX(2deg); }
.bkc-pages {
  position: absolute; inset: 6px -8px 6px 8px; border-radius: 3px 10px 10px 3px;
  background: repeating-linear-gradient(90deg, #e6d9ba 0 2px, #d4c5a2 2px 4px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.65);
}
.bkc-front {
  position: absolute; inset: 0; border-radius: 4px 12px 12px 4px;
  background: linear-gradient(135deg, #3a2318 0%, #2a1710 55%, #1c0f0a 100%);
  border: 2px solid #4a2f1e;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,220,160,0.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 30px 26px; text-align: center;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform 1.35s cubic-bezier(0.5, 0.02, 0.25, 1); /* an old cover is heavy */
  backface-visibility: hidden;
}
.bkc-book.opening .bkc-front { transform: rotateY(-150deg); }
.bkc-frame { position: absolute; inset: 12px; border: 1px solid rgba(216,184,120,0.4); border-radius: 3px 9px 9px 3px; pointer-events: none; }
.bkc-inset { width: 62%; border-radius: 4px; border: 2px solid rgba(216,184,120,0.45); box-shadow: 0 4px 18px rgba(0,0,0,0.5); }
.bkc-emblem { width: 90px; color: var(--brass); opacity: 0.9; }
.bkc-title { font-family: var(--font-title); font-size: clamp(22px, 4.4vw, 32px); color: var(--brass-hi); text-shadow: 0 1px 0 #000; }
.bkc-sub { font-family: var(--font-body); font-style: italic; font-size: 12.5px; color: rgba(224,193,132,0.75); max-width: 300px; }
.bkc-hint { font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sepia); animation: bk-breathe 2.6s ease-in-out infinite; }

/* -- the open spread -- */
.bks {
  display: grid; grid-template-columns: 1fr 1fr; position: relative;
  width: min(1100px, 96vw); min-height: min(700px, 88vh);
  margin: 0 auto; filter: drop-shadow(0 26px 50px rgba(0,0,0,0.65));
  animation: bk-turn 0.4s ease;
}
.bks-leaf { display: flex; }
.bks-paper {
  position: relative; flex: 1; display: flex; flex-direction: column;
  /* centuries of thumbs, damp and candle smoke */
  background:
    radial-gradient(ellipse at 78% 10%, rgba(115, 85, 38, 0.12), transparent 42%),
    radial-gradient(ellipse at 10% 84%, rgba(95, 66, 28, 0.16), transparent 46%),
    radial-gradient(circle at 90% 72%, rgba(88, 58, 24, 0.10), transparent 30%),
    radial-gradient(circle at 22% 40%, rgba(105, 75, 32, 0.07), transparent 26%),
    radial-gradient(ellipse at 32% 18%, rgba(255, 249, 230, 0.38), transparent 58%),
    linear-gradient(120deg, #e2d2ad 0%, #d7c69c 55%, #c6b184 100%);
  color: #2c2318; padding: 34px 36px 30px;
  box-shadow: inset 0 0 46px rgba(80, 55, 25, 0.22);
}
.bks-left .bks-paper {
  border-radius: 10px 2px 2px 10px;
  box-shadow: inset -26px 0 32px -22px rgba(60,40,20,0.55), -3px 0 0 #cbbb95, -6px 2px 0 #b8a67e;
}
.bks-right .bks-paper {
  border-radius: 2px 10px 10px 2px;
  box-shadow: inset 26px 0 32px -22px rgba(60,40,20,0.55), 3px 0 0 #cbbb95, 6px 2px 0 #b8a67e;
}
/* everything inked on paper overrides the dark-UI palette */
.bks-paper .bkp-head {
  font-family: var(--font-caps); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #7a1f24; text-align: center; margin-bottom: 16px;
  border-bottom: 1px solid #c9b68c; padding-bottom: 10px;
}
.bkp-text { font-family: var(--font-read); font-size: clamp(15.5px, 1.35vw, 18px); line-height: 1.78; color: #33291c; }
.bkp-text::first-letter {
  font-family: var(--font-title); font-size: 3.1em; line-height: 0.8;
  color: #7a1f24; float: left; padding: 5px 9px 0 0;
}
.bkp-plateWrap { display: flex; flex-direction: column; justify-content: center; flex: 1; gap: 12px; }
/* frameless plates: the art sits directly on the page, no cream mat, no border */
.bkp-plateframe { background: none; border: none; padding: 0; box-shadow: 0 4px 14px rgba(60,40,20,0.3); border-radius: 3px; overflow: hidden; }
.bkp-art { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: none; background: #14100c; }
.bkp-art-empty { display: grid; place-items: center; color: #b8a67e; font-size: 40px; }
.bkp-caption { text-align: center; font-family: var(--font-body); font-style: italic; font-size: 13.5px; color: #6d5c42; }
.bkp-folio { position: absolute; bottom: 12px; left: 26px; font-family: var(--font-body); font-size: 12.5px; color: #8a7758; }
.bkp-folio.right { left: auto; right: 26px; }
.bkp-tag { font-family: var(--font-body); font-style: italic; font-size: 13.5px; color: #6d5c42; margin-top: 10px; text-align: center; }
.bkp-tag b { color: #7a1f24; }
.bkp-nav { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: auto; padding-top: 18px; }
.bkp-btn {
  background: transparent; border: 1px solid #8a744c; border-radius: 4px;
  color: #3a2d1c; font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 9px 14px; cursor: pointer;
}
.bkp-btn:hover, .bkp-btn:focus-visible { background: rgba(122, 31, 36, 0.08); border-color: #7a1f24; outline: none; }
.bkp-primary { background: #7a1f24; border-color: #5c1519; color: #f2e6cc; }
.bkp-primary:hover { background: #8f2a2f; color: #fff; }
.bkp-bookplate { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; flex: 1; text-align: center; }
.bkp-booktitle { font-family: var(--font-title); font-size: clamp(24px, 3vw, 34px); color: #2c2318; }
.bkp-booksub { font-family: var(--font-body); font-style: italic; font-size: 13.5px; color: #6d5c42; max-width: 360px; }
.bkp-emblem { width: 110px; color: #7a1f24; opacity: 0.85; }
.bkt-list { display: flex; flex-direction: column; gap: 4px; }
.bkt-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 6px; border-radius: 4px; font-family: var(--font-read); }
.bkt-row.open { cursor: pointer; }
.bkt-row.open:hover { background: rgba(122, 31, 36, 0.07); }
.bkt-row.locked { opacity: 0.45; }
.bkt-num { font-family: var(--font-title); color: #7a1f24; min-width: 30px; }
.bkt-name { font-size: 16px; color: #2c2318; }
.bkt-dots { flex: 1; border-bottom: 2px dotted #b8a67e; transform: translateY(-4px); }
.bkt-mark { color: #7a5a20; font-size: 14px; }
.bkp-verdict { text-align: center; font-family: var(--font-body); font-style: italic; color: #7a1f24; margin-bottom: 10px; }
.bkp-verdict.win { color: #3f6f4e; }
.bkp-note { border: 1px solid #b8a67e; background: #f6efdc; border-left: 4px solid #7a1f24; padding: 16px 20px; box-shadow: 0 3px 10px rgba(60,40,20,0.2); }
.bkp-note-title { font-family: var(--font-caps); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #7a1f24; margin-bottom: 8px; }
.bkp-note-text { font-family: var(--font-read); font-size: 15px; line-height: 1.65; color: #33291c; }

/* -- the flying leaf that turns -- */
.bks-flyleaf {
  position: fixed; z-index: 900; pointer-events: none;
  transform-style: preserve-3d;
  border-radius: 2px 10px 10px 2px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
/* the two faces of the turning leaf: front = the real departing page
   (cloned live), back = bare old paper the reader glimpses mid-turn */
.bks-flyleaf .fl-face {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: inherit;
}
.bks-flyleaf .fl-front { background: #efe6cd; }
.bks-flyleaf .fl-front .bks-paper { width: 100%; height: 100%; margin: 0; }
.bks-flyleaf .fl-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(ellipse at 30% 40%, rgba(110, 80, 35, 0.12), transparent 50%),
    linear-gradient(260deg, #e2d2ac 0%, #d0bd90 55%, #bfa878 100%);
}
/* the crease shading deepens as the page folds past the light */
.bks-flyleaf .fl-crease {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, rgba(60, 40, 15, 0.35), transparent 22%, transparent 80%, rgba(60, 40, 15, 0.18));
  opacity: 0;
  animation: fl-crease 1.55s ease-in-out forwards;
}
@keyframes fl-crease { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0.4; } }
/* the shadow the airborne leaf throws across the page beneath it */
.bks-under-shadow { position: fixed; z-index: 899; pointer-events: none; overflow: hidden; }
.bks-under-shadow::after {
  content: '';
  position: absolute; inset: -10% -30%;
  background: linear-gradient(90deg, transparent 20%, rgba(20, 12, 5, 0.35) 50%, transparent 80%);
}
.bks-under-shadow.fwd::after { animation: under-sweep-fwd 1.55s cubic-bezier(0.42, 0.05, 0.3, 1) forwards; }
.bks-under-shadow.back::after { animation: under-sweep-back 1.55s cubic-bezier(0.42, 0.05, 0.3, 1) forwards; }
@keyframes under-sweep-fwd { 0% { transform: translateX(60%); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateX(-70%); opacity: 0; } }
@keyframes under-sweep-back { 0% { transform: translateX(-60%); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateX(70%); opacity: 0; } }
/* a heavy old page: it lifts, hangs a breath at the top of the arc, then settles */
.bks-flyleaf.fwd { transform-origin: left center; animation: leaf-fwd 1.55s cubic-bezier(0.42, 0.05, 0.3, 1) forwards; }
.bks-flyleaf.back { transform-origin: right center; border-radius: 10px 2px 2px 10px; animation: leaf-back 1.55s cubic-bezier(0.42, 0.05, 0.3, 1) forwards; }
@keyframes leaf-fwd {
  0% { transform: perspective(1600px) rotateY(0); opacity: 1; box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
  45% { transform: perspective(1600px) rotateY(-74deg); opacity: 1; box-shadow: -30px 20px 50px rgba(0,0,0,0.5); }
  62% { transform: perspective(1600px) rotateY(-96deg); opacity: 0.95; }
  100% { transform: perspective(1600px) rotateY(-158deg); opacity: 0.15; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
}
@keyframes leaf-back {
  0% { transform: perspective(1600px) rotateY(0); opacity: 1; box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
  45% { transform: perspective(1600px) rotateY(74deg); opacity: 1; box-shadow: 30px 20px 50px rgba(0,0,0,0.5); }
  62% { transform: perspective(1600px) rotateY(96deg); opacity: 0.95; }
  100% { transform: perspective(1600px) rotateY(158deg); opacity: 0.15; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
}

/* -- one tall leaf on narrow screens: the same paper, held closer -- */
@media (max-width: 880px) {
  .bks { grid-template-columns: 1fr; min-height: 0; }
  .bks-left .bks-paper, .bks-right .bks-paper {
    border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  }
  .bks-left .bks-paper { border-radius: 8px 8px 2px 2px; padding-bottom: 16px; }
  .bks-right .bks-paper { border-radius: 2px 2px 8px 8px; padding-top: 18px; }
  .bkp-plateWrap { max-width: 420px; margin: 0 auto; }
  .bkp-folio { display: none; }
}

/* -- fixed-height spread: buttons always on the page, text scrolls in the leaf -- */
.bks { height: min(700px, 86vh); min-height: 0; }
.bks-paper { min-height: 0; }
.bkp-text { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding-right: 8px; }
.bkp-plateWrap { min-height: 0; }
.bkp-plateframe { flex: 0 1 auto; min-height: 0; display: flex; overflow: hidden; }
.bkp-plateframe .bkp-art { width: 100%; height: auto; max-height: calc(86vh - 190px); aspect-ratio: auto; object-fit: cover; }
.bkt-list { overflow-y: auto; min-height: 0; }
@media (max-width: 880px) { .bks { height: auto; } .bkp-text { overflow: visible; } }

/* -- the cinematic opening -- */
.bki-intro { position: fixed; inset: 0; z-index: 950; background: #000; display: grid; place-items: center; cursor: pointer; transition: opacity 0.45s ease; }
.bki-intro video { width: 100%; height: 100%; object-fit: cover; }
.bki-intro .bki-skip {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-caps); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(233, 220, 195, 0.75); animation: bk-breathe 2.6s ease-in-out infinite;
}
.bki-intro.gone { opacity: 0; pointer-events: none; }
/* film subtitles — the narration's words, storybook-captioned over the frame */
.bki-intro .bki-subs {
  position: absolute; left: 50%; bottom: 6%;
  transform: translateX(-50%);
  max-width: min(760px, 88vw);
  text-align: center;
  font-family: var(--font-read); font-style: italic;
  font-size: clamp(14px, 2.3vh, 19px); line-height: 1.55;
  color: #efe6d2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 14px rgba(0,0,0,0.8);
  background: rgba(8, 6, 10, 0.45);
  padding: 12px 22px; border-radius: 8px;
  pointer-events: none;
}

/* -- token gallery + print pack link on the craft page -- */
.token-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 4px; align-items: center; }
.token-img { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; border: 2px solid var(--brass); box-shadow: 0 3px 10px rgba(0,0,0,0.5); }
.token-img.gem { border-radius: 12px; transform: rotate(45deg); width: 70px; height: 70px; margin: 8px; }
.dl-pack { color: var(--brass-hi); font-family: var(--font-caps); font-size: 13px; letter-spacing: 0.08em; }

/* -- the painting draws itself in while the tale is told -- */
.bkp-paint { position: relative; width: 100%; }
.bkp-paint .pp-sketch { filter: grayscale(1) brightness(1.32) contrast(0.72); opacity: 0.42; }
.bkp-paint .pp-color {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  --pr: 0;
  -webkit-mask-image:
    radial-gradient(circle at 32% 36%, #000 calc(var(--pr) * 1%), transparent calc(var(--pr) * 1% + 16%)),
    radial-gradient(circle at 72% 52%, #000 calc(var(--pr) * 0.8%), transparent calc(var(--pr) * 0.8% + 14%)),
    radial-gradient(circle at 46% 82%, #000 calc(var(--pr) * 0.62%), transparent calc(var(--pr) * 0.62% + 12%));
  mask-image:
    radial-gradient(circle at 32% 36%, #000 calc(var(--pr) * 1%), transparent calc(var(--pr) * 1% + 16%)),
    radial-gradient(circle at 72% 52%, #000 calc(var(--pr) * 0.8%), transparent calc(var(--pr) * 0.8% + 14%)),
    radial-gradient(circle at 46% 82%, #000 calc(var(--pr) * 0.62%), transparent calc(var(--pr) * 0.62% + 12%));
  -webkit-mask-composite: source-over; mask-composite: add;
}

/* ============================================================
   LINE AUDIO ICONS · PHONE GAME CHROME · TOUCH FIXES
   (late in the file on purpose: these override earlier phone rules)
   ============================================================ */
.mix-label svg { width: 15px; height: 15px; vertical-align: -3px; color: var(--brass-hi); margin-right: 2px; }
.mix-mute svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--parch-2); }
#sound-toggle svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.snd-replay { top: auto; bottom: 8px; right: 8px; display: grid; place-items: center; }
.snd-replay svg { width: 17px; height: 17px; color: var(--brass-hi); }

/* the inspector callouts line up on one edge on phones (no stair-step) */
@media (max-width: 800px) {
  .insp-callout { width: 100%; }
}

/* touch screens: hovers stick after a tap — the hand must not pop and stay */
@media (hover: none) {
  #hand .hand-card:hover { transform: none; }
  #hand .hand-card.selected { transform: translateY(-18px) scale(1.05); }
  .ware.clickable:hover { transform: none; }
}

/* phone game chrome: two tidy rows of small buttons, board padded below them,
   drawers opaque so the board cannot bleed through them */
@media (max-width: 640px) {
  #manual-toggle, #chron-toggle, #menu-toggle, #home-toggle, #sound-toggle {
    top: 6px; padding: 5px 8px; font-size: 9px; letter-spacing: 0.08em;
  }
  #manual-toggle { right: 8px; }
  #chron-toggle { top: 6px; right: 88px; }
  #menu-toggle { top: 6px; right: 186px; }
  #home-toggle { top: 34px; right: 8px; }
  #sound-toggle { top: 34px; right: 74px; }
  #screen-game { padding-top: 64px; }
  #screen-game .mid-col { background: #17121a; }
}