@font-face {
  font-family: "Permanent Marker";
  src: url("/fonts/permanent-marker-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #161412;
  --paper: #ffffff;
  --ground: #f7f6f3;
  --orange: #eb6b1c;
  --orange-ink: #161412;
  --green: #227f44;
  --purple: #8053a8;
  --people: #d0126a;
  --charcoal: #241f2b;
  --lemon: #ffe08a;
  --magenta: #d0126a;
  --cobalt: #3b4bff;
  --coral: #ff6a3d;
  --green-dark: #145232;
  --red: var(--magenta);
  --red-dark: #9d0d50;
  --cream: var(--ground);
  --gold: #f0b429;
  --muted: #655f6d;
  --line: #e6e1d8;
  --radius: 18px;
  --font: system-ui, sans-serif;
  --display: "Permanent Marker", system-ui, sans-serif;
  --orange-wash: #fde8d8;
  --green-wash: #e5f3e8;
  --purple-wash: #f1e8f6;
  --people-wash: #fde4ef;
  --charcoal-wash: #eeeae6;
  --bg: var(--ground);
  --surface: var(--cobalt);
  --text: var(--ink);
  --accent: var(--magenta);
  --accent-dark: #9d0d50;
  --dark: var(--ink);
  --pattern: var(--cobalt);
  --on-accent: #fff;
  --on-surface: #fff;
  --card: var(--paper);
  --accent-ink: var(--magenta);
  --gold-ink: #8a5a00;
  --hot: var(--coral);
  --brand: var(--cobalt);
  --season: var(--coral);
  --stamp: "In season";
  --shadow: 0 12px 32px rgba(36, 31, 43, 0.08);
  color: var(--ink);
  background: var(--ground);
  font-family: var(--font);
  font-synthesis: none;
}

[data-theme="halloween"] { --season: #ff7a18; --stamp: "Halloween"; }
[data-theme="thanksgiving"] { --season: #e4572e; --stamp: "Thanksgiving"; }
[data-theme="christmas"] { --season: #128a4a; --stamp: "Christmas"; }
[data-theme="easter"] { --season: #7c5cff; --stamp: "Easter"; }
[data-theme="july"] { --season: #3b4bff; --stamp: "Fourth of July"; }
[data-theme="newyear"] { --season: #c6f531; --stamp: "New Year"; }
[data-theme="winter"] { --season: #3ec6ff; --stamp: "Winter"; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  overflow-x: clip;
  color: var(--ink);
  background: var(--ground);
  -webkit-tap-highlight-color: transparent;
}
body::before {
  content: "";
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  pointer-events: none;
  background: var(--orange);
}
#app { position: relative; z-index: 1; }
button, input, textarea, select { font: inherit; color: inherit; }
button {
  cursor: pointer;
  min-height: 52px;
  border: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
button:disabled { cursor: not-allowed; background: #ece8e2; color: #8a8492; box-shadow: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
}
input, textarea, select {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  padding: 14px 16px;
  width: 100%;
  min-height: 52px;
  font-size: 16px;
  color: var(--ink);
}
textarea { resize: vertical; line-height: 1.5; min-height: 120px; }
input:focus, textarea:focus, select:focus { border-color: var(--cobalt); }
button.primary, button.cream, button.ink, button.secondary { border-radius: 14px; }
button.primary, button.next, #confirm-vote, #people-next, #eliminator-continue, #trivia-reveal, #start { background: var(--orange); color: var(--orange-ink); padding: 15px 20px; width: 100%; min-height: 52px; font-size: 18px; box-shadow: 0 8px 18px rgba(235, 107, 28, 0.22); }
button.cream { background: var(--paper); color: var(--ink); padding: 14px 18px; border: 1.5px solid var(--line); }
button.ink { background: var(--cobalt); color: #fff; padding: 14px 18px; box-shadow: 0 8px 18px rgba(59, 75, 255, 0.22); }
button.secondary { background: var(--paper); color: var(--ink); padding: 12px 16px; border: 1.5px solid var(--line); }
button.primary:not(:disabled):hover, button.ink:not(:disabled):hover { transform: translateY(-1px); }
button.primary:not(:disabled):active, button.cream:not(:disabled):active, button.ink:not(:disabled):active, button.secondary:not(:disabled):active { transform: translateY(1px); }
button.ghost { background: none; color: var(--muted); padding: 10px 4px; box-shadow: none; font-weight: 650; }
button.danger { background: #fff0f6; color: var(--magenta); border-radius: 12px; padding: 14px 20px; }
button.small { min-height: 44px; padding: 8px 12px; font-size: 14px; }
button.primary:disabled, button.secondary:disabled, button.cream:disabled, button.ink:disabled { background: #ece8e2; color: #8a8492; box-shadow: none; border-color: transparent; }
.full { width: 100%; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.tiny { font-size: 13px; line-height: 1.5; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 700;
  color: var(--magenta);
}
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .mode-copy strong, .question-title, .score-title, .winner-score, .drawing-prompt {
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
}
h2 { font-size: 30px; line-height: 1.1; margin-bottom: 12px; color: var(--ink); }
h3 { font-size: 20px; margin-bottom: 8px; font-weight: 750; }
p { line-height: 1.55; }
label { font-size: 13px; font-weight: 700; display: block; margin-bottom: 7px; }
.ico { display: inline-flex; width: 1.15em; height: 1.15em; vertical-align: -0.18em; flex: none; }
.ico svg { width: 100%; height: 100%; display: block; }
.container { width: min(560px, 100%); margin: auto; padding: 12px 22px 56px; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 108px; gap: 12px; }
.wordmark { display: flex; align-items: center; gap: 10px; color: var(--ink); white-space: nowrap; }
.brand-lockup { display: block; line-height: 0; }
.brand-lockup img { height: 92px; width: auto; display: block; }
.brand-mark { width: 40px; height: 40px; display: block; flex: none; border-radius: 50%; object-fit: cover; }
.brand-mark-lg { width: 84px; height: 84px; margin: 0 auto 8px; }
.wordmark .ico { width: 26px; height: 26px; color: var(--magenta); }
.brand-lockup { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; gap: 2px; }
.presenter, .wordmark .presenter {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--magenta);
}
.wordmark .presenter { font-size: 9px; letter-spacing: 0.14em; margin: 0; }
.wordmark .game-name { font-size: 15px; color: var(--ink); font-weight: 750; }
.connection {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); display: inline-block; }
.dot.online { background: #128a4a; }
.page { padding-top: 8px; }
.card, .lobby-host-card, .task-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 22px;
  color: var(--ink);
}

.home-stage {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  padding: 8px 0 64px;
}
.marquee { display: flex; flex-direction: column; gap: 28px; }
.title-block { max-width: 36rem; }
.hero-logo { width: min(100%, 260px); display: block; margin: 4px 0 18px; line-height: 0; }
.hero-logo img { width: 100%; height: auto; display: block; }
.hero-tag {
  margin: 0 0 10px;
  font-family: var(--font);
  font-style: normal;
  font-weight: 750;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--ink);
}
.hero-tag .red { color: var(--magenta); background: none; box-shadow: none; padding: 0; display: inline; }
.lede { margin: 0 0 22px; max-width: 36ch; font-size: 17px; font-weight: 500; color: var(--muted); }
.join-strip { margin: 0; max-width: 440px; }
.join-strip .two button { min-height: 56px; font-size: 16px; }
.join-strip .tiny { margin: 12px 0 0; font-weight: 600; color: var(--muted); }
.season-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  background: var(--paper);
  color: var(--muted);
  border: 1px solid var(--line);
  box-shadow: none;
  padding: 6px 10px 6px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  transform: none;
}
.season-stamp::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--season); }
.season-stamp::after { content: var(--stamp); }
.poster-well { position: relative; margin: 0 auto; width: min(100%, 340px); }
.poster-well::before { content: none; }
.poster {
  position: relative;
  margin: 0;
  background: var(--paper);
  border-radius: 28px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  padding: 0;
  overflow: hidden;
}
.poster img { width: 100%; height: auto; display: block; }
.mode-showcase, .mode-cards { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 36px 0 0; }
.mode-card {
  --tilt: 0deg;
  --lift: 0px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "kicker" "art" "copy";
  gap: 8px 12px;
  align-items: center;
  width: 100%;
  min-height: 132px;
  padding: 18px 16px 18px 18px;
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 5px solid var(--cobalt);
  border-radius: 20px;
  box-shadow: var(--shadow);
  transform: none;
}
.mode-card::before {
  content: "Draw";
  grid-area: kicker;
  font-family: var(--font);
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--cobalt);
}
.mode-card[data-showcase="draw"]::before, .mode-card[data-new-mode="draw"]::before { content: "Draw"; color: var(--orange); }
.mode-card[data-showcase="trivia"]::before, .mode-card[data-new-mode="trivia"]::before { content: "Trivia"; color: var(--green); }
.mode-card[data-showcase="impostor"]::before, .mode-card[data-new-mode="impostor"]::before { content: "Impostor"; color: var(--purple); }
.mode-card[data-showcase="people"]::before, .mode-card[data-new-mode="people"]::before { content: "People"; color: var(--people); }
.mode-card[data-showcase="eliminator"]::before, .mode-card[data-new-mode="eliminator"]::before { content: "Eliminator"; color: var(--charcoal); }
.mode-card[data-showcase="draw"], .mode-card[data-new-mode="draw"] { background: var(--orange-wash); border-top-color: var(--orange); }
.mode-card[data-showcase="trivia"], .mode-card[data-new-mode="trivia"] { background: var(--green-wash); border-top-color: var(--green); }
.mode-card[data-showcase="impostor"], .mode-card[data-new-mode="impostor"] { background: var(--purple-wash); border-top-color: var(--purple); }
.mode-card[data-showcase="people"], .mode-card[data-new-mode="people"] { background: var(--people-wash); border-top-color: var(--people); }
.mode-card[data-showcase="eliminator"], .mode-card[data-new-mode="eliminator"] { background: var(--charcoal-wash); border-top-color: var(--charcoal); }
.mode-art-mark { display: grid; place-items: center; background: #fff6dc; color: var(--ink); }
.mode-art-mark .ico { width: 72px; height: 72px; }
.mode-art { grid-area: art; width: 100%; height: 168px; border-radius: 14px; overflow: hidden; background: #f6f4f1; }
.mode-art img { width: 100%; height: 168px; object-fit: cover; object-position: top center; display: block; }
.mode-copy { grid-area: copy; display: block; }
.mode-copy strong { display: block; font-size: 22px; line-height: 1.1; margin-bottom: 6px; color: var(--ink); }
.mode-copy small { display: block; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--muted); max-width: 28ch; }
.mode-card.selected { border-color: var(--cobalt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cobalt) 25%, transparent), var(--shadow); }
.mode-card[data-new-mode="trivia"].selected { border-color: #f0b429; box-shadow: 0 0 0 3px color-mix(in srgb, #f0b429 40%, transparent), var(--shadow); }
.mode-card[data-new-mode="impostor"].selected { border-color: var(--magenta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 28%, transparent), var(--shadow); }
.mode-card[data-new-mode="people"].selected { border-color: #ff6a3d; box-shadow: 0 0 0 3px color-mix(in srgb, #ff6a3d 35%, transparent), var(--shadow); }
.mode-card[data-new-mode="eliminator"].selected { border-color: #D7263D; box-shadow: 0 0 0 3px color-mix(in srgb, #D7263D 30%, transparent), var(--shadow); }
.picked {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--ink);
  color: #fff;
  font-style: normal;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.mode-card:not(:disabled):hover { transform: translateY(-2px); }
.mode-card:not(:disabled):active { transform: translateY(0); }
.mode-picker { margin: 4px 0 22px; }
.category-select {
  margin-top: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 18px;
  padding: 16px;
}
.category-select select { margin-top: 6px; }
.resume-link {
  margin-top: 14px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  box-shadow: none;
  text-decoration: none;
  border-radius: 12px;
  min-height: 48px;
  color: var(--ink);
}

.topic-box { background: var(--purple); color: #fff; border: 4px solid #4c2d6b; border-radius: 18px; padding: 18px; margin: 0 0 14px; font-weight: 800; font-size: clamp(26px, 6vw, 36px); line-height: 1.15; letter-spacing: -0.03em; }
.topic-peek { width: 100%; min-height: 56px; border-radius: 16px; border: 3px dashed #D7263D; background: #fff; color: #D7263D; font-weight: 800; font-size: 18px; margin: 0 0 14px; }
.topic-reveal:empty, .topic-reveal[hidden] { display: none; }
.turn-clock { display: inline-flex; align-items: center; gap: 8px; background: #241f2b; color: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 750; margin: 0 0 14px; }
.turn-clock strong { font-variant-numeric: tabular-nums; font-size: 22px; min-width: 1.4ch; }
.join-page { margin-top: 8px; }
.host-setup { width: 100%; }
.back-link { font-size: 15px; text-align: left; margin-bottom: 14px; padding-left: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.code-mini {
  border-radius: 999px;
  background: #eef0ff;
  color: var(--cobalt);
  padding: 8px 12px;
  letter-spacing: 0.14em;
  font-weight: 750;
  font-size: 12px;
}
.section-head { margin-bottom: 18px; }
.section-head h2 { margin-bottom: 8px; }
.section-head p { margin: 0; font-size: 16px; color: var(--muted); }
.lobby-hero {
  background: var(--orange);
  color: var(--ink);
  padding: 28px 24px 24px;
  border-radius: 24px;
  text-align: left;
  border: 0;
  box-shadow: 0 16px 36px rgba(235, 107, 28, 0.22);
}
.lobby-hero h2 { color: var(--ink); margin: 6px 0 8px; font-size: clamp(32px, 4vw, 44px); }
.lobby-hero p { font-size: 15px; color: var(--ink); margin-bottom: 8px; }
.lobby-hero .eyebrow { color: var(--ink); }
.join-share { display: grid; gap: 10px; margin: 2px 0 16px; }
.join-url { font-size: 13px; line-height: 1.45; word-break: break-all; color: var(--ink); background: rgba(255,255,255,.55); border-radius: 12px; padding: 10px 12px; }
.join-qr { width: 168px; max-width: 46vw; background: #fff; border-radius: 16px; padding: 8px; }
.join-qr svg { display: block; width: 100%; height: auto; }
.form-error { color: var(--magenta); font-size: 14px; font-weight: 700; margin: 0; }
.form-error:empty { display: none; }
.tool-toggle.active { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.big-code {
  display: block;
  font-size: clamp(40px, 8vw, 64px);
  letter-spacing: 0.12em;
  font-style: normal;
  font-family: var(--font);
  font-weight: 800;
  color: var(--ink);
  background: none;
  line-height: 1;
  margin: 10px 0 18px;
  padding: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.lobby-hero button.secondary { background: #fff; color: var(--ink); border: 0; }
.lobby-hero .two { max-width: 420px; }
.player-list { margin: 8px 0 18px; }
.player-list .row { margin-bottom: 12px; }
.player-list h3 { margin: 0; font-family: var(--font); font-style: normal; font-weight: 750; font-size: 16px; letter-spacing: 0; }
.count { background: #eef0ff; color: var(--cobalt); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 750; }
.players { display: grid; grid-template-columns: 1fr; gap: 8px; }
.player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 60px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: none;
  min-width: 0;
  font-size: 16px;
  font-weight: 650;
}
.player .avatar {
  height: 40px;
  width: 40px;
  flex: 0 0 40px;
  background: #eef0ff;
  color: var(--cobalt);
  border-radius: 12px;
  border: 0;
  display: grid;
  place-items: center;
  font-family: var(--font);
  font-style: normal;
  font-weight: 800;
  font-size: 16px;
}
.player:nth-child(3n+2) .avatar { background: #fff0f6; color: var(--magenta); }
.player:nth-child(3n) .avatar { background: #fff6dc; color: #8a5a00; }
.player .name { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; overflow: hidden; line-height: 1.2; }
.host-badge { display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; color: var(--magenta); margin-top: 2px; font-weight: 750; }
.player-status { margin-left: auto; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #128a4a; border: 0; }
.player-status.offline { background: var(--gold); }
.how { font-size: 15px; color: var(--muted); line-height: 1.5; display: flex; gap: 10px; margin: 16px 0; align-items: flex-start; font-weight: 550; }
.how .ico { width: 20px; height: 20px; margin-top: 2px; color: var(--magenta); }
.settings { font-size: 15px; margin: 8px 0 0; }
.settings summary, .create-controls summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: 12px 0; min-height: 44px; }
.settings-grid { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 4px 0 12px; }
.timer-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 750;
  background: #fff6dc;
  color: var(--ink);
  border: 0;
  padding: 6px 12px;
  min-height: 40px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.timer-pill .ico { width: 16px; height: 16px; }
.timer-pill.urgent, .turn-clock.urgent { background: #D7263D; color: #fff; animation: breath 1s infinite; }
.sound-toggle { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 999px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sound-toggle .ico { width: 20px; height: 20px; }
.lobby-hero .sound-toggle, .topbar .sound-toggle { box-shadow: none; }
.round-info { font-size: 13px; color: var(--muted); text-align: center; margin: 12px 0; font-weight: 650; }
.task-number {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eef0ff;
  color: var(--cobalt);
  border: 0;
  margin-bottom: 14px;
}
.task-number .ico { width: 22px; height: 22px; }
.task-text {
  font-size: 24px;
  line-height: 1.25;
  background: #fff6dc;
  border: 0;
  border-radius: 14px;
  padding: 16px;
  margin: 0 0 18px;
}
.prompt-idea { background: #f6f4f1; border: 0; border-radius: 14px; padding: 14px; font-size: 15px; line-height: 1.45; margin-bottom: 14px; }
.prompt-idea strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 6px; color: var(--muted); }
.counter { text-align: right; font-size: 12px; margin: 6px 0 0; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.sketch { aspect-ratio: 4/3; border: 1px solid var(--line); border-radius: 14px; display: block; width: 100%; object-fit: contain; background: white; }
.prompt-image { margin: 0 0 18px; }
.waiting { text-align: center; padding: 28px 18px; }
.waiting-icon { display: grid; place-items: center; margin-bottom: 12px; color: var(--magenta); }
.waiting-icon .ico { width: 52px; height: 52px; }
.waiting h2 { font-size: 30px; }
.progress-track { height: 8px; background: #efeae3; border: 0; border-radius: 99px; overflow: hidden; margin: 16px 0; }
.progress-track span { display: block; height: 100%; background: var(--magenta); }
.progress-list { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.progress-person { background: #f6f4f1; border: 0; padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 650; display: inline-flex; align-items: center; gap: 6px; }
.progress-person .ico { width: 14px; height: 14px; }
.drawing-task { margin-bottom: 12px; }
.drawing-task h2 { font-size: 28px; margin: 8px 0; }
.drawing-prompt { font-size: 22px; line-height: 1.25; margin: 8px 0 14px; }
.canvas-wrap { position: relative; line-height: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.canvas-wrap canvas { display: block; width: 100%; height: auto; touch-action: none; aspect-ratio: 4/3; cursor: crosshair; }
.canvas-wrap.guides .guide-line { position: absolute; left: 6%; right: 6%; z-index: 2; border-top: 2px dashed rgba(36, 31, 43, 0.42); pointer-events: none; }
.canvas-wrap.guides .guide-top { top: 16%; }
.canvas-wrap.guides .guide-bottom { top: 84%; }
.canvas-wrap.guides .guide-line::before { content: ""; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; border: 2px solid rgba(208, 18, 106, 0.7); border-radius: 50%; background: rgba(255, 255, 255, 0.9); }
.part-badge { display: inline-flex; margin: 0 auto 8px; padding: 8px 12px; border-radius: 999px; background: #241f2b; color: #fff; font-weight: 800; }
.person-stack { display: flex; flex-direction: column; gap: 0; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.person-layer { position: relative; margin: 0; }
.person-layer img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain; background: #fffdf8; }
.person-layer figcaption { position: absolute; left: 10px; bottom: 10px; margin: 0; padding: 4px 10px; border-radius: 999px; background: rgba(36, 31, 43, 0.88); color: #fff; font-size: 13px; font-weight: 750; }
.person-vote-card { margin-top: 12px; }
.person-vote-card h3 { margin-top: 0; }
.drawing-tools { padding: 12px 0 0; display: flex; flex-direction: column; gap: 12px; }
.color-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.color-btn { -webkit-appearance: none; appearance: none; touch-action: manipulation; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 10px; border: 2px solid #fff; background-clip: padding-box; box-shadow: inset 0 0 0 1px rgba(36, 31, 43, 0.25); }
.color-btn.active { box-shadow: 0 0 0 3px var(--cobalt); }
.tool-action { display: flex; gap: 8px; flex: 1 1 220px; flex-wrap: wrap; }
.tool-action button { font-size: 14px; min-height: 48px; padding: 8px 12px; border-radius: 12px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.size-row { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 650; color: var(--muted); }
.size-row input { padding: 0; accent-color: var(--cobalt); border: 0; height: 28px; min-height: 44px; background: transparent; box-shadow: none; }
.brush-preview { display: inline-block; border-radius: 50%; background: var(--ink); width: 12px; height: 12px; flex: none; }
.drawing-page { padding-top: 0; }
.drawing-page .topbar { min-height: 64px; }
.reveal-stage, .tv-stage {
  min-height: 100dvh;
  background: var(--ground);
  color: var(--ink);
  padding: 18px 18px 36px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.reveal-stage::before, .tv-stage::before { content: none; }
.reveal-stage .topbar, .tv-stage .topbar { max-width: 1100px; width: 100%; margin: 0 auto; min-height: 64px; }
.reveal-stage .wordmark, .tv-stage .wordmark, .reveal-stage .round-info, .tv-stage .round-info { color: var(--ink); }
.tv-stage .card, .answer-result.card { background: var(--paper); color: var(--ink); }
.reveal-card {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  max-width: 1000px;
  width: 100%;
  margin: 12px auto 18px;
  padding: clamp(20px, 4vw, 44px);
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 320px;
}
.reveal-card h1 { font-size: clamp(28px, 4vw, 42px); margin: 8px 0 18px; }
.reveal-card h2 { font-size: clamp(28px, 4vw, 48px); line-height: 1.12; max-width: 18ch; margin: 12px auto; }
.reveal-drawing { width: 100%; max-width: 760px; max-height: 54vh; aspect-ratio: 4/3; margin: 0 auto; border-radius: 16px; background: white; object-fit: contain; border: 1px solid var(--line); }
.reveal-attribution { font-size: 16px; margin: 18px 0 0; color: var(--muted); }
.reveal-attribution strong { color: var(--magenta); }
.reveal-caption { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--magenta); margin: 0 0 6px; font-weight: 750; }
.reveal-note { font-size: 12px; font-weight: 750; background: #fff6dc; color: var(--ink); border: 0; display: inline-block; padding: 6px 12px; border-radius: 999px; margin: 10px auto; }
.reveal-nav { display: flex; gap: 12px; max-width: 720px; width: 100%; margin: 0 auto; }
.reveal-nav button { background: var(--paper); border: 1.5px solid var(--line); color: var(--ink); width: 100%; border-radius: 14px; padding: 16px; min-height: 56px; box-shadow: none; }
.reveal-nav button.next { background: var(--magenta); color: #fff; border-color: transparent; }
.tv-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 750; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; }
.reveal-end, .winner-page { max-width: 760px; margin: 6vh auto; text-align: center; }
.reveal-end h1, .winner-page h1 { color: var(--ink); font-size: clamp(40px, 6vw, 64px); margin: 8px 0 12px; line-height: 1; overflow-wrap: anywhere; }
.winner-sub, .reveal-end p { color: var(--muted); font-size: 18px; }
.big-emoji, .winner-crown, .question-emoji { display: grid; place-items: center; color: var(--magenta); }
.big-emoji .ico, .winner-crown .ico, .question-emoji .ico { width: 56px; height: 56px; }
.reveal-end .stack { max-width: 420px; margin: 24px auto; }
.reveal-end .stack .cream, .winner-page .cream { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.confetti { position: fixed; top: -16px; width: 10px; height: 16px; animation: fall 5.4s linear forwards; z-index: 5; pointer-events: none; }
#toast {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translate(-50%, 12px);
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 14px 18px;
  border-radius: 14px;
  border: 0;
  max-width: calc(100vw - 32px);
  width: max-content;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.error-page { max-width: 440px; text-align: center; margin: 48px auto; }
.error-page .icon .ico { width: 52px; height: 52px; color: var(--magenta); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mobile-note { font-size: 14px; text-align: center; margin: 14px 0 0; font-weight: 550; color: var(--muted); }
.lobby-mode-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 14px; font-weight: 650; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; }
.lobby-mode-pill strong { display: inline-flex; align-items: center; gap: 6px; }
.mode-switcher { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
.mode-switcher button {
  min-height: 52px;
  font-size: 15px;
  width: 100%;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  box-shadow: none;
  color: var(--ink);
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.mode-switcher button[data-mode="draw"].active { background: var(--cobalt); color: #fff; border-color: transparent; }
.mode-switcher button[data-mode="trivia"].active { background: #f0b429; color: var(--ink); border-color: transparent; }
.mode-switcher button[data-mode="impostor"].active { background: var(--magenta); color: #fff; border-color: transparent; }
.mode-switcher button[data-mode="people"].active { background: #ff6a3d; color: #fff; border-color: transparent; }
.mode-switcher button[data-mode="eliminator"].active { background: #D7263D; color: #fff; border-color: transparent; }
.round-table { width: min(100%, 340px); display: block; margin: 0 auto; }
.round-table .table-top { fill: #fffdf8; stroke: #241f2b; stroke-width: 3; }
.round-table .seat circle { fill: #fff; stroke: #241f2b; stroke-width: 3; }
.round-table .seat text { font-family: "Bricolage Grotesque", sans-serif; font-size: 16px; font-weight: 800; fill: #241f2b; }
.round-table .seat.ghost circle { fill: #f6f4f1; stroke: #c8c2ba; stroke-dasharray: 4 3; }
.round-table .seat.ghost text { fill: #8a8378; }
.round-table .seat.me circle { stroke: #3b4bff; stroke-width: 4; }
.round-table .seat.eliminator circle { stroke: #D7263D; stroke-width: 4; }
.seat-roster { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 8px 0 0; }
.seat-roster li { display: inline-flex; align-items: center; gap: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px 6px 6px; font-weight: 750; font-size: 14px; }
.seat-roster li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #241f2b; color: #fff; font-size: 12px; }
.seat-roster li.ghost { opacity: 0.62; }
.seat-roster li.eliminator { border-color: #D7263D; }
.table-card { margin: 0; }
.trivia-lobby-settings { padding: 4px 0 0; }
.trivia-lobby-settings select { margin: 8px 0 14px; }
.tv-question { margin: 12px auto; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 48vh; width: min(100%, 980px); }
.tv-question h1, .question-title { font-size: clamp(28px, 4vw, 52px); line-height: 1.08; margin: 12px 0 18px; max-width: 18ch; }
.prototype-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; border: 0; background: #fff6dc; color: var(--ink); padding: 6px 10px; border-radius: 999px; font-weight: 750; }
.tv-options, .tv-answers { display: grid; grid-template-columns: 1fr; width: 100%; gap: 10px; }
.tv-option { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); padding: 16px; text-align: left; font-size: 16px; line-height: 1.35; min-height: 56px; box-shadow: none; }
.tv-option span, .answer-btn > span { display: inline-grid; place-items: center; min-width: 32px; height: 32px; margin-right: 10px; border-radius: 8px; background: #eef0ff; color: var(--cobalt); font-family: var(--font); font-style: normal; font-weight: 800; }
.tv-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; font-weight: 650; max-width: 980px; width: 100%; margin: 8px auto 0; }
.tv-bottom .primary, .tv-bottom .secondary { width: auto; min-height: 52px; }
.answer-result { text-align: center; padding: 26px 18px; margin-top: 8px; }
.answer-result h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.05; margin: 8px 0 12px; }
.tv-answers .is-correct { background: #fff6dc; border-color: #f0b429; font-weight: 750; }
.answer-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.answer-btn {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 8px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  padding: 14px;
  font-size: 17px;
  line-height: 1.3;
  min-height: 64px;
  margin: 0;
  font-weight: 650;
  box-shadow: none;
}
.answer-btn { touch-action: manipulation; }
.answer-btn > span { pointer-events: none; }
.answer-btn.chosen { background: var(--orange-wash); border-color: var(--orange); box-shadow: inset 0 0 0 3px var(--orange); }
.answer-btn.chosen > span { background: var(--orange); color: var(--ink); }
#confirm-vote { margin-top: 12px; touch-action: manipulation; }
#confirm-vote:disabled { opacity: 0.4; }
.vote-locked { background: #241f2b; color: #fff; border-radius: 16px; padding: 16px 18px; font-size: 22px; font-weight: 800; line-height: 1.25; margin: 12px 0 0; }
.vote-board { margin: 0 0 14px; }
.vote-board p { margin: 0 0 8px; font-size: 18px; }
.ballot-row { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 700; }
.ballot-row .mark { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #c8c2ba; display: grid; place-items: center; flex: none; color: #fff; }
.ballot-row.in .mark { background: #241f2b; border-color: #241f2b; }
.ballot-row .mark .ico { width: 16px; height: 16px; }
.result-callout { display: flex; flex-direction: column; gap: 4px; background: #fff6dc; border: 0; border-radius: 14px; padding: 16px; margin: 18px 0; text-align: left; }
.result-callout strong { font-size: 20px; font-family: var(--display); font-style: normal; }
.result-callout.oops { background: #fff0f6; }
.leaderboard-page, .leaderboard { margin: 12px auto; max-width: 640px; }
.score-title { font-size: clamp(28px, 5vw, 40px); margin: 8px 0 18px; }
.leaderboard { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.score-row { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-height: 60px; box-shadow: none; }
.score-row strong { flex: 1; overflow-wrap: anywhere; font-family: var(--font); font-style: normal; font-weight: 750; font-size: 16px; }
.score-row > span:last-child { font-weight: 750; font-variant-numeric: tabular-nums; }
.score-row .rank { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #eef0ff; color: var(--cobalt); font-family: var(--font); font-style: normal; font-size: 15px; flex: none; }
.score-row:first-child .rank { background: var(--magenta); color: #fff; }
.score-row.is-me { background: #fff6dc; border-color: transparent; }
.winner-score { font-size: 26px; color: var(--magenta); margin: 8px 0 12px; }
.winner-page .two { max-width: 520px; margin: 20px auto; }
@media (min-width: 800px) {
  .container { width: min(720px, calc(100% - 64px)); }
  .container.lobby-page, .container:has(.host-setup) { width: min(1040px, calc(100% - 64px)); }
  .marquee { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.7fr); gap: 28px 56px; align-items: center; }
  .poster-well { width: min(100%, 320px); margin: 0 0 0 auto; }
  .hero-logo { width: min(100%, 280px); }
  .poster img { max-height: 420px; object-fit: cover; object-position: top center; }
  .mode-showcase, .mode-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; margin-top: 48px; }
  .mode-card {
    grid-template-columns: 1fr;
    grid-template-areas: "kicker" "art" "copy";
    min-height: 250px;
    align-items: start;
    padding: 18px 18px 20px;
  }
  .mode-art, .mode-art img { height: 196px; }
  .mode-copy { padding-top: 8px; }
  .players, .settings-grid, .tv-options, .tv-answers { grid-template-columns: 1fr 1fr; }
  .mode-switcher { grid-template-columns: repeat(2, 1fr); }
  .lobby-page .page { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px 22px; align-items: start; }
  .lobby-mode-pill { grid-column: 1 / -1; }
  .lobby-hero { min-height: 260px; }
  .lobby-page .page > .card,
  .lobby-page .page > .lobby-host-card,
  .lobby-page .page > .primary,
  .lobby-page .page > .ghost,
  .lobby-page .page > .tiny,
  .lobby-page .page > .how,
  .lobby-page .page > .waiting { grid-column: 1 / -1; }
  .host-setup .join-card { max-width: 520px; margin-inline: auto; }
  .drawing-page { width: min(980px, calc(100% - 64px)); }
  .drawing-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 196px; gap: 18px; align-items: start; }
  .task-page { width: min(680px, calc(100% - 64px)); }
  .reveal-stage, .tv-stage { padding: 24px 40px 40px; }
  .topbar { min-height: 76px; }
}
@media (max-width: 799px) {
  .poster img { width: 100%; height: auto; max-height: none; }
  .wordmark .game-name { font-size: 14px; }
  .connection { font-size: 10px; }
  .big-code { letter-spacing: 0.08em; }
  .home-stage { width: min(100% - 32px, 560px); }
}
@media (max-width: 380px) {
  .home-stage { width: calc(100% - 20px); }
  .container { padding-left: 14px; padding-right: 14px; }
  .two { gap: 8px; }
  .hero-logo { margin-bottom: 12px; }
  .mode-art, .mode-art img { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@keyframes breath { 50% { opacity: .72; } }
@keyframes fall { to { transform: translateY(110vh) rotate(220deg); } }
.topbar-plain { justify-content: flex-end; min-height: 56px; }
.home-actions { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 14px; }
.mode-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 22px; margin: 18px 0 0; }
.mode-rail .mode-card { flex: 0 0 min(78vw, 280px); scroll-snap-align: start; min-height: 280px; }
.wait-box { margin-top: 8px; }
.progress-track { height: 12px; border-radius: 999px; background: #efeae3; overflow: hidden; margin: 8px 0; }
.progress-track span { display: block; height: 100%; background: var(--green); }
.pending-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.pending-list li { min-height: 44px; display: flex; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--ground); font-weight: 700; }
.dot.online { background: var(--green); }
.waiting .eyebrow, .you-in { color: var(--green); }
html[data-mode="draw"] { background: var(--orange-wash); }
html[data-mode="draw"] body { background: var(--orange-wash); }
html[data-mode="draw"] body::before { background: var(--orange); }
html[data-mode="trivia"] { background: var(--green-wash); }
html[data-mode="trivia"] body { background: var(--green-wash); }
html[data-mode="trivia"] body::before { background: var(--green); }
html[data-mode="impostor"] { background: var(--purple-wash); }
html[data-mode="impostor"] body { background: var(--purple-wash); }
html[data-mode="impostor"] body::before { background: var(--purple); }
html[data-mode="people"] { background: var(--people-wash); }
html[data-mode="people"] body { background: var(--people-wash); }
html[data-mode="people"] body::before { background: var(--people); }
html[data-mode="eliminator"] { background: var(--charcoal-wash); }
html[data-mode="eliminator"] body { background: var(--charcoal-wash); }
html[data-mode="eliminator"] body::before { background: var(--charcoal); }
html[data-night="1"] { --ink: #f6f3ee; --paper: #221e1a; --ground: #14120f; --muted: #d5cfc6; --line: #3c352e; --card: #221e1a; background: #14120f; color: #f6f3ee; }
html[data-night="1"] body { background: #14120f; color: #f6f3ee; }
html[data-night="1"] body::before { background: #0c0b09; }
html[data-night="1"] .card, html[data-night="1"] .answer-btn, html[data-night="1"] .round-table .table-top { background: #221e1a; color: #f6f3ee; }
html[data-night="1"] .round-table .seat text { fill: #161412; }
body.submit-flash::after, body.reveal-flash::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; }
body.submit-flash::after { background: color-mix(in srgb, var(--green) 45%, white); animation: submit-flash .4s ease; }
body.reveal-flash::after { background: #fff; animation: reveal-flash .7s ease; }
@keyframes submit-flash { from { opacity: .85; } to { opacity: 0; } }
@keyframes reveal-flash { from { opacity: .95; } to { opacity: 0; } }
@media (max-width: 799px) {
  .page > .primary, .task-card .primary, .drawing-page .primary, form .primary, .lobby-host-card > .primary, .reveal-nav .next, #confirm-vote, #people-next, #eliminator-continue, #trivia-reveal {
    position: sticky;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 5;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.submit-flash::after, body.reveal-flash::after { animation: none; opacity: 0; }
}
@media print {
  body { background: white; }
  body::before, .no-print { display: none !important; }
  @page { margin: 12mm; }
  .print-sheet { break-after: page; }
  .print-sheet img { max-width: 100%; max-height: 42vh; object-fit: contain; display: block; margin: 12px auto; }
  .print-sheet h1 { font-size: 22pt; }
}