/* Funemployed — "bright & silly". Chunky ink outlines, hard sticker shadows,
   loud flat colour. Fonts are self-hosted (SIL OFL, see /static/fonts). */

@font-face {
  font-family: "Lilita One";
  src: url("/static/fonts/lilita-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("/static/fonts/nunito-latin-wght.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Core palette */
  --ink: #1b1b2f;
  --ink-soft: #4a4560;
  --paper: #fffaf0;
  --job: #ffd23f;
  --stamp: #ff5a36;
  --mint: #3ddc97;
  --lilac: #c9bfdc;
  --stamp-soft: #ffd0c4;

  /* Phase grounds */
  --sky: #7b93ff;
  --sky-deep: #4f6cf0;
  --tangerine: #ff9248;
  --bubblegum: #ff8cc0;
  --ground: var(--sky);

  /* Shape */
  --line: 3px;
  --line-thick: 4px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow: 4px 4px 0 var(--ink);
  --shadow-lg: 6px 6px 0 var(--ink);

  /* Type */
  --font-display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-ui: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Motion */
  --boing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tap: 150ms;
  --move: 350ms;

  font-family: var(--font-ui);
  font-weight: 700;
}

body[data-phase="JOIN"],
body[data-phase="LOBBY"] { --ground: var(--sky); }
body[data-phase="ROUND_DEAL"],
body[data-phase="SUBMISSION"] { --ground: var(--tangerine); }
body[data-phase="INTERVIEW"],
body[data-phase="JUDGING"] { --ground: var(--bubblegum); }
body[data-phase="SCORING"] { --ground: var(--mint); }
body[data-phase="GAME_OVER"] { --ground: var(--job); }

/* Halloween mode: the room has the Halloween pack ticked (web/js/theme.js).
   Spookier grounds (mirrored in motion.js for the wipes), cobwebs and bats. */
body[data-theme="halloween"] {
  --hw-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none' stroke='%231b1b2f' stroke-opacity='.45' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0 0 L160 40 M0 0 L130 110 M0 0 L40 160 M0 0 L90 150'/%3E%3Cpath d='M38 10 Q30 22 33 33 Q22 32 10 40'/%3E%3Cpath d='M76 19 Q62 40 66 66 Q42 62 20 80'/%3E%3Cpath d='M114 29 Q94 58 99 99 Q64 92 30 120'/%3E%3Cpath d='M152 38 Q126 76 130 110 Q86 120 40 160'/%3E%3C/svg%3E");
  --hw-web-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none' stroke='%231b1b2f' stroke-opacity='.45' stroke-width='2' stroke-linecap='round'%3E%3Cg transform='matrix(-1 0 0 1 160 0)'%3E%3Cpath d='M0 0 L160 40 M0 0 L130 110 M0 0 L40 160 M0 0 L90 150'/%3E%3Cpath d='M38 10 Q30 22 33 33 Q22 32 10 40'/%3E%3Cpath d='M76 19 Q62 40 66 66 Q42 62 20 80'/%3E%3Cpath d='M114 29 Q94 58 99 99 Q64 92 30 120'/%3E%3Cpath d='M152 38 Q126 76 130 110 Q86 120 40 160'/%3E%3C/g%3E%3C/svg%3E");
  --hw-bat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath fill='%231b1b2f' fill-opacity='.55' d='M30 10 L27 6 L28 12 Q20 4 2 8 Q10 12 9 20 Q15 14 20 20 Q24 14 30 22 Q36 14 40 20 Q45 14 51 20 Q50 12 58 8 Q40 4 32 12 L33 6 Z'/%3E%3C/svg%3E");
}
body[data-theme="halloween"][data-phase="JOIN"],
body[data-theme="halloween"][data-phase="LOBBY"] { --ground: #9d7bea; }
body[data-theme="halloween"][data-phase="ROUND_DEAL"],
body[data-theme="halloween"][data-phase="SUBMISSION"] { --ground: #ff7a1a; }
body[data-theme="halloween"][data-phase="INTERVIEW"],
body[data-theme="halloween"][data-phase="JUDGING"] { --ground: #9be15d; }
body[data-theme="halloween"][data-phase="SCORING"] { --ground: #ff5d6c; }
body[data-theme="halloween"][data-phase="GAME_OVER"] { --ground: #ffc93c; }

body[data-theme="halloween"]::before,
body[data-theme="halloween"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Cobwebs in the top corners. */
body[data-theme="halloween"]::before {
  background:
    var(--hw-web) top left / 150px 150px no-repeat,
    var(--hw-web-right) top right / 150px 150px no-repeat;
}

/* A few bats flapping about. */
body[data-theme="halloween"]::after {
  background:
    var(--hw-bat) 12% 22% / 56px 28px no-repeat,
    var(--hw-bat) 86% 14% / 46px 23px no-repeat,
    var(--hw-bat) 80% 64% / 40px 20px no-repeat,
    var(--hw-bat) 8% 78% / 44px 22px no-repeat;
  animation: bats-flutter 6s ease-in-out infinite alternate;
}

@keyframes bats-flutter {
  from { transform: translateY(0); }
  to { transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="halloween"]::after { animation: none; }
}

/* Content above the decorations (overlays and toasts already are). */
body[data-theme="halloween"] .shell {
  position: relative;
  z-index: 1;
}
body[data-theme="halloween"] .tv-frame { z-index: 1; }

* {
  box-sizing: border-box;
}

/* No background on html: body's ground propagates to the whole canvas. */
html {
  min-height: 100%;
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  overscroll-behavior: none;
}

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

h1,
h2,
p {
  margin: 0;
}

h1,
h2,
.title {
  font-family: var(--font-display);
  font-weight: 400;
}

h1,
.title {
  font-size: clamp(2.1rem, 10vw, 2.6rem);
  line-height: 0.95;
}

h2 {
  font-size: 1.5rem;
  line-height: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- Layout ---------- */

.shell {
  width: min(100%, 30rem);
  min-height: 100svh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.brand {
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-decoration: none;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 var(--ink);
}

.status {
  font-weight: 900;
}

.status[data-tone="bad"] {
  color: var(--ink);
  -webkit-text-stroke: 0;
  background: var(--stamp);
  padding: 2px 10px;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
}

body[data-phase="JOIN"] .topbar {
  display: none;
}

.screen,
.stack {
  display: grid;
  gap: 18px;
}

.stack.tight {
  gap: 10px;
}

.centred {
  justify-items: center;
  text-align: center;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.row.spread {
  justify-content: space-between;
}

.row.baseline {
  align-items: baseline;
}

.eyebrow {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lede {
  font-size: 1.05rem;
  font-weight: 800;
}

.small {
  font-size: 0.85rem;
  font-weight: 800;
}

.notice {
  font-weight: 800;
}

/* ---------- Sticker surface ---------- */

.sticker,
.panel {
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: 14px 16px;
}

/* ---------- Buttons ---------- */

.btn {
  min-height: 52px;
  padding: 0 20px;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--tap) var(--boing), box-shadow var(--tap) var(--boing);
}

.btn:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.btn.primary {
  min-height: 60px;
  border-radius: 20px;
  background: var(--job);
  box-shadow: 5px 5px 0 var(--ink);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
}

.btn.primary:active:not(:disabled) {
  transform: translate(5px, 5px);
}

.btn.danger {
  background: var(--stamp);
}

.btn.ghost,
.btn:disabled {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
  cursor: not-allowed;
}

.btn.ghost:not(:disabled) {
  cursor: pointer;
}

.btn.small {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.85rem;
  white-space: nowrap;
}

.seat .btn.small {
  padding: 0 8px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--line) solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

/* ---------- Pills ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pill[data-tone="host"],
.pill[data-tone="winner"] { background: var(--job); }
.pill[data-tone="judge"],
.pill[data-tone="ready"] { background: var(--mint); }
.pill[data-tone="bot"] { background: var(--lilac); }
/* Ink, not paper, on stamp red: paper only reaches 3:1 there. */
.pill[data-tone="adult"] { background: var(--stamp); color: var(--ink); }
.pill[data-tone="up"] { background: var(--bubblegum); }
.pill[data-tone="offline"] {
  background: var(--stamp-soft);
  border-style: dashed;
}

.pill[data-tone="ready"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}

/* ---------- Forms ---------- */

.field {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 56px;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: 0 16px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
}

.field textarea {
  min-height: 9rem;
  padding: 12px 16px;
  resize: vertical;
}

.field.compact input,
.field.compact select {
  min-height: 46px;
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-size: 1rem;
}

.field .code-input {
  min-height: 64px;
  padding-left: 0.4em;
  font-family: var(--font-display);
  font-size: 2.2rem;
  letter-spacing: 0.4em;
  text-align: center;
  text-transform: uppercase;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pack-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.pack-list legend {
  margin-bottom: 8px;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pack-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 12px;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-weight: 900;
  cursor: pointer;
}

.pack-option input {
  flex: none;
  width: 22px;
  height: 22px;
  accent-color: var(--ink);
}

.pack-dot {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--pack-color);
}

.pack-text {
  display: grid;
  flex: 1;
  min-width: 0;
  padding: 6px 0;
}

.pack-description {
  font-size: 0.8rem;
  font-weight: 700;
}

.config-summary {
  display: grid;
  gap: 8px;
  margin: 0;
}

.config-summary div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.config-summary dt {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.config-summary dd {
  margin: 0;
  font-weight: 900;
  text-align: right;
}

/* ---------- Join ---------- */

.join {
  padding-top: 8px;
}

.join-hero {
  position: relative;
  height: 200px;
}

.join-hero .card {
  position: absolute;
  top: 24px;
}

.join-hero .card:nth-child(1) { left: calc(50% - 150px); transform: rotate(-13deg); }
.join-hero .card:nth-child(2) { left: calc(50% + 26px); transform: rotate(11deg); }
.join-hero .card:nth-child(3) { left: calc(50% - 62px); top: 4px; }

.join-title {
  display: grid;
  gap: 8px;
  text-align: center;
}

.logo {
  color: var(--paper);
  font-size: clamp(2.8rem, 14vw, 3.4rem);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink);
}

.host-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
}

.host-row span {
  flex: 1;
}

/* ---------- Lobby ---------- */

.room-code {
  display: grid;
  gap: 2px;
  background: var(--job);
  box-shadow: 5px 5px 0 var(--ink);
  border-radius: 22px;
}

.room-code-value {
  font-family: var(--font-display);
  font-size: 3.4rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.room-code-link {
  font-size: 0.85rem;
  font-weight: 800;
}

/* ---------- Faces & seats ---------- */

.face-wrap {
  display: inline-block;
  flex: none;
  width: 38px;
}

.face-wrap[data-size="sm"] { width: 30px; }
.face-wrap[data-size="lg"] { width: 64px; }
.face-wrap[data-size="xl"] { width: 120px; }

.face {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.seat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 96px;
  padding: 8px 6px;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.seat[data-online="false"] {
  border-style: dashed;
  background: var(--stamp-soft);
}

.seat-name {
  max-width: 100%;
  overflow: hidden;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seat-tag {
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.seat-actions {
  margin-top: 4px;
}

.seat.add {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

/* Seats inside the host sheet read as rows, not tiles. */
.sheet .seat {
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  min-height: 52px;
  padding: 4px 6px 4px 8px;
  box-shadow: none;
  text-align: left;
}

.sheet .seat-name {
  flex: 1;
}

.sheet .seat-actions {
  margin: 0;
}

/* ---------- Cards ---------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  aspect-ratio: 5 / 7;
  padding: 14px;
  border: var(--line-thick) solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  text-align: left;
  overflow: hidden;
}

.card.job {
  background: var(--job);
  aspect-ratio: auto;
  min-height: 150px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.card-text {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Text-fit ladder: ≤16 chars, 17–30, 31–45, 46–60. Sizes scale per card size. */
.card-text[data-length="m"] { font-size: 1.7rem; }
.card-text[data-length="l"] { font-size: 1.45rem; }
.card-text[data-length="xl"] { font-size: 1.2rem; }
.card.job .card-text { font-size: 2.4rem; line-height: 0.95; }

.card.back {
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, var(--sky-deep) 0 12px, #5f7cf4 12px 24px);
  width: 124px;
}

.card-back-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48%;
  aspect-ratio: 1;
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--font-display);
  font-size: 2rem;
}

button.card {
  cursor: pointer;
  font: inherit;
  transition: transform var(--move) var(--boing), box-shadow var(--move) var(--boing);
  -webkit-tap-highlight-color: transparent;
}

button.card[aria-pressed="true"] {
  transform: translateY(-6px) rotate(-2deg);
  box-shadow: 6px 10px 0 var(--ink), 0 0 0 4px var(--stamp);
}

button.card[aria-pressed="true"]::after {
  content: "IN";
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  background: var(--mint);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 900;
}

.card.compact {
  padding: 12px;
  border-width: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card.compact .card-text { font-size: 1.35rem; }
.card.compact .card-text[data-length="m"] { font-size: 1.15rem; }
.card.compact .card-text[data-length="l"] { font-size: 1rem; }
.card.compact .card-text[data-length="xl"] { font-size: 0.9rem; }
.card.job.compact { min-height: 0; }
.card.job.compact .card-text { font-size: 1.8rem; }

.card.mini {
  width: 100%;
  padding: 8px;
  border-width: var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

/* Interview tiles: the design's 12–17px range. */
.card.mini .card-text { font-size: 1.05rem; }
.card.mini .card-text[data-length="m"] { font-size: 0.82rem; }
.card.mini .card-text[data-length="l"],
.card.mini .card-text[data-length="xl"] { font-size: 0.75rem; }
.card.mini .card-back-mark { font-size: 1.2rem; }
.card.job.mini { aspect-ratio: 5 / 7; min-height: 0; }
.card.job.mini .card-header { font-size: 0.55rem; }
.card.job.mini .card-text { font-size: 1.3rem; }

.join-hero .card.mini {
  width: 124px;
}

.join-hero .card.job.mini {
  width: 140px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* ---------- Interview & judging ---------- */

.candidate-list {
  display: grid;
  gap: 14px;
}

.candidate {
  display: grid;
  gap: 12px;
}

.candidate h2 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.candidate[data-current="true"] {
  box-shadow: 4px 4px 0 var(--ink), 0 0 0 4px var(--job);
}

.hired-winner {
  position: relative;
  display: grid;
  justify-items: center;
}

.hired-winner .stamp {
  position: absolute;
  right: -78px;
  bottom: -14px;
}

.stamp {
  display: inline-block;
  padding: 4px 14px;
  border: var(--line-thick) solid var(--stamp);
  border-radius: 14px;
  background: var(--paper);
  color: var(--stamp);
  font-family: var(--font-display);
  font-size: 2.4rem;
  letter-spacing: 0.04em;
  transform: rotate(-10deg);
}

.scoreboard {
  display: grid;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  list-style: none;
  text-align: left;
}

.scoreboard li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-weight: 900;
}

.scoreboard li + li {
  border-top: 2px dashed var(--ink);
}

.scoreboard strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
}

.action-bar {
  position: sticky;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: grid;
  z-index: 2;
}

/* Sticky buttons float over cards, so a blocked one still needs a fill. */
.action-bar .btn:disabled {
  background: var(--paper);
}

.host-tools-launcher {
  display: flex;
  justify-content: flex-end;
}

/* ---------- Connection banner ---------- */

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-bottom: 16px;
  padding: 0 14px;
  border: var(--line) solid var(--ink);
  border-radius: 14px;
  background: var(--job);
  font-weight: 900;
}

.banner[hidden] {
  display: none;
}

.banner[data-tone="ok"] {
  background: var(--mint);
}

/* ---------- Toasts ---------- */

.toast-region {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  z-index: 50;
  display: grid;
  gap: 10px;
  width: min(calc(100% - 32px), 28rem);
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: var(--line) solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow);
  animation: toast-in var(--move) var(--boing) both;
}

.toast[data-tone="ok"] { background: var(--mint); }
.toast[data-tone="bad"] { background: var(--stamp); }
.toast[data-tone="error"] {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 4px 4px 0 var(--stamp);
}

.toast[data-leaving="true"] {
  animation: toast-out 200ms ease-in both;
}

.toast-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.toast-body {
  font-weight: 800;
}

@keyframes toast-in {
  from { transform: translateY(-120%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes toast-out {
  to { transform: translateY(-120%); opacity: 0; }
}

/* ---------- Bottom sheet ---------- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(27 27 47 / 0.55);
}

.sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 41;
  display: grid;
  gap: 12px;
  width: min(100%, 30rem);
  max-height: 85svh;
  margin: 0 auto;
  padding: 10px 18px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  border: var(--line-thick) solid var(--ink);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  background: var(--paper);
  text-align: left;
  animation: sheet-in var(--move) var(--boing) both;
}

.sheet-handle {
  justify-self: center;
  width: 48px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink);
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sheet-header h2 {
  font-size: 1.9rem;
}

.sheet-action {
  display: grid;
  gap: 2px;
  min-height: 60px;
  padding: 8px 12px;
  border: var(--line) solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  text-align: left;
  cursor: pointer;
}

.sheet-action-title {
  font-weight: 900;
}

.sheet-action-detail {
  font-size: 0.85rem;
  font-weight: 700;
}

@keyframes sheet-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }

  button.card[aria-pressed="true"] {
    transform: none;
  }
}

/* =====================================================================
   Phase 3 — phone screens
   ===================================================================== */

/* One column that never grows past the phone, however wide the carousel. */
.screen {
  grid-template-columns: minmax(0, 1fr);
}

/* Screens fill the phone so `.bottom` can sit at the foot. */
.screen > .stack {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 44px);
}

.screen > .stack > * {
  flex: none;
}

.screen > .stack > .grow {
  flex: 1 1 auto;
  justify-content: center;
}

.stack.none { gap: 0; }
.stack.centred { align-items: center; }
.grow { flex: 1 1 auto; min-width: 0; }
.bottom { margin-top: auto; }
.fill { min-height: calc(100svh - 44px); }
.full-width { width: 100%; }
.centre-text { text-align: center; }
.tight-row { gap: 6px; }

.title.medium { font-size: 1.7rem; }
.small-title { font-size: 1.5rem; }
.title[data-band="m"] { font-size: clamp(1.8rem, 8.5vw, 2.2rem); }
.title[data-band="l"] { font-size: clamp(1.5rem, 7vw, 1.9rem); }

.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
}

.room-label {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
}

.link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 900;
  text-decoration: underline;
  cursor: pointer;
}

.icon-btn.raised { box-shadow: var(--shadow-sm); }
.icon-btn.big { width: 56px; height: 56px; border-radius: 16px; }
.icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn[data-tone="mint"] { background: var(--mint); }
.btn[data-tone="stamp"] { background: var(--stamp); }
.btn[data-tone="yellow"] { background: var(--job); }
.btn.primary:disabled { background: var(--paper); }

/* Faces at every size the designs use. */
.face-wrap[data-size="xs"] { width: 26px; }
.face-wrap[data-size="sm"] { width: 32px; }
.face-wrap[data-size="lg"] { width: 70px; }
.face-wrap[data-size="xl"] { width: 116px; }
.face-wrap[data-size="xxl"] { width: 160px; }
.face-wrap[data-size="builder"] { width: 140px; }
.face-wrap[data-size="option"] { width: 52px; }

/* Chips & queues */
.chips,
.chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.chips { flex-wrap: nowrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 130px;
  height: 40px;
  padding: 0 12px 0 4px;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.9rem;
  font-weight: 900;
}

.chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip.more {
  padding: 0 12px;
  background: var(--ink);
  color: var(--paper);
}

/* Job banner (the slim "X is hiring a…" strip) */
.job-banner {
  display: grid;
  gap: 2px;
  padding: 8px 14px;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  background: var(--job);
  box-shadow: var(--shadow);
}

.job-banner-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
}

/* ---------- Rejoin & seat lost ---------- */

.rejoin-face {
  position: relative;
  padding: 8px 24px;
}

.speech {
  position: absolute;
  top: 6px;
  right: -14px;
  padding: 4px 10px;
  border: var(--line) solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-size: 1.1rem;
  transform: rotate(10deg);
}

.loading-dots {
  display: flex;
  gap: 10px;
}

.loading-dots span {
  width: 16px;
  height: 16px;
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  animation: dot-pulse 1.2s infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-pulse {
  0%, 100% { background: var(--paper); }
  40% { background: var(--job); }
}

.left-off {
  display: grid;
  gap: 2px;
  width: 100%;
  text-align: left;
}

.left-off-text {
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.seat-lost {
  display: grid;
  gap: 8px;
  max-width: 22rem;
}

/* ---------- Face builder ---------- */

.face-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  border-width: var(--line-thick);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
}

.name-input {
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
}

.btn.primary.small-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  font-size: 1.2rem;
}

.segmented {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 6px;
  padding: 4px;
  border: var(--line) solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
}

.segmented button {
  min-height: 42px;
  padding: 0 6px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 900;
  cursor: pointer;
}

.segmented button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.option {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  padding: 6px;
  border: var(--line) solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  cursor: pointer;
}

.option[aria-pressed="true"] {
  background: var(--job);
  box-shadow: var(--shadow);
}

.swatch {
  width: 44px;
  height: 44px;
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  background: var(--swatch);
}

/* ---------- Lobby ---------- */

.room-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.room-code-link {
  overflow-wrap: anywhere;
}

.seat-grid[data-cols="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.seat-grid[data-cols="4"] .seat {
  min-height: 88px;
  padding: 5px 4px;
}

.seat-grid[data-cols="4"] .seat-name { font-size: 0.8rem; }
.seat-grid[data-cols="4"] .seat-tag { font-size: 0.6rem; }

.pack-row,
.pack-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  border: var(--line) solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.pack-row-dots {
  display: flex;
}

.pack-row-dots .pack-dot + .pack-dot {
  margin-left: -8px;
}

.pack-dot.big {
  width: 28px;
  height: 28px;
  border-width: var(--line);
}

.pack-row-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.pack-name {
  font-weight: 900;
}

.pack-row-change {
  padding: 6px 12px;
  border: var(--line) solid var(--ink);
  border-radius: 12px;
  background: var(--job);
  font-size: 0.85rem;
  font-weight: 900;
}

.pack-toggle {
  min-height: 72px;
  box-shadow: none;
  background: #c3cdfb;
}

.pack-toggle[aria-pressed="true"] {
  background: var(--paper);
  box-shadow: var(--shadow);
}

.pack-toggle .pack-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
}

.switch {
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
}

.switch span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  transition: left var(--tap) var(--boing);
}

.pack-toggle[aria-pressed="true"] .switch { background: var(--mint); }
.pack-toggle[aria-pressed="true"] .switch span { left: 24px; }

.pack-summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pack-summary .btn.primary {
  min-height: 50px;
  padding: 0 20px;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 14px;
  border: var(--line) solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
}

.stepper .small {
  flex: 1;
}

.stepper .icon-btn {
  font-size: 1.4rem;
  font-weight: 900;
}

.stepper-value {
  min-width: 2ch;
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-align: center;
}

.applicant-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 230px;
  padding: 16px;
  border: var(--line-thick) solid var(--ink);
  border-radius: 26px;
  background: var(--paper);
  box-shadow: 7px 7px 0 var(--ink);
  transform: rotate(-3deg);
}

.applicant-card .card-header {
  align-self: stretch;
}

.applicant-name {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  overflow-wrap: anywhere;
}

.applicant-name[data-band="m"] { font-size: 1.9rem; }
.applicant-name[data-band="l"] { font-size: 1.5rem; }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.summary-grid > div {
  display: grid;
  gap: 2px;
}

.small-eyebrow {
  font-size: 0.7rem;
}

.summary-value {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.1;
}

.sheet.centred {
  justify-items: center;
  text-align: center;
}

.sheet.centred .btn {
  width: 100%;
}

.sheet-title {
  font-size: 1.9rem;
}

/* ---------- Cards: bigger sizes and footer ---------- */

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: var(--line) solid var(--ink);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-pack {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.card-pack .pack-dot {
  width: 11px;
  height: 11px;
}

.card .card-text {
  flex: 1;
}

/* Carousel cards: the text-fit ladder at full size (32 / 27 / 23 / 19px). */
.card.full {
  flex: 0 0 min(260px, 72vw);
  aspect-ratio: auto;
  /* Short windows: keep the card's button clear of the sticky dock. */
  height: min(372px, 103vw, 54svh);
  scroll-snap-align: center;
  border-radius: 26px;
  box-shadow: 7px 7px 0 var(--ink);
  overflow: visible;
}

.card.full .card-text { font-size: 2rem; }
.card.full .card-text[data-length="m"] { font-size: 1.7rem; }
.card.full .card-text[data-length="l"] { font-size: 1.45rem; }
.card.full .card-text[data-length="xl"] { font-size: 1.2rem; }
.card.full[data-swapping="true"] { background: var(--job); }

.card.hero {
  width: min(286px, 78vw);
  aspect-ratio: 5 / 7;
  border-radius: 28px;
  box-shadow: 9px 9px 0 var(--ink);
  transform: rotate(-2deg);
}

.card.job.hero .card-text { font-size: 2.6rem; }

.card.tile {
  aspect-ratio: auto;
  height: 200px;
  padding: 8px;
  border-width: var(--line);
  border-radius: 18px;
  box-shadow: 5px 5px 0 var(--ink);
  overflow: visible;
}

.card.tile .card-text { font-size: 1.05rem; }
.card.tile .card-text[data-length="m"] { font-size: 0.95rem; }
.card.tile .card-text[data-length="l"],
.card.tile .card-text[data-length="xl"] { font-size: 0.8rem; }
.card.back.tile { width: auto; }

.card.strip {
  aspect-ratio: auto;
  padding: 10px 12px;
  border-width: var(--line);
  border-radius: 14px;
  box-shadow: none;
}

.card.strip .card-text,
.card.strip .card-text[data-length] {
  font-size: 1.15rem;
}

.card-back-hint {
  padding: 2px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 900;
  white-space: nowrap;
}

.card.back { gap: 10px; }

.card-row.tilted > :nth-child(1) { transform: rotate(-3deg); }
.card-row.tilted > :nth-child(2) { transform: rotate(1deg); }
.card-row.tilted > :nth-child(3) { transform: rotate(3deg); }

.flag {
  position: absolute;
  top: -16px;
  right: -10px;
  z-index: 1;
  padding: 2px 8px;
  border: var(--line) solid var(--ink);
  border-radius: 10px;
  background: var(--job);
  font-family: var(--font-display);
  font-size: 0.8rem;
  white-space: nowrap;
  transform: rotate(10deg);
}

/* ---------- Pitch: carousel + dock ---------- */

.carousel {
  display: flex;
  gap: 16px;
  margin: 0 -16px;
  /* Centre the first and last cards. Percentages resolve against the parent,
     which is 32px narrower than this (see the negative margin). */
  padding: 14px calc(50% + 16px - min(130px, 36vw)) 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel::-webkit-scrollbar { display: none; }

.pitch-number {
  position: absolute;
  top: -14px;
  right: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  background: var(--mint);
  font-family: var(--font-display);
  font-size: 1.4rem;
}

.card-action {
  min-height: 48px;
  border: var(--line) solid var(--ink);
  border-radius: 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.2rem;
  cursor: pointer;
}

.card-action[data-state="in"] {
  background: var(--mint);
  color: var(--ink);
}

.dock {
  position: sticky;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 2;
  display: grid;
  gap: 10px;
  border-radius: 22px;
  box-shadow: 5px 5px 0 var(--ink);
}

.dock-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.dock-slots {
  display: grid;
  grid-template-columns: repeat(var(--slots), minmax(0, 1fr));
  gap: 10px;
}

.dock-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 22px 6px 6px;
  border: var(--line) solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--tap) var(--boing);
}

.dock-slot.empty {
  padding: 0;
  border-style: dashed;
  box-shadow: none;
  color: #8a7f74;
  font-family: var(--font-display);
  font-size: 1.6rem;
  cursor: default;
}

.dock-slot[aria-pressed="true"] {
  background: var(--mint);
  box-shadow: 4px 8px 0 var(--ink);
  transform: translateY(-6px);
}

.dock-slot[data-swap-target="true"] { background: var(--job); }

.dock-number {
  position: absolute;
  top: 4px;
  left: 8px;
  font-family: var(--font-display);
  font-size: 1rem;
}

.dock-text {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.dock-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dock-tools .btn.small {
  min-height: 46px;
  border-radius: 12px;
}

.seat.application[data-status="in"] { background: var(--mint); }
.seat.application[data-status="thinking"] {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}
.seat.application[data-status="offline"] {
  border-style: dashed;
  background: var(--stamp);
  box-shadow: none;
}

/* ---------- Interview ---------- */

.candidate-heading { align-items: center; }

.info-row {
  padding: 10px 14px;
  box-shadow: none;
}

.up-next {
  display: grid;
  gap: 4px;
  background: var(--mint);
  box-shadow: 5px 5px 0 var(--ink);
}

.mini-backs {
  display: flex;
  gap: 6px;
  padding-top: 6px;
}

.mini-backs span {
  flex: 1;
  height: 44px;
  border: var(--line) solid var(--ink);
  border-radius: 10px;
  background: repeating-linear-gradient(45deg, var(--sky-deep) 0 6px, #5f7cf4 6px 12px);
}

.seat.row-tile {
  flex-direction: row;
  justify-content: flex-start;
  gap: 6px;
  min-height: 58px;
  padding: 4px 8px 4px 4px;
  box-shadow: none;
  text-align: left;
}

.seat.row-tile[data-state="up"] { background: var(--bubblegum); }
.seat.row-tile[data-state="done"] { opacity: 0.7; }

.tile-text { min-width: 0; }
.seat.row-tile .face-wrap { width: 26px; }
.seat.row-tile .seat-name { font-size: 0.85rem; }

/* ---------- Judging ---------- */

.face-strip {
  display: flex;
  justify-content: space-between;
  gap: 2px;
}

.strip-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 54px;
  padding: 0;
  border: var(--line) solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
}

.strip-face[aria-pressed="true"] {
  background: var(--job);
  transform: translateY(-4px);
}

.applicant-stack {
  position: relative;
  padding: 0 4px 10px;
}

.applicant-stack::before {
  position: absolute;
  inset: 14px 14px 0;
  border: var(--line-thick) solid var(--ink);
  border-radius: 28px;
  background: var(--paper);
  content: "";
  transform: rotate(4deg);
}

.applicant-sheet,
.hired-sheet {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 18px;
  border: var(--line-thick) solid var(--ink);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 9px 9px 0 var(--ink);
}

.judge-controls .btn.primary {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thinking {
  position: relative;
  padding: 20px 70px 0 0;
}

.thought {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 90px;
  height: 64px;
  border: var(--line) solid var(--ink);
  border-radius: 40px;
  background: var(--paper);
}

.thought span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
  animation: dot-bounce 1.2s infinite;
}

.thought span:nth-child(2) { animation-delay: 0.15s; }
.thought span:nth-child(3) { animation-delay: 0.3s; }

@keyframes dot-bounce {
  0%, 60%, 100% { transform: none; }
  30% { transform: translateY(-5px); }
}

.lineup-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: var(--line) solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.lineup-row[data-you="true"] { background: var(--job); }

.lineup-name {
  flex: 0 0 64px;
  overflow: hidden;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lineup-cards {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.lineup-card {
  display: -webkit-box;
  overflow: hidden;
  padding: 4px 6px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.1;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* ---------- Hired & game over ---------- */

.hired-sheet .stamp {
  position: absolute;
  top: -22px;
  right: -10px;
  border-width: 5px;
  box-shadow: var(--shadow);
  font-size: 2.2rem;
  transform: rotate(-10deg);
}

.hired { padding-top: 6px; }

.score-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 6px;
}

.score-cell {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.score-value {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
}

.score-delta {
  min-width: 26px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
  text-align: center;
}

.score-delta[data-up="true"] { background: var(--job); }

.countdown {
  height: 14px;
  overflow: hidden;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
}

.countdown span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  transform-origin: left;
  animation: countdown var(--seconds) linear both;
}

@keyframes countdown {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.champion {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(272px, 100%);
  margin: 20px auto 0;
  padding: 34px 20px 20px;
  border: var(--line-thick) solid var(--ink);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 9px 9px 0 var(--ink);
  text-align: center;
}

.champion-ribbon {
  position: absolute;
  top: -20px;
  left: 50%;
  padding: 4px 14px;
  border: var(--line) solid var(--ink);
  border-radius: 12px;
  background: var(--stamp);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-3deg);
}

.crowned {
  position: relative;
  margin-top: 14px;
}

.crown {
  position: absolute;
  top: -18px;
  left: 50%;
  width: 62px;
  transform: translateX(-50%);
}

.ranking {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking li,
.person-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px 0 10px;
  border: var(--line) solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
}

.ranking li[data-you="true"] { background: var(--mint); }

.rank {
  width: 22px;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.ranking-name,
.person-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-row { padding-right: 6px; }
.person-row[data-online="false"] { border-style: dashed; background: var(--stamp-soft); }

.sheet-action.danger { background: var(--stamp); }

/* Headings that wear the eyebrow style keep the eyebrow's type. */
h1.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 900;
  line-height: normal;
}

/* =====================================================================
   Phase 4 — moments & motion
   ===================================================================== */

#moments {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
}

.moment-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
}

.wipe-flood {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wipe-title,
.deal-number {
  color: var(--paper);
  font-family: var(--font-display);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--ink);
}

.wipe-title {
  font-size: clamp(2.6rem, 13vw, 3.6rem);
  line-height: 1;
}

.deal-round {
  display: grid;
  justify-items: center;
}

.deal-number {
  font-size: 6rem;
  line-height: 0.85;
}

.deal-stage {
  position: relative;
}

.deal-stage .card.hero {
  transform: rotate(-2deg);
}

.deal-boss {
  padding: 8px 16px;
  border: var(--line) solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow);
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.puff {
  position: absolute;
  bottom: -6px;
  left: calc(50% - 13px);
  width: 26px;
  height: 26px;
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  opacity: 0;
}

.confetti {
  position: absolute;
  width: 14px;
  height: 9px;
  margin: -4px 0 0 -7px;
  border: 2px solid var(--ink);
  border-radius: 2px;
}

.stamp-ring {
  position: absolute;
  top: -22px;
  right: -10px;
  width: 170px;
  height: 64px;
  border: 6px solid var(--stamp);
  border-radius: 16px;
  pointer-events: none;
}

.flick-ghost {
  position: absolute;
  z-index: 46;
  margin: 0;
  pointer-events: none;
}

/* Idle: faces bob out of sync while waiting; whoever's up wiggles. */
@keyframes face-bob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-6px) scale(.94, 1.08); }
  50% { transform: translateY(0) scale(1.08, .92); }
  62% { transform: translateY(0) scale(1, 1); }
}

@keyframes face-wiggle {
  0%, 40%, 100% { transform: rotate(0) scale(1); }
  46% { transform: rotate(-14deg) scale(1.1); }
  52% { transform: rotate(12deg) scale(1.1); }
  58% { transform: rotate(-8deg) scale(1.05); }
  64% { transform: rotate(0) scale(1); }
}

.face-wrap {
  transform-origin: 50% 100%;
}

.seat-grid .seat .face-wrap,
.chip .face-wrap,
.thinking .face-wrap,
.applicant-card .face-wrap {
  animation: face-bob 2.8s ease-in-out infinite;
}

.seat-grid .seat:nth-child(2n) .face-wrap,
.chip:nth-child(2n) .face-wrap { animation-delay: -0.7s; }
.seat-grid .seat:nth-child(3n) .face-wrap,
.chip:nth-child(3n) .face-wrap { animation-delay: -1.4s; }
.seat-grid .seat:nth-child(5n) .face-wrap { animation-delay: -2.1s; }

.seat.row-tile[data-state="up"] .face-wrap,
.candidate-heading .face-wrap {
  animation: face-wiggle 2.4s ease-in-out infinite;
}

[data-self] {
  cursor: pointer;
}

/* Sound toggle in each top row: quieter than the host tools button. */
.sound-btn {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}

.sound-btn svg { width: 18px; height: 18px; }

.sound-btn[aria-pressed="true"] {
  background: var(--stamp-soft);
}

@media (prefers-reduced-motion: reduce) {
  .face-wrap,
  .seat-grid .seat .face-wrap,
  .chip .face-wrap,
  .thinking .face-wrap,
  .applicant-card .face-wrap,
  .seat.row-tile[data-state="up"] .face-wrap,
  .candidate-heading .face-wrap {
    animation: none;
  }
}

/* =====================================================================
   Phase 6 — card art & how to play
   ===================================================================== */

/* Illustration: square, centred, about 60% of the card's width. */
.card-art {
  display: block;
  flex: none;
  align-self: center;
  width: 60%;
  aspect-ratio: 1;
}

.card-art > svg,
.card-art > img {
  display: block;
  width: 100%;
  height: 100%;
}

.card.job.full .card-art,
.card.hero .card-art { width: 58%; }
.card.compact .card-art { width: 34%; }
.card.tile .card-art,
.card.mini .card-art { width: 72%; }
.card.job.compact .card-art { display: none; }

/* Strips (judging and hired lists) put the art on the left. */
.card.strip {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
}

.card.strip .card-art {
  width: 64px;
  align-self: center;
}

.dock-slot .card-art {
  width: 34px;
  margin-bottom: 2px;
}

.dock-slot {
  flex-direction: column;
  gap: 0;
}

/* The big screen's cards are bigger still. */
.card.tv-job .card-art { width: 290px; }
.card.tv-card .card-art { width: 82%; }
.tv .card.strip .card-art { width: 84px; }
.tv-panel[data-compact] .card.strip .card-art { width: 48px; }

.help-mark {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1;
}

/* How to play */
.how-scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 340px;
}

.how-scene[data-step="1"] {
  flex-direction: row;
  gap: 0;
}

.how-boss {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 150px;
  padding: 24px 12px;
  border-width: var(--line-thick);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  transform: rotate(-8deg);
}

.how-scene[data-step="1"] .card.job.mini {
  width: 180px;
  margin-left: -20px;
  transform: rotate(6deg) translateY(40px);
}

.how-fan {
  display: flex;
  justify-content: center;
}

.how-fan .card.mini {
  width: 104px;
}

.how-fan .card:nth-child(1) { transform: rotate(-12deg) translate(14px, 12px); }
.how-fan .card:nth-child(3) { transform: rotate(12deg) translate(-14px, 12px); }
.how-fan .card:nth-child(2) { z-index: 1; }

.how-dock {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  padding: 10px;
  border: var(--line) solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
}

.how-dock span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border: var(--line) dashed var(--ink);
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.how-dock span[data-filled] {
  border-style: solid;
  background: var(--mint);
}

.how-scene[data-step="3"] .card-row {
  width: 100%;
}

.how-scene[data-step="3"] .card.tile {
  height: 160px;
}

.how-winner {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 240px;
  padding: 26px 12px;
  border-width: var(--line-thick);
  border-radius: 26px;
  box-shadow: 8px 8px 0 var(--ink);
}

.how-scene[data-step="4"] .stamp {
  position: absolute;
  right: 0;
  bottom: 6px;
}

.how-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.how-dots span {
  width: 14px;
  height: 14px;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  transition: width var(--move) var(--boing);
}

.how-dots span[data-on] {
  width: 34px;
  background: var(--ink);
}

.how-to-play .row .btn.primary {
  flex: 1;
}

/* Admin */
body.admin .admin-shell {
  display: grid;
  gap: 18px;
  width: min(100% - 32px, 72rem);
  margin: 0 auto;
  padding: 20px 0 40px;
}

.admin-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-header .status { margin-left: auto; }

.admin-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 18px;
  align-items: start;
}

.admin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.admin-row .field.compact input[type="color"] {
  width: 64px;
  padding: 4px;
}

.small[data-tone="bad"],
.admin-error {
  color: #a1260f;
  font-weight: 900;
}

.admin-card-list {
  display: grid;
  gap: 6px;
  max-height: 22rem;
  overflow-y: auto;
}

.admin-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 4px 10px;
  border: var(--line) solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.admin-card-row[aria-pressed="true"] { background: var(--job); }

.admin-card-number {
  font-family: var(--font-display);
  min-width: 3ch;
}

.admin-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.admin-preview {
  display: grid;
  gap: 12px;
  width: 240px;
}

.admin-preview .card.full {
  height: 340px;
}

/* =====================================================================
   Phase 7 — accessibility & polish
   ===================================================================== */

/* Tap targets: anything smaller than 44px gets an invisible hit area that
   reaches 44px, so the look stays compact but thumbs still land. */
.btn.small,
.sound-btn,
.strip-face,
.link {
  position: relative;
}

.btn.small::after,
.sound-btn::after,
.strip-face::after,
.link::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  content: "";
  transform: translate(-50%, -50%);
}

.segmented button {
  min-height: 44px;
}

/* Selected faces in the judging strip: a ring as well as the colour. */
.strip-face[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink);
}

/* Focus rings stay visible on ink-filled controls too. */
.segmented button:focus-visible,
.card-action:focus-visible,
.chip.more:focus-visible {
  outline: 3px solid var(--job);
  outline-offset: 2px;
}

/* Uploaded art: a soft placeholder circle until the image arrives (the art's
   own circle then covers it exactly). */
.card-art.remote {
  position: relative;
}

.card-art.remote::before {
  position: absolute;
  inset: 5%;
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  background: var(--lilac);
  content: "";
  animation: art-pulse 1.2s ease-in-out infinite alternate;
}

.card-art.remote > img {
  position: relative;
}

@keyframes art-pulse {
  from { opacity: 0.35; }
  to { opacity: 0.8; }
}

/* Laptops: the phone layout sits in a framed column on a deeper ground. */
@media (min-width: 720px) {
  body:not(.tv):not(.admin) {
    background: color-mix(in srgb, var(--ground) 82%, var(--ink));
  }

  body:not(.tv):not(.admin) .shell {
    min-height: calc(100svh - 48px);
    margin: 24px auto;
    padding: 20px 20px 28px;
    border: var(--line-thick) solid var(--ink);
    border-radius: 32px;
    background: var(--ground);
    box-shadow: 10px 10px 0 var(--ink);
  }

  body:not(.tv):not(.admin) .screen > .stack,
  body:not(.tv):not(.admin) .fill {
    min-height: calc(100svh - 48px - 56px);
  }

  /* The carousel bleeds to the frame's edge, not the window's. */
  body:not(.tv):not(.admin) .carousel {
    margin: 0 -20px;
    padding-inline: calc(50% + 20px - min(130px, 36vw));
  }
}