:root {
  --bg: #0b0a0c;
  --bg2: #141216;
  --panel: #1a171b;
  --line: #2c272d;
  --ink: #d9d2c5;
  --dim: #8a8178;
  --flame: #e8a54b;
  --flame-dim: #8a5a24;
  --blood: #b3261e;
  --blood-glow: #ff4a3d;
  --luck: #f2d27a;
  --sick: #7f9c7a;
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --fell: 'Pixelify Sans', 'EB Garamond', monospace;
  --pixel: 'Pixelify Sans', monospace;
  --notch: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--serif); font-size: 20px; line-height: 1.65;
}
[hidden] { display: none !important; }
.glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, #e8a54b1c 0%, #8a3d1410 40%, transparent 75%);
  animation: glowbreath 5s ease-in-out infinite;
}
@keyframes glowbreath { 0%,100% { opacity: 1; } 45% { opacity: .78; } 60% { opacity: .92; } }
.scan {
  position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, #00000038 2px 3px);
  mix-blend-mode: multiply; opacity: .55;
}
.screen { position: relative; z-index: 1; }

/* the logo: N + pixel candle + ghtfall */
.logo { font-family: var(--pixel); font-weight: 500; letter-spacing: .04em; white-space: nowrap; }
.logo-i { display: inline-block; height: 1.18em; aspect-ratio: 9 / 24; margin: 0 -.02em 0 .02em; vertical-align: baseline; position: relative; }
.logo-i svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 -.12em .25em #ffb34766) drop-shadow(0 0 .5em #e8a54b33); }
.logo-i .fl { visibility: hidden; animation: flick 1.05s steps(1, end) infinite; }
.logo-i .fl0 { animation-delay: 0s; }
.logo-i .fl1 { animation-delay: -.35s; }
.logo-i .fl2 { animation-delay: -.7s; }
@keyframes flick { 0% { visibility: visible; } 33.33% { visibility: hidden; } }
.logo-i.small { height: 22px; font-size: 22px; vertical-align: middle; }

.screen { min-height: 100vh; }
.center { display: grid; place-items: center; padding: 24px 16px; }
.card { background: linear-gradient(#1b181c, #141216); border: 2px solid #3a3238; border-radius: 0; clip-path: var(--notch); padding: 32px 28px; box-shadow: 0 30px 80px #000a; }
.narrow { width: min(480px, 100%); text-align: center; }
.title { font-family: var(--pixel); font-weight: 500; font-size: 60px; letter-spacing: .04em; margin: 4px 0 0; color: #f1e4cc; text-shadow: 0 0 22px #e8a54b40, 3px 3px 0 #000; }
.title.small { font-size: 32px; }
.sub { font-style: italic; color: var(--dim); margin: 4px 0 24px; }
.muted { color: var(--dim); }
.tiny-text { font-size: 13px; }
.center-text { text-align: center; }
.err { color: var(--blood-glow); min-height: 1.4em; margin: 8px 0 0; font-size: 16px; }

label { display: block; text-align: left; font-family: var(--pixel); font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
input, textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 4px;
  font: inherit; font-size: 20px; text-transform: none; letter-spacing: 0; resize: vertical;
}
input:focus, textarea:focus { outline: none; border-color: var(--flame-dim); box-shadow: 0 0 0 3px #e8a54b1f; }

.btn {
  font-family: var(--pixel); font-size: 18px; cursor: pointer; padding: 11px 20px; border: 0; border-radius: 0;
  background: #2a242b; color: var(--ink); clip-path: var(--notch);
  box-shadow: inset 2px 2px 0 #ffffff1c, inset -2px -2px 0 #00000080; transition: filter .15s, transform .05s;
}
.btn:hover:not(:disabled) { filter: brightness(1.25); color: #fff; }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset -2px -2px 0 #ffffff14, inset 2px 2px 0 #00000080; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: linear-gradient(#8a3f17, #5a2810); color: #ffe9c7; box-shadow: inset 2px 2px 0 #ffcf8a40, inset -2px -2px 0 #2a0f0599; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.2) drop-shadow(0 0 10px #e8a54b66); }
.btn.ghost { background: transparent; }
.btn.tiny { font-size: 16px; padding: 7px 14px; margin: 0 6px 8px 0; }
form .btn { width: 100%; margin-top: 6px; }

/* rules */
.rules { text-align: left; border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px 4px; margin: 6px 0 14px; background: var(--bg); }
.rules h3 { font-family: var(--fell); font-weight: 400; font-size: 20px; margin: 0 0 6px; color: var(--flame); }
.rules ol { margin: 0 0 10px; padding-left: 22px; font-size: 18px; line-height: 1.45; }
.rules li { margin-bottom: 4px; }
label.check { display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 18px; color: var(--ink); cursor: pointer; }
label.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--flame); flex: none; }
.lobby-pw { margin-top: 10px !important; width: auto !important; }
.roster .kick { margin-left: 6px; font-size: 12px; padding: 2px 8px; background: transparent; border: 1px solid #3a3339; color: var(--dim); border-radius: 3px; cursor: pointer; font-family: inherit; }
.roster .kick:hover { color: var(--blood-glow); border-color: var(--blood); }
.notices { list-style: none; padding: 0; margin: 8px 0 14px; font-size: 13px; color: #c9a37a; }
.notices li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.refusal { color: #c96a63 !important; font-style: italic; }

/* flame */
.flame { width: 18px; height: 30px; margin: 0 auto; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 70%, #fff3c4 0%, var(--flame) 45%, #a3401a 80%, transparent 100%);
  box-shadow: 0 0 30px 8px #e8a54b55; animation: flicker 2.6s infinite ease-in-out; }
@keyframes flicker {
  0%,100% { transform: scale(1) rotate(-1deg); opacity: 1; }
  30% { transform: scale(.94, 1.04) rotate(2deg); opacity: .9; }
  55% { transform: scale(1.03, .96) rotate(-2deg); }
  70% { opacity: .75; }
}

/* roster */
.roster { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; }
.roster li { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 19px; border-bottom: 1px dashed var(--line); }
.roster .dot { width: 8px; height: 8px; border-radius: 0; background: var(--sick); box-shadow: 0 0 8px var(--sick); flex: none; }
.roster .off .dot { background: #444; box-shadow: none; }
.roster .off { color: var(--dim); }
.roster .dead { color: #6e5a5a; text-decoration: line-through; }
.roster .dead .dot { background: var(--blood); box-shadow: 0 0 8px var(--blood); }
.roster .tag { margin-left: auto; font-family: var(--pixel); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--flame-dim); }
.roster .acted { color: var(--sick); }
.saved { border: 1px solid var(--line); padding: 14px; border-radius: 4px; margin-bottom: 14px; }
.saved p { margin: 0 0 10px; }
#lobbyHost .btn { width: 100%; }

/* top bar */
.top { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #0b0a0cdd; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(4px); }
.brand { font-family: var(--pixel); font-size: 26px; color: #f1e4cc; text-shadow: 2px 2px 0 #000; }
.adv { font-family: var(--pixel); font-size: 17px; color: var(--dim); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rosterToggle { display: none; margin: 0; }

/* choose */
#choose { padding-bottom: 60px; }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1120px; margin: 32px auto; padding: 0 16px; }
.door { text-align: center; background: linear-gradient(#1b181c, #141216); border: 2px solid #3a3238; clip-path: var(--notch); padding: 22px; }
.door h2, .vote-h { font-family: var(--fell); font-weight: 400; font-size: 30px; margin: 0 0 6px; }
.vote-h { text-align: center; margin-top: 20px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.chips .btn { font-size: 18px; padding: 10px 16px; }
.proposals { max-width: 1120px; margin: 16px auto; padding: 0 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.proposals .prop { flex: 0 1 340px; }
.prop { background: var(--bg2); border: 2px solid var(--line); clip-path: var(--notch); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.prop.mine { border-color: var(--flame-dim); box-shadow: 0 0 18px #e8a54b22; }
.prop h4 { font-family: var(--fell); font-weight: 400; font-size: 24px; margin: 0; }
.prop p { margin: 0; flex: 1; }
.prop .meta { display: flex; align-items: center; justify-content: space-between; font-size: 16px; color: var(--dim); }
.hostbar { text-align: center; margin: 16px 0; }
.hostbar .btn { margin: 4px; }

/* story */
#story { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.layout { flex: 1; display: grid; grid-template-columns: 1fr 320px; min-height: 0; }
.log { overflow-y: auto; padding: 36px max(24px, calc((100% - 760px) / 2)) 44px; scroll-behavior: smooth; }
.side { border-left: 1px solid var(--line); padding: 20px; overflow-y: auto; background: #0e0d10; display: flex; flex-direction: column; }
.side h3 { font-family: var(--pixel); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 500; margin: 0 0 10px; }

.e { margin: 0 0 22px; animation: fadein .8s ease both; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.e.narration p { margin: 0 0 14px; }
.e.narration { font-size: 22px; }
.e.narration::first-letter { font-family: var(--fell); }
.e.action { margin-left: 24px; padding-left: 14px; border-left: 2px solid var(--flame-dim); color: #bfb4a3; font-style: italic; }
.e.action b { font-style: normal; font-weight: 500; color: var(--flame); margin-right: 6px; }
.e.system { text-align: center; color: var(--dim); font-size: 15px; font-style: italic; }
.e.chapter { text-align: center; font-family: var(--fell); font-size: 30px; color: #efe6d6; margin: 26px 0; letter-spacing: .06em; }
.e.chapter::before, .e.chapter::after { content: '~'; color: var(--flame-dim); margin: 0 14px; }
.e.fallen { text-align: center; color: var(--blood-glow); font-family: var(--fell); font-size: 22px; letter-spacing: .04em; text-shadow: 0 0 18px #ff4a3d55; }
.cursor::after { content: '▍'; color: var(--flame); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* dice */
.e.roll { display: flex; align-items: center; gap: 16px; margin-left: 24px; }
.d20 { width: 64px; height: 64px; flex: none; display: grid; place-items: center; position: relative;
  font-family: var(--fell); font-size: 28px; color: #fff; }
.d20 svg { position: absolute; inset: 0; }
.d20 span { position: relative; }
.d20.rolling { animation: tumble .7s ease-out; }
@keyframes tumble { 0% { transform: rotate(-200deg) scale(.4); } 70% { transform: rotate(15deg) scale(1.1); } 100% { transform: none; } }
.roll .what { font-size: 17px; }
.roll .what b { color: var(--flame); font-weight: 500; }
.roll .verdict { display: block; font-family: var(--pixel); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.b-catastrophe svg polygon { fill: #3b0706; stroke: var(--blood-glow); }
.b-catastrophe .verdict { color: var(--blood-glow); }
.b-bad svg polygon { fill: #2a1414; stroke: var(--blood); }
.b-bad .verdict { color: #c96a63; }
.b-mixed svg polygon { fill: #241f1a; stroke: #8a7a62; }
.b-mixed .verdict { color: #b6a587; }
.b-good svg polygon { fill: #17231a; stroke: var(--sick); }
.b-good .verdict { color: #a6c79f; }
.b-miracle svg polygon { fill: #3a2e10; stroke: var(--luck); }
.b-miracle .verdict { color: var(--luck); }
.b-miracle .d20 { filter: drop-shadow(0 0 14px #f2d27a99); }
.b-catastrophe .d20 { filter: drop-shadow(0 0 14px #ff4a3d88); }
.b-catastrophe.shake { animation: shake .5s; }
@keyframes shake { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }

/* dock */
.dock { border-top: 1px solid var(--line); background: #0e0d10; padding: 14px max(16px, calc((100% - 760px) / 2)) 16px; }
.act { display: flex; gap: 10px; align-items: flex-end; }
.act textarea { margin: 0; flex: 1; }
.act .btn { width: auto; margin: 0; padding: 12px 24px; }
#actStatus { margin: 6px 0 0; font-size: 15px; min-height: 1em; }
#actStatus:empty { display: none; }
.busy { display: flex; align-items: center; justify-content: center; gap: 12px; font-style: italic; color: var(--flame); padding: 6px; }
.candle { width: 10px; height: 16px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: var(--flame); box-shadow: 0 0 16px 4px #e8a54b66; animation: flicker 1.4s infinite; }
.errbox { text-align: center; color: var(--blood-glow); padding: 6px; }
.errbox .btn { margin: 0 0 0 8px; }
.rollbox { text-align: center; padding: 8px 0 12px; }
.rollbox .call { font-family: var(--fell); font-size: 22px; margin-bottom: 10px; }
.rollbox .call b { color: var(--flame); font-weight: 400; }
.rollbtn { font-family: var(--pixel); font-size: 22px; padding: 12px 34px; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 28px #e8a54b66; } }
.rollbox .waiting { color: var(--dim); font-style: italic; }

@media (max-width: 760px) {
  body { font-size: 18px; }
  .title { font-size: 44px; }
  .doors { grid-template-columns: 1fr; }
  .layout { grid-template-columns: 1fr; }
  .side { display: none; position: fixed; top: 64px; right: 0; width: min(340px, 90vw); bottom: 0; z-index: 20; border-left: 1px solid var(--line); box-shadow: -20px 0 40px #000c; }
  .side.open { display: block; }
  #rosterToggle { display: inline-block; }
  .log { padding: 22px 16px 30px; }
  .e.narration { font-size: 18px; }
  .e.action, .e.roll { margin-left: 8px; }
  .act .btn { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* pixel touches */
.top { border-bottom: 2px solid #2a2429; }
.dock { border-top: 2px solid #2a2429; }
.side { border-left: 2px solid #2a2429; }
.e.chapter { font-family: var(--pixel); font-size: 26px; letter-spacing: .12em; text-shadow: 2px 2px 0 #000, 0 0 18px #e8a54b33; }
.e.chapter::before, .e.chapter::after { content: '✦'; }
.e.fallen { font-family: var(--pixel); text-shadow: 2px 2px 0 #000, 0 0 18px #ff4a3d55; }
.e.action b, .roll .what b, .rollbox .call b { font-family: var(--pixel); font-weight: 500; }
.d20 { font-family: var(--pixel); }
.d20 svg { shape-rendering: crispEdges; }
.d20 svg polygon { stroke-width: 3; }
.cursor::after { content: '█'; font-size: .8em; }
.rules { border-radius: 0; border-width: 2px; clip-path: var(--notch); }
.rules h3 { font-family: var(--pixel); font-size: 18px; }
input, textarea { border-radius: 0; border-width: 2px; box-shadow: inset 2px 2px 0 #00000066; }
.sub { font-family: 'EB Garamond', Georgia, serif; }
.vote-h, .door h2, .prop h4, .rollbox .call { font-family: var(--pixel); }
.busy { font-family: var(--pixel); font-style: normal; }

/* bigger story bits */
.e.action { font-size: 20px; }
.roll .what { font-size: 19px; }
.rollbox .call { font-size: 26px; }
#actStatus { font-size: 17px; }

/* empty voting area */
.empty-vote { max-width: 640px; margin: 16px auto; padding: 26px 20px; text-align: center; border: 2px dashed #3a3238; color: var(--ink); }
.empty-vote p { margin: 4px 0; }
.empty-vote p:first-child { font-family: var(--pixel); font-size: 22px; color: #d8cbb5; }

/* table talk */
.chat { display: flex; flex-direction: column; gap: 8px; text-align: left; min-height: 0; }
.chat-log { overflow-y: auto; max-height: 260px; min-height: 90px; padding: 10px 12px; background: var(--bg); border: 2px solid #2a2429; font-size: 17px; line-height: 1.45; }
.side .chat { flex: 1 1 0; min-height: 0; }
.side .chat-log { max-height: none; flex: 1 1 0; min-height: 90px; }
.chat-log .msg { margin: 0 0 6px; overflow-wrap: anywhere; }
.chat-log .msg b { font-family: var(--pixel); font-weight: 500; color: var(--flame); }
.chat-log .msg.ghost { color: #9fb0b8; font-style: italic; }
.chat-log .msg.ghost b { color: #9fb0b8; }
.chat-empty { color: var(--dim); font-style: italic; margin: 0; }
.chat-form { display: flex; gap: 8px; }
.chat-form input { margin: 0; flex: 1; min-width: 0; font-size: 17px; padding: 8px 10px; }
.chat-form .btn { margin: 0; width: auto; }
.chat-note { margin: 0; font-size: 13px; color: var(--dim); }
.chat-slot { margin-top: 14px; }
.side .chat-slot { margin-top: 0; flex: 1 1 0; min-height: 250px; display: flex; flex-direction: column; }
.choose-chat { max-width: 640px; margin: 10px auto 40px; padding: 0 16px; }
.choose-chat .chat-slot::before { content: 'Table talk'; display: block; text-align: center; font-family: var(--pixel); font-size: 18px; color: var(--dim); margin-bottom: 8px; }
.unread { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 5px; background: var(--blood); color: #fff; font-size: 13px; line-height: 20px; text-align: center; }

/* voice */
.voice-wait { color: var(--dim); font-style: italic; animation: breathe 2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }
#vol { width: 100%; accent-color: var(--flame); margin: 0 0 16px; padding: 0; border: 0; box-shadow: none; }
#voiceBtn { margin: 0; }

#narratorLabel { margin-top: 14px; }
@media (max-width: 760px) {
  .top { gap: 8px; padding: 10px 12px; }
  .top .brand { font-size: 22px; }
  .top .btn.tiny { font-size: 14px; padding: 6px 10px; margin: 0; white-space: nowrap; }
  .top .lbl { display: none; }
  .adv { display: none; }
  .top::after { content: ''; flex: 1; order: 1; }
  #voiceBtn, #rosterToggle { order: 2; }
  .side { top: 52px; }
}

.lock-voice { display: inline-flex; justify-content: center; margin: 0 16px 0 0; vertical-align: middle; font-family: var(--pixel); }
#voiceHost { margin-top: 4px; }

/* host login */
.host-switch { text-align: right; margin: -8px 0 12px; }
.linkish { background: none; border: 0; padding: 2px 0; font-family: var(--pixel); font-size: 15px; color: var(--dim); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 4px; }
.linkish:hover, .linkish[aria-pressed="true"] { color: var(--flame); }
.linkish:focus-visible { outline: 2px solid var(--flame-dim); outline-offset: 3px; }

/* text size: each player picks their own */
:root { --ts: 1; }
.e.narration { font-size: calc(22px * var(--ts)); }
.e.action { font-size: calc(20px * var(--ts)); }
.roll .what { font-size: calc(19px * var(--ts)); }
.e.system { font-size: calc(15px * var(--ts)); }
.chat-log { font-size: calc(17px * var(--ts)); }
.act textarea { font-size: calc(20px * var(--ts)); }
@media (max-width: 760px) { .e.narration { font-size: calc(19px * var(--ts)); } }
.textsize { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-family: var(--pixel); font-size: 15px; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.textsize span { flex: 1; }
.textsize .btn { margin: 0; min-width: 44px; }

/* the d20: obsidian, with the result burning through */
.e.roll { gap: 18px; }
.d20 { width: 76px; height: 76px; font-size: 32px; font-weight: 600; color: var(--die-num, #e8dcc4);
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 0 0 8px #000; filter: drop-shadow(0 0 10px var(--die-glow, transparent)); }
.e.roll .d20 svg polygon { fill: #0c0a0e; stroke: var(--die-edge, #6b5d4d); stroke-width: 3; }
.e.roll .d20 svg polyline { stroke: var(--die-edge, #6b5d4d); opacity: .3; }
.d20.spinning { color: #6b6158; }
.b-catastrophe { --die-edge: #ff3b2f; --die-num: #ff5a4a; --die-glow: #ff3b2f66; }
.b-bad         { --die-edge: #9c2f27; --die-num: #e8776c; --die-glow: transparent; }
.b-mixed       { --die-edge: #7a6a55; --die-num: #eadfc8; --die-glow: transparent; }
.b-good        { --die-edge: #4f7d48; --die-num: #a9e09c; --die-glow: transparent; }
.b-miracle     { --die-edge: #e8c45a; --die-num: #ffe08a; --die-glow: #f2d27a77; }
.b-catastrophe .d20, .b-miracle .d20 { filter: drop-shadow(0 0 12px var(--die-glow)); }

/* atmosphere: the room closes in while a roll is pending */
.closing-in { position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: 0; transition: opacity 3.5s ease;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 35%, #000000b3 80%, #000000f0 100%); }
body.fate .closing-in { opacity: 1; }
body.fate .rollbox { position: relative; z-index: 45; }

/* atmosphere: a death flickers red, then cools to ash */
.e.fallen { animation: snuffed 2.6s ease-out both; }
@keyframes snuffed {
  0%   { color: #ff4a3d; text-shadow: 0 0 22px #ff4a3d, 2px 2px 0 #000; opacity: 1; }
  8%   { opacity: .15; }
  14%  { opacity: 1; }
  22%  { opacity: .4; }
  30%  { opacity: 1; color: #ff4a3d; }
  100% { color: #9a8f86; text-shadow: 2px 2px 0 #000; opacity: 1; }
}
/* the dead get a snuffed candle with a wisp of smoke */
.roster .dead .dot { width: 6px; height: 12px; border-radius: 0; background: #4f4740; box-shadow: none; position: relative; margin: 0 1px; }
.roster .dead .dot::before { content: ''; position: absolute; left: 2px; top: -9px; width: 2px; height: 6px; background: #8f857b; opacity: 0; animation: wisp 3.2s ease-in infinite; }
@keyframes wisp { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: .6; } 100% { opacity: 0; transform: translate(2px, -8px); } }

/* atmosphere: while the narrator thinks, the candle gutters */
.busy .logo-i .fl { animation-duration: .42s; }
.busy .logo-i svg { animation: gutter 2.2s steps(2, end) infinite; transform-origin: 50% 100%; }
@keyframes gutter { 0%, 100% { transform: skewX(0); } 25% { transform: skewX(-4deg); } 55% { transform: skewX(3deg); } 70% { opacity: .55; } 72% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .closing-in { transition: none; } }

/* round timer */
.clock { text-align: center; font-family: var(--pixel); font-size: 20px; color: var(--dim); margin: 0 0 8px; letter-spacing: .06em; }
.clock.low { color: var(--blood-glow); text-shadow: 0 0 10px #ff4a3d66; animation: tick 1s steps(1) infinite; }
@keyframes tick { 50% { opacity: .55; } }
.timer-sel { display: inline-block; width: auto; margin: 0 0 0 6px; padding: 4px 8px; font-size: 16px; font-family: var(--pixel); background: var(--bg); color: var(--ink); border: 2px solid #3a3238; border-radius: 0; }
.timer-sel option { background: #141216; color: var(--ink); }
:root { color-scheme: dark; }
.timer-pick { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; font-size: 14px; }