/* ============================================================
   Mafia — light theme
   White surfaces, red trim, full-bleed layout that fills the
   viewport rather than sitting in a narrow centred column.
   ============================================================ */

:root {
  /* Even the "neutrals" are warmed toward red so the whole page reads red-tinted. */
  --bg: #f8eff0;
  --bg-2: #f0dedf;

  --card: #ffffff;
  --panel: #fdf8f8;
  --panel-2: #fbf1f2;

  --line: #ecdcde;
  --line-strong: #dcc2c5;

  --text: #1b1416;
  --muted: #6b5b5e;
  --faint: #9a888b;

  --red: #d92222;
  --red-hi: #ef3b3b;
  --red-dark: #a81717;
  --red-soft: #fdeaea;
  --red-line: #f3b9b9;

  --amber: #b45309;
  --amber-soft: #fef3e2;
  --amber-line: #f4d9a8;

  --green: #15803d;
  --green-soft: #e9f7ee;
  --green-line: #a7dcbb;

  --blue: #1d4ed8;
  --blue-soft: #eaf0fe;
  --blue-line: #b6cbf7;

  --purple: #6d28d9;
  --purple-soft: #f1ebfd;
  --purple-line: #cdb4f2;

  --radius-lg: 18px;
  --radius: 14px;
  --radius-sm: 10px;

  --shadow-card: 0 1px 3px rgba(16, 24, 40, 0.05), 0 18px 48px -20px rgba(16, 24, 40, 0.28);
  --shadow-pop: 0 24px 60px -16px rgba(16, 24, 40, 0.32);
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Ambient wash behind everything — retinted per phase (see body[data-phase]). */
  --glow: rgba(217, 34, 34, 0.18);

  color-scheme: light;
}

/* The phase still shifts the light, but it now sits on top of a red base rather
   than replacing it — night/day read as a tint, not a different theme. */
body[data-phase="night"] { --glow: rgba(150, 60, 90, 0.18); }
body[data-phase="day"]   { --glow: rgba(226, 96, 50, 0.18); }

* { box-sizing: border-box; }

/* Everything scales off this — the whole UI is deliberately larger than default. */
html { font-size: 17px; }

body {
  margin: 0;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 620px at 50% -8%, var(--glow), transparent 68%),
    radial-gradient(900px 700px at 100% 100%, rgba(217, 34, 34, 0.10), transparent 62%),
    radial-gradient(800px 600px at 0% 90%, rgba(217, 34, 34, 0.07), transparent 60%),
    linear-gradient(180deg, #fff6f6, var(--bg) 42%, var(--bg-2));
}

/* ---------- full-bleed shell ----------
   The app fills the window: no narrow max-width, and each view stretches so its
   card + panels grow with the screen instead of stranding whitespace at the bottom. */
#app {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
}

.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.hidden { display: none !important; }

/* ---------- surfaces ---------- */

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--card);
  border: 1px solid var(--red-line);
  border-top: 8px solid var(--red);   /* the trim */
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  box-shadow: var(--shadow-card);
}

/* Centred views (landing, join, end) keep their content readable mid-screen
   while the card itself still fills the viewport. */
.card.center {
  align-items: center;
  justify-content: center;
}
.card.center > * {
  width: 100%;
  max-width: 960px;
}

.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--red-line);
  border-radius: var(--radius);
  padding: 20px;
  overflow: hidden;   /* keeps the red header band inside the rounded corners */
}

.center { text-align: center; }

/* ---------- type ---------- */

h1 {
  margin: 0 0 6px;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--red-dark);
}

h2 {
  margin: 0 0 16px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--red);
}

/* Every panel is capped with a solid red header band — the single biggest source of
   red on the page. Negative margins pull it out to the panel's edges, so it reads as
   part of the panel's frame rather than as extra padding (no added density). */
.panel > h2 {
  margin: -20px -20px 18px;
  padding: 13px 20px;
  background: linear-gradient(180deg, var(--red-hi), var(--red));
  border-radius: 13px 13px 0 0;
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(217, 34, 34, 0.5);
}

.subtitle {
  color: var(--muted);
  margin: 0 0 24px;
  font-size: 1.05rem;
  line-height: 1.5;
}

.hint {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 16px 0 6px;
}

/* ---------- inputs ---------- */

input[type="text"], input:not([type]), input[type="number"] {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--red-line);
  background: #fff;
  color: var(--text);
  font-size: 1.05rem;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder { color: var(--faint); }
input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-soft);
}

/* ---------- buttons ---------- */

/* Secondary buttons are red-on-white outlines by default (they used to be grey and only
   turned red on hover) and fill in solid red on hover. */
button {
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font-size: 0.95rem;
  font-weight: 650;
  font-family: inherit;
  background: #fff;
  color: var(--red);
  border: 1.5px solid var(--red-line);
  transition: transform 0.12s var(--ease), background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
button:hover:not(:disabled) {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(217, 34, 34, 0.7);
}
button:active:not(:disabled) { transform: translateY(0) scale(0.98); }
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--red-soft);
}

button.primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  width: 100%;
  margin-top: 20px;
  padding: 15px 18px;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 10px 24px -10px rgba(217, 34, 34, 0.75);
}
button.primary:hover:not(:disabled) {
  background: var(--red-hi);
  border-color: var(--red-hi);
  color: #fff;
  box-shadow: 0 14px 30px -10px rgba(217, 34, 34, 0.85);
}

button.ghost {
  background: transparent;
  border-color: var(--red-line);
  color: var(--red);
  margin-top: 18px;
  align-self: flex-start;
}
button.ghost:hover:not(:disabled) { color: #fff; }

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ---------- layout ---------- */

.landing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: left;
}
@media (max-width: 700px) {
  .landing-grid { grid-template-columns: 1fr; }
}

/* Join-via-link: form column stacks its (mutually exclusive) status panels; the grid
   keeps both columns top-aligned rather than stretching the short form to the legend. */
.join-link-grid { align-items: start; margin-top: 8px; }
.join-link-form-col { display: flex; flex-direction: column; gap: 20px; }
.join-link-grid .role-legend-panel { margin-top: 0; }

/* Room already started / gone: show only the explanatory message — no invite heading,
   no join form column padding, no roles legend competing for attention. */
#view-join-link.unavailable-only > .card > h1,
#view-join-link.unavailable-only > .card > .subtitle,
#view-join-link.unavailable-only .role-legend-panel {
  display: none;
}
#view-join-link.unavailable-only .join-link-grid { grid-template-columns: 1fr; }

.lobby-header, .game-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--red-soft);
}

.share-box { display: flex; gap: 10px; flex-wrap: wrap; }

#lobby-code, #join-link-code {
  color: var(--red);
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

/* These grids carry the height of the screen. */
.lobby-grid, .game-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.game-grid { grid-template-columns: 1.15fr 1fr 1fr; }

@media (max-width: 900px) {
  #app { padding: 16px; }
  .card { padding: 22px 18px; }
  html { font-size: 16px; }
  .lobby-grid, .game-grid { grid-template-columns: 1fr; flex: none; }
  .player-list, .target-list, .log-list { max-height: 46vh; }
}

.error {
  color: var(--red-dark);
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  margin-top: 14px;
  font-size: 0.92rem;
}

/* ---------- lists ---------- */

.player-list, .target-list, .log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 140px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--red-line) transparent;
}
.player-list::-webkit-scrollbar, .target-list::-webkit-scrollbar, .log-list::-webkit-scrollbar { width: 8px; }
.player-list::-webkit-scrollbar-thumb, .target-list::-webkit-scrollbar-thumb, .log-list::-webkit-scrollbar-thumb {
  background: var(--red-line);
  border-radius: 4px;
}
.player-list::-webkit-scrollbar-thumb:hover, .target-list::-webkit-scrollbar-thumb:hover, .log-list::-webkit-scrollbar-thumb:hover {
  background: var(--red);
}

/* Each row carries a red edge — lots of red, no extra rows or tighter spacing. */
.player-list li, .target-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red-line);
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.player-list li:hover, .target-list li:hover {
  border-color: var(--red-line);
  border-left-color: var(--red);
  background: var(--red-soft);
  box-shadow: 0 2px 10px -4px rgba(217, 34, 34, 0.4);
}
.player-list li.dead {
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-color: var(--red);
  background: var(--panel-2);
}
.player-list li .tags { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

.tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.tag.host { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }
.tag.you { color: var(--green); border-color: var(--green-line); background: var(--green-soft); }
.tag.role-mafia { color: var(--red); border-color: var(--red-line); background: var(--red-soft); }
.tag.role-doctor { color: var(--blue); border-color: var(--blue-line); background: var(--blue-soft); }
.tag.role-detective { color: var(--purple); border-color: var(--purple-line); background: var(--purple-soft); }
.tag.role-innocent { color: var(--green); border-color: var(--green-line); background: var(--green-soft); }
.tag.role-jester { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }
.tag.vote { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }

.target-list button {
  padding: 8px 16px;
  font-size: 0.85rem;
}
.target-list button.selected {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(217, 34, 34, 0.8);
}
.target-list button.selected:hover { background: var(--red-hi); border-color: var(--red-hi); color: #fff; }

.log-list li {
  padding: 10px 2px 10px 14px;
  border-bottom: 1px solid var(--red-soft);
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
  position: relative;
}
/* Red tick against each log line; the newest entry gets a solid one. */
.log-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-line);
}
.log-list li:first-child { color: var(--text); font-weight: 600; }
.log-list li:first-child::before { background: var(--red); }
.log-list li:last-child { border-bottom: none; }

/* ---------- role steppers (lobby) ---------- */

.role-rows { display: flex; flex-direction: column; gap: 12px; }

/* The row is a column so an expanded description can push down inside it. */
.role-row {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 12px 16px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
}

.role-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.role-row-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.role-row-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 1.05rem;
}
.role-row-emoji {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  font-size: 1.2rem;
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: var(--red-soft);
  border: 1px solid var(--red-line);
}

/* The +/− are drawn as bars rather than typed as glyphs. The "−" and "+" characters sit
   on different baselines and have different glyph heights, which is what made the two
   buttons look vertically off from each other — geometry can't drift like that. */
.step-btn {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--red);
  background: #fff;
  color: var(--red);
  font-size: 0;            /* hides the glyph; aria-label carries the meaning */
  line-height: 0;
  user-select: none;
  flex: none;
}

/* Horizontal bar: both buttons get it. Vertical bar: only "+". Each is centred on the
   button's exact midpoint, so the two icons are identical and perfectly aligned. */
.step-btn::before,
.step-btn[data-delta="1"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 2px;
}
.step-btn::before {
  width: 15px;
  height: 2.5px;
  transform: translate(-50%, -50%);
}
.step-btn[data-delta="1"]::after {
  width: 2.5px;
  height: 15px;
  transform: translate(-50%, -50%);
}
.step-btn:hover:not(:disabled) {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: none;
}
.step-btn:active:not(:disabled) { transform: scale(0.9); }
.step-btn:disabled { color: var(--faint); background: var(--panel-2); border-color: var(--line-strong); }

/* The count itself: a plain readout, no spinners, no box. */
.stepper input[type="number"] {
  width: 54px;
  padding: 0;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 1.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input[type="number"]:focus {
  outline: none;
  box-shadow: none;
  color: var(--red);
}
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- role info toggles ---------- */

/* Small round "i" that reveals what a role does. Sized like the steppers' siblings but
   visually lighter so it never competes with the +/− controls. */
.info-btn {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--red-line);
  background: #fff;
  color: var(--red);
  font-size: 0.9rem;
  font-weight: 800;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  display: grid;
  place-items: center;
}
.info-btn:hover:not(:disabled),
.info-btn.open {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: none;
}

/* The revealed description. */
.role-info {
  margin: 12px 0 2px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.5;
  animation: infoIn 0.25s var(--ease) both;
}
@keyframes infoIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- invite-page role legend ---------- */

.role-legend-panel { margin-top: 18px; text-align: left; }
.role-legend { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.role-legend-row {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
}
.role-legend-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* Total counter: turns green the moment the roles add up to the player count. */
.settings-total {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: 1px solid var(--line);
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.settings-total.ok {
  color: var(--green);
  border-color: var(--green-line);
  background: var(--green-soft);
}

/* Read-only role summary shown to non-host players. */
.role-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--red-line);
  font-size: 0.92rem;
  font-weight: 600;
}
.role-chip .info-btn {
  width: 26px;
  height: 26px;
  font-size: 0.78rem;
}
.role-chip b {
  font-variant-numeric: tabular-nums;
  color: var(--red);
  font-size: 1.05rem;
}

/* ---------- game header ---------- */

.game-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* A normal in-flow widget (not an overlay) that the big reveal card docks into.
   It's the only place your role is shown all game, so it's a readable landscape card
   (emoji + name + what the role actually does), not a thumbnail. */
.role-dock {
  width: 300px;
  max-width: 100%;
  height: 116px;
  perspective: 900px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.role-dock.visible {
  opacity: 1;
  pointer-events: auto;
}
.role-dock:hover .role-dock-inner { transform: translateY(-3px); }
.role-dock:hover .role-dock-inner.flipped { transform: translateY(-3px) rotateY(180deg); }

.role-dock-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease);
}
.role-dock-inner.flipped {
  transform: rotateY(180deg);
}

.role-dock-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 13px;
  border: 2px solid var(--red);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 14px;
  text-align: center;
  box-shadow: 0 8px 20px -8px rgba(16, 24, 40, 0.35);
}

.role-dock-front {
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(160deg, #fff 40%, var(--red-soft));
}
.role-dock-front-mark {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--red);
}
.role-dock-front-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.role-dock-back {
  transform: rotateY(180deg);
  justify-content: flex-start;
  text-align: left;
}

.role-dock-image {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  font-size: 1.9rem;
}

.role-dock-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#role-dock-name {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--red-dark);
}

.role-dock-desc {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
}

#mafia-teammates {
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  border-left: 4px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 18px;
  color: var(--red-dark);
  font-weight: 600;
}

/* ---------- toast ---------- */

.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(90vw, 520px);
  word-break: break-word;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  z-index: 300;
  box-shadow: var(--shadow-pop);
  animation: toastIn 0.3s var(--ease) both;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- role reveal card ----------
   Layers, each owning one job so nothing fights the CSS cascade over the same property:
     .role-reveal-overlay  -> backdrop fade only (no transform, no position)
     .role-card-anchor     -> position:fixed always; dock/undock via top/left/width/height
                               (explicit lengths in both states so they can transition —
                               never vw-guesswork, so it's always fully on-screen)
     .role-card-scene      -> one-shot entrance drop-in animation (its own transform)
     .role-card            -> flip transition (rotateY)
*/
.role-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.97), rgba(233, 224, 224, 0.98));
  backdrop-filter: blur(3px);
  transition: background 0.7s ease;
  animation: overlayFadeIn 0.4s ease both;
}

.role-reveal-overlay.docked {
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.role-card-anchor {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(86vw, 420px);
  height: min(76vh, 580px);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  transition: top 0.7s var(--ease), left 0.7s var(--ease),
              width 0.7s var(--ease), height 0.7s var(--ease),
              transform 0.7s var(--ease);
}

/* Docking target (top/left/width/height) is set inline by JS from the real position of
   #role-dock in the header, so the card lands exactly on top of it — then JS hides this
   overlay and reveals #role-dock, handing off to a normal, non-overlay element. */
.role-reveal-overlay.docked .role-card-anchor {
  transform: none;
}

.role-card-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin: 0 0 18px;
  text-align: center;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
  transition: opacity 0.3s ease;
  animation: hintPulse 2.4s ease-in-out infinite;
}
.role-reveal-overlay.docked .role-card-hint {
  opacity: 0;
  animation: none;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.role-card-scene {
  width: 100%;
  height: 100%;
  perspective: 1400px;
  /* Entrance animation lives here, not on .role-card or .role-card-anchor, so it never
     fights the flip / dock transitions on those elements over `transform`. */
  animation: cardDropIn 0.6s var(--ease) both;
}

.role-card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--ease);
}

@keyframes cardDropIn {
  from { transform: translateY(-40px) scale(0.9); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.role-card.flipped {
  transform: rotateY(180deg);
}

.role-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--card);
  border: 3px solid var(--red);
  box-shadow: var(--shadow-pop);
}

.role-card-front {
  background: linear-gradient(160deg, #fff 40%, var(--red-soft));
}

.role-card-front-mark {
  font-size: 6rem;
  font-weight: 800;
  color: var(--red);
}

.role-card-back {
  transform: rotateY(180deg);
  gap: 12px;
}

.role-card-image {
  width: 42%;
  height: 42%;
  max-width: 130px;
  max-height: 130px;
  border-radius: 18px;
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  margin-bottom: 8px;
}

/* Wrapper so the name + description travel together when the card morphs into the
   landscape docked layout. */
.role-card-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-align: center;
}

.role-card-back h2 {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--red-dark);
}
.role-card-back p { margin: 0; font-size: 1rem; }

/* While docking, the big card morphs into the shape of #role-dock so the hand-off to that
   element is invisible: landscape, emoji tile on the left, name + short text on the right.
   (These target #role-card-desc by id — it carries class="hint", not .role-card-desc,
   so the old class selector here never actually matched anything.) */
.role-reveal-overlay.docked .role-card-face {
  border-width: 2px;
  border-radius: 13px;
  padding: 12px 14px;
  flex-direction: row;
  gap: 12px;
  justify-content: flex-start;
  text-align: left;
}
.role-reveal-overlay.docked .role-card-text {
  align-items: flex-start;
  text-align: left;
  gap: 3px;
}
.role-reveal-overlay.docked .role-card-back h2 { font-size: 1rem; }
.role-reveal-overlay.docked #role-card-desc {
  font-size: 0.72rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.role-reveal-overlay.docked .role-card-image {
  flex: none;
  width: 54px;
  height: 54px;
  max-width: 54px;
  max-height: 54px;
  font-size: 1.9rem;
  border-radius: 12px;
  margin-bottom: 0;
}
.role-reveal-overlay.docked .role-card-front { flex-direction: column; justify-content: center; }
.role-reveal-overlay.docked .role-card-front-mark { font-size: 2.4rem; }

/* ---------- morning report banner ---------- */

.morning-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  animation: morningSlideIn 0.5s var(--ease) both;
}
.morning-banner .icon { font-size: 1.7rem; }
.morning-banner.outcome-killed { border-color: var(--red-line); background: var(--red-soft); color: var(--red-dark); }
.morning-banner.outcome-saved { border-color: var(--green-line); background: var(--green-soft); color: var(--green); }
.morning-banner.outcome-none { border-color: var(--amber-line); background: var(--amber-soft); color: var(--amber); }

@keyframes morningSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- how to play ---------- */
.how-to-play {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 2px solid var(--red-soft);
  text-align: left;
}
.how-to-play h2 {
  text-align: center;
  color: var(--red-dark);
  margin-bottom: 10px;
}
.how-intro {
  max-width: 680px;
  margin: 0 auto 28px;
  text-align: center;
  color: var(--muted);
  line-height: 1.6;
}
.how-steps {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.how-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--red-line);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
}
.how-step-num {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.how-steps h3 {
  margin: 2px 0 4px;
  font-size: 1.05rem;
  color: var(--text);
}
.how-steps p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.95rem;
}
.how-roles-heading { margin-top: 34px; }
.how-roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.how-role {
  text-align: center;
  padding: 20px 18px;
  background: var(--panel);
  border: 1px solid var(--red-line);
  border-radius: var(--radius);
}
.how-role-emoji { font-size: 2.4rem; line-height: 1; }
.how-role h3 { margin: 10px 0 6px; color: var(--red-dark); }
.how-role p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 0.95rem; }

@media (max-width: 700px) {
  .how-steps, .how-roles { grid-template-columns: 1fr; }
}

/* ---------- phase timers (lobby config) ---------- */
.timer-settings {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.timer-heading {
  font-size: 1rem;
  margin: 0 0 12px;
  color: var(--text);
}
.hint-inline {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--faint);
}
.timer-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.timer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--red-line);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.timer-row input[type="number"] {
  width: 78px;
  text-align: center;
  padding: 8px 6px;
}
.timer-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------- in-game phase-timer bar + pause ---------- */
.phase-timer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
}
.phase-timer {
  font-weight: 800;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  padding: 6px 16px;
  border-radius: 999px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--red-line);
}
.phase-timer.urgent {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
  animation: timerPulse 1s var(--ease) infinite;
}
.phase-timer-bar.is-paused .phase-timer {
  color: var(--amber);
  background: var(--amber-soft);
  border-color: var(--amber-line);
  animation: none;
}
#pause-btn { flex: 0 0 auto; }
@keyframes timerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@media (max-width: 700px) {
  .timer-rows { grid-template-columns: 1fr; }
}

/* ---------- detective findings ---------- */
.detective-findings {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--purple-soft);
  border: 1px solid var(--purple-line);
  border-radius: var(--radius);
}
.detective-findings h3 {
  margin: 0 0 10px;
  color: var(--purple);
  font-size: 1rem;
}
.detective-findings .finding {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 7px;
  background: #fff;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--purple-line);
  font-size: 0.95rem;
}
.detective-findings .finding:last-child { margin-bottom: 0; }
.detective-findings .finding-verdict { font-weight: 700; white-space: nowrap; }
.detective-findings .finding.is-mafia { border-left-color: var(--red); }
.detective-findings .finding.is-mafia .finding-verdict { color: var(--red); }
.detective-findings .finding.is-clear { border-left-color: var(--green); }
.detective-findings .finding.is-clear .finding-verdict { color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}