/* Hollowmere — mood: "lantern light on black water".
   A candlelit, fog-bound fishing village at night. Near-black blue-green ground,
   bone ink, ONE accent (lantern amber). Sea-green is a *state* colour only,
   reserved for the Drowned side. Fraunces for voice, Jost for work. */

:root {
  --bg: #0e1413;
  --surface: #141d1b;
  --surface-2: #1b2623;
  --ink: #e8e1d3;
  --muted: #9aa097;
  --amber: #e0a54a;
  --sea: #78b3a4;

  --line: color-mix(in srgb, var(--ink) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 24%, transparent);
  --amber-soft: color-mix(in srgb, var(--amber) 14%, transparent);
  --amber-line: color-mix(in srgb, var(--amber) 55%, transparent);
  --sea-soft: color-mix(in srgb, var(--sea) 14%, transparent);
  --bone-soft: color-mix(in srgb, var(--ink) 8%, transparent);

  --radius: 10px;
  --gutter: clamp(1.1rem, 4.5vw, 3rem);
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body: 'Jost', 'Avenir Next', 'Segoe UI', sans-serif;
  --shadow: 0 12px 34px rgb(0 0 0 / 0.28);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(120% 60% at 80% -10%, color-mix(in srgb, var(--amber) 7%, transparent), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, color-mix(in srgb, var(--sea) 6%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* film grain: keeps the dark from banding into flat plastic */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#app { position: relative; z-index: 1; }

h1, h2, h3, h4, p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--amber); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

em, .it { font-family: var(--display); font-style: italic; font-weight: 400; }

.eyebrow {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--amber);
}
.eyebrow.muted { color: var(--muted); }
.muted { color: var(--muted); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.65rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink);
  font-weight: 500; font-size: 0.98rem; letter-spacing: 0.01em;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s;
}
.btn:hover:not(:disabled) { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--amber); border-color: var(--amber); color: var(--bg); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--amber) 86%, var(--ink)); border-color: transparent; }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }
.btn.primary:disabled { background: var(--surface-2); border-color: var(--line-strong); color: var(--muted); opacity: 1; }
.btn.small { min-height: 2.5rem; padding: 0.4rem 1rem; font-size: 0.9rem; }
.btn.block { width: 100%; }
.btn.quiet { border-color: transparent; color: var(--muted); }
.btn.quiet:hover:not(:disabled) { color: var(--ink); border-color: var(--line); }
.btn.on { border-color: var(--amber-line); background: var(--amber-soft); color: var(--ink); }

/* ------------------------------------------------------------------ forms */
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.input {
  width: 100%; min-height: 3rem; padding: 0.6rem 0.9rem;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s;
}
.input::placeholder { color: color-mix(in srgb, var(--ink) 34%, transparent); }
.input:hover { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.input:focus { outline: none; border-color: var(--amber); background: var(--bg); box-shadow: 0 0 0 3px var(--amber-soft); }
.input.code { text-transform: uppercase; letter-spacing: 0.5em; text-align: center; font-family: var(--display); font-size: 1.25rem; padding-left: 1.2rem; }

/* ------------------------------------------------------------------ home */
.home { min-height: 100vh; }
.hero {
  position: relative; overflow: hidden;
  padding: clamp(2.5rem, 7vw, 6rem) var(--gutter) clamp(3rem, 7vw, 5.5rem);
  isolation: isolate;
}
.hero-inner {
  max-width: 1160px; margin: 0 auto;
  display: grid; gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.hero h1 {
  font-family: var(--display); font-weight: 300; font-variation-settings: 'opsz' 144;
  font-size: clamp(3.6rem, 13vw, 8.6rem); line-height: 0.92; letter-spacing: -0.035em;
  margin: 1rem 0 1.4rem;
}
.hero h1 em { color: var(--amber); font-weight: 300; }
.hero .sub { font-size: clamp(1.1rem, 2.4vw, 1.35rem); color: color-mix(in srgb, var(--ink) 78%, transparent); max-width: 30ch; line-height: 1.5; font-weight: 300; }
.hero-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-art .glow {
  position: absolute; right: -10%; top: -6%; width: min(80vw, 760px); aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--amber) 20%, transparent) 0%, color-mix(in srgb, var(--amber) 6%, transparent) 38%, transparent 66%);
  animation: breathe 7s ease-in-out infinite;
}
.hero-art .fog {
  position: absolute; left: -20%; width: 140%; height: 38%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--ink) 9%, transparent), transparent 70%);
  filter: blur(18px);
}
.hero-art .fog.a { bottom: 4%; animation: drift 42s ease-in-out infinite alternate; }
.hero-art .fog.b { bottom: 24%; opacity: 0.7; animation: drift 64s ease-in-out infinite alternate-reverse; }
.hero-art .lantern { position: absolute; right: clamp(1rem, 7vw, 8rem); top: 0; width: clamp(70px, 14vw, 150px); opacity: 0.9; }
.hero-art .water { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; opacity: 0.55; }
@keyframes breathe { 50% { opacity: 0.72; transform: scale(1.04); } }
@keyframes drift { to { transform: translateX(9%); } }

.join-card {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  box-shadow: var(--shadow);
  display: grid; gap: 1.1rem;
  max-width: 440px;
}
.join-card h2 { font-family: var(--display); font-weight: 400; font-size: 1.45rem; line-height: 1.2; }
.join-card .or { display: flex; align-items: center; gap: 0.8rem; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; }
.join-card .or::before, .join-card .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.join-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; }
.invite-note { padding: 0.75rem 0.9rem; border-radius: var(--radius); background: var(--amber-soft); border: 1px solid var(--amber-line); font-size: 0.95rem; }
.invite-note b { font-family: var(--display); font-weight: 500; letter-spacing: 0.25em; }
.inline-error { color: var(--amber); font-size: 0.92rem; }

.section { padding: clamp(3rem, 7vw, 6rem) var(--gutter); border-top: 1px solid var(--line); }
.section-inner { max-width: 1160px; margin: 0 auto; }
.section h2 { font-family: var(--display); font-weight: 300; font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0.7rem 0 0; max-width: 18ch; }
.section h2 em { color: var(--amber); }

.steps { margin: 2.6rem 0 0; padding: 0; list-style: none; display: grid; gap: 2rem; }
.steps li { align-content: start; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: baseline; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.steps .n { font-family: var(--display); font-style: italic; font-weight: 300; font-size: 2.6rem; line-height: 1; color: var(--amber); min-width: 1.4ch; }
.steps h3 { font-family: var(--display); font-weight: 400; font-size: 1.35rem; margin-bottom: 0.35rem; }
.steps p { color: var(--muted); max-width: 44ch; font-weight: 300; }

.roles-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
.roles-head p { max-width: 38ch; color: var(--muted); font-weight: 300; }
.role-group { margin-top: 2.4rem; }
.role-group > .eyebrow { display: block; margin-bottom: 1rem; }
.role-group.evil > .eyebrow { color: var(--sea); }
.role-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.role-tile {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  transition: border-color 0.25s, background 0.25s;
}
.role-tile:hover { border-color: var(--line-strong); background: var(--surface); }
.role-tile h3 { font-family: var(--display); font-weight: 500; font-size: 1.2rem; line-height: 1.2; margin-bottom: 0.3rem; }
.role-tile p { color: var(--muted); font-size: 0.95rem; line-height: 1.55; font-weight: 300; }
.sigil { width: 2.4rem; height: 2.4rem; stroke: var(--amber); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.evil .sigil, .sigil.sea { stroke: var(--sea); }
.neutral .sigil { stroke: var(--ink); }
.role-group.neutral > .eyebrow { color: var(--muted); }
.role-tile h3 .from { display: inline-block; margin-left: 0.6rem; font-family: var(--body); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; vertical-align: 2px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.05rem 0.45rem; white-space: nowrap; }

.foot { padding: 2.2rem var(--gutter) 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; text-align: center; }
.foot em { color: var(--ink); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

@media (min-width: 900px) {
  .hero-art .lantern { right: 44%; width: 110px; }
  .hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 4rem; }
  .join-card { justify-self: end; width: 100%; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .steps li { grid-template-columns: 1fr; gap: 0.7rem; }
}

/* ------------------------------------------------------------------ loading */
.center-screen { min-height: 100vh; display: grid; place-content: center; text-align: center; gap: 0.8rem; padding: var(--gutter); }
.center-screen h2 { font-family: var(--display); font-weight: 300; font-size: 2rem; }
.flame { width: 14px; height: 14px; border-radius: 50%; background: var(--amber); margin: 0 auto; box-shadow: 0 0 24px 6px color-mix(in srgb, var(--amber) 50%, transparent); animation: breathe 2.4s ease-in-out infinite; }

/* ------------------------------------------------------------------ top bar */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.7rem max(var(--gutter), calc((100% - 1280px) / 2 + var(--gutter)));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.wordmark { font-family: var(--display); font-weight: 400; font-size: 1.25rem; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.wordmark em { color: var(--amber); }
.bar-mid { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.code-pill {
  font-family: var(--display); font-weight: 500; letter-spacing: 0.22em; font-size: 0.95rem;
  padding: 0.2rem 0.7rem 0.2rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: transparent; color: var(--ink);
}
.code-pill:hover { border-color: var(--amber-line); }
.phase { display: flex; align-items: center; gap: 0.5rem; font-family: var(--display); font-style: italic; font-size: 1.05rem; white-space: nowrap; }
.phase svg { width: 17px; height: 17px; stroke: var(--amber); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tide { display: flex; align-items: center; gap: 0.55rem; }
.tide-label { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.tide-marks { display: flex; gap: 4px; }
.tide-marks i { width: 14px; height: 18px; border: 1px solid var(--line-strong); border-radius: 3px; display: block; position: relative; overflow: hidden; }
.tide-marks i.on { border-color: var(--amber); }
.tide-marks i.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 30%; background: var(--amber); }
.conn-banner { background: var(--amber); color: var(--bg); text-align: center; font-size: 0.9rem; font-weight: 500; padding: 0.35rem; position: sticky; top: 0; z-index: 30; }

@media (max-width: 640px) {
  .tide-label, .code-pill { display: none; }
  .bar { padding-top: 0.6rem; padding-bottom: 0.6rem; }
}

/* ------------------------------------------------------------------ lobby */
.lobby { max-width: 1280px; margin: 0 auto; padding: clamp(1.8rem, 5vw, 4rem) var(--gutter) 4rem; display: grid; gap: 2.4rem; }
.lobby-head h1 { font-family: var(--display); font-weight: 300; font-size: clamp(2.3rem, 7vw, 4.4rem); line-height: 1; letter-spacing: -0.03em; margin-top: 0.6rem; }
.lobby-head h1 em { color: var(--amber); }
.code-big { font-family: var(--display); font-weight: 300; font-size: clamp(3.2rem, 17vw, 7.5rem); letter-spacing: 0.14em; line-height: 1; margin: 0.4rem 0 1.1rem -0.04em; color: var(--ink); }
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 75%, transparent); }
.panel-pad { padding: clamp(1.1rem, 3vw, 1.6rem); }
.panel h2, .panel h3.ph { font-family: var(--display); font-weight: 400; font-size: 1.3rem; }
.roster { list-style: none; margin: 1rem 0 0; padding: 0; }
.roster li { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.roster li:first-child { border-top: 0; }
.roster .num { font-family: var(--display); font-style: italic; color: var(--muted); width: 1.8rem; font-size: 0.95rem; }
.roster .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.roster .empty .nm { color: color-mix(in srgb, var(--ink) 30%, transparent); font-weight: 300; font-style: italic; font-family: var(--display); }
.tag { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.15rem 0.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--muted); white-space: nowrap; font-weight: 500; line-height: 1.5; }
.tag.amber { color: var(--amber); border-color: var(--amber-line); }
.tag.sea { color: var(--sea); border-color: color-mix(in srgb, var(--sea) 50%, transparent); }
.count-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.count-line .big { font-family: var(--display); font-size: 1.1rem; font-style: italic; color: var(--muted); }
.meter { height: 3px; background: var(--line); border-radius: 3px; margin-top: 0.9rem; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--amber); transition: width 0.4s ease; }
.start-box { display: grid; gap: 0.8rem; margin-top: 1.4rem; }
.hint { color: var(--muted); font-size: 0.92rem; font-weight: 300; }
.dist dt { font-family: var(--display); font-size: 1.05rem; margin-top: 1rem; }
.dist dd { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.95rem; font-weight: 300; }
.dist dt:first-child { margin-top: 0.6rem; }
.x-btn { background: none; border: 1px solid transparent; color: var(--muted); border-radius: var(--radius); font-size: 0.8rem; padding: 0.25rem 0.6rem; min-height: 2rem; }
.x-btn:hover { color: var(--ink); border-color: var(--line-strong); }
@media (min-width: 880px) { .lobby-grid { grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: start; } }

/* ------------------------------------------------------------------ game layout */
.game-grid { max-width: 1280px; margin: 0 auto; padding: 1.2rem var(--gutter) 3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; min-width: 0; }
@media (min-width: 960px) {
  .game-grid { grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.85fr); gap: 2.2rem; padding-top: 2rem; }
  .col-side { position: sticky; top: 4.4rem; }
}

/* role card */
.role-card { position: relative; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.role-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--amber); }
.role-card.evil::before { background: var(--sea); }
.role-card.neutral::before { background: var(--ink); opacity: 0.7; }
.role-card.neutral { background: linear-gradient(180deg, var(--bone-soft), transparent 70%), var(--surface); }
.role-body .status { margin-top: 0.8rem; font-family: var(--display); font-style: italic; color: var(--ink); font-size: 1rem; }
.role-card.evil { background: linear-gradient(180deg, var(--sea-soft), transparent 70%), var(--surface); }
.role-toggle { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: center; text-align: left; background: none; border: 0; padding: 1rem 1.2rem; }
.role-toggle .sigil { width: 2.1rem; height: 2.1rem; }
.role-toggle h2 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; letter-spacing: -0.01em; }
.role-toggle .chev { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 1.6; transition: transform 0.25s; }
.role-card.open .chev { transform: rotate(180deg); }
.role-body { display: none; padding: 0 1.2rem 1.2rem; }
.role-card.open .role-body { display: block; }
.role-body p { color: color-mix(in srgb, var(--ink) 82%, transparent); font-weight: 300; max-width: 52ch; }
.role-body .allies { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--sea); }
.ghost-note { padding: 0.8rem 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--display); font-style: italic; }

/* village seats */
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.section-title h2 { font-family: var(--display); font-weight: 400; font-size: 1.3rem; }
.section-title span { color: var(--muted); font-size: 0.85rem; }
.seats { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .seats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seat { position: relative; }
.seat-in {
  width: 100%; text-align: left; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: 0.7rem; align-items: center;
  padding: 0.7rem 0.9rem; min-height: 3.6rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
button.seat-in { cursor: pointer; }
button.seat-in:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-2); }
button.seat-in:disabled { cursor: default; color: var(--ink); }
button.seat-in:disabled.off { opacity: 0.45; }
.seat .num { font-family: var(--display); font-style: italic; color: var(--muted); font-size: 0.95rem; text-align: right; }
.seat .who { min-width: 0; }
.seat .name-line { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.seat .nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.seat .sub { display: block; margin-top: 0.15rem; font-size: 0.82rem; color: var(--muted); font-weight: 300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .sub b { color: var(--ink); font-weight: 400; }
.seat .end { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.seat.dead .seat-in { background: transparent; border-style: dashed; }
.seat.dead .nm { text-decoration: line-through; text-decoration-color: var(--line-strong); color: var(--muted); font-weight: 400; }
.seat.me .seat-in { border-color: var(--line-strong); }
.seat.chosen .seat-in { border-color: var(--amber); background: var(--amber-soft); box-shadow: inset 3px 0 0 var(--amber); }
.seat.myvote .seat-in { border-color: var(--amber-line); box-shadow: inset 3px 0 0 var(--amber); }
.seat.pickable .seat-in:hover { border-color: var(--amber-line); }
.seat.evil-ally .seat-in { border-color: color-mix(in srgb, var(--sea) 38%, transparent); }
.dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-strong); display: inline-block; flex: none; }
.dot.on { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 10px color-mix(in srgb, var(--amber) 55%, transparent); }
.dot.away { border-style: dashed; }
.state { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.state.done { color: var(--ink); }
.pips { display: flex; gap: 3px; }
.pips i { width: 7px; height: 14px; border-radius: 2px; border: 1px solid var(--line-strong); }
.pips i.on { background: var(--amber); border-color: var(--amber); }
.slot-badge { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bg); background: var(--amber); padding: 0.1rem 0.5rem; border-radius: var(--radius); font-weight: 600; }

/* dense village (13+ players): two compact columns at every width */
.seats.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.dense .seat-in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.45rem; padding: 0.5rem 0.55rem; min-height: 3.5rem; align-items: start; }
.dense .num { font-size: 0.78rem; width: 1.15rem; padding-top: 0.12rem; }
.dense .name-line { flex-wrap: nowrap; }
.dense .nm { font-size: 0.9rem; line-height: 1.22; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.dense .sub { font-size: 0.73rem; margin-top: 0.2rem; }
.dense .end { flex-direction: row; align-items: center; gap: 0.35rem; align-self: start; padding-top: 0.15rem; }
.dense .st-tx { display: none; }
.dense .state { gap: 0; }
.dense .tag-line { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.3rem; }
.dense .tag { font-size: 0.56rem; letter-spacing: 0.1em; padding: 0 0.35rem; }
.dense .slot-badge { font-size: 0.56rem; padding: 0.05rem 0.35rem; }
.dense .seat.dead .nm { font-size: 0.86rem; }
.vcount { font-family: var(--display); font-size: 0.82rem; line-height: 1; color: var(--ink); background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: var(--radius); padding: 0.14rem 0.38rem; white-space: nowrap; }
.vcount small { font-size: 0.68rem; color: var(--muted); }
.seat-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: -0.2rem 0 0.7rem; color: var(--muted); font-size: 0.78rem; font-weight: 300; }
.seat-legend .vcount { margin-left: 0.6rem; }
.seat-legend .dot { margin-right: 0.1rem; }

/* action panel */
.action { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: 1.1rem 1.2rem 1.2rem; box-shadow: var(--shadow); }
.action h2 { font-family: var(--display); font-weight: 400; font-size: 1.45rem; line-height: 1.15; margin: 0.35rem 0 0.4rem; }
.action .help { color: var(--muted); font-weight: 300; font-size: 0.97rem; max-width: 50ch; }
.slots { display: grid; gap: 0.5rem; margin: 1rem 0 0; }
.slot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.8rem; text-align: left; padding: 0.6rem 0.9rem; min-height: 3rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: transparent; transition: border-color 0.2s, background 0.2s; }
.slot small { display: block; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.slot .val { font-weight: 500; }
.slot .val.none { font-family: var(--display); font-style: italic; font-weight: 300; color: color-mix(in srgb, var(--ink) 42%, transparent); }
.slot.active { border-style: solid; border-color: var(--amber); background: var(--amber-soft); }
.slot.filled:not(.active) { border-style: solid; border-color: var(--line-strong); }
.act-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.act-row .btn { flex: 1 1 auto; }
.wait { margin-top: 0.9rem; display: flex; align-items: center; gap: 0.6rem; color: var(--muted); font-size: 0.92rem; }
.gift { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: center; width: 100%; text-align: left; margin-top: 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; transition: border-color 0.2s, background 0.2s; }
.gift:hover { border-color: var(--ink); }
.gift.on { border-color: var(--amber-line); background: var(--amber-soft); }
.gift .sw { width: 2.5rem; height: 1.45rem; border: 1px solid var(--line-strong); border-radius: var(--radius); position: relative; flex: none; transition: border-color 0.2s, background 0.2s; }
.gift .sw i { position: absolute; top: 3px; left: 3px; width: 1rem; height: calc(1.45rem - 8px); border-radius: 4px; background: var(--muted); transition: transform 0.2s, background 0.2s; }
.gift.on .sw { border-color: var(--amber); }
.gift.on .sw i { transform: translateX(1.05rem); background: var(--amber); }
.gift .gt b { display: block; font-weight: 500; font-size: 0.98rem; }
.gift .gt small { display: block; color: var(--muted); font-weight: 300; font-size: 0.82rem; line-height: 1.4; margin-top: 0.15rem; }
.tally-box { margin-top: 1rem; padding: 0.8rem 0.9rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.tally-box .tl { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); font-weight: 500; }
.tally-box.spent .tl { color: var(--muted); }
.tally-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.tally-row .hint { flex: 1 1 12rem; }
.tally-box .btn.warn { border-color: var(--amber-line); color: var(--amber); }
.bell { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.bell .hint { flex: 1 1 14rem; }
.bell .btn.warn { border-color: var(--amber-line); color: var(--amber); }

@media (max-width: 959px) {
  .action-wrap { position: sticky; bottom: 0; z-index: 10; margin: 0 calc(var(--gutter) * -0.5); padding: 0.5rem calc(var(--gutter) * 0.5) calc(0.5rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 92%, transparent) 28%); }
  .action { padding: 0.9rem 1rem 1rem; }
  .action h2 { font-size: 1.25rem; }
  .action.night .help, .action .eyebrow { display: none; }
  .action.night h2 { margin-top: 0; }
}

/* game over */
.banner { text-align: left; padding: clamp(1.6rem, 5vw, 2.8rem) clamp(1.2rem, 4vw, 2.2rem); border: 1px solid var(--line-strong); border-radius: var(--radius); background: linear-gradient(135deg, var(--amber-soft), transparent 70%), var(--surface); position: relative; overflow: hidden; }
.banner.drowned { background: linear-gradient(135deg, var(--sea-soft), transparent 70%), var(--surface); }
.banner.drowned .eyebrow { color: var(--sea); }
.drift-note { display: flex; gap: 0.8rem; align-items: flex-start; margin-top: 1.2rem; padding: 0.8rem 0.95rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--bone-soft); }
.drift-note .sigil { stroke: var(--ink); width: 1.9rem; height: 1.9rem; margin-top: 0.1rem; }
.drift-note span { color: var(--muted); font-weight: 300; font-size: 0.95rem; line-height: 1.5; }
.drift-note b { color: var(--ink); font-weight: 500; }
.drift-note.won { border-style: solid; border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.banner h1 { font-family: var(--display); font-weight: 300; font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1; letter-spacing: -0.03em; margin: 0.7rem 0 0.8rem; }
.banner h1 em { color: var(--amber); }
.banner.drowned h1 em { color: var(--sea); }
.banner p { color: var(--muted); max-width: 46ch; font-weight: 300; }
.banner .act-row { margin-top: 1.4rem; }
.banner .act-row .btn { flex: 0 0 auto; }

/* journal / chat / roles */
.tabs { display: flex; gap: 0.2rem; border-bottom: 1px solid var(--line); }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.7rem 1rem; color: var(--muted); font-weight: 500; font-size: 0.92rem; margin-bottom: -1px; transition: color 0.2s, border-color 0.2s; position: relative; }
.tab:hover { color: var(--ink); }
.tab[aria-selected='true'] { color: var(--ink); border-color: var(--amber); }
.tab .badge { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin-left: 0.45rem; vertical-align: middle; }
.pane { display: none; padding-top: 1.1rem; }
.pane.show { display: block; }
.journal-block + .journal-block { margin-top: 1.6rem; }
.journal-block h3 { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.7rem; }
.journal-block h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.journal-block h3.whisper { color: var(--amber); }
.entries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; gap: 0.55rem; max-height: 26rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.entry { padding: 0.6rem 0.85rem; border-radius: var(--radius); border: 1px solid var(--line); font-size: 0.96rem; line-height: 1.5; font-weight: 300; }
.entry .when { display: block; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.15rem; font-weight: 500; }
.entry.whisper { border: 0; border-left: 2px solid var(--amber); border-radius: 0 var(--radius) var(--radius) 0; background: var(--amber-soft); font-family: var(--display); font-style: italic; font-size: 1.02rem; color: var(--ink); font-weight: 400; }
.entry.whisper .when { color: var(--amber); font-family: var(--body); font-style: normal; }
.entry.k-death { border-color: color-mix(in srgb, var(--ink) 22%, transparent); font-weight: 400; }
.entry.k-phase, .entry.k-event, .entry.k-host, .entry.k-tide { color: color-mix(in srgb, var(--ink) 82%, transparent); }
.entry.k-tide { border-style: dashed; }
.entry.k-reveal { border-color: var(--amber-line); }
.entry.k-win { border-color: var(--amber); background: var(--amber-soft); font-family: var(--display); font-size: 1.08rem; font-weight: 400; }
.empty-note { color: var(--muted); font-family: var(--display); font-style: italic; font-weight: 300; padding: 0.4rem 0; }

.chat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; gap: 0.6rem; max-height: 22rem; min-height: 6rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; align-content: start; }
.msg .who { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--amber); margin-right: 0.45rem; }
.msg.me .who { color: var(--ink); }
.msg .tx { font-weight: 300; overflow-wrap: anywhere; }
.msg.ghost .who, .msg.ghost .tx { color: var(--muted); font-style: italic; font-family: var(--display); }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; margin-top: 0.9rem; }

.census { list-style: none; margin: 0; padding: 0; }
.census li { display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 0; border-top: 1px solid var(--line); }
.census li:first-child { border-top: 0; }
.census .sigil { width: 1.7rem; height: 1.7rem; }
.census .cnt { margin-left: auto; font-family: var(--display); font-style: italic; color: var(--muted); }
.census .nm { font-weight: 500; }
.census .bl { color: var(--muted); font-size: 0.85rem; font-weight: 300; }

/* ------------------------------------------------------------------ over reveal */
.over-roles .seat .sub b { color: var(--ink); }

/* ------------------------------------------------------------------ toast */
#toast {
  position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom)); z-index: 100;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: min(92vw, 30rem); padding: 0.8rem 1.15rem;
  background: var(--ink); color: var(--bg); border-radius: var(--radius);
  font-weight: 500; font-size: 0.95rem; box-shadow: var(--shadow);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.err::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bg); margin-right: 0.6rem; vertical-align: 1px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}
@media print { body::before, .hero-art { display: none; } body { background: none; color: inherit; } }