@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-black-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 900;
  font-display: swap;
}

:root {
  /* Dark mode, from the user's revision in PR #20 (design/draft-room, commit 44b1050). */
  --header: #096a86;
  --shell: #073f56;
  --shell-text: #ffffff;
  --shell-muted: #d6eaf0;
  --yellow: #f6c64c;
  --on-yellow: #102b3b;
  --yellow-soft: #3a3422;
  --gold-text: #f8d577;
  --panel: #102f40;
  --deep: #0b2230;
  --soft: #173c4f;
  --fit: #a6dcf0;
  --fit-soft: #18475e;
  --line: #2a4d60;
  --text: #edf5fa;
  --muted: #b0c8d5;
  --danger: #ffb4a6;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Keep Safari from enlarging text on its own, which can push layouts wider than the screen. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  /* viewport-fit=cover lets an installed app fill the screen; keep content clear of a landscape notch. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background: var(--shell);
  color: var(--text);
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Scrolling screens end above the iPhone home bar. The draft room handles it in its slot dock. */
#app:not(.draft-room) { padding-bottom: env(safe-area-inset-bottom); }

button, input, select { font: inherit; color: inherit; }
button { background: transparent; border: 0; cursor: pointer; padding: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.panel :focus-visible, .detail :focus-visible { outline-color: var(--fit); }
.loading { color: var(--shell-text); text-align: center; padding: 80px 16px; }

.chrome { background: var(--header); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; color: var(--shell-text); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { display: block; width: 128px; height: 64px; object-fit: contain; flex-shrink: 0; border-radius: 8px; }
.brand small { color: var(--shell-muted); font-size: 11px; letter-spacing: 1.5px; line-height: 1.5; }
.draft-title { text-align: center; }
/* The draft headline as broadcast plates: the year on a slanted gold tag and DRAFT on a striped dark
   plate, each skewed with its label skewed back upright. The round and pick line runs beneath as a ticker. */
.draft-headline {
  display: inline-flex; align-items: stretch; white-space: nowrap;
  font: italic 900 clamp(28px, 3vw, 38px)/1 "Barlow Condensed", system-ui, sans-serif;
  letter-spacing: .03em; text-transform: uppercase;
  filter: drop-shadow(0 6px 14px #00000059);
}
.draft-year, .draft-word { display: inline-block; transform: skewX(-12deg); padding: 7px 16px 5px; }
.draft-year > span, .draft-word > span { display: inline-block; transform: skewX(12deg); }
.draft-year {
  color: var(--on-yellow);
  background: linear-gradient(100deg, #ffe596 0%, var(--yellow) 45%, #e3a314 100%);
  box-shadow: inset 0 -3px 0 #0000002e, inset 0 2px 0 #ffffff66;
  border-radius: 3px 0 0 3px;
}
.draft-word {
  color: var(--shell-text);
  background: repeating-linear-gradient(-58deg, transparent 0 18px, #ffffff12 18px 24px), linear-gradient(180deg, #13384b, var(--deep));
  box-shadow: inset 0 -3px 0 var(--yellow);
  border-radius: 0 3px 3px 0;
  margin-left: -1px;
}
.draft-title .draft-ticker {
  display: flex; justify-content: center; margin: 9px 0 0;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--shell-muted);
}
.draft-ticker > span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: #0b2230b3; padding: 4px 12px; transform: skewX(-12deg); border-left: 3px solid var(--yellow); }
.draft-ticker > span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 #ff4d4d99; animation: ticker-pulse 1.8s ease-out infinite; }
@keyframes ticker-pulse { 0% { box-shadow: 0 0 0 0 #ff4d4d99; } 80%, 100% { box-shadow: 0 0 0 7px #ff4d4d00; } }
@media (prefers-reduced-motion: reduce) { .draft-ticker > span::before { animation: none; } }

/* The Movieball mark: clapperboard and wordmark. */
.brand-mark { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.brand-clap { display: block; width: 60px; height: 51px; flex-shrink: 0; }
.brand-word {
  font: italic 900 36px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .03em;
  color: var(--shell-text); text-shadow: 0 2px 0 #0b223073; padding-right: .08em;
}
.brand-word > span { color: var(--yellow); }
.draft-title small { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--shell-muted); margin-left: 10px; }
.turn { background: var(--yellow-soft); color: var(--gold-text); padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.turn.waiting { background: #ffffff22; color: var(--shell-text); font-weight: 500; }

.order { padding: 12px 24px 14px; position: relative; z-index: 5; }
.bubble-layer { position: absolute; top: calc(100% - 8px); left: 24px; right: 24px; display: grid; grid-template-columns: repeat(var(--seats, 4), minmax(0, 1fr)); gap: 9px; pointer-events: none; }
.bubble { grid-row: 1; justify-self: start; position: relative; max-width: 300px; background: var(--text); color: var(--on-yellow); border-radius: 12px; padding: 9px 12px 10px; box-shadow: 0 8px 24px #000a; animation-name: bubble-in, bubble-out; animation-timing-function: ease-out, ease-in; animation-fill-mode: both, forwards; }
.bubble::before { content: ""; position: absolute; top: -7px; left: var(--tail-x, 24px); border: 8px solid transparent; border-top: 0; border-bottom-color: var(--text); }
.bubble-who { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.bubble p { margin: 5px 0 0; font-size: 14px; line-height: 1.4; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes bubble-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bubble { animation-name: none; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.order-head { display: flex; justify-content: space-between; align-items: center; color: var(--shell-muted); font-size: 11px; letter-spacing: 1.2px; margin-bottom: 10px; }
.order-head span span { letter-spacing: 0; margin-left: 7px; }
.round-nav { display: flex; align-items: center; gap: 8px; letter-spacing: 0; font-size: 12px; color: var(--shell-text); }
.round-nav button { width: 26px; height: 26px; border: 1px solid #ffffff66; border-radius: 4px; color: var(--shell-text); }
.round-nav button:disabled { opacity: .35; }
.seats { display: grid; grid-template-columns: repeat(var(--seats, 4), minmax(0, 1fr)); gap: 9px; }
.seat { display: flex; gap: 10px; align-items: center; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 10px; text-align: left; width: 100%; position: relative; }
/* The whole seat card opens that player's picks. */
.seat-short { display: none; }
.slot-left { display: none; }
.seat-brief { display: none; }
.seat.speaking { border-color: var(--shell-text); box-shadow: 0 0 0 1px var(--shell-text); }
.seat-open { position: absolute; inset: 0; border-radius: inherit; cursor: pointer; }
.seat:has(.seat-open:hover) { border-color: var(--fit); }
.seat-open:focus-visible { outline: 2px solid var(--fit); outline-offset: 2px; }
.seat.current { background: var(--yellow-soft); border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); }
.seat.current .seat-status { color: var(--gold-text); }
.seat.done { opacity: .82; }
.avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover; background: var(--soft); display: grid; place-items: center; font-weight: 700; color: var(--muted); font-size: 13px; }
.avatar.small { width: 28px; height: 28px; font-size: 10px; }
/* The player's monogram: a team-logo tile in the broadcast type. */
.avatar.monogram { background: radial-gradient(circle at 30% 25%, #1d4d66, #0b2230 70%); box-shadow: inset 0 0 0 2px var(--yellow); color: var(--yellow); overflow: hidden; }
.avatar.monogram > span { font: italic 900 22px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .01em; transform: skewX(-6deg); padding-right: 2px; }
.avatar.monogram[data-length="1"] > span { font-size: 28px; }
.avatar.monogram[data-length="3"] > span { font-size: 18px; }
.avatar.monogram.small > span { font-size: 13px; }
.avatar.monogram.small[data-length="1"] > span { font-size: 16px; }
.avatar.monogram.small[data-length="3"] > span { font-size: 11px; }
.monogram-pick { display: flex; align-items: center; gap: 12px; }
.seed.monogram-input { width: 90px; max-width: 90px; text-transform: uppercase; font: italic 900 20px/1.2 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .06em; }
.seat-name { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-status { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat > span { min-width: 0; }

.room { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; padding: 0 24px 16px; align-items: start; max-width: 1400px; margin: 0 auto; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sidebar { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.board-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px 10px; flex-wrap: wrap; }
h2 { font-size: 15px; font-weight: 650; margin: 0; letter-spacing: -.2px; }
.count { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 7px; }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.tabs button { font-size: 12px; color: var(--muted); padding: 5px 8px; border-radius: 4px; white-space: nowrap; }
.tabs button[aria-pressed="true"] { color: var(--text); background: var(--soft); font-weight: 600; }
.tools { display: flex; gap: 8px; padding: 0 16px 10px; flex-wrap: wrap; }
.search { flex: 1 1 190px; min-width: 0; border: 1px solid var(--line); background: var(--deep); border-radius: 5px; padding: 8px 10px; font-size: 13px; }
.search::placeholder { color: var(--muted); }
.sort { border: 1px solid var(--line); background: var(--panel); border-radius: 5px; padding: 8px; font-size: 12px; max-width: 100%; }
.filter-bar { display: flex; align-items: center; gap: 8px; padding: 0 16px 10px; font-size: 12px; color: var(--muted); min-height: 28px; }
.chip { color: var(--fit); background: var(--fit-soft); padding: 3px 8px; border-radius: 4px; font-size: 12px; }

.scroller { max-height: 520px; overflow-y: auto; border-top: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th { position: sticky; top: 0; z-index: 1; background: var(--soft); color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; padding: 8px 10px; text-align: left; }
td { border-bottom: 1px solid var(--line); padding: 6px 10px; font-size: 13px; vertical-align: middle; }
.col-rank { width: 40px; text-align: center; color: var(--muted); font-size: 11px; }
.col-gross { width: 136px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-act { width: 116px; text-align: right; white-space: nowrap; }
.na { color: var(--muted); }
.movie-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.movie-text { min-width: 0; }
.movie-text small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poster-button { flex: none; border-radius: 4px; line-height: 0; }
.movie-button { width: 100%; text-align: left; font-weight: 550; }
.movie-button:hover { text-decoration: underline; }
.poster { position: relative; display: inline-block; flex: none; overflow: hidden; border-radius: 4px; background: var(--soft); border: 1px solid var(--line); vertical-align: middle; }
.poster-w92 { width: 38px; height: 57px; }
.poster-w342 { width: 132px; height: 198px; border-radius: 6px; }
.poster-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.poster-w342 .poster-fallback { font-size: 24px; }
.poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.movie-button small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr.selected td { background: var(--fit-soft); }
tr.selected .movie-button { color: var(--fit); }
.queue-button { width: 30px; height: 28px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 15px; line-height: 1; vertical-align: middle; }
.queue-button.queued { background: var(--fit-soft); color: var(--gold-text); border-color: transparent; }
.row-draft { background: var(--yellow); color: var(--on-yellow); font-weight: 650; font-size: 12px; border-radius: 4px; padding: 6px 10px; margin-right: 6px; vertical-align: middle; }
.row-draft:disabled { background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 500; }
.toast { color: var(--gold-text); }

dialog.confirm { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 18px; width: min(440px, calc(100vw - 32px)); }
dialog.confirm::backdrop { background: #02121acc; }
dialog.confirm h2 { font-size: 19px; margin-bottom: 4px; }
dialog.confirm .slot-choices { margin: 10px 0 4px; }
dialog.confirm .slot-choices button { padding: 8px 10px; font-size: 13px; }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13px; }

.detail { border-top: 1px solid var(--line); padding: 14px 16px; }
.detail-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.film-name { font-size: 20px; font-weight: 650; letter-spacing: -.6px; margin: 0; }
.film-small { font-size: 12px; color: var(--muted); margin-top: 3px; }
.detail-gross { font-size: 16px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.detail-gross small { display: block; font-size: 11px; color: var(--muted); }
.film-facts { font-size: 12px; color: var(--muted); margin-top: 5px; overflow-wrap: anywhere; }
.slots-label { font-size: 11px; letter-spacing: .8px; color: var(--muted); margin: 11px 0 6px; }
.slot-choices { display: flex; gap: 5px; flex-wrap: wrap; }
.slot-choices button { border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px; font-size: 12px; }
.slot-choices button[aria-pressed="true"] { color: var(--fit); background: var(--fit-soft); border-color: var(--fit); }
.slot-choices button:disabled { opacity: .5; text-decoration: line-through; }
.detail-actions { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.primary { flex: 1 1 200px; background: var(--yellow); color: var(--on-yellow); padding: 10px 13px; border-radius: 5px; font-weight: 650; font-size: 13px; }
.primary:disabled { opacity: .55; }
.secondary { border: 1px solid var(--line); border-radius: 5px; padding: 9px 11px; font-size: 12px; color: var(--muted); background: var(--panel); }
.note { font-size: 12px; color: var(--muted); margin-top: 7px; }
.note.warn { color: var(--danger); }

.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 13px 14px 8px; }
.slate-count { font-size: 12px; color: var(--gold-text); font-weight: 600; }
.slots { padding: 0 8px 6px; }
.slot { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; padding: 12px 10px; border-radius: 6px; text-align: left; min-height: 56px; border: 1px solid transparent; }
.slot + .slot { margin-top: 4px; }
.slot:not(:disabled):hover { border-color: var(--line); }
.slot-label { display: block; font-size: 15px; font-weight: 600; }
.slot-caption { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.slot-end { font-size: 12px; color: var(--muted); white-space: nowrap; display: flex; gap: 7px; }
.slot[aria-pressed="true"] { background: var(--fit-soft); color: var(--fit); }
.slot:disabled { background: #081a25; }
.slot:disabled .slot-label, .slot:disabled .slot-caption, .slot:disabled .slot-end { color: #5d7686; }
.slot.fits .fit-mark { color: var(--fit); font-weight: 600; }
.slots-note { font-size: 12px; color: var(--muted); padding: 4px 15px 14px; margin: 0; }

.room-foot { display: flex; justify-content: space-between; gap: 10px; color: var(--shell-muted); font-size: 11px; padding: 0 24px 16px; flex-wrap: wrap; }

.rosters { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; padding: 10px 16px 16px; }
.roster h3 { font-size: 13px; margin: 0 0 6px; }
.roster ul { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.roster li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.roster li span:first-child { color: var(--muted); flex: none; }
.roster li span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.log { list-style: none; margin: 0; padding: 4px 16px 14px; font-size: 12px; }
.log li { padding: 5px 0; border-bottom: 1px solid var(--line); }

.setup, .results { max-width: 980px; margin: 0 auto; padding: 22px 24px 40px; }
.setup .panel, .results .panel { padding: 18px; margin-bottom: 14px; }
.setup h1, .results h1 { color: var(--shell-text); font-size: 32px; letter-spacing: -1px; margin: 8px 0 4px; }
.lede { color: var(--shell-muted); margin: 0 0 18px; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
legend { font-weight: 650; margin-bottom: 7px; padding: 0; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.choice { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--fit); background: var(--fit-soft); }
.choice small { display: block; color: var(--muted); font-size: 12px; }
.opponents { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.opponent { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 6px; padding: 9px; cursor: pointer; }
.opponent:has(input:checked) { border-color: var(--fit); background: var(--fit-soft); }
.opponent strong { display: block; font-size: 13px; }
.opponent small { color: var(--muted); font-size: 12px; }
.year-select { width: 100%; max-width: 280px; border: 1px solid var(--line); background: var(--deep); border-radius: 5px; padding: 8px 10px; }
.year-select option:disabled { color: var(--muted); }
.seed { width: 100%; max-width: 280px; border: 1px solid var(--line); background: var(--deep); border-radius: 5px; padding: 8px 10px; }
/* The Start draft button, in the broadcast style of the headings: Barlow Condensed Black Italic
   capitals on a slanted gold plate, with speed stripes and a slow light sweep. The plate is skewed
   and the label skewed back, so the text stays upright-italic and focus outlines follow the shape. */
.start {
  position: relative; isolation: isolate; overflow: hidden;
  display: block; width: calc(100% - 16px); margin: 0 8px;
  padding: 15px 24px 13px;
  border-radius: 3px;
  transform: skewX(-12deg);
  color: var(--on-yellow);
  background: linear-gradient(100deg, #ffe596 0%, var(--yellow) 42%, #e3a314 100%);
  box-shadow: inset 0 -4px 0 #0000002e, inset 0 2px 0 #ffffff66, 0 8px 24px #f6c64c33;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.start-label {
  display: inline-block; transform: skewX(12deg);
  font: italic 900 clamp(28px, 3.6vw, 38px)/1 "Barlow Condensed", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .07em;
  text-shadow: 0 1px 0 #ffffff59;
}
.start::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: repeating-linear-gradient(-58deg, transparent 0 26px, #ffffff1c 26px 34px);
}
.start::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: -35%; width: 22%; z-index: -1;
  background: linear-gradient(90deg, transparent, #ffffffa6, transparent);
  animation: start-sweep 3.6s ease-in-out infinite;
}
@keyframes start-sweep { 0%, 58% { left: -35%; } 100% { left: 125%; } }
.start:hover:not(:disabled) { transform: skewX(-12deg) translateY(-2px); filter: brightness(1.05); box-shadow: inset 0 -4px 0 #0000002e, inset 0 2px 0 #ffffff66, 0 12px 30px #f6c64c55; }
.start:active:not(:disabled) { transform: skewX(-12deg) translateY(1px); box-shadow: inset 0 -2px 0 #0000002e, 0 4px 12px #f6c64c33; }
.start:disabled { filter: saturate(.4); }
.start:disabled::after { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) {
  .start::after { animation: none; display: none; }
  .start, .start:hover:not(:disabled), .start:active:not(:disabled) { transition: none; transform: skewX(-12deg); }
}

.banner { background: var(--yellow-soft); color: var(--gold-text); border-radius: 6px; padding: 9px 12px; font-size: 13px; margin-bottom: 14px; }
.standing { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.standing:last-child { border-bottom: 0; }
.place { font-size: 20px; font-weight: 700; width: 24px; text-align: center; color: var(--muted); }
.standing.first .place { color: var(--gold-text); }
.standing .who { flex: 1; min-width: 0; }
.standing strong { display: block; }
.standing small { color: var(--muted); font-size: 12px; }
.points { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.results h2 { margin-bottom: 8px; }
.results ul.plain { margin: 0; padding-left: 18px; font-size: 13px; }
.results li { margin-bottom: 3px; }
.breakdown { overflow-x: auto; }
.breakdown table { min-width: 720px; }
.breakdown td, .breakdown th { padding: 6px 7px; font-size: 12px; }
.breakdown th { position: static; letter-spacing: 0; text-transform: none; font-size: 11px; }
.breakdown .num { text-align: right; font-variant-numeric: tabular-nums; width: 72px; }
.imputed { color: var(--muted); font-style: italic; }
.film-tags { display: block; color: var(--fit); font-size: 11px; }
.film-notes { display: block; color: var(--muted); font-size: 11px; }
details { margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 4px 0; }
.collection { font-size: 12px; color: var(--muted); margin: 6px 0 0; }

@media (max-width: 980px) {
  .chrome, .order, .room, .room-foot { padding-left: 16px; padding-right: 16px; }
  .room { grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; }
  .seat { padding: 8px; gap: 7px; }
  .avatar { width: 36px; height: 36px; }
  .draft-title small { display: block; margin-left: 0; }
  .draft-title .draft-ticker { display: flex; }
  .chrome { flex-wrap: wrap; row-gap: 10px; }
  .brand-clap { width: 46px; height: 39px; }
  .brand-word { font-size: 28px; }
}

@media (max-width: 720px) {
  .room { grid-template-columns: minmax(0, 1fr); }
  .seats { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px; }
  .seat { flex: 0 0 62%; scroll-snap-align: start; }
  .bubble-layer { left: 16px; right: 16px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  .bubble { max-width: none; }
  .chrome { flex-wrap: wrap; }
  .draft-title { text-align: left; }
  .draft-title .draft-ticker { justify-content: flex-start; }
  .scroller { max-height: 340px; }
  .setup, .results { padding: 14px 16px 32px; }
}

@media (max-width: 420px) {
  .wide-only { display: none; }
  .col-gross { width: 80px; }
  .col-act { width: 96px; }
  .row-draft { padding: 6px 7px; margin-right: 3px; }
  .col-rank { width: 30px; }
  td, th { padding-left: 6px; padding-right: 6px; }
  .brand small { display: none; }
  .brand-logo { width: 96px; height: 48px; }
  .brand-clap { width: 44px; height: 38px; }
  .brand-word { font-size: 27px; }
}

/* Movie information card */
dialog.info-card { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 0; width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
dialog.info-card::backdrop { background: #02121acc; }
.card-body { padding: 18px 18px 6px; }
.card-top { display: flex; gap: 16px; align-items: flex-start; }
.card-head { min-width: 0; }
.card-head h2 { font-size: 22px; letter-spacing: -.5px; margin: 0 0 4px; }
.draft-genres { margin: 8px 0 6px; font-size: 13px; font-weight: 600; color: var(--fit); }
.badges { display: flex; flex-wrap: wrap; gap: 5px; }
.badge { border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: 11px; color: var(--muted); }
.badge.open { border-color: var(--fit); color: var(--fit); background: var(--fit-soft); }
.overview { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 14px 0 6px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 12px 0; }
.fact dt { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.fact dd { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.fact dd small { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
.card-sub { font-size: 13px; letter-spacing: .3px; margin: 14px 0 6px; }
.evidence { margin: 0; padding-left: 18px; font-size: 12px; color: var(--muted); }
.evidence li { margin-bottom: 3px; }
.evidence strong { color: var(--text); font-weight: 600; }
.availability { margin: 12px 0 4px; font-size: 13px; color: var(--gold-text); }
.tmdb-note { font-size: 11px; color: var(--muted); margin: 8px 0 0; }
.card-actions { position: sticky; bottom: 0; display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px; background: var(--panel); border-top: 1px solid var(--line); }
.card-note { padding: 0 18px 12px; margin: 0; }

/* Results reveal */
.reveal-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.reveal-card { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
.reveal-card.fresh { animation: reveal-land .6s cubic-bezier(.2, .9, .3, 1.25) both; }
.reveal-card .place, .champion .place { font-size: 15px; font-weight: 700; color: var(--muted); width: 36px; }
.reveal-card .who { flex: 1; min-width: 0; font-size: 16px; }
.champion { background: var(--yellow-soft); border: 2px solid var(--yellow); border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
.champion.fresh { animation: champion-in 1.1s cubic-bezier(.2, .9, .25, 1.15) both; }
.champion-top { display: flex; align-items: center; gap: 16px; }
.champion-top > div { flex: 1; min-width: 0; }
.champion .avatar { width: 72px; height: 72px; }
.champion-label { font-size: 12px; letter-spacing: 1.5px; color: var(--gold-text); font-weight: 700; }
.champion h2 { font-size: 30px; letter-spacing: -1px; margin: 2px 0 4px; }
.champion h2:focus, .results h1:focus { outline: none; }
.champion-line { margin: 0; color: var(--text); font-size: 14px; }
.champion .points { font-size: 30px; color: var(--gold-text); }
.reveal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.reveal-actions .primary { flex: 1 1 220px; }
.slate-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.slate-grid li { display: flex; align-items: center; gap: 9px; font-size: 13px; min-width: 0; }
.slate-grid li span { min-width: 0; overflow-wrap: anywhere; }
.slate-grid small { display: block; color: var(--muted); font-size: 11px; }
.all-slates .panel { padding: 14px 16px; }
details.dev > summary { font-size: 14px; }
details.dev h2 { margin-top: 14px; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* The automatic reveal: a sealed card builds for each place, then the place lands. */
.reveal-card .points { font-variant-numeric: tabular-nums; }
.reveal-card.sealed { border-style: dashed; border-color: var(--yellow); background: var(--deep); animation: reveal-in .35s ease-out both, sealed-pulse 1.4s ease-in-out .35s infinite; }
.reveal-card.sealed .who strong { color: var(--gold-text); letter-spacing: .3px; }
.reveal-card.sealed.for-winner { padding: 22px 20px; border-width: 2px; }
.reveal-card.sealed.for-winner .who strong { font-size: 22px; letter-spacing: -.3px; }
.build-bar { flex: 0 0 120px; height: 6px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.build-bar span { display: block; height: 100%; width: 100%; background: var(--yellow); transform-origin: left; animation: build var(--build) linear both; }
.reveal-list > .reveal-card:not(.sealed) { transition: opacity .6s ease; }
.reveal-list.drumroll > .reveal-card:not(.sealed) { opacity: .4; }
.champion.fresh .slate-grid li { animation: reveal-in .45s ease-out both; animation-delay: calc(1.1s + var(--i, 0) * 90ms); }
.champion.fresh .champion-top .avatar { animation: champion-glow 1.6s ease-out 1s both; }
.results.paused .reveal-card.sealed, .results.paused .build-bar span { animation-play-state: paused; }
@keyframes reveal-land { 0% { opacity: 0; transform: translateY(-14px) scale(1.06); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes champion-in { 0% { opacity: 0; transform: scale(.82); box-shadow: 0 0 0 0 #f6c64c00; } 55% { opacity: 1; transform: scale(1.03); box-shadow: 0 0 0 10px #f6c64c55; } 100% { opacity: 1; transform: none; box-shadow: 0 0 40px 0 #f6c64c22; } }
@keyframes champion-glow { 0% { box-shadow: 0 0 0 0 #f6c64ccc; } 100% { box-shadow: 0 0 0 18px #f6c64c00; } }
@keyframes sealed-pulse { 50% { box-shadow: 0 0 0 3px #f6c64c44; } }
@keyframes build { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Calmer with reduced motion: the same automatic order and timing, without movement. */
@media (prefers-reduced-motion: reduce) {
  .reveal-card.fresh, .champion.fresh, .reveal-card.sealed, .champion.fresh .slate-grid li, .champion.fresh .champion-top .avatar { animation: none; }
  .build-bar { display: none; }
  .reveal-list > .reveal-card:not(.sealed) { transition: none; }
}

@media (max-width: 560px) {
  .card-top { flex-direction: column; }
  .poster-w342 { width: 110px; height: 165px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .champion-top { flex-wrap: wrap; }
  .champion h2, .champion .points { font-size: 24px; }
  .build-bar { flex-basis: 56px; }
  .reveal-card.sealed.for-winner .who strong { font-size: 18px; }
}


/* Pick clock */
.turn-wrap { display: flex; align-items: center; gap: 8px; }
.pick-clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; padding: 6px 10px; border-radius: 6px; background: #ffffff22; color: var(--shell-text); min-width: 58px; text-align: center; }
.pick-clock.urgent { background: #b3261e; color: #fff; animation: clock-pulse 1s ease-in-out infinite; }
@keyframes clock-pulse { 50% { box-shadow: 0 0 0 4px #ff8a7a66; transform: scale(1.06); } }

/* Pick effects */
.pick-flight { position: fixed; z-index: 50; pointer-events: none; transform-origin: top left; box-shadow: 0 10px 30px #000c; border-radius: 4px; }
.starburst { position: fixed; z-index: 51; width: 120px; height: 120px; margin: -60px 0 0 -60px; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #f6c64ccc 0deg 8deg, transparent 8deg 30deg); -webkit-mask: radial-gradient(circle, transparent 18%, #000 20%, #000 60%, transparent 62%); mask: radial-gradient(circle, transparent 18%, #000 20%, #000 60%, transparent 62%);
  animation: burst 1s ease-out forwards; }
.starburst--winner { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
@keyframes burst { from { transform: scale(.3) rotate(0deg); opacity: 1; } to { transform: scale(1.4) rotate(40deg); opacity: 0; } }

/* Reveal controls */
.reveal-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin-top: 6px; }
.reveal-controls .secondary { flex: 0 0 auto; }
.tie { display: block; color: var(--muted); font-size: 11px; font-weight: 400; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pick-clock.urgent { animation: none; outline: 2px solid #ff8a7a; }
  .starburst { animation: none; opacity: .85; }
}

/* Dialogue toggle and the latest pick */
.dialogue-toggle { border: 1px solid #ffffff66; border-radius: 6px; padding: 6px 10px; font-size: 12px; color: var(--shell-text); white-space: nowrap; }
.dialogue-toggle[aria-pressed="true"] { background: #ffffff1f; }
.last-pick { margin: 9px 0 0; min-height: 18px; font-size: 12px; color: var(--shell-muted); }
.last-pick strong { color: var(--shell-text); font-weight: 600; }
.transcript li { line-height: 1.45; }
@media (max-width: 720px) {
  .turn-wrap { flex-wrap: wrap; }
}

/* The latest pick: its seat lights up with the drafted poster. Static, because the room re-renders often. */
.seat.just-picked { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); }

.opponents[hidden] { display: none; }


/* A player's picks beside yours, as a broadcast stat card: a striped header band with the name in
   the headline type and a gold fill meter, category plates down the left, and pick numbers as tags.
   Skewed pieces skew their label back upright, like the draft headline. */
dialog.slate-compare { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-top: 4px solid var(--yellow); border-radius: 8px; padding: 0 18px 18px; width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); box-shadow: 0 20px 60px #00000080; }
dialog.slate-compare::backdrop { background: #02121acc; }
.cmp-head {
  display: flex; gap: 14px; align-items: center; margin: 0 -18px 4px; padding: 16px 18px 14px;
  background: repeating-linear-gradient(-58deg, transparent 0 18px, #ffffff0d 18px 24px), linear-gradient(180deg, #13384b, var(--deep));
  box-shadow: inset 0 -3px 0 var(--yellow);
}
.cmp-head .avatar { width: 62px; height: 62px; box-shadow: 0 0 0 3px var(--yellow), 0 6px 16px #00000066; }
.cmp-id { flex: 1; min-width: 0; }
.cmp-kicker, .cmp-pick, .cmp-open, .cmp-close { display: inline-block; transform: skewX(-12deg); }
table.cmp tbody th { overflow-wrap: normal; }
.cmp-kicker > span, .cmp-pick > span, .cmp-open > span, .cmp-close > span { display: inline-block; transform: skewX(12deg); }
.cmp-kicker {
  color: var(--on-yellow); background: linear-gradient(100deg, #ffe596, var(--yellow) 45%, #e3a314);
  font: italic 900 13px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px 3px; border-radius: 2px;
}
.cmp-head h2 {
  font: italic 900 clamp(30px, 6vw, 40px)/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .02em; text-transform: uppercase;
  color: var(--shell-text); margin: 6px 0 8px; padding-right: .1em; text-shadow: 0 2px 0 #0b223073; overflow-wrap: anywhere;
}
.cmp-count { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; }
.cmp-tally { display: inline-flex; align-items: center; gap: 8px; font: italic 900 14px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); }
.cmp-tally + .cmp-tally { color: var(--muted); }
.cmp-meter { display: inline-flex; gap: 3px; }
.cmp-meter > span { width: 10px; height: 10px; transform: skewX(-12deg); background: #ffffff1f; border-radius: 1px; }
.cmp-meter > span.on { background: var(--yellow); }
.cmp-tally + .cmp-tally .cmp-meter > span.on { background: var(--muted); }
table.cmp { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 14px; table-layout: fixed; }
table.cmp th, table.cmp td { position: static; text-align: left; vertical-align: middle; padding: 9px 10px; overflow-wrap: break-word; }
table.cmp thead th { font: italic 900 12px/1 "Barlow Condensed", system-ui, sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; padding: 10px 10px 0; background: none; }
table.cmp thead th:first-child { width: 36%; }
table.cmp tbody th, table.cmp tbody td { background: var(--deep); }
table.cmp tbody th { border-left: 3px solid var(--yellow); border-radius: 3px 0 0 3px; color: var(--text); text-transform: none; letter-spacing: normal; }
table.cmp tbody td:last-child { border-radius: 0 3px 3px 0; }
.cmp-cat { display: block; font: italic 900 18px/1.05 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: var(--shell-text); }
table.cmp tbody th small { display: block; margin-top: 4px; font: italic 900 12px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); }
.cmp-film { display: block; font-weight: 600; line-height: 1.3; }
.cmp-pick { display: flex; width: fit-content; margin-top: 5px; padding: 3px 8px 2px; background: var(--soft); border-left: 2px solid var(--yellow); font: italic 900 12px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.cmp-open { padding: 4px 10px 3px; border: 1px dashed #4d7a91; font: italic 900 14px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
table.cmp tr.both-open th, table.cmp tr.both-open td { background: var(--fit-soft); }
table.cmp tr.both-open th { border-left-color: var(--fit); }
table.cmp tr.both-open .cmp-open { color: var(--fit); border-color: var(--fit); }
.cmp-note { margin: 6px 0 0; }
.slate-compare .detail-actions { margin-top: 14px; }
.cmp-close {
  padding: 10px 22px 9px; border: 1px solid #2f6580; border-radius: 3px; background: linear-gradient(180deg, #21536b, #163d52); color: var(--shell-text);
  box-shadow: inset 0 -2px 0 #00000040; font: italic 900 16px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.cmp-close:hover { border-color: var(--yellow); }
@media (max-width: 560px) {
  dialog.slate-compare { padding: 0 12px 14px; }
  .cmp-head { margin: 0 -12px 2px; padding: 14px 12px 12px; gap: 12px; }
  .cmp-head .avatar { width: 52px; height: 52px; }
  table.cmp { font-size: 13px; }
  table.cmp th, table.cmp td { padding: 8px 7px; }
  .cmp-cat { font-size: 15px; }
  table.cmp tbody th small { font-size: 11px; }
}

/* Broadcast type on the setup and results screens: the same Barlow Condensed Black Italic as the draft
   heading, set in capitals, for the title, places, names, scores and the champion banner. */
.setup h1, .results h1, .reveal-card .place, .reveal-card .who strong, .reveal-card .points,
.champion-label, .champion h2, .champion .points {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
}
.setup h1, .results h1 { display: flex; align-items: center; gap: 12px; font-size: clamp(36px, 5vw, 52px); letter-spacing: .015em; margin: 12px 0 14px; }
.setup h1 { margin-bottom: 8px; }
.setup h1::before, .results h1::before { content: ""; flex: 0 0 auto; width: 10px; height: .82em; background: var(--yellow); transform: skewX(-14deg); }
.reveal-card .place { width: 52px; font-size: 24px; color: var(--muted); }
.reveal-card .who strong { display: block; font-size: 28px; padding-right: .1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reveal-card .who small { display: block; margin-top: 4px; }
.reveal-card .points { font-size: 40px; color: var(--shell-text); font-variant-numeric: tabular-nums; padding-right: .08em; }
.reveal-card.sealed .who strong { color: var(--gold-text); font-size: 26px; letter-spacing: .03em; }
.reveal-card.sealed.for-winner .who strong { font-size: 34px; letter-spacing: .03em; }
.champion-label { display: inline-block; font-size: 20px; letter-spacing: .08em; color: var(--ink, #1d1a10); background: var(--yellow); padding: 4px 12px 3px 10px; transform: skewX(-10deg); white-space: nowrap; }
.champion-label > span { display: inline-block; transform: skewX(10deg); }
.champion h2 { font-size: clamp(40px, 6vw, 60px); color: var(--shell-text); margin: 8px 0 8px; padding-right: .1em; }
.champion .points { font-size: clamp(48px, 7vw, 72px); color: var(--gold-text); font-variant-numeric: tabular-nums; padding-right: .08em; }

@media (max-width: 560px) {
  .reveal-card .place { width: 40px; font-size: 19px; }
  .reveal-card .who strong { font-size: 21px; white-space: normal; overflow-wrap: anywhere; }
  .reveal-card .points { font-size: 27px; }
  .reveal-card.sealed.for-winner .who strong { font-size: 24px; }
  .champion-top > div { flex: 1 1 calc(100% - 88px); }
  .champion-top > .points { flex: 1 1 100%; }
  .champion h2 { font-size: 36px; }
  .champion .points { font-size: 48px; }
}

/* Long and short forms of header text: the short one is for phones. */
.chrome .short { display: none; }

/* Phones: the header is one row. The mark shrinks to the clapperboard, the headline plates sit in the
   middle with the ticker under them, and the turn status stacks over the dialogue toggle on the right. */
@media (max-width: 560px) {
  .chrome {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    gap: 8px; padding: 8px 12px;
  }
  .chrome .long { display: none; }
  .chrome .short { display: inline; }
  /* The full status stays readable by screen readers; the short form is for sight only. */
  .turn .long { display: inline; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .turn { position: relative; }
  /* The draft and results headers' one row has room for the mark only as a stack: the clapperboard
     over a small MOVIEBALL wordmark. Setup, with no headline beside it, keeps the side-by-side logo. */
  .draft-room .brand-mark, .results-chrome .brand-mark { flex-direction: column; align-items: center; gap: 1px; }
  .draft-room .brand-clap, .results-chrome .brand-clap { width: 34px; height: 29px; }
  .draft-room .brand-word, .results-chrome .brand-word { font-size: 14px; letter-spacing: .04em; text-shadow: none; padding-right: .06em; }
  .draft-title, .draft-title .draft-ticker { text-align: center; justify-content: center; }
  .draft-headline { font-size: 21px; filter: drop-shadow(0 3px 8px #00000059); }
  .draft-year, .draft-word { padding: 5px 9px 3px; }
  .draft-title .draft-ticker { margin-top: 5px; font-size: 9.5px; letter-spacing: .1em; }
  .draft-ticker > span { padding: 2px 8px; gap: 6px; }
  .draft-ticker > span::before { width: 6px; height: 6px; }
  .turn-wrap { flex-direction: column; align-items: stretch; gap: 4px; flex-wrap: nowrap; }
  .turn { padding: 5px 8px; font-size: 10.5px; text-align: center; }
  .dialogue-toggle { padding: 3px 7px; font-size: 10.5px; }
  .pick-clock { padding: 3px 6px; font-size: 12px; min-width: 0; }
}

/* The About popover lives in the slate head and only shows on phones, where the footer is hidden. */
.phone-about { display: none; }

/* Phones: the whole draft room fits one screen. The page itself doesn't scroll. The header, seat
   strip, board tools, action bar and slot dock keep their height, and the movie list fills
   whatever is left, scrolling inside its own box. */
@media (max-width: 560px) {
  body:has(#app.draft-room) { overflow: hidden; overscroll-behavior: none; }
  #app.draft-room { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  #app.draft-room > * { flex: none; }

  /* Seat strip: every seat in one row as a squarish card, portrait on top, short name and status
     beneath. The latest pick's poster tucks into the corner. */
  .draft-room .order { padding: 6px 10px 4px; }
  .draft-room .order-head { display: none; }
  .draft-room .seats { display: grid; grid-template-columns: repeat(var(--seats, 4), minmax(0, 1fr)); gap: 5px; overflow: visible; padding: 0; }
  .draft-room .seat { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; width: auto; padding: 5px 2px 4px; gap: 3px; border-radius: 7px; min-width: 0; }
  .draft-room .seat .avatar { width: 34px; height: 34px; border-radius: 8px; font-size: 10px; }
  .draft-room .seat > span { width: 100%; }
  .draft-room .seat-name { display: none; }
  .draft-room .seat-short { display: block; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .draft-room .seat-status { font-size: 9.5px; line-height: 1.25; }
  .draft-room .seat-sep { display: none; }
  .draft-room .seat-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .draft-room .seat-brief { display: inline; }
  .draft-room .seat-state { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .draft-room .last-pick { margin: 4px 0 0; min-height: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* The board fills the space between the seat strip and the slot dock. */
  #app.draft-room > .room { flex: 1 1 0; min-height: 0; }
  .draft-room .room { min-height: 0; display: flex; flex-direction: column; gap: 0; padding: 0; width: 100%; min-width: 0; }
  .draft-room .room > .panel { min-width: 0; max-width: 100%; }
  .draft-room .room > .panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; border-radius: 0; border-left: 0; border-right: 0; }
  .draft-room .board-head { padding: 6px 10px 4px; flex-wrap: nowrap; }
  .draft-room .board-head h2 { display: none; }
  .draft-room .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0; width: 100%; }
  .draft-room .tabs::-webkit-scrollbar { display: none; }
  .draft-room .tabs button { font-size: 12px; padding: 5px 8px; }
  .draft-room .tools { flex-wrap: nowrap; padding: 0 10px 4px; gap: 6px; }
  .draft-room .search { flex: 1 1 auto; padding: 6px 8px; font-size: 16px; }
  .draft-room .sort { flex: 0 0 104px; padding: 6px 4px; font-size: 12px; }
  .draft-room .filter-bar { padding: 0 10px 4px; min-height: 0; font-size: 11px; white-space: nowrap; overflow: hidden; }
  .draft-room .filter-bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .draft-room .filter-bar > span:first-child { flex: 0 1 auto; }
  .draft-room .filter-bar > .toast { flex: 1 1 0; }
  .draft-room .scroller, .draft-room .room > .panel > .rosters, .draft-room .room > .panel > .log, .draft-room .room > .panel > .empty { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
  .draft-room thead { display: none; }
  /* The list scrolls up and down only. Every column fits the screen: tight cell padding, and the
     action column sized to its Draft and queue buttons. */
  .draft-room .scroller { overflow-x: hidden; touch-action: pan-y; }
  .draft-room table { width: 100%; max-width: 100%; }
  .draft-room td { padding: 5px 4px; overflow: hidden; }
  .draft-room td:first-child { padding-left: 6px; }
  .draft-room td:last-child { padding-right: 6px; }
  .draft-room .col-rank { width: 26px; }
  .draft-room .col-gross { width: 62px; font-size: 12px; }
  .draft-room .col-act { width: 96px; }
  .draft-room .poster-w92 { width: 28px; height: 42px; }
  .draft-room .movie-cell { gap: 7px; }
  .draft-room .movie-button { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.2; text-align: left; }
  .draft-room .movie-text small { font-size: 10.5px; }
  .draft-room .row-draft { padding: 6px 8px; margin-right: 4px; }
  .draft-room .queue-button { width: 28px; }

  /* The selected movie shrinks to an action bar: its name, the draft button and auto-pick. Title taps
     open the full movie card, and each row's Draft button opens the slot choice. */
  /* No selected-movie ribbon on phones: each row's Draft button is enough. Only a refused pick's
     warning shows here, and the strip takes no room otherwise. */
  .draft-room .detail { flex: none; padding: 0; }
  .draft-room .detail > :not([role="alert"]) { display: none; }
  .draft-room .detail [role="alert"] { margin: 0; padding: 6px 10px; }

  /* Slot dock: the eight slots as a 4 × 2 grid pinned to the bottom. Tapping one filters the list. */
  .draft-room .sidebar { flex: none; gap: 0; }
  .draft-room .sidebar > .panel { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; overflow: visible; padding-bottom: env(safe-area-inset-bottom); }
  .draft-room .panel-head { padding: 5px 10px 3px; gap: 8px; justify-content: flex-start; }
  .draft-room .panel-head h2 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
  .draft-room .slate-count { font-size: 11px; }
  /* Equal rows: a two-line label (Horror / Fantasy) would otherwise make only its own row taller. */
  .draft-room .slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 4px; padding: 0 8px 6px; }
  /* Each slot is its own broadcast plate in the game's colors: a dark plate with a gold top bar and a
     Barlow Condensed label. The filtered slot turns solid gold; filled slots dim, with a check. */
  .draft-room .slot {
    position: relative; min-height: 40px; padding: 6px 4px 4px; margin: 0; justify-content: center; text-align: center;
    background: linear-gradient(180deg, #21536b, #163d52); color: var(--shell-text);
    border: 1px solid #2f6580; border-top: 3px solid var(--yellow); border-radius: 4px;
    box-shadow: inset 0 -2px 0 #00000040;
  }
  .draft-room .slot + .slot { margin-top: 0; }
  .draft-room .slot-label {
    font: italic 900 12.5px/1.05 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .draft-room .slot-caption, .draft-room .slot-end, .draft-room .slots-note { display: none; }
  .draft-room .slot-left { display: block; margin-top: 2px; font: italic 900 11px/1 "Barlow Condensed", system-ui, sans-serif; letter-spacing: .04em; color: var(--gold-text); }
  .draft-room .slot[aria-pressed="true"] .slot-left { color: var(--on-yellow); }
  .draft-room .slot[aria-pressed="true"] { background: linear-gradient(100deg, #ffe596, var(--yellow) 45%, #e3a314); color: var(--on-yellow); border-color: var(--yellow); }
  .draft-room .slot.fits:not([aria-pressed="true"]) { border-color: var(--fit); border-top-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--fit); }
  /* A filled slot is done: flat dark blue, faded text, no gold bar. */
  .draft-room .slot:disabled { background: #081a25; border-color: #12303f; border-top-color: #12303f; box-shadow: none; }
  .draft-room .slot:disabled .slot-label { color: #5d7686; }
  .draft-room .slot:disabled .slot-label::before { content: "✓ "; color: #5d7686; }

  /* The footer's notes move into the About popover in the slate head. */
  .draft-room .room-foot { display: none; }
  .phone-about { display: block; position: relative; margin-left: auto; }
  .phone-about summary { list-style: none; cursor: pointer; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-style: italic; font-weight: 700; color: var(--muted); }
  .phone-about summary::-webkit-details-marker { display: none; }
  .phone-about-body { position: absolute; right: 0; bottom: calc(100% + 6px); width: min(300px, calc(100vw - 24px)); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; box-shadow: 0 10px 30px #0008; z-index: 20; font-size: 11px; color: var(--muted); }
  .phone-about-body p { margin: 4px 0; }

  /* Dialogue bubbles float over the board rather than pushing it down. */
  .draft-room .bubble-layer { left: 12px; right: 12px; z-index: 30; }
}

/* Short phones (an iPhone SE and smaller): smaller seat portraits and no last-pick line, so the movie
   list keeps room for a few more rows. The draft log still has every pick. */
@media (max-width: 560px) and (max-height: 720px) {
  .draft-room .seat .avatar { width: 26px; height: 26px; }
  .draft-room .seat { gap: 2px; padding-top: 4px; }
  .draft-room .last-pick { display: none; }
}

/* Scores read as audience votes: the count in the headline type, a smaller VOTES label after it. */
.points { white-space: nowrap; }
.points .vote-unit { font-size: .4em; letter-spacing: .12em; color: var(--muted); margin-left: .12em; }
.champion .points .vote-unit { color: var(--gold-text); opacity: .8; }

/* Picks card fit levels, added in order by fitPicksCard() until the card fits the screen without scrolling.
   fit-1 tightens spacing; fit-2 caps film titles at two lines, narrows the category column and shortens
   "left on the board"; fit-3 drops the kicker and the highlight note; fit-4 holds titles to one line;
   fit-5 puts the pick tag beside the title. */
.slate-compare.fit-1 .cmp-head { padding-top: 10px; padding-bottom: 9px; gap: 10px; }
.slate-compare.fit-1 .cmp-head .avatar { width: 44px; height: 44px; box-shadow: 0 0 0 2px var(--yellow); }
.slate-compare.fit-1 .cmp-kicker { font-size: 11px; padding: 3px 8px 2px; }
.slate-compare.fit-1 .cmp-head h2 { font-size: 26px; margin: 4px 0 5px; }
.slate-compare.fit-1 .cmp-count { gap: 4px 12px; }
.slate-compare.fit-1 .cmp-tally { font-size: 12px; gap: 6px; }
.slate-compare.fit-1 .cmp-meter > span { width: 8px; height: 8px; }
.slate-compare.fit-1 table.cmp { border-spacing: 0 3px; font-size: 13px; }
.slate-compare.fit-1 table.cmp th, .slate-compare.fit-1 table.cmp td { padding: 5px 7px; }
.slate-compare.fit-1 table.cmp thead th { padding: 6px 7px 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slate-compare.fit-1 .cmp-cat { font-size: 15px; }
.slate-compare.fit-1 table.cmp tbody th small { font-size: 10.5px; margin-top: 2px; }
.slate-compare.fit-1 .cmp-film { line-height: 1.2; }
.slate-compare.fit-1 .cmp-pick { margin-top: 3px; font-size: 10.5px; padding: 2px 6px 1px; }
.slate-compare.fit-1 .cmp-open { font-size: 12px; padding: 3px 8px 2px; }
.slate-compare.fit-1 .cmp-note { margin-top: 2px; font-size: 11px; }
.slate-compare.fit-1 .detail-actions { margin-top: 8px; }
.slate-compare.fit-1 .cmp-close { padding: 8px 18px 7px; font-size: 14px; }
.slate-compare.fit-2 .cmp-board { display: none; }
.slate-compare.fit-2 table.cmp thead th:first-child { width: 30%; }
.slate-compare.fit-2 .cmp-cat { font-size: 13.5px; }
.slate-compare.fit-2 .cmp-film-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slate-compare.fit-3 .cmp-note, .slate-compare.fit-3 .cmp-kicker { display: none; }
.slate-compare.fit-3 .cmp-head h2 { margin-top: 0; }
.slate-compare.fit-4 .cmp-film-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slate-compare.fit-4 .cmp-head h2 { font-size: 22px; }
.slate-compare.fit-5 .cmp-film { display: flex; align-items: center; gap: 6px; min-width: 0; }
.slate-compare.fit-5 .cmp-film-title { flex: 1 1 auto; min-width: 0; }
.slate-compare.fit-5 .cmp-pick { flex: none; margin-top: 0; }
.cmp-film-title { hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 560px) {
  /* Phones: VOTES sits under the count so player names keep their width. */
  .reveal-card .points { display: flex; flex-direction: column; align-items: flex-end; }
  .reveal-card .points .vote-unit { font-size: 11px; margin: 3px 0 0; }
}