@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');


/* ═══ Blood Moon — Medieval Glassmorphism ═══ */
/* 9:16 aspect ratio viewport, iPhone safe areas */
/* All text sized +30% from base design, bold + high contrast */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { width: 100%; height: 100%; overflow: hidden; background: #080810; }
body {
  width: 100%; height: 100%; overflow: hidden;
  background: #080810;
  color: #e8e0d4;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  /* Safe areas: prefer injected CSS vars from WebView, fallback to env() */
  padding-top: var(--sat, env(safe-area-inset-top, 0px));
  padding-bottom: var(--sab, env(safe-area-inset-bottom, 0px));
  padding-left: var(--sal, env(safe-area-inset-left, 0px));
  padding-right: var(--sar, env(safe-area-inset-right, 0px));
}
#game-root {
  width: 100%;
  height: 100%;
  max-width: 430px;
  margin: 0 auto;
  display: flex;
  position: relative;
  overflow: hidden;
}
/* ═══ Screens ═══ */
.screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  overflow-y: auto;
  position: relative;
}
.screen::-webkit-scrollbar { display: none; }
/* ═══ Title ═══ */
.title-screen {
  background:
    linear-gradient(rgba(8,8,16,.4), rgba(8,8,16,.4)),
    radial-gradient(ellipse at 50% 50%, rgba(8,8,16,.3) 0%, rgba(8,8,16,.7) 50%, rgba(8,8,16,.92) 100%),
    url('../backgrounds/title.webp') center/cover no-repeat;
  gap: 12px;
}
.title-moon {
  color: #c4a060;
  filter: drop-shadow(0 0 30px rgba(200,50,30,.5)) drop-shadow(0 0 60px rgba(200,50,30,.2));
  animation: bloodPulse 4s ease-in-out infinite;
}
@keyframes bloodPulse {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 30px rgba(200,50,30,.4)) drop-shadow(0 0 60px rgba(200,50,30,.15)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 50px rgba(220,40,30,.6)) drop-shadow(0 0 80px rgba(220,40,30,.25)); }
}
.title-text {
  font-family: 'Cinzel', serif;
  font-size: 45px;
  font-weight: 900;
  letter-spacing: 6px;
  color: #c42020;
  text-shadow:
    0 0 10px rgba(200,30,20,.6),
    0 0 30px rgba(200,30,20,.4),
    0 0 60px rgba(200,30,20,.2),
    0 2px 4px rgba(0,0,0,.8);
  text-align: center;
  width: 100%;
  animation: titleGlow 4s ease-in-out infinite, titleShake 8s ease-in-out infinite;
}
@keyframes titleGlow {
  0%,100% {
    text-shadow: 0 0 10px rgba(200,30,20,.6), 0 0 30px rgba(200,30,20,.4), 0 0 60px rgba(200,30,20,.2), 0 2px 4px rgba(0,0,0,.8);
  }
  50% {
    text-shadow: 0 0 20px rgba(220,40,30,.8), 0 0 50px rgba(220,40,30,.5), 0 0 80px rgba(220,40,30,.3), 0 0 120px rgba(200,20,10,.15), 0 2px 4px rgba(0,0,0,.8);
  }
}
@keyframes titleShake {
  0%,85%,100% { transform: translateX(0); }
  87% { transform: translateX(-2px) rotate(-0.5deg); }
  89% { transform: translateX(2px) rotate(0.5deg); }
  91% { transform: translateX(-1px) rotate(-0.3deg); }
  93% { transform: translateX(1px) rotate(0.3deg); }
  95% { transform: translateX(0); }
}
.title-sub {
  font-size: 18px;
  color: rgba(200,180,160,.8);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  text-align: center;
  width: 100%;
}
/* ═══ Glass Panels ═══ */
.glass {
  background: rgba(20,15,12,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(160,120,80,.15);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(200,170,120,.06),
    0 8px 32px rgba(0,0,0,.4);
}
.glass-dark {
  background: rgba(10,8,6,.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(100,80,60,.12);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(180,150,100,.04), 0 4px 16px rgba(0,0,0,.5);
}
/* ═══ Buttons ═══ */
.btn-primary {
  padding: 14px 32px;
  border: 1px solid rgba(160,100,40,.3);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(140,60,20,.5), rgba(100,40,15,.6));
  backdrop-filter: blur(8px);
  color: #f0d8b8;
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  box-shadow: 0 0 20px rgba(160,80,20,.15), inset 0 1px 0 rgba(220,180,100,.1);
  transition: all .2s;
}
.btn-primary:active {
  transform: scale(.97);
  background: linear-gradient(135deg, rgba(160,70,25,.6), rgba(120,50,20,.7));
}
.btn-secondary {
  padding: 10px 20px;
  border: 1px solid rgba(160,120,80,.15);
  border-radius: 10px;
  background: rgba(20,15,10,.5);
  backdrop-filter: blur(8px);
  color: rgba(200,180,160,1);
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.btn-secondary:active { transform: scale(.97); background: rgba(30,20,15,.6); }
.btn-danger {
  padding: 14px 32px;
  border: 1px solid rgba(180,30,20,.3);
  border-radius: 12px;
  background: rgba(120,20,15,.2);
  backdrop-filter: blur(8px);
  color: #e88080;
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  text-shadow: 0 0 10px rgba(200,40,30,.3);
  transition: all .2s;
}
.btn-danger:active { transform: scale(.97); background: rgba(140,25,18,.3); }
/* ═══ Setup ═══ */
.setup-screen {
  gap: 14px;
  justify-content: flex-start;
  padding-top: calc(46px + var(--sat, env(safe-area-inset-top, 0px)));
  background:
    radial-gradient(ellipse at 50% 50%, rgba(10,8,18,.5) 0%, rgba(10,8,18,.85) 50%, rgba(10,8,18,.97) 100%),
    url('../backgrounds/night.webp') center/cover no-repeat;
}
.setup-theme {
  color: rgba(200,180,160,.7);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
}
.role-reveal {
  background: rgba(20,15,10,.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(160,120,80,.25);
  border-radius: 13px;
  padding: 12px;
  text-align: center;
  width: 100%;
  max-width: 272px;
  box-shadow: inset 0 1px 0 rgba(200,170,120,.06), 0 4px 24px rgba(0,0,0,.4);
}
.role-icon { color: #d4b896; }
.role-name {
  font-family: 'Cinzel', serif;
  font-size: 19px;
  font-weight: 800;
  margin: 4px 0 3px;
  color: #e8d0b0;
}
.role-desc { font-size: 15px; color: rgba(200,180,160,1); line-height: 1.4; font-weight: 600; }
.setup-warning {
  color: #c44030;
  font-size: 18px;
  font-weight: 800;
  font-family: 'Cinzel', serif;
  text-shadow: 0 0 12px rgba(180,40,30,.3);
}
/* ═══ NPC Grid ═══ */
.npc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 400px;
  margin: 8px 0;
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 2px;
}
.npc-grid::-webkit-scrollbar { display: none; }
.npc-portrait, .npc-card, .npc-target, .npc-nominate {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(20,15,10,.8);
  border: 1px solid rgba(160,120,80,.2);
  cursor: pointer;
  transition: all .2s;
  min-height: 72px;
}
.npc-card:hover, .npc-target:hover, .npc-nominate:hover,
.npc-card:active, .npc-target:active, .npc-nominate:active {
  background: rgba(140,80,30,.2);
  border-color: rgba(180,120,60,.35);
  box-shadow: 0 0 12px rgba(160,100,40,.2);
}
.npc-card.exhausted { opacity: .5; pointer-events: none; }
.npc-avatar {
  width: 53px;
  height: 53px;
  min-width: 53px;
  border-radius: 10px;
  background-color: #2a1810;
  background-size: cover;
  background-position: center 20%;
  border: 2px solid rgba(160,120,80,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 800;
  color: #d4b896;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  overflow: hidden;
}
.npc-avatar.dead {
  background: linear-gradient(145deg, #6a5a40, #4a3c28);
  border-color: rgba(60,50,30,.4);
  opacity: .45;
  color: #504030;
  text-shadow: none;
}
.npc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.npc-name {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e8d8c0;
}
.npc-title {
  font-size: 13px;
  color: rgba(180,150,100,.9);
  font-style: italic;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.npc-archetype { font-size: 12px; color: rgba(160,140,110,.8); font-weight: 600; }
.npc-probes { font-size: 13px; color: rgba(180,130,60,1); font-family: 'Cinzel', serif; font-weight: 700; margin-top: 1px; }
.badge-wolf { position: absolute; bottom: -3px; right: -3px; color: #c44030; filter: drop-shadow(0 0 4px rgba(200,50,30,.5)); }
.badge-safe { position: absolute; bottom: -3px; right: -3px; color: #60a060; filter: drop-shadow(0 0 4px rgba(80,180,80,.5)); }
.player-avatar-fallback {
  background: linear-gradient(135deg, #4a3020, #6a4a30);
  color: #e8d0b0;
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
img.npc-avatar {
  object-fit: cover;
}
/* ═══ Night ═══ */
.night-screen {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(6,4,14,.4) 0%, rgba(6,4,14,.8) 60%, rgba(6,4,14,.95) 100%),
    url('../backgrounds/night.webp') center/cover no-repeat;
  gap: 14px;
}
.moon-rise { color: #a0a8c4; animation: moonRise 2s ease-out; filter: drop-shadow(0 0 20px rgba(200,200,255,.2)); }
@keyframes moonRise { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.night-clue {
  font-size: 20px;
  color: rgba(180,180,220,1);
  font-style: italic;
  font-weight: 600;
  text-align: center;
  max-width: 300px;
  line-height: 1.5;
  animation: fadeIn .8s ease;
}
.action-result {
  background: rgba(15,10,30,.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(100,80,160,.3);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  margin-top: 10px;
  box-shadow: 0 0 20px rgba(80,50,140,.2);
}
.action-result p { color: #e0d8cc; font-size: 18px; }
.result-reveal { font-family: 'Cinzel', serif; font-size: 26px; font-weight: 900; margin-top: 6px; }
.role-badge {
  background: rgba(15,10,30,.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(100,80,160,.25);
  border-radius: 20px;
  padding: 6px 16px;
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  color: #d0c0e8;
}
/* ═══ Dawn ═══ */
.dawn-screen {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(20,16,10,.4) 0%, rgba(20,16,10,.8) 60%, rgba(20,16,10,.95) 100%),
    url('../backgrounds/dawn.webp') center/cover no-repeat;
  gap: 12px;
}
.death-reveal { text-align: center; animation: fadeIn 1s ease; }
.dawn-text { font-family: 'Cinzel', serif; font-size: 22px; font-weight: 800; margin: 6px 0; color: #e8d0b0; }
.role-reveal-small { font-size: 17px; color: #e0d0b8; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.alive-count { font-size: 16px; color: #e0d0b8; font-weight: 700; margin-top: 6px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* ═══ Day ═══ */
.day-screen {
  gap: 10px;
  justify-content: flex-start;
  padding-top: calc(46px + var(--sat, env(safe-area-inset-top, 0px)));
  background:
    radial-gradient(ellipse at 50% 50%, rgba(14,12,8,.5) 0%, rgba(14,12,8,.85) 50%, rgba(14,12,8,.97) 100%),
    url('../backgrounds/day.webp') center/cover no-repeat;
}
.day-header { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.day-header h2 { font-family: 'Cinzel', serif; font-size: 21px; font-weight: 800; color: #e8d0b0; }
.day-stats { font-size: 14px; color: rgba(200,180,160,.7); font-family: 'Cinzel', serif; font-weight: 700; }
.action-bar { display: flex; gap: 10px; margin-top: 10px; width: 100%; }
.action-bar button { flex: 1; }
/* ═══ Assembly ═══ */
.assembly-log {
  width: 100%;
  max-height: 55vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 0;
}
.assembly-log::-webkit-scrollbar { display: none; }
.assembly-msg {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: #f0e8dc;
  background: rgba(8,6,4,.9);
  border: 1px solid rgba(160,120,80,.18);
  animation: slideUp .3s ease;
}
.msg-accusation {
  border-left: 3px solid rgba(200,140,40,.8);
  background: rgba(200,140,40,.12);
}
.msg-grief {
  border-left: 3px solid rgba(100,140,200,.7);
  background: rgba(100,140,200,.1);
}
.msg-neutral { border-left: 3px solid rgba(160,120,80,.3); }
@keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* ═══ Dialogue ═══ */
.dialogue-box {
  background: rgba(20,15,10,.88);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(160,120,80,.25);
  border-radius: 16px;
  padding: 22px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(200,170,120,.08), 0 8px 32px rgba(0,0,0,.6);
}
.dialogue-speaker {
  font-family: 'Cinzel', serif;
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 4px;
  color: #e8d0b0;
}
.dialogue-type {
  font-size: 15px;
  color: rgba(180,140,80,1);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
}
.dialogue-text {
  font-size: 24px;
  line-height: 1.6;
  color: rgba(220,200,180,1);
  margin-bottom: 16px;
  font-style: italic;
  font-weight: 600;
}
.lie-glow {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c43020;
  box-shadow: 0 0 8px rgba(200,40,30,.6);
  margin-left: 5px;
  animation: lieFlicker 2s ease-in-out infinite;
}
@keyframes lieFlicker {
  0%,100% { opacity: .6; box-shadow: 0 0 6px rgba(200,40,30,.4); }
  50% { opacity: 1; box-shadow: 0 0 12px rgba(200,40,30,.7); }
}
/* ═══ Probe Menu ═══ */
.probe-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(12,10,8,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(160,120,80,.15);
  padding: 16px;
  padding-bottom: max(16px, var(--sab, env(safe-area-inset-bottom, 0px)));
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 100;
  animation: slideUp .2s ease;
  max-width: 430px;
  margin: 0 auto;
}
.probe-header {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 2px;
  color: #e8d0b0;
}
.probe-count { font-size: 14px; color: rgba(180,130,60,1); font-weight: 700; }
.probe-btn {
  padding: 11px 14px;
  border: 1px solid rgba(160,120,80,.12);
  border-radius: 10px;
  background: rgba(30,22,15,.5);
  color: #e8d8c0;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  font-family: 'Cormorant Garamond', serif;
  transition: all .15s;
}
.probe-btn:active { background: rgba(140,80,30,.15); border-color: rgba(180,120,60,.25); }
.probe-cancel {
  text-align: center;
  color: rgba(200,180,160,.7);
  border: none;
  background: transparent;
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
}
/* ═══ Evidence Board ═══ */
.evidence-screen {
  gap: 10px;
  justify-content: flex-start;
  padding-top: calc(46px + var(--sat, env(safe-area-inset-top, 0px)));
  background:
    radial-gradient(ellipse at 50% 50%, rgba(14,12,8,.5) 0%, rgba(14,12,8,.85) 50%, rgba(14,12,8,.97) 100%),
    url('../backgrounds/day.webp') center/cover no-repeat;
}
.evidence-section { width: 100%; margin-bottom: 8px; }
.evidence-section h3 {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 5px;
  color: rgba(200,180,160,1);
  letter-spacing: 0.5px;
}
.evidence-row {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  background: rgba(20,15,10,.8);
  border: 1px solid rgba(160,120,80,.15);
  margin-bottom: 4px;
  color: #f0e8dc;
}
.evidence-row.contradiction {
  background: rgba(180,30,20,.08);
  border: 1px solid rgba(180,30,20,.2);
  color: #e0a0a0;
}
.empty { color: rgba(200,180,160,.5); font-size: 15px; font-style: italic; font-weight: 600; }
/* ═══ Vote ═══ */
.vote-screen {
  gap: 14px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(14,10,8,.5) 0%, rgba(14,10,8,.85) 50%, rgba(14,10,8,.97) 100%),
    url('../backgrounds/vote.webp') center/cover no-repeat;
}
.vote-screen h2 { font-family: 'Cinzel', serif; color: #d4b896; }
.defense-card {
  background: rgba(20,15,10,.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(160,120,80,.25);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  width: 100%;
  max-width: 360px;
  margin-bottom: 6px;
  box-shadow: inset 0 1px 0 rgba(200,170,120,.08), 0 4px 16px rgba(0,0,0,.4);
}
.defense-name {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 800;
  margin: 6px 0 4px;
  color: #e8d0b0;
}
.defense-speech { font-size: 19px; color: rgba(200,180,160,1); font-style: italic; font-weight: 600; line-height: 1.4; }
.vote-counting { color: #e8d0b0; font-size: 20px; font-weight: 800; animation: bloodPulse 1s ease-in-out infinite; }
/* ═══ Vote Tally ═══ */
.vote-tally {
  width: 100%;
  max-width: 380px;
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.vote-tally::-webkit-scrollbar { display: none; }
.vote-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(20,15,10,.8);
  border: 1px solid rgba(160,120,80,.15);
  animation: slideUp .4s ease;
}
.vote-entry .npc-avatar { width: 36px; height: 36px; min-width: 36px; border-radius: 8px; }
.vote-entry-text {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 700;
  color: #e8d8c0;
  flex: 1;
}
.vote-entry-target {
  color: #e8a060;
  font-weight: 800;
}
.vote-tally-counts {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 8px;
}
.vote-tally-count {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 800;
  color: #e8d0b0;
  text-align: center;
  padding: 8px 18px;
  background: rgba(20,15,10,.8);
  border-radius: 12px;
  border: 1px solid rgba(160,120,80,.2);
}
.vote-tally-count .count-num {
  font-size: 28px;
  display: block;
  color: #e8a060;
}
/* ═══ Elimination ═══ */
.elimination-wolf {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(10,16,10,.5) 0%, rgba(10,16,10,.85) 60%, rgba(10,16,10,.97) 100%),
    url('../backgrounds/dawn.webp') center/cover no-repeat;
  gap: 12px;
}
.elimination-innocent {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(16,10,10,.5) 0%, rgba(16,10,10,.85) 60%, rgba(16,10,10,.97) 100%),
    url('../backgrounds/lose.webp') center/cover no-repeat;
  gap: 12px;
}
.role-reveal-big {
  font-family: 'Cinzel', serif;
  font-size: 29px;
  font-weight: 900;
  text-shadow: 0 0 16px rgba(0,0,0,.5);
}
/* ═══ Win/Lose ═══ */
.win-screen {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(10,16,12,.4) 0%, rgba(10,16,12,.8) 60%, rgba(10,16,12,.95) 100%),
    url('../backgrounds/win.webp') center/cover no-repeat;
  gap: 14px;
}
.win-screen h1 { font-family: 'Cinzel', serif; color: #a0d4a0; text-shadow: 0 0 20px rgba(100,180,100,.3); }
.lose-screen {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(16,8,8,.4) 0%, rgba(16,8,8,.8) 60%, rgba(16,8,8,.95) 100%),
    url('../backgrounds/lose.webp') center/cover no-repeat;
  gap: 14px;
}
.lose-screen h1 { font-family: 'Cinzel', serif; color: #d06050; text-shadow: 0 0 20px rgba(200,60,40,.3); }
.score-card {
  background: rgba(20,15,10,.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(160,120,80,.25);
  border-radius: 14px;
  padding: 16px;
  font-size: 19px;
  font-weight: 700;
  line-height: 2;
  color: rgba(200,180,160,1);
  font-family: 'Cinzel', serif;
  box-shadow: inset 0 1px 0 rgba(200,170,120,.04);
}
/* ═══ Typography ═══ */
h2 {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  color: #e8d0b0;
  letter-spacing: 0.5px;
}
p { line-height: 1.5; font-weight: 600; }
/* ═══ Decorative Elements ═══ */
.screen::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 4px);
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}
.screen > * { position: relative; z-index: 1; }
/* ═══ Game HUD ═══ */
.game-hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  padding-top: calc(8px + var(--sat, env(safe-area-inset-top, 0px)));
  z-index: 150;
  pointer-events: none;
  max-width: 430px;
  margin: 0 auto;
}
.hud-btn {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 10px;
  background: rgba(10,8,6,.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #c8b898;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  transition: all .15s;
  border: 1px solid rgba(160,120,80,.12);
}
.hud-btn:active {
  transform: scale(.92);
  background: rgba(20,15,10,.85);
}
.hud-spacer { flex: 1; }
.title-exit-btn {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 12px;
  z-index: 10;
}
/* ═══ Fade Transition ═══ */
#game-root.fade-out {
  animation: fadeOut .6s ease forwards;
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
/* ═══ Parchment Backstory Modal ═══ */
.parchment-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.75);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn .3s ease;
}
.parchment {
  width: 100%;
  max-width: 380px;
  max-height: 80vh;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(220,195,150,1) 0%, rgba(200,175,130,1) 40%, rgba(180,155,110,1) 100%);
  border-radius: 6px;
  padding: 28px 24px 24px;
  position: relative;
  box-shadow:
    0 0 0 2px rgba(120,90,50,.4),
    0 4px 30px rgba(0,0,0,.6),
    inset 0 0 40px rgba(100,70,30,.15);
  color: #3a2a18;
  animation: parchmentUnroll .4s ease-out;
}
.parchment::-webkit-scrollbar { display: none; }
.parchment::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(100,70,30,.06) 28px, rgba(100,70,30,.06) 29px);
  pointer-events: none;
  border-radius: 6px;
}
@keyframes parchmentUnroll {
  from { transform: scaleY(.3) translateY(-40px); opacity: 0; }
  to { transform: scaleY(1) translateY(0); opacity: 1; }
}
.parchment-portrait {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background-size: cover;
  background-position: center 20%;
  border: 3px solid rgba(120,90,50,.5);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.parchment-name {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  color: #2a1a0a;
  margin-bottom: 2px;
  text-shadow: 0 1px 0 rgba(200,170,120,.4);
}
.parchment-title-label {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: rgba(80,60,30,.6);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.parchment-divider {
  width: 60%;
  margin: 0 auto 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(120,90,50,.4), transparent);
}
.parchment-section {
  margin-bottom: 12px;
}
.parchment-section-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 800;
  color: rgba(80,50,20,.7);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.parchment-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  color: #3a2a18;
}
.parchment-trait {
  display: inline-block;
  background: rgba(120,90,50,.12);
  border: 1px solid rgba(120,90,50,.25);
  border-radius: 12px;
  padding: 3px 12px;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: #5a3a18;
  margin: 2px 4px 2px 0;
}
.parchment-close {
  display: block;
  margin: 16px auto 0;
  padding: 10px 28px;
  border: 2px solid rgba(120,90,50,.4);
  border-radius: 8px;
  background: rgba(120,90,50,.1);
  color: #3a2a18;
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: 1px;
}
.parchment-close:active {
  background: rgba(120,90,50,.25);
}
/* ═══ Evidence Cards ═══ */
.evidence-drawer {
  width: 100%;
  max-height: 45vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.evidence-drawer::-webkit-scrollbar { display: none; }
.evidence-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(20,15,10,.8);
  border: 1px solid rgba(160,120,80,.2);
  cursor: pointer;
  transition: all .2s;
  text-align: left;
  width: 100%;
}
.evidence-card:active {
  background: rgba(140,80,30,.2);
  border-color: rgba(180,120,60,.35);
  transform: scale(.98);
}
.evidence-card-header {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: #c8b898;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.evidence-day {
  margin-left: auto;
  font-size: 12px;
  color: rgba(180,150,100,.7);
  font-weight: 600;
}
.evidence-card-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 600;
  font-style: italic;
  color: #e0d8cc;
  line-height: 1.4;
}
/* ═══ Persuasion Reaction ═══ */
.persuasion-reaction {
  background: rgba(20,15,10,.88);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  border: 2px solid rgba(160,120,80,.2);
  animation: fadeIn .4s ease;
}
.reaction-swayed {
  border-color: rgba(80,180,80,.4);
  box-shadow: 0 0 20px rgba(80,180,80,.1);
}
.reaction-backfire {
  border-color: rgba(200,60,40,.4);
  box-shadow: 0 0 20px rgba(200,60,40,.1);
}
.reaction-neutral {
  border-color: rgba(160,160,100,.3);
}
.reaction-speaker {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 800;
  color: #e8d0b0;
  margin-bottom: 8px;
}
.reaction-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  font-style: italic;
  color: #e0d8cc;
  line-height: 1.5;
  margin-bottom: 12px;
}
.reaction-result {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.reaction-swayed .reaction-result { color: #80d080; text-shadow: 0 0 10px rgba(80,180,80,.3); }
.reaction-backfire .reaction-result { color: #e06050; text-shadow: 0 0 10px rgba(200,60,40,.3); }
.reaction-neutral .reaction-result { color: #c8b898; }
/* ═══ Accusation Banner ═══ */
.accusation-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(180,30,20,.12);
  border: 2px solid rgba(200,60,40,.3);
  width: 100%;
  max-width: 400px;
  margin-bottom: 10px;
  animation: fadeIn .5s ease;
}
.accusation-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 700;
  color: #e8c0b0;
  line-height: 1.45;
  font-style: italic;
}