:root {
  --bg: #f7f6f2;
  --panel: #ffffff;
  --ink: #1d1d1b;
  --muted: #6b6a66;
  --line: #d9d7d0;
  --accent: #2f5d8a;
  --accent-ink: #ffffff;
  --disagree: #b5473b;
  --neutral: #8a8a86;
  --agree: #2d7a4f;
  --warn: #a8641b;
  --radius: 10px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151614; --panel: #1f201d; --ink: #ecebe6; --muted: #a3a29c; --line: #363733;
    --accent: #7fb0e0; --accent-ink: #0d1a26; --disagree: #e4766a; --agree: #67b98b; --neutral: #9a9a95; --warn: #e0a35a;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--ink);
  padding: 16px; max-width: 980px; margin: 0 auto;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
p { margin: 0 0 .75rem; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1 1 200px; }
input[type=text], textarea {
  width: 100%; font: inherit; color: inherit; background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}
textarea { min-height: 72px; resize: vertical; }
button {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 8px; padding: 10px 16px; min-height: 44px;
}
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.danger { color: var(--disagree); }
button:disabled { opacity: .5; cursor: default; }
a.button {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  font-weight: 600; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 8px; padding: 10px 16px; min-height: 44px; white-space: nowrap;
}
a.button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
input[type=checkbox] { width: auto; min-height: 0; margin: 0 6px 0 0; vertical-align: middle; }

/* Home page room lists */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); padding: 8px 12px; min-height: 40px; font-size: 1.05rem; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs .count { font-size: .8rem; font-weight: 600; color: var(--muted); margin-left: 4px; }
.rooms { display: flex; flex-direction: column; gap: 8px; }
.room-card { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.room-card .room-claim { font-weight: 600; overflow-wrap: anywhere; }
.room-card .grow { min-width: 0; }
.room-card .card-actions { flex-wrap: nowrap; }
@media (max-width: 520px) { .room-card .card-actions { flex-wrap: wrap; } .room-card .card-actions > * { flex: 1 1 auto; } }
button.linkish { border: 0; background: none; padding: 0; min-height: 0; color: var(--accent); text-decoration: underline; font-weight: 400; }
.filepick input[type=file] { font: inherit; font-size: .875rem; }
@media (max-width: 520px) { .room-card { flex-direction: column; align-items: stretch; } .room-card .grow { flex: none; } }
code { background: var(--bg); padding: 2px 6px; border-radius: 4px; }
.code-big { font-size: 2.4rem; letter-spacing: .15em; font-weight: 700; font-family: ui-monospace, monospace; }
.claim { font-size: 1.35rem; font-weight: 600; margin: 0 0 .5rem; }
.badge { display: inline-block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.badge.voting { color: var(--warn); border-color: var(--warn); }
.badge.reveal { color: var(--agree); border-color: var(--agree); }
.badge.closed { color: var(--disagree); border-color: var(--disagree); }

/* The line. Seven columns, Strongly disagree on the left. */
.line { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 12px 0; }
.line .col { min-height: 120px; border-top: 3px solid var(--line); padding-top: 6px; text-align: center; }
.line .col .lbl { font-size: .72rem; line-height: 1.2; color: var(--muted); min-height: 2.4em; }
.line .col .count { font-size: 1.4rem; font-weight: 700; }
.line .col.d .lbl, .line .col.d .count { color: var(--disagree); }
.line .col.a .lbl, .line .col.a .count { color: var(--agree); }
.line .col.n .count { color: var(--neutral); }
.line .col.d { border-top-color: var(--disagree); }
.line .col.a { border-top-color: var(--agree); }
.line .col.n { border-top-color: var(--neutral); }
.chip {
  display: inline-block; margin: 2px; padding: 2px 8px; border-radius: 999px; font-size: .8rem;
  background: var(--bg); border: 1px solid var(--line); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip.moved { border-color: var(--warn); }
.chip.spot { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Participant's seven big buttons */
.picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 12px 0; }
.picker button { padding: 8px 2px; min-height: 76px; font-size: .78rem; line-height: 1.15; font-weight: 600; }
.picker button.d { color: var(--disagree); }
.picker button.a { color: var(--agree); }
.picker button.sel { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (max-width: 520px) {
  .picker { grid-template-columns: 1fr; }
  .picker button { min-height: 48px; font-size: 1rem; }
  .line .col .lbl { font-size: .6rem; }
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
td:last-child { white-space: nowrap; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
tr.spot td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90vw; }
.toast.show { opacity: 1; }
.rejoin h2 { margin: 8px 0 4px; font-size: 1.1rem; }
.rejoin-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; }
.rejoin-btn svg { width: 40px; height: 50px; }
.ended { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.ended.hidden { display: none; }
.ended .panel { max-width: 520px; width: 100%; margin: 0; }
.countdown { font-size: 4rem; font-weight: 800; text-align: center; line-height: 1; margin: 8px 0; }
details summary { cursor: pointer; font-weight: 600; }
ul.questions li { margin-bottom: .4rem; }
.hidden, [hidden] { display: none !important; }
footer { margin-top: 24px; color: var(--muted); font-size: .85rem; }

/* ---- room ---------------------------------------------------------------- */
:root { --sky1: #cfe3f2; --sky2: #eaf2f8; --road: #5b5e66; --curb: #b9b3a3; --sidewalk: #d8d2c3; }
@media (prefers-color-scheme: dark) {
  :root { --sky1: #1a2430; --sky2: #232a33; --road: #3a3d44; --curb: #5d584d; --sidewalk: #4a463e; }
}
body.room { max-width: 1400px; }
.gate { max-width: 560px; margin: 24px auto; }
.topbar { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.topbar .claim { font-size: 1.25rem; }
.topbar .claim.narrowed { font-size: 1rem; font-weight: 500; color: var(--muted); margin-bottom: .2rem; }
.topbar .focus { font-size: 1.2rem; font-weight: 600; border-left: 3px solid var(--accent, #3b9ac9); padding-left: 8px; }
@media (max-width: 600px) { .topbar .focus { font-size: 1.05rem; } }
.guess { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--bg); }
.nowrap { white-space: nowrap; }
.typing-note { min-height: 1.2em; font-style: italic; }
.guess-title { font-weight: 600; margin-bottom: 4px; }
.guess-people { margin: 0 0 6px; padding-left: 1.1rem; }
.guess-people q { font-style: italic; }
.guess label { display: block; font-size: .9rem; margin-bottom: 4px; }
.guess textarea { width: 100%; min-height: 4.5em; box-sizing: border-box; }
.stage { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 12px; align-items: start; }
@media (max-width: 900px) { .stage { grid-template-columns: 1fr; } }
.street-wrap { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.street { width: 100%; aspect-ratio: 1000 / 440; }
.street-svg { width: 100%; height: 100%; display: block; border-radius: 6px; }
.avatar { transition: transform .9s cubic-bezier(.4,.1,.2,1); }
.avatar.away { opacity: .45; }
.avatar.ghost { opacity: .5; }
.avatar.you .av-name { font-weight: 800; text-decoration: underline; }
.avatar .av-tip { opacity: 0; pointer-events: none; transition: opacity .12s; }
.avatar.hovered .av-tip, .avatar.dragging .av-tip { opacity: 1; }
.avatar.draggable { cursor: grab; touch-action: none; }
.avatar.dragging { cursor: grabbing; transition: none; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.street-wrap .countdown { position: absolute; top: 30%; left: 0; right: 0; font-size: 6rem; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); pointer-events: none; }
.street-foot { display: flex; gap: 8px; align-items: center; margin-top: 6px; min-height: 24px; }
.spot { color: var(--accent); font-weight: 700; }
.side { display: flex; flex-direction: column; gap: 12px; min-height: 480px; }
.video { background: #000; border-radius: var(--radius); min-height: 220px; flex: 0 0 260px; overflow: hidden; position: relative; }
.video iframe { border: 0; width: 100%; height: 100%; }
.video-fallback { color: #ddd; text-align: center; padding: 24px; }
.transcript-wrap { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 200px; }
.transcript { flex: 1 1 auto; overflow-y: auto; max-height: 360px; font-size: .92rem; }
.transcript .tline { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.transcript .tline.system { color: var(--muted); font-size: .8rem; font-style: italic; }
.transcript .tline.moderator { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 4px; padding: 4px 6px; }
.transcript .tline.me b { color: var(--accent); }
.interim { min-height: 1.2em; }
#dictate[aria-pressed="true"] { background: var(--disagree); border-color: var(--disagree); color: #fff; }
.me { margin-top: 12px; }
.swatches, .hats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; max-width: 200px; }
.swatch { width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; border: 3px solid transparent; }
.swatch.sel { border-color: var(--ink); }
.hat { padding: 4px 8px; min-height: 0; font-size: .8rem; font-weight: 500; }
.hat.sel { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
select { font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
label { display: inline-flex; gap: 6px; align-items: center; }
.room .picker button { min-height: 56px; }