/* Ghost Hunt: Who Else Was There?
   Elegant, spooky and cute at once: Victorian frames with gold hairlines on velvet plum,
   a classic italic serif for the big words, soft kawaii characters and pastel hearts.
   One grey heart that does not beat. */

@font-face { font-family: "Fredoka"; src: url("../../node_modules/@fontsource/fredoka/files/fredoka-latin-400-normal.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "Fredoka"; src: url("../../node_modules/@fontsource/fredoka/files/fredoka-latin-600-normal.woff2") format("woff2"); font-weight: 600; }
@font-face { font-family: "Fredoka"; src: url("../../node_modules/@fontsource/fredoka/files/fredoka-latin-700-normal.woff2") format("woff2"); font-weight: 700; }
@font-face { font-family: "Cormorant"; src: url("../../node_modules/@fontsource/cormorant-garamond/files/cormorant-garamond-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; }
@font-face { font-family: "Cormorant"; src: url("../../node_modules/@fontsource/cormorant-garamond/files/cormorant-garamond-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; }
@font-face { font-family: "VT323"; src: url("../../node_modules/@fontsource/vt323/files/vt323-latin-400-normal.woff2") format("woff2"); }

:root {
  --velvet-1: #120a1f; --velvet-2: #221338; --velvet-3: #2f1a4a;
  --cream: #fff8f0; --cream-2: #f6ead9; --ink: #2a1838; --muted: #7a6684;
  --gold: #e8c27a; --gold-d: #b98d45; --blush: #ffb3cf; --pink: #ff86b8; --pink-d: #d9578f;
  --mint: #9af5c8; --mint-d: #3fbf86; --glass: #0c1f18; --lav: #c3a8ff; --danger: #ff6680; --grey-heart: #a39db3;
  --r: 22px; --soft: 0 18px 40px -18px #000c, 0 2px 0 #00000040;
  --f-body: "Fredoka", system-ui, sans-serif; --f-title: "Cormorant", Georgia, serif; --f-mono: "VT323", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
* { scrollbar-width: none; }  /* no scrollbars anywhere: each screen scales itself to fit the window (fitScreen in app.js) */
body {
  margin: 0; color: var(--cream); font: 400 19px/1.5 var(--f-body);
  background:
    radial-gradient(900px 600px at 78% -8%, #5a2d6e88 0%, transparent 60%),
    radial-gradient(800px 600px at -8% 108%, #3b1d5a 0%, transparent 60%),
    radial-gradient(1200px 900px at 50% 50%, var(--velvet-2), var(--velvet-1));
  overflow: hidden;
}
/* a faint damask pattern, like old wallpaper */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .06;
  background-image: radial-gradient(circle at 25% 25%, #fff 1.5px, transparent 2px), radial-gradient(circle at 75% 75%, #fff 1.5px, transparent 2px);
  background-size: 46px 46px; }
button { font: inherit; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- sky ---------- */
#sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff6e0; opacity: .45; animation: twinkle 5s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .08; } }
.drift { position: absolute; width: 44px; opacity: .12; animation: drift 30s linear infinite; }
@keyframes drift { from { transform: translate(-10vw, 0) rotate(-4deg) } 50% { transform: translate(55vw, -30px) rotate(4deg) } to { transform: translate(120vw, 0) rotate(-4deg) } }

/* ---------- top bar ---------- */
header.top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 14px 24px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .beat { width: 24px; height: 24px; animation: thump 1.1s ease-in-out infinite; }
.brand b { font: 600 italic 26px/1 var(--f-title); color: var(--cream); letter-spacing: .3px; }
.brand b span { color: var(--blush); }
.spacer { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; border: 1px solid #e8c27a66; background: #ffffff08; color: var(--cream); font-size: 15px; }
.pill.cam-on { border-color: var(--mint); color: var(--mint); }
.pill.cam-on .dot { background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: blink 1.2s infinite; }
.pill .dot { width: 9px; height: 9px; border-radius: 50%; background: #ffffff55; }
@keyframes blink { 50% { opacity: .35; } }
.pill.btn:hover { background: #ffffff14; }
.mode { font-size: 12px; letter-spacing: 1.5px; padding: 5px 12px; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 700; }

/* ---------- stage ---------- */
main#stage { position: relative; z-index: 1; height: 100%; padding: 74px 28px 98px; display: grid; place-items: center; }
section.screen { display: none; width: min(1200px, 100%); max-height: 100%; overflow: hidden; padding: 18px 20px 12px; }
section.screen.on { display: block; animation: rise .55s cubic-bezier(.2,.8,.2,1); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } }

/* Victorian frame: cream paper, a gold hairline inset, rounded corners */
.card { position: relative; background: linear-gradient(180deg, var(--cream), var(--cream-2)); color: var(--ink); border-radius: var(--r); box-shadow: var(--soft); padding: 28px 32px; }
.card::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--gold-d); border-radius: calc(var(--r) - 6px); pointer-events: none; opacity: .55; }
.card.dark { background: radial-gradient(120% 120% at 30% 0%, #3a2156, #1b0f2b); color: var(--cream); }
.card.dark::before { border-color: var(--gold); opacity: .4; }
.kicker { font-weight: 600; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--pink-d); }
.dark .kicker { color: var(--blush); }
h1, h2 { font-family: var(--f-title); font-weight: 600; font-style: italic; margin: 4px 0 10px; line-height: 1.02; letter-spacing: -.3px; }
h1 { font-size: clamp(56px, 7.6vw, 108px); color: var(--cream); text-shadow: 0 0 40px #ff86b855, 0 2px 0 #00000055; }
h1 .accent { color: var(--blush); }
.lead.center { max-width: 860px; margin-left: auto; margin-right: auto; }
h2 { font-size: 46px; }
.ornament { display: block; margin: 6px auto 12px; width: 220px; height: 18px; color: var(--gold); }
p { margin: 8px 0; }
.lead { font-size: 22px; }
.muted { color: var(--muted); }
.dark .muted { color: #cdbbe0; }
.row { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 980px) { .grid2 { grid-template-columns: 1fr; } }

/* ---------- buttons ---------- */
.btn-main { border: 0; background: linear-gradient(180deg, #ffa3ca, var(--pink)); color: var(--ink); font-weight: 700; font-size: 19px; padding: 13px 28px; border-radius: 999px; box-shadow: 0 6px 18px -6px #ff86b8aa, inset 0 1px 0 #ffffffaa; transition: transform .12s, box-shadow .12s; }
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -6px #ff86b8cc, inset 0 1px 0 #ffffffaa; }
.btn-main:active { transform: translateY(1px); }
.btn-main.mint { background: linear-gradient(180deg, #c3ffe0, var(--mint)); box-shadow: 0 6px 18px -6px #9af5c8aa, inset 0 1px 0 #fff; }
.btn-main.ghost { background: var(--cream); box-shadow: 0 6px 18px -8px #000a; }
.btn-main:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-soft { border: 1px solid #e8c27a88; background: transparent; color: var(--cream); padding: 10px 20px; border-radius: 999px; }
.card .btn-soft { color: var(--ink); border-color: var(--gold-d); }
.card.dark .btn-soft { color: var(--cream); border-color: #e8c27a88; }
.btn-soft:hover { background: #ffffff10; }

/* ---------- bottom nav ---------- */
nav.story { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: minmax(150px,auto) 1fr minmax(150px,auto); align-items: center; gap: 16px; padding: 14px 24px 18px; background: linear-gradient(0deg, #0e0718f0, #0e071800); }
nav.story .chapters { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; }
.chap { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #e8c27a99; background: transparent; padding: 0; transition: transform .2s; }
.chap.on { background: var(--blush); border-color: var(--blush); transform: scale(1.35); box-shadow: 0 0 12px var(--pink); }
.chap.seen { background: #e8c27a88; }
nav.story .where { text-align: center; font-size: 14px; color: #d8c6ea; margin-top: 6px; letter-spacing: .3px; }
#next { justify-self: end; white-space: nowrap; }
#back { justify-self: start; }

/* ---------- the crew ---------- */
.crew { display: flex; gap: 26px; justify-content: center; align-items: flex-start; }
.member { text-align: center; width: 200px; }
.member .halo { width: 168px; height: 168px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #ffffff22, #ffffff05 60%, transparent 70%); border: 1px solid #e8c27a55; }
.member img { width: 140px; height: 150px; object-fit: contain; filter: drop-shadow(0 8px 10px #0008); transition: transform .3s; }
.member:hover img { transform: translateY(-6px) rotate(-3deg); }
.member b { display: block; font: 600 italic 28px/1.1 var(--f-title); margin-top: 8px; }
.member span { font-size: 15px; color: #d8c6ea; }
.bubble { position: relative; background: #fffdf9; color: var(--ink); border: 1px solid #e3cfa9; border-radius: 18px; padding: 12px 16px; box-shadow: 0 8px 20px -12px #0007; font-size: 18px; }
.say { display: flex; gap: 14px; align-items: flex-start; margin: 12px 0; }
.say img { width: 78px; height: 84px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 4px #0004); }
.say .bubble::after { content: ""; position: absolute; left: -9px; top: 20px; width: 16px; height: 16px; background: #fffdf9; border-left: 1px solid #e3cfa9; border-bottom: 1px solid #e3cfa9; transform: rotate(45deg); }
.say .who { font-weight: 600; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--pink-d); display: block; }
.say.bigotes .who { color: #4f6fc2; }
.say.xochi .who { color: #b07a1f; }

/* ---------- the Ghost Detector ---------- */
.scope { background: linear-gradient(180deg, #efe1ff, #d9c4f3); border-radius: 30px; padding: 14px 14px 12px; box-shadow: var(--soft), inset 0 1px 0 #fff; color: var(--ink); position: relative; border: 1px solid #b89ce0; }
.scope .screen-glass { position: relative; background: radial-gradient(120% 140% at 50% 40%, #154031, var(--glass)); border-radius: 20px; overflow: hidden; height: 190px; box-shadow: inset 0 0 0 3px #2a1838, inset 0 0 40px #000a; }
.scope .screen-glass::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #00000026 0 2px, transparent 2px 4px); pointer-events: none; }
.scope canvas { width: 100%; height: 100%; display: block; }
.scope .readout { position: absolute; top: 8px; left: 14px; right: 14px; display: flex; justify-content: space-between; font: 26px/1 var(--f-mono); color: var(--mint); text-shadow: 0 0 8px var(--mint); z-index: 2; }
.scope .readout .big { font-size: 46px; }
.scope .label { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-weight: 600; font-size: 13px; letter-spacing: 1px; }
.scope .label .muted { color: #6b5486; font-weight: 600; }
.scope .knobs { display: flex; gap: 8px; }
.scope .knob { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e8c27a); box-shadow: 0 1px 0 #0004; }
.scope .sticker { position: absolute; right: -10px; top: -14px; width: 52px; transform: rotate(14deg); filter: drop-shadow(0 4px 4px #0005); }
.scope.flat .readout { color: var(--danger); text-shadow: 0 0 10px var(--danger); }

/* ---------- the tape ---------- */
.tape { position: relative; border-radius: 22px; overflow: hidden; background: #000; box-shadow: var(--soft), 0 0 0 1px #e8c27a55; aspect-ratio: 16 / 9; }
.tape video, .tape canvas.scene { width: 100%; height: 100%; display: block; object-fit: cover; }
.tape .overlay { position: absolute; inset: 0; pointer-events: none; }
.tape .rec { position: absolute; top: 12px; left: 14px; font: 24px var(--f-mono); color: #fff; display: flex; gap: 8px; align-items: center; }
.tape .rec i { width: 11px; height: 11px; border-radius: 50%; background: var(--danger); animation: blink 1s infinite; }
.tape .stamp { position: absolute; bottom: 10px; left: 14px; font: 22px var(--f-mono); color: #fff; opacity: .9; }
.tape .privacy { position: absolute; bottom: 10px; right: 12px; font-size: 13px; background: #000a; color: #fff; padding: 4px 10px; border-radius: 999px; }
.badge-heart { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 2px; font: 22px var(--f-mono); color: #fff; text-shadow: 0 2px 4px #000; }
.badge-heart.dead { color: #e2dcef; }
@keyframes thump { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
.scanbox { position: absolute; border: 2px dashed var(--mint); border-radius: 16px; box-shadow: 0 0 0 9999px #00000070, 0 0 22px var(--mint) inset; }
.scanbox.flat { border-color: var(--danger); box-shadow: 0 0 0 9999px #0000008c, 0 0 26px var(--danger) inset; }
.scanbox .tag { position: absolute; top: -32px; left: -2px; background: var(--mint); color: var(--ink); font-weight: 700; font-size: 13px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.scanbox.flat .tag { background: var(--danger); color: #fff; }
.timeline { position: relative; height: 30px; margin-top: 12px; border-radius: 999px; background: #ffffff10; border: 1px solid #e8c27a44; touch-action: none; }
.timeline.scrubs { cursor: grab; } .timeline.grabbed { cursor: grabbing; }
.timeline .tick { position: absolute; top: 5px; bottom: 5px; border-radius: 999px; }
.timeline .head { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); box-shadow: 0 0 8px var(--gold); z-index: 2; }
.timeline.scrubs .head::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6d9, var(--gold)); border: 2px solid #2a1840; box-shadow: 0 0 0 0 #e8c27a99; animation: knob 1.5s ease-out infinite; }
.timeline.grabbed .head::after { animation: none; transform: translate(-50%, -50%) scale(1.15); }
@keyframes knob { to { box-shadow: 0 0 0 14px #e8c27a00; } }
.tape-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.drag-hint { color: var(--gold); font-weight: 600; font-size: 15px; }
.tape-tools .btn-soft { color: var(--cream); padding: 7px 16px; font-size: 15px; white-space: nowrap; }
.tl-legend { margin-top: 10px; font-size: 14px; color: #d8c6ea; }
.tl-title { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.tl-items { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tl-items span { display: inline-flex; align-items: center; gap: 7px; }
.tl-items small { color: #a896bd; }
.tl-items i.tick { position: static; display: inline-block; width: 22px; height: 11px; border-radius: 999px; }
.lang { display: inline-flex; border: 1px solid #e8c27a55; border-radius: 999px; overflow: hidden; }
.lang button { background: none; border: 0; color: #d8c6ea; font-weight: 600; font-size: 13px; padding: 8px 11px; cursor: pointer; }
.lang button.on { background: var(--gold); color: #2a1840; }
#hoodPill { position: fixed; left: 24px; bottom: 80px; z-index: 21; background: #1a102ccc; color: #bfaed6; border: 1px solid #c3a8ff44; border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
#hoodPill:hover, #hoodPill[aria-expanded="true"] { color: var(--mint); border-color: #9af5c888; }
#hood { position: fixed; left: 24px; bottom: 114px; z-index: 21; width: min(400px, calc(100vw - 48px)); max-height: calc(100vh - 170px); overflow: auto; background: #140b22f5; color: #e6dcf2; border: 1px solid #c3a8ff55; border-radius: 16px; padding: 14px 16px; font-size: 14px; line-height: 1.4; box-shadow: 0 18px 40px -14px #000; }
#hood ul { margin: 6px 0 0; padding: 0; list-style: none; } #hood li { margin: 0 0 9px; }
.hood-h { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); }
.hood-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #c3a8ff33; color: #d9c8ff; margin-right: 3px; }
.hood-tag.live { background: #9af5c833; color: var(--mint); } .hood-tag.sample { background: #e8c27a33; color: var(--gold); }
#hood summary { cursor: pointer; color: var(--mint); margin-top: 4px; }
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; text-align: center; }
.chips div { background: #ffffff0d; border: 1px solid #e8c27a2e; border-radius: 12px; padding: 7px 4px; }
.chips b { display: block; font: 24px/1.1 var(--f-mono); color: var(--mint); text-transform: capitalize; }
.chips span { font-size: 12px; color: #d8c6ea; }
.blinker { display: flex; align-items: flex-end; gap: 12px; margin-top: 12px; color: var(--danger); font-style: italic; min-height: 106px; }
.blinker img { height: 60px; transform-origin: bottom left; transition: transform .12s; }
#whatNow { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 19; display: flex; align-items: center; gap: 10px; background: #1a102cf2; border: 1px solid #e8c27a66; border-radius: 999px; padding: 7px 10px 7px 18px; box-shadow: 0 12px 30px -10px #000; white-space: nowrap; }
#whatNow[hidden] { display: none; }
#whatNow .wn-t { color: var(--gold); font-weight: 600; font-size: 15px; }
#whatNow .wn { border: 1px solid #e8c27a66; background: transparent; color: var(--cream); border-radius: 999px; padding: 7px 15px; font-weight: 600; font-size: 15px; cursor: pointer; }
#whatNow .wn:hover { background: #ffffff14; }
#whatNow .wn.main { background: linear-gradient(180deg, #ffb3cf, var(--pink)); color: #2a1840; border-color: transparent; }
body.has-next main#stage { padding-bottom: 156px; }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-size: 13px; color: #6b5486; }
.kinds i { font-style: normal; padding: 2px 9px; border-radius: 999px; background: #2a184014; color: #6b5486; }
.kinds i.on { background: var(--pink-d); color: #fff; font-weight: 600; }
.glass-said { font-size: 15px; color: var(--mint); margin: 2px 0 6px; }
.glass-said b { letter-spacing: 2px; }
.menu-wrap { width: min(1120px, 100%); }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.menu-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: linear-gradient(180deg, #2a1a42, #180e28); border: 1px solid #e8c27a44; border-radius: 22px; padding: 18px 16px; color: var(--cream); cursor: pointer; transition: transform .15s, border-color .15s; }
.menu-card:hover { transform: translateY(-4px); border-color: var(--pink); }
.menu-card img { width: 66px; height: 70px; object-fit: contain; }
.menu-card b { font: 600 italic 28px/1.1 var(--f-title); }
.menu-card span { font-size: 15px; color: #d8c6ea; }
.menu-card small { color: var(--mint); font-size: 12px; letter-spacing: .4px; }
.an-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.an-head b { color: var(--mint); font-size: 18px; }
.night-res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; text-align: center; }
.night-res b { display: block; font: 600 italic 36px/1 var(--f-title); color: var(--pink-d); }
.night-res span { font-size: 12px; color: #6b5486; }
.your-turn { font: 700 italic 64px/1.05 var(--f-title); color: var(--mint); text-shadow: 0 0 26px #9af5c899; }
body.closing main#stage { filter: brightness(.3) saturate(.55); transition: filter 7s linear; }
body.closing .spell { position: relative; z-index: 30; }
.spell.blood { color: var(--danger) !important; text-shadow: 0 0 26px var(--danger), 0 0 6px #fff4 !important; }
body.redflash::before { content: ""; position: fixed; inset: 0; z-index: 49; pointer-events: none; background: #d3112e; animation: redflash .9s steps(2) 3; opacity: 0; }
@keyframes redflash { 0%, 100% { opacity: 0; } 50% { opacity: .75; } }
.tick.second_face { background: #ff86b8aa; } .tick.no_pulse { background: #ff6680cc; } .tick.held_breath { background: #c3a8ffaa; } .tick.pulse_jump { background: #e8c27acc; }

/* ---------- cliffhanger ---------- */
.cliff { text-align: center; padding: 40px 10px; }
.cliff .line { font: 600 italic clamp(44px, 6vw, 80px)/1.05 var(--f-title); text-shadow: 0 2px 0 #000, 0 0 30px #00000088; }
.cliff .line em { font-style: italic; color: var(--danger); text-shadow: 0 0 30px #ff668066; }
.cliff .sub { font-size: 22px; color: #d8c6ea; }
.card .cliff .sub { color: var(--muted); }
.card .cliff .line { text-shadow: none; }
.flatline { width: min(820px, 100%); height: 130px; margin: 10px auto 24px; display: block; }

/* ---------- evidence ---------- */
.locker { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.ev { background: linear-gradient(180deg, var(--cream), var(--cream-2)); color: var(--ink); border-radius: 18px; padding: 16px 18px; box-shadow: var(--soft); position: relative; }
.ev::before { content: ""; position: absolute; inset: 6px; border: 1px solid #b98d4566; border-radius: 13px; pointer-events: none; }
.ev .id { position: absolute; top: -11px; right: 14px; background: var(--ink); color: var(--gold); font: 20px/1 var(--f-mono); padding: 4px 10px; border-radius: 999px; }
.ev .kind { font: 600 italic 22px/1.1 var(--f-title); }
.ev .val { font: 40px/1 var(--f-mono); margin: 8px 0 4px; }
.ev .when { font-size: 14px; color: var(--muted); }
.ev .src { font-size: 12px; color: var(--muted); margin-top: 8px; letter-spacing: .3px; }
.ev.no_pulse { background: radial-gradient(120% 120% at 30% 0%, #3c2a4d, #20152c); color: #f1e8ff; }
.ev.no_pulse::before { border-color: #ff668066; }
.ev.no_pulse .val { color: var(--danger); text-shadow: 0 0 12px #ff668088; }
.ev.no_pulse .when, .ev.no_pulse .src { color: #c4b6d8; }

/* ---------- consent ---------- */
.consent ul { padding-left: 20px; }
.consent li { margin: 9px 0; }
.consent li::marker { color: var(--pink-d); }

/* ---------- séance ---------- */
.board-wrap { position: relative; }
.board { position: relative; width: 100%; aspect-ratio: 16 / 11.4; border-radius: 30px; background: radial-gradient(120% 100% at 50% 35%, #fbe9c8, #dcae72); box-shadow: var(--soft), inset 0 0 0 10px #c9965a, inset 0 0 0 12px #8a5a2b, inset 0 0 70px #8b5a2b66; color: #3b2412; }
.board .letters { position: absolute; inset: 0; }
.board .ch { position: absolute; transform: translate(-50%, -50%); font: 700 clamp(19px, 2.1vw, 29px)/1 "Cormorant", Georgia, serif; transition: color .2s, text-shadow .2s; }
.board .ch.big { font-size: clamp(22px, 2.5vw, 34px); letter-spacing: 1px; }
.board .ch.lit { color: #fff; text-shadow: 0 0 14px #ff86b8, 0 0 2px #000; }
.planchette { position: absolute; width: 96px; height: 116px; transform: translate(-50%, -82%); transition: left .6s cubic-bezier(.4,0,.2,1), top .6s cubic-bezier(.4,0,.2,1); filter: drop-shadow(0 8px 6px #3b241288); }
.spell { text-align: center; font: 600 italic 54px/1.1 var(--f-title); letter-spacing: 6px; color: var(--mint); text-shadow: 0 0 18px var(--mint); min-height: 66px; margin-top: 10px; }
.breath-meter { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.breath-meter .bar { flex: 1; height: 12px; border-radius: 999px; background: #ffffff18; overflow: hidden; border: 1px solid #e8c27a55; }
.breath-meter .fill { height: 100%; width: 40%; background: linear-gradient(90deg, var(--lav), var(--mint)); transition: width .2s; }
.questions { display: flex; flex-wrap: wrap; gap: 10px; }
.q { border: 1px solid #e8c27a88; background: #ffffff10; color: var(--cream); border-radius: 999px; padding: 10px 18px; font-weight: 600; transition: background .2s; }
.q:hover:not(:disabled) { background: #ffffff22; }
.q:disabled { opacity: .4; }
.hush { color: var(--gold); font-weight: 600; }

/* ---------- toast ---------- */
#toast { position: fixed; left: 50%; top: 76px; transform: translateX(-50%); z-index: 30; background: var(--cream); color: var(--ink); border-radius: 999px; padding: 10px 22px; box-shadow: var(--soft); display: none; font-weight: 600; max-width: 80vw; }
#toast.on { display: block; animation: rise .3s; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- the haunting calendar ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.cal .dow { text-align: center; font-size: 12px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.haunted { background: radial-gradient(90% 70% at 85% 100%, #5a0f2466, transparent 70%), linear-gradient(180deg, #120a1c, #07040c) !important; box-shadow: inset 0 0 90px #000d, 0 0 0 1px #ff668033 !important; }
.haunted h2 { text-shadow: 0 0 26px #ff668044; }
.cal-wrap { position: relative; overflow-x: clip; overflow-clip-margin: 8px; }
.cal-wrap .scratches { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.cal-wrap .scratches path { fill: none; stroke: #ff668026; stroke-width: 1.4; stroke-linecap: round; }
.stalker { position: absolute; z-index: 3; transition: left 1.6s ease-in-out, top 1.6s ease-in-out, height 1.6s ease-in-out; transform: translate(-50%, -100%); pointer-events: none; opacity: 0; filter: drop-shadow(0 0 12px #ff668088); }
.stalker.on { opacity: .92; animation: loom 3.2s ease-in-out infinite; }
@keyframes loom { 50% { transform: translate(-50%, -100%) scale(1.05); } }
.agree { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: 14px; color: #d8c6ea; margin-top: 12px; cursor: pointer; }
.locked-btn { opacity: .4; cursor: not-allowed; }
.night.arrived { outline: 2px solid var(--danger); outline-offset: 2px; box-shadow: 0 0 26px 2px #ff668088; }
.night.empty::after { content: ""; position: absolute; right: 12px; top: 12px; width: 18px; height: 6px; opacity: 0; transition: opacity .5s; background: radial-gradient(circle at 3px 3px, #ff8aa0 2.4px, transparent 3px), radial-gradient(circle at 15px 3px, #ff8aa0 2.4px, transparent 3px); }
.night.empty:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .stalker.on { animation: none; } }
.night { position: relative; aspect-ratio: 1 / .82; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--danger) calc(var(--near, 0) * 70%), #e8c27a2e); background: linear-gradient(180deg, color-mix(in srgb, #7a1230 calc(var(--near, 0) * 55%), #ffffff06), #0a0610 130%); color: var(--cream); padding: 8px 10px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; transition: transform .15s, background .15s; }
.night:hover { transform: translateY(-3px); background: #ffffff14; }
.night .d { font: 600 italic 22px/1 var(--f-title); }
.night .faces { display: flex; gap: 2px; align-items: center; min-height: 22px; }
.night .faces img { width: 20px; height: 20px; }
.night.empty { opacity: .5; }
.night.visitor { background: #ff86b81a; border-color: #ff86b866; }
.night.no_pulse { background: radial-gradient(120% 120% at 50% 0%, #ff668055, #2a1838); border-color: var(--danger); box-shadow: 0 0 18px 1px #ff668066; }
.night.locked { background: repeating-linear-gradient(45deg, #ffffff06 0 8px, #ffffff0d 8px 16px); color: #cdbbe0; }
.night.sel { outline: 2px solid var(--gold); outline-offset: 2px; }
.night .tag { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #ffd2e3; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; color: #d8c6ea; margin-top: 14px; }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; border: 1px solid #e8c27a66; }
.stat { text-align: center; }
.stat b { display: block; font: 600 italic 50px/1 var(--f-title); color: var(--blush); }
.stat span { font-size: 14px; color: #d8c6ea; }

/* ---------- séance stage: the crew around the board ---------- */
.spirit-card { padding: 18px 26px; }
.spirit-card h2 { font-size: 40px; }
.seance-stage { position: relative; padding: 132px 92px 0; }
.seance-stage .crew-top { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 2; }
.seance-stage .crew-top .face, .seance-stage .crew-top img { width: 128px; height: 139px; }
.seance-stage .crew-left, .seance-stage .crew-right { position: absolute; bottom: 20px; width: 128px; text-align: center; z-index: 2; }
.seance-stage .crew-left { left: -30px; } .seance-stage .crew-right { right: -30px; }
.seance-stage .crew-left .face, .seance-stage .crew-left img, .seance-stage .crew-right .face, .seance-stage .crew-right img { width: 124px; height: 134px; }
.seance-stage .candle { display: none; }
.face { position: relative; display: inline-block; filter: drop-shadow(0 6px 6px #0008); transition: transform .2s; }
.face img { display: block; object-fit: contain; }
.face .talk-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.face .jaw { transform: scaleY(0); }
.face .ball { opacity: 0; }
body[data-speaking="luna"] .face.luna, body[data-speaking="bigotes"] .face.bigotes, body[data-speaking="xochi"] .face.xochi { transform: translateY(-5px) scale(1.04); }
body[data-speaking="bigotes"] .face.bigotes .jaw, body[data-speaking="xochi"] .face.xochi .jaw { animation: jaw .17s ease-in-out infinite alternate; }
body[data-speaking="luna"] .face.luna .ball { animation: ballglow .28s ease-in-out infinite alternate; }
@keyframes jaw { from { transform: scaleY(.1); } to { transform: scaleY(1); } }
@keyframes ballglow { from { opacity: .25; } to { opacity: 1; } }
.scanstat { background: #1a1028; color: var(--mint); border-radius: 16px; padding: 14px 16px; }
.scanstat .msg { font: 500 18px/1.3 var(--f-body, inherit); min-height: 47px; }
.scanstat .bar { height: 10px; border-radius: 6px; background: #ffffff1a; margin-top: 10px; overflow: hidden; }
.scanstat .fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--mint-d), var(--mint)); transition: width .3s linear; }
.scanstat.waiting .fill { animation: warm 22s linear forwards; }
@keyframes warm { from { width: 4%; } to { width: 96%; } }
.tape.sweeping::before { content: ""; position: absolute; top: 0; bottom: 0; width: 22%; left: -22%; background: linear-gradient(90deg, transparent, #9af5c866, transparent); animation: sweep 1.3s linear infinite; z-index: 3; pointer-events: none; }
@keyframes sweep { to { left: 100%; } }
.scanbox.found { animation: lockon .35s ease-out 3; }
@keyframes lockon { 50% { transform: scale(1.18); box-shadow: 0 0 34px var(--danger); } }
.dare-wrap { text-align: center; }
.dare-wrap .line em { font-size: 1.15em; }
.dare-cards { margin-top: 18px; text-align: left; }
.seance-stage .crew-left > span:not(.face), .seance-stage .crew-right > span:not(.face) { display: block; font-size: 12px; color: #d8c6ea; line-height: 1.2; }
.seance-stage .crew-top > span:not(.face) { display: none; }
.candle { display: block; width: 10px; height: 34px; margin: -4px auto 4px; background: linear-gradient(#fff8f0, #e9d9c2); border-radius: 3px; position: relative; }
.candle::before { content: ""; position: absolute; left: 50%; top: -14px; width: 10px; height: 14px; transform: translateX(-50%); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff3b0, #ffbf3c 60%, #ff7a3c); animation: flame 1.4s ease-in-out infinite; box-shadow: 0 0 18px #ffbf3c; }
@keyframes flame { 50% { transform: translateX(-50%) scale(.85, 1.1) rotate(3deg); } }
input.ask { flex: 1; min-width: 0; border-radius: 999px; border: 1px solid #e8c27a88; background: #ffffff10; color: var(--cream); padding: 11px 18px; font: inherit; }
input.ask::placeholder { color: #cdbbe0; }
body.lightsout #stage { filter: brightness(.25) saturate(.4); transition: filter .2s; }
body.lightsout #toast { display: none; }

.chip { border: 1px solid #e8c27a66; background: transparent; color: #d8c6ea; border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 600; }
.chip.seen { color: var(--cream); border-color: #e8c27aaa; }
.chip.on { background: var(--blush); color: var(--ink); border-color: var(--blush); box-shadow: 0 0 14px #ff86b888; }
.chip:disabled { opacity: .45; cursor: default; }

.tbl { width: 100%; border-collapse: collapse; font-size: 16px; }
.tbl th { text-align: left; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #e8c27a55; }
.tbl td { padding: 7px 8px; border-bottom: 1px solid #ffffff12; }
.tbl b { color: var(--mint); font-weight: 600; }

/* ---------- interactive bits ---------- */
.member { cursor: pointer; }
.member.talking .halo { border-color: var(--blush); box-shadow: 0 0 30px #ff86b866; }
.member.talking img { animation: bob .5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-2deg); } }
.flashlight { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 110px at var(--x, 50%) var(--y, 50%), transparent 0 55%, #000000f2 100%); }
.torch { position: absolute; top: 10px; right: 12px; z-index: 3; border: 1px solid #e8c27a88; background: #000a; color: #fff; border-radius: 999px; padding: 5px 10px; font-size: 16px; }
.torch.on { background: var(--gold); }
.timeline { cursor: pointer; }
.ev { cursor: pointer; transition: transform .15s; }
.ev:hover { transform: translateY(-3px); }
.peek { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: center; margin-top: 18px; }
.peek canvas { width: 300px; aspect-ratio: 16/9; border-radius: 14px; box-shadow: var(--soft); }
.ev.sel { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- the glass breaks ---------- */
body.shake #stage { animation: shake .6s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-8px, 3px) rotate(-.4deg); } 40%, 60% { transform: translate(8px, -3px) rotate(.4deg); } }
body.flash::after { content: ""; position: fixed; inset: 0; background: #fff; opacity: .85; z-index: 50; pointer-events: none; }
.cracks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cracks path { fill: none; stroke: #2a1838; stroke-width: 2.2; filter: drop-shadow(0 1px 0 #fff8); stroke-linecap: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: crack .35s ease-out forwards; vector-effect: non-scaling-stroke; }
@keyframes crack { to { stroke-dashoffset: 0; } }
.shard { position: absolute; width: 18px; height: 14px; background: linear-gradient(135deg, #ffffff, #bfeedd); clip-path: polygon(50% 0, 100% 70%, 20% 100%); transform: translate(-50%, -50%) scale(var(--s)); animation: fly 1.1s cubic-bezier(.2,.7,.3,1) forwards; box-shadow: 0 0 6px #fff; }
@keyframes fly { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(var(--s)); opacity: 0; } }
.spell.broken { color: var(--danger); text-shadow: 0 0 22px var(--danger); animation: jitter .12s steps(2) 8; }
@keyframes jitter { 50% { transform: translate(2px, -1px) skewX(-4deg); } }
.scream { font: 700 italic 44px/1 var(--f-title); color: var(--danger); text-align: center; margin: 10px 0; letter-spacing: 2px; animation: jitter .1s steps(2) 10; }
.flee-left { animation: flee-l 1.1s cubic-bezier(.5,0,.9,.4) forwards; }
.flee-right { animation: flee-r 1.1s cubic-bezier(.5,0,.9,.4) forwards; }
.flee-up { animation: flee-u 1s cubic-bezier(.5,0,.9,.4) forwards; }
@keyframes flee-l { 15% { transform: translateY(-14px) rotate(8deg); } to { transform: translateX(-120vw) rotate(-20deg); } }
@keyframes flee-r { 15% { transform: translateY(-14px) rotate(-8deg); } to { transform: translateX(120vw) rotate(20deg); } }
@keyframes flee-u { 15% { transform: translate(-50%, 10px) scale(1.1); } to { transform: translate(-50%, -110vh) rotate(25deg); } }
.board .stays { animation: stays 2.4s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes stays { 0%, 100% { transform: scale(1.5) translateY(0); } 50% { transform: scale(1.5) translateY(-8px); } }


/* Screens that must fit the window without scrolling */
.cal { gap: 6px; }
.night { aspect-ratio: auto; height: clamp(52px, calc((100vh - 500px) / 5), 112px); padding: 6px 9px; }
.spirit-card { padding: 10px 22px; }
.spirit-card h2 { font-size: 30px; }
.spirit-card .kinds { margin-top: 4px; }
.board-grid { grid-template-columns: 1.15fr 1fr; margin-top: 10px; align-items: start; gap: 16px; }
.board-grid .seance-stage { padding: 92px 70px 0; }
.seance-stage .crew-top .face, .seance-stage .crew-top img { width: 92px; height: 100px; }
.seance-stage .crew-left, .seance-stage .crew-right { width: 92px; bottom: 8px; }
.seance-stage .crew-left { left: -8px; } .seance-stage .crew-right { right: -8px; }
.seance-stage .crew-left .face, .seance-stage .crew-left img, .seance-stage .crew-right .face, .seance-stage .crew-right img { width: 88px; height: 96px; }
.board-grid .spell { font-size: 42px; min-height: 50px; margin-top: 6px; }
.board-grid .card { padding: 14px 18px; }
.board-grid .card p { font-size: 14px; margin-bottom: 6px; }
.board-grid .questions { gap: 6px; margin-top: 6px !important; }
.board-grid .q { padding: 6px 13px; font-size: 14px; }
.board-grid .hush { margin: 4px 0; }
.board-grid .say { margin: 6px 0; gap: 10px; }
.board-grid .say img { width: 46px; height: 50px; }

/* Proof and tests */
.tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.tab { border: 1px solid #e8c27a66; background: transparent; color: var(--cream); border-radius: 999px; padding: 7px 18px; font-weight: 600; cursor: pointer; }
.tab.on { background: linear-gradient(180deg, #ffb3cf, var(--pink)); color: #2a1840; border-color: transparent; }
[data-pane][hidden] { display: none; }
.proof { padding: 16px 22px; }
.proof-cat h2 { font-size: 34px; margin: 0; color: var(--mint); }
.proof-cat p { margin: 2px 0 8px; font-size: 15px; }
.proof-count { display: grid; grid-template-columns: repeat(4, 1fr) 2.4fr; gap: 10px; align-items: center; background: #ffffff0c; border: 1px solid #e8c27a33; border-radius: 14px; padding: 8px 12px; }
.proof-tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--gold); border: 1px solid currentColor; border-radius: 999px; padding: 3px 10px; }
.proof-tag.real { color: var(--mint); }
.proof-status p { margin: 6px 0; font-size: 14px; }
.proof-status .btn-soft { padding: 4px 14px; font-size: 14px; }
.proof .tbl { font-size: 13.5px; }
.proof .tbl td, .proof .tbl th { padding: 4px 6px; }
.proof code { font: 12.5px Consolas, ui-monospace, monospace; color: var(--blush); }
.proof-code { font-size: 13px; margin: 8px 0 0; color: #cdbbe0; }

/* The board's name, and the file stamped shut */
.board-name { position: absolute; left: 50%; top: 7%; transform: translate(-50%, -50%); font: 600 italic 26px/1 var(--f-title); color: #6d4019; letter-spacing: 1px; white-space: nowrap; }
.planchette { width: 76px; height: 92px; }
.stamp-closed { display: inline-block; font: 700 clamp(44px, 6vw, 76px)/1 var(--f-title); letter-spacing: 6px; color: var(--danger); border: 6px solid var(--danger); border-radius: 12px; padding: 12px 28px; margin-bottom: 18px; transform: rotate(-5deg); text-shadow: 0 0 22px #ff668066; animation: stampdown .35s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes stampdown { from { transform: rotate(-5deg) scale(1.25); opacity: 0; } to { transform: rotate(-5deg) scale(1); opacity: 1; } }

.cliff:has(.stamp-closed) { padding: 4px 10px; }
.cliff:has(.stamp-closed) .line { font-size: 54px; }
.cliff:has(.stamp-closed) .sub { font-size: 20px; margin: 8px 0; }
.cliff:has(.stamp-closed) .your-turn { font-size: 50px; }
.cliff:has(.stamp-closed) .kicker { margin-top: 10px !important; }
.stamp-closed { font-size: 54px; padding: 8px 24px; margin-bottom: 10px; }

.room-ev { grid-template-columns: repeat(3, 1fr); gap: 14px 10px; margin-top: 16px; }
.room-ev .ev { padding: 9px 12px; cursor: default; }
.room-ev .ev:hover { transform: none; }
.room-ev .ev .kind { font-size: 16px; }
.room-ev .ev .val { font-size: 26px; margin: 4px 0 2px; }
.room-ev .ev .id { font-size: 14px; }
.room-ev .ev .src { margin-top: 2px; }