/* Lineup: the visual layer chosen in the October 6 direction pass.
   Suspects stand against a height chart with a name placard, type reads like
   precinct signage, and outcomes land as a rubber stamp on the case file.
   Loaded after style.css; layout, rules and markup stay in the earlier files.
   Explorations: design/directions/. */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("/fonts/big-shoulders-display.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Archivo;
  src: url("/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
:root {
  --ink: #15161a;
  --wall: #1e2024;
  --cream: #eee3cb;
  --orange: #ff6a2b;
  --stamp: #b9401a;
  --chalk: #d9d3c3;
  --plate: #0b0c0e;
  --muted: #a3a29b;
  --border: #33353a;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --chart-line: #ffffff0d;
  --chart-foot: #ffffff21;
  font-family: Archivo, "Segoe UI", Arial, sans-serif;
}
body {
  background: var(--ink);
}
.ambient {
  background: radial-gradient(
    ellipse 60% 40% at 50% -10%,
    #ff6a2b14,
    transparent 70%
  );
}
picture {
  display: block;
}

/* Type: condensed signage for headings, Archivo for everything you read. */
h1,
.brand,
.entry-card h2,
.case-settings h2,
.result-next h2,
.role-content h2,
.result-card h2,
.concealed h3,
.stage-icon,
.secret-symbol,
.step-number,
.empty-avatar {
  font-family: var(--display);
  letter-spacing: 0;
}
h1,
.stage h1,
.room-heading h1,
.results-heading h1 {
  font-weight: 800;
  line-height: 0.92;
  text-transform: uppercase;
}
h1 {
  font-size: clamp(3.2rem, 6.4vw, 6rem);
}
.stage h1 {
  font-size: clamp(2.8rem, 5vw, 4.4rem);
}
.entry-card h2,
.case-settings h2,
.result-next h2,
.concealed h3 {
  /* Secondary headings stay sentence case so each screen has one big
     all-caps heading: its h1. */
  font-weight: 700;
  line-height: 1;
}
.entry-card h2,
.case-settings h2 {
  font-size: 2.1rem;
}
.result-next h2 {
  font-size: 2.2rem;
}
.concealed h3 {
  font-size: 1.7rem;
}
.role-content h2,
.result-card h2 {
  /* The secret word is shown as written, large but not as a second
     all-caps heading. */
  font-weight: 800;
  line-height: 0.95;
}
.role-content h2 {
  font-size: clamp(2.6rem, 4vw, 3.4rem);
}
.result-card h2 {
  font-size: clamp(3rem, 5.6vw, 4.4rem);
}
.step-number {
  font-weight: 800;
  font-size: 1.6rem;
}
em {
  font-style: normal;
  color: var(--orange);
}
.brand {
  font-size: 3.4rem;
  font-weight: 800;
  text-transform: lowercase;
}
.eyebrow,
.brand-caption,
.speaking-label,
.private-card .eyebrow,
.stage .eyebrow {
  letter-spacing: 0.06em;
}
.deadline {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}
.room-code {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: 0.08em;
}

/* Surfaces: square case-file sheets and a plain precinct wall. */
.paper {
  border-radius: 3px;
  box-shadow:
    0 1px 0 #fff6 inset,
    0 18px 40px #0006;
}
.stage {
  border-radius: 4px;
  background: var(--wall);
}
.button,
.tabs button,
input,
.category,
.player-tile.empty,
.turn-row.current {
  border-radius: 4px;
}
.button.primary,
.button[data-primary] {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--orange);
  color: var(--ink);
}

/* Hero art: the caption sits under the table instead of on it. */
.art-caption {
  position: static;
  display: block;
  padding: 12px 0 0 12px;
  text-align: left;
  color: var(--muted);
  letter-spacing: 0.06em;
  font-size: 0.75rem;
}

/* Lobby art caption: give it a dark strip so it reads over the art. */
.lobby-art > span {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 36px 24px 18px;
  background: linear-gradient(transparent, #000000d9 60%);
  letter-spacing: 0.06em;
  font-size: 0.72rem;
}

/* The lineup: a height chart wall with suspects standing on the floor line
   and a name placard under each. Tiles share one continuous wall per row. */
.players-grid,
.vote-grid {
  column-gap: 0;
  row-gap: 18px;
}
.players-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vote-grid {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}
.player-tile,
.vote-candidate,
.player-tile.empty {
  --floor: 148px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-height: 218px;
  min-height: 0;
  padding: calc(var(--floor) - 96px) 4px 0;
  border: 0;
  border-radius: 0;
  text-align: center;
  color: var(--text);
  background:
    linear-gradient(var(--chalk), var(--chalk)) 0 var(--floor) / 100% 2px
      no-repeat,
    repeating-linear-gradient(
        to top,
        var(--chart-foot) 0 1px,
        transparent 1px 48px
      )
      0 0 / 100% var(--floor) no-repeat,
    repeating-linear-gradient(
        to top,
        var(--chart-line) 0 1px,
        transparent 1px 12px
      )
      0 0 / 100% var(--floor) no-repeat;
}
.player-tile .avatar,
.vote-candidate .avatar {
  width: 96px;
  height: 96px;
  flex: none;
}
.player-tile > div {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.player-tile b,
.vote-candidate b {
  display: block;
  width: calc(100% - 8px);
  margin: 0 auto;
  background: var(--plate);
  color: #f2efe6;
  font: 800 1.2rem/1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 9px 6px 8px;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.player-tile .you {
  color: var(--orange);
  font-size: 0.85em;
}
.player-status,
.vote-candidate > span {
  display: block;
  padding-top: 7px;
  font-size: 0.8rem;
  color: var(--muted);
}
.online-dot {
  position: absolute;
  top: calc(var(--floor) + 17px);
  right: 14px;
}
.player-tile.disconnected .avatar {
  opacity: 0.45;
}
.player-tile.empty {
  color: var(--muted);
  font-size: 0.8rem;
}
.player-tile.empty .empty-avatar {
  width: 96px;
  height: 96px;
  border: 2px dashed #ffffff30;
  border-radius: 22px;
  background: transparent;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  font-weight: 800;
  color: #ffffff40;
  flex: none;
}
.player-tile.empty > span {
  padding-top: 12px;
}
.vote-candidate.selected {
  background:
    linear-gradient(var(--orange), var(--orange)) 0 var(--floor) / 100% 2px
      no-repeat,
    radial-gradient(ellipse 60% 70% at 50% 0%, #ff6a2b33, transparent 75%) 0 0 /
      100% var(--floor) no-repeat,
    repeating-linear-gradient(
        to top,
        var(--chart-foot) 0 1px,
        transparent 1px 48px
      )
      0 0 / 100% var(--floor) no-repeat;
  border: 0;
}
.vote-candidate.selected b {
  background: var(--orange);
  color: var(--ink);
}
.vote-candidate.selected > span {
  color: var(--orange);
  font-weight: 700;
}
.vote-candidate:not(:disabled):hover {
  border: 0;
}
.vote-candidate:not(:disabled):hover b {
  box-shadow: inset 0 2px 0 var(--orange);
}
.vote-candidate:disabled {
  opacity: 1;
}
.vote-candidate:disabled .avatar,
.vote-candidate:disabled b {
  opacity: 0.45;
}
.vote-candidate:focus-visible {
  outline-offset: -3px;
}

/* Outcome: a rubber stamp on the case file, with room above the word. */
.result-card {
  padding-top: 76px;
}
.tiny-stamp {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--stamp);
  border: 2px solid var(--stamp);
}
.result-card > .tiny-stamp {
  font-size: 1.7rem;
  padding: 4px 14px;
  border: 4px double var(--stamp);
  top: 18px;
  right: 16px;
  transform: rotate(-9deg);
  mix-blend-mode: multiply;
}

@media (max-width: 760px) {
  /* Phones: show the art as its own block under the intro, not behind it. */
  .entry-story {
    min-height: 0;
  }
  .art-frame {
    position: static;
    width: auto;
    margin: 22px -6px 0;
    z-index: auto;
  }
  .hero-art {
    opacity: 1;
  }
  .art-caption {
    display: block;
  }
  .players-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vote-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
  }
  .vote-candidate {
    padding-left: 4px;
    padding-right: 4px;
  }
  h1 {
    font-size: clamp(2.9rem, 13vw, 4rem);
  }
  .entry-card h2,
  .case-settings h2 {
    font-size: 2.2rem;
  }
  .step-number {
    font-size: 1.25rem;
  }
}
/* Full rooms on phones: seven or more suspects switch to a tighter
   three-column lineup so the whole vote stays short. */
@media (max-width: 760px) {
  .players-grid:has(> :nth-child(7)),
  .vote-grid:has(> :nth-child(7)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 14px;
  }
  .players-grid:has(> :nth-child(7)) > *,
  .vote-grid:has(> :nth-child(7)) > * {
    --floor: 104px;
    min-height: 164px;
    padding-top: calc(var(--floor) - 66px);
  }
  .players-grid:has(> :nth-child(7)) .avatar,
  .vote-grid:has(> :nth-child(7)) .avatar,
  .players-grid:has(> :nth-child(7)) .empty-avatar {
    width: 66px;
    height: 66px;
  }
  .players-grid:has(> :nth-child(7)) b,
  .vote-grid:has(> :nth-child(7)) b {
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    padding: 7px 3px 6px;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .players-grid:has(> :nth-child(7)) .player-status,
  .vote-grid:has(> :nth-child(7)) .vote-candidate > span {
    font-size: 0.72rem;
    padding-top: 5px;
  }
  .players-grid:has(> :nth-child(7)) .online-dot {
    top: calc(var(--floor) + 12px);
    right: 6px;
  }
}
@media (max-width: 360px) {
  .players-grid:has(> :nth-child(7)) b,
  .vote-grid:has(> :nth-child(7)) b {
    font-size: 0.8rem;
    letter-spacing: 0;
    padding-left: 1px;
    padding-right: 1px;
  }
  .player-tile,
  .vote-candidate,
  .player-tile.empty {
    --floor: 132px;
    min-height: 202px;
  }
  .player-tile .avatar,
  .vote-candidate .avatar,
  .player-tile.empty .empty-avatar {
    width: 84px;
    height: 84px;
  }
  .player-tile,
  .vote-candidate,
  .player-tile.empty {
    padding-top: calc(var(--floor) - 84px);
  }
}

/* Headings receive focus on each phase change for screen readers; they are
   not controls, so they show no focus ring. */
#phase-title:focus {
  outline: none;
}

/* Motion (public/motion.js). View transitions keep the chrome anchored while
   content swaps; GSAP handles each moment's entrance. Nothing here runs with
   reduced motion: the script never starts a transition then. */
.motion-word {
  display: inline-block;
  white-space: nowrap;
}
.motion-ch {
  display: inline-block;
}
/* View transitions only run in full motion (motion.js checks), so these
   names are scoped to it. */
html[data-motion="full"] .site-header {
  view-transition-name: site-header;
}
html[data-motion="full"] .room-bar {
  view-transition-name: room-bar;
}
html[data-motion="full"] .phase-steps {
  view-transition-name: phase-steps;
}
html[data-motion="full"] .action-dock {
  view-transition-name: action-dock;
}
/* Chrome stays put (the page also scrolls to the top on a phase change),
   its contents crossfade in place. */
::view-transition-group(site-header),
::view-transition-group(room-bar),
::view-transition-group(phase-steps),
::view-transition-group(action-dock) {
  animation-duration: 0s;
}
::view-transition-old(root) {
  animation: 0.22s cubic-bezier(0.4, 0, 1, 1) both alibi-leave;
}
::view-transition-new(root) {
  animation: 0.34s cubic-bezier(0.16, 1, 0.3, 1) both alibi-enter;
}
@keyframes alibi-leave {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
@keyframes alibi-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Avatar builder (entry card). Same suspect style as the lineup. */
.paper [data-randomize] {
  color: var(--ink);
  background: transparent;
  border-color: #8f8672;
}
.paper [data-randomize] .die {
  font-size: 1.1rem;
  line-height: 1;
}
@media (hover: hover) {
  .paper [data-randomize]:hover:not(:disabled) {
    background: #ffffff80;
  }
}
.avatar-builder {
  margin: 20px 0 24px;
}
.builder-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.builder-preview .avatar {
  width: 84px;
  height: 84px;
}
.builder-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px dashed #b9ae94;
}
.builder-label {
  font-size: 0.78rem;
  font-weight: 650;
  color: #5d5848;
}
.builder-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.builder-option {
  width: 40px;
  height: 40px;
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: transparent;
  display: grid;
  place-items: center;
}
.builder-option .avatar.mini,
.builder-option .swatch {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}
.builder-option.selected {
  border-color: var(--ink);
  background: #ffffff70;
}
.builder-option:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 1px;
}
@media (hover: hover) {
  .builder-option:hover:not(.selected) {
    border-color: #00000030;
  }
}
@media (max-width: 440px) {
  .builder-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .builder-preview .avatar {
    width: 72px;
    height: 72px;
  }
}