/* Fonts bundled with the game (SIL Open Font License; see public/fonts/). */
@font-face { font-family: 'DM Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/dm-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/dm-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/dm-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Besley'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/besley-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Besley'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/besley-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Besley'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/besley-latin-700-normal.woff2') format('woff2'); }
/* Brand fonts for the starter screens (see the Brand section at the end). Mouse Memoirs is bundled. */
@font-face { font-family: 'Mouse Memoirs'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/MouseMemoirs-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Space Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/space-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/space-mono-latin-700-normal.woff2') format('woff2'); }

/* Palette sampled from the swatch sheet: mustard, sage, olive, steel, slate,
   charcoal, tan, brown, oxblood, and rust. Team colours carry the game's meaning. */
:root {
  --mustard: #e2c888;
  --mustard-deep: #ab8d3f;
  --steel: #a7b9c1;
  --slate: #556a7d;
  --charcoal: #272b30;
  --tan: #dcbba0;
  --brown: #774324;
  --oxblood: #8a2a20;
  --rust: #bd6036;
  --ink: #201611;

  /* Team colours */
  --town: var(--mustard);
  --mafia: var(--rust);
  --neutral: var(--steel);

  /* Default (lobby and game over) */
  /* One overlay for every phase, so the brick wall never changes. */
  --overlay: rgba(20, 14, 10, 0.78);
  --panel: rgba(39, 43, 48, 0.94);
  --tile: rgba(20, 14, 10, 0.55);
  --text: #f1e6d2;
  --muted: #b9ad98;
  --accent: var(--mustard);
  --accent-text: var(--ink);
  --highlight: var(--rust);
  --danger: var(--oxblood);

  --font-body: 'Space Mono', ui-monospace, Menlo, monospace;
  --font-display: 'Mouse Memoirs', cursive;
}

/* Night: cool and dark */
[data-phase="night"] {
  --panel: rgba(30, 38, 46, 0.94);
  --tile: rgba(10, 14, 20, 0.6);
  --text: #e4ebee;
  --muted: #9aabb3;
  --accent: var(--steel);
}

/* Day and vote: warm tan veil over the brick */
[data-phase="day"],
[data-phase="vote"] {
  --panel: rgba(251, 245, 236, 0.95);
  --tile: rgba(255, 255, 255, 0.45);
  --text: var(--ink);
  --muted: #6b5a48;
  --accent: var(--brown);
  --accent-text: #fff;
  --highlight: var(--mustard-deep);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: #1a120d;
  background-image: linear-gradient(var(--overlay), var(--overlay));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  min-height: 100vh;
  transition: background-color 0.6s ease, color 0.6s ease;
}

[hidden] { display: none !important; }

h1, h2, h3 { margin: 0 0 0.4rem; letter-spacing: 0.02em; font-family: var(--font-display); }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.4rem; }
p { margin: 0.4rem 0; line-height: 1.45; }

button {
  font: inherit;
  border: 0;
  border-radius: 10px;
  padding: 0.7rem 1.1rem;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  cursor: pointer;
}
button:disabled { opacity: 0.45; cursor: default; }
button.secondary { background: transparent; color: var(--text); border: 2px solid var(--muted); }
button.danger { background: var(--danger); color: #fff; }
button.selected { outline: 3px solid var(--highlight); }

input[type="text"], input:not([type]) {
  font: inherit;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 2px solid var(--muted);
  background: var(--tile);
  color: var(--text);
  width: 100%;
}

.logo { display: block; height: 130px; width: auto; margin: 0 0 14px; border-radius: 14px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); }
.phone .logo { height: 110px; margin: 8px auto 16px; }

.panel {
  background: var(--panel);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.muted { color: var(--muted); }
.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--muted);
  color: var(--ink);
  margin-left: 0.3rem;
  vertical-align: middle;
}
.badge.silenced { background: var(--rust); color: #fff; }
.badge.revealed { background: var(--mustard); color: var(--ink); }
.badge.dead { background: #4a4a4a; color: #eee; }

.team-town { color: var(--town); }
.team-mafia { color: var(--mafia); }
.team-neutral { color: var(--neutral); }

.log {
  max-height: 40vh;
  overflow-y: auto;
  padding-left: 1rem;
  margin: 0;
  font-size: 1.1rem;
}
.log li { margin-bottom: 0.5rem; }
.log .day { color: var(--muted); font-size: 0.8rem; margin-right: 0.4rem; }

.countdown {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 2.6rem;
  font-weight: 800;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.6rem;
}
.tile {
  background: var(--tile);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  border: 2px solid transparent;
  min-height: 90px;
}
.tile strong { font-size: 1.3rem; }
.tile.dead { opacity: 0.4; }
.tile .role { font-size: 0.85rem; color: var(--muted); margin-top: 0.2rem; }

.error { color: var(--rust); min-height: 1.2rem; }

/* Death announcements */
.death-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 4, 2, 0.88);
  overflow: hidden;
  animation: fadeIn 0.4s ease both;
  transition: opacity 0.6s ease;
}
.death-overlay.leaving { opacity: 0; }

.splat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80vmin;
  height: 80vmin;
  z-index: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}
.splat-svg { width: 100%; height: 100%; overflow: visible; }
.splat-svg .pool,
.splat-svg .blob {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.splat-svg .drip {
  transform-box: fill-box;
  transform-origin: top center;
  transform: scaleY(0);
  animation: drip 1.2s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.splat-svg .drip-bulb { transform: none; }
@keyframes pop { to { transform: scale(1); } }
@keyframes drip { to { transform: scaleY(1); } }

.death-text {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #f1e6d2;
  padding: 1.5rem;
  animation: rise 0.6s ease 0.35s both;
}
.death-name {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9vw, 4.5rem);
  text-shadow: 0 4px 0 #5a0d08, 0 0 24px rgba(190, 30, 20, 0.7);
  line-height: 1.05;
}
.death-cause { font-size: clamp(1.3rem, 4.5vw, 2rem); color: #ffb9a6; margin-top: 0.6rem; }
.death-role { font-size: clamp(1.2rem, 4vw, 1.7rem); margin-top: 0.9rem; }

.top-drips { position: absolute; inset: 0 0 auto 0; height: 100%; pointer-events: none; }
.top-drip {
  position: absolute;
  top: -4px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(#5c0909, #8a1410 80%, #a81c15);
  box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.35);
  transform-origin: top center;
  transform: scaleY(0);
  animation: topDrip 1.6s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes topDrip { to { transform: scaleY(1); } }

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

@media (prefers-reduced-motion: reduce) {
  .splat-svg *, .top-drip { animation: none !important; transform: none !important; }
  .death-text, .death-overlay { animation: none; }
}

/* Phone-friendly layout */
.phone main {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
}

/* Role card: light paper with a faint fabric texture so the text stays easy to read */
.role-card {
  border-radius: 18px;
  padding: 1.3rem;
  margin-bottom: 1rem;
  background-color: #f6eddf;
  background-image: linear-gradient(rgba(246, 237, 223, 0.94), rgba(246, 237, 223, 0.94));
  color: var(--ink);
  border-top: 10px solid var(--mustard-deep);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.role-card.mafia { border-top-color: var(--oxblood); }
.role-card.neutral { border-top-color: var(--slate); }
.role-card h2 { font-size: 2.3rem; margin-bottom: 0.3rem; }
.role-card .role-icon { display: block; width: 44px; height: 44px; margin: 0.4rem 0 0.2rem; }
.role-card p { font-size: 1.15rem; }
.role-card .team { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.95rem; }
.role-card.town .team { color: #6e5414; }
.role-card.mafia .team { color: var(--oxblood); }
.role-card.neutral .team { color: var(--slate); }

.targets { display: grid; gap: 0.5rem; margin: 0.8rem 0; }
.targets button {
  background: var(--tile);
  color: var(--text);
  text-align: left;
  border: 2px solid var(--muted);
}
.targets button.selected { border-color: var(--highlight); outline: none; }

.targets button.out { text-decoration: line-through; opacity: 0.7; }
.targets button.tag-suspicious { border-color: var(--rust); }
.targets button.tag-trusted { border-color: var(--mustard); }
.targets button.tag-suspicious .mark { background: var(--rust); }
.targets button.tag-trusted .mark { background: var(--mustard); color: var(--ink); }
.targets button.tag-unknown .mark { background: var(--muted); color: var(--ink); }

.confirm-note {
  display: inline-block;
  margin: 0.2rem 0 0.6rem;
  padding: 0.5rem 0.9rem;
  border-radius: 10px;
  background: var(--mustard);
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
}
.confirm-note.pop { animation: confirmPop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes confirmPop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
button.done:disabled { opacity: 1; background: var(--mustard); color: var(--ink); }

.targets button .mark {
  display: inline-block;
  margin-left: 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--highlight);
  color: #fff;
  vertical-align: middle;
}

.afterlife {
  background: linear-gradient(rgba(167, 185, 193, 0.14), rgba(167, 185, 193, 0.14)), var(--panel);
  border: 2px solid rgba(167, 185, 193, 0.35);
}
.afterlife-log {
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0;
  max-height: 40vh;
  overflow-y: auto;
  font-size: 1.05rem;
}
.afterlife-msg { margin-bottom: 0.5rem; color: var(--neutral); text-shadow: 0 0 8px rgba(167, 185, 193, 0.45); }
.afterlife-name { font-weight: 700; color: var(--text); }
.afterlife-form input { flex: 1; min-width: 0; }

.row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* Laptop display */
.display main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}
.display .split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}
@media (max-width: 800px) {
  .display .split { grid-template-columns: 1fr; }
}

.phase-title { font-family: var(--font-display); font-size: 3rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }

.lobby-code {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 900;
  letter-spacing: 0.25em;
  text-align: center;
  color: var(--mustard);
}

.join-panel { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.qr { background: #fff; border-radius: 12px; padding: 10px; width: 220px; height: 220px; flex-shrink: 0; }
.qr svg { width: 100%; height: 100%; display: block; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--tile);
  cursor: pointer;
}

.sound-toggle { position: fixed; bottom: 16px; right: 16px; }

/* ---- Brand: starter screens (phone join, laptop lobby) ------------------
   Cream paper, ink type, red and mustard accents, Mouse Memoirs for headings
   and Space Mono for everything else. The rest of the game keeps its own look
   until it is re-branded. */
:root {
  --paper: #efecdb;
  --paper-card: #fffdf5;
  --ink-brand: #2d282a;
  --ink-soft: #5e5557;
  --red-brand: #c8402b;
  --mustard-brand: #d2b53e;
  --steel-brand: #4a5d6f;
  --brand-display: 'Mouse Memoirs', 'Comic Sans MS', cursive;
  --brand-mono: 'Space Mono', ui-monospace, Menlo, Consolas, monospace;
}

body:has(#lobby:not([hidden])) {
  background: var(--paper);
  color: var(--ink-brand);
  font-family: var(--brand-mono);
  font-size: 16px;
}

/* The join screen is dark, so the cream logo and the gold button stand out. */
body:has(#join:not([hidden])) {
  background: var(--ink-brand);
  color: var(--paper);
  font-family: var(--brand-mono);
  font-size: 16px;
}

#join, #lobby { color: var(--ink-brand); font-family: var(--brand-mono); }
#join h1, #join h2, #lobby h2 { font-family: var(--brand-display); font-weight: 400; letter-spacing: 0.01em; }
#join h2 { font-size: 2.4rem; line-height: 1.1; }
#join .muted, #lobby .muted { color: var(--ink-soft); }

#join .logo, #lobby .logo {
  width: 240px;
  height: auto;
  margin: 0 0 18px;
  border-radius: 0;
  box-shadow: none;
}
#join .logo { width: 320px; margin: 8px auto 22px; }

#join .panel, #lobby .panel {
  background: var(--paper-card);
  color: var(--ink-brand);
  border: 2px solid var(--ink-brand);
  border-radius: 6px;
  box-shadow: 6px 6px 0 var(--ink-brand);
}
#join .panel { box-shadow: 6px 6px 0 var(--red-brand); }
#join .panel { box-shadow: 6px 6px 0 var(--red-brand); }

#join input[type="text"], #lobby input[type="text"] {
  background: #fff;
  color: var(--ink-brand);
  border: 2px solid var(--ink-brand);
  border-radius: 4px;
  font-family: var(--brand-mono);
}
#join input[type="text"]:focus { outline: 3px solid var(--mustard-brand); outline-offset: 2px; }

#join button, #lobby button {
  background: var(--red-brand);
  color: var(--paper);
  border: 2px solid var(--ink-brand);
  border-radius: 4px;
  font-family: var(--brand-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 4px 4px 0 var(--ink-brand);
}
#join button:disabled, #lobby button:disabled { box-shadow: none; }
#join button.secondary, #lobby button.secondary {
  background: transparent;
  color: var(--ink-brand);
  box-shadow: none;
}

#join .error, #lobby .error { color: var(--red-brand); font-weight: 700; }

#lobby .lobby-code {
  font-family: var(--brand-display);
  font-weight: 400;
  font-size: 5.5rem;
  letter-spacing: 0.2em;
  color: var(--red-brand);
}
#lobby .join-panel .qr { border: 2px solid var(--ink-brand); border-radius: 4px; }
#lobby .chips label {
  background: #fff;
  color: var(--ink-brand);
  border: 2px solid var(--ink-brand);
  border-radius: 4px;
  font-family: var(--brand-mono);
  font-size: 0.9rem;
}
#lobby .badge { background: var(--steel-brand); color: var(--paper); border-radius: 4px; }

/* ---- Retro layer: 1960s-70s print look for the starter screens ---------- */
#join, #lobby { position: relative; }

#join .panel, #lobby .panel {
  border: 2px solid var(--ink-brand);
  border-radius: 14px;
}
#join .panel { box-shadow: 4px 4px 0 var(--red-brand); }
#lobby .panel { box-shadow: 4px 4px 0 var(--ink-brand); }

#join input[type="text"], #lobby input[type="text"] { border-radius: 8px; }

#join button, #lobby button { border-radius: 8px; }
#join button:not(.secondary) { background: #c7a94b; color: var(--ink-brand); }
#lobby button:not(.secondary) { background: var(--mustard-brand); color: var(--ink-brand); }
#lobby .chips label { border-radius: 999px; }
#lobby .badge { border-radius: 999px; }

#join h2 { font-size: 2.8rem; }
#lobby h2 { font-size: 2rem; }
#lobby h2 { font-size: 1.8rem; }
body:has(#lobby:not([hidden])) .sound-toggle {
  background: var(--paper-card);
  color: var(--ink-brand);
  border: 2px solid var(--ink-brand);
  box-shadow: 3px 3px 0 var(--ink-brand);
}

/* ---- Layout v2: one focus per screen ------------------------------------ */

/* Phone: a fixed top bar, one main area, and tabs along the bottom. */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.app-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 12px 16px;
  background: rgba(15, 10, 7, 0.85);
  border-bottom: 2px solid var(--mustard-deep);
  position: sticky;
  top: 0;
  z-index: 5;
}
.app-top .who { font-weight: 700; font-size: 1.05rem; }
.app-top .role-chip {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--mustard);
  color: var(--ink);
}
.app-top .role-chip.mafia { background: var(--rust); color: #fff; }
.app-top .role-chip.neutral { background: var(--steel); color: var(--ink); }
.app-top .clock { font-family: var(--font-display); font-size: 1.4rem; font-variant-numeric: tabular-nums; }

.app-main { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.app-question { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.2; margin: 0; }
.app-hint { font-size: 1.05rem; color: var(--muted); margin: 0; }

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choice {
  min-width: 0;
  min-height: 84px;
  border-radius: 16px;
  font-size: 1.25rem;
  font-weight: 700;
  background: var(--panel);
  color: var(--text);
  border: 3px solid transparent;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.choice.picked { border-color: var(--mustard); background: var(--mustard); color: var(--ink); }
.choice.out { text-decoration: line-through; opacity: 0.6; }
.choice .sub { display: block; font-size: 0.8rem; font-weight: 700; margin-top: 4px; opacity: 0.85; }

.app-action { position: static; }
.app-action button { width: 100%; font-size: 1.25rem; padding: 0.9rem; }

.app-tabs {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(15, 10, 7, 0.95);
  border-top: 2px solid var(--mustard-deep);
}
.app-tab {
  background: transparent;
  color: var(--muted);
  border-radius: 0;
  padding: 0.7rem 0.2rem;
  font-size: 0.9rem;
  font-weight: 700;
  border: 0;
}
.app-tab.active { color: var(--mustard); background: rgba(226, 200, 136, 0.12); }
.app-tab:disabled { opacity: 0.35; }

/* Laptop: one centre stage, with players around it and the log to the side. */
.stage-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
.stage-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 70vh;
  background: var(--panel);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.stage-center .phase-name { font-family: var(--font-display); font-size: 4rem; text-transform: uppercase; margin: 0; }
.stage-center .clock { font-family: var(--font-display); font-size: 6rem; font-variant-numeric: tabular-nums; margin: 8px 0; }
.stage-center .status { font-size: 1.4rem; color: var(--muted); margin: 0; }
.seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 24px; width: 100%; }
.seat {
  background: var(--tile);
  border-radius: 14px;
  padding: 12px;
  font-size: 1.15rem;
  font-weight: 700;
  border: 2px solid transparent;
}
.seat.out { opacity: 0.55; text-decoration: line-through; }
.seat.voted { border-color: var(--mustard); }
.side-log { background: var(--panel); border-radius: 20px; padding: 18px; max-height: 80vh; overflow-y: auto; }

@media (max-width: 800px) {
  .stage-wrap { grid-template-columns: 1fr; }
  .stage-center { min-height: 50vh; }
  .stage-center .phase-name { font-size: 2.6rem; }
  .stage-center .clock { font-size: 4rem; }
}

/* ---- Phone layout details -------------------------------------------------- */
.app-detail { padding: 12px 16px 0; }
.app-detail .role-card { margin-bottom: 0; }
.app-phase { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; margin: 0; }
.app-question { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 4px; }
.app-hint { font-size: 1.05rem; color: var(--muted); margin: 0 0 10px; }
.app-log { list-style: none; padding: 0; margin: 0 0 16px; font-size: 1.1rem; }
.app-log li { margin-bottom: 0.5rem; }
.app-top .role-chip { border: 0; cursor: pointer; }
.app-action button:not(.secondary) { flex: 1; }
.app-action .secondary { flex: 0 0 auto; }
.choice .mark { display: block; margin: 4px 0 0; font-size: 0.8rem; font-weight: 700; }
.choice.tag-suspicious { border-color: var(--rust); }
.choice.tag-trusted { border-color: var(--mustard); }
.choice.tag-unknown { border-color: var(--muted); }
.choice.tag-suspicious .mark { color: var(--rust); }
.choice.tag-trusted .mark { color: var(--mustard-deep); }
.choice.picked .mark { color: var(--ink); }

/* ---- Start-of-game role screen ----------------------------------------------- */
.role-reveal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--overlay);
  overflow-y: auto;
}
.reveal-card {
  width: 100%;
  max-width: 440px;
  background: var(--tan);
  color: var(--ink);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  border-top: 10px solid var(--mustard-deep);
}
.reveal-kicker { font-size: 1.1rem; font-weight: 700; margin: 0; }
.reveal-role { font-family: var(--font-display); font-size: 2.8rem; margin: 0; }
.reveal-team { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 4px 0 12px; font-size: 0.95rem; }
.reveal-card .app-question { color: var(--ink); margin-top: 14px; }
.reveal-steps { margin: 0 0 6px; padding-left: 1.2rem; font-size: 1.1rem; line-height: 1.45; }
.reveal-how { font-size: 1.2rem; line-height: 1.45; margin: 0 0 18px; }
.reveal-card .app-hint { color: #4a3b2c; }

/* ---- Clickable prototype bar ------------------------------------------------ */
.proto-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #000;
  color: #f1e6d2;
  font-size: 0.9rem;
}
.proto-bar button { padding: 0.4rem 0.8rem; font-size: 0.9rem; }
.proto-bar #proto-name { flex: 1; text-align: center; font-weight: 700; }
body.proto { padding-top: 52px; }
body.proto .app-top { top: 52px; }

/* ---- Prototype device frame ------------------------------------------------- */
.device-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: #2b2b2b;
}
.device {
  position: relative;
  width: 390px;
  height: 820px;
  max-height: calc(100vh - 48px);
  max-width: 100%;
  overflow: hidden;
  border-radius: 44px;
  border: 12px solid #111;
  box-shadow: 0 0 0 2px #2a2a2a, 0 24px 60px rgba(0, 0, 0, 0.5);
  background: #000;
}
.device .app { height: 100%; max-width: none; min-height: 0; }
.device .app-top { top: 0; }
.device .app-main { overflow-y: auto; scrollbar-width: none; }
.device .app-main::-webkit-scrollbar { display: none; }
.device .role-reveal { position: absolute; }
.device .death-overlay { position: absolute; }
/* Start-of-game card inside the phone frame: starts at the top and scrolls. */
.device .role-reveal { align-items: flex-start; scrollbar-width: none; }
.device .role-reveal::-webkit-scrollbar { display: none; }
.device .reveal-card { margin: 0 auto; padding: 16px; border-top-width: 8px; }
.device .reveal-role { font-size: 2.2rem; }
.device .reveal-card .app-question { font-size: 1.25rem; margin-top: 10px; }
.device .reveal-steps { font-size: 0.98rem; }
.device .reveal-how { font-size: 1rem; margin-bottom: 12px; }
.device .reveal-card button { font-size: 1.05rem; }

.role-card h2 { margin-top: 8px; }
.role-card .team { line-height: 1.3; }

/* ---- Evil tag and the game review ------------------------------------------- */
.choice.tag-evil { border-color: var(--oxblood); }
.choice.tag-evil .mark { color: var(--oxblood); }
.targets button.tag-evil { border-color: var(--oxblood); }
.summary-list { list-style: none; padding: 0; margin: 0; }
.summary-item { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.summary-thought { font-size: 0.98rem; margin-top: 3px; padding-left: 10px; }

/* ---- Icons ---------------------------------------------------------------- */
.icon { flex-shrink: 0; display: inline-block; vertical-align: middle; }
.app-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 0.8rem; }
#phase-title { display: flex; align-items: center; gap: 8px; }
#confirm-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
#countdown { display: flex; align-items: center; gap: 6px; }

/* ---- Phone lobby: waiting for the host -------------------------------------
   A cream page with a scrolling banner, the dark logo, and one dark card. */
body:has(#lobby-view:not([hidden])) {
  background: #efecdb;
  background-image: none;
  color: #2d282a;
}
#lobby-view.p-lobby {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 0 40px;
  text-align: center;
}
.p-marquee {
  background: #2d282a;
  color: #efecdb;
  overflow: hidden;
  white-space: nowrap;
  padding: 10px 0;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.p-marquee-track { display: inline-block; animation: p-scroll 20s linear infinite; }
.p-marquee-track span { padding-right: 0.5rem; }
.p-marquee em { font-style: normal; color: #839ea5; }
@keyframes p-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .p-marquee-track { animation: none; } }
.p-logo { display: block; width: 210px; height: auto; margin: 36px auto 30px; }
.p-card {
  background: #2d282a;
  color: #efecdb;
  border-radius: 22px;
  padding: 30px 26px 28px;
  margin: 0 22px;
  text-align: center;
}
.p-card h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.1;
  margin: 0 0 0.6rem;
  color: #efecdb;
}
.p-count { color: #c7a94b; font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 1rem; }
.p-copy { line-height: 1.5; margin: 0 0 1.2rem; }
.p-note { font-weight: 700; margin: 0; }

/* Keep the phone lobby inside the screen width. */
#lobby-view.p-lobby { width: 100%; box-sizing: border-box; }

/* While waiting, the main area fills the phone width instead of the wider default. */
#game:has(#lobby-view:not([hidden])) #role-view { width: 100%; max-width: 100%; box-sizing: border-box; }
#lobby-view.p-lobby { width: 100%; max-width: 100%; box-sizing: border-box; padding-left: 0; padding-right: 0; }

/* Phone lobby: the brand faces, and the story underneath the card. */
#lobby-view.p-lobby { font-family: var(--brand-mono); }
#lobby-view .p-card h2,
#lobby-view .p-story h2 { font-family: var(--brand-display); font-weight: 400; }
#lobby-view .p-count { font-family: var(--brand-display); }
#lobby-view .p-marquee { font-family: var(--brand-mono); }
.p-story {
  background: #2d282a;
  color: #efecdb;
  border-radius: 22px;
  margin: 26px 22px 0;
  padding: 26px 24px 28px;
  text-align: left;
}
.p-story h2 { font-size: 2rem; line-height: 1.1; margin: 0 0 0.9rem; color: #c7a94b; text-align: center; }
.p-story p { font-size: 0.95rem; line-height: 1.6; margin: 0 0 0.9rem; }
.p-story .p-story-lead { margin-bottom: 0.9rem; }
.p-story .p-story-close { font-weight: 700; margin: 1rem 0 0; }

/* ---- Role reveal on the phone -----------------------------------------------
   The role starts face down, with a red tile that does not show the team. A tap turns it
   over to the role card. A second tap turns it back, so a glance at the phone shows nothing. */
.role-flip { perspective: 1000px; margin-bottom: 14px; cursor: pointer; outline: none; }
.role-flip:focus-visible { box-shadow: 0 0 0 3px #c7a94b; border-radius: 22px; }
/* Once the card is flipped open, the gold focus ring goes away. */
.role-flip.is-flipped:focus-visible { box-shadow: none; }
.rf-inner {
  display: grid;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}
.role-flip.is-flipped .rf-inner { transform: rotateY(180deg); }
.rf-face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 22px;
  box-sizing: border-box;
  text-align: center;
}
/* Face down: a solid ink card with a gold edge, the same as the reveal design. */
.rf-back {
  background: #2d282a;
  color: #efecdb;
  border: 2px solid #2d282a;
  box-shadow: 4px 4px 0 #c7a94b;
  justify-content: center;
}
.rf-back::before { content: none; }
.rf-back .rf-title { color: #efecdb; }
.rf-back .rf-hint { color: #efecdb; }
.rf-front { transform: rotateY(180deg); border: 2px solid #2d282a; box-shadow: 4px 4px 0 #2d282a; padding: 0; justify-content: flex-start; gap: 0; }
.rf-title { font-family: var(--font-display); font-size: 1.6rem; margin: 0; }
.rf-hint { margin: 0; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; }
.rf-front .role-card { flex: 1; width: 100%; box-sizing: border-box; border: 0; border-radius: 14px; box-shadow: none; padding: 22px; margin: 0; }
.rf-front .rf-hint { padding: 12px 0 0; }
.rf-front .role-card .team { margin-top: 0; }
.role-card.town { background: #69a88f; color: #2d282a; }
.role-card.mafia { background: #c03c29; color: #efecdb; }
.role-card.neutral { background: #78939a; color: #2d282a; }
.role-card.town .team, .role-card.mafia .team, .role-card.neutral .team { color: inherit; }

/* Phone night screen: top bar, name tiles, timer urgency and the locked-in status. */
.app-top .top-phase { font-family: var(--font-display); font-size: 1.3rem; text-align: center; }
.app-top .clock.urgent { color: #e0553d; }
.app-top .who .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; border: 1px solid var(--ink); vertical-align: middle; }
#targets.choice-grid, #vote-targets.choice-grid, #journal.choice-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pick { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 10px 16px; background: #fffdf5; color: #2d282a; border: 2px solid #2d282a; border-left: 10px solid var(--c); border-radius: 16px; box-shadow: 3px 3px 0 #2d282a; font-family: 'Mouse Memoirs', cursive; font-size: 24px; line-height: 1.05; cursor: pointer; text-align: left; }
.pick .pick-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pick .box { width: 22px; height: 22px; border: 2px solid #2d282a; border-radius: 6px; background: #fffdf5; display: inline-flex; align-items: center; justify-content: center; font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.pick.on { background: var(--c); color: var(--t); }
.pick.on .box { background: #2d282a; color: #efecdb; border-color: #2d282a; }
.pick .mark { position: absolute; right: 12px; top: -10px; font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; background: #efecdb; border: 1px solid #2d282a; border-radius: 999px; padding: 1px 6px; }
.pick[disabled] { cursor: default; }
.status-card { display: flex; align-items: center; gap: 10px; width: 100%; background: #fffdf5; border: 2px solid #2d282a; border-radius: 16px; box-shadow: 4px 4px 0 #2d282a; padding: 14px 16px; margin-top: 14px; }
.status-card[hidden] { display: none; }
.status-card .tick { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #69a88f; border: 2px solid #2d282a; font-weight: 700; flex-shrink: 0; }
.status-card strong { display: block; font-size: 15px; line-height: 1.25; }
.status-card span { display: block; font-size: 13px; margin-top: 2px; }
.role-card .wins { margin-top: 8px; }

/* The confirm button uses the same gold primary as the rest of the app. */
.app-action button:not(.secondary) { background: #c7a94b; color: #2d282a; border: 2px solid #2d282a; border-radius: 6px; box-shadow: 4px 4px 0 #2d282a; font-weight: 700; }
.app-action button:not(.secondary):disabled { background: #c7a94b; opacity: 0.45; box-shadow: none; }
.app-action button.done:disabled { opacity: 1; background: #c7a94b; color: #2d282a; }

/* In-game phone screens: the same cream page, ink text and brand faces as the prototype. */
body:has(#game:not([hidden])) {
  background: #efecdb;
  background-image: none;
  color: #2d282a;
  font-family: 'Space Mono', ui-monospace, Menlo, monospace;
}
#game:not([hidden]) .app-top { background: #2d282a; color: #efecdb; border-bottom: 0; }
#game:not([hidden]) .app-top .clock { color: #c7a94b; }
#game:not([hidden]) .app-top .clock.urgent { color: #e0553d; }
#game:not([hidden]) .app-main { background: #efecdb; }
#game:not([hidden]) .app-phase, #game:not([hidden]) .app-question { font-family: 'Mouse Memoirs', cursive; font-weight: 400; color: #2d282a; }
#game:not([hidden]) .app-hint { color: #5e5557; }
#game:not([hidden]) .app-tabs { background: #2d282a; border-top: 0; }
#game:not([hidden]) .app-tab { color: #efecdb; }
#game:not([hidden]) .panel { background: #fffdf5; color: #2d282a; box-shadow: 3px 3px 0 #2d282a; }
#game:not([hidden]) .app-tab.active { color: #c7a94b; background: transparent; }

/* The revealed card fills its whole face in the team colour, with the hint inside the card. */
.rf-front { padding: 0; background: transparent; }
.rf-front .role-card { position: relative; flex: 1; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 16px; box-shadow: none; padding: 18px 20px 40px; display: flex; flex-direction: column; justify-content: flex-start; }
.rf-front .rf-hint { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; text-align: center; }

/* Mafia's team reminder, always visible under the role card. */
.team-reminder { margin: 12px 0 0; padding: 10px 14px; background: #fffdf5; border: 2px solid #2d282a; border-left: 8px solid #c03c29; border-radius: 12px; box-shadow: 3px 3px 0 #2d282a; font-size: 13px; line-height: 1.5; }
.team-reminder[hidden] { display: none; }

/* Night buttons: space below the names, and Confirm and Pass the same height. Pass reads clearly. */
#game .app-action { margin-top: 20px; gap: 10px; }
#game .app-action button { height: 52px; border-radius: 6px; }
#game .app-action .secondary { color: #2d282a; background: transparent; border: 2px solid #2d282a; box-shadow: none; }

/* Role card, as approved on the UI sheet: a cream card with a team-coloured edge,
   the role icon in a team-coloured tile, and the team name with a dot above it. */
.role-card.town { --tile: #5b9a82; }
.role-card.mafia { --tile: #c03c29; }
.role-card.neutral { --tile: #7f98a3; }
.role-card.town, .role-card.mafia, .role-card.neutral {
  background: #fffdf5; color: #2d282a; border: 3px solid var(--tile); border-radius: 16px;
  padding: 16px 18px 20px; height: auto; box-sizing: border-box;
}
.role-card .team-line { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; color: #2d282a; }
.role-card .team-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--tile); border: 2px solid #2d282a; }
.role-card .ic { width: 72px; height: 72px; border-radius: 16px; border: 2px solid #2d282a; background: var(--tile); display: grid; place-items: center; margin: 18px auto 0; box-shadow: 3px 3px 0 #2d282a; }
.role-card .ic::after { content: ""; width: 42px; height: 42px; background: #fffdf5; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.role-card h2 { font-size: 1.9rem; text-align: center; margin: 18px 0 18px; }
.role-card p.how { font-size: 0.85rem; line-height: 1.45; margin: 0 0 14px; }
.role-card p.how:last-child { margin-bottom: 0; }
.rf-front .role-card p.wins { color: inherit; }
.rf-back .rf-q { font-family: var(--font-display); font-size: 5rem; line-height: 1; color: #c7a94b; margin: 24px 0 0; }

/* Button states, as shown on the UI sheet. Real hover and press use the same rules as the
   .is-hover and .is-press classes, which the sheet uses to show each state side by side. */
button:not(:disabled) { transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, filter 0.15s ease; }
button:not(:disabled):hover,
button.is-hover:not(:disabled) { filter: brightness(1.06); }
button.secondary:not(:disabled):hover,
button.secondary.is-hover:not(:disabled) { background: color-mix(in srgb, currentColor 10%, transparent) !important; }
button:not(:disabled):active,
button.is-press:not(:disabled) { transform: translate(2px, 2px); box-shadow: none !important; filter: brightness(0.94); }
button.secondary:not(:disabled):active,
button.secondary.is-press:not(:disabled) { background: color-mix(in srgb, currentColor 18%, transparent) !important; }
button:not(:disabled):focus-visible,
button.is-focus:not(:disabled) { outline: 3px solid #c7a94b; outline-offset: 2px; }

/* Winner banner: the result is the first thing on the game-over screen, in the winning team's colour. */
.winner-banner {
  --win: #c03c29;
  background: var(--win); color: #fffdf5;
  border: 3px solid #2d282a; border-radius: 16px; box-shadow: 6px 6px 0 #2d282a;
  padding: 22px 24px; margin-bottom: 18px; text-align: center;
  animation: winner-pop 0.6s ease-out;
}
.winner-banner[data-team="town"] { --win: #5b9a82; color: #2d282a; }
.winner-banner[data-team="neutral"] { --win: #7f98a3; color: #2d282a; }
.winner-banner[data-team="mafia"] { --win: #c03c29; color: #fffdf5; }
.winner-banner[data-team="draw"] { --win: #b8b0a4; color: #2d282a; }
.winner-banner .winner-icon svg { width: 56px; height: 56px; }
.winner-banner .winner-role-icon { display: block; flex: none; width: 56px; height: 56px; margin: 0 auto; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.winner-banner .winner-role-icon[hidden] { display: none; }
.winner-banner .winner-icons { display: flex; justify-content: center; align-items: center; gap: 12px; }
.winner-banner .winner-icons .winner-icon svg { width: 40px; height: 40px; }
.winner-banner .winner-icons .winner-role-icon { width: 40px; height: 40px; margin: 0; }
body.phone .winner-banner .winner-icons .winner-icon svg, body.phone .winner-banner .winner-icons .winner-role-icon { width: 30px; height: 30px; }
.winner-banner h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; margin: 6px 0 0; color: inherit; }
.winner-banner .winner-sub { margin: 16px 0 0; font-weight: 600; font-size: 0.85rem; line-height: 1.4; }
@keyframes winner-pop { 0% { transform: scale(0.9); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* Confetti falls over the whole laptop screen for a few seconds at the end of a game. */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confetti i { position: absolute; top: -14px; width: 10px; height: 14px; border-radius: 2px; opacity: 0.95; animation-name: confetti-fall; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes confetti-fall { to { transform: translate3d(var(--dx), 110vh, 0) rotate(720deg); } }

/* Phone winner banner: same size as before, with the team colour and icon. */
body.phone .winner-banner { padding: 16px 18px; margin: 0 0 14px; animation: none; }
body.phone .winner-banner h2 { font-size: 2rem; margin: 4px 0 0; }
body.phone .winner-banner .winner-icon svg { width: 36px; height: 36px; }
body.phone .winner-banner .winner-role-icon { width: 36px; height: 36px; }

/* Game review on the phone: one card per player, with their role icon and name. */
.review-card { display: flex; align-items: center; gap: 12px; list-style: none; background: #fffdf5; color: #2d282a; border: 2px solid #2d282a; border-left: 8px solid var(--tile); border-radius: 12px; box-shadow: 3px 3px 0 #2d282a; padding: 10px 12px; margin: 0 0 12px; }
.review-card.t-town { --tile: #5b9a82; }
.review-card.t-mafia { --tile: #c03c29; }
.review-card.t-neutral { --tile: #7f98a3; }
.rv-icon { flex: none; width: 48px; height: 48px; border-radius: 12px; border: 2px solid #2d282a; background: var(--tile); display: grid; place-items: center; }
.rv-icon::after { content: ""; width: 28px; height: 28px; background: #fffdf5; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.rv-text { min-width: 0; }
.rv-role { font-weight: 700; color: #5e5557; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* Game review cards sit two to a row on the phone. */
#my-marks.summary-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; padding: 0; margin: 0; }
#my-marks .review-card { min-width: 0; gap: 8px; padding: 8px 10px; margin: 0 0 10px; }
#my-marks .rv-icon { width: 40px; height: 40px; }
#my-marks .rv-icon::after { width: 24px; height: 24px; }
#my-marks .rv-text strong { display: block; overflow-wrap: anywhere; line-height: 1.2; }
#my-marks .summary-thought { font-size: 0.8rem; }

/* The Afterlife as a full-screen chat: the notice at the top, messages in the middle,
   and the text box pinned to the bottom above the tab bar. */
.afterlife-chat { position: fixed; left: 0; right: 0; top: var(--al-top, 56px); bottom: var(--al-bottom, 66px); display: flex; flex-direction: column; background: #efecdb; z-index: 5; }
.afterlife-chat[hidden] { display: none; }
.al-head { padding: 12px 16px 10px; background: #2d282a; color: #efecdb; border-bottom: 2px solid #2d282a; }
.al-title { display: flex; align-items: center; gap: 8px; color: #c7a94b; }
.al-title h3 { margin: 0; color: #efecdb; }
.al-notice { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(239, 236, 219, 0.12); color: #efecdb; font-size: 0.82rem; line-height: 1.4; }
.al-log { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.al-log:empty::before { content: "No messages yet."; margin: auto; color: #5e5557; font-size: 0.9rem; }
.al-msg { align-self: flex-start; max-width: 78%; padding: 8px 12px; border-radius: 16px; background: #fffdf5; border: 2px solid #2d282a; font-size: 0.95rem; line-height: 1.35; overflow-wrap: anywhere; }
.al-msg.mine { align-self: flex-end; background: #677077; color: #fffdf5; }
.al-name { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: #5e5557; margin-bottom: 2px; }
.al-form { display: flex; gap: 8px; padding: 10px 12px; background: #fffdf5; border-top: 2px solid #2d282a; }
.al-form input { flex: 1; min-width: 0; }

/* On the phone, the top bar and the tab bar run edge to edge, past the page's side gutters. */
body.phone #game .app-top,
body.phone #game .app-tabs {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

/* The Afterlife text box: a light field with a readable grey hint. */
.al-form input { background: #fffdf5; color: #2d282a; border: 2px solid #2d282a; }
.al-form input::placeholder { color: #8c8487; opacity: 1; }

/* Phone game over: less space between the winner, the team line and the game review. */
body.phone #game .winner-banner { margin-bottom: 10px; }
body.phone #game .team-reminder { margin: 0 0 10px; }
body.phone #game .panel { margin-bottom: 10px; }
body.phone #game #my-marks.summary-list { gap: 0 8px; }
body.phone #game #my-marks .review-card { margin-bottom: 8px; }

/* The notes and marks panels on the Journal tab fill the width of the screen. */

/* Mafia members see their role next to their name in the top bar. */

/* Teammates' night picks, written out as a line above the names. */
.team-picks { margin: 8px 0 12px; padding: 10px 12px; font-size: 0.85rem; line-height: 1.4; color: #a8453a; font-weight: 700; background: #fffdf5; border: 2px solid #2d282a; border-left: 8px solid #a8453a; border-radius: 14px; box-shadow: 3px 3px 0 #2d282a; }

/* The private notes panel on the Journal tab fills the width of the screen. */
body.phone #notes-panel { width: 100%; box-sizing: border-box; }

/* The marks in the Game review use the same colours as the journal tags. */
.summary-thought.mark-trusted { color: var(--mustard-deep); font-weight: 700; }
.summary-thought.mark-suspicious { color: var(--rust); font-weight: 700; }
.summary-thought.mark-evil { color: var(--oxblood); font-weight: 700; }

/* The Game review sits on the page background, so the player cards are the only white cards. */
body.phone #summary-panel { background: transparent; box-shadow: none; border: 0; padding-left: 0; padding-right: 0; }

/* The Game review cards are bigger: larger icon, text and spacing. */
#my-marks .review-card { gap: 10px; padding: 12px; margin-bottom: 12px; }
#my-marks .rv-icon { width: 52px; height: 52px; }
#my-marks .rv-icon::after { width: 32px; height: 32px; }
#my-marks .rv-text strong { font-size: 1.1rem; }
#my-marks .rv-role { font-size: 0.8rem; }
#my-marks .summary-thought { font-size: 0.9rem; }

/* The Pass and Confirm labels sit in the middle of their buttons. */
.app-action button { display: flex; align-items: center; justify-content: center; text-align: center; }

/* The Afterlife text box shows the app's gold ring when you tap it, not the browser's blue. */
.al-form input:focus { outline: none; box-shadow: 0 0 0 3px #c7a94b; }

/* The ghost icon sits beside the heading and the button text. */
.ghost-title { display: flex; align-items: center; gap: 8px; }
.ghost-title svg { width: 24px; height: 24px; flex: none; }
#go-afterlife { display: inline-flex; align-items: center; gap: 6px; }

/* A system line in the Afterlife chat, such as someone joining, in light grey. */
.al-system { align-self: center; list-style: none; font-size: 0.8rem; font-style: italic; color: #9a9396; text-align: center; margin: 4px 0; }

/* In the game, the journal tiles are cream like the other tiles, not dark. The picked tile stays gold. */
#game:not([hidden]) .choice { background: #fffdf5; color: #2d282a; box-shadow: 3px 3px 0 #2d282a; }
#game:not([hidden]) .choice.picked { background: var(--mustard); color: var(--ink); }

/* Once you are locked in, the confirmation sits at the top of the screen so it is easy to see. */
.lock-banner { position: sticky; top: 0; z-index: 4; background: #fffdf5; border: 3px solid #2d282a; border-left: 10px solid #5b9a82; box-shadow: 4px 4px 0 #2d282a; padding: 14px 16px; margin: 0 0 14px; font-size: 1.05rem; }
.lock-banner strong { display: block; font-size: 1.15rem; }
.lock-banner .tick { background: #5b9a82; }

/* The Go to the Afterlife button matches the game's gold buttons, with dark text. */
#game:not([hidden]) #go-afterlife { background: #c7a94b; color: #2d282a; border: 2px solid #2d282a; border-radius: 6px; box-shadow: 4px 4px 0 #2d282a; font-weight: 700; width: 100%; justify-content: center; padding: 0.8rem; margin-top: 12px; }
#game:not([hidden]) #go-afterlife .icon-ghost { color: #2d282a; }

/* The Go to the Afterlife button wins over the outlined style, so its label is always dark on gold. */
#game:not([hidden]) #go-afterlife, #game:not([hidden]) #go-afterlife:hover { background: #c7a94b !important; color: #2d282a !important; border-color: #2d282a !important; }

/* The You have died card is black with cream text, like the Afterlife header. */
#game:not([hidden]) #out-panel { background: #2d282a !important; color: #efecdb !important; border: 2px solid #2d282a; box-shadow: 4px 4px 0 #c7a94b; }
#game:not([hidden]) #out-panel h3 { color: #efecdb; }
#game:not([hidden]) #out-panel p { color: #efecdb; }
#game:not([hidden]) #out-panel .ghost-title svg { color: #c7a94b; }

/* Innocent is green, matching the town. Evil keeps its red. */
#game:not([hidden]) .choice.tag-trusted { border-color: #5b9a82; }
#game:not([hidden]) .choice.tag-trusted .mark { color: #3f7a64; }
.summary-thought.mark-trusted { color: #3f7a64 !important; }

/* The Game review has no white container: the cards sit straight on the page. This rule beats the game's panel style. */
#game:not([hidden]) #summary-panel { background: transparent !important; box-shadow: none !important; border: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
/* More room inside each review card. */
#game:not([hidden]) #my-marks .review-card { padding: 14px 16px; gap: 12px; }
#game:not([hidden]) #my-marks .rv-text { padding-right: 2px; }
/* Phone: two review cards side by side, so the icons, padding and text all shrink to fit. */
body.phone #game #my-marks .review-card { gap: 6px; padding: 8px 8px 8px 10px; border-left-width: 6px; min-width: 0; }
body.phone #game #my-marks .rv-icon { width: 34px; height: 34px; border-radius: 9px; flex: none; }
body.phone #game #my-marks .rv-icon::after { width: 19px; height: 19px; }
body.phone #game #my-marks .rv-text { min-width: 0; flex: 1; }
body.phone #game #my-marks .rv-text strong { font-size: 0.95rem; line-height: 1.15; overflow-wrap: anywhere; }
body.phone #game #my-marks .rv-role { font-size: 0.66rem; letter-spacing: 0.04em; }
body.phone #game #my-marks .summary-thought { font-size: 0.74rem; line-height: 1.25; }

/* The journal names sit two to a row, to save space. */
#game:not([hidden]) #journal.choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#game:not([hidden]) #journal.choice-grid .choice { min-height: 76px; padding: 8px 6px; font-size: 1.05rem; }

/* More room between the role card, the question, and the list of names on the night screen. */
#game:not([hidden]) .role-flip { margin-bottom: 22px; }
#game:not([hidden]) #action-title { margin: 8px 0 8px; }
#game:not([hidden]) #action-status { margin: 0 0 18px; }
#game:not([hidden]) #targets { margin-top: 4px; }

/* The Blackmailed card is black with white text, and its heading is gold. */
#game:not([hidden]) #silenced-panel { background: #2d282a !important; color: #ffffff !important; border: 2px solid #2d282a; box-shadow: 4px 4px 0 #c7a94b; }
#game:not([hidden]) #silenced-panel p { color: #ffffff; }
#game:not([hidden]) #silenced-panel strong { color: #c7a94b; }

/* Alerts: passed, locked in, the Jester's revenge and the Mayor's reveal all share this style. */
.alert { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; background: #fffdf5; color: #2d282a; border: 3px solid #2d282a; border-left: 10px solid var(--tone, #5b9a82); border-radius: 16px; box-shadow: 4px 4px 0 #2d282a; padding: 12px 14px; margin: 0 0 14px; }
.alert[hidden] { display: none; }
.alert.tone-green { --tone: #5b9a82; }
.alert.tone-blue { --tone: #7f98a3; }
.alert.tone-gold { --tone: #c7a94b; }
.alert-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #2d282a; background: var(--tone, #5b9a82); color: #fffdf5; display: grid; place-items: center; font-weight: 700; }
.alert-icon.role::after { content: ''; width: 20px; height: 20px; background: #fffdf5; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.alert-text { min-width: 0; flex: 1; display: grid; gap: 2px; }
.alert-text strong { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; line-height: 1.2; }
.alert-text span { font-size: 0.85rem; color: #5e5557; line-height: 1.35; }
.alert-close { flex: none; align-self: flex-start; background: none; border: 0; box-shadow: none; padding: 0 4px; font-size: 1.4rem; line-height: 1; color: #2d282a; cursor: pointer; }
/* Floating toast: sits over the page until closed. */
.toast { position: fixed; top: 12px; left: 12px; right: 12px; margin: 0; z-index: 70; }
.toast.pop { animation: toast-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes toast-in { from { transform: translateY(-16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#game .toast { max-width: 460px; left: 50%; right: auto; transform: translateX(-50%); width: min(92vw, 460px); }
#game .toast.pop { animation: toast-in-centre 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes toast-in-centre { from { transform: translate(-50%, -16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* The close button is just a plain x, not a gold button. */
.alert .alert-close, #lobby .alert .alert-close, #lobby button.alert-close { all: unset; display: inline-block; background: transparent !important; border: 0 !important; box-shadow: none !important; cursor: pointer; font-size: 1.4rem; line-height: 1; padding: 2px 6px; color: #2d282a; align-self: flex-start; }

/* Laptop toasts: bigger, centred at the top of the screen. */
body.display .toast { left: 50%; right: auto; transform: translateX(-50%); width: min(620px, 90vw); padding: 20px 24px; gap: 18px; top: 18px; }
body.display .toast.pop { animation: toast-in-centre 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
body.display .toast .alert-icon { width: 58px; height: 58px; font-size: 1.6rem; }
body.display .toast .alert-icon.role::after { width: 34px; height: 34px; }
body.display .toast .alert-text strong { font-size: 1.7rem; line-height: 1.15; }
body.display .toast .alert-text span { font-size: 1.1rem; }
body.display .toast .alert-close { font-size: 2.2rem; padding: 0 6px; }

/* Event log: one card per day, with each night and day event inside it. */
.app-log { list-style: none; padding: 0; }
.log-group { list-style: none; margin: 0 0 24px; }
.log-card { background: #fffdf5; color: #2d282a; border: 2px solid #2d282a; border-radius: 14px; box-shadow: 3px 3px 0 #2d282a; padding: 8px 14px 4px; }
.log-card-title { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; margin: 2px 0 4px; padding-bottom: 6px; border-bottom: 2px solid #2d282a; }
.log-entry { padding: 9px 0; font-size: 0.95rem; border-bottom: 1px dashed rgba(45, 40, 42, 0.3); }
.log-entry:last-child { border-bottom: 0; }
.log-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.log-icon { display: inline-flex; align-items: center; color: #8a6d1f; }
.log-tag { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.log-text { line-height: 1.35; }

/* Heading above the Mafia team lines. */
.team-picks .team-heading { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; color: #2d282a; text-transform: none; letter-spacing: 0; margin-bottom: 6px; }

/* Mafia team: the name in each line is dark, so it reads apart from the red label and pick. */
.team-picks { font-weight: 400; }
.team-picks .team-line strong { color: inherit; font-weight: 700; }
.team-picks .team-who { color: #8a8580; font-weight: 400; }
.team-picks .team-pick { color: #2d282a; font-weight: 400; }

/* The word picks is plain and black, not bold or red. */
.team-picks .team-verb { color: #2d282a; font-weight: 400; }

/* Laptop: the night is dark, and the controls sit beside the sound button. */
html[data-phase="night"] body.display { background: #403a3d; background-image: none; }

/* Laptop announcements: a taller panel, so more of the game is visible without scrolling. */
body.display #game .log { max-height: calc(100vh - 230px); min-height: 420px; overflow-y: auto; padding-right: 6px; }

/* Laptop settings: one button at the bottom right, with a small menu above it. */
.settings { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 5; }
.settings-menu { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #fffdf5; border: 2px solid #2d282a; border-radius: 14px; box-shadow: 4px 4px 0 #2d282a; min-width: 230px; }
.settings-menu[hidden] { display: none; }
.settings-menu .settings-item { width: 100%; }
.settings-menu .sound-toggle { position: static; }
.settings-btn { min-width: 120px; }
.settings #game-error { margin: 0; max-width: 260px; text-align: right; }
body:has(#lobby:not([hidden])) #skip, body:has(#lobby:not([hidden])) #reset { display: none; }

/* Laptop phase card: the timer sits in the top right, with the clock icon. */
#game:not([hidden]) .panel:has(#countdown) { position: relative; }
#countdown.countdown { position: absolute; top: 18px; right: 22px; display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 1.6rem; color: #c7a94b; font-variant-numeric: tabular-nums; margin: 0; }
#countdown.countdown svg { flex: none; }

/* The Settings button is solid and readable on both the cream lobby and the game screens. */
#settings .settings-btn, body .settings-btn { background: #2d282a !important; color: #efecdb !important; border: 2px solid #2d282a !important; box-shadow: 3px 3px 0 #c7a94b; font-family: var(--brand-mono, monospace); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
#settings .settings-btn:hover { background: #3d3739 !important; }

body:has(#lobby:not([hidden])) #settings-btn, body:has(#lobby:not([hidden])) #game-error { display: none !important; }
body:has(#lobby:not([hidden])) #settings-menu { display: flex !important; background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; }

/* In the game, the sound button is readable: dark text on cream. The home screen is untouched. */
body:not(:has(#lobby:not([hidden]))) #settings-menu .sound-toggle { background: #fffdf5; color: #2d282a; border: 2px solid #2d282a; font-weight: 700; }

/* Home screen: the sound button looks as it did before, cream with a dark outline and shadow. */
body:has(#lobby:not([hidden])) #settings-menu #sound { background: #fffdf5 !important; color: #2d282a !important; border: 2px solid #2d282a !important; box-shadow: 3px 3px 0 #2d282a !important; border-radius: 999px; font-weight: 700; }

/* Settings menu: every option is dark text on cream, so none is unreadable. */
#settings-menu .settings-item { background: #fffdf5 !important; color: #2d282a !important; border: 2px solid #2d282a !important; opacity: 1 !important; font-weight: 700; }
#settings-menu .settings-item:disabled { opacity: 0.5 !important; }

/* Night on the laptop: the page is dark blue, beating the game screen background. */
html[data-phase="night"] body:has(#game:not([hidden])) { background: #403a3d !important; color: #e4ebee; }

/* Laptop announcements: the day is a heading inside the panel, not a card within a card. */
body.display .log-card { background: transparent; border: 0; box-shadow: none; padding: 0; color: inherit; }
body.display .log-card-title { border-bottom: 2px solid currentColor; }

/* The End game confirm works from the game screen too, and End game stays red in the Settings menu. */
#settings-menu #reset.settings-item { background: #7a2a20 !important; color: #efecdb !important; border-color: #7a2a20 !important; }

/* Teammate pills on the target list are red with white text, selected or not. */
.pick .mark { background: #a8453a !important; color: #fffdf5 !important; border-color: #2d282a; }

/* Laptop game over: the town tiles carry the review, and Back to lobby is a big button. */
.review-note { font-size: 0.8rem; color: #5e5557; margin-top: 2px; }
.lobby-big { display: block; width: 100%; margin-top: 16px; padding: 18px 20px; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.02em; background: #7a2a20; color: #efecdb; border: 3px solid #2d282a; border-radius: 16px; box-shadow: 4px 4px 0 #2d282a; cursor: pointer; }
.lobby-big[hidden] { display: none; }
.lobby-big:hover { background: #8e3328; }

/* Laptop phase card: the subtitle is larger, darker and heavier so the night rules are easy to read. */
body.display #phase-sub { font-size: 1.2rem; line-height: 1.5; font-weight: 700; color: var(--ink); max-width: 46ch; }

/* Bots are marked with a small light line inside their card on the laptop. */
.bot-note { font-size: 0.75rem; font-weight: 400; color: var(--muted); letter-spacing: 0.02em; margin-top: 2px; }

/* Player names on the laptop town tiles sit in a coloured pill, as in the lobby. */
.tile-name { display: inline-block; font-family: var(--font-body); font-size: 1.1rem; font-weight: 700; padding: 4px 14px; border-radius: 999px; border: 2px solid var(--ink); }

/* Out players: the card fades and a small ghost sits above the name. */
.ghost-icon { display: block; width: 20px; height: 20px; margin-bottom: 4px; }
.ghost-icon svg { width: 20px; height: 20px; display: block; }

/* Town tiles: Bot sits in the top right corner, a ghost sits inside the name pill when out, and roles are team-coloured pills with their icon. */
.tile { position: relative; }
.bot-note { position: absolute; top: 10px; right: 12px; margin: 0; font-size: 0.7rem; font-weight: 400; color: var(--muted); letter-spacing: 0.02em; }
.tile-name .ghost-icon { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; }
.tile-name .ghost-icon svg { width: 16px; height: 16px; display: block; }
.role-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; border: 2px solid var(--ink); color: #fffdf5; font-size: 0.8rem; font-weight: 700; }
.role-pill-icon { width: 20px; height: 20px; border-radius: 50%; background: #fffdf5; display: inline-block; position: relative; }
.role-pill-icon::after { content: ""; position: absolute; inset: 3px; background: var(--ink); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }

/* Laptop town tiles: a light grey-cream background so the name pills stand out. */
body.display .tile { background: #e8e5da; }

/* Laptop votes list: name pills with bold counts, most votes first. */
body.display .tally-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #d8d2bd; }
body.display .tally-row:last-child { border-bottom: 0; }
body.display .tally-name { display: inline-block; font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; padding: 4px 14px; border-radius: 999px; border: 2px solid var(--ink); }
body.display .tally-count { font-size: 1.1rem; }

/* Laptop: 'Everyone has voted.' shows in green and bold. */
body.display #progress.all-voted { color: #2f7d46; font-weight: 700; }

/* Afterlife chat: other players' messages are dark on the cream bubble so they are easy to read. */
.afterlife-chat .al-msg:not(.mine) { color: #2d282a; }

/* Laptop: the status line under the phase title, such as "Everyone with a night power has chosen.", is bold and dark. */
body.display #progress:not(.all-voted) { font-weight: 400; color: #7a2a20; }

/* Laptop countdown: a bit bigger, with a bigger clock icon. */
#countdown.countdown { font-size: 2rem; gap: 8px; }
#countdown.countdown svg { width: 1.25em; height: 1.25em; }

/* Laptop night card: a lighter story line, then a bold yellow warning with an icon. */
body.display #phase-sub { font-weight: 400; }
body.display .phase-warn { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-weight: 700; color: #c7a94b; font-size: 1.05rem; }
body.display .phase-warn svg { flex: none; }

/* Death announcement: the screen splashes red, with a skull above the name. */
.death-overlay { background: rgba(150, 22, 14, 0.94); }
.death-skull { display: flex; justify-content: center; color: #f1e6d2; margin-bottom: 0.6rem; }
.death-skull svg { width: clamp(56px, 14vw, 84px); height: auto; }

/* Laptop game over: the "thought" lines are smaller and tighter, so the town cards stay short. */
body.display .review-note { font-size: 0.72rem; line-height: 1.3; margin-top: 1px; }

/* Laptop game over: a thinker's colour dot. Hover it to see their name. */
body.display .thought-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #2d282a; margin-right: 2px; vertical-align: middle; cursor: default; }

/* Laptop game over: the name tooltip on a thought dot matches the rest of the app. */
body.display .thought-dot { position: relative; }
body.display .thought-dot:hover::after { content: attr(data-name); position: absolute; left: -4px; bottom: calc(100% + 8px); z-index: 5; background: #2d282a; color: #efecdb; font-family: var(--font-body); font-size: 0.74rem; font-weight: 400; line-height: 1.2; padding: 6px 10px; border-radius: 8px; white-space: nowrap; box-shadow: 3px 3px 0 #c7a94b; pointer-events: none; }

/* Laptop night card: more space between the story line, the warning and the status line. */
body.display #phase-sub { line-height: 1.7; margin: 0; }
body.display .phase-warn { margin: 22px 0 0; line-height: 1.6; }
body.display #progress { margin: 22px 0 0; line-height: 1.6; }

/* Laptop controls: Skip sits beside the gear icon and needs a three-second hold. */
body.display .settings-row { display: flex; align-items: center; gap: 10px; }
body.display .settings-btn { width: 56px; height: 56px; min-width: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* Laptop Skip button: a fresh, self-contained control. Solid cream pill, dark outline and shadow, and a solid green fill that grows while you hold it. */
body.display .skip-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 22px; border-radius: 999px;
  background: #fffdf5; background-color: #fffdf5; opacity: 1; color: #2d282a;
  border: 2px solid #2d282a; box-shadow: 3px 3px 0 #2d282a;
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
body.display .skip-btn .skip-content { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; }
body.display .skip-btn .skip-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #7fc792; z-index: 0; }
body.display .skip-btn.holding .skip-fill { animation: skip-fill-btn 1s linear forwards; }
@keyframes skip-fill-btn { to { width: 100%; } }

/* Phone connection error: a clear message and a retry button. */
.connection-lost { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; box-sizing: border-box; background: #efecdb; }
.connection-lost[hidden] { display: none; }
.conn-card { background: #fffdf5; color: #2d282a; border: 3px solid #2d282a; border-radius: 16px; box-shadow: 5px 5px 0 #2d282a; padding: 28px 24px; max-width: 360px; text-align: center; }
.conn-icon { display: inline-flex; width: 72px; height: 72px; align-items: center; justify-content: center; border-radius: 50%; background: #c8402b; color: #fffdf5; border: 2px solid #2d282a; margin-bottom: 14px; }
.conn-card h2 { font-family: var(--brand-display); font-weight: 400; font-size: 1.7rem; line-height: 1.1; margin: 0 0 10px; }
.conn-card p { font-size: 0.95rem; line-height: 1.5; margin: 0 0 18px; }
#retry-btn { background: #c7a94b; color: #2d282a; border: 2px solid #2d282a; border-radius: 8px; box-shadow: 3px 3px 0 #2d282a; padding: 12px 22px; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }

.conn-status { font-size: 0.85rem; margin: 12px 0 0; min-height: 1.2em; color: #7a2a20; }
#retry-btn:disabled { opacity: 0.6; cursor: wait; }