/* ===================== Tokens ===================== */
:root{
  /* Cream "paper" base + blood accent */
  --paper-top:#fbf4e8;
  --paper-mid:#f6e9d2;
  --paper-bottom:#f0dcbe;
  --glass:rgba(255,255,255,0.55);
  --glass-strong:rgba(255,255,255,0.75);
  --glass-border:rgba(160,20,35,0.22);
  --accent:#b8102a;
  --accent-soft:#d94657;
  --accent-deep:#7a0016;
  --ink:#3a1014;
  --ink-mute:#7a4147;
  --text-onDark:#fff3ee;
  --text-onDark-mute:#e8b9be;
  --shadow-blood:rgba(120,10,25,0.16);
  --font-display:'Cinzel', serif;
  --font-blood:'Nosifer', cursive;
  --font-body:'Manrope', sans-serif;

  --sky-top:#8fd0ff;
  --sky-mid:#bfe6ff;
  --sky-bottom:#fff3d2;
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;
  width:100%;height:100%;
  overflow:hidden;
  font-family:var(--font-body);
  color:var(--ink);
  transition:background 1.2s ease;
}
body.theme-blood{
  background:linear-gradient(165deg, var(--paper-top) 0%, var(--paper-mid) 55%, var(--paper-bottom) 100%);
}
body.theme-day{
  background:linear-gradient(165deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-bottom) 100%);
  color:#3a2a1a;
}
body.theme-day .glass-card,
body.theme-day .game-topbar,
body.theme-day .players-grid,
body.theme-day .chat-panel{
  --glass-border:rgba(255,180,80,0.4);
  color:#3a2a1a;
}

button, input{ font-family:inherit; }

/* ===================== Ambient FX: spreading blood stains ===================== */
.ambient-fx{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.ambient-fx::before{
  content:'';
  position:absolute; inset:-10%;
  background:
    radial-gradient(circle at 20% 20%, rgba(184,16,42,0.05), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(120,10,25,0.07), transparent 45%);
  animation:drift 18s ease-in-out infinite alternate;
}
body.theme-day .ambient-fx::before{
  background:
    radial-gradient(circle at 75% 12%, rgba(255,240,180,0.55), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(200,230,255,0.3), transparent 45%);
}
@keyframes drift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(-3%,3%) scale(1.08); }
}

.blood-stain{
  position:absolute;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(120,8,20,0.4), transparent 62%),
    radial-gradient(ellipse at 68% 62%, rgba(90,4,14,0.35), transparent 58%),
    radial-gradient(ellipse at 50% 80%, rgba(140,10,24,0.3), transparent 60%);
  filter:blur(3px);
  mix-blend-mode:multiply;
  opacity:0;
  transform:scale(0.4);
  animation:bloodBloom linear infinite;
}
body.theme-day .blood-stain{ display:none; }
@keyframes bloodBloom{
  0%{ opacity:0; transform:scale(0.35) rotate(0deg); }
  12%{ opacity:.65; }
  50%{ opacity:.5; transform:scale(1) rotate(4deg); }
  88%{ opacity:.55; }
  100%{ opacity:0; transform:scale(1.15) rotate(-3deg); }
}

.blood-drip{
  position:absolute; top:-20px;
  width:3px; border-radius:2px;
  background:linear-gradient(180deg, rgba(184,16,42,0.85), rgba(120,10,25,0));
  animation:dripDown linear infinite;
}
body.theme-day .blood-drip{ display:none; }
@keyframes dripDown{
  0%{ transform:translateY(-40px); opacity:0; }
  10%{ opacity:.85; }
  100%{ transform:translateY(110vh); opacity:0; }
}

/* ===================== Top controls ===================== */
.top-controls{
  position:fixed; top:16px; left:16px;
  z-index:210;
  display:flex; gap:8px;
}

/* ===================== Banners ===================== */
.config-banner,.connection-banner{
  position:fixed; top:0; left:0; right:0;
  z-index:200;
  padding:10px 16px;
  text-align:center;
  font-size:13px;
  font-weight:700;
  background:rgba(120,10,25,0.92);
  color:#fff;
}
.connection-banner{ background:rgba(120,80,10,0.92); }
.hidden{ display:none !important; }

/* ===================== Screens ===================== */
.screen{
  position:fixed; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:1;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s ease, transform .5s ease;
}
.screen.active{
  display:flex;
  opacity:1;
  transform:translateY(0);
}

/* ===================== Glass card ===================== */
.glass-card{
  position:relative;
  width:100%; max-width:440px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:28px;
  padding:42px 32px;
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 25px 60px var(--shadow-blood), inset 0 1px 0 rgba(255,255,255,0.6);
  text-align:center;
}
.wide-card{ max-width:520px; }

.eyebrow{
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin:0 0 8px; opacity:.9;
}
.brand-title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.2rem,7vw,3.2rem);
  letter-spacing:4px;
  margin:0 0 10px;
  color:var(--ink);
  text-shadow:0 2px 10px rgba(120,10,25,0.15);
}
.brand-title.small{ font-size:clamp(1.6rem,5vw,2.1rem); }
.brand-sub{
  font-size:14px; color:var(--ink-mute); margin:0 0 26px; line-height:1.6;
}

/* ===================== Inputs ===================== */
.glass-input{
  width:100%;
  padding:14px 18px;
  border-radius:16px;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.6);
  color:var(--ink);
  font-size:15px;
  margin-bottom:16px;
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.glass-input::placeholder{ color:var(--ink-mute); opacity:.7; }
.glass-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(184,16,42,0.15); }
.code-input{
  text-align:center;
  font-size:28px;
  letter-spacing:12px;
  font-weight:800;
}
.error-text{
  color:var(--accent);
  font-size:13px;
  font-weight:700;
  margin:-6px 0 14px;
}

/* ===================== Buttons ===================== */
.glass-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  padding:15px 26px;
  border-radius:18px;
  border:1px solid var(--glass-border);
  background:linear-gradient(135deg, rgba(255,255,255,0.7), rgba(200,60,70,0.14));
  color:var(--ink);
  font-weight:700; font-size:15px;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 26px var(--shadow-blood), inset 0 1px 0 rgba(255,255,255,0.7);
  transition:transform .22s ease, box-shadow .22s ease, opacity .2s ease;
  margin-bottom:12px;
  cursor:pointer;
}
.glass-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 32px var(--shadow-blood); }
.glass-btn:active{ transform:translateY(0) scale(0.97); }
.glass-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.glass-btn.primary-btn{
  background:linear-gradient(135deg, var(--accent-deep), var(--accent));
  border-color:rgba(255,150,160,0.5);
  color:#fff3ee;
}
.glass-btn.ghost{ background:rgba(255,255,255,0.35); }
.glass-btn.wide{ width:100%; }
.lobby-buttons{ display:flex; flex-direction:column; }
.text-btn{
  background:none; border:none; color:var(--ink-mute);
  font-size:13px; margin-top:10px; cursor:pointer; text-decoration:underline;
}
.glass-icon-btn{
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--glass-border);
  background:var(--glass-strong);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px var(--shadow-blood);
}
.glass-icon-btn.small{ width:38px;height:38px; flex-shrink:0; }

/* ===================== Room screen ===================== */
.room-code{
  font-family:var(--font-display);
  font-size:3.2rem; font-weight:900; letter-spacing:14px;
  color:var(--accent);
  text-shadow:0 2px 12px rgba(184,16,42,0.2);
  margin-bottom:6px;
}
.player-list{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
  margin:18px 0 8px;
  max-height:180px;
  overflow-y:auto;
}
.player-chip{
  display:flex; align-items:center; gap:6px;
  padding:8px 14px;
  border-radius:50px;
  background:rgba(255,255,255,0.5);
  border:1px solid var(--glass-border);
  font-size:13px; font-weight:600;
}
.player-chip .crown{ color:#c9950f; }
.player-count-hint{ font-size:12px; color:var(--ink-mute); margin-bottom:18px; }

/* ===================== Role reveal ===================== */
.reveal-wrap{ text-align:center; z-index:2; }
.role-card{
  width:220px; height:300px;
  margin:20px auto;
  perspective:1200px;
}
.role-card-inner{
  position:relative;
  width:100%; height:100%;
  transition:transform 1s cubic-bezier(.3,.7,.3,1.15);
  transform-style:preserve-3d;
}
.role-card.flipped .role-card-inner{ transform:rotateY(180deg); }
.role-card-face{
  position:absolute; inset:0;
  border-radius:20px;
  backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--glass-border);
  box-shadow:0 20px 40px var(--shadow-blood);
  padding:18px;
  overflow:hidden;
}
.role-card-back{
  background:linear-gradient(160deg, #efe0c8, #e2c9a3);
}
.role-card-moon{ font-size:64px; animation:pulseGlow 2s ease-in-out infinite; filter:drop-shadow(0 0 10px rgba(184,16,42,0.35)); }
@keyframes pulseGlow{
  0%,100%{ filter:drop-shadow(0 0 6px rgba(184,16,42,0.25)); }
  50%{ filter:drop-shadow(0 0 16px rgba(184,16,42,0.5)); }
}
.role-card-front{
  background:linear-gradient(160deg, #fff8ef, #f3ddd0);
  transform:rotateY(180deg);
}
.role-card-front-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
.role-card-front-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,4,6,0) 40%, rgba(20,4,6,0.88) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px;
  text-align:center;
}
.role-card-emoji{ font-size:52px; margin-bottom:6px; }
.role-name{ font-family:var(--font-display); font-size:1.5rem; margin:0 0 8px; color:#fff3ee; }
.role-desc{ font-size:13px; color:var(--text-onDark-mute); line-height:1.5; }
.reveal-hint{ font-size:13px; color:var(--ink-mute); margin-top:14px; }

/* ===================== Game screen ===================== */
#screen-game{ align-items:flex-start; padding:16px; }
.game-topbar{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:16px;
  padding:10px 22px;
  border-radius:50px;
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(14px);
  z-index:20;
  font-weight:700; font-size:14px;
}
.game-timer{
  min-width:34px; text-align:center;
  font-family:var(--font-display);
  color:var(--accent);
  font-size:1.1rem;
}
.my-role-badge{
  position:fixed; top:14px; right:14px;
  display:flex; align-items:center; gap:6px;
  padding:8px 14px;
  border-radius:50px;
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  font-size:13px; font-weight:700;
  z-index:20;
}
.alive-dot{ width:8px;height:8px;border-radius:50%; background:#2fa652; box-shadow:0 0 6px #2fa652; }
.alive-dot.dead{ background:#999; box-shadow:none; }

.system-banner-zone{
  position:fixed; top:70px; left:50%; transform:translateX(-50%);
  z-index:30;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
}
.system-banner{
  padding:10px 22px;
  border-radius:14px;
  background:rgba(30,4,8,0.82);
  border:1px solid rgba(255,150,160,0.3);
  color:var(--text-onDark);
  font-size:13px; font-weight:700;
  backdrop-filter:blur(10px);
  animation:bannerIn .5s ease forwards, bannerOut .5s ease 3.2s forwards;
  white-space:nowrap;
}
@keyframes bannerIn{ from{ opacity:0; transform:translateY(-16px) scale(.9);} to{ opacity:1; transform:translateY(0) scale(1);} }
@keyframes bannerOut{ to{ opacity:0; transform:translateY(-10px) scale(.95);} }

.game-body{
  width:100%;
  max-width:900px;
  margin:80px auto 0;
  display:flex; flex-direction:column; gap:16px;
  z-index:2;
}
.players-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(110px,1fr));
  gap:12px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:22px;
  padding:16px;
  backdrop-filter:blur(14px);
  max-height:40vh;
  overflow-y:auto;
}
.player-tile{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 8px;
  border-radius:16px;
  background:rgba(255,255,255,0.4);
  border:1px solid transparent;
  text-align:center;
  cursor:default;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.player-tile.selectable{ cursor:pointer; }
.player-tile.selectable:hover{ transform:translateY(-3px); border-color:var(--accent-soft); background:rgba(184,16,42,0.12); }
.player-tile.selected{ border-color:var(--accent); background:rgba(184,16,42,0.22); }
.player-tile.dead{ opacity:.4; filter:grayscale(0.6); }
.player-avatar{ font-size:26px; }
.player-name{ font-size:12px; font-weight:700; }
.vote-count{
  position:absolute; top:4px; right:8px;
  font-size:11px; font-weight:800;
  color:var(--accent);
}
.host-tag{ font-size:9px; color:#c9950f; }

.chat-panel{
  display:flex; flex-direction:column;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:22px;
  padding:12px;
  backdrop-filter:blur(14px);
  max-height:26vh;
}
.chat-messages{
  flex:1; overflow-y:auto; padding:6px 8px; font-size:13px;
  display:flex; flex-direction:column; gap:6px;
  margin-bottom:8px;
}
.chat-msg strong{ color:var(--accent); }
.chat-form{ display:flex; gap:8px; }
.chat-form .glass-input{ margin-bottom:0; }

.action-hint{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  padding:10px 20px;
  border-radius:50px;
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  font-size:13px; font-weight:700;
  z-index:20;
  max-width:90vw;
  text-align:center;
}

/* ===================== End screen ===================== */
.end-emoji{ font-size:60px; margin-bottom:8px; animation:popIn .6s ease; }
@keyframes popIn{ from{ transform:scale(0); } 60%{ transform:scale(1.2);} to{ transform:scale(1);} }

/* ===================== Death modal ===================== */
.modal{
  position:fixed; inset:0; z-index:150;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .4s ease;
}
.modal.hidden{ opacity:0; pointer-events:none; }
.modal-overlay{ position:absolute; inset:0; background:rgba(20,4,6,0.72); backdrop-filter:blur(6px); }
.death-content{ position:relative; text-align:center; padding:20px; }
.death-title{
  font-family:var(--font-blood);
  font-size:clamp(2.4rem,10vw,4rem);
  color:var(--accent-soft);
  text-shadow:0 0 24px rgba(217,70,87,0.85), 0 0 60px rgba(217,70,87,0.5);
  animation:dripText 1.8s ease-in-out infinite alternate;
  margin:0;
}
@keyframes dripText{ 0%{ text-shadow:0 0 18px rgba(217,70,87,0.7);} 100%{ text-shadow:0 0 40px rgba(217,70,87,1);} }
.death-sub{ color:var(--text-onDark-mute); margin-top:10px; font-size:14px; }

/* ===================== Peran modal — flip cards ===================== */
.letter-paper{
  position:relative;
  max-width:520px; width:100%; max-height:85vh; overflow-y:auto;
  background:rgba(28,6,9,0.94);
  border:1px solid rgba(255,150,160,0.25);
  border-radius:20px;
  padding:34px 22px 26px;
  text-align:left;
  box-shadow:0 30px 60px rgba(0,0,0,0.4);
}
.letter-heading{ font-family:var(--font-display); color:var(--text-onDark); text-align:center; margin:0 0 6px; }
.letter-subheading{ font-size:12px; color:var(--text-onDark-mute); text-align:center; margin:0 0 22px; }

.peran-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.peran-card{
  height:220px;
  perspective:1000px;
  cursor:pointer;
}
.peran-card-inner{
  position:relative; width:100%; height:100%;
  transition:transform .7s cubic-bezier(.3,.7,.3,1.1);
  transform-style:preserve-3d;
}
.peran-card.flipped .peran-card-inner{ transform:rotateY(180deg); }
.peran-card-face{
  position:absolute; inset:0;
  border-radius:14px;
  backface-visibility:hidden;
  overflow:hidden;
  border:1px solid rgba(255,150,160,0.3);
  box-shadow:0 10px 22px rgba(0,0,0,0.35);
}
.peran-card-front{ display:flex; }
.peran-card-front img{
  width:100%; height:100%; object-fit:cover;
  object-position:top center;
}
.peran-card-front-label{
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 10px 10px;
  background:linear-gradient(180deg, rgba(10,2,3,0) 0%, rgba(10,2,3,0.92) 90%);
  display:flex; align-items:center; gap:6px;
}
.peran-card-front-label .emj{ font-size:16px; }
.peran-card-front-label span{ font-family:var(--font-display); font-size:13px; font-weight:700; color:#fff3ee; }
.peran-card-back{
  transform:rotateY(180deg);
  background:linear-gradient(160deg, #2a0509, #170305);
  padding:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.peran-card-back-emoji{ font-size:26px; margin-bottom:6px; }
.peran-card-back h3{ font-family:var(--font-display); font-size:1rem; margin:0 0 6px; color:#fff3ee; }
.peran-card-back p{ font-size:11.5px; line-height:1.5; color:var(--text-onDark-mute); margin:0; }
.peran-hint{ text-align:center; font-size:11px; color:var(--text-onDark-mute); margin-top:16px; opacity:.8; }

.close-modal{
  position:absolute; top:12px; right:14px;
  width:30px;height:30px; border-radius:50%;
  border:none; background:rgba(217,70,87,0.35); color:var(--text-onDark);
  font-size:18px; display:flex; align-items:center; justify-content:center;
  z-index:5;
}

@media (max-width:480px){
  .glass-card{ padding:32px 20px; }
  .room-code{ font-size:2.4rem; letter-spacing:10px; }
  .game-topbar{ gap:10px; font-size:12px; padding:8px 16px; }
  .peran-card{ height:190px; }
}