:root {
  --bg: #0d0a08;
  --bg-panel: #1a1310;
  --bg-panel-2: #241914;
  --border: #3a2820;
  --accent: #ff7a1a;        /* Naruto orange */
  --accent-2: #c93810;       /* deep ember */
  --good: #4a9eff;
  --evil: #d63030;
  --text: #f3e9dc;
  --text-dim: #9a8a78;
  --shadow: 0 6px 24px rgba(0,0,0,0.5);
  --shadow-strong: 0 10px 40px rgba(255,122,26,0.25);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top, rgba(255,122,26,0.08), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(201,56,16,0.06), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  transition: background 1.2s ease;
}

/* Phase-driven body background (night = current dark, day = lighter warm, vote = reddish) */
body[data-phase="day"] {
  --bg: #3a2e1f;
  background:
    radial-gradient(ellipse at top, rgba(255,200,120,0.20), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(255,170,80,0.10), transparent 60%),
    var(--bg);
}
body[data-phase="vote"] {
  --bg: #3a1714;
  background:
    radial-gradient(ellipse at top, rgba(214,48,48,0.22), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(180,30,30,0.18), transparent 60%),
    var(--bg);
}

/* End-of-game backgrounds: blue if Shinobi (good) won, red if Assassins (evil) won */
body[data-phase="end"][data-winner="good"] {
  --bg: #0a1530;
  background:
    radial-gradient(ellipse at top, rgba(74,158,255,0.28), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(50,100,200,0.20), transparent 60%),
    var(--bg);
}
body[data-phase="end"][data-winner="evil"] {
  --bg: #2a0606;
  background:
    radial-gradient(ellipse at top, rgba(214,48,48,0.32), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(180,30,30,0.24), transparent 60%),
    var(--bg);
}

#app {
  width: 100vw;
  height: 100vh;
  padding: 16px 20px;
  margin: 0;
  overflow: hidden;
}

.view { animation: fadeIn 0.3s ease; height: 100%; }
.hidden { display: none !important; }

/* Entry view: form on top, role gallery below. Full-width container so the
   browser's default scrollbar lands at the right edge of the screen. */
#view-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  overflow-y: auto;
  width: 100%;
  height: 100%;
}
#view-entry .entry-form { width: 100%; max-width: 500px; }

.role-gallery {
  width: 100%;
  max-width: 900px;
  margin: 24px auto 0;
}
.gallery-title {
  text-align: center;
  margin: 0 0 16px;
  color: var(--accent);
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.role-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* Gallery card = just the image, with hover zoom */
.gallery-card {
  width: 100%;
  aspect-ratio: 760 / 800;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-panel-2);
  border-radius: 10px;
  border: 2px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: default;
}
.gallery-card:hover {
  transform: scale(1.08);
  border-color: var(--accent);
  box-shadow: 0 14px 32px rgba(255,122,26,0.35);
  z-index: 2;
}
.gallery-card.team-evil { border-color: var(--evil); }
.gallery-card.team-good { border-color: var(--good); }
@media (max-width: 720px) {
  .role-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Lobby uses the full width */
#view-lobby {
  max-width: 1280px;
  margin: 0 auto;
  overflow-y: auto;
}

/* Game view: grid layout, exact fit, no scroll. Every row has a stable height
   so the player-table never shifts when something appears/disappears.
   New order: topbar → table → action → host → prompt → hand. The prompt is now a
   slim text strip just above the hand instead of a big panel at the top. */
#view-game {
  display: grid;
  grid-template-rows: 56px 1fr 72px 40px 48px auto;
  /*                  topbar table action host prompt hand */
  gap: 8px;
  position: relative;
  height: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

/* End view */
#view-end {
  max-width: 900px;
  margin: 0 auto;
  overflow-y: auto;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Title */
.title {
  font-size: 48px;
  text-align: center;
  margin: 32px 0 4px;
  letter-spacing: 4px;
  font-weight: 700;
  text-shadow: 0 0 30px rgba(255,122,26,0.4);
}
.title .accent { color: var(--accent); }
.subtitle {
  text-align: center;
  color: var(--text-dim);
  margin: 0 0 32px;
  font-style: italic;
}

/* Topbar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.topbar h2 { margin: 0; color: var(--accent); font-size: 28px; }
.room-code {
  color: var(--text-dim);
  font-family: monospace;
  font-size: 14px;
  margin-top: 4px;
}
.room-code span { color: var(--accent); font-weight: bold; letter-spacing: 2px; }
.day-indicator { color: var(--text-dim); font-style: italic; }

/* Panels */
.card-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card-panel h3 {
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--accent);
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.card-panel h3 small {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: normal;
}

/* Inputs */
label {
  display: block;
  margin-bottom: 12px;
  color: var(--text-dim);
  font-size: 14px;
}
input[type="text"], input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  margin-top: 4px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
}
input[type="text"]:focus, input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,122,26,0.2);
}
input#entry-code { text-transform: uppercase; letter-spacing: 4px; font-family: monospace; }

/* Buttons */
button {
  padding: 10px 20px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
button:hover:not(:disabled) {
  background: var(--bg-panel);
  border-color: var(--accent);
}
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: var(--accent);
  color: white;
}
button.primary:hover:not(:disabled) {
  box-shadow: var(--shadow-strong);
  transform: translateY(-1px);
}
button.danger {
  background: var(--evil);
  border-color: var(--evil);
  color: white;
}

.row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.row input { flex: 1; }
.divider {
  text-align: center;
  color: var(--text-dim);
  margin: 16px 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Lobby */
.lobby-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .lobby-grid { grid-template-columns: 1fr; }
}
.player-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.player-list li {
  padding: 10px 12px;
  background: var(--bg-panel-2);
  border-radius: 6px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 3px solid var(--border);
}
.player-list li.dead {
  opacity: 0.5;
  text-decoration: line-through;
  border-left-color: var(--evil);
}
.player-list li.you { border-left-color: var(--accent); }
.player-list li.host-badge::after {
  content: 'HOST';
  font-size: 10px;
  background: var(--accent);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  letter-spacing: 1px;
}
.player-list li.bot-badge::before {
  content: 'BOT';
  font-size: 10px;
  background: #4a3a30;
  color: var(--text-dim);
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 8px;
  letter-spacing: 1px;
}

.bot-controls {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.bot-controls .hint { margin: 0; }
.player-list li.disconnected { opacity: 0.5; }
.player-list li .role-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.role-badge.good { background: rgba(74,158,255,0.2); color: var(--good); }
.role-badge.evil { background: rgba(214,48,48,0.2); color: var(--evil); }

/* Role config */
.role-config {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.role-config label {
  margin: 0;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.role-config label img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.role-config input[type="number"] {
  margin: 0;
  text-align: center;
  padding: 6px;
}
.sum-row {
  text-align: right;
  color: var(--text-dim);
  margin-bottom: 12px;
  font-family: monospace;
}
.sum-row.ok { color: var(--good); }
.sum-row.bad { color: var(--evil); }

/* Audio controls (fixed top-right) */
.audio-controls {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 100;
}
.audio-toggle {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.audio-toggle:hover { background: var(--bg-panel-2); }
.audio-toggle.open { background: var(--accent); color: white; }
.audio-panel {
  position: absolute;
  top: 50px;
  right: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  min-width: 220px;
  box-shadow: var(--shadow-strong);
}
.audio-panel label {
  display: block;
  margin: 0 0 14px;
  color: var(--text);
}
.audio-panel label:last-child { margin-bottom: 0; }
.audio-panel label span {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.audio-panel label span em {
  font-style: normal;
  color: var(--accent);
  font-family: monospace;
}
.audio-panel input[type="range"] {
  width: 100%;
  padding: 0;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  background: transparent;
  border: none;
}

/* Timer config (lobby) */
.timer-config {
  margin: 16px 0;
  padding: 14px;
  background: var(--bg-panel-2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.timer-config h4 {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
}
.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.timer-durations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.timer-durations.disabled { opacity: 0.4; pointer-events: none; }
.timer-durations label {
  margin: 0;
  font-size: 13px;
}
.timer-durations input { padding: 6px 10px; }

/* Countdown chip (topbar) */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 14px;
  background: var(--bg-panel-2);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-family: monospace;
  min-width: 70px;
  box-shadow: 0 0 12px rgba(255,122,26,0.15);
  transition: all 0.2s;
}
.countdown .label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.countdown .time {
  font-size: 22px;
  font-weight: bold;
  color: var(--accent);
  line-height: 1;
}
.countdown.urgent {
  border-color: var(--evil);
  box-shadow: 0 0 16px rgba(214,48,48,0.5);
  animation: pulseRed 1s infinite;
}
.countdown.urgent .time { color: var(--evil); }
@keyframes pulseRed {
  0%, 100% { box-shadow: 0 0 16px rgba(214,48,48,0.5); }
  50% { box-shadow: 0 0 28px rgba(214,48,48,0.8); }
}

/* Topbar role tag (replaces your-card-mini) */
.your-role-tag {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.your-role-tag .role-name {
  font-size: 18px;
  font-weight: bold;
  color: var(--accent);
}
.your-role-tag .team-tag {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ============================================================
   Card table (player grid)
   ============================================================ */
.player-table {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;     /* last (incomplete) row centers under the full rows */
  align-content: flex-start;   /* anchor cards to top */
  gap: 38px 18px;              /* row gap >22px to clear the name-tag overflow */
  padding: 20px 18px 32px;     /* extra bottom padding so last row's name isn't clipped */
  margin: 0 auto;              /* center horizontally when JS sets max-width */
  background:
    radial-gradient(ellipse at center, rgba(60, 35, 22, 0.55) 0%, transparent 70%),
    var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.6);
  overflow: hidden;
  min-height: 0;
}

.player-card {
  position: relative;
  flex: 0 0 auto;
  /* Width is computed by sizeCards() in JS — fits 5 per row while also fitting
     vertically in the available table height. Falls back to 140px if JS is slow. */
  width: var(--card-width, 140px);
  aspect-ratio: 760 / 800;   /* actual card art ratio */
  perspective: 1200px;
  cursor: default;
  user-select: none;
}

.player-card .flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1), filter 0.4s ease;
  transform-style: preserve-3d;
}
.player-card.flipped .flipper {
  transform: rotateY(180deg);
}

.player-card .face {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-panel-2);
  border: 2px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  overflow: hidden;
}
.player-card .face.back {
  background-image: url('/assets/back.png');
}
.player-card .face.front {
  transform: rotateY(180deg);
}

.player-card .name-tag {
  position: absolute;
  bottom: -22px;
  left: 0; right: 0;
  text-align: center;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.player-card .name-tag .host-tag {
  display: inline-block;
  font-size: 9px;
  background: var(--accent);
  color: white;
  padding: 1px 4px;
  border-radius: 2px;
  margin-left: 4px;
  letter-spacing: 1px;
  vertical-align: middle;
}
.player-card .name-tag .bot-tag {
  display: inline-block;
  font-size: 9px;
  background: #4a3a30;
  color: var(--text-dim);
  padding: 1px 4px;
  border-radius: 2px;
  margin-right: 4px;
  letter-spacing: 1px;
  vertical-align: middle;
}

/* You — your own card on the table has an orange ring */
.player-card.is-you .face {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 4px 16px rgba(255,122,26,0.3);
}

/* Targetable cards (during your night turn or vote) */
.player-card.targetable .flipper { cursor: pointer; }
.player-card.targetable .face {
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.player-card.targetable:hover .flipper {
  transform: translateY(-8px);
}
.player-card.targetable:hover .face {
  border-color: var(--accent);
  box-shadow: 0 12px 24px rgba(255,122,26,0.35), 0 0 0 1px var(--accent);
}
.player-card.targetable.flipped:hover .flipper {
  transform: rotateY(180deg) translateY(-8px);
}

/* Selected target */
.player-card.selected .face {
  border-color: var(--accent);
  box-shadow: 0 0 24px rgba(255,122,26,0.7), 0 0 0 2px var(--accent);
}

/* Dead — desaturated back image + red X overlay (no flip) */
.player-card.dead .flipper {
  filter: grayscale(0.7) brightness(0.5);
}
.player-card.dead .name-tag {
  text-decoration: line-through;
  color: var(--text-dim);
}
.player-card.dead::after {
  content: '✕';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  color: var(--evil);
  text-shadow: 0 0 14px rgba(0,0,0,0.8);
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}
.player-card.dead.targetable { cursor: default; }
.player-card.dead.targetable:hover .flipper { transform: none; filter: grayscale(0.7) brightness(0.5); }

/* Vote / tally badge on a card */
.player-card .vote-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 14px;
  background: var(--accent-2);
  color: white;
  font-weight: bold;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  border: 2px solid var(--bg);
  z-index: 2;
}

/* Disconnected dimming */
.player-card.disconnected .face { opacity: 0.5; }

/* ============================================================
   Your hand (the pinned card at the bottom) — centered horizontally
   ============================================================ */
.your-hand {
  padding: 12px 16px;
  background: linear-gradient(180deg, transparent, rgba(255,122,26,0.05));
  border-top: 2px solid var(--border);
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.your-hand .hand-info {
  flex: 0 1 auto !important;
  max-width: 360px;
  text-align: left;
}
.your-hand .hand-card {
  height: 110px;
  aspect-ratio: 760 / 800;
  flex-shrink: 0;
  border-radius: 10px;
  border: 3px solid var(--accent);
  box-shadow: var(--shadow-strong);
  background-size: cover;
  background-position: center;
  background-color: var(--bg-panel-2);
}
.your-hand .hand-info { flex: 1; min-width: 0; }
.your-hand .hand-info .hand-role {
  font-size: 24px;
  font-weight: bold;
  color: var(--accent);
  margin: 0 0 2px;
}
.your-hand .hand-info .hand-team {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 8px;
}
.your-hand .hand-info .hand-status {
  font-size: 14px;
  color: var(--text-dim);
  font-style: italic;
}
.your-hand .hand-info .hand-status.dead {
  color: var(--evil);
  font-weight: bold;
  font-style: normal;
}

/* Death overlay — centered modal popup with animated card reveal */
.death-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(60, 0, 0, 0.65), rgba(0,0,0,0.85));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: deathBgIn 0.45s ease forwards;
}
.death-overlay.fading {
  animation: deathBgOut 0.5s ease forwards;
}
@keyframes deathBgIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes deathBgOut { from { opacity: 1; } to { opacity: 0; } }

.death-overlay-content {
  text-align: center;
  padding: 28px 40px;
  max-width: 90vw;
}
.death-title {
  font-size: 32px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--evil);
  margin: 0 0 20px;
  text-shadow: 0 0 30px rgba(214,48,48,0.6);
  animation: deathTitleIn 0.7s ease;
}
@keyframes deathTitleIn {
  0%   { opacity: 0; transform: translateY(-20px) scale(0.9); }
  100% { opacity: 1; transform: none; }
}

.death-cards {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.death-cards .dead-card-wrap {
  text-align: center;
  animation: deathCardSlam 0.9s cubic-bezier(0.2, 1.2, 0.3, 1) backwards;
}
.death-cards .dead-card-wrap:nth-child(2) { animation-delay: 0.15s; }
.death-cards .dead-card-wrap:nth-child(3) { animation-delay: 0.3s; }
.death-cards .dead-card {
  width: 220px;
  aspect-ratio: 760 / 800;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-panel-2);
  border: 3px solid var(--evil);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(214,48,48,0.55), 0 0 60px rgba(214,48,48,0.3);
  margin: 0 auto 10px;
  position: relative;
  filter: grayscale(0.5) brightness(0.55);
}
.death-cards .dead-card::after {
  content: '✕';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 120px;
  color: var(--evil);
  text-shadow: 0 0 22px rgba(0,0,0,0.95);
  opacity: 0.85;
  filter: none;
}
.death-cards .dead-name {
  font-size: 20px;
  font-weight: bold;
  color: var(--text);
  margin: 0;
  letter-spacing: 1px;
}
@keyframes deathCardSlam {
  0%   { opacity: 0; transform: scale(0.3) translateY(80px) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.1) translateY(0) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
}

.death-msg {
  color: var(--text-dim);
  font-style: italic;
  margin: 16px 0 18px;
}
.death-dismiss {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 28px;
  font-size: 14px;
  letter-spacing: 1px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
}
.death-dismiss:hover { background: var(--accent-2); }

/* ============================================================
   Peaceful Dawn variant (shown when no one died last night)
   ============================================================ */
.death-overlay.peaceful {
  background: radial-gradient(ellipse at center, rgba(255, 200, 100, 0.45), rgba(40, 25, 10, 0.85));
}
.death-overlay.peaceful .death-title {
  color: #ffd97a;
  text-shadow: 0 0 30px rgba(255, 220, 120, 0.7), 0 0 60px rgba(255, 180, 80, 0.4);
}
.death-overlay.peaceful .death-msg {
  color: #ffe8b8;
  font-style: italic;
  font-size: 16px;
}
.death-overlay.peaceful .death-dismiss {
  background: linear-gradient(135deg, #f5b94a, #d68a1a);
  color: #2a1908;
  font-weight: bold;
}
.death-overlay.peaceful .death-dismiss:hover {
  background: linear-gradient(135deg, #ffce63, #e89c2a);
}

.peaceful-art {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 10px auto 24px;
  animation: deathCardSlam 0.9s cubic-bezier(0.2, 1.2, 0.3, 1);
}
.peaceful-sun {
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8d4 0%, #ffe28a 35%, #ffb84a 70%, transparent 100%);
  box-shadow:
    0 0 60px rgba(255, 220, 120, 0.8),
    0 0 120px rgba(255, 200, 80, 0.5),
    0 0 200px rgba(255, 180, 60, 0.25);
  animation: sunPulse 2.4s ease-in-out infinite;
}
.peaceful-rays {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      rgba(255, 220, 120, 0.0) 0deg,
      rgba(255, 220, 120, 0.18) 8deg,
      rgba(255, 220, 120, 0.0) 16deg,
      rgba(255, 220, 120, 0.0) 30deg,
      rgba(255, 220, 120, 0.18) 38deg,
      rgba(255, 220, 120, 0.0) 46deg,
      rgba(255, 220, 120, 0.0) 60deg,
      rgba(255, 220, 120, 0.18) 68deg,
      rgba(255, 220, 120, 0.0) 76deg,
      rgba(255, 220, 120, 0.0) 90deg,
      rgba(255, 220, 120, 0.18) 98deg,
      rgba(255, 220, 120, 0.0) 106deg,
      rgba(255, 220, 120, 0.0) 120deg,
      rgba(255, 220, 120, 0.18) 128deg,
      rgba(255, 220, 120, 0.0) 136deg,
      rgba(255, 220, 120, 0.0) 150deg,
      rgba(255, 220, 120, 0.18) 158deg,
      rgba(255, 220, 120, 0.0) 166deg,
      rgba(255, 220, 120, 0.0) 180deg,
      rgba(255, 220, 120, 0.18) 188deg,
      rgba(255, 220, 120, 0.0) 196deg,
      rgba(255, 220, 120, 0.0) 210deg,
      rgba(255, 220, 120, 0.18) 218deg,
      rgba(255, 220, 120, 0.0) 226deg,
      rgba(255, 220, 120, 0.0) 240deg,
      rgba(255, 220, 120, 0.18) 248deg,
      rgba(255, 220, 120, 0.0) 256deg,
      rgba(255, 220, 120, 0.0) 270deg,
      rgba(255, 220, 120, 0.18) 278deg,
      rgba(255, 220, 120, 0.0) 286deg,
      rgba(255, 220, 120, 0.0) 300deg,
      rgba(255, 220, 120, 0.18) 308deg,
      rgba(255, 220, 120, 0.0) 316deg,
      rgba(255, 220, 120, 0.0) 330deg,
      rgba(255, 220, 120, 0.18) 338deg,
      rgba(255, 220, 120, 0.0) 346deg
    );
  animation: raysSpin 30s linear infinite;
}
@keyframes sunPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.05); filter: brightness(1.1); }
}
@keyframes raysSpin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

@media (max-width: 720px) {
  .your-hand .hand-card { height: 80px; }
  .your-hand .hand-info .hand-role { font-size: 18px; }
  .player-table { gap: 12px 10px; padding: 12px 8px; }
}

/* Prompt area — slim text strip above the hand. No panel, just nicely styled text. */
.prompt-area {
  background: transparent;
  border: none;
  padding: 0 24px;
  margin: 0;
  box-shadow: none;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
  text-align: center;
}
.prompt-area.idle { opacity: 0.65; font-style: italic; }
.prompt-area h3 {
  margin: 0;
  font-size: 16px;
  color: var(--accent);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255,122,26,0.35);
}
.prompt-area p { margin: 0; font-size: 13px; color: var(--text-dim); }
.prompt-area .sep {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
  flex-shrink: 0;
}
.prompt-area.idle {
  border-color: var(--border);
  box-shadow: var(--shadow);
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
}
.prompt-area h3 {
  margin-top: 0;
  color: var(--accent);
}
.target-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.target-btn {
  padding: 12px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  color: var(--text);
}
.target-btn:hover { border-color: var(--accent); }
.target-btn.selected {
  border-color: var(--accent);
  background: rgba(255,122,26,0.15);
}
.target-btn .vote-tag {
  display: inline-block;
  font-size: 11px;
  color: var(--accent);
  margin-top: 4px;
}

/* Game players */
.player-list.game li .vote-count {
  font-size: 12px;
  color: var(--accent);
  font-family: monospace;
}

/* Reveal list (end screen) */
.player-list.reveal li {
  display: flex;
  justify-content: space-between;
  padding: 12px;
}
.player-list.reveal li img {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: middle;
}

/* Host controls — fixed-height row in the grid (empty → empty, populated → button row) */
.host-controls {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.host-controls:not(:empty) {
  background: var(--bg-panel);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  padding: 6px 12px;
}
.host-controls .label {
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Action area — fixed slot under the cards. Hosts lock button (assassin night)
   or skip-vote button (vote phase). Stays empty otherwise so layout is stable. */
.action-area {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
}
.lock-icon-btn,
.skip-icon-btn {
  width: 60px;
  height: 60px;
  padding: 0;
  border-radius: 50%;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-strong);
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lock-icon-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 2px solid var(--accent);
  color: white;
}
.lock-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 24px rgba(255,122,26,0.5);
}
.lock-icon-btn:disabled {
  background: var(--bg-panel-2);
  border-color: var(--good);
  color: var(--good);
  cursor: not-allowed;
}
.skip-icon-btn {
  background: var(--bg-panel-2);
  border: 2px solid var(--text-dim);
  color: var(--text-dim);
  font-size: 13px;
  letter-spacing: 2px;
}
.skip-icon-btn:hover {
  background: var(--bg-panel);
  border-color: var(--text);
  color: var(--text);
  transform: translateY(-2px);
}
.skip-icon-btn.selected {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255,122,26,0.12);
}

/* Seer-revealed card (visual cue: cyan glow on top of the flip) */
.player-card.seer-revealed .face {
  box-shadow: 0 0 0 2px #4af0e6, 0 6px 20px rgba(74,240,230,0.45);
  border-color: #4af0e6;
}

/* Fellow assassin (only the viewer's other assassins) — red team glow */
.player-card.fellow-assassin .face {
  border-color: var(--evil);
  box-shadow: 0 0 0 2px var(--evil), 0 6px 22px rgba(214,48,48,0.5);
}

/* Misc */
.error { color: var(--evil); margin: 8px 0 0; min-height: 1em; font-size: 14px; }
.hint { color: var(--text-dim); font-size: 13px; margin: -8px 0 12px; }
.win-good { color: var(--good); }
.win-evil { color: var(--evil); }