:root {
  color-scheme: dark;
  --ink: #12181f;
  --panel: #1c2731;
  --line: #314556;
  --foam: #e7f0ea;
  --muted: #9eb0b8;
  --gold: #f0c14a;
  --alert: #e15b4c;
  --ok: #7dcea0;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* A long press is a task hold. Text must not highlight or offer a copy menu. */
html, body, body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input, textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top, #243746 0, transparent 28rem),
    var(--ink);
  color: var(--foam);
}

body {
  padding: calc(1rem + env(safe-area-inset-top)) 1rem calc(2rem + env(safe-area-inset-bottom));
}

button, input, select {
  font: inherit;
  color: inherit;
}

button {
  min-height: 3.4rem;
  border: 0;
  border-radius: 1rem;
  background: var(--gold);
  color: #1b1404;
  font-weight: 700;
  padding: 0.7rem 1rem;
  touch-action: manipulation;
}

button:disabled {
  opacity: 0.45;
}

button img, .roster img, .you, .swatch img {
  width: 3.2rem;
  height: 3.9rem;
  object-fit: contain;
}

.screen {
  width: min(40rem, 100%);
  margin: 0 auto;
}

body.host .screen {
  width: min(64rem, 100%);
}

/* The sign page is a laptop tool. The signal table needs the whole window. */
body[data-role="setup"] .screen {
  width: 100%;
  max-width: none;
}

body[data-role="setup"] .matrix-wrap {
  overflow-x: auto;
}

body[data-role="setup"] .matrix {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

body[data-role="setup"] .matrix th,
body[data-role="setup"] .matrix td {
  white-space: normal;
  overflow-wrap: break-word;
  padding: 0.35rem 0.2rem;
}

/* A phone-width window keeps whole words and scrolls. A laptop fits the table. */
@media (max-width: 52rem) {
  body[data-role="setup"] .matrix {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
  }

  body[data-role="setup"] .matrix th,
  body[data-role="setup"] .matrix td {
    white-space: nowrap;
    overflow-wrap: normal;
    padding: 0.45rem 0.55rem;
  }
}

h1 {
  font-size: clamp(2rem, 8vw, 3.4rem);
  line-height: 0.95;
  margin: 0.2rem 0 0.6rem;
}

h2 { margin: 1.2rem 0 0.4rem; }

.kicker, .lede, .hint, .log, .warn {
  color: var(--muted);
}

.lede { font-size: 1.15rem; }

.logo {
  display: block;
  width: min(36rem, 100%);
  height: auto;
  margin: 0.2rem auto 0.15rem;
}

.brand {
  margin: 0 0 0.85rem;
  text-align: center;
  font-family: "Arial Black", "Avenir Next", Impact, sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.15rem, 4.8vw, 1.85rem);
  letter-spacing: 0.02em;
  color: #fff;
  -webkit-text-stroke: 1px #081018;
  text-shadow:
    -2px 0 #2dffd2,
    2px 0 #ff2bd6;
}

.you { width: 7rem; height: 8.5rem; }

.colors, .stack, .rooms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.swatch, .stack button, .roster li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.swatch {
  width: calc(33% - 0.5rem);
  min-height: 6.5rem;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.swatch.taken { opacity: 0.28; }

.wide { width: 100%; margin-top: 0.8rem; }

a.wide {
  display: block;
  min-height: 3.4rem;
  border-radius: 1rem;
  padding: 0.7rem 1rem;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  box-sizing: border-box;
}

.ghost, .chip {
  background: transparent;
  color: var(--foam);
  border: 1px solid var(--line);
}

.chip.on, .wide.on, .chosen {
  background: var(--ok);
  color: #062117;
  border-color: transparent;
}

.chip.picked {
  background: var(--alert);
  color: #fff;
  border-color: transparent;
}

.host-screen .roster li { flex-wrap: wrap; }

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  width: 100%;
}

.row-actions button {
  width: auto;
  min-height: 2.6rem;
  margin: 0;
  padding: 0.3rem 0.85rem;
}

.go { background: var(--gold); }

.bar {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.bar img { width: 4rem; height: 4.8rem; }

.bar.impostor h1 { color: var(--alert); }

.tasks, .roster, .log {
  list-style: none;
  padding: 0;
}

.tasks li, .roster li, .knob, .simulate, .report {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 0.8rem;
  margin: 0.55rem 0;
}

.tasks li {
  display: grid;
  gap: 0.2rem;
}

.tasks li.done { opacity: 0.55; }
body[data-role="try"] .tasks li .check { display: none; }
body[data-role="try"] .tasks li.tried .check { display: inline; }

.room, .check {
  color: var(--gold);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cap { text-transform: capitalize; }

.timer {
  font-size: clamp(3rem, 12vw, 6rem);
  font-weight: 800;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.code {
  letter-spacing: 0.18em;
  font-size: clamp(3.4rem, 16vw, 6rem);
}

.cover .secret { display: none; }
.cover.open .secret { display: block; }
.cover.open > button { display: none; }

.knobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.6rem;
}

.knob {
  display: grid;
  grid-template-columns: 3.2rem 1fr 3.2rem;
  align-items: center;
  gap: 0.4rem;
}

.knob button { min-height: 2.8rem; }

.meter {
  height: 0.8rem;
  background: #0c1217;
  border-radius: 999px;
  overflow: hidden;
  margin: 0.8rem 0 1rem;
}

.meter span {
  display: block;
  height: 100%;
  background: var(--ok);
}

.warn {
  border-left: 4px solid var(--gold);
  padding-left: 0.7rem;
}

.banner {
  font-size: 1.4rem;
  color: var(--gold);
}

.roster li.off { opacity: 0.45; }
.roster li.out span.cap { text-decoration: line-through; }
.role-impostor { color: var(--alert); font-weight: 700; }
.role-crew { color: var(--ok); font-weight: 700; }
.roster .tally { margin-left: auto; font-weight: 700; }
body.watch .roster li { flex-wrap: wrap; }

.simulate, .report {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: end;
}

label { display: grid; gap: 0.3rem; font-size: 0.9rem; color: var(--muted); }

input, select {
  min-height: 3rem;
  border-radius: 0.8rem;
  border: 1px solid var(--line);
  background: #0e151b;
  padding: 0.4rem 0.7rem;
}

.hear {
  background: var(--panel);
  border-radius: 1rem;
  padding: 1rem 1.1rem 1.2rem;
  margin: 0.2rem 0 1rem;
  min-width: 0;
}

.hear-wait { margin: 0; }

.matrix-wrap { overflow-x: auto; max-width: 100%; }

.matrix {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  font-variant-numeric: tabular-nums;
}

.matrix th,
.matrix td {
  border: 1px solid var(--line);
  padding: 0.45rem 0.55rem;
  text-align: center;
  white-space: nowrap;
}

.matrix th {
  font-size: 0.82rem;
  font-weight: 700;
}

.matrix td {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--muted);
}

.matrix .who,
.matrix thead th:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--panel);
}

.matrix td.close { color: var(--ok); }
.matrix td.far { color: var(--gold); }
.matrix td.stale,
.matrix td.none { font-weight: 600; }
.matrix td.self { background: #0e151b; }

#toast:empty { display: none; }

#toast {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  background: var(--alert);
  color: white;
  border-radius: 1rem;
  padding: 0.9rem 1rem;
  font-weight: 700;
  text-align: center;
}

.host-top, .progress {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
}

.progress {
  font-size: 2rem;
  font-weight: 800;
  margin: 0;
}

.progress span {
  display: block;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}

img.face, button img.face, .roster img.face {
  width: 4.2rem;
  height: 4.2rem;
  object-fit: cover;
  border-radius: 50%;
  background: #0e151c;
}

.identity, .reveal-cast, .reveal-pals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.view-photo { text-align: center; }

body.phone:has(.showing-alarm) {
  padding: 0;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0, #fff8e4 0, #ffe3bf 24%, #8fd0ee 62%, #2b7396 100%);
}

body.phone .screen.view-button {
  width: 100%;
  max-width: none;
  min-height: calc(100dvh - 3.2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: 0.35rem;
}

body.phone .screen.view-button.showing-alarm {
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
  display: grid;
  place-items: center;
  background: transparent;
}

.view-button .kicker,
.view-button h1,
.view-button .hint {
  margin: 0;
}

.view-button h1 {
  font-size: clamp(1.7rem, 4.5vw, 2.8rem);
}

.view-button .not-the-button {
  align-self: center;
  min-height: 0;
  margin: 0;
  padding: 0.1rem 0.4rem;
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 0;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.showing-alarm .not-the-button {
  position: absolute;
  top: calc(0.45rem + env(safe-area-inset-top));
  left: 50%;
  z-index: 2;
  color: #173044;
  transform: translateX(-50%);
}

.showing-alarm .hint {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: calc(0.35rem + env(safe-area-inset-bottom));
  z-index: 2;
  color: #173044;
  font-weight: 800;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
}

.alarm-console {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  width: 100%;
}

.showing-alarm .alarm-console {
  flex: none;
  width: 80vw;
  height: 80vh;
}

.alarm {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 4% 6%;
  border: clamp(6px, 1.1vh, 14px) solid #1b2430;
  border-radius: 999px;
  color: #fff;
  background: #ff4b3a;
  box-shadow:
    inset 0 -2.4rem 0 rgba(154, 22, 16, 0.28),
    0 1.15rem 0 #1b2430;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  line-height: 0.92;
}

.alarm::before {
  content: "";
  position: absolute;
  inset: 3.5%;
  border: clamp(4px, 0.7vh, 9px) solid rgba(255, 255, 255, 0.72);
  border-radius: inherit;
  pointer-events: none;
}

.alarm::after {
  content: "";
  position: absolute;
  width: 34%;
  height: 16%;
  left: 14%;
  top: 8%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  transform: rotate(-16deg);
  pointer-events: none;
}

.alarm-flag,
.alarm-label {
  position: relative;
  z-index: 1;
}

.alarm-flag {
  display: block;
  background: transparent;
  color: #fff;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: clamp(1.35rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
}

.alarm-label {
  font-size: clamp(2.7rem, 7vw, 6.2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  max-width: 10ch;
}

.alarm:active {
  transform: translateY(0.55rem) scale(0.985);
  box-shadow:
    inset 0 -1rem 0 rgba(154, 22, 16, 0.35),
    0 0.35rem 0 #1b2430;
}

.meeting-cast {
  list-style: none;
  padding: 0.2rem;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.2rem, 1fr));
  gap: 0.75rem;
  align-content: center;
}

.meeting-cast li {
  background: #fff6df;
  color: #1a1208;
  border: 0.28rem solid #1a1208;
  border-radius: 1.5rem;
  box-shadow: 0.35rem 0.42rem 0 #1a1208;
  padding: 0.7rem 0.4rem 0.65rem;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.15rem;
}

.meeting-cast img {
  width: 4.4rem;
  height: 5.3rem;
  object-fit: contain;
}

.meeting-cast img.face {
  width: 3.6rem;
  height: 3.6rem;
  object-fit: cover;
  border: 0.16rem solid #1a1208;
  border-radius: 50%;
}

.meeting-cast .name {
  font-weight: 900;
  font-size: 1.15rem;
}

.meeting-cast .mark {
  margin-top: 0.15rem;
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 0.16rem solid #1a1208;
  border-radius: 999px;
  padding: 0.12rem 0.7rem;
}

.meeting-cast li.alive .mark { background: #8ee0ad; }

.meeting-cast li.dead { background: #f6e4dc; }

.meeting-cast li.dead img:not(.face) {
  filter: grayscale(1);
  opacity: 0.55;
}

.meeting-cast li.dead .name { text-decoration: line-through; }

.meeting-cast li.dead .mark {
  background: #e15b4c;
  color: #fff;
}

.log:empty { display: none; }

.finder {
  position: relative;
  width: min(16rem, 72vw);
  margin: 0.8rem auto 0.2rem;
  border-radius: 1.2rem;
  overflow: hidden;
  background: #0e151c;
  border: 1px solid var(--line);
}

.finder::before {
  content: "";
  display: block;
  padding-top: 133.333%;
}

.finder video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  opacity: 0;
}

.finder video.live { opacity: 1; }

label.shot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  border-radius: 1rem;
  padding: 0.7rem 1rem;
  font-weight: 700;
}

.shot input { display: none; }

.reveal {
  min-height: calc(100dvh - 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #05070a;
  border-radius: 1.2rem;
  padding: 1.5rem 1rem 2rem;
  overflow: hidden;
}

.reveal-you {
  width: 9rem;
  height: 11rem;
  animation: role-pop 0.7s cubic-bezier(.2, 1.4, .4, 1) both;
}

.reveal-word {
  margin: 0.4rem 0 0;
  font-size: clamp(3rem, 14vw, 5rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: role-slam 0.45s cubic-bezier(.2, 1.2, .3, 1) 0.85s both;
}

.reveal.crew .reveal-word { color: #8fd4ff; }
.reveal.impostor .reveal-word { color: #ff4b5c; }

.reveal.crew { animation: role-blue 0.45s ease 0.8s both; }
.reveal.impostor { animation: role-red 0.45s ease 0.8s both; }

.reveal-sub, .reveal button, .reveal .lede {
  animation: role-in 0.35s ease 2.4s both;
}

.reveal-pals {
  flex-wrap: wrap;
  margin-top: 0.8rem;
  animation: role-in 0.35s ease 2.1s both;
}

.reveal-pals span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.reveal.shown .reveal-you,
.reveal.shown .reveal-word,
.reveal.shown .reveal-sub,
.reveal.shown button,
.reveal.shown .lede,
.reveal.shown .reveal-pals,
.reveal.shown {
  animation: none;
}

.reveal.shown.crew { background: #0b1c2e; }
.reveal.shown.impostor { background: #2a0a10; }

@keyframes role-pop {
  0% { transform: translateY(70vh) scale(0.7); }
  70% { transform: translateY(0) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes role-slam {
  0% { transform: scale(2.5); opacity: 0; filter: blur(8px); }
  100% { transform: scale(1); opacity: 1; filter: none; }
}

@keyframes role-blue {
  from { background: #05070a; }
  to { background: #0b1c2e; }
}

@keyframes role-red {
  from { background: #05070a; }
  to { background: #2a0a10; }
}

@keyframes role-in {
  from { opacity: 0; transform: translateY(0.6rem); }
  to { opacity: 1; transform: none; }
}

.glitch {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem;
  text-align: center;
  background: #070b10;
  color: var(--foam);
}

.glitch::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 190, 0.16) 3px,
    transparent 4px
  );
  animation: glitch-scan 0.28s linear infinite;
  pointer-events: none;
}

.glitch.with-kills {
  position: relative;
  inset: auto;
  z-index: auto;
  min-height: 0;
  margin: 0 0 0.8rem;
  overflow: hidden;
}

.glitch.with-kills::before {
  inset: 0;
}

.glitch-copy {
  position: relative;
  font-size: clamp(2rem, 9vw, 3.4rem);
  font-weight: 800;
  line-height: 0.95;
  animation: glitch-text 0.35s steps(2) infinite;
}

.glitch p, .glitch button { position: relative; }

@keyframes glitch-scan {
  from { transform: translateY(0); }
  to { transform: translateY(10px); }
}

@keyframes glitch-text {
  0% { transform: translate(0); text-shadow: 3px 0 #f05, -3px 0 #0ff; }
  25% { transform: translate(-4px, 1px); }
  50% { transform: translate(4px, -2px); text-shadow: -3px 0 #f05, 3px 0 #0ff; }
  75% { transform: translate(-2px, 2px); }
  100% { transform: translate(0); }
}

.tasks li .face { justify-self: start; }

.killed { text-align: center; }

.stamp {
  margin: 0.2rem 0 0;
  font-size: clamp(3.2rem, 18vw, 6rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--alert);
  line-height: 0.9;
}

.bodies { display: grid; gap: 0.55rem; margin: 0.8rem 0; }
.bodies:not(:has(.body:not([hidden]))) { display: none; }

.body {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  background: #3a1c1c;
  color: var(--foam);
  text-align: left;
}

.body img { width: 2.2rem; height: 2.6rem; }
.body .face { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; }

#stage {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: calc(0.8rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom));
  background: #10161c;
  color: var(--foam);
}

#stage[hidden] { display: none; }

.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.stage-head h2 { margin: 0; font-size: 1.35rem; }
.stage-head button {
  min-height: 2.6rem;
  background: transparent;
  color: var(--foam);
  border: 1px solid var(--line);
}
.stage-help { margin: 0; color: var(--muted); }
.stage-body { flex: 1; display: flex; flex-direction: column; gap: 0.7rem; min-height: 0; }

.pad, .hold, .track {
  position: relative;
  flex: 1;
  min-height: 16rem;
  background: #0c1217;
  border: 1px solid var(--line);
  border-radius: 1rem;
  touch-action: none;
  overflow: hidden;
}

.hold { display: flex; flex-direction: column; justify-content: flex-end; }
.hold .fill { width: 100%; height: 0; background: var(--gold); }
.hold button {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
}

.hold-download,
.hold-upload,
.hold-fuel {
  justify-content: center;
  gap: 0;
  padding: 1.2rem 0.8rem 5.4rem;
  overflow: visible;
  border: 0;
  background:
    linear-gradient(118deg, transparent 0 34%, rgba(255, 43, 214, 0.72) 34% 46%, rgba(47, 107, 255, 0.82) 46% 60%, rgba(45, 255, 210, 0.7) 60% 72%, transparent 72%),
    #05060a;
}

.neon-track {
  position: relative;
  height: 6.6rem;
  margin: 0 0.85rem;
  background: #07080d;
  border: 3px solid #e9fdff;
  transform: skewX(-14deg);
  box-shadow:
    6px 5px 0 #ff2bd6,
    -5px -4px 0 #2dffd2,
    0 0 22px rgba(47, 107, 255, 0.45);
  overflow: hidden;
}

.neon-track::before,
.hold .neon-track .fill {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: repeating-linear-gradient(
    90deg,
    #ff2bd6 0 22px,
    #2f6bff 22px 44px,
    #2dffd2 44px 66px
  );
}

.neon-track::before { opacity: 0.28; }

.hold .neon-track .fill {
  opacity: 1;
  z-index: 1;
  clip-path: inset(0 100% 0 0);
}

.neon-word {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: skewX(14deg);
  pointer-events: none;
  color: #fff;
  font-family: "Arial Black", "Avenir Next", Impact, sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.8rem, 8vw, 3rem);
  letter-spacing: 0.04em;
  -webkit-text-stroke: 1px #081018;
  text-shadow:
    -3px 0 #2dffd2,
    3px 0 #ff2bd6;
}

.hold-download button,
.hold-upload button,
.hold-fuel button {
  background: #07080d;
  color: #fff;
  border: 3px solid #e9fdff;
  box-shadow: 4px 4px 0 #ff2bd6, -3px -3px 0 #2dffd2;
  font-style: italic;
  font-weight: 900;
}

.reader {
  position: absolute;
  left: 0;
  right: 0;
  top: 32%;
  height: 5.2rem;
  border-top: 2px dashed var(--gold);
  border-bottom: 2px dashed var(--gold);
}

.card, .bag, .mark, .crumb, .trash-piece, .found-piece {
  position: absolute;
  touch-action: none;
}

.card {
  top: 0.45rem;
  left: 0;
  width: 46%;
  height: 4.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: #1b1404;
  border-radius: 0.6rem;
  font-weight: 800;
}

.pad.printer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.printer-scene {
  width: min(20rem, 96%);
  height: min(26rem, 88%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.printer-unit {
  position: relative;
  width: 100%;
  height: 9.5rem;
  flex: none;
  z-index: 3;
}
.printer-shell {
  position: absolute;
  inset: 0 0 0.85rem 0;
  background: #2a3642;
  border: 1px solid #4a5966;
  border-radius: 1.05rem 1.05rem 0.4rem 0.4rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.printer-face {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  top: 1.35rem;
  bottom: 1.2rem;
  background: #1e2832;
  border-radius: 0.45rem;
}
.printer-led {
  position: absolute;
  top: 0.52rem;
  right: 0.85rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #e6c36a;
  box-shadow: 0 0 0 0.28rem rgba(230, 195, 106, 0.16);
}
.printer-led.printing { animation: printer-blink 0.7s steps(2) infinite; }
@keyframes printer-blink { 50% { opacity: 0.25; } }
.printer-slot {
  position: absolute;
  left: 11%;
  right: 11%;
  bottom: 0;
  height: 1.15rem;
  background: #161d25;
  border-radius: 0 0 0.35rem 0.35rem;
  z-index: 4;
}
.printer-mouth {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 0.22rem;
  height: 0.22rem;
  background: #070b10;
}
.badge-lane {
  position: relative;
  width: 70%;
  flex: 1;
  min-height: 0;
  margin-top: -0.42rem;
  overflow: hidden;
  z-index: 2;
}
.badge {
  position: absolute;
  left: 0;
  right: 0;
  height: 7.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
  padding: 0.8rem 0.7rem 0.85rem;
  background: #fbfaf6;
  color: #1c1914;
  border: 1px solid #e6e0d4;
  border-top: 0;
  border-radius: 0 0 0.4rem 0.4rem;
  touch-action: none;
}
.badge-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8d8478;
}
.badge-name {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.badge-band {
  width: 2.2rem;
  height: 2px;
  margin-top: 0.35rem;
  background: #e3d3ae;
  border-radius: 1px;
}
.badge.with-face { height: 11.4rem; }
.badge-face {
  width: 3.4rem;
  height: 3.4rem;
  object-fit: cover;
  border-radius: 0.3rem;
  background: #e4ddd0;
}

.bag {
  width: 4.6rem;
  height: 5.2rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.4rem;
  background: #3d4c3a;
  border-radius: 0.4rem 0.4rem 1.1rem 1.1rem;
  font-size: 0.8rem;
}

.found-bin {
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  width: min(16.5rem, 82%);
  height: 6.8rem;
  transform: translateX(-50%);
  z-index: 2;
}
.found-mouth {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 0.85rem;
  background: #070b10;
  border-radius: 0.2rem;
  box-shadow: 0 0 0 0.38rem #1a232c;
  z-index: 3;
}
.found-front {
  position: absolute;
  left: 0;
  right: 0;
  top: 0.85rem;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a3642;
  border: 1px solid #4a5966;
  border-radius: 0.55rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.found-plate {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e6d7b8;
}
.found-piece { z-index: 4; }
.found-bottle { width: 1.7rem; }
.found-neck {
  width: 0.62rem;
  height: 0.85rem;
  margin: 0 auto;
  background: #e7f6fb;
  border-radius: 0.16rem 0.16rem 0 0;
}
.found-bottle-body {
  height: 3.5rem;
  background: linear-gradient(#f7fcff, #6eacc2);
  border: 1px solid #b7dde8;
  border-radius: 0.45rem 0.45rem 0.7rem 0.7rem;
}
.found-pack { width: 3.8rem; }
.found-straps {
  display: flex;
  justify-content: space-between;
  width: 2.4rem;
  margin: 0 auto -0.7rem;
}
.found-straps span {
  width: 0.55rem;
  height: 1.5rem;
  background: #c4553a;
  border-radius: 0.3rem 0.3rem 0 0;
}
.found-pack-body {
  height: 3.15rem;
  background: #243044;
  border-radius: 0.85rem 0.85rem 0.55rem 0.55rem;
  box-shadow: inset 0 0.7rem 0 #31445c;
}

.trash-piece { z-index: 1; }
.trash-bag { width: 3.5rem; }
.trash-tie {
  width: 0.95rem;
  height: 0.62rem;
  margin: 0 auto -0.2rem;
  background: #1c3324;
  border-radius: 0.3rem 0.3rem 0.12rem 0.12rem;
}
.trash-sack {
  height: 3.7rem;
  background: #2c5a3c;
  border-radius: 42% 42% 1rem 1rem;
  box-shadow: inset 0 -0.45rem 0 rgba(0, 0, 0, 0.18);
}
.trash-cup { width: 2.5rem; }
.trash-rim {
  height: 0.42rem;
  background: #f7fbfc;
  border: 1px solid #d5e0e6;
  border-bottom: 0;
  border-radius: 0.2rem 0.2rem 0 0;
}
.trash-body {
  height: 2.9rem;
  background: linear-gradient(#ffffff, #e4eef3);
  clip-path: polygon(8% 0, 92% 0, 76% 100%, 24% 100%);
}
.trash-wrap {
  width: 3.3rem;
  height: 2.5rem;
  background: #c4a574;
  border-radius: 45% 58% 42% 62%;
  box-shadow: inset 0.7rem -0.45rem 0 rgba(92, 62, 28, 0.28);
  transform: rotate(-8deg);
}

.chute {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 5.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.4rem;
  background: #070b10;
  border: 2px dashed var(--muted);
  border-bottom: 0;
  color: var(--muted);
}

.wires { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; flex: 1; }
.wire-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.wire-col { display: flex; flex-direction: column; justify-content: space-between; gap: 0.7rem; }
.wire {
  min-height: 3.2rem;
  background: transparent;
  border: 3px solid currentColor;
  color: var(--foam);
  text-transform: capitalize;
  touch-action: none;
}
.wire.picked { background: rgba(240, 193, 74, 0.2); }
.wire.done { opacity: 0.4; }

.track { flex: 0; min-height: 4.2rem; margin: auto 0; border-radius: 999px; }
.track.meter {
  flex: 0 0 auto;
  width: 4.2rem;
  min-height: 16rem;
  align-self: center;
}
.zone {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  top: 41%;
  height: 18%;
  bottom: auto;
  background: rgba(240, 193, 74, 0.4);
}
.needle {
  position: absolute;
  top: 0;
  height: 4px;
  width: 100%;
  left: 0;
  right: 0;
  bottom: auto;
  margin: 0;
  background: var(--foam);
}

.reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5.5rem;
  height: 5.5rem;
  margin: -2.75rem;
  border: 2px dashed var(--gold);
  border-radius: 50%;
  z-index: 2;
}
.camera-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0.7rem;
  touch-action: none;
  container-type: size;
}
.camera-reticle {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 16rem;
  width: min(78cqw, 46cqh);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 3px dashed var(--gold);
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  box-sizing: border-box;
}
.camera-reticle.locked {
  border-style: solid;
  background: rgba(240, 193, 74, 0.16);
}
.camera-shot {
  position: absolute;
  max-width: none;
  pointer-events: none;
}
.camera-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 46%, rgba(0, 0, 0, 0.55) 100%);
}
.mark {
  width: 2.2rem;
  height: 2.2rem;
  margin: -1.1rem;
  border-radius: 50%;
  background: var(--alert);
}

.crumb { width: 2.8rem; height: 2.8rem; margin: -1.4rem; border-radius: 50%; background: #c4b39a; }

.point {
  position: absolute;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: var(--panel);
  color: var(--foam);
  font-weight: 800;
}
.point.hit { background: var(--gold); color: #1b1404; }

.pad.lyrics { background: #07060c; }
.lyric-wash, .lyric-deck { position: absolute; inset: 0; }
.lyric-crowd { position: absolute; left: 0; right: 0; bottom: 0.35rem; height: 5.6rem; }
.lyric-wash {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(90, 140, 255, 0.45), transparent 42%),
    radial-gradient(ellipse at 78% 8%, rgba(255, 170, 70, 0.4), transparent 46%),
    radial-gradient(ellipse at 50% 88%, rgba(180, 30, 20, 0.55), transparent 52%),
    linear-gradient(160deg, #140818, #2a1020 45%, #1a0c10);
  background-size: 180% 180%;
  animation: lyric-wash 7s ease-in-out infinite;
}
.lyric-wash::before, .lyric-wash::after {
  content: "";
  position: absolute;
  top: -30%;
  width: 14%;
  height: 150%;
  background: linear-gradient(to bottom, rgba(255, 244, 220, 0.42), rgba(255, 244, 220, 0));
  transform-origin: top center;
  animation: lyric-beam 3.2s ease-in-out infinite;
}
.lyric-wash::before { left: 24%; transform: rotate(16deg); }
.lyric-wash::after { left: 64%; transform: rotate(-12deg); animation-delay: -1.5s; }
.lyric-crowd {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100'%3E%3Cellipse cx='24' cy='92' rx='18' ry='24' fill='%2311080c'/%3E%3Ccircle cx='24' cy='62' r='12' fill='%2311080c'/%3E%3Cellipse cx='62' cy='96' rx='20' ry='26' fill='%2311080c'/%3E%3Ccircle cx='62' cy='66' r='13' fill='%2311080c'/%3E%3Cellipse cx='104' cy='90' rx='17' ry='22' fill='%2311080c'/%3E%3Ccircle cx='104' cy='60' r='11' fill='%2311080c'/%3E%3Cellipse cx='146' cy='98' rx='21' ry='28' fill='%2311080c'/%3E%3Ccircle cx='146' cy='64' r='13' fill='%2311080c'/%3E%3Cellipse cx='188' cy='92' rx='18' ry='24' fill='%2311080c'/%3E%3Ccircle cx='188' cy='62' r='12' fill='%2311080c'/%3E%3Cellipse cx='226' cy='96' rx='16' ry='22' fill='%2311080c'/%3E%3Ccircle cx='226' cy='68' r='11' fill='%2311080c'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: 15rem 6.2rem;
}
.lyric-deck {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  touch-action: none;
}
.lyric-now, .lyric-next { margin: 0; text-align: center; }
.lyric-now {
  font-size: clamp(2.6rem, 11vw, 4.4rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
.lyric-next {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(231, 240, 234, 0.42);
}
@keyframes lyric-wash {
  0%, 100% { background-position: 0% 40%; }
  50% { background-position: 100% 70%; }
}
@keyframes lyric-beam {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.8; }
}

.grid6, .simon, .keys { display: grid; gap: 0.55rem; }
.grid6, .keys { grid-template-columns: repeat(3, 1fr); }
.simon { grid-template-columns: 1fr 1fr; flex: 1; }
.simon button { min-height: 6rem; border-radius: 1rem; }
.simon button.lit { filter: brightness(1.7); }
.panel { min-height: 4.6rem; background: #0c1217; border: 1px solid var(--line); }
.panel.on { background: var(--gold); }
.light {
  min-height: 4.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
}
.light-track {
  position: relative;
  width: 4.6rem;
  height: 2.35rem;
  border-radius: 999px;
  background: #141c24;
  border: 1px solid #3a4652;
}
.light-nub {
  position: absolute;
  top: 0.22rem;
  left: 0.22rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: #9aa6b2;
}
.light.on .light-track { background: var(--gold); border-color: #e6c36a; }
.light.on .light-nub { left: auto; right: 0.22rem; background: #fff8e8; }

.cups { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.7rem; }
.cup {
  position: relative;
  width: 4rem;
  height: 5.2rem;
  padding: 0;
  border-radius: 0.4rem 0.4rem 1.4rem 1.4rem;
  background: #9c2b3a;
}
.cup::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  right: 0.45rem;
  top: 0.35rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #c96b78;
}
.cup.odd { background: #7f9a62; }
.cup.odd::before { background: #c5d4ad; }

.pad.connect { display: flex; flex-direction: column; gap: 0.8rem; padding: 0.8rem; }
.connect-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  align-content: center;
  min-height: 0;
}
.ccard {
  position: relative;
  touch-action: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 6.4rem;
  background: #f4efe4;
  border-radius: 0.7rem;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}
.ccard-head {
  display: block;
  padding: 0.4rem 0.65rem;
  background: #314556;
  color: #f4efe4;
  font-weight: 800;
}
.ccard.odd .ccard-head { background: var(--gold); color: #1b1404; }
.ccard-line {
  display: block;
  height: 0.42rem;
  margin: 0 0.7rem;
  border-radius: 999px;
  background: #d5cbb8;
}
.ccard-line.short { width: 55%; }
.connect-slot {
  flex: 0 0 auto;
  min-height: 4.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--muted);
  border-radius: 0.8rem;
  color: var(--muted);
  font-weight: 700;
}

.code-show, .code-entry { margin: 0; text-align: center; letter-spacing: 0.28em; font-size: 2rem; font-weight: 800; }
.code-entry { color: var(--gold); letter-spacing: 0.4em; }

.switches { display: flex; gap: 0.45rem; }
.switches.goal { pointer-events: none; }
.sw {
  flex: 1;
  min-height: 4.4rem;
  background: #0c1217;
  border: 1px solid var(--line);
  color: var(--foam);
}
.sw.on { background: var(--ok); color: #06210f; }

.align-target, .align-bar {
  position: absolute;
  left: 12%;
  right: 12%;
  height: 4px;
  border-radius: 999px;
}
.align-target { top: 50%; background: var(--gold); }
.align-bar { top: 20%; background: var(--foam); }

.pad.projector { padding: 0.7rem; }
.proj-screen {
  position: absolute;
  inset: 0.7rem;
  border: 2px solid var(--line);
  border-radius: 0.7rem;
  background: radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.07), transparent 58%), #0c1217;
  overflow: hidden;
}
.proj-target, .proj-bar { position: absolute; border-radius: 999px; }
.proj-h { left: 0; right: 0; height: 3px; margin-top: -1.5px; }
.proj-v { top: 0; bottom: 0; width: 3px; margin-left: -1.5px; }
.proj-target { background: var(--gold); }
.proj-target.proj-h { top: 50%; }
.proj-target.proj-v { left: 50%; }
.proj-bar { background: var(--foam); box-shadow: 0 0 12px rgba(231, 240, 234, 0.35); }
.proj-bar.proj-h { height: 6px; margin-top: -3px; }
.proj-bar.proj-v { width: 6px; margin-left: -3px; }

.field { display: block; margin-top: 0.8rem; color: var(--muted); }
.field[hidden] { display: none; }
.field select, .field input {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  min-height: 3.4rem;
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--foam);
  padding: 0.4rem 0.8rem;
}

.map-size {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.map-size .field {
  flex: 1 1 8rem;
  min-width: 0;
}

.map-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.map-tools button {
  width: auto;
  min-height: 2.6rem;
  padding: 0.3rem 0.75rem;
}

.map-tools button.on {
  background: var(--gold);
  color: #1b1404;
  border-color: transparent;
}

.plan {
  --map-max-h: min(70vw, 24rem);
  position: relative;
  width: 100%;
  height: var(--map-max-h);
  margin: 0.8rem auto 0;
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    #18222b;
  background-size: 2rem 2rem, 2rem 2rem, auto;
  touch-action: manipulation;
}

.plan.sized {
  width: min(100%, calc(var(--map-max-h) * var(--mw) / var(--md)));
  height: auto;
  aspect-ratio: var(--mw) / var(--md);
}

.pin {
  position: absolute;
  transform: translate(-50%, -110%);
  max-width: 8.5rem;
  min-height: 2rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--gold);
  color: #1b1404;
  font-size: 0.85rem;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

.pin.picked { outline: 3px solid var(--foam); }
.pin.position { background: var(--foam); }
.pin.task { background: var(--gold); }
.pin.button { background: var(--alert); color: #fff; }
.pin.camera { background: #8fd3ff; }
.pin { touch-action: none; z-index: 2; }

#pins, #dots { position: absolute; inset: 0; pointer-events: none; }
#pins { pointer-events: none; }
.pin { pointer-events: auto; }
body.watch .pin { pointer-events: none; cursor: default; }

#ink { position: absolute; inset: 0; pointer-events: none; }
.walls {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.walls line.wall {
  stroke: var(--foam);
  stroke-width: 3px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.walls line.hit {
  stroke: transparent;
  stroke-width: 14px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
#plan[data-tool="erase"] .walls line.hit { pointer-events: stroke; cursor: pointer; }
.area {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  color: var(--gold);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  user-select: none;
  touch-action: none;
  pointer-events: auto;
}
body.watch .area { pointer-events: none; }
#plan[data-tool="erase"] .area { cursor: pointer; }
.dot {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  min-height: 0;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--ok);
  color: #062117;
  font-size: 0.8rem;
  font-weight: 700;
  pointer-events: none;
}

.playmap { position: relative; }

.cams { margin: 0.8rem 0 1rem; }
.cams:empty { display: none; }
.cam-card { margin: 0.7rem 0 0; }
.cam-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1rem;
  background: #0c1218;
  border: 1px solid var(--line);
}
.cam-card figcaption {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-weight: 700;
}

.map-check {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.map-open {
  display: block;
  cursor: pointer;
}

.map-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 3.2rem;
  padding: 0.35rem 1.15rem;
  border-radius: 999px;
  background: var(--gold);
  color: #1b1404;
  font-weight: 800;
  cursor: pointer;
}

.map-sheet {
  display: block;
}

.map-head { display: none; }

.map-sheet .plan {
  --map-max-h: min(46vw, 12rem);
  height: var(--map-max-h);
  margin-top: 0.35rem;
}

.map-check:checked ~ .map-sheet {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: #070b10;
  padding: calc(0.7rem + env(safe-area-inset-top)) 0.8rem calc(0.8rem + env(safe-area-inset-bottom));
}

.map-check:checked ~ .map-sheet .map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex: 0 0 auto;
}

.map-head .kicker { margin: 0; }

.map-check:checked ~ .map-sheet .map-open {
  pointer-events: none;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.map-check:checked ~ .map-sheet .plan {
  --map-max-h: calc(100dvh - 6.5rem);
  width: 100%;
  height: var(--map-max-h);
  margin-top: 0.4rem;
}

.map-sheet .plan.sized,
.map-check:checked ~ .map-sheet .plan.sized {
  width: min(100%, calc(var(--map-max-h) * var(--mw) / var(--md)));
  height: auto;
  aspect-ratio: var(--mw) / var(--md);
}

.map-check:checked ~ .map-sheet .map-tap { display: none; }

.glitch:not(.with-kills) ~ .playmap {
  position: fixed;
  z-index: 30;
  left: 0.8rem;
  right: 0.8rem;
  bottom: calc(0.8rem + env(safe-area-inset-bottom));
}

.task-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-sheet .pin {
  max-width: 8.5rem;
  white-space: normal;
  line-height: 1.15;
  text-align: center;
  font-weight: 800;
  pointer-events: none;
}

.map-sheet .pin.done {
  opacity: 0.4;
  background: var(--muted);
  color: #12181f;
}

.map-sheet .you-dot {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  min-height: 0;
  padding: 0.15rem 0.4rem 0.25rem;
  border-radius: 1rem;
  border: 0.16rem solid #1a1208;
  background: #fff6df;
  color: #1a1208;
  box-shadow: 0.16rem 0.18rem 0 #1a1208;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.map-sheet .you-dot img {
  width: 2.4rem;
  height: 2.9rem;
  object-fit: contain;
}

#you-miss[hidden] { display: none; }

.map-sheet .area { pointer-events: none; }

.map-missing {
  margin: 0.8rem 0 0;
  padding-left: 1.15rem;
  color: var(--muted);
}

.sign {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: var(--panel);
  color: var(--foam);
}

.sign.closest { border: 2px solid var(--ok); }
.sign.picked { background: #243746; }
.sign .dbm { color: var(--muted); font-weight: 600; }
#waiting { margin-top: 0.8rem; }
#waiting .sign { margin-top: 0.45rem; }

.called { text-align: center; }
.called .stamp {
  margin-top: 0.4rem;
  max-width: 100%;
  font-size: clamp(1.85rem, 10.5vw, 3.15rem);
  letter-spacing: 0.03em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.called .timer { color: var(--gold); }
.called.button .stamp { color: var(--gold); }
.called .you { margin-top: 0.4rem; }

.eject {
  position: relative;
  min-height: 70vh;
  overflow: hidden;
  text-align: center;
  border-radius: 1.2rem;
  background:
    radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 72% 18%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 30% 70%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 84% 62%, #d7e7ff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 48% 40%, #fff 50%, transparent 52%),
    radial-gradient(circle at 50% 120%, #243656, #05070c 58%);
}

.floater {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-top: 18vh;
  animation: float-away 3.4s cubic-bezier(.33, .05, .45, 1) forwards;
}

.eject-word {
  position: relative;
  margin: 0.2rem 0 0;
  font-size: clamp(2.6rem, 12vw, 4.6rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: role-slam 0.45s cubic-bezier(.2, 1.2, .3, 1) 2.5s both;
}

.eject.crew .eject-word { color: #8fd4ff; }
.eject.impostor .eject-word { color: #ff4b5c; }

.eject-name {
  position: relative;
  animation: role-in 0.35s ease 3s both;
}

.eject.shown .floater {
  animation: none;
  transform: translateY(-78vh) rotate(20deg) scale(0.28);
  opacity: 0;
}

.eject.shown .eject-word,
.eject.shown .eject-name { animation: none; }

@keyframes float-away {
  0% { transform: translateY(0) rotate(-8deg) scale(1); opacity: 1; }
  100% { transform: translateY(-78vh) rotate(20deg) scale(0.28); opacity: 0; }
}

.bad { animation: shake 0.25s linear; }
@keyframes shake {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Projector. Laid out at 1920x1080, then scaled to the window.
   --display-fit is a plain number set from the window size. Safari drops a
   transform that divides two lengths inside scale(), and the board's top left
   then sits in the middle of the window. */
body.display {
  --display-fit: 1;
  padding: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #070b10;
}

body.display .screen {
  width: 1920px;
  height: 1080px;
  max-width: none;
  margin: 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--display-fit));
  transform-origin: center center;
  box-sizing: border-box;
  padding: 36px 48px 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background:
    radial-gradient(circle at top, #243746 0, transparent 28rem),
    var(--ink);
}

body.display .display-top {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 168px;
}

body.display .display-logo {
  width: 150px;
  height: auto;
  flex: 0 0 auto;
}

body.display .display-title {
  flex: 1;
  min-width: 0;
}

body.display .display-title .kicker {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.display .display-screen h1 {
  font-size: 84px;
  line-height: 0.92;
  margin: 4px 0 0;
}

body.display .stamp {
  margin: 8px 0 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

body.display .stamp.kind-report,
body.display .display-screen h1.kind-report { color: var(--alert); }

body.display .display-screen h1.kind-button { color: var(--gold); }

body.display .display-title .lede,
body.display .display-progress,
body.display .display-tasks,
body.display .display-trouble {
  margin: 8px 0 0;
  font-size: 32px;
  line-height: 1.15;
}

body.display .display-progress {
  color: var(--gold);
  font-weight: 800;
}

body.display .display-trouble {
  color: var(--alert);
  font-weight: 800;
}

body.display .timer {
  flex: 0 0 auto;
  font-size: 112px;
  line-height: 0.9;
  color: var(--gold);
}

body.display .display-found {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 28px;
  font-weight: 800;
}

body.display .display-found .portrait {
  height: 150px;
  width: auto;
}

body.display .display-meter {
  height: 18px;
  border-radius: 999px;
  background: #0e151b;
  overflow: hidden;
}

body.display .display-meter span {
  display: block;
  height: 100%;
  background: var(--gold);
}

body.display .display-tasks { margin-top: -8px; }

body.display .display-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.display .display-counts li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 160px;
  padding: 10px 18px;
  border-radius: 16px;
  background: var(--panel);
  font-size: 28px;
  font-weight: 800;
}

body.display .display-counts strong {
  margin-left: auto;
  font-size: 40px;
  color: var(--gold);
}

body.display .display-cast {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 16px;
  align-content: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.display .display-card {
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  height: 100%;
  padding: 16px 14px;
  border-radius: 28px;
  background: var(--panel);
  text-align: center;
  overflow: hidden;
}

body.display .display-card.dead { opacity: 0.55; }
body.display .display-card.off { opacity: 0.4; }

body.display .portrait {
  position: relative;
  height: min(340px, 56cqh);
  width: auto;
  aspect-ratio: 104 / 126;
  flex: 0 0 auto;
}

body.display .portrait img.face,
body.display .portrait img.dye {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
}

body.display .portrait img.face + img.dye {
  position: absolute;
  width: 38%;
  height: 42%;
  right: -7%;
  bottom: -5%;
  background: #0e151b;
  border-radius: 12px;
}

body.display .who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

body.display .name {
  font-size: min(52px, 16cqw);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

body.display .stat {
  font-size: min(32px, 10cqw);
  font-weight: 800;
  color: var(--muted);
}

body.display .display-card.voted .stat { color: var(--ok); }
body.display .display-card.dead .stat { color: var(--alert); }

body.display .display-empty {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  font-size: 48px;
  color: var(--muted);
}