/* ============================================================
   Werewolves of the Old Village
   Heavy medieval / parchment / candlelit theme.
   Mobile-first. No frameworks.
   ============================================================ */

:root {
  --ink: #2a1c0e;
  --ink-soft: #5b3f25;
  --parchment: #f4e3c2;
  --parchment-edge: #c9aa74;
  --parchment-dark: #d8c08a;
  --candle: #f6c66b;
  --candle-glow: #ffb84d;
  --blood: #8a1a1a;
  --blood-bright: #b32424;
  --night: #1a120b;
  --night-2: #2a1d10;
  --moon: #f8e8b0;
  --forest: #2c3a26;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: 'IM Fell English', 'Cinzel', Georgia, serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse at top, #2b1d10 0%, #120a04 65%, #050200 100%) fixed,
    #0c0703;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[x-cloak] { display: none !important; }

/* ---------- Banner / header ---------- */
.banner {
  position: sticky;
  top: 0;
  z-index: 5;
  text-align: center;
  background: linear-gradient(180deg, #1a0e05 0%, #2c1a0c 100%);
  border-bottom: 2px solid #5e3d18;
  box-shadow: 0 6px 20px rgba(0,0,0,0.7), inset 0 -2px 0 #110903;
  padding: 12px 10px 10px;
}
.banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.banner h1 {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(20px, 5vw, 32px);
  margin: 0;
  letter-spacing: 2px;
  color: #f1d699;
  text-shadow: 0 1px 0 #000, 0 0 18px rgba(255, 175, 70, 0.35);
}
.banner h1 em {
  font-style: italic;
  font-weight: 500;
  color: #b8945c;
  letter-spacing: 1px;
}
.moon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff8d0, #f3d976 60%, #8a6a25);
  box-shadow: 0 0 18px rgba(255, 220, 120, 0.55);
  flex: 0 0 auto;
}
.status-bar {
  margin-top: 6px;
  font-size: 12px;
  color: #c9a76d;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.conn-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--blood-bright);
  box-shadow: 0 0 8px var(--blood-bright);
  display: inline-block;
}
.conn-dot.on {
  background: #6ec56e;
  box-shadow: 0 0 8px #6ec56e;
}
.phase-pill {
  border: 1px solid #6a4a1c;
  background: #1f1408;
  border-radius: 999px;
  padding: 2px 10px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #e5c282;
}

/* ---------- Parchment main panel ---------- */
.parchment {
  max-width: 720px;
  margin: 18px auto 90px;
  padding: 24px 22px 30px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 220, 150, 0.18) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(80,55,20,0.05) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #f6e6c5, #e7cf99);
  color: var(--ink);
  border: 1px solid #8c6a2c;
  border-radius: 8px;
  position: relative;
  box-shadow:
    0 0 0 4px #2b1b08 inset,
    0 0 0 5px #5d3f17 inset,
    0 30px 60px rgba(0,0,0,0.6);
}
.parchment::before, .parchment::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(70, 45, 15, 0.35);
  border-radius: 6px;
  pointer-events: none;
}
.parchment::after {
  inset: 14px;
  border: none;
  background:
    radial-gradient(circle at 8% 8%, rgba(80,40,10,0.18), transparent 20%),
    radial-gradient(circle at 90% 12%, rgba(80,40,10,0.18), transparent 22%),
    radial-gradient(circle at 12% 88%, rgba(80,40,10,0.18), transparent 22%),
    radial-gradient(circle at 88% 92%, rgba(80,40,10,0.16), transparent 25%);
}

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

/* ---------- Typography ---------- */
h2 {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(22px, 5vw, 30px);
  margin: 4px 0 14px;
  text-align: center;
  letter-spacing: 2px;
  color: #3a230d;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
h2::before, h2::after { content: " ❦ "; color: #8b6020; }
h3 {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #4a2e10;
  border-bottom: 1px dotted #8b6020;
  padding-bottom: 4px;
  margin: 22px 0 12px;
}
h4 {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #4a2e10;
  margin: 16px 0 6px;
}
.flavour {
  font-style: italic;
  text-align: center;
  color: #5b3f25;
  font-size: 16px;
  line-height: 1.45;
}
.hint {
  text-align: center;
  color: #6e5128;
  font-size: 14px;
  font-style: italic;
  margin: 12px 0 0;
}

/* ---------- Buttons ---------- */
button {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 14px 18px;
  border-radius: 4px;
  cursor: pointer;
  color: #2a1c0e;
  background:
    linear-gradient(180deg, #f7d997 0%, #d8a553 100%);
  border: 1px solid #6a4514;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(0,0,0,0.15),
    0 2px 0 #523510,
    0 4px 8px rgba(0,0,0,0.3);
  transition: transform 0.06s ease, filter 0.15s ease;
}
button:active { transform: translateY(1px); }
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
button.primary {
  font-size: 17px;
  padding: 16px 22px;
  background: linear-gradient(180deg, #f1cc6e 0%, #b8801e 100%);
  border: 1px solid #4f3308;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -2px 0 rgba(0,0,0,0.2),
    0 3px 0 #3a2607,
    0 6px 14px rgba(0,0,0,0.45);
  display: block;
  margin: 18px auto 0;
}
button.primary:hover:not(:disabled) { filter: brightness(1.06); }

/* ---------- Join form ---------- */
.screen.join { text-align: center; }
.screen.join form {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.screen.join label {
  text-align: left;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #4a2e10;
}
.screen.join input[type="text"] {
  width: 100%;
  margin-top: 6px;
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 20px;
  padding: 12px 14px;
  background: #fdf3d6;
  border: 1px solid #8b6020;
  border-radius: 3px;
  color: var(--ink);
  box-shadow: inset 0 2px 4px rgba(50,30,10,0.15);
}
.screen.join input[type="text"]:focus {
  outline: none;
  border-color: #b07a1a;
  box-shadow: inset 0 2px 4px rgba(50,30,10,0.15), 0 0 0 3px rgba(255, 200, 90, 0.35);
}

/* ---------- Lobby ---------- */
.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.player-card {
  background: #f9ead0;
  border: 1px solid #8b6020;
  border-radius: 4px;
  padding: 10px 12px;
  position: relative;
  box-shadow: 0 1px 0 #c39a4d, 0 2px 4px rgba(60,30,0,0.15);
}
.player-card.self { background: #f9d77a; border-color: #6a4514; }
.player-card.admin::before {
  content: "★";
  position: absolute;
  top: -10px; right: -8px;
  font-size: 18px;
  color: #b8801e;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.player-card.away { opacity: 0.5; }
.pcard-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.8px;
  color: #2a1c0e;
  word-break: break-word;
}
.pcard-meta { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.badge {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #6a4514;
  background: #fff3d0;
}
.admin-badge { background: #f6c66b; }
.you-badge { background: #d9b97a; }
.offline-badge { background: #cfa672; color: #5b3f25; }

.lobby-controls { text-align: center; margin-top: 14px; }

/* ---------- Role reveal ---------- */
.role-reveal { text-align: center; }
.role-card {
  margin: 16px auto 18px;
  max-width: 460px;
  border: 2px solid #4f3308;
  border-radius: 6px;
  padding: 24px 20px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,220,140,0.5) 0%, transparent 70%),
    linear-gradient(180deg, #fcecbe 0%, #e2c47e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 8px 24px rgba(0,0,0,0.35);
  position: relative;
}
.role-card.role-werewolf {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,150,150,0.35) 0%, transparent 70%),
    linear-gradient(180deg, #4a1414 0%, #2a0808 100%);
  color: #fde4d0;
  border-color: #6a0e0e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 24px rgba(100,0,0,0.5);
}
.role-card.role-seer {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(170,200,255,0.45) 0%, transparent 70%),
    linear-gradient(180deg, #1b234a 0%, #0e1430 100%);
  color: #e3eaff;
  border-color: #2a3a82;
}
.role-card.role-doctor {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(200,255,200,0.35) 0%, transparent 70%),
    linear-gradient(180deg, #fdf2d2 0%, #d4e7c5 100%);
  border-color: #5a7a3a;
}
.role-sigil {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.role-title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.role-blurb {
  font-size: 16px;
  line-height: 1.5;
  font-style: italic;
}

/* ---------- Night / Day shared ---------- */
.targets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 14px 0;
}
@media (min-width: 480px) {
  .targets { grid-template-columns: 1fr 1fr; }
}
.target {
  text-align: left;
  padding: 14px 16px;
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0.3px;
  font-weight: 500;
  background: linear-gradient(180deg, #f3dca3 0%, #d6b167 100%);
  position: relative;
}
.target.chosen {
  background: linear-gradient(180deg, #c5e0a0 0%, #6f9b41 100%);
  color: #1b2a0c;
  border-color: #3d5818;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -2px 0 rgba(0,0,0,0.2),
    0 2px 0 #2c4010,
    0 4px 10px rgba(0,0,0,0.4);
}
.target em { font-style: italic; color: #6e5128; font-size: 14px; }
.target .tally {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--blood);
  color: #fde9d0;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 13px;
  border-radius: 999px;
  padding: 2px 10px;
  letter-spacing: 1px;
}
.target.abstain {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #ddc89a 0%, #a98b54 100%);
  font-style: italic;
}

/* ---------- Night themed ---------- */
.screen.night h2 {
  color: #2a1a32;
}
.role-night { margin-top: 10px; }
.villager-sleep {
  text-align: center;
  padding: 20px 10px;
  border: 1px dashed #8b6020;
  border-radius: 6px;
  background: rgba(255,255,255,0.25);
}
.go-to-bed {
  margin: 16px auto 4px !important;
  background: linear-gradient(180deg, #6b8acc 0%, #2a3a82 100%) !important;
  color: #fdf3d6 !important;
  border-color: #1b234a !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 0 rgba(0,0,0,0.3),
    0 3px 0 #0d143a,
    0 6px 14px rgba(0,0,0,0.5) !important;
}
.waiting-names {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(80, 40, 10, 0.05);
  border-left: 3px solid #8b6020;
  border-radius: 0 4px 4px 0;
  text-align: left;
}
.waiting-names em {
  font-style: italic;
  color: #4a2e10;
  font-weight: 600;
}
.predawn-flavour {
  margin-top: 18px;
  font-size: 16px;
  color: #2a3a82;
  text-align: center;
}
.wolf-pack {
  margin-top: 18px;
  background: #2a0808;
  color: #fde4d0;
  border: 1px solid #6a0e0e;
  border-radius: 6px;
  padding: 12px 14px;
}
.wolf-pack h4 { color: #f5c0a0; }
.wolf-pack ul { list-style: none; padding: 0; margin: 0; }
.wolf-pack li { padding: 4px 0; border-bottom: 1px dashed #5a1414; }
.wolf-pack li:last-child { border-bottom: none; }
.seer-known {
  margin-top: 18px;
  background: #0e1430;
  color: #e3eaff;
  border: 1px solid #2a3a82;
  border-radius: 6px;
  padding: 12px 14px;
}
.seer-known ul { list-style: none; padding: 0; margin: 0; }
.seer-known li { padding: 4px 0; border-bottom: 1px dashed #2a3a82; }
.seer-known li:last-child { border-bottom: none; }
.seer-known .is-wolf { color: #ff8a8a; font-weight: 700; }
.seer-known .is-innocent { color: #a8e5a8; }

.night-waiting { margin-top: 18px; text-align: center; }

/* ---------- Day ---------- */
.summary {
  margin: 8px auto 16px;
  padding: 12px 16px;
  background: rgba(80, 40, 10, 0.06);
  border-left: 3px solid #8b6020;
  border-radius: 0 4px 4px 0;
}
.summary p {
  margin: 4px 0;
  font-style: italic;
  font-size: 16px;
  color: #3a230d;
}
.night-summary {
  background: rgba(50, 10, 10, 0.08);
  border-left-color: var(--blood);
}

/* ---------- Dead overlay ---------- */
.dead-banner {
  background: linear-gradient(180deg, #1a120b 0%, #2a1d10 100%);
  color: #cfa672;
  border: 1px solid #5b3f25;
  border-radius: 6px;
  padding: 12px 14px;
  text-align: center;
  font-style: italic;
  margin: 0 0 14px;
}

/* ---------- Roster (sidebar within parchment) ---------- */
.roster {
  margin-top: 26px;
  padding: 14px 16px;
  background: rgba(80, 40, 10, 0.05);
  border: 1px dashed #8b6020;
  border-radius: 6px;
}
.roster h3 { margin-top: 0; }
.roster ul { list-style: none; padding: 0; margin: 0; }
.roster li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 16px;
}
.roster li .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6ec56e;
  box-shadow: 0 0 6px #6ec56e;
  flex: 0 0 7px;
}
.roster li.away .dot { background: #888; box-shadow: none; }
.roster li.dead { color: #8b6a4a; text-decoration: line-through; }
.roster li.dead .dot { background: var(--blood); box-shadow: none; }
.roster li.self { font-weight: 700; }
.tag-dead { color: var(--blood); font-style: normal; margin-left: 4px; }

/* ---------- Role tags / reveal ---------- */
.role-tag {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #6a4514;
  background: #f3dca3;
  font-style: normal;
}
.role-tag.role-werewolf { background: #4a1414; color: #fde4d0; border-color: #6a0e0e; }
.role-tag.role-seer { background: #1b234a; color: #e3eaff; border-color: #2a3a82; }
.role-tag.role-doctor { background: #d4e7c5; color: #2a3a10; border-color: #5a7a3a; }
.role-tag.role-villager { background: #f3dca3; color: #2a1c0e; }

.reveal-list { list-style: none; padding: 0; margin: 12px 0; }
.reveal-list li {
  padding: 6px 8px;
  border-bottom: 1px dashed #8b6020;
}
.reveal-list li.dead { color: #6b4a26; }
.reveal-list li.dead strong { text-decoration: line-through; }

/* ---------- End screen ---------- */
.screen.end { text-align: center; }
.winner-werewolves {
  color: var(--blood) !important;
  text-shadow: 0 0 14px rgba(178, 36, 36, 0.4);
}
.winner-villagers {
  color: #3d5818 !important;
  text-shadow: 0 0 14px rgba(110, 155, 65, 0.4);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 26px;
  z-index: 30;
  background: #4a1414;
  color: #fde4d0;
  padding: 12px 18px;
  border-radius: 4px;
  border: 1px solid #6a0e0e;
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 15px;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}

/* ---------- Footer ---------- */
.footer-rune {
  text-align: center;
  color: #8c7146;
  font-style: italic;
  margin: 10px auto 30px;
  max-width: 600px;
  padding: 0 20px;
}
.footer-rune .tiny { font-size: 11px; color: #6a5430; }

/* ---------- Help button + drawer ---------- */
.help-btn {
  width: 24px; height: 24px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #f1cc6e, #b8801e);
  border: 1px solid #4f3308;
  color: #2a1c0e;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 22px;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 1px 0 #523510, 0 2px 4px rgba(0,0,0,0.4);
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
}
.drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 4, 1, 0.6);
  backdrop-filter: blur(2px);
}
.drawer-panel {
  position: relative;
  width: min(540px, 92vw);
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 220, 150, 0.2) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(80,55,20,0.05) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #f6e6c5, #e7cf99);
  border-left: 4px solid #5d3f17;
  box-shadow: -20px 0 40px rgba(0,0,0,0.6);
  padding: 22px 22px 80px;
  color: var(--ink);
  -webkit-overflow-scrolling: touch;
}
.drawer-panel h2 { text-align: left; }
.drawer-panel h2::before, .drawer-panel h2::after { content: ""; }
.drawer-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: 1px solid #6a4514;
  color: #4a2e10;
  font-size: 20px;
  width: 36px;
  height: 36px;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}
.annals-role {
  margin: 10px 0 16px;
  padding: 10px 12px;
  background: rgba(80, 40, 10, 0.05);
  border: 1px solid #a87d3c;
  border-radius: 6px;
}
.annals-role .role-tag {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 14px;
  padding: 3px 10px;
}
.annals-role p { margin: 4px 0; font-size: 15px; line-height: 1.45; }

/* ---------- Disconnect banner + pending pill ---------- */
.dc-banner {
  position: sticky;
  top: 86px;
  z-index: 4;
  margin: 0 auto;
  max-width: 720px;
  background: linear-gradient(180deg, #6a0e0e, #4a1414);
  color: #fde4d0;
  padding: 10px 16px;
  border-bottom: 1px solid #2a0808;
  text-align: center;
  font-style: italic;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.dc-spinner {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #f8c97a;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
  display: inline-block;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.pending-pill {
  position: fixed;
  top: 96px;
  right: 14px;
  z-index: 6;
  background: #1f1408;
  color: #f1d699;
  border: 1px solid #6a4514;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ---------- Lobby guide / role preview ---------- */
.role-preview {
  background: rgba(80, 40, 10, 0.06);
  border: 1px dashed #8b6020;
  padding: 12px 14px;
  border-radius: 6px;
  margin: 14px 0;
}
.role-preview h4 { margin: 0 0 8px; }
.role-preview ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.role-preview .role-tag {
  font-size: 12px;
  padding: 3px 8px;
}

.game-guide {
  margin: 18px 0;
  border: 1px solid #8b6020;
  border-radius: 6px;
  background: rgba(255, 235, 195, 0.6);
}
.game-guide summary {
  cursor: pointer;
  padding: 12px 14px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px;
  color: #4a2e10;
  list-style: none;
}
.game-guide summary::-webkit-details-marker { display: none; }
.game-guide[open] summary {
  border-bottom: 1px dashed #8b6020;
}
.game-guide .guide-body { padding: 12px 16px 16px; }
.game-guide h3 { margin-top: 18px; }
.game-guide h3:first-child { margin-top: 6px; }
.game-guide p { font-size: 16px; line-height: 1.5; color: #2a1c0e; }
.roles-mini {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
.roles-mini li {
  margin: 6px 0;
  font-size: 15px;
  line-height: 1.4;
}
.roles-mini .role-tag {
  display: inline-block;
  margin-right: 4px;
  font-size: 12px;
  padding: 2px 8px;
}

/* ---------- Role reveal — guide sections ---------- */
.role-guide {
  margin: 16px auto;
  max-width: 520px;
  text-align: left;
}
.role-guide .guide-section {
  background: rgba(255, 235, 195, 0.7);
  border: 1px solid #b48a3f;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 8px 0;
}
.role-guide .guide-section h3 {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #4a2e10;
  border: none;
  padding: 0;
}
.role-guide .guide-section p {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: #2a1c0e;
}
.role-guide .guide-section ul {
  margin: 4px 0 0;
  padding-left: 18px;
}
.role-guide .guide-section ul li {
  font-size: 15px;
  line-height: 1.45;
  margin: 2px 0;
}
.role-guide .win-section {
  background: rgba(110, 155, 65, 0.18);
  border-color: #5a7a3a;
}
.role-guide .secrecy {
  background: rgba(80, 10, 10, 0.08);
  border-color: var(--blood);
}

/* ---------- Phase intro text ---------- */
.phase-intro {
  font-size: 15px;
  margin-bottom: 12px;
  color: #4a2e10;
}

/* ---------- Phase countdown pill ---------- */
.timer-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 6px auto 18px;
  padding: 12px 22px;
  border-radius: 8px;
  border: 2px solid #6a4514;
  background: linear-gradient(180deg, #f6e6c5, #d8b372);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 4px 10px rgba(0,0,0,0.35);
  width: fit-content;
  min-width: 200px;
}
.timer-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #5b3f25;
}
.timer-time {
  font-family: 'Cinzel', serif;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #2a1c0e;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  font-variant-numeric: tabular-nums;
}
.timer-talk {
  background: linear-gradient(180deg, #f6e6c5, #d8b372);
  border-color: #6a4514;
}
.timer-talk .timer-time { color: #2a1c0e; }
.timer-vote {
  background: linear-gradient(180deg, #f9c87c 0%, #b04019 100%);
  border-color: #4a1414;
}
.timer-vote .timer-label { color: #fde4d0; }
.timer-vote .timer-time { color: #fde4d0; text-shadow: 0 1px 0 rgba(0,0,0,0.5); }
.timer-dawn {
  background: linear-gradient(180deg, #2a3a82 0%, #4a5fb0 100%);
  border-color: #1b234a;
}
.timer-dawn .timer-label { color: #e3eaff; letter-spacing: 1.8px; }
.timer-dawn .timer-time { color: #fff4d0; text-shadow: 0 0 12px rgba(255, 220, 140, 0.4); }
.timer-urgent {
  animation: timer-pulse 0.9s ease-in-out infinite;
  border-color: var(--blood-bright);
}
@keyframes timer-pulse {
  0%, 100% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 10px rgba(0,0,0,0.35); }
  50%      { transform: scale(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 18px rgba(178, 36, 36, 0.55); }
}

/* ---------- Awaiting-vote panel ---------- */
.awaiting-vote {
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px dashed #8b6020;
  border-radius: 6px;
  background: rgba(255, 235, 195, 0.45);
  text-align: center;
}
.vote-block { margin-top: 6px; }

/* ---------- Buttons (extras) ---------- */
.link-btn {
  display: inline;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-family: 'IM Fell English', Georgia, serif;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #6e3d05;
  text-decoration: underline dotted #8b6020;
  cursor: pointer;
}
.link-btn:hover { color: #2a1c0e; }

.join-tease {
  margin-top: 18px;
  text-align: center;
  font-size: 14px;
  color: #5b3f25;
  font-style: italic;
}

/* ---------- Misc ---------- */
@media (max-width: 480px) {
  .parchment { margin: 10px auto 40px; padding: 18px 14px 24px; border-radius: 0; }
  .role-title { font-size: 22px; }
  .role-sigil { font-size: 50px; }
  h2 { font-size: 22px; letter-spacing: 1.5px; }
  .drawer-panel { padding: 18px 14px 80px; }
  .dc-banner { top: 78px; }
  .pending-pill { top: 88px; right: 8px; }
}