:root {
  --bg: #0b0810;
  --bg2: #151019;
  --panel: #1b1522;
  --panel2: #231b2c;
  --line: #3a2f47;
  --ink: #ece3d0;
  --dim: #a196ab;
  --candle: #f3b85c;
  --candle-dim: #b9853d;
  --blood: #d0483f;
  --spirit: #9fd6c8;
  --parch: #ece1c6;
  --parch2: #dfd0ad;
  --parch-ink: #2e2015;
  --parch-dim: #6b5640;
  --parch-line: #b59f78;
  --serif: 'IM Fell English', Georgia, 'Times New Roman', serif;
  --sc: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
  --wrath: 0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, #241a2e 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, #1a0f14 0%, transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

#fx-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: radial-gradient(ellipse at center, transparent calc(70% - var(--wrath) * 40%), rgba(70, 0, 12, calc(0.15 + var(--wrath) * 0.55)) 100%);
  transition: background 1s;
}

#app { max-width: 1120px; margin: 0 auto; padding: 16px 16px 48px; }
.hidden { display: none !important; }

h1, h2, h3 { font-family: var(--sc); font-weight: normal; letter-spacing: 0.02em; margin: 0 0 0.5em; }
.cap, .label { font-family: var(--sc); color: var(--dim); font-size: 0.82rem; letter-spacing: 0.06em; }
.note { color: var(--dim); font-size: 0.92rem; font-style: italic; }
.msg { min-height: 1.4em; color: var(--candle); margin: 0.6em 0 0; }

/* ---- Buttons & fields ---- */
.btn {
  font: inherit;
  font-family: var(--sc);
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.btn:hover:not(:disabled) { border-color: var(--candle-dim); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(#7a4a1c, #5b3312); border-color: #a86b2c; color: #fff4dc; }
.btn.primary:hover:not(:disabled) { background: linear-gradient(#8c5622, #6a3c16); }
.btn.small { padding: 6px 12px; font-size: 0.9rem; }
.btn.ghost { background: transparent; color: var(--dim); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--candle); outline-offset: 2px; }

.field { display: block; margin-bottom: 14px; }
.field > span:first-child { display: block; font-family: var(--sc); color: var(--dim); font-size: 0.85rem; margin-bottom: 4px; }
input, select {
  font: inherit;
  color: var(--ink);
  background: #110d16;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  width: 100%;
}
.card {
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

/* ---- Home ---- */
.home { max-width: 440px; margin: 6vh auto 0; text-align: center; }
.crest { font-size: 54px; color: var(--candle); text-shadow: 0 0 30px rgba(243, 184, 92, 0.6); animation: breathe 5s ease-in-out infinite; }
.title { font-size: clamp(3rem, 12vw, 4.6rem); margin: 0; color: #f6ead0; text-shadow: 0 0 24px rgba(243, 184, 92, 0.25); }
.tagline { color: var(--dim); font-style: italic; margin: 0.3em 0 1.6em; }
.home .card { text-align: left; }
.home .btn.primary { width: 100%; }
.or { text-align: center; color: var(--dim); font-family: var(--sc); font-size: 0.85rem; margin: 14px 0 8px; }
.join-row { display: flex; gap: 8px; }
.join-row input { text-transform: uppercase; letter-spacing: 0.3em; font-family: var(--sc); text-align: center; }
.howto { text-align: left; margin-top: 18px; color: var(--dim); }
.howto summary { cursor: pointer; font-family: var(--sc); color: var(--ink); }
.howto ol { padding-left: 1.2em; }
.mode-note { color: var(--dim); font-size: 0.85rem; font-style: italic; margin-top: 18px; }

/* ---- Lobby ---- */
.lobby { max-width: 900px; margin: 0 auto; }
.lobby-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 8px 0 18px; flex-wrap: wrap; }
.code { font-family: var(--sc); font-size: clamp(2.4rem, 9vw, 3.4rem); letter-spacing: 0.35em; color: var(--candle); line-height: 1; text-shadow: 0 0 20px rgba(243, 184, 92, 0.35); }
.lobby-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 760px) { .lobby-grid { grid-template-columns: 1fr; } }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.role-card {
  font: inherit; color: var(--ink); text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  background: #120e17; border: 1px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.role-card .ico { font-size: 1.6rem; }
.role-card b { font-family: var(--sc); font-weight: normal; font-size: 1.1rem; }
.role-card small { color: var(--dim); font-size: 0.85rem; }
.role-card .taken { color: var(--blood); font-size: 0.85rem; }
.role-card.mine { border-color: var(--candle); box-shadow: 0 0 0 1px var(--candle), 0 0 24px rgba(243, 184, 92, 0.2); }
.role-card:disabled { opacity: 0.55; cursor: not-allowed; }
.players { list-style: none; margin: 0; padding: 0; }
.players li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--line); }
.players i { color: var(--dim); }
.players .host { font-family: var(--sc); font-size: 0.75rem; color: var(--candle-dim); border: 1px solid var(--candle-dim); border-radius: 4px; padding: 0 5px; margin-left: 4px; }
.seat { color: var(--dim); font-family: var(--sc); font-size: 0.9rem; white-space: nowrap; }
.seat.medium { color: var(--candle); }
.seat.scholar { color: var(--spirit); }
.ed-row { display: flex; gap: 8px; }
.ed-row input { flex: 1; }
#btn-start { width: 100%; margin-top: 6px; }
.guest-settings { font-family: var(--sc); color: var(--candle); }

/* ---- Status bar (both roles) ---- */
.status-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 14px; margin: 0 -4px 12px;
  background: rgba(14, 10, 19, 0.92); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 12px;
}
.wrath { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; }
.meter { flex: 1; height: 12px; background: #0a070d; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.fill { height: 100%; width: 0; background: linear-gradient(90deg, #5a1a3a, var(--blood), #ff8a5c); box-shadow: 0 0 12px rgba(208, 72, 63, 0.7); transition: width 0.4s linear; }
.time { font-family: var(--sc); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.strikes { display: flex; align-items: center; gap: 6px; }
.mark { font-size: 1.1rem; color: #3b3044; font-weight: bold; }
.mark.on { color: var(--blood); text-shadow: 0 0 10px rgba(208, 72, 63, 0.8); }
.cleansed { font-family: var(--sc); color: var(--spirit); }
.role-hint { color: var(--dim); font-style: italic; margin: 0 0 12px; }

/* ---- Séance table context ---- */
.seance-ctx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 760px) { .seance-ctx { grid-template-columns: 1fr 1fr; } }
.ctx {
  background: linear-gradient(180deg, #2a1d14, #1c130d);
  border: 1px solid #4a3524; border-radius: 12px; padding: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px; min-height: 112px; text-align: center;
}
.ctx .cap { font-size: 0.75rem; }
.plaque { background: linear-gradient(180deg, #4b4a4f, #2c2b30); border-color: #66646c; border-radius: 40px 40px 10px 10px; }
.plaque b { font-family: var(--sc); font-weight: normal; font-size: 1.25rem; letter-spacing: 0.08em; color: #f1ecdf; }
.plaque .year { font-family: var(--sc); color: #d7d1c3; }
.plaque .cap { color: #c6c0b2; }
.moonwin .pane { background: #17131f; border: 3px solid #4a3524; border-radius: 30px 30px 4px 4px; padding: 8px 14px; box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.8); }
.charms { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.charm { display: flex; flex-direction: column; align-items: center; font-size: 1.3rem; animation: sway 3.5s ease-in-out infinite; transform-origin: top center; }
.charm:nth-child(2n) { animation-delay: -1.2s; }
.charm:nth-child(3n) { animation-delay: -2.1s; }
.charm i { width: 1px; height: 18px; background: #8a7a66; }
.carved { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sigil { display: flex; flex-direction: column; align-items: center; }
.sigil b { font-size: 1.6rem; filter: sepia(1) saturate(0.6) brightness(0.85); }
.sigil small { font-family: var(--sc); color: #c9b08a; font-size: 0.75rem; }

/* ---- Relics ---- */
.relics { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
@media (max-width: 400px) { .relics { grid-template-columns: 1fr; } }
.relic {
  position: relative;
  background: linear-gradient(180deg, var(--panel), #120d17);
  border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  transition: border-color 0.6s, box-shadow 0.6s;
}
.relic header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.relic h3 { margin: 0; color: var(--candle); font-size: 1.15rem; }
.seal { font-family: var(--sc); font-size: 0.8rem; color: var(--spirit); border: 1px solid var(--spirit); border-radius: 20px; padding: 1px 10px; opacity: 0; transition: opacity 0.6s; }
.relic.solved { border-color: rgba(159, 214, 200, 0.6); box-shadow: 0 0 30px rgba(159, 214, 200, 0.12); }
.relic.solved .seal { opacity: 1; }
.relic.solved .relic-body { opacity: 0.55; pointer-events: none; filter: saturate(0.5); transition: opacity 1s, filter 1s; }
.relic-tip { color: var(--dim); font-size: 0.85rem; font-style: italic; text-align: center; margin: 10px 0 0; }

/* Candles */
.candle-row { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vw, 18px); padding: 12px 0 4px; min-height: 170px; }
.candle { background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; width: 40px; }
.candle .flame {
  width: 14px; height: 26px; margin-bottom: 2px;
  background: radial-gradient(ellipse at 50% 70%, #fffbe8 0%, #ffd27a 35%, #ff8a2a 70%, transparent 72%);
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  filter: drop-shadow(0 0 10px rgba(255, 180, 80, 0.85));
  animation: flicker 1.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.candle:nth-child(2n) .flame { animation-delay: -0.5s; }
.candle:nth-child(3n) .flame { animation-delay: -1.1s; }
.candle .wax {
  width: 30px; height: 110px; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 35%, rgba(255, 255, 255, 0.18) 55%, rgba(0, 0, 0, 0.3)), var(--wax);
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
}
.candle .wax::before { content: ''; position: absolute; top: -6px; left: 50%; width: 2px; height: 7px; background: #222; transform: translateX(-50%); }
.candle:hover .wax { box-shadow: 0 0 0 2px rgba(243, 184, 92, 0.4); }
.candle.out .flame { animation: snuff 0.8s forwards; }
.candle.flare .flame { animation: flare 0.6s; }

/* Spirit board */
.ouija {
  position: relative;
  background: radial-gradient(ellipse at 50% 40%, #6d4a2a, #3e2816 75%);
  border: 2px solid #20140a; border-radius: 22px; padding: 12px 10px 10px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
  color: #1d1108; user-select: none; overflow: hidden;
}
.o-top { display: flex; justify-content: space-between; align-items: center; padding: 0 8px; }
.o-rest { font-size: 1.6rem; color: #2b1a0c; }
.o-row { display: flex; justify-content: center; flex-wrap: nowrap; margin: 6px 0; }
.o-ch { font-family: var(--sc); font-size: clamp(0.95rem, 3.4vw, 1.25rem); width: calc(100% / 13); text-align: center; border-radius: 6px; transition: color 0.2s, text-shadow 0.2s; }
.o-ch.lit { color: #fff3c9; text-shadow: 0 0 10px #ffd27a, 0 0 2px #fff; }
.o-ans {
  font: inherit; font-family: var(--sc); color: #1d1108;
  background: rgba(255, 230, 190, 0.08); border: 1px solid rgba(29, 17, 8, 0.35); border-radius: 8px;
  padding: 3px 10px; cursor: pointer; font-size: 1.05rem;
}
.o-ans:hover { background: rgba(255, 230, 190, 0.22); }
.o-digits { gap: 2px; }
.o-digit { padding: 2px 0; width: calc((100% - 18px) / 10); font-size: 1rem; }
.o-bottom { display: flex; justify-content: center; margin-top: 4px; }
.o-ans.wrong { animation: wrong 0.5s; }
.o-ans.right { background: rgba(159, 214, 200, 0.35); }
.planchette {
  position: absolute; left: 50%; top: 20px; width: 58px; height: 66px;
  transform: translate(-50%, -38%);
  background: radial-gradient(circle at 50% 38%, transparent 13px, rgba(240, 225, 195, 0.55) 14px, rgba(200, 180, 150, 0.45) 60%);
  border: 1px solid rgba(40, 25, 10, 0.6);
  border-radius: 50% 50% 46% 46% / 42% 42% 58% 58%;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  transition: left 0.6s ease-in-out, top 0.6s ease-in-out, box-shadow 0.25s, opacity 0.25s;
}
.planchette .lens { position: absolute; left: 50%; top: 38%; width: 28px; height: 28px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(40, 25, 10, 0.7); }
.planchette.lift { box-shadow: 0 16px 22px rgba(0, 0, 0, 0.3); opacity: 0.55; }

/* Music box */
.mbox { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mbox-lid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; width: min(100%, 250px);
  background: linear-gradient(160deg, #4b2a3a, #2a1622); border: 2px solid #6b4a2a; border-radius: 16px;
  box-shadow: inset 0 0 0 4px #2a1622, inset 0 0 0 5px #8b6a3a;
}
.fig {
  font: inherit; color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle, #3a2230, #1f1018); border: 1px solid #8b6a3a; border-radius: 50%; aspect-ratio: 1;
  transition: box-shadow 0.12s, background 0.12s;
}
.fig .glyph { font-size: 2rem; }
.fig small { font-family: var(--sc); color: #d9c39a; font-size: 0.75rem; }
.fig.lit { background: radial-gradient(circle, #ffe7a8, #c98a3a); box-shadow: 0 0 26px rgba(255, 210, 120, 0.9); }
.fig.lit small { color: #2b1a0c; }
.mbox-pips { display: flex; gap: 6px; }
.mbox-pips i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--candle-dim); }
.mbox-pips i.done { background: var(--candle); box-shadow: 0 0 8px var(--candle); }
.crank { font-size: 0.95rem; }

/* Tarot */
.tarot-row { display: flex; justify-content: center; gap: clamp(8px, 3vw, 16px); padding: 8px 0; }
.tarot-card {
  font: inherit; cursor: pointer; padding: 0;
  width: clamp(84px, 26vw, 104px); aspect-ratio: 2 / 3.2;
  background: linear-gradient(180deg, #efe3c5, #d9c59b); color: var(--parch-ink);
  border: 3px solid #2b1d12; border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5), inset 0 0 0 3px #efe3c5, inset 0 0 0 4px #8b6a3a;
  transition: transform 0.25s;
}
.tarot-card .inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; padding: 14px 6px 10px; }
.tarot-card .art { font-size: 2.3rem; }
.tarot-card .name { font-family: var(--sc); font-size: 0.82rem; line-height: 1.1; text-align: center; }
.tarot-card.reversed { transform: rotate(180deg); }
.tarot-card:hover { box-shadow: 0 8px 26px rgba(243, 184, 92, 0.35), inset 0 0 0 3px #efe3c5, inset 0 0 0 4px #8b6a3a; }
.tarot-card.wrong { animation: wrong 0.5s; }
.tarot-card.reversed.wrong { animation: wrong-rev 0.5s; }
.tarot-card.burn { animation: burn 1.4s forwards; }

/* Whispering doll (needy) */
.needy-tag { font-family: var(--sc); font-size: 0.8rem; color: var(--dim); border: 1px dashed var(--line); border-radius: 20px; padding: 1px 10px; }
.relic.needy.whispering { border-color: rgba(208, 72, 63, 0.7); box-shadow: 0 0 28px rgba(208, 72, 63, 0.18); }
.relic.needy.hushed { animation: hushed 1s; }
.relic.needy.angered { animation: wrong 0.5s; }
.doll-wrap { display: flex; align-items: center; gap: 14px; padding: 4px 0; }
.doll { flex: 0 0 auto; width: 110px; }
.doll svg { width: 100%; height: auto; display: block; overflow: visible; }
.d-dress { fill: #4b2236; stroke: #2a1220; }
.d-collar { fill: #e8dcc6; }
.d-hair, .d-fringe { fill: #3a2418; }
.d-face { fill: #efe2d4; stroke: #c9b49c; stroke-width: 0.8; }
.d-crack { fill: none; stroke: #6a5446; stroke-width: 0.9; }
.d-white { fill: #fdfaf2; stroke: #5a4436; stroke-width: 0.8; }
.d-pupil { fill: #1b1220; }
.d-lid { fill: none; stroke: #3a2418; stroke-width: 1.4; stroke-linecap: round; }
.d-cheek { fill: #e7a3a0; opacity: 0.55; }
.d-mouth { fill: none; stroke: #8b3a3a; stroke-width: 1.4; stroke-linecap: round; }
.d-head { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(-14deg) translateY(3px); transition: transform 0.6s; }
.doll .eyes-open { display: none; }
.doll.open .eyes-open { display: inline; }
.doll.open .eyes-closed { display: none; }
.doll.awake .d-head { transform: none; animation: murmur 2.4s ease-in-out infinite; }
.doll-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.whisper { margin: 0; min-height: 1.6em; font-family: var(--sc); letter-spacing: 0.12em; color: var(--dim); font-size: 1.1rem; transition: color 0.4s; }
.whisper.on { color: #f1d9d6; text-shadow: 0 0 12px rgba(208, 72, 63, 0.6); animation: breathe 1.8s ease-in-out infinite; }
.doll-timer { height: 6px; background: #0a070d; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.doll-timer i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blood), #ff8a5c); transition: width 0.12s linear; }
.doll-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.doll-act { font-size: 0.85rem; padding: 6px 8px; }
@media (max-width: 400px) { .doll-wrap { flex-direction: column; } .doll { width: 90px; } }

/* Shake on offense */
.shake { animation: shake 0.45s; }

/* ---- Grimoire (Scholars) ---- */
.on-table { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.on-table .waiting { color: var(--dim); font-style: italic; }
.chip { font: inherit; font-family: var(--sc); font-size: 0.9rem; color: var(--candle); background: #1a1220; border: 1px solid var(--candle-dim); border-radius: 20px; padding: 3px 12px; cursor: pointer; }
.chip.done { color: var(--spirit); border-color: rgba(159, 214, 200, 0.5); }
.chip.needy { color: var(--dim); border-style: dashed; border-color: var(--line); }
.book {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  background: #3a2414; border: 2px solid #1d1209; border-radius: 10px 16px 16px 10px; padding: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
@media (max-width: 700px) { .book { grid-template-columns: minmax(0, 1fr); padding: 6px; } }
.tabs { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px 6px 0; }
@media (max-width: 700px) { .tabs { flex-direction: row; overflow-x: auto; padding: 0 0 8px; } }
.tab {
  font: inherit; font-family: var(--sc); text-align: left; white-space: nowrap;
  color: #e5d3ae; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 8px 10px; cursor: pointer;
}
.tab:hover { background: rgba(255, 230, 190, 0.08); }
.tab.active { background: var(--parch); color: var(--parch-ink); border-color: var(--parch-line); }
.page {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.35), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(120, 80, 30, 0.18), transparent 60%),
    linear-gradient(180deg, var(--parch), var(--parch2));
  color: var(--parch-ink);
  border-radius: 4px 10px 10px 4px;
  padding: clamp(16px, 4vw, 34px);
  min-height: 60vh;
  min-width: 0;
  overflow-x: auto;
  box-shadow: inset 8px 0 18px -10px rgba(60, 30, 10, 0.6);
}
.page h2 { font-size: 1.8rem; color: #4a1f12; border-bottom: 1px solid var(--parch-line); padding-bottom: 6px; }
.page h3 { font-size: 1.2rem; color: #5a2a14; margin-top: 1.4em; }
.page .lead { font-size: 1.06rem; }
.page .note { color: var(--parch-dim); }
.page strong { color: #5a1a10; }
.page ol.rules { padding-left: 1.4em; }
.page ol.rules li { margin: 0.35em 0; padding-left: 0.2em; }
.page ul.plain { list-style: none; padding-left: 0.4em; }
.page .edition { text-align: right; color: var(--parch-dim); font-family: var(--sc); font-size: 0.85rem; margin-top: 2em; }
.grid { border-collapse: collapse; width: 100%; margin: 0.6em 0 1em; font-size: 0.98rem; }
.grid th, .grid td { border: 1px solid var(--parch-line); padding: 6px 8px; text-align: left; }
.grid th { font-family: var(--sc); font-weight: normal; background: rgba(110, 70, 30, 0.12); }
.grid td.word { font-family: var(--sc); letter-spacing: 0.08em; }
.grid td:not(.word), .time, .stats dd, .lc-terms dd, .plaque .year, .o-digit { font-family: Georgia, 'Times New Roman', serif; font-variant-numeric: lining-nums tabular-nums; }
.grid td.num { text-align: center; font-size: 1.05rem; }
.grid tbody tr:nth-child(2n) td { background: rgba(110, 70, 30, 0.05); }
@media (max-width: 520px) { .grid { font-size: 0.86rem; } .grid th, .grid td { padding: 4px 5px; } }
.smudge { display: inline-flex; align-items: center; gap: 3px; margin-right: 2px; vertical-align: baseline; color: #7a1f12; font-size: 1.15em; line-height: 1; }
.smudge::before {
  content: ''; display: inline-block; width: 3em; height: 1.05em;
  border-radius: 40% 55% 45% 60% / 60% 45% 55% 40%;
  background: radial-gradient(ellipse at 40% 50%, rgba(46, 32, 21, 0.75), rgba(46, 32, 21, 0.4) 55%, rgba(46, 32, 21, 0) 75%),
    radial-gradient(ellipse at 75% 30%, rgba(46, 32, 21, 0.35), transparent 60%);
  filter: blur(0.6px);
}
.margin {
  display: flex; gap: 10px; align-items: baseline; margin: 1.6em 0 0; padding: 10px 14px;
  border-left: 2px solid var(--parch-line); background: rgba(110, 70, 30, 0.07);
  font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; font-size: 0.92rem; color: #4a3a2c; transform: rotate(-0.6deg);
}
.margin .glyph { font-size: 1.3rem; color: #5a2a14; }
.margin .restored { color: #2e2015; }
.moons { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0 8px 1.4em; }
.moons figure { margin: 0; text-align: center; }
.moons svg { background: #17131f; border-radius: 50%; }
.moons figcaption { font-family: var(--sc); font-size: 0.85rem; }
.sigil-list { list-style: none; padding-left: 0.6em; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sigil-list .g { filter: sepia(1) saturate(0.6) brightness(0.7); }

/* ---- End ---- */
.end { max-width: 560px; margin: 10vh auto 0; text-align: center; }
.end h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
.end h1.win { color: var(--spirit); text-shadow: 0 0 24px rgba(159, 214, 200, 0.4); }
.end h1.lose { color: var(--blood); text-shadow: 0 0 24px rgba(208, 72, 63, 0.4); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 22px 0; }
.stats div { background: #120e17; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.stats dt { font-family: var(--sc); color: var(--dim); font-size: 0.8rem; }
.stats dd { margin: 4px 0 0; font-family: var(--sc); font-size: 1.3rem; }
.end-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.quit { position: fixed; right: 14px; bottom: 14px; z-index: 60; font: inherit; font-family: var(--sc); font-size: 0.85rem; color: var(--dim); background: rgba(14, 10, 19, 0.9); border: 1px solid var(--line); border-radius: 20px; padding: 6px 14px; cursor: pointer; }

/* ---- Motion ---- */
@keyframes flicker { 0%, 100% { transform: scale(1, 1) rotate(-1deg); } 30% { transform: scale(0.92, 1.08) rotate(2deg); } 60% { transform: scale(1.05, 0.95) rotate(-2deg); } }
@keyframes flare { 0% { transform: scale(1); } 40% { transform: scale(1.9, 2.4); filter: drop-shadow(0 0 24px #ff5a2a); } 100% { transform: scale(1); } }
@keyframes snuff { to { transform: scale(0.1, 0.4) translateY(-20px); opacity: 0; } }
@keyframes murmur { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(3deg); } 70% { transform: rotate(-3deg); } }
@keyframes hushed { 0% { box-shadow: 0 0 0 rgba(159, 214, 200, 0); } 30% { box-shadow: 0 0 34px rgba(159, 214, 200, 0.45); border-color: var(--spirit); } 100% { box-shadow: 0 0 0 rgba(159, 214, 200, 0); } }
@keyframes breathe { 50% { opacity: 0.6; text-shadow: 0 0 12px rgba(243, 184, 92, 0.3); } }
@keyframes sway { 50% { transform: rotate(6deg); } }
@keyframes shake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }
@keyframes wrong { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); box-shadow: 0 0 18px var(--blood); } 75% { transform: translateX(5px); } }
@keyframes wrong-rev { 0%, 100% { transform: rotate(180deg); } 25% { transform: rotate(180deg) translateX(-5px); box-shadow: 0 0 18px var(--blood); } 75% { transform: rotate(180deg) translateX(5px); } }
@keyframes burn { 0% { filter: none; } 40% { filter: sepia(1) brightness(1.4) drop-shadow(0 0 16px #ff8a2a); } 100% { filter: grayscale(1) brightness(0.3); opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---- Study (read the book from the main menu) ---- */
.study-open { width: 100%; margin-top: 12px; }
.study-bar {
  display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap;
  padding: 10px 14px; margin: 0 -4px 12px;
  background: rgba(14, 10, 19, 0.92); border: 1px solid var(--line); border-radius: 12px;
}
.study-ed { display: flex; align-items: center; gap: 8px; }
.study-ed input { width: 5.5em; padding: 6px 10px; }
.study-smudge { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.study-smudge input { width: auto; accent-color: var(--candle); }
.study-smudge small { color: var(--dim); }

/* ======================================================================
   Campaign: level card, difficulty, level list, banners
   ====================================================================== */
.level-card { background: #120e17; border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.level-card h3 { font-size: 1.4rem; color: var(--candle); margin: 2px 0 6px; }
.lc-desc { margin: 0 0 8px; font-style: italic; color: #dcd2bf; }
.lc-new { margin: 0 0 8px; color: var(--spirit); font-family: var(--sc); font-size: 0.95rem; }
.lc-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 10px 0 0; }
.lc-terms div { background: var(--panel2); border-radius: 8px; padding: 6px 10px; }
.lc-terms dt { font-family: var(--sc); font-size: 0.75rem; color: var(--dim); }
.lc-terms dd { margin: 2px 0 0; font-family: var(--sc); font-size: 1.05rem; }
.diff-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.diff-btn { font: inherit; color: var(--ink); background: #120e17; border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.diff-btn b { font-family: var(--sc); font-weight: normal; }
.diff-btn small { color: var(--dim); font-size: 0.75rem; font-family: Georgia, serif; }
.diff-btn.on { border-color: var(--candle); box-shadow: 0 0 0 1px var(--candle); }
.free-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#btn-levels { width: 100%; margin-bottom: 12px; }
.more-opts { margin-bottom: 12px; color: var(--dim); }
.more-opts summary { cursor: pointer; font-family: var(--sc); font-size: 0.9rem; margin-bottom: 6px; }
.level-list { max-width: 900px; margin: 0 auto 16px; }
.ll-head { display: flex; justify-content: space-between; align-items: center; }
.ll-chapter { margin-top: 14px; }
.ll-chapter h3 { color: var(--candle); margin: 0; }
.ll-chapter .note { margin: 2px 0 8px; }
.ll-row {
  font: inherit; color: var(--ink); width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 2.4em 1fr auto; align-items: center; gap: 10px;
  background: transparent; border: 0; border-top: 1px solid var(--line); padding: 8px 6px;
}
.ll-row:hover:not(:disabled) { background: rgba(243, 184, 92, 0.06); }
.ll-row.current { background: rgba(243, 184, 92, 0.1); }
.ll-row.locked { opacity: 0.45; cursor: not-allowed; }
.ll-n { font-family: Georgia, serif; color: var(--candle-dim); text-align: center; }
.ll-name small { color: var(--spirit); font-family: var(--sc); margin-left: 6px; }
.ll-marks { display: flex; gap: 4px; }
.ll-marks i { font-style: normal; font-family: var(--sc); font-size: 0.75rem; width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: #4a4055; }
.ll-marks i.on { border-color: var(--candle); color: #1a1208; background: var(--candle); }
.ll-free { margin-top: 12px; border-top: 1px solid var(--candle-dim); }
.level-banner { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.level-banner b { font-family: var(--sc); font-weight: normal; color: var(--candle); font-size: 1.15rem; }
.lb-terms { color: var(--dim); font-size: 0.9rem; }
.tab.fresh { color: #fff2cf; }
.new-tag { font-family: var(--sc); font-size: 0.7rem; color: #1a1208; background: var(--spirit); border-radius: 10px; padding: 0 6px; margin-left: 6px; }
.tab.active .new-tag { background: #5a2a14; color: var(--parch); }
.tab.locked { color: #8a7a66; cursor: not-allowed; opacity: 0.7; font-size: 0.85rem; }
.end-unlock { color: var(--spirit); font-family: var(--sc); min-height: 1em; }
#end-level { margin: -6px 0 6px; }

/* Shared feedback for relic parts */
.wrong { animation: wrong 0.5s; }
.right { box-shadow: 0 0 22px rgba(159, 214, 200, 0.5) !important; }
.swatch { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.4); vertical-align: -0.1em; }
.page .g { font-size: 1.15em; }

/* Generic needy panel (lantern, door) — mirrors the doll's */
.needy-wrap { display: flex; align-items: center; gap: 14px; padding: 4px 0; }
.needy-fig { flex: 0 0 auto; width: 100px; display: grid; place-items: center; }
.needy-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.needy-prompt { margin: 0; min-height: 1.6em; font-family: var(--sc); color: var(--dim); font-size: 1.05rem; }
.needy-prompt.on { color: #f1d9d6; text-shadow: 0 0 12px rgba(208, 72, 63, 0.6); animation: breathe 1.8s ease-in-out infinite; }
.needy-timer { height: 6px; background: #0a070d; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.needy-timer i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blood), #ff8a5c); transition: width 0.12s linear; }
.needy-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.needy-act { font-size: 0.82rem; padding: 6px 8px; }
@media (max-width: 400px) { .needy-wrap { flex-direction: column; } }

/* Lantern */
.lantern { width: 80px; height: auto; --flame: #ffb85a; }
.lantern .l-ring { fill: none; stroke: #8b6a3a; stroke-width: 3; }
.lantern .l-cap { fill: #4a3524; stroke: #8b6a3a; }
.lantern .l-glass { fill: rgba(255, 220, 160, 0.06); stroke: #8b6a3a; stroke-width: 2; }
.lantern .l-flame { fill: #ffb85a; opacity: 0.55; transition: fill 0.3s; }
.needy-fig.awake .l-flame { fill: var(--flame); opacity: 1; filter: drop-shadow(0 0 10px var(--flame)); animation: gutter 0.5s infinite alternate; transform-origin: 40px 70px; }
.lantern .l-shutters { display: none; fill: #3a2818; stroke: #8b6a3a; stroke-width: 1; }
.needy-fig.shutters-closed .l-shutters { display: inline; }
@keyframes gutter { from { transform: scale(0.85, 1.1); } to { transform: scale(1.1, 0.8); } }

/* Door */
.door-frame { position: relative; width: 78px; height: 120px; border: 5px solid #4a3524; border-bottom: 0; border-radius: 6px 6px 0 0; background: #050307; perspective: 300px; }
.door-leaf { position: absolute; inset: 0; background: linear-gradient(90deg, #3d2a1b, #5a3d26 40%, #3d2a1b); transform-origin: left center; transition: transform 1.2s ease; border: 1px solid #2a1c10; }
.door-leaf::before, .door-leaf::after { content: ''; position: absolute; left: 10px; right: 10px; height: 36%; border: 2px solid rgba(0, 0, 0, 0.35); border-radius: 3px; }
.door-leaf::before { top: 8%; } .door-leaf::after { bottom: 8%; }
.door-leaf .knob { position: absolute; right: 9px; top: 52%; width: 8px; height: 8px; border-radius: 50%; background: #c9a13a; }
.needy-fig.creak .door-leaf { transform: rotateY(-28deg); }
.door-leaf.knocking { animation: knock 0.32s steps(1) calc(var(--knocks, 1)); }
.door-light { position: absolute; left: -5px; right: -5px; bottom: -4px; height: 4px; background: var(--light, transparent); box-shadow: 0 0 12px 2px var(--light, transparent); opacity: 0; }
.needy-fig.creak .door-light { opacity: 1; }
@keyframes knock { 0% { translate: 0 0; } 50% { translate: 2px 0; } }

/* Dollhouse */
.dhouse { width: min(100%, 230px); margin: 0 auto; }
.dh-roof { height: 52px; background: linear-gradient(#3a2230, #2a1622); clip-path: polygon(50% 0, 100% 100%, 0 100%); position: relative; }
.dh-chimney { position: absolute; right: 22%; top: 8px; width: 14px; height: 26px; background: #3a2230; }
.dh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; background: linear-gradient(#5a3a46, #3e2632); border: 2px solid #2a1622; }
.dh-win { aspect-ratio: 3 / 4; border: 3px solid #2a1622; border-radius: 30px 30px 3px 3px; background: #0d0a12; cursor: pointer; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 0; }
.dh-win i { background: rgba(255, 255, 255, 0.02); }
.dh-win.lit { background: #f2c56a; box-shadow: 0 0 16px rgba(242, 197, 106, 0.7), inset 0 0 10px rgba(120, 60, 0, 0.5); }
.dh-win.lit i { background: rgba(255, 245, 210, 0.25); }
.mini-houses { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin: 10px 0; }
.mini-house { margin: 0; text-align: center; position: relative; }
.mh-no { position: absolute; left: 4px; top: 0; font-family: var(--sc); color: var(--parch-dim); }
.mh-grid { display: grid; grid-template-columns: repeat(3, 18px); gap: 4px; justify-content: center; padding: 6px; border: 1px solid var(--parch-line); border-radius: 6px; width: max-content; margin: 0 auto; }
.mh-grid i { width: 18px; height: 22px; border-radius: 8px 8px 2px 2px; border: 1px solid #6b5640; }
.mh-grid i.on { background: #d99a2a; }
.mini-house figcaption { font-size: 0.92rem; margin-top: 4px; }

/* Diary */
.diary { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.diary-cover { display: flex; gap: 14px; padding: 18px 22px; background: linear-gradient(135deg, #5a2a1e, #3a1a12); border: 3px solid #2a120c; border-radius: 4px 10px 10px 4px; box-shadow: inset 6px 0 0 #2a120c; }
.dsym { font-size: 2.1rem; color: #e6c88a; text-shadow: 0 1px 0 #000; width: 1.3em; text-align: center; }
.diary-dials { display: flex; gap: 10px; }
.dial { display: flex; flex-direction: column; align-items: center; background: #120e17; border: 1px solid #8b6a3a; border-radius: 8px; }
.dial-btn { font: inherit; background: none; border: 0; color: var(--candle); cursor: pointer; padding: 2px 12px; }
.dial-val { font-family: Georgia, serif; font-size: 1.6rem; width: 1.6em; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.diary.open .diary-cover { transform: perspective(400px) rotateY(-25deg); transition: transform 0.8s; }

/* Bell */
.bell-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bell { position: relative; font-size: 3.6rem; transform-origin: 50% 0; line-height: 1; }
.bell.swing { animation: bellswing 0.8s ease-out; }
.bell-ribbon { position: absolute; left: 50%; top: -10px; width: 34px; height: 12px; transform: translateX(-50%); background: var(--rib); border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.4); }
.bell-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
@keyframes bellswing { 20% { transform: rotate(16deg); } 50% { transform: rotate(-12deg); } 75% { transform: rotate(6deg); } }

/* Mirror */
.mirror { width: min(100%, 200px); margin: 0 auto; padding: 12px; border-radius: 50% / 46%; background: linear-gradient(135deg, #8b6a3a, #4a3524); }
.mirror .glass { position: relative; aspect-ratio: 3 / 4; border-radius: 50% / 46%; background: radial-gradient(ellipse at 40% 30%, #4b5a66, #1c242b 70%); overflow: hidden; }
.mirror .fog { position: absolute; top: 14%; left: 0; right: 0; text-align: center; transform: scaleX(-1); font-family: var(--sc); font-size: 1.3rem; letter-spacing: 0.12em; color: rgba(235, 240, 245, 0.85); text-shadow: 0 0 6px rgba(255, 255, 255, 0.6); z-index: 2; }
.mirror .face { position: absolute; left: 15%; width: 70%; bottom: 4%; opacity: 0.55; }
.mirror .f-head { fill: #c9d3da; } .mirror .f-eye { fill: #1c242b; } .mirror .f-mouth { fill: none; stroke: #1c242b; stroke-width: 3; }
.mirror .crack { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; }
.mirror .crack path { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.2; }
.mirror-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }

/* Headstone */
.headstone { width: min(100%, 230px); margin: 0 auto; padding: 18px 12px 22px; background: linear-gradient(#77767c, #4a494f); border-radius: 50% 50% 6px 6px / 30% 30% 6px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.5); }
.hs-cross { color: #2c2b30; font-size: 1.4rem; }
.hs-word { font: inherit; font-family: var(--sc); letter-spacing: 0.14em; font-size: 1.1rem; color: #e8e4da; background: none; border: 1px solid transparent; border-radius: 6px; padding: 2px 10px; cursor: pointer; text-shadow: 0 1px 0 #222; }
.hs-word:hover { border-color: rgba(255, 255, 255, 0.3); }
.hs-word.chiselled { text-decoration: line-through; opacity: 0.5; }
.page ol.epitaphs li { font-family: var(--sc); letter-spacing: 0.08em; margin: 0.3em 0; }

/* Crystal ball */
.crystal { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ball { width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.5), rgba(160, 180, 220, 0.12) 40%, rgba(20, 20, 40, 0.5)); border: 1px solid rgba(200, 210, 255, 0.4); position: relative; overflow: hidden; }
.ball .mist { position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle, var(--mist, transparent), transparent 70%); opacity: 0; transition: opacity 0.4s, background 0.4s; filter: blur(4px); }
.ball.swirl .mist { opacity: 1; animation: swirl 2.6s linear infinite; }
.ball-base { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 8px; width: min(100%, 280px); background: linear-gradient(#4a3524, #2a1c10); border-radius: 0 0 40px 40px / 0 0 20px 20px; }
.rune-btn { background: #1c130d; border: 1px solid #8b6a3a; border-radius: 6px; padding: 4px 0; cursor: pointer; display: grid; place-items: center; }
.rune { width: 18px; height: 27px; fill: none; stroke: #e6c88a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.page .rune { stroke: #4a1f12; }
.rune.small { width: 12px; height: 18px; vertical-align: -0.25em; }
.rune-cell { white-space: nowrap; }
.rune-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.rune-legend span { display: flex; flex-direction: column; align-items: center; font-family: var(--sc); font-size: 0.8rem; }
@keyframes swirl { to { transform: rotate(360deg) scale(1.1); } }

/* Raven */
.raven-scene { position: relative; display: flex; justify-content: center; padding: 6px 0; }
.raven { position: relative; width: 120px; }
.raven svg { width: 100%; height: auto; }
.raven .r-body { fill: #15121a; stroke: #3a3344; stroke-width: 1.5; }
.raven .r-beak { fill: #2a2520; } .raven .r-eye { fill: #e8c25a; } .raven .r-leg { stroke: #6a5a4a; stroke-width: 3; fill: none; }
.raven .r-head { transform-origin: 46px 44px; }
.raven.tilt-left .r-head { transform: rotate(-22deg); }
.raven.tilt-right .r-head { transform: rotate(22deg); }
.raven .trinket { position: absolute; left: 0; top: 36%; font-size: 1.4rem; }
.caw { position: absolute; right: 8%; top: 0; font-family: var(--sc); color: #f1d9d6; font-size: 1.1rem; }
.caw.pop { animation: pop 0.5s; }
.raven-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } 50% { transform: scale(1.2); opacity: 1; } }

/* Palm */
.hand { width: min(100%, 260px); margin: 0 auto; }
.fingers { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 110px; }
.finger { font: inherit; position: relative; width: 38px; border-radius: 18px 18px 4px 4px; border: 1px solid #b89a82; background: linear-gradient(90deg, #d9bfa6, #ecd8c4, #d9bfa6); cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 4px; }
.finger small { font-family: var(--sc); font-size: 0.6rem; color: #6b4a34; }
.f-thumb { height: 58px; } .f-index { height: 92px; } .f-middle { height: 106px; } .f-ring { height: 96px; } .f-little { height: 74px; }
.fring { position: absolute; left: -2px; right: -2px; bottom: 26px; height: 9px; border-radius: 3px; }
.fring.gold { background: linear-gradient(#f5d77a, #b88a22); } .fring.silver { background: linear-gradient(#f2f4f7, #8e96a0); }
.palm-base { position: relative; height: 96px; margin-top: -2px; background: radial-gradient(ellipse at 50% 30%, #ecd8c4, #d4b79c); border: 1px solid #b89a82; border-radius: 10px 10px 50px 50px; }
.palm-base svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lifeline, .heartline { fill: none; stroke: #8a5a44; stroke-width: 2.5; }
.lifeline.broken { stroke-dasharray: 26 10 60 200; }
.pmark { position: absolute; left: 34%; top: 38%; color: #6b2a1a; font-size: 1.3rem; }

/* Gramophone */
.gramo { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.disc { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: repeating-radial-gradient(circle, var(--disc) 0 3px, #000 3px 4px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6); }
.disc .label { width: 74px; height: 74px; border-radius: 50%; background: #ecdcb6; color: #3a2414; display: grid; place-items: center; text-align: center; font-family: var(--sc); font-size: 0.68rem; line-height: 1.1; padding: 8px; }
.disc.spin { animation: spin 1.8s linear infinite; }
.gramo-controls { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.seg { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.seg .label { margin-right: 4px; }
.seg-btn { font: inherit; font-family: Georgia, serif; font-size: 0.85rem; color: var(--ink); background: #120e17; border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; cursor: pointer; }
.seg-btn.on { border-color: var(--candle); background: #2a1c10; color: var(--candle); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Pendulum */
.pboard { position: relative; width: min(100%, 220px); aspect-ratio: 1; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; background: #2a1c10; border: 3px solid #8b6a3a; border-radius: 12px; overflow: hidden; }
.pq { font: inherit; background: #3a2818; border: 1px solid #5a4028; cursor: pointer; display: grid; place-items: center; font-size: 2rem; color: #e6c88a; }
.pq:hover { background: #4a3420; }
.pbob { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.pbob i { position: absolute; width: 20px; height: 26px; left: -10px; top: -13px; background: var(--crystal); clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); filter: drop-shadow(0 0 6px var(--crystal)); }
.swing-updown i { animation: p-ud 1.8s ease-in-out infinite alternate; }
.swing-sideways i { animation: p-lr 1.8s ease-in-out infinite alternate; }
.swing-clockwise { animation: p-cw 2.4s linear infinite; }
.swing-anticlockwise { animation: p-cw 2.4s linear infinite reverse; }
.swing-clockwise i, .swing-anticlockwise i { translate: 0 -42px; }
.pboard.still .pbob, .pboard.still .pbob i { animation: none; translate: 0 0; }
@keyframes p-ud { from { translate: 0 -60px; } to { translate: 0 60px; } }
@keyframes p-lr { from { translate: -60px 0; } to { translate: 60px 0; } }
@keyframes p-cw { to { transform: rotate(360deg); } }

/* Knucklebones */
.kbones { display: flex; justify-content: center; gap: 14px; padding: 10px 0; }
.kbone { width: 66px; height: 66px; border-radius: 14px; background: linear-gradient(135deg, #f1e7d0, #cbbd9f); border: 2px solid #8a7a5a; cursor: pointer; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 8px; }
.kbone i { width: 11px; height: 11px; border-radius: 50%; background: #3a2414; place-self: center; }
.kbone.v1 i:nth-child(1) { grid-area: 2 / 2; }
.kbone.v2 i:nth-child(1) { grid-area: 1 / 1; } .kbone.v2 i:nth-child(2) { grid-area: 3 / 3; }
.kbone.v3 i:nth-child(1) { grid-area: 1 / 1; } .kbone.v3 i:nth-child(2) { grid-area: 2 / 2; } .kbone.v3 i:nth-child(3) { grid-area: 3 / 3; }
.kbone.v4 i:nth-child(1) { grid-area: 1 / 1; } .kbone.v4 i:nth-child(2) { grid-area: 1 / 3; } .kbone.v4 i:nth-child(3) { grid-area: 3 / 1; } .kbone.v4 i:nth-child(4) { grid-area: 3 / 3; }
.kbone.v5 i:nth-child(1) { grid-area: 1 / 1; } .kbone.v5 i:nth-child(2) { grid-area: 1 / 3; } .kbone.v5 i:nth-child(3) { grid-area: 2 / 2; } .kbone.v5 i:nth-child(4) { grid-area: 3 / 1; } .kbone.v5 i:nth-child(5) { grid-area: 3 / 3; }
.kbone.v6 i:nth-child(1) { grid-area: 1 / 1; } .kbone.v6 i:nth-child(2) { grid-area: 2 / 1; } .kbone.v6 i:nth-child(3) { grid-area: 3 / 1; } .kbone.v6 i:nth-child(4) { grid-area: 1 / 3; } .kbone.v6 i:nth-child(5) { grid-area: 2 / 3; } .kbone.v6 i:nth-child(6) { grid-area: 3 / 3; }
.kbones[class*="kept-"] .kbone { opacity: 0.25; filter: grayscale(1); }
.kbones.kept-0 .kbone:nth-child(1), .kbones.kept-1 .kbone:nth-child(2), .kbones.kept-2 .kbone:nth-child(3) { opacity: 1; filter: none; }

/* Salt circle */
.salt { position: relative; width: min(100%, 240px); aspect-ratio: 1; margin: 0 auto; }
.salt svg { width: 100%; height: 100%; }
.salt-arc { fill: none; stroke: #ece8df; stroke-width: 3.2; stroke-linecap: round; }
.salt-labels text { font-family: Georgia, serif; font-size: 6px; fill: var(--dim); text-anchor: middle; }
.skull-mark { position: absolute; transform: translate(-50%, -50%); font-size: 1.3rem; filter: drop-shadow(0 0 6px rgba(236, 232, 223, 0.5)); pointer-events: none; }
.gap { position: absolute; width: 24px; height: 24px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px dashed var(--blood); background: rgba(208, 72, 63, 0.15); cursor: pointer; }
.gap.sealed { border: 2px solid #ece8df; background: #ece8df; box-shadow: 0 0 10px rgba(236, 232, 223, 0.7); }

/* Apothecary */
.shelf { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 10px 6px 0; border-bottom: 10px solid #4a3524; }
@media (max-width: 420px) { .shelf { grid-template-columns: repeat(3, 1fr); } }
.jar { font: inherit; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; padding: 0; }
.jar-lid { width: 60%; height: 8px; background: #6b4a2a; border-radius: 3px 3px 0 0; }
.jar-body { position: relative; width: 100%; height: 78px; border: 2px solid rgba(220, 230, 240, 0.4); border-radius: 6px 6px 10px 10px; background: rgba(220, 230, 240, 0.06); overflow: hidden; }
.jar-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: var(--liquid); opacity: 0.85; }
.jar-label { position: absolute; left: 4%; right: 4%; top: 22%; background: #ecdcb6; color: #3a2414; font-family: var(--sc); font-size: 0.58rem; padding: 3px 1px; border-radius: 2px; text-align: center; line-height: 1.1; overflow-wrap: anywhere; }
.jar.added { opacity: 0.35; }

/* ======================================================================
   One screen + printed grimoire
   ====================================================================== */
.study-open small { color: var(--dim); font-family: var(--serif); font-size: 0.8rem; margin-left: 4px; }
#screen-lobby.solo .lobby-head { display: none; }
#screen-lobby.solo .lobby-grid { margin-top: 12px; }
.lead-sm { color: #dcd2bf; margin: 0 0 12px; }
.primary-ghost { width: 100%; border-color: var(--candle-dim); color: var(--candle); }
.check-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; color: var(--dim); cursor: pointer; }
.check-row input { width: auto; accent-color: var(--candle); }
.print-new { background: rgba(159, 214, 200, 0.08); border: 1px solid rgba(159, 214, 200, 0.35); border-radius: 10px; padding: 10px; margin: 8px 0; color: #d9efe9; font-size: 0.95rem; }
.print-new .btn { margin-top: 8px; }
.study-print { margin-left: auto; }

/* The print page: paper sheets on screen, real pages on paper. */
body.printing { background: #d9d4ca; color: #111; }
body.printing #app, body.printing #fx-vignette { display: none; }
.print-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #1b1522; color: var(--ink); font-family: var(--sc); }
#print-root { max-width: 820px; margin: 0 auto; padding: 16px; }
.print-sheet { background: #fffdf8; color: #111; margin: 0 0 18px; padding: 18mm 16mm; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); }
.page.print { background: none; box-shadow: none; min-height: 0; padding: 0; overflow: visible; border-radius: 0; color: #111; }
.page.print h2 { color: #3a1408; border-bottom-color: #999; }
.page.print .grid th, .page.print .grid td { border-color: #888; }
.page.print .grid th { background: #eee; }
.page.print .grid tbody tr:nth-child(2n) td { background: #f6f4ef; }
.pnum { color: #8a6a4a; }
.print-cover { text-align: center; font-family: var(--serif); }
.pc-crest { font-size: 48px; color: #8a5a2a; margin-top: 30px; }
.print-cover h1 { font-family: var(--sc); font-size: 3.4rem; margin: 0; color: #2a1408; }
.pc-sub { font-size: 1.2rem; margin: 6px 0; }
.pc-scope { color: #555; font-style: italic; }
.print-cover h3 { font-family: var(--sc); margin-top: 28px; }
.pc-contents { list-style: none; padding: 0; display: inline-block; text-align: left; columns: 2; column-gap: 40px; margin: 0; }
.pc-contents li { margin: 3px 0; break-inside: avoid; }
.pc-contents span { display: inline-block; width: 1.8em; color: #8a6a4a; font-family: Georgia, serif; }
.pc-contents small { color: #777; }
.pc-rule { margin-top: 36px; font-style: italic; color: #555; }
@media print {
  @page { margin: 14mm; }
  body.printing { background: #fff; }
  .print-bar { display: none; }
  #print-root { max-width: none; padding: 0; }
  .print-sheet { box-shadow: none; margin: 0; padding: 0; break-after: page; background: none; }
  .page.print { font-size: 10.5pt; line-height: 1.35; }
  .page.print .lead { font-size: 10.8pt; }
  .page.print h2 { font-size: 18pt; }
  .page.print h3 { font-size: 12.5pt; margin-top: 1em; }
  .page.print .grid { font-size: 10pt; }
  .page.print .grid th, .page.print .grid td { padding: 4px 7px; }
  .print-sheet:last-child { break-after: auto; }
  .page.print .grid { break-inside: auto; }
  .page.print .grid tr, .mini-house, .page.print .margin { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- Candle ratings ---- */
.candles { display: inline-flex; gap: 3px; vertical-align: middle; }
.candles i { width: 8px; height: 18px; border-radius: 2px 2px 1px 1px; background: #3a3044; position: relative; margin-top: 6px; }
.candles i::before { content: ''; position: absolute; left: 50%; top: -7px; width: 6px; height: 8px; transform: translateX(-50%); border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: #3a3044; }
.candles i.lit { background: #ece4d2; }
.candles i.lit::before { background: radial-gradient(ellipse at 50% 70%, #fffbe8, #ffd27a 45%, #ff8a2a 80%); box-shadow: 0 0 8px rgba(255, 180, 80, 0.8); }
.candles.big { gap: 10px; margin: 6px 0 2px; }
.candles.big i { width: 16px; height: 40px; margin-top: 14px; }
.candles.big i::before { width: 12px; height: 18px; top: -16px; }
.criteria { list-style: none; padding: 0; margin: 8px 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; color: var(--dim); font-size: 0.92rem; }
.criteria li::before { content: '✕ '; color: #5a4a66; }
.criteria li.ok { color: var(--ink); }
.criteria li.ok::before { content: '✓ '; color: var(--spirit); }
.best-line { font-family: var(--sc); color: var(--candle); margin: 4px 0 0; }
.lc-best { margin: 10px 0 0; display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 0.88rem; }
.ll-marks i { width: auto; min-width: 1.6em; padding: 0 3px; border-radius: 10px; }
.ll-marks sup { font-size: 0.6rem; margin-left: 1px; }
.ll-total { font-family: var(--serif); color: var(--dim); font-size: 0.85rem; margin-left: 8px; }
.home-progress { color: var(--candle); font-family: var(--sc); font-size: 0.9rem; margin: 14px 0 0; min-height: 1em; }
.home-progress b { font-weight: normal; color: #fff2cf; }

/* ---- App install, offline, versions ---- */
.install-btn { margin-top: 10px; }
.install-hint, .offline-note { color: var(--dim); font-size: 0.85rem; font-style: italic; margin: 8px 0 0; }
.offline-note { color: var(--candle); }
.version-warn { background: rgba(208, 72, 63, 0.12); border: 1px solid rgba(208, 72, 63, 0.5); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; color: #f1d9d6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.players .stale { font-family: var(--sc); font-size: 0.72rem; color: var(--blood); border: 1px solid var(--blood); border-radius: 4px; padding: 0 5px; margin-left: 4px; }

/* ---- Sound controls ---- */
.sound-ctl { position: fixed; left: 14px; bottom: 14px; z-index: 60; }
.sound-btn { font-size: 1rem; width: 38px; height: 34px; color: var(--ink); background: rgba(14, 10, 19, 0.9); border: 1px solid var(--line); border-radius: 20px; cursor: pointer; }
.sound-pop { position: absolute; left: 0; bottom: 44px; width: 220px; padding: 12px 14px; background: #16111d; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 10px; }
.sound-pop label { display: grid; grid-template-columns: 4.5em 1fr; align-items: center; gap: 8px; font-family: var(--sc); font-size: 0.85rem; color: var(--dim); }
.sound-pop input[type=range] { padding: 0; accent-color: var(--candle); background: none; border: 0; }
body.printing .sound-ctl { display: none; }
.role-card .unseat { color: var(--candle); font-size: 0.8rem; min-height: 0; }
.role-card .unseat:empty { display: none; }

/* ---- Scholars feel the wrath instead of reading it ---- */
.status-bar.scholar { justify-content: space-between; }
.scholar-note { color: var(--dim); font-style: italic; font-size: 0.9rem; }
body.in-seance #fx-vignette { animation: throb var(--pulse, 2.8s) ease-in-out infinite; }
@keyframes throb { 0%, 100% { opacity: 1; } 50% { opacity: calc(0.85 - var(--wrath) * 0.45); } }
.blessed { animation: blessed 1.2s ease-out; }
@keyframes blessed { 0% { box-shadow: inset 0 0 0 0 rgba(159, 214, 200, 0); } 30% { box-shadow: inset 0 0 80px 10px rgba(159, 214, 200, 0.25); } 100% { box-shadow: inset 0 0 0 0 rgba(159, 214, 200, 0); } }

/* ---- Colour labels (Settings → Colour labels) ---- */
.cb-label { display: none; }
body.cb .cb-label {
  display: inline-block; font-family: var(--sc); font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.2;
  color: #f4ecdc; background: rgba(10, 7, 14, 0.85); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px;
}
body.cb .candle .cb-label { margin-top: 4px; text-transform: capitalize; font-size: 0.66rem; padding: 1px 3px; }
body.cb .cb-block { display: block; width: max-content; margin: 8px auto 0; }
body.cb .cb-mist { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2; }
body.cb .cb-mist:empty { display: none; }
body.cb .jar .cb-label { margin-top: 4px; font-size: 0.62rem; padding: 0 3px; }
body.cb .fring .cb-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 0.5rem; padding: 0 2px; border-radius: 3px; }
body.cb .needy-fig { flex-direction: column; gap: 6px; }
body.cb .needy-fig:not(.awake) .cb-awake, body.cb .cb-awake:empty { display: none; }
.opt-row { display: flex !important; align-items: flex-start; gap: 8px; cursor: pointer; color: var(--ink) !important; border-top: 1px solid var(--line); padding-top: 10px; }
.opt-row input { width: auto; margin-top: 3px; accent-color: var(--candle); }
.opt-row small { display: block; color: var(--dim); font-family: var(--serif); font-size: 0.75rem; letter-spacing: 0; }

/* ======================================================================
   Curses
   ====================================================================== */
.curse-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.curse-chip { font-family: var(--sc); font-size: 0.85rem; color: #f1c9c4; border: 1px solid rgba(208, 72, 63, 0.6); background: rgba(208, 72, 63, 0.12); border-radius: 20px; padding: 2px 10px; cursor: help; }
.lc-curse { color: #f1b4ad; margin: 0 0 8px; font-size: 0.92rem; }
.lc-cursed dd { color: #f1b4ad; }
.curse-active { font-family: var(--serif); font-size: 0.75rem; color: #7a1f12; border: 1px solid #7a1f12; border-radius: 10px; padding: 0 6px; margin-left: 6px; vertical-align: middle; }

/* Looking-Glass: the table and its surroundings are reflected (clicks still land where they look). */
.curse-mirror .relics, .curse-mirror .seance-ctx { transform: scaleX(-1); }

/* Silent Hour: no clock, no meter for the Medium. */
.curse-silent .status-bar .wrath { visibility: hidden; }

/* Blackout: every candle dies for a few seconds. */
.curse-blackout { position: fixed; inset: 0; z-index: 40; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.6s; display: grid; place-items: center; }
.curse-blackout span { color: rgba(200, 190, 210, 0.3); font-family: var(--sc); font-style: italic; letter-spacing: 0.1em; }
.curse-blackout.on { opacity: 0.985; transition: opacity 0.12s; }

/* Darkness: only a pool of light around the Medium's hand. The status bar stays lit above it. */
.curse-darkness { position: fixed; inset: 0; z-index: 35; pointer-events: none;
  background: radial-gradient(circle 160px at var(--x) var(--y), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.975) 100%); }
.curse-dark .status-bar { z-index: 36; }

/* Lying Whispers and the Poltergeist's notes. */
.curse-lie { position: fixed; z-index: 45; max-width: 60vw; font-style: italic; font-size: 1.3rem; color: rgba(255, 225, 220, 0.88); text-shadow: 0 0 12px rgba(208, 72, 63, 0.9), 0 0 2px #000; pointer-events: none; animation: lie 4.2s ease-in-out forwards; }
@keyframes lie { 0% { opacity: 0; transform: translateY(10px); filter: blur(6px); } 15% { opacity: 1; filter: blur(0); } 80% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-20px); filter: blur(4px); } }
.curse-flip { position: fixed; top: 30%; left: 0; right: 0; text-align: center; z-index: 45; font-family: var(--sc); font-size: 1.4rem; color: #f1d9d6; text-shadow: 0 0 18px rgba(208, 72, 63, 0.9); pointer-events: none; animation: lie 2.6s forwards; }

/* ======================================================================
   The spirit claims you
   ====================================================================== */
.death { position: fixed; inset: 0; z-index: 200; overflow: hidden; cursor: pointer; }
.dz-black { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 0.3s ease-in; }
.death.dz-dark .dz-black { opacity: 0.97; }
.dz-red { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, rgba(170, 0, 12, 0.5), rgba(30, 0, 0, 0.92) 72%); }
.death.dz-flicker .dz-red { animation: dzFlicker 0.52s steps(1) forwards; }
@keyframes dzFlicker { 0% { opacity: 0.9; } 12% { opacity: 0; } 25% { opacity: 0.6; } 40% { opacity: 0; } 55% { opacity: 0.85; } 70% { opacity: 0.15; } 100% { opacity: 0.55; } }
.dz-face { position: absolute; left: 50%; top: 52%; width: min(44vw, 270px); transform: translate(-50%, -50%) scale(0.35); opacity: 0; filter: drop-shadow(0 0 30px rgba(255, 40, 30, 0.55)); }
.dz-face .dz-hair { fill: #0b080e; }
.dz-face .dz-pupil { fill: #ffd8c8; }
.death.dz-flicker .dz-face { animation: dzFaceFlicker 0.52s steps(1) forwards; }
@keyframes dzFaceFlicker { 0% { opacity: 0.8; } 12% { opacity: 0; } 25% { opacity: 0.45; } 40% { opacity: 0; } 55% { opacity: 0.95; } 70% { opacity: 0.3; } 100% { opacity: 0.9; } }
.death.dz-lunge .dz-face { animation: dzLunge 0.26s cubic-bezier(0.7, 0, 1, 0.3) forwards; }
@keyframes dzLunge { from { opacity: 1; transform: translate(-50%, -50%) scale(0.35); filter: drop-shadow(0 0 30px rgba(255, 40, 30, 0.55)) brightness(1); } to { opacity: 1; transform: translate(-50%, -40%) scale(7.5); filter: drop-shadow(0 0 60px rgba(255, 20, 10, 0.9)) brightness(1.35) contrast(1.3); } }
.death.dz-lunge { animation: dzShake 0.6s 0.05s; }
/* The instant it hits: a blinding white-red flash. */
.death.dz-lunge::before { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; animation: dzHit 0.32s 0.2s both; }
@keyframes dzHit { 0% { background: #fff; opacity: 0; } 8% { background: #fff; opacity: 0.95; } 30% { background: #ff1a0a; opacity: 0.8; } 100% { background: #3a0000; opacity: 0; } }
@keyframes dzShake { 8% { transform: translate(-26px, 14px) rotate(-1deg); } 16% { transform: translate(24px, -18px) rotate(1deg); } 26% { transform: translate(-18px, -10px); } 36% { transform: translate(14px, 16px); } 50% { transform: translate(-9px, 6px); } 66% { transform: translate(6px, -5px); } 82% { transform: translate(-3px, 2px); } }
.dz-cracks { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.dz-cracks path { fill: none; stroke: rgba(255, 245, 240, 0.9); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6)); }
.death.dz-crack .dz-cracks { opacity: 1; animation: dzCrackIn 0.18s; }
@keyframes dzCrackIn { 0% { opacity: 0; } 30% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
.death.dz-crack .dz-face { animation: none; opacity: 0; transition: opacity 0.25s; transform: translate(-50%, -42%) scale(6); }
.death.dz-crack .dz-red { animation: none; opacity: 1; background: radial-gradient(ellipse at center, rgba(110, 0, 8, 0.8), #070002 75%); }
.death.dz-crack::after { content: ''; position: absolute; inset: 0; background: #fff; animation: dzFlash 0.35s forwards; pointer-events: none; }
@keyframes dzFlash { from { opacity: 0.85; } to { opacity: 0; } }
.dz-words { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 16px; opacity: 0; }
.dz-words h1 { font-family: var(--sc); font-size: clamp(2.2rem, 8vw, 4.8rem); color: #d81e18; letter-spacing: 0.06em; margin: 0; text-shadow: 0 0 34px rgba(255, 0, 0, 0.6), 0 3px 0 #2a0000; }
.dz-words p { color: #e9c9c4; font-style: italic; font-size: 1.2rem; margin: 10px 0 0; }
.death.dz-verdict .dz-words { animation: dzBleed 1.1s ease-out forwards; }
@keyframes dzBleed { from { opacity: 0; filter: blur(16px); transform: scale(1.18); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
.dz-skip { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, 0.4); font-family: var(--sc); font-size: 0.8rem; opacity: 0; transition: opacity 0.8s 0.4s; }
.death.dz-verdict .dz-skip { opacity: 1; }
.death.dz-out { opacity: 0; transition: opacity 0.45s; }
body.dying .sound-ctl, body.dying .quit { visibility: hidden; }
#screen-end.slain .end { border-color: rgba(208, 72, 63, 0.6); box-shadow: 0 0 60px rgba(160, 0, 10, 0.35), 0 10px 40px rgba(0, 0, 0, 0.5); }
#screen-end.slain #end-title { font-size: clamp(2.1rem, 7vw, 2.9rem); }

/* ======================================================================
   The Medium's séance table
   ====================================================================== */
#screen-medium .role-hint { text-align: center; color: #c9b8a0; margin: 2px 0 10px; }
#screen-medium .curse-row { justify-content: center; }

.seance-table {
  position: relative; isolation: isolate;
  padding: clamp(10px, 2.4vw, 22px); border-radius: 26px;
  /* Dark oak: long grain from turbulence, plank seams, and a warm-to-dark fall-off. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.09' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.05 0 0 0 0 0.02 0 0 0 1.1 -0.35'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), rgba(0, 0, 0, 0.35) calc(25% - 2px) 25%),
    linear-gradient(180deg, #4a2c18 0%, #34200f 45%, #1d1108 100%);
  border: 3px solid #140b05;
  box-shadow: inset 0 0 0 2px rgba(201, 161, 58, 0.18), inset 0 0 120px rgba(0, 0, 0, 0.75), 0 30px 70px rgba(0, 0, 0, 0.65);
}
/* Candlelight pooling from above, flickering. */
.table-glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 70% 45% at 50% 4%, rgba(255, 196, 110, 0.26), rgba(255, 170, 80, 0.08) 55%, transparent 75%);
  animation: candlelight 3.2s infinite;
}
@keyframes candlelight {
  0%, 100% { opacity: 1; } 12% { opacity: 0.86; } 20% { opacity: 0.97; } 34% { opacity: 0.8; }
  48% { opacity: 1; } 61% { opacity: 0.9; } 70% { opacity: 0.95; } 83% { opacity: 0.82; }
}
.seance-table .dust { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; z-index: 0; mix-blend-mode: screen; }
.seance-table > .seance-ctx, .seance-table > .relics { position: relative; z-index: 1; }

/* Table details: a stone plaque, a window, charms on threads, sigils carved into the wood. */
.seance-table .ctx {
  background: linear-gradient(180deg, rgba(20, 12, 6, 0.55), rgba(10, 6, 3, 0.7));
  border: 1px solid rgba(201, 161, 58, 0.25);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 220, 160, 0.06);
}
.seance-table .ctx .cap { color: #b9a07a; }
.seance-table .plaque { background: linear-gradient(180deg, #5b5a60, #34333a); border-color: #6e6c75; box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5), 0 6px 14px rgba(0, 0, 0, 0.6); }
.seance-table .sigils { background: transparent; border-style: dashed; border-color: rgba(201, 161, 58, 0.18); box-shadow: none; }
.seance-table .sigil b { filter: sepia(1) saturate(0.4) brightness(0.55); text-shadow: 0 1px 0 rgba(255, 220, 160, 0.12), 0 -1px 0 rgba(0, 0, 0, 0.9); }
.seance-table .sigil small { color: #8f7656; }

/* Each relic rests on a velvet cloth inside a brass-cornered frame, with an engraved nameplate. */
#screen-medium .relic {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 200, 130, 0.1), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #2c1424, #190a14);
  border: 1px solid #5a3a22;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(201, 161, 58, 0.22), inset 0 0 50px rgba(0, 0, 0, 0.6), 0 12px 26px rgba(0, 0, 0, 0.6);
}
#screen-medium .relic::before, #screen-medium .relic::after {
  content: ''; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border: 3px solid #b8892e; opacity: 0.75;
}
#screen-medium .relic::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
#screen-medium .relic::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
#screen-medium .relic header { justify-content: center; position: relative; margin-bottom: 12px; }
#screen-medium .relic h3 {
  font-size: 0.95rem; color: #2a1606; letter-spacing: 0.06em;
  background: linear-gradient(180deg, #e2c071, #b88d34 55%, #8a6420);
  padding: 3px 14px; border-radius: 4px;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45);
  box-shadow: inset 0 0 0 1px rgba(60, 35, 5, 0.5), inset 0 1px 0 rgba(255, 245, 210, 0.5), 0 2px 5px rgba(0, 0, 0, 0.55);
}
#screen-medium .relic .needy-tag { position: absolute; right: 0; }
#screen-medium .relic-tip { color: #b2a088; }

/* Cleansed: a red wax seal is pressed onto the frame and a pale light settles on the relic. */
#screen-medium .relic .seal {
  position: absolute; right: -4px; top: -10px; width: 58px; height: 58px; padding: 0;
  display: grid; place-items: center; text-align: center; line-height: 1;
  font-size: 0.6rem; letter-spacing: 0.04em; color: #f6d9c8; border: 0;
  background: radial-gradient(circle at 38% 34%, #d0483f, #8e1d18 62%, #5e0f0c);
  border-radius: 47% 53% 50% 50% / 52% 48% 54% 46%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 0 0 4px rgba(0, 0, 0, 0.18), inset 0 0 0 6px rgba(255, 200, 180, 0.08);
  transform: scale(1.6) rotate(-20deg); opacity: 0; transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.2s;
}
#screen-medium .relic.solved .seal { opacity: 1; transform: scale(1) rotate(-12deg); }
#screen-medium .relic.solved {
  border-color: rgba(159, 214, 200, 0.55);
  box-shadow: inset 0 0 0 1px rgba(159, 214, 200, 0.3), inset 0 0 60px rgba(159, 214, 200, 0.08), 0 12px 26px rgba(0, 0, 0, 0.6), 0 0 34px rgba(159, 214, 200, 0.14);
}

/* Needy relics wait in shadow, then flare red when they call. */
#screen-medium .relic.needy { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(208, 72, 63, 0.08), transparent 70%), linear-gradient(180deg, #221218, #120810); }

/* The Medium's status bar reads like a brass instrument. */
#screen-medium .status-bar { background: linear-gradient(180deg, rgba(30, 20, 12, 0.95), rgba(16, 10, 6, 0.95)); border-color: #4a3524; box-shadow: inset 0 0 0 1px rgba(201, 161, 58, 0.15), 0 6px 18px rgba(0, 0, 0, 0.5); }
#screen-medium .meter { border-color: #5a4028; }

@media (max-width: 520px) {
  .seance-table { border-radius: 16px; }
  #screen-medium .relic .seal { width: 46px; height: 46px; }
}

/* ---- The doll lashes out (wrong comfort or an ignored whisper) ---- */
.doll .d-rage { display: none; }
.d-brow { fill: none; stroke: #2a140c; stroke-width: 2.2; stroke-linecap: round; }
.d-void { fill: #060208; }
.d-glow { fill: #ff2a1a; filter: drop-shadow(0 0 2.5px #ff2a1a); }
.d-scream { fill: #0b0306; stroke: #5a1010; stroke-width: 0.9; }
.d-crack2 { fill: none; stroke: #2e140c; stroke-width: 1.3; stroke-linecap: round; }
.doll.lashing .d-rage { display: inline; }
.doll.lashing .eyes-open, .doll.lashing .eyes-closed, .doll.lashing .d-mouth, .doll.lashing .d-cheek { display: none; }
.doll.lashing .d-head { animation: lash 1.6s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
.doll.lashing svg { filter: drop-shadow(0 0 16px rgba(255, 30, 20, 0.75)); animation: lashGlow 1.6s forwards; }
@keyframes lash {
  0% { transform: rotate(-14deg) translateY(3px) scale(1); }
  7% { transform: rotate(16deg) translateY(-4px) scale(1.25); }
  14% { transform: rotate(-12deg) translateY(-10px) scale(1.6); }
  21% { transform: rotate(10deg) translateY(-10px) scale(1.65); }
  28% { transform: rotate(-7deg) translateY(-9px) scale(1.6); }
  36% { transform: rotate(5deg) translateY(-8px) scale(1.55); }
  52% { transform: rotate(-3deg) translateY(-6px) scale(1.45); }
  72% { transform: rotate(-9deg) translateY(-1px) scale(1.15); }
  86% { transform: rotate(-16deg) translateY(4px) scale(0.98); }
  100% { transform: rotate(-14deg) translateY(3px) scale(1); }
}
@keyframes lashGlow { 0%, 60% { filter: drop-shadow(0 0 16px rgba(255, 30, 20, 0.75)); } 100% { filter: none; } }
.relic.needy.angered { animation: angered 0.9s; }
@keyframes angered {
  0% { transform: translate(0, 0); box-shadow: inset 0 0 0 0 rgba(208, 40, 30, 0); }
  10% { transform: translate(-9px, 3px); box-shadow: inset 0 0 90px 10px rgba(208, 40, 30, 0.55), 0 0 40px rgba(208, 40, 30, 0.5); }
  20% { transform: translate(8px, -4px); }
  30% { transform: translate(-6px, -2px); }
  40% { transform: translate(5px, 3px); }
  55% { transform: translate(-3px, 1px); box-shadow: inset 0 0 60px 6px rgba(208, 40, 30, 0.3), 0 0 24px rgba(208, 40, 30, 0.3); }
  100% { transform: translate(0, 0); box-shadow: inset 0 0 0 0 rgba(208, 40, 30, 0); }
}
.whisper.shriek { color: #ff6a5a; font-size: 1.35rem; letter-spacing: 0.08em; text-shadow: 0 0 14px rgba(255, 40, 30, 0.9); animation: shriek 0.18s 5; }
@keyframes shriek { 50% { transform: translate(2px, -1px) skewX(-6deg); } }
/* Jumpscares off: a slow fade to dark red and the verdict, nothing lunges. */
.death.dz-gentle .dz-black { transition: opacity 0.9s ease-in; }
.death.dz-gentle.dz-verdict .dz-red { opacity: 1; transition: opacity 1.4s; background: radial-gradient(ellipse at center, rgba(90, 0, 8, 0.6), #070002 75%); }

/* ======================================================================
   Bosses
   ====================================================================== */
.boss-chip { font-family: var(--sc); font-size: 0.9rem; color: #1a0a06; background: linear-gradient(180deg, #e9c46a, #b8892e); border-radius: 20px; padding: 2px 12px; box-shadow: 0 0 14px rgba(233, 196, 106, 0.35); cursor: help; }
.lc-boss { color: #e9c46a; margin: 0 0 8px; font-size: 0.92rem; }
.ll-row.boss .ll-n { color: #e9c46a; }
.ll-boss { color: #e9c46a !important; }
.ll-daily { border-top: 0; margin-bottom: 6px; }
.ll-daily .ll-n { color: #f3d27a; font-size: 1.1rem; }

.boss-banner { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; pointer-events: none; animation: bossIn 0.5s ease-out; }
.boss-banner.out { opacity: 0; transition: opacity 0.7s; }
.boss-banner .bb-inner { text-align: center; max-width: min(90vw, 720px); padding: 22px 26px; background: radial-gradient(ellipse at center, rgba(20, 4, 6, 0.92), rgba(10, 2, 4, 0.75) 70%, transparent); }
.boss-banner h2 { font-family: var(--sc); color: #f0c060; font-size: clamp(1.6rem, 6vw, 3.2rem); margin: 0; letter-spacing: 0.06em; text-shadow: 0 0 26px rgba(255, 120, 40, 0.55), 0 2px 0 #2a0a00; }
.boss-banner p { color: #e8d6c8; font-style: italic; margin: 10px auto 0; max-width: 560px; }
.boss-banner.intro h2 { font-size: clamp(2.2rem, 9vw, 4.6rem); }
.boss-banner.event h2 { color: #ff8a6a; font-size: clamp(1.3rem, 4.6vw, 2.3rem); }
@keyframes bossIn { from { opacity: 0; transform: scale(1.12); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* The Widow: the torn page, on the Medium's table. */
.torn-page { position: relative; margin: 0 0 14px; padding: 10px; background: #2a1c10; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); transform: rotate(-0.6deg); animation: bossIn 0.6s ease-out; }
.torn-page .tp-tag { display: inline-block; font-family: var(--sc); color: #ffb09a; margin: 0 0 8px; }
.torn-page .page { min-height: 0; max-height: 46vh; overflow: auto; clip-path: polygon(0 2%, 4% 0, 9% 2%, 15% 0, 22% 1.5%, 30% 0, 38% 2%, 47% 0, 55% 1.5%, 63% 0, 72% 2%, 80% 0, 88% 1.5%, 95% 0, 100% 2%, 100% 98%, 94% 100%, 86% 98%, 78% 100%, 70% 98.5%, 61% 100%, 52% 98%, 44% 100%, 35% 98.5%, 27% 100%, 18% 98%, 10% 100%, 3% 98.5%, 0 100%); }
.torn-page.mended { opacity: 0; transform: translateY(-20px) rotate(-3deg); transition: all 0.8s; }

/* The Librarian: scratched-out titles. */
.tab.scratched-tab { font-style: italic; color: #b9a07a; }
.page h2.scratched { color: #5a3a22; letter-spacing: -0.1em; }
.tab.torn { text-decoration: line-through; color: #c97a6a; }
.tab.torn::before { content: '✂ '; text-decoration: none; }
.torn-notice { text-align: center; padding: 30px 10px; }
.torn-notice .tn-big { font-family: var(--sc); font-size: 1.5rem; color: #7a1f12; }

/* The Abbess: the table turned upside down (and combined with the Looking-Glass). */
.seance-table .relics, .seance-table .seance-ctx { transition: transform 1.4s cubic-bezier(0.6, 0, 0.3, 1); }
.boss-turned .relics, .boss-turned .seance-ctx { transform: rotate(180deg); }
.curse-mirror.boss-turned .relics, .curse-mirror.boss-turned .seance-ctx { transform: scaleY(-1); }

/* The Collector: swapped nameplates look tarnished. */
#screen-medium .relic h3.swapped { background: linear-gradient(180deg, #b9a77a, #7d6a3a 55%, #5a4a22); }

/* Daily séance sharing. */
.share-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 10px 0 0; color: var(--dim); font-size: 0.9rem; }
.home-progress { line-height: 1.7; }