:root {
  --ink: #142437;
  --ink-soft: #536276;
  --ink-faint: #8b98aa;
  --paper: #f5f7f8;
  --paper-strong: #ffffff;
  --line: #dfe5e9;
  --navy: #102033;
  --navy-2: #172c42;
  --navy-3: #21415a;
  --cream: #f5eee3;
  --orange: #da8952;
  --orange-dark: #b96537;
  --teal: #4f8f87;
  --blue: #7082af;
  --red: #bd6b72;
  --green: #4d9a7b;
  --shadow: 0 18px 50px rgba(20, 36, 55, .08);
  --shadow-soft: 0 8px 24px rgba(20, 36, 55, .06);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font: 14px/1.55 Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.boot-screen { min-height: 100vh; display: grid; place-content: center; gap: 14px; color: var(--ink-soft); text-align: center; }
.brand-mark { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 11px; color: white; background: var(--orange); font-weight: 800; letter-spacing: -.08em; box-shadow: 0 7px 18px rgba(218,137,82,.24); }
.brand-mark-lg { width: 50px; height: 50px; border-radius: 16px; font-size: 22px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.035em; font-size: 18px; }
.brand small { display: block; color: var(--ink-faint); font-weight: 500; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-top: -2px; }

.landing { min-height: 100vh; overflow: hidden; position: relative; background: var(--paper); }
.landing::before { content: ""; position: absolute; width: 48vw; height: 48vw; top: -25vw; right: -12vw; background: rgba(218,137,82,.13); border-radius: 50%; filter: blur(2px); }
.landing::after { content: ""; position: absolute; width: 32vw; height: 32vw; bottom: -18vw; left: -8vw; background: rgba(79,143,135,.12); border-radius: 50%; }
.landing-nav { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 26px 0; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.landing-nav-actions { display: flex; gap: 10px; align-items: center; }
.hero { width: min(1180px, calc(100% - 48px)); margin: 0 auto; min-height: 590px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; position: relative; z-index: 1; }
.eyebrow { color: var(--orange-dark); font-size: 12px; letter-spacing: .16em; font-weight: 800; text-transform: uppercase; }
.hero h1 { font-size: clamp(42px, 5.4vw, 78px); line-height: 1.03; letter-spacing: -.075em; max-width: 650px; margin: 18px 0 22px; font-weight: 850; }
.hero h1 em { color: var(--orange); font-style: normal; }
.hero-copy { max-width: 540px; color: var(--ink-soft); font-size: 17px; line-height: 1.8; margin: 0 0 32px; }
.hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hero-note { color: var(--ink-faint); font-size: 12px; margin-top: 18px; }
.entry-inline { width: min(405px, 100%); display: flex; gap: 8px; margin-top: 19px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.68); }.entry-inline input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; padding: 7px 9px; color: var(--ink); }.entry-inline .button { flex: 0 0 auto; }
.hero-visual { min-height: 430px; position: relative; display: grid; place-items: center; }
.hero-orbit { width: min(390px, 86vw); aspect-ratio: 1; border: 1px solid rgba(218,137,82,.25); border-radius: 50%; position: relative; display: grid; place-items: center; }
.hero-orbit::before, .hero-orbit::after { content: ""; position: absolute; border: 1px solid rgba(79,143,135,.18); border-radius: 50%; }
.hero-orbit::before { inset: 42px; }
.hero-orbit::after { inset: 86px; }
.hero-core { width: 178px; aspect-ratio: 1; display: grid; place-items: center; text-align: center; border-radius: 50%; color: white; background: var(--navy); box-shadow: 0 25px 55px rgba(16,32,51,.23); position: relative; z-index: 1; }
.hero-core strong { display: block; font-size: 30px; letter-spacing: -.05em; }
.hero-core span { display: block; color: #b5c2cf; font-size: 11px; margin-top: 2px; }
.orbit-label { position: absolute; padding: 9px 13px; border-radius: 11px; background: rgba(255,255,255,.84); box-shadow: var(--shadow-soft); font-size: 11px; color: var(--ink-soft); backdrop-filter: blur(9px); }
.orbit-label strong { display: block; color: var(--ink); font-size: 14px; }
.orbit-a { top: 15%; left: 0; }.orbit-b { right: -8px; top: 48%; }.orbit-c { bottom: 10%; left: 17%; }
.landing-features { width: min(1180px, calc(100% - 48px)); margin: 10px auto 55px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; z-index: 1; }
.feature-card { min-height: 160px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; background: rgba(255,255,255,.66); }
.feature-index { color: var(--orange); font-family: var(--mono); font-size: 11px; }
.feature-card h3 { margin: 24px 0 5px; font-size: 16px; letter-spacing: -.03em; }
.feature-card p { color: var(--ink-soft); font-size: 12px; margin: 0; }

.button { border: 0; border-radius: 11px; padding: 11px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; transition: transform .18s, box-shadow .18s, background .18s; }
.button:hover { transform: translateY(-1px); }
.button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(79,143,135,.28); outline-offset: 2px; }
.button-primary { color: white; background: var(--orange); box-shadow: 0 8px 18px rgba(218,137,82,.22); }.button-primary:hover { background: var(--orange-dark); }
.button-dark { color: white; background: var(--navy); }.button-dark:hover { background: var(--navy-2); }
.button-ghost { color: var(--ink-soft); background: transparent; }.button-ghost:hover { color: var(--ink); background: #e9eef0; }
.button-soft { color: var(--navy); background: #e8efed; }.button-soft:hover { background: #d7e6e2; }
.roster-edit-panel { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfd; }
.button-danger { color: #984b52; background: #fae9e8; }.button-danger:hover { background: #f6dada; }
.button-small { padding: 7px 11px; border-radius: 8px; font-size: 12px; }
.button-block { width: 100%; }
.button[disabled] { cursor: not-allowed; opacity: .48; transform: none; box-shadow: none; }
.link-button { border: 0; padding: 0; color: var(--teal); background: transparent; font-weight: 700; cursor: pointer; }

.public-entry { min-height: 100vh; padding: 24px; display: grid; place-items: center; background: radial-gradient(circle at 80% 8%, #f6dfce 0, transparent 32%), var(--paper); }
.entry-card { width: min(460px, 100%); background: var(--paper-strong); border: 1px solid var(--line); border-radius: 24px; padding: 34px; box-shadow: var(--shadow); }
.privacy-card { width: min(820px, 100%); }
.privacy-content { color: var(--ink-soft); font-size: 14px; line-height: 1.75; }
.privacy-content h2 { color: var(--ink); font-size: 18px; margin: 26px 0 8px; }
.privacy-content p { margin: 8px 0; }
.privacy-content ul { padding-left: 22px; }
.privacy-content a { color: var(--teal); font-weight: 700; }
.entry-head { text-align: center; margin-bottom: 26px; }.entry-head .brand-mark { margin-bottom: 18px; }
.entry-head h1 { margin: 0 0 8px; letter-spacing: -.05em; font-size: 28px; }.entry-head p { color: var(--ink-soft); margin: 0; }
.privacy-note { padding: 13px 14px; border-radius: 11px; background: #f2f6f6; color: var(--ink-soft); font-size: 12px; margin: 18px 0; }.privacy-note strong { color: var(--ink); display: block; margin-bottom: 3px; }
.form-stack { display: grid; gap: 16px; }.field { display: grid; gap: 7px; }.field label { font-size: 12px; color: var(--ink-soft); font-weight: 700; }.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fbfcfc; padding: 11px 12px; outline: none; }.field textarea { min-height: 90px; resize: vertical; }.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(79,143,135,.12); }.field-hint { color: var(--ink-faint); font-size: 11px; }.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.form-error { min-height: 18px; color: #a95057; font-size: 12px; font-weight: 600; }
.entry-footer { text-align: center; color: var(--ink-faint); font-size: 11px; margin-top: 22px; }.entry-footer a { color: var(--teal); font-weight: 700; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); }
.side-nav { background: var(--navy); color: white; padding: 24px 17px; display: flex; flex-direction: column; min-height: 100vh; position: sticky; top: 0; height: 100vh; }
.side-nav .brand { padding: 0 10px 36px; }.side-nav .brand small { color: #7d91a2; }
.side-label { color: #768b9d; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 800; padding: 0 12px; margin: 0 0 9px; }
.side-links { display: grid; gap: 4px; }.side-link { border: 0; background: transparent; color: #9caebd; border-radius: 10px; padding: 11px 12px; text-align: left; display: flex; gap: 11px; align-items: center; font-weight: 650; }.side-link:hover { background: rgba(255,255,255,.06); color: white; }.side-link.active { background: rgba(218,137,82,.17); color: #ffd3b0; }.side-icon { width: 20px; text-align: center; font-size: 16px; }.side-bottom { margin-top: auto; padding: 14px 10px 3px; border-top: 1px solid rgba(255,255,255,.1); }.user-mini { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--teal); font-weight: 800; }.user-mini small { color: #90a1b0; display: block; font-size: 10px; }.user-mini strong { font-size: 12px; }.side-bottom .button { color: #afbfca; padding-left: 0; }
.main-area { min-width: 0; padding: 32px clamp(22px, 4vw, 58px) 60px; }.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 32px; }.topbar h1 { margin: 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.06em; }.topbar p { margin: 6px 0 0; color: var(--ink-soft); }.top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 5px 9px; color: var(--ink-soft); background: #edf1f2; font-size: 11px; font-weight: 800; white-space: nowrap; }.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.status-voting { color: #bf693b; background: #faeee5; }.status-awaiting { color: #8b6a37; background: #fbf3df; }.status-revealed, .status-completed { color: #397762; background: #e5f3ec; }.status-ready { color: #56789d; background: #e9f0f8; }.status-draft { color: #758396; background: #edf0f3; }.status-cancelled { color: #a05159; background: #fae9e9; }.status-archived { color: #6c7480; background: #e9ebed; }
.card { border: 1px solid var(--line); background: var(--paper-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }.card-pad { padding: 22px; }.card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 17px; }.card-title h2, .card-title h3 { margin: 0; letter-spacing: -.04em; }.card-title p { color: var(--ink-soft); font-size: 12px; margin: 4px 0 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; margin-bottom: 22px; }.stat-card { padding: 19px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-strong); }.stat-label { color: var(--ink-soft); font-size: 12px; }.stat-value { color: var(--ink); font-family: var(--mono); font-size: 28px; line-height: 1.1; font-weight: 750; letter-spacing: -.07em; margin: 10px 0 3px; }.stat-meta { color: var(--ink-faint); font-size: 11px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 18px; }.dashboard-list { display: grid; gap: 9px; }.list-row { border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }.list-row:hover { border-color: #c3d5d3; background: #fbfdfd; }.list-main { min-width: 0; }.list-main strong { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }.list-main small { display: block; color: var(--ink-soft); margin-top: 2px; }.list-side { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }.empty { padding: 35px 15px; text-align: center; color: var(--ink-faint); }.empty-icon { font-size: 28px; opacity: .65; margin-bottom: 6px; }

.participant-shell { min-height: 100vh; background: #f4f6f6; }.participant-top { height: 72px; padding: 0 clamp(18px,4vw,58px); background: rgba(255,255,255,.84); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; position: sticky; top: 0; z-index: 4; backdrop-filter: blur(16px); }.participant-top .brand small { color: var(--ink-faint); }.participant-user { display: flex; gap: 10px; align-items: center; color: var(--ink-soft); }.participant-user .avatar { width: 30px; height: 30px; font-size: 12px; }.participant-content { width: min(1210px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 65px; }.participant-layout { display: grid; grid-template-columns: 245px minmax(0,1fr); gap: 28px; align-items: start; }.round-nav { display: grid; gap: 9px; position: sticky; top: 100px; }.round-nav-header { color: var(--ink-faint); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 0 5px 4px; }.round-nav-item { width: 100%; border: 1px solid transparent; border-radius: 14px; background: transparent; padding: 13px 12px; display: flex; align-items: center; gap: 11px; text-align: left; color: var(--ink-soft); }.round-nav-item:hover { background: white; border-color: var(--line); }.round-nav-item.active { color: var(--ink); background: white; border-color: var(--line); box-shadow: var(--shadow-soft); }.round-number { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: #e6ecee; color: var(--ink-soft); font-family: var(--mono); font-size: 11px; }.round-nav-item.active .round-number { background: var(--orange); color: white; }.round-nav-info { min-width: 0; }.round-nav-info strong { font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.round-nav-info small { display: block; color: var(--ink-faint); font-size: 10px; margin-top: 2px; }.participant-main { min-width: 0; }.event-kicker { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 12px; margin-bottom: 10px; }.participant-main h1 { font-size: clamp(27px,4vw,43px); line-height: 1.08; letter-spacing: -.07em; margin: 0 0 9px; }.participant-main > .intro { color: var(--ink-soft); margin: 0 0 25px; max-width: 680px; }.round-workspace { display: grid; gap: 17px; }.round-hero { border-radius: var(--radius-lg); padding: clamp(22px,4vw,36px); color: white; background: linear-gradient(135deg, #17324a, #102033); overflow: hidden; position: relative; }.round-hero::after { content: ""; position: absolute; right: -75px; top: -110px; width: 280px; height: 280px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255,255,255,.025), 0 0 0 68px rgba(255,255,255,.025); }.round-hero .event-kicker { color: #9db1bf; position: relative; z-index: 1; }.round-hero h2 { max-width: 700px; margin: 12px 0 7px; font-size: clamp(24px,3.5vw,40px); line-height: 1.1; letter-spacing: -.065em; position: relative; z-index: 1; }.round-hero p { color: #bdcbd4; max-width: 650px; margin: 0; position: relative; z-index: 1; }.round-hero-meta { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 23px; position: relative; z-index: 1; }.dark-chip { padding: 6px 9px; border-radius: 8px; color: #cad6dd; background: rgba(255,255,255,.09); font-size: 11px; }.dark-chip strong { color: white; font-family: var(--mono); }
.progress-card { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 20px 22px; }.progress-copy { color: var(--ink-soft); font-size: 12px; }.progress-copy strong { display: block; color: var(--ink); font-family: var(--mono); font-size: 19px; letter-spacing: -.04em; margin-top: 3px; }.progress-bar { height: 8px; overflow: hidden; border-radius: 99px; background: #e5eaec; margin-top: 12px; }.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), #8bb5a5); transition: width .35s ease; }.progress-percent { color: var(--teal); font-family: var(--mono); font-size: 25px; font-weight: 800; }.sync-note { color: var(--ink-faint); font-size: 10px; margin-top: 9px; }.sync-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 5px; }.sync-dot.offline { background: var(--orange); }
.vote-card { padding: clamp(20px,3vw,30px); }.vote-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 20px; }.vote-card-head h3 { margin: 0; font-size: 18px; letter-spacing: -.04em; }.vote-card-head p { color: var(--ink-soft); font-size: 12px; margin: 4px 0 0; }.deadline { text-align: right; flex-shrink: 0; }.deadline-label { color: var(--ink-faint); font-size: 10px; }.countdown { color: var(--orange-dark); font-family: var(--mono); font-size: 25px; line-height: 1; font-weight: 800; margin-top: 4px; }.countdown.urgent { color: var(--red); }.option-list { display: grid; gap: 10px; }.option-choice { position: relative; }.option-choice input { position: absolute; opacity: 0; }.option-choice label { display: grid; grid-template-columns: 36px minmax(0,1fr) 20px; gap: 13px; align-items: center; border: 1px solid var(--line); border-radius: 13px; padding: 14px; cursor: pointer; transition: border .15s, background .15s, box-shadow .15s; }.option-choice label:hover { border-color: #b5cfcb; background: #fbfdfd; }.option-choice input:checked + label { border-color: var(--teal); background: #f1f8f6; box-shadow: 0 0 0 3px rgba(79,143,135,.1); }.option-code { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: white; font-family: var(--mono); font-size: 12px; font-weight: 800; background: var(--option-color, var(--orange)); }.option-copy strong { display: block; font-size: 14px; }.option-copy small { display: block; color: var(--ink-soft); margin-top: 2px; }.checkmark { width: 17px; height: 17px; border: 1px solid #c5d0d5; border-radius: 50%; position: relative; }.option-choice input[type=checkbox] + label .checkmark { border-radius: 5px; }.option-choice input:checked + label .checkmark { border-color: var(--teal); background: var(--teal); }.option-choice input:checked + label .checkmark::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }.vote-actions { border-top: 1px solid var(--line); margin-top: 23px; padding-top: 18px; display: flex; justify-content: space-between; gap: 13px; align-items: center; flex-wrap: wrap; }.vote-actions-note { color: var(--ink-faint); font-size: 11px; }.vote-actions-buttons { display: flex; gap: 8px; }.selection-hint { min-height: 17px; color: var(--ink-soft); font-size: 11px; margin-top: 10px; }.selection-hint.invalid { color: var(--red); }
.waiting-card { text-align: center; padding: 58px 25px; }.waiting-icon { width: 66px; height: 66px; margin: 0 auto 19px; border-radius: 20px; display: grid; place-items: center; color: var(--orange); background: #fbefe7; font-size: 28px; }.waiting-card h2 { margin: 0; font-size: 25px; letter-spacing: -.06em; }.waiting-card p { color: var(--ink-soft); margin: 8px auto 0; }.waiting-meta { display: inline-flex; gap: 18px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; }.waiting-meta strong { color: var(--ink); font-family: var(--mono); font-size: 16px; display: block; }.result-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.result-stat { padding: 16px; border-radius: 12px; background: #f4f7f7; }.result-stat span { color: var(--ink-soft); font-size: 11px; }.result-stat strong { display: block; font-family: var(--mono); font-size: 23px; margin-top: 5px; letter-spacing: -.06em; }.result-list { display: grid; gap: 13px; }.result-row { display: grid; grid-template-columns: 35px minmax(90px, 1.2fr) minmax(100px, 2fr) auto; gap: 13px; align-items: center; }.result-rank { color: var(--ink-faint); font-family: var(--mono); font-size: 12px; text-align: center; }.result-name { min-width: 0; }.result-name strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.result-name small { color: var(--ink-soft); font-size: 11px; }.result-track { height: 9px; overflow: hidden; border-radius: 99px; background: #e9edef; }.result-track-fill { height: 100%; border-radius: inherit; background: var(--bar-color, var(--orange)); min-width: 0; }.result-value { font-family: var(--mono); font-size: 13px; text-align: right; white-space: nowrap; }.result-version { color: var(--ink-faint); font-size: 11px; margin-top: 19px; }

.screen-page { min-height: 100vh; color: white; background: #0d1b2a; padding: clamp(22px,4vw,58px); overflow: hidden; }.screen-page::before { content: ""; position: fixed; width: 60vw; height: 60vw; top: -34vw; right: -15vw; border: 1px solid rgba(218,137,82,.17); border-radius: 50%; box-shadow: 0 0 0 70px rgba(218,137,82,.025), 0 0 0 140px rgba(218,137,82,.025); }.screen-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }.screen-top .brand { color: white; }.screen-top .brand small { color: #7890a0; }.screen-controls { display: flex; gap: 8px; }.screen-controls .button-ghost { color: #b6c5cf; }.screen-main { min-height: calc(100vh - 110px); display: grid; place-content: center; width: min(1100px,100%); margin: 0 auto; position: relative; z-index: 1; }.screen-kicker { display: flex; justify-content: space-between; gap: 20px; color: #91a7b4; letter-spacing: .11em; text-transform: uppercase; font-size: 12px; font-weight: 800; }.screen-kicker .screen-time { color: #f1b07c; font-family: var(--mono); font-size: clamp(23px,3vw,38px); letter-spacing: -.06em; }.screen-title { max-width: 900px; margin: 21px 0 47px; font-size: clamp(39px,7vw,84px); line-height: 1; letter-spacing: -.085em; }.screen-progress-label { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; color: #9cb0bb; font-size: clamp(14px,1.5vw,18px); }.screen-progress-label strong { color: white; font-family: var(--mono); font-size: clamp(26px,3.5vw,47px); letter-spacing: -.08em; }.screen-progress { height: clamp(15px,1.8vw,22px); margin: 17px 0 18px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.11); }.screen-progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), #efbb8f); }.screen-percent { color: #efbb8f; font-family: var(--mono); font-size: clamp(24px,3vw,38px); text-align: right; }.screen-status { color: #96abb6; margin-top: 45px; font-size: 14px; letter-spacing: .08em; }.screen-status::before { content: ""; width: 7px; height: 7px; margin-right: 9px; display: inline-block; background: var(--teal); border-radius: 50%; }.screen-waiting { text-align: center; }.screen-waiting .screen-title { margin-bottom: 14px; }.screen-waiting p { color: #9eb0bb; font-size: 18px; }.screen-results { width: 100%; }.screen-results .screen-title { margin: 21px 0 24px; }.screen-result-grid { display: grid; gap: 15px; }.screen-result-row { display: grid; grid-template-columns: 45px minmax(160px, .8fr) minmax(150px, 2fr) auto; gap: 18px; align-items: center; }.screen-result-row .result-rank { color: #7e96a5; font-size: 15px; }.screen-result-row .result-name strong { color: white; font-size: 18px; }.screen-result-row .result-name small { color: #8fa4af; }.screen-result-row .result-track { height: 14px; background: rgba(255,255,255,.1); }.screen-result-row .result-value { color: white; font-size: 17px; }.screen-foot { position: fixed; bottom: 22px; left: clamp(22px,4vw,58px); color: #607b8a; font-size: 11px; }

.admin-event-header { display: flex; gap: 15px; justify-content: space-between; align-items: flex-start; padding: 24px; }.admin-event-title h2 { margin: 0; font-size: 25px; letter-spacing: -.06em; }.admin-event-title p { margin: 5px 0 0; color: var(--ink-soft); }.admin-event-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }.share-panel { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; margin-top: 18px; }.share-box { padding: 14px; border: 1px dashed #cdd9db; border-radius: 11px; background: #fbfdfd; }.share-box small { display: block; color: var(--ink-faint); margin-bottom: 5px; }.share-box .share-url { display: flex; gap: 10px; align-items: center; }.share-box code { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--teal); font-size: 11px; }.qr-preview { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 5px; padding: 3px; background: white; border: 1px solid var(--line); }.round-admin-list { display: grid; gap: 12px; }.round-admin-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: white; }.round-admin-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }.round-admin-card h3 { margin: 0; font-size: 16px; }.round-admin-card p { color: var(--ink-soft); font-size: 12px; margin: 4px 0 0; }.round-admin-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 15px; }.meta-chip { color: var(--ink-soft); background: #f0f3f4; border-radius: 7px; padding: 5px 8px; font-size: 11px; }.meta-chip strong { color: var(--ink); font-family: var(--mono); }.round-admin-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 17px; padding-top: 14px; border-top: 1px solid #edf0f1; }.round-admin-actions .button { font-size: 11px; padding: 7px 10px; }.editor-section { padding: 22px; }.editor-section + .editor-section { border-top: 1px solid var(--line); }.editor-section h3 { margin: 0 0 16px; font-size: 15px; letter-spacing: -.03em; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }.form-grid .field-full { grid-column: 1/-1; }.check-field { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 12px; }.check-field input { accent-color: var(--teal); }.option-editor { display: grid; gap: 10px; }.option-editor-row { display: grid; grid-template-columns: 68px minmax(100px,1fr) minmax(100px,1.2fr) 40px 30px; gap: 7px; align-items: center; }.option-editor-row input { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 9px; background: #fbfcfc; }.option-editor-row input[type=color] { height: 35px; padding: 3px; }.option-editor-row .button { padding: 7px; }.editor-note { padding: 10px 12px; border-radius: 8px; color: var(--ink-soft); background: #f5f8f8; font-size: 11px; margin-bottom: 13px; }.participant-picker { max-height: 220px; overflow: auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; padding: 2px; }.person-check { border: 1px solid var(--line); border-radius: 9px; padding: 8px; display: flex; gap: 8px; align-items: center; font-size: 11px; }.person-check:has(input:checked) { border-color: #a9cbc5; background: #f1f8f6; }.person-check input { accent-color: var(--teal); }.person-check small { display: block; color: var(--ink-faint); }.panel-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 19px; }.panel-tab { border: 0; border-bottom: 2px solid transparent; padding: 10px 13px; color: var(--ink-soft); background: transparent; font-weight: 700; font-size: 12px; }.panel-tab.active { color: var(--orange-dark); border-color: var(--orange); }.table-wrap { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }.data-table th { text-align: left; color: var(--ink-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; padding: 0 12px 11px; white-space: nowrap; }.data-table td { padding: 12px; border-top: 1px solid #edf0f1; white-space: nowrap; }.data-table tr:hover td { background: #fbfdfd; }.masked { font-family: var(--mono); color: var(--ink-soft); font-size: 11px; }.import-preview { margin-top: 18px; }.upload-zone { border: 1px dashed #b9cfd0; border-radius: 14px; padding: 25px; background: #f7fbfa; text-align: center; }.upload-zone input[type=file] { display: block; margin: 13px auto 0; max-width: 100%; font-size: 12px; }.summary-chips { display: flex; gap: 7px; flex-wrap: wrap; margin: 15px 0; }.summary-chip { padding: 7px 10px; border-radius: 8px; background: #f0f3f4; color: var(--ink-soft); font-size: 11px; }.summary-chip strong { font-family: var(--mono); color: var(--ink); margin-right: 3px; }.summary-chip.warn { color: #a34f54; background: #faeaea; }.token-reveal { padding: 13px; border-radius: 10px; background: #fff6ed; color: var(--orange-dark); font-size: 12px; margin-top: 13px; }.token-reveal code { display: block; word-break: break-all; color: var(--ink); margin-top: 6px; }
.audit-row { display: grid; grid-template-columns: 155px 1fr 160px; gap: 15px; align-items: center; padding: 14px 0; border-top: 1px solid #edf0f1; }.audit-time { color: var(--ink-faint); font-family: var(--mono); font-size: 11px; }.audit-action { font-weight: 750; }.audit-target { color: var(--ink-soft); font-size: 11px; }.code-digest { color: var(--ink-faint); font-family: var(--mono); font-size: 10px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(10,25,39,.45); backdrop-filter: blur(5px); }.modal { width: min(600px,100%); max-height: min(85vh, 780px); overflow: auto; border-radius: 18px; background: white; box-shadow: 0 25px 80px rgba(10,25,39,.25); }.modal-head { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }.modal-head h2 { font-size: 18px; margin: 0; }.modal-body { padding: 22px; }.modal-foot { padding: 15px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }.toast-region { position: fixed; z-index: 30; right: 20px; bottom: 20px; display: grid; gap: 9px; max-width: min(360px,calc(100% - 40px)); }.toast { color: white; background: var(--navy); border-radius: 11px; padding: 12px 15px; box-shadow: var(--shadow); font-size: 12px; animation: toast-in .2s ease-out; }.toast.error { background: #a95057; }.toast.success { background: #397762; } @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.mobile-only { display: none; }

/* Keep the projection brand readable when a long event-specific name is used. */
.screen-top .brand {
  min-width: 0;
  flex: 1 1 auto;
  max-width: calc(100% - 120px);
  align-items: flex-start;
}
.screen-top .screen-brand-name {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.25;
}
.screen-top .screen-brand-name small { white-space: nowrap; }
.screen-controls { flex: 0 0 auto; }

@media (max-width: 980px) {
  .hero { gap: 25px; }.dashboard-grid { grid-template-columns: 1fr; }.app-shell { grid-template-columns: 215px minmax(0,1fr); }.main-area { padding: 27px 25px 50px; }.participant-layout { grid-template-columns: 190px minmax(0,1fr); gap: 18px; }.screen-title { margin-bottom: 35px; }
}
@media (max-width: 720px) {
  .landing-nav, .hero, .landing-features { width: min(100% - 32px, 560px); }.landing-nav { padding: 18px 0; }.landing-nav-actions .button-ghost { display: none; }.hero { grid-template-columns: 1fr; padding: 28px 0 15px; min-height: auto; gap: 20px; }.hero h1 { font-size: 48px; }.hero-copy { font-size: 15px; }.hero-visual { min-height: 300px; }.hero-orbit { width: 290px; }.hero-core { width: 130px; }.hero-core strong { font-size: 24px; }.orbit-a { left: -10px; }.orbit-b { right: -15px; }.landing-features { grid-template-columns: 1fr; margin-bottom: 30px; }.feature-card { min-height: 120px; }.feature-card h3 { margin-top: 14px; }
  .public-entry { padding: 15px; }.entry-card { padding: 25px 20px; }.field-row, .form-grid { grid-template-columns: 1fr; }.form-grid .field-full { grid-column: auto; }
  .app-shell { display: block; }.side-nav { min-height: auto; height: auto; position: static; padding: 13px 15px; }.side-nav .brand { padding: 0 5px 14px; }.side-label { display: none; }.side-links { display: flex; overflow-x: auto; }.side-link { flex: 0 0 auto; padding: 8px 10px; font-size: 11px; }.side-icon { font-size: 13px; width: auto; }.side-bottom { position: absolute; right: 12px; top: 12px; border: 0; padding: 0; }.side-bottom .user-mini, .side-bottom .button { display: none; }.main-area { padding: 23px 15px 40px; }.topbar { margin-bottom: 23px; }.topbar h1 { font-size: 27px; }.topbar p { font-size: 12px; }.stats-grid { grid-template-columns: repeat(2,1fr); gap: 9px; }.stat-card { padding: 14px; }.stat-value { font-size: 23px; }
  .participant-top { height: 62px; padding: 0 16px; }.participant-top .button-ghost { padding: 8px; font-size: 0; }.participant-top .button-ghost::before { content: "↪"; font-size: 17px; }.participant-content { width: calc(100% - 28px); padding-top: 22px; }.participant-layout { display: block; }.round-nav { display: flex; overflow-x: auto; position: static; margin-bottom: 20px; gap: 8px; padding: 2px; }.round-nav-header { display: none; }.round-nav-item { min-width: 155px; width: auto; padding: 10px; }.participant-main h1 { font-size: 31px; }.round-hero { padding: 23px 20px; }.round-hero h2 { font-size: 28px; }.progress-card { grid-template-columns: 1fr auto; padding: 16px; }.progress-percent { font-size: 21px; }.vote-card-head { display: block; }.deadline { text-align: left; margin-top: 14px; }.vote-actions { align-items: stretch; }.vote-actions-buttons { width: 100%; }.vote-actions-buttons .button { flex: 1; }.result-summary { gap: 7px; }.result-stat { padding: 11px; }.result-stat strong { font-size: 19px; }.result-row { grid-template-columns: 27px minmax(80px,1fr) 1fr auto; gap: 7px; }.result-name small { display: none; }
  .share-panel { grid-template-columns: 1fr; }.admin-event-header { display: block; padding: 18px; }.admin-event-actions { justify-content: flex-start; margin-top: 16px; }.option-editor-row { grid-template-columns: 51px minmax(0,1fr) 32px 27px; }.option-editor-row input:nth-child(3) { grid-column: 2 / -1; }.participant-picker { grid-template-columns: 1fr; }.audit-row { grid-template-columns: 1fr; gap: 3px; }
  .screen-page { padding: 20px; }.screen-main { min-height: calc(100vh - 80px); }.screen-kicker { display: block; }.screen-kicker .screen-time { display: block; margin-top: 14px; }.screen-title { font-size: 44px; margin: 23px 0 34px; }.screen-result-row { grid-template-columns: 28px minmax(80px, .8fr) 1.2fr auto; gap: 8px; }.screen-result-row .result-name strong { font-size: 13px; }.screen-result-row .result-value { font-size: 12px; }.screen-foot { left: 20px; bottom: 12px; }
  .mobile-only { display: inline-flex; }
}

.debate-topic-card { padding: 24px 28px; margin-top: 22px; background: linear-gradient(135deg, #fffaf4, #ffffff); }
.debate-topic-card h2 { margin: 8px 0 10px; font-size: clamp(20px, 3vw, 30px); letter-spacing: -.045em; line-height: 1.25; }
.debate-proposition { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.8; font-weight: 650; }
.debate-topic-card details { margin-top: 14px; color: var(--ink-soft); font-size: 13px; }
.debate-topic-card summary { cursor: pointer; color: var(--teal); font-weight: 700; }
.debate-topic-card details p { margin: 8px 0 0; line-height: 1.8; }
.debate-stage-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.75); }
.debate-stage-strip strong { font-size: 15px; }
.debate-stage-strip > span:last-child { margin-left: auto; }
.debate-workspace { display: grid; gap: 16px; }
.debate-waiting-card { padding: 42px 30px; text-align: center; }
.debate-waiting-card h2 { margin: 14px 0 8px; font-size: clamp(22px, 3vw, 34px); letter-spacing: -.05em; }
.debate-waiting-card p { max-width: 600px; margin: 0 auto; color: var(--ink-soft); }
.debate-live-card { padding: 28px; background: var(--navy); color: #fff; border-color: transparent; }
.debate-live-head { display: flex; align-items: flex-start; gap: 24px; justify-content: space-between; }
.debate-live-head .eyebrow { color: #e8b08b; }
.debate-live-head h2 { margin: 8px 0; font-size: clamp(22px, 3vw, 34px); letter-spacing: -.05em; }
.debate-live-head p { color: #b6c4cf; max-width: 680px; margin: 0; }
.debate-countdown { min-width: 126px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.23); border-radius: 12px; color: #ffd1b3; font: 800 28px/1 var(--mono); text-align: center; font-variant-numeric: tabular-nums; }
.debate-countdown.urgent { color: #ff858b; }
.debate-live-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.debate-live-meta .meta-chip { color: #dbe7ec; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); }
.debate-live-message { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); color: #d2dce3; }
.debate-sync-note { margin: 14px 0; text-align: center; }
.debate-config-card { margin-top: 18px; }
.debate-config-card .top-actions { flex-wrap: wrap; justify-content: flex-end; }
.debate-topic-editor-list { display: grid; gap: 18px; }
.debate-topic-editor { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fbfcfc; }
.debate-topic-editor-head { display: flex; align-items: flex-start; gap: 14px; justify-content: space-between; margin-bottom: 15px; }
.debate-topic-editor-head h3 { margin: 5px 0 0; font-size: 18px; letter-spacing: -.035em; }
.debate-assignment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.debate-side-picker { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.debate-side-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.debate-side-title span { color: var(--ink-faint); font: 11px var(--mono); }
.debate-participant-picker { max-height: 240px; overflow: auto; padding: 2px; }
.debate-stage-admin-card.is-current { border-color: rgba(79,143,135,.55); box-shadow: 0 0 0 3px rgba(79,143,135,.09); }
.debate-score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.debate-score-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfc; }
.debate-score-card .eyebrow { display: block; min-height: 35px; line-height: 1.45; }
.score-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.score-pair > div { padding: 12px; border-radius: 10px; background: #fff; }
.score-pair small, .score-pair strong { display: block; }
.score-pair small { color: var(--ink-faint); font-size: 11px; }
.score-pair strong { margin-top: 4px; font: 800 26px/1 var(--mono); }
.debate-screen-page .screen-main { align-items: stretch; }
.debate-screen-stage { width: min(1180px, 100%); margin: auto; text-align: center; }
.debate-screen-stage .screen-kicker { justify-content: center; }
.screen-proposition { max-width: 900px; margin: 0 auto 38px; color: #aebfca; font-size: clamp(16px, 2vw, 24px); line-height: 1.7; }
.screen-stage-description { max-width: 760px; margin: 46px auto 0; padding: 24px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; color: #d6e0e6; font-size: clamp(18px, 2vw, 27px); line-height: 1.7; background: rgba(255,255,255,.05); }
.debate-screen-live .screen-status { margin-top: 38px; }
.debate-screen-waiting { width: min(900px, 100%); text-align: center; }
.debate-screen-results .screen-result-winner { margin: 4px 0 24px; color: #ffd1b3; font-size: clamp(24px, 4vw, 48px); font-weight: 800; letter-spacing: -.05em; }
@media (max-width: 820px) {
  .debate-assignment-grid { grid-template-columns: 1fr; }
  .debate-live-head { flex-direction: column; }
  .debate-countdown { align-self: stretch; }
  .debate-stage-strip > span:last-child { margin-left: 0; }
}
.round-admin-card[draggable="true"] { cursor: grab; }
.round-admin-card.is-dragging { opacity: .55; border-color: var(--teal); }

/* Participant-facing typography: give Chinese copy room to breathe and keep long titles readable. */
.participant-content { width: min(1040px, calc(100% - 48px)); padding-top: 42px; }
.participant-main-current { max-width: 900px; margin: 0 auto; }
.participant-user { line-height: 1.45; }
.participant-user > span:not(.avatar) { max-width: 18em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-kicker { flex-wrap: wrap; line-height: 1.55; }
.participant-main h1 { max-width: 900px; line-height: 1.16; letter-spacing: -.055em; overflow-wrap: anywhere; }
.participant-main > .intro { max-width: 760px; font-size: 15px; line-height: 1.85; letter-spacing: .01em; }
.round-hero h2 { line-height: 1.2; letter-spacing: -.045em; overflow-wrap: anywhere; }
.round-hero p, .waiting-card p { line-height: 1.8; overflow-wrap: anywhere; }
.round-hero-meta { margin-top: 25px; }
.dark-chip { line-height: 1.5; }
.progress-copy { line-height: 1.6; }
.progress-copy strong { line-height: 1.25; }
.sync-note, .selection-hint, .vote-actions-note { line-height: 1.65; }
.vote-card-head h3 { font-size: 20px; line-height: 1.35; }
.vote-card-head p { max-width: 38em; line-height: 1.65; }
.deadline-label { line-height: 1.5; }
.option-choice label { align-items: start; min-height: 62px; }
.option-code { margin-top: 1px; }
.option-copy { min-width: 0; line-height: 1.55; }
.option-copy strong { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.option-copy small { line-height: 1.65; overflow-wrap: anywhere; }
.checkmark { align-self: center; }
.waiting-card { padding: clamp(44px, 7vw, 72px) clamp(22px, 6vw, 48px); }
.waiting-card h2 { line-height: 1.3; overflow-wrap: anywhere; }
.waiting-card p { max-width: 42em; }
.waiting-meta { flex-wrap: wrap; justify-content: center; line-height: 1.55; }
.result-stat span, .result-name small, .result-version { line-height: 1.6; }

/* Public display result: percentage-only donut chart and a high-contrast legend. */
.screen-main { width: min(1180px, 100%); }
.screen-kicker { flex-wrap: wrap; line-height: 1.6; letter-spacing: .08em; }
.screen-title { line-height: 1.12; letter-spacing: -.055em; overflow-wrap: anywhere; }
.screen-waiting p { max-width: 38em; margin: 0 auto; line-height: 1.8; }
.screen-results { max-width: 1120px; }
.screen-results .screen-title { margin-bottom: clamp(24px, 4vh, 44px); }
.screen-pie-layout { display: grid; grid-template-columns: minmax(300px, .95fr) minmax(320px, 1.05fr); gap: clamp(30px, 5vw, 72px); align-items: center; }
.screen-pie-stage { display: grid; place-items: center; min-height: 340px; }
.screen-pie { width: clamp(270px, 30vw, 440px); aspect-ratio: 1; border-radius: 50%; position: relative; transform: rotate(-90deg); box-shadow: 0 22px 70px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .1); }
.screen-pie-hole { position: absolute; inset: 19%; display: grid; place-content: center; gap: 3px; border-radius: 50%; background: #13283a; text-align: center; transform: rotate(90deg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.screen-pie-hole span { color: #91a7b4; font-size: clamp(12px, 1.3vw, 16px); letter-spacing: .12em; }
.screen-pie-hole strong { color: white; font-family: var(--mono); font-size: clamp(25px, 3.4vw, 48px); letter-spacing: -.08em; }
.screen-pie-legend { display: grid; gap: 11px; padding: clamp(17px, 2.4vw, 26px); border: 1px solid rgba(255, 255, 255, .11); border-radius: 18px; background: rgba(255, 255, 255, .045); }
.screen-pie-item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-width: 0; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.screen-pie-item:last-child { border-bottom: 0; }
.screen-pie-swatch { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .07); }
.screen-pie-item-copy { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 10px; min-width: 0; line-height: 1.45; }
.screen-pie-code { color: #91a7b4; font-family: var(--mono); font-size: 12px; }
.screen-pie-item-copy strong { color: white; font-size: clamp(15px, 1.65vw, 21px); line-height: 1.45; overflow-wrap: anywhere; }
.screen-pie-value { color: #f1b07c; font-family: var(--mono); font-size: clamp(17px, 2vw, 25px); font-weight: 800; white-space: nowrap; }
.screen-results .screen-status { margin-top: clamp(25px, 4vh, 42px); line-height: 1.6; }

@media (max-width: 820px) {
 .screen-page { overflow-y: auto; }
 .participant-content { width: calc(100% - 28px); padding-top: 26px; }
  .participant-top .button-ghost { padding: 8px 10px; font-size: 11px; }
  .participant-top .button-ghost::before { content: none; }
 .participant-main h1 { font-size: clamp(29px, 8vw, 38px); }
  .participant-main > .intro { font-size: 14px; line-height: 1.8; }
  .round-hero { padding: 25px 20px; }
  .round-hero h2 { font-size: clamp(25px, 7vw, 32px); }
  .vote-card { padding: 21px 16px; }
  .option-choice label { grid-template-columns: 32px minmax(0, 1fr) 20px; gap: 10px; padding: 12px; }
  .option-copy strong { font-size: 14px; }
  .vote-actions-buttons { flex-wrap: wrap; }
  .screen-pie-layout { grid-template-columns: 1fr; gap: 24px; }
  .screen-pie-stage { min-height: 0; }
  .screen-pie { width: min(70vw, 340px); }
  .screen-pie-item-copy strong { font-size: 15px; }
  .screen-pie-value { font-size: 16px; }
  .screen-results .screen-title { font-size: clamp(36px, 10vw, 58px); }
  .screen-foot { position: static; margin-top: 22px; }
}

@media (max-width: 560px) {
  .participant-top { gap: 10px; }
  .participant-user > span:not(.avatar) { max-width: 8em; font-size: 11px; }
  .participant-top .button-ghost { padding: 8px 10px; font-size: 11px; }
  .participant-top .button-ghost::before { content: none; }
  .progress-card { gap: 11px; padding: 16px; }
  .progress-percent { font-size: 20px; }
  .waiting-meta { display: grid; gap: 13px; }
  .screen-page { padding: 18px; overflow-y: auto; }
  .screen-main { min-height: calc(100vh - 100px); }
  .screen-pie { width: min(73vw, 300px); }
  .screen-pie-legend { padding: 14px; }
  .screen-pie-item { gap: 10px; }
  .screen-foot { position: static; margin-top: 22px; }
}
.option-choice input:focus-visible + label { outline: 3px solid rgba(79,143,135,.35); outline-offset: 2px; }
.check-field { align-items: flex-start; line-height: 1.4; }
.check-field input { flex: 0 0 auto; margin: 2px 0 0; }
.check-field span { min-width: 0; }
.person-check { align-items: flex-start; }
.person-check > input { flex: 0 0 auto; margin: 2px 0 0; }
.person-check-copy { min-width: 0; display: grid; gap: 3px; line-height: 1.25; }
.person-check-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-check > span { min-width: 0; display: grid; gap: 3px; line-height: 1.25; }
.person-check > span strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-check small { line-height: 1.2; }
.participant-main-empty { max-width: 860px; margin: 0 auto; }
.participant-main-current { width: min(100%, 940px); margin: 0 auto; }

/* Keep nested checkbox controls from inheriting the full-width text-input layout. */
.field > label { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.field input[type="checkbox"],
.field input[type="radio"] {
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  accent-color: var(--teal);
}
.field .check-field {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}
.field .check-field > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.field .person-check {
  width: 100%;
  min-width: 0;
  align-items: flex-start;
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
}
.field .person-check > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.participant-shell [data-set-pin] { display: none !important; }

/* Roster controls stay separated from the table text and remain usable on narrow screens. */
.roster-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 16px;
  padding: 12px 0 15px;
  border-bottom: 1px solid var(--line);
}
.roster-toolbar .check-field {
  margin: 0;
  white-space: nowrap;
}
.roster-toolbar .field-hint {
  white-space: nowrap;
}
.roster-toolbar .button {
  margin: 0;
}
.roster-toolbar > span[style*="flex:1"] {
  min-width: 18px;
}
.data-table td:last-child {
  min-width: 148px;
  text-align: right;
}
.data-table td:last-child .button {
  margin: 2px 0 2px 8px;
}
.data-table td:last-child .field-hint {
  display: inline-block;
  line-height: 1.45;
  white-space: normal;
}
@media (max-width: 720px) {
  .roster-toolbar {
    align-items: flex-start;
  }
  .roster-toolbar > span[style*="flex:1"] {
    display: none;
  }
  .roster-toolbar .button {
    flex: 1 1 auto;
  }
  .data-table td:last-child {
    min-width: 132px;
  }
}

/* Debate screen focus: the countdown is a control-room signal and the turnout
   pie is the primary visual instead of a secondary progress bar. */
.screen-countdown-panel {
  width: min(100%, 660px);
  margin: clamp(18px, 3vh, 32px) auto clamp(26px, 4vh, 44px);
  padding: 16px 26px 19px;
  border: 1px solid rgba(241, 176, 124, .42);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(241, 176, 124, .2), rgba(255, 255, 255, .055));
  box-shadow: 0 18px 56px rgba(0, 0, 0, .22), 0 0 0 5px rgba(241, 176, 124, .045);
  text-align: center;
}
.screen-countdown-panel > span {
  display: block;
  color: #f1b07c;
  font-size: clamp(13px, 1.35vw, 18px);
  font-weight: 800;
  letter-spacing: .12em;
}
.screen-countdown-value {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-family: var(--mono);
  font-size: clamp(52px, 8vw, 108px);
  font-weight: 900;
  letter-spacing: -.09em;
  line-height: .94;
  text-shadow: 0 4px 24px rgba(241, 176, 124, .35);
}
.screen-vote-focus {
  width: min(100%, 1020px);
  margin: 0 auto;
  text-align: center;
}
.screen-vote-focus .screen-kicker { justify-content: center; }
.screen-vote-focus .screen-title { margin-bottom: 0; }
.screen-vote-focus .screen-proposition {
  max-width: 820px;
  margin: 0 auto;
  font-size: clamp(18px, 2.4vw, 30px);
  line-height: 1.45;
}
.screen-vote-instruction { display: block; margin-bottom: 12px; color: #fff; font-size: clamp(18px, 1.8vw, 28px); line-height: 1.35; }
.screen-vote-context { display: block; color: #aebfca; font-size: .82em; line-height: 1.55; }
.screen-focus-panel {
  display: grid;
  place-items: center;
  margin: clamp(24px, 4vh, 46px) auto 0;
}
.screen-focus-pie {
  width: clamp(270px, 34vw, 470px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  position: relative;
  transform: rotate(-90deg);
  box-shadow: 0 26px 82px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 255, 255, .13), 0 0 0 9px rgba(255, 255, 255, .035);
}
.screen-focus-pie-hole {
  width: 66%;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 5px;
  border-radius: 50%;
  background: #13283a;
  text-align: center;
  transform: rotate(90deg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 28px rgba(0, 0, 0, .22);
}
.screen-focus-pie-hole span {
  color: #a9bbc4;
  font-size: clamp(12px, 1.4vw, 17px);
  font-weight: 700;
  letter-spacing: .1em;
}
.screen-focus-pie-hole strong {
  color: #fff;
  font-family: var(--mono);
  font-size: clamp(31px, 5vw, 68px);
  letter-spacing: -.09em;
  line-height: 1;
}
.screen-manual-control {
  width: min(100%, 620px);
  margin: clamp(22px, 4vh, 42px) auto 0;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  color: #c8d4da;
  background: rgba(255, 255, 255, .055);
  font-size: clamp(14px, 1.55vw, 20px);
  text-align: center;
}
.screen-live .screen-title,
.screen-vote-focus .screen-title { font-size: clamp(39px, 6vw, 76px); }
.screen-pie-layout {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(22px, 4vh, 38px);
}
.screen-pie-stage { min-height: 0; }
.screen-pie-legend { width: min(100%, 820px); grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 700px) {
  .screen-countdown-panel { padding: 14px 17px 17px; }
  .screen-countdown-value { font-size: clamp(48px, 15vw, 78px); }
  .screen-focus-pie { width: min(76vw, 340px); }
  .screen-pie-legend { grid-template-columns: 1fr; }
}

/* Final debate-screen composition: reserve the center for the clock and pie,
   and move explanatory copy into the surrounding columns. */
.debate-screen-page .screen-main {
  width: min(1440px, 100%);
  min-height: calc(100vh - 136px);
  place-content: stretch;
}
.debate-screen-stage,
.debate-screen-results {
  width: 100%;
  max-width: 1400px;
  margin: auto;
}
.screen-vote-focus {
  min-height: clamp(520px, calc(100vh - 170px), 780px);
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(330px, 1.25fr) minmax(210px, .72fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "kicker kicker kicker"
    "title pie countdown"
    "proposition status status";
  column-gap: clamp(24px, 4vw, 72px);
  row-gap: clamp(12px, 2vh, 22px);
  align-items: center;
  text-align: left;
}
.screen-vote-focus .screen-kicker { grid-area: kicker; justify-content: space-between; align-self: start; }
.screen-vote-focus .screen-title {
  grid-area: title;
  align-self: end;
  max-width: 100%;
  margin: 0;
  font-size: clamp(32px, 4.1vw, 62px);
  line-height: 1.12;
}
.screen-vote-focus .screen-proposition {
  grid-area: proposition;
  max-width: 100%;
  margin: 0;
  align-self: start;
  font-size: clamp(15px, 1.45vw, 22px);
  line-height: 1.58;
}
.screen-vote-focus .screen-vote-instruction { font-size: clamp(18px, 1.65vw, 27px); }
.screen-vote-focus .screen-countdown-panel {
  grid-area: countdown;
  width: 100%;
  max-width: none;
  margin: 0;
  align-self: center;
}
.screen-vote-focus .screen-focus-panel {
  grid-area: pie;
  width: 100%;
  margin: 0;
  align-self: center;
}
.screen-vote-focus .screen-focus-pie { width: min(100%, min(36vw, 48vh)); }
.screen-vote-focus .screen-status {
  grid-area: status;
  margin: 0;
  align-self: start;
  line-height: 1.6;
}
.screen-vote-focus .screen-kicker span { max-width: 100%; line-height: 1.5; }
.screen-countdown-value { font-size: clamp(48px, 6.2vw, 88px); }

.debate-screen-live {
  min-height: clamp(500px, calc(100vh - 170px), 720px);
  display: grid;
  grid-template-columns: minmax(220px, .78fr) minmax(330px, 1.2fr) minmax(220px, .78fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "kicker kicker kicker"
    "title countdown proposition"
    "description description status";
  gap: clamp(18px, 3vw, 48px);
  align-items: center;
  text-align: left;
}
.debate-screen-live .screen-kicker { grid-area: kicker; justify-content: space-between; align-self: start; }
.debate-screen-live .screen-title { grid-area: title; margin: 0; font-size: clamp(31px, 4vw, 60px); line-height: 1.14; }
.debate-screen-live .screen-countdown-panel { grid-area: countdown; width: 100%; max-width: none; margin: 0; }
.debate-screen-live .screen-proposition { grid-area: proposition; margin: 0; font-size: clamp(16px, 1.55vw, 24px); line-height: 1.6; }
.debate-screen-live .screen-stage-description { grid-area: description; width: 100%; max-width: none; margin: 0; padding: 17px 20px; font-size: clamp(15px, 1.35vw, 20px); line-height: 1.55; }
.debate-screen-live .screen-status { grid-area: status; margin: 0; line-height: 1.6; }

.debate-screen-waiting {
  min-height: clamp(480px, calc(100vh - 170px), 700px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
}
.debate-screen-waiting .screen-kicker { justify-content: center; }
.debate-screen-waiting .screen-title { max-width: 980px; margin: 0; font-size: clamp(38px, 5.8vw, 76px); line-height: 1.1; }
.debate-screen-waiting p { max-width: 820px; margin: 0; font-size: clamp(16px, 1.7vw, 25px); line-height: 1.7; }
.debate-screen-waiting .screen-status { margin-top: 16px; line-height: 1.6; }

.debate-screen-results {
  min-height: clamp(520px, calc(100vh - 170px), 780px);
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(350px, 1.3fr) minmax(250px, .9fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "kicker kicker kicker"
    "title pie legend"
    "winner status status";
  column-gap: clamp(24px, 4vw, 70px);
  row-gap: clamp(16px, 2.5vh, 28px);
  align-items: center;
  text-align: left;
}
.debate-screen-results > div:first-child { grid-area: kicker; }
.debate-screen-results > .screen-title {
  grid-area: title;
  max-width: 100%;
  margin: 0;
  align-self: center;
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1.14;
}
.debate-screen-results .screen-result-winner {
  grid-area: winner;
  display: grid;
  gap: 7px;
  margin: 0;
  color: #ffd1b3;
  line-height: 1.35;
}
.screen-result-winner span { color: #91a7b4; font-size: clamp(12px, 1.2vw, 16px); letter-spacing: .12em; }
.screen-result-winner strong { color: #fff; font-size: clamp(22px, 2.2vw, 34px); overflow-wrap: anywhere; }
.screen-result-winner small { color: #f1b07c; font-size: clamp(14px, 1.35vw, 19px); line-height: 1.5; }
.debate-screen-results .screen-pie-layout { grid-area: pie; display: contents; }
.debate-screen-results .screen-pie-stage { grid-area: pie; min-height: 0; align-self: center; }
.debate-screen-results .screen-pie {
  width: min(100%, min(34vw, 50vh));
  max-width: 470px;
}
.debate-screen-results .screen-pie-legend {
  grid-area: legend;
  width: 100%;
  grid-template-columns: 1fr;
  align-self: center;
}
.debate-screen-results > .screen-status { grid-area: status; margin: 0; line-height: 1.6; }

@media (max-width: 980px), (max-height: 700px) {
  .screen-vote-focus {
    min-height: 0;
    grid-template-columns: minmax(210px, .85fr) minmax(290px, 1.15fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "kicker kicker"
      "title pie"
      "proposition countdown"
      "status status";
  }
  .screen-vote-focus .screen-focus-pie { width: min(100%, min(39vw, 42vh)); }
  .debate-screen-live {
    min-height: 0;
    grid-template-columns: minmax(220px, .85fr) minmax(290px, 1.15fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "kicker kicker"
      "title countdown"
      "proposition proposition"
      "description status";
  }
  .debate-screen-results {
    min-height: 0;
    grid-template-columns: minmax(180px, .7fr) minmax(300px, 1.3fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "kicker kicker"
      "title pie"
      "winner legend"
      "status status";
  }
  .debate-screen-results .screen-pie { width: min(100%, 42vh); }
}

@media (max-width: 700px) {
  .debate-screen-page .screen-main { min-height: 0; place-content: start; }
  .screen-vote-focus,
  .debate-screen-live,
  .debate-screen-results {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .screen-vote-focus .screen-kicker,
  .debate-screen-live .screen-kicker,
  .debate-screen-results > div:first-child { width: 100%; justify-content: center; }
  .screen-vote-focus .screen-countdown-panel,
  .debate-screen-live .screen-countdown-panel { order: 1; }
  .screen-vote-focus .screen-focus-panel { order: 2; }
  .screen-vote-focus .screen-title,
  .debate-screen-live .screen-title,
  .debate-screen-results > .screen-title { order: 3; font-size: clamp(29px, 8vw, 45px); }
  .screen-vote-focus .screen-proposition,
  .debate-screen-live .screen-proposition { order: 4; font-size: 16px; }
  .screen-vote-focus .screen-status,
  .debate-screen-live .screen-status,
  .debate-screen-results > .screen-status { order: 6; }
  .debate-screen-live .screen-stage-description { order: 5; }
  .debate-screen-results .screen-result-winner { order: 4; width: 100%; justify-items: center; }
  .debate-screen-results .screen-pie-layout { order: 2; display: contents; }
  .debate-screen-results .screen-pie-stage { order: 2; }
  .debate-screen-results .screen-pie-legend { order: 5; }
  .screen-vote-focus .screen-focus-pie,
  .debate-screen-results .screen-pie { width: min(78vw, 340px); }
}

/* Final debate-screen typography: non-chart stages are centered and breathe. */
.debate-screen-page .screen-title {
  letter-spacing: -.018em;
  line-height: 1.18;
}
.debate-screen-page .screen-kicker {
  letter-spacing: .075em;
  line-height: 1.65;
}
.debate-screen-page .screen-proposition,
.debate-screen-page .screen-stage-description,
.debate-screen-page .screen-status {
  letter-spacing: .01em;
}

@media (min-width: 981px) {
  .debate-screen-live {
    min-height: clamp(500px, calc(100vh - 170px), 720px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas:
      "kicker"
      "countdown"
      "title"
      "proposition"
      "description"
      "status";
    gap: clamp(12px, 2.2vh, 24px);
    text-align: center;
    justify-items: center;
  }
  .debate-screen-live .screen-kicker {
    width: 100%;
    justify-content: center;
  }
  .debate-screen-live .screen-countdown-panel {
    width: min(100%, 620px);
  }
  .debate-screen-live .screen-title {
    max-width: 920px;
    font-size: clamp(32px, 4.6vw, 58px);
    line-height: 1.2;
  }
  .debate-screen-live .screen-proposition {
    max-width: 920px;
    font-size: clamp(16px, 1.45vw, 21px);
    line-height: 1.75;
  }
  .debate-screen-live .screen-stage-description {
    max-width: 850px;
    font-size: clamp(15px, 1.3vw, 19px);
    line-height: 1.75;
  }
  .debate-screen-live .screen-status {
    width: 100%;
    margin-top: 0;
    text-align: center;
  }
  .debate-screen-waiting .screen-title {
    font-size: clamp(34px, 5.1vw, 64px);
  }
  .debate-screen-waiting p {
    max-width: 760px;
    letter-spacing: .01em;
  }
}

/* Keep all large-screen copy optically centered. The chart/countdown can
   occupy the surrounding grid, but headings and explanatory text should not
   inherit the left-aligned default from the legacy screen layout. */
.screen-vote-focus,
.debate-screen-results {
  text-align: center;
  justify-items: center;
}
.screen-vote-focus .screen-kicker,
.debate-screen-results > div:first-child {
  justify-content: center;
  width: 100%;
}
.screen-vote-focus .screen-title,
.screen-vote-focus .screen-proposition,
.screen-vote-focus .screen-status,
.debate-screen-results > .screen-title,
.debate-screen-results > .screen-status {
  text-align: center;
}
.debate-screen-results .screen-result-winner {
  justify-items: center;
  text-align: center;
}
.debate-screen-results .screen-pie-legend {
  text-align: left;
}

/* Wide public screens use a centered stage composition. The previous grid
   placed the title in the left column, which made the whole screen look
   shifted even when the text itself was center-aligned inside that column. */
@media (min-width: 981px) and (min-height: 701px) {
  .screen-vote-focus {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas:
      "kicker"
      "countdown"
      "pie"
      "title"
      "proposition"
      "status";
    align-content: center;
    justify-items: center;
    gap: clamp(10px, 1.6vh, 18px);
    text-align: center;
  }
  .screen-vote-focus .screen-kicker,
  .screen-vote-focus .screen-countdown-panel,
  .screen-vote-focus .screen-focus-panel,
  .screen-vote-focus .screen-title,
  .screen-vote-focus .screen-proposition,
  .screen-vote-focus .screen-status {
    width: 100%;
  }
  .screen-vote-focus .screen-kicker { justify-content: center; }
  .screen-vote-focus .screen-countdown-panel {
    max-width: 620px;
  }
  .screen-vote-focus .screen-focus-panel {
    max-width: 520px;
  }
  .screen-vote-focus .screen-focus-pie {
    width: min(100%, min(38vw, 36vh));
  }
  .screen-vote-focus .screen-title,
  .screen-vote-focus .screen-proposition,
  .screen-vote-focus .screen-status {
    max-width: 1080px;
    text-align: center;
  }

  .debate-screen-results {
    grid-template-columns: minmax(220px, .82fr) minmax(360px, 1.28fr) minmax(220px, .82fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "kicker kicker kicker"
      "title title title"
      "winner pie legend"
      "status status status";
    align-content: center;
    justify-items: center;
    text-align: center;
  }
  .debate-screen-results > .screen-title,
  .debate-screen-results > .screen-status {
    width: 100%;
    max-width: 1080px;
    text-align: center;
  }
  .debate-screen-results .screen-result-winner {
    width: 100%;
    justify-items: center;
    text-align: center;
  }
  .debate-screen-results .screen-pie-stage {
    width: 100%;
  }
  .debate-screen-results .screen-pie-legend {
    width: 100%;
    text-align: left;
  }
}

/* The waiting state is a full-width stage. A fixed child width without an
   explicit auto margin made the title begin at the left edge of the screen
   grid on wide displays. */
.debate-screen-waiting {
  width: min(100%, 1080px);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "kicker" "title" "body" "status";
  justify-items: center;
  align-content: center;
  text-align: center;
}
.debate-screen-waiting .screen-kicker { grid-area: kicker; width: 100%; justify-content: center; }
.debate-screen-waiting .screen-title { grid-area: title; width: 100%; max-width: 1080px; text-align: center; }
.debate-screen-waiting > p { grid-area: body; width: 100%; max-width: 820px; text-align: center; }
.debate-screen-waiting .screen-status { grid-area: status; width: 100%; max-width: 1080px; text-align: center; }

.debate-screen-comparison {
  width: 100%;
  max-width: 1400px;
  min-height: clamp(560px, calc(100vh - 170px), 820px);
  margin: auto;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  align-content: center;
  justify-items: center;
  gap: clamp(11px, 1.7vh, 20px);
  text-align: center;
}
.screen-comparison-kicker { width: 100%; }
.screen-comparison-kicker .screen-kicker { justify-content: center; }
.debate-screen-comparison .screen-title { width: 100%; max-width: 1100px; margin: 0; font-size: clamp(31px, 4.5vw, 62px); line-height: 1.15; }
.screen-comparison-rule { margin: 0; color: #b5c6cf; font-size: clamp(14px, 1.4vw, 19px); letter-spacing: .04em; }
.screen-comparison-panels { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.8vw, 42px); align-items: stretch; }
.screen-comparison-card { min-width: 0; padding: clamp(16px, 2vw, 25px); border: 1px solid rgba(255,255,255,.13); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.035)); box-shadow: 0 18px 54px rgba(0,0,0,.17); }
.screen-comparison-card-head { display: grid; gap: 3px; text-align: left; }
.screen-comparison-card-head span { color: #91a7b4; font-size: 11px; letter-spacing: .12em; }
.screen-comparison-card-head h2 { margin: 0; color: #fff; font-size: clamp(20px, 2.2vw, 32px); letter-spacing: -.04em; }
.screen-comparison-card-body { display: grid; grid-template-columns: minmax(170px, .9fr) minmax(180px, 1.1fr); gap: clamp(14px, 2vw, 28px); align-items: center; margin-top: 10px; }
.screen-comparison-card .screen-pie-stage { min-height: 0; }
.screen-comparison-card .screen-pie { width: min(100%, min(21vw, 31vh)); max-width: 330px; margin: auto; }
.screen-comparison-card .screen-pie-legend { width: 100%; grid-template-columns: 1fr; text-align: left; }
.screen-comparison-summary { display: grid; gap: 3px; min-width: min(100%, 620px); padding: 12px 28px; border: 1px solid rgba(241,176,124,.45); border-radius: 16px; background: rgba(241,176,124,.11); }
.screen-comparison-summary span { color: #f1b07c; font-size: 12px; letter-spacing: .12em; }
.screen-comparison-summary strong { color: #fff; font-size: clamp(25px, 3vw, 43px); line-height: 1.15; }
.screen-comparison-summary small { color: #d4e0e5; font-size: clamp(13px, 1.3vw, 17px); line-height: 1.5; }
.debate-screen-comparison > .screen-status { margin: 0; }

@media (max-width: 980px), (max-height: 700px) {
  .debate-screen-waiting { min-height: 0; }
  .debate-screen-comparison { min-height: 0; }
  .screen-comparison-panels { grid-template-columns: 1fr; }
  .screen-comparison-card .screen-pie { width: min(31vw, 260px); }
}

@media (max-width: 700px) {
  .debate-screen-waiting { min-height: 0; }
  .debate-screen-comparison { display: flex; flex-direction: column; min-height: 0; gap: 16px; }
  .screen-comparison-panels { display: flex; flex-direction: column; gap: 14px; }
  .screen-comparison-card-body { grid-template-columns: minmax(120px, .82fr) minmax(150px, 1.18fr); gap: 11px; }
  .screen-comparison-card .screen-pie { width: min(39vw, 220px); }
  .screen-comparison-card .screen-pie-legend { padding: 12px; }
  .screen-comparison-summary { width: 100%; min-width: 0; padding: 12px 16px; }
}

/* Debate vote context and chess-clock controls. The blind vote keeps the
   proposition and both sides' wording visible while the turnout pie remains
   the only live aggregate shown to the room. */
.screen-debate-viewpoints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 1080px;
}
.screen-debate-viewpoint {
  min-width: 0;
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  text-align: left;
}
.screen-debate-viewpoint span { display: block; color: #9db0ba; font-size: 12px; letter-spacing: .08em; }
.screen-debate-viewpoint strong { display: block; margin-top: 6px; color: #fff; font-size: clamp(17px, 1.55vw, 24px); line-height: 1.35; }
.screen-debate-viewpoint.is-pro { border-color: rgba(241,176,124,.38); }
.screen-debate-viewpoint.is-pro span { color: #f1b07c; }
.screen-debate-viewpoint.is-con { border-color: rgba(101,201,186,.38); }
.screen-debate-viewpoint.is-con span { color: #7dd5c8; }
.debate-screen-waiting .screen-waiting-topic { margin: 28px auto 10px; color: #fff; font-size: clamp(22px, 3vw, 42px); line-height: 1.2; }
.debate-screen-waiting .screen-waiting-proposition { max-width: 980px; margin: 0 auto; color: #cad6dc; font-size: clamp(15px, 1.45vw, 22px); line-height: 1.6; }
.debate-screen-waiting .screen-debate-viewpoints { margin: 26px auto 0; }

.debate-chess-clock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}
.debate-clock-side {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  padding: 18px 14px 15px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: rgba(255,255,255,.055);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.debate-clock-side.is-active {
  border-color: rgba(241,176,124,.82);
  background: linear-gradient(145deg, rgba(241,176,124,.24), rgba(255,255,255,.07));
  box-shadow: 0 0 0 4px rgba(241,176,124,.08), 0 18px 50px rgba(0,0,0,.2);
}
.debate-clock-side-label { color: #b5c7cf; font-size: 13px; letter-spacing: .08em; }
.debate-clock-side strong { margin: 9px 0 5px; color: #fff; font-family: var(--mono); font-size: clamp(46px, 7vw, 100px); line-height: .94; letter-spacing: -.1em; text-shadow: 0 5px 24px rgba(0,0,0,.25); }
.debate-clock-side small { color: #8199a6; font-size: 11px; }
.debate-clock-divider { align-self: center; color: #6e8794; font-family: var(--mono); font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.debate-clock-active { grid-column: 1 / -1; color: #f1b07c; font-size: 14px; letter-spacing: .1em; text-align: center; }
.debate-chess-clock-screen { max-width: 960px; margin: 0 auto; }
.debate-chess-clock-screen .debate-clock-side { min-height: clamp(210px, 31vh, 360px); }
.debate-chess-clock-screen .debate-clock-side strong { font-size: clamp(65px, 9vw, 132px); }
.debate-chess-live {
  width: min(100%, 1280px);
  min-height: clamp(520px, calc(100vh - 170px), 760px);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(430px, 1.45fr) minmax(0, .82fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "kicker kicker kicker" "context clock clock" "status status status";
  align-items: center;
  gap: clamp(18px, 3vh, 32px);
  text-align: center;
}
.debate-chess-live .screen-kicker { grid-area: kicker; justify-content: center; }
.debate-chess-context { grid-area: context; align-self: center; text-align: left; }
.debate-chess-context .screen-title { margin: 0 0 18px; font-size: clamp(30px, 4.1vw, 61px); }
.debate-chess-context .screen-proposition { margin: 0; color: #cad6dc; font-size: clamp(16px, 1.45vw, 22px); line-height: 1.65; }
.debate-chess-context .screen-stage-description { margin-top: 18px; padding: 14px 16px; border-left: 2px solid rgba(241,176,124,.65); color: #91a7b4; font-size: 13px; line-height: 1.6; }
.debate-chess-live > .debate-chess-clock { grid-area: clock; }
.debate-chess-live > .screen-status { grid-area: status; margin: 0; text-align: center; }

.debate-timing-control { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--ink-soft); font-size: 11px; }
.debate-timing-control select { min-width: 190px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; color: var(--ink); background: #fbfcfc; font-size: 11px; }
.debate-clock-console { padding: clamp(20px, 3vw, 34px); }
.debate-clock-console-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.debate-clock-console-head h2 { margin: 0; font-size: clamp(23px, 3vw, 34px); letter-spacing: -.05em; }
.debate-clock-console-head p { max-width: 680px; margin: 7px 0 0; color: var(--ink-soft); line-height: 1.6; }
.debate-clock-console-status { flex: 0 0 auto; padding: 9px 12px; border-radius: 9px; color: var(--orange-dark); background: #fff2e7; font-size: 12px; font-weight: 800; }
.debate-clock-console .debate-chess-clock { margin: 30px auto 0; max-width: 980px; }
.debate-clock-console .debate-clock-side { min-height: 180px; border-color: var(--line); background: #f6f9f9; }
.debate-clock-console .debate-clock-side.is-active { border-color: var(--orange); background: #fff6ee; box-shadow: 0 0 0 3px rgba(218,137,82,.1); }
.debate-clock-console .debate-clock-side-label { color: var(--ink-soft); }
.debate-clock-console .debate-clock-side strong { color: var(--ink); font-size: clamp(48px, 7vw, 86px); }
.debate-clock-console .debate-clock-side small { color: var(--ink-faint); }
.debate-clock-console .debate-clock-divider { color: var(--ink-faint); }
.debate-clock-console .debate-clock-active { color: var(--orange-dark); }
.debate-clock-buttons { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.debate-clock-shortcut { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; margin-top: 17px; color: var(--ink-faint); font-size: 11px; }
.debate-clock-shortcut kbd { padding: 4px 8px; border: 1px solid #cbd6d8; border-bottom-width: 2px; border-radius: 6px; color: var(--ink); background: #f4f7f7; font-family: var(--mono); font-size: 11px; }

@media (min-width: 981px) and (min-height: 701px) {
  .screen-blind-vote { grid-template-rows: auto auto auto auto auto auto auto; grid-template-areas: "kicker" "countdown" "title" "proposition" "viewpoints" "pie" "status"; }
  .screen-blind-vote .screen-debate-viewpoints { grid-area: viewpoints; }
}
@media (max-width: 980px), (max-height: 700px) {
  .screen-debate-viewpoints { grid-column: 1 / -1; }
  .debate-chess-live { min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "kicker" "context" "clock" "status"; }
  .debate-chess-context { text-align: center; }
  .debate-chess-context .screen-stage-description { border-left: 0; border-top: 1px solid rgba(241,176,124,.45); }
}
@media (max-width: 700px) {
  .screen-debate-viewpoints { display: flex; flex-direction: column; }
  .debate-chess-clock { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; }
  .debate-clock-divider { display: none; }
  .debate-clock-active { grid-column: auto; }
  .debate-chess-live { display: flex; min-height: 0; gap: 16px; }
  .debate-clock-console-head { display: grid; }
  .debate-clock-console-status { justify-self: start; }
  .debate-clock-buttons { flex-direction: column; }
}

/* Final readability tuning: keep stage copy compact and avoid arbitrary word
   breaks that leave a single Chinese character on a separate line. */
.participant-main h1,
.round-hero h2,
.waiting-card h2,
.screen-title,
.screen-waiting-topic {
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}
.participant-main h1 {
  font-size: clamp(26px, 3.1vw, 38px);
  line-height: 1.2;
  letter-spacing: -.035em;
}
.participant-main > .intro,
.round-hero p,
.waiting-card p,
.vote-card-head p,
.screen-proposition,
.screen-waiting-proposition,
.screen-status,
.screen-stage-description {
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}
.participant-main > .intro,
.round-hero p,
.waiting-card p,
.vote-card-head p { line-height: 1.65; }
.option-copy strong,
.option-copy small,
.screen-debate-viewpoint strong,
.screen-pie-item-copy strong,
.screen-result-winner strong {
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}
.round-hero h2 {
  font-size: clamp(23px, 2.7vw, 34px);
  line-height: 1.22;
  letter-spacing: -.04em;
}
.waiting-card h2 {
  font-size: clamp(22px, 2.45vw, 30px);
  line-height: 1.25;
  letter-spacing: -.04em;
}
.screen-title {
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.16;
  letter-spacing: -.035em;
}
.screen-proposition {
  max-width: 1100px;
  font-size: clamp(15px, 1.45vw, 21px);
  line-height: 1.58;
}
.screen-vote-focus .screen-title {
  max-width: 1100px;
  font-size: clamp(29px, 3.45vw, 52px);
  line-height: 1.18;
}
.screen-vote-focus .screen-proposition {
  max-width: 1100px;
  font-size: clamp(14px, 1.25vw, 19px);
  line-height: 1.58;
}
.debate-screen-live .screen-title {
  font-size: clamp(29px, 3.5vw, 52px);
  line-height: 1.18;
}
.debate-screen-live .screen-proposition {
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.6;
}
.debate-screen-live .screen-stage-description {
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.6;
}
.debate-screen-waiting .screen-title {
  font-size: clamp(31px, 4.45vw, 58px);
  line-height: 1.18;
}
.debate-screen-waiting p {
  max-width: 1000px;
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.62;
}
.debate-screen-comparison .screen-title {
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.18;
}
.debate-chess-context .screen-title {
  font-size: clamp(28px, 3.25vw, 48px);
  line-height: 1.2;
}

@media (max-width: 980px) {
  .participant-main h1 { font-size: clamp(26px, 6.2vw, 36px); }
  .round-hero h2 { font-size: clamp(23px, 5vw, 32px); }
  .screen-title,
  .screen-vote-focus .screen-title,
  .debate-screen-live .screen-title,
  .debate-screen-waiting .screen-title { font-size: clamp(28px, 7vw, 48px); }
}

@media (max-width: 700px) {
  .participant-main h1 { font-size: clamp(24px, 8vw, 32px); }
  .round-hero h2 { font-size: clamp(21px, 7vw, 29px); }
  .screen-title,
  .screen-vote-focus .screen-title,
  .debate-screen-live .screen-title,
  .debate-screen-waiting .screen-title {
    font-size: clamp(25px, 8.5vw, 39px);
    letter-spacing: -.025em;
  }
  .screen-proposition,
  .screen-vote-focus .screen-proposition,
  .debate-screen-live .screen-proposition { font-size: 15px; line-height: 1.58; }
}

/* MVP 评选：参与者端强调“八选一”，大屏同时保留八位候选辩手的完整信息。 */
.debate-vote-intro {
  margin-top: 11px;
  padding: 10px 12px;
  border-left: 3px solid var(--orange);
  border-radius: 8px;
  color: var(--ink-soft);
  background: #fff8f2;
  font-size: 12px;
  line-height: 1.7;
}
.screen-mvp-candidates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  width: min(100%, 1080px);
  margin: 0 auto;
}
.screen-mvp-candidate {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  text-align: left;
}
.screen-mvp-candidate strong,
.screen-mvp-candidate small { display: block; overflow-wrap: anywhere; }
.screen-mvp-candidate strong { margin-top: 4px; color: #fff; font-size: clamp(14px, 1.15vw, 19px); line-height: 1.35; }
.screen-mvp-candidate small { margin-top: 3px; color: #9fb2bd; font-size: 11px; line-height: 1.4; }
.screen-mvp-code { color: var(--option-color, #f1b07c); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; }
.screen-mvp-vote .screen-mvp-candidates { grid-area: candidates; }
.screen-mvp-vote .screen-proposition { margin-bottom: 0; }
.screen-pie-item-copy small { flex-basis: 100%; color: #91a7b4; font-size: 12px; line-height: 1.4; }

@media (min-width: 981px) and (min-height: 701px) {
  .screen-mvp-vote {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto auto;
    grid-template-areas: "kicker" "countdown" "title" "proposition" "candidates" "pie" "status";
  }
  .screen-mvp-vote .screen-mvp-candidates { width: min(100%, 1080px); }
}

@media (max-width: 700px) {
  .screen-mvp-candidates { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .screen-mvp-candidate { padding: 9px; }
  .screen-mvp-vote .screen-mvp-candidates { order: 5; }
}

@media (min-width: 701px) and (max-width: 980px) {
  .screen-mvp-vote {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto auto;
    grid-template-areas: "kicker" "countdown" "title" "proposition" "candidates" "pie" "status";
  }
}

/* Final display readability pass: keep numerals and Chinese copy from
   visually colliding, especially on the MVP control-room screen. */
.debate-screen-page .screen-countdown-value,
.debate-clock-side strong,
.participant-shell .countdown,
.participant-shell .debate-countdown {
  letter-spacing: .055em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.debate-screen-page .screen-focus-pie-hole strong,
.debate-screen-page .screen-pie-hole strong,
.debate-screen-page .screen-time {
  letter-spacing: .025em;
  font-variant-numeric: tabular-nums;
}
.debate-screen-page .screen-title,
.debate-screen-page .screen-waiting-topic,
.debate-screen-page .screen-comparison-card-head h2,
.debate-screen-page .screen-result-winner strong {
  letter-spacing: .01em;
}
.debate-screen-page .screen-proposition,
.debate-screen-page .screen-stage-description,
.debate-screen-page .screen-status,
.debate-screen-page .screen-comparison-rule,
.debate-screen-page .screen-comparison-summary small,
.participant-shell .participant-main h1,
.participant-shell .round-hero h2,
.participant-shell .waiting-card h2,
.participant-shell .vote-card-head h3 {
  letter-spacing: .012em;
}

/* On a wide display the MVP page needs a horizontal composition. Keeping the
   eight candidates beside the clock prevents the lower cards from entering
   the pie/status area when the projector is only 768px high. */
@media (min-width: 981px) and (min-height: 701px) {
  .screen-vote-focus.screen-mvp-vote {
    width: min(100%, 1280px);
    min-height: clamp(520px, calc(100vh - 170px), 760px);
    grid-template-columns: minmax(0, 1fr) minmax(260px, .42fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "kicker kicker"
      "title countdown"
      "proposition pie"
      "candidates pie"
      "status status";
    column-gap: clamp(28px, 4vw, 64px);
    row-gap: clamp(10px, 1.5vh, 18px);
    align-content: center;
  }
  .screen-mvp-vote .screen-title,
  .screen-mvp-vote .screen-proposition {
    width: 100%;
    text-align: left;
  }
  .screen-mvp-vote .screen-title {
    align-self: end;
    margin: 0;
    font-size: clamp(31px, 3.6vw, 54px);
    line-height: 1.2;
  }
  .screen-mvp-vote .screen-proposition {
    align-self: start;
    margin: 0;
    max-width: none;
    font-size: clamp(15px, 1.25vw, 19px);
    line-height: 1.7;
  }
  .screen-mvp-vote .screen-countdown-panel {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 13px 18px 16px;
    align-self: center;
  }
  .screen-mvp-vote .screen-countdown-value {
    font-size: clamp(48px, 5.2vw, 76px);
  }
  .screen-mvp-vote .screen-mvp-candidates {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    align-self: start;
  }
  .screen-mvp-vote .screen-mvp-candidate {
    min-height: 82px;
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .screen-mvp-vote .screen-mvp-candidate strong {
    margin-top: 6px;
    font-size: clamp(14px, 1.05vw, 18px);
    line-height: 1.5;
    letter-spacing: .012em;
  }
  .screen-mvp-vote .screen-mvp-candidate small {
    margin-top: 4px;
    line-height: 1.5;
    letter-spacing: .01em;
  }
  .screen-mvp-vote .screen-focus-panel {
    width: 100%;
    max-width: 340px;
    margin: 0;
    align-self: center;
  }
  .screen-mvp-vote .screen-focus-pie {
    width: min(100%, min(28vw, 34vh));
  }
  .screen-mvp-vote .screen-status {
    width: 100%;
    text-align: center;
    line-height: 1.7;
  }
}

@media (min-width: 701px) and (max-width: 980px) {
  .screen-vote-focus.screen-mvp-vote {
    min-height: 0;
    height: auto;
    align-content: start;
    row-gap: 15px;
  }
  .screen-mvp-vote .screen-mvp-candidates {
    gap: 11px;
  }
  .screen-mvp-vote .screen-mvp-candidate {
    min-height: 78px;
  }
}

.screen-mvp-candidate strong,
.screen-mvp-candidate small {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}

/* Apply the same breathing room to the control-room and participant copy,
   whose older headings used tight negative tracking. */
.main-area .topbar h1,
.main-area .card-title h2,
.main-area .card-title h3,
.main-area .admin-event-title h2,
.main-area .round-admin-card h3,
.main-area .debate-topic-card h2,
.main-area .debate-waiting-card h2,
.main-area .debate-live-head h2 {
  letter-spacing: .01em;
}
.main-area .stat-value,
.participant-shell .progress-copy strong,
.participant-shell .result-stat strong,
.debate-screen-page .screen-progress-label strong {
  letter-spacing: .035em;
  font-variant-numeric: tabular-nums;
}

/* Latest public-screen pass: keep stage copy legible, favor a single line for
   short Chinese labels, and make the two-sided vote ratio explicit inside the
   result pie instead of leaving it only in the legend. */
.debate-screen-page .screen-kicker > span {
  white-space: nowrap;
}
.debate-screen-page .screen-title,
.debate-screen-page .screen-proposition,
.debate-screen-page .screen-stage-description,
.debate-screen-page .screen-status,
.debate-screen-page .screen-waiting-topic,
.debate-screen-page .screen-waiting-proposition,
.debate-screen-page .screen-comparison-rule,
.debate-screen-page .screen-comparison-summary small {
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}
.debate-screen-page .screen-result-winner small {
  display: block;
  margin-top: 5px;
  color: #f1b07c;
  font-size: clamp(14px, 1.35vw, 20px);
  line-height: 1.75;
  letter-spacing: .07em;
  word-spacing: .12em;
  white-space: nowrap;
}
.screen-pie-hole-binary span {
  letter-spacing: .1em;
  white-space: nowrap;
}
.screen-pie-hole-binary strong {
  font-size: clamp(13px, 1.55vw, 23px);
  letter-spacing: .045em;
  line-height: 1.3;
  white-space: nowrap;
}
.screen-pie-hole-binary small {
  color: #91a7b4;
  font-size: clamp(10px, 1vw, 14px);
  line-height: 1.4;
  letter-spacing: .08em;
  white-space: nowrap;
}
.screen-single-viewpoint {
  grid-area: proposition;
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: clamp(18px, 2.6vw, 32px) clamp(22px, 3.4vw, 48px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  background: rgba(255, 255, 255, .055);
  text-align: center;
}
.screen-single-viewpoint span {
  display: block;
  color: #f1b07c;
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 800;
  letter-spacing: .12em;
}
.screen-single-viewpoint strong {
  display: block;
  margin-top: 10px;
  color: #fff;
  font-size: clamp(22px, 2.55vw, 40px);
  line-height: 1.35;
  letter-spacing: .02em;
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}
.screen-single-viewpoint.is-con {
  border-color: rgba(101, 201, 186, .42);
}
.screen-single-viewpoint.is-con span { color: #7dd5c8; }
.debate-screen-live .screen-single-viewpoint { align-self: center; }
.screen-waiting-body {
  width: min(100%, 1120px);
  display: grid;
  justify-items: center;
  gap: 8px;
}
.debate-screen-waiting .screen-waiting-body > p {
  max-width: 980px;
  margin: 0;
}
.screen-waiting-topic-block {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 4px;
}
.debate-screen-waiting .screen-waiting-topic-block .screen-waiting-topic {
  margin: 16px auto 4px;
  max-width: 1120px;
}
.debate-screen-waiting .screen-waiting-topic-block .screen-waiting-proposition {
  max-width: 1080px;
  margin: 0 auto;
}
.debate-screen-waiting .screen-waiting-topic-block .screen-debate-viewpoints {
  margin-top: 18px;
}

@media (min-width: 981px) {
  .debate-screen-live .screen-title { max-width: 1180px; }
  .debate-screen-live .screen-proposition,
  .debate-screen-live .screen-single-viewpoint { max-width: 1120px; }
  .debate-screen-live .screen-stage-description { max-width: 1060px; }
  .debate-screen-waiting .screen-title,
  .debate-screen-waiting .screen-waiting-topic { max-width: 1180px; }
  .debate-screen-results > .screen-title { max-width: 1240px; }
}

@media (max-width: 700px) {
  .debate-screen-page .screen-kicker > span { white-space: normal; }
  .debate-screen-page .screen-result-winner small {
    white-space: normal;
    word-spacing: normal;
  }
  .screen-single-viewpoint {
    width: 100%;
    padding: 17px 18px;
  }
  .debate-screen-live .screen-single-viewpoint { order: 4; }
  .screen-waiting-body { width: 100%; }
  .screen-pie-hole-binary strong { font-size: clamp(12px, 4.2vw, 18px); }
}

/* Large-screen composition pass: long debate copy is presented as short,
   readable information blocks while the countdown and charts keep visual
   priority. Keep this block at the end so every screen state shares one
   coherent layout instead of inheriting the older voting-only grid rules. */
.debate-screen-page {
  --screen-panel: rgba(255, 255, 255, .055);
  --screen-panel-strong: rgba(255, 255, 255, .09);
  --screen-panel-line: rgba(255, 255, 255, .15);
  --screen-copy: #d7e2e7;
  --screen-muted: #9eb1bc;
  background:
    radial-gradient(circle at 50% 42%, rgba(67, 127, 145, .13), transparent 34%),
    radial-gradient(circle at 9% 92%, rgba(79, 143, 135, .1), transparent 27%),
    #0d1b2a;
}
.debate-screen-page .screen-main {
  width: min(100%, 1480px);
  min-height: calc(100vh - 136px);
}
.debate-screen-page .screen-kicker {
  color: #a8bac3;
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: .085em;
  line-height: 1.55;
}
.debate-screen-page .screen-kicker > span {
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
}
.debate-screen-page .screen-title,
.debate-screen-page .screen-proposition,
.debate-screen-page .screen-stage-description,
.debate-screen-page .screen-status,
.debate-screen-page .screen-waiting-topic,
.debate-screen-page .screen-waiting-proposition,
.debate-screen-page .screen-comparison-rule,
.debate-screen-page .screen-comparison-summary small,
.debate-screen-page .screen-result-winner strong,
.debate-screen-page .screen-result-winner small {
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}
.debate-screen-page .screen-title {
  color: #fff;
  font-weight: 780;
  letter-spacing: .008em;
  line-height: 1.18;
}
.debate-screen-page .screen-status {
  color: var(--screen-muted);
  font-size: clamp(13px, 1.15vw, 17px);
  letter-spacing: .018em;
}
.screen-card-label {
  display: block;
  color: #f1b07c;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.4;
}

/* Waiting / transition screens use one centered stage card. This keeps a
   long topic and its proposition together instead of scattering them across
   the full canvas. */
.debate-screen-waiting {
  width: min(100%, 1180px);
  min-height: clamp(500px, calc(100vh - 170px), 760px);
  margin: auto;
  padding: clamp(28px, 4vw, 64px) clamp(24px, 5vw, 86px);
  border: 1px solid var(--screen-panel-line);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .18);
}
.debate-screen-waiting .screen-title {
  max-width: 1040px;
  margin: 0;
  font-size: clamp(32px, 4.4vw, 64px);
}
.debate-screen-waiting .screen-waiting-body {
  width: min(100%, 1080px);
  gap: 14px;
}
.debate-screen-waiting .screen-waiting-body > p {
  max-width: 720px;
  color: var(--screen-copy);
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.7;
}
.screen-waiting-topic-block {
  width: 100%;
  margin-top: 10px;
  padding: clamp(18px, 2.2vw, 30px) clamp(18px, 3vw, 42px);
  border: 1px solid var(--screen-panel-line);
  border-radius: 22px;
  background: rgba(7, 20, 32, .35);
}
.debate-screen-waiting .screen-waiting-topic-block .screen-waiting-topic {
  max-width: 1040px;
  margin: 5px auto 7px;
  color: #fff;
  font-size: clamp(23px, 2.65vw, 40px);
  line-height: 1.25;
}
.debate-screen-waiting .screen-waiting-topic-block .screen-waiting-proposition {
  max-width: 1000px;
  color: var(--screen-copy);
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.75;
}
.debate-screen-waiting .screen-waiting-topic-block .screen-debate-viewpoints {
  margin-top: 20px;
}

/* Vote stages: copy occupies a calm panel on the left; countdown and
   participation pie form one visual focus on the right. */
.screen-vote-focus {
  width: min(100%, 1320px);
  min-height: clamp(520px, calc(100vh - 170px), 760px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, .82fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "kicker kicker" "copy visual" "status status";
  column-gap: clamp(26px, 4vw, 72px);
  row-gap: clamp(16px, 2.4vh, 28px);
  align-content: center;
  text-align: left;
}
.screen-vote-focus .screen-kicker { grid-area: kicker; width: 100%; justify-content: center; }
.screen-vote-copy {
  grid-area: copy;
  min-width: 0;
  align-self: center;
  display: grid;
  gap: clamp(12px, 1.8vh, 20px);
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid var(--screen-panel-line);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--screen-panel-strong), rgba(255,255,255,.025));
  box-shadow: 0 20px 58px rgba(0, 0, 0, .14);
}
.screen-vote-copy .screen-title {
  max-width: 920px;
  margin: 0;
  font-size: clamp(30px, 3.45vw, 54px);
}
.screen-vote-copy .screen-proposition {
  max-width: 940px;
  margin: 0;
  color: var(--screen-copy);
  font-size: clamp(15px, 1.35vw, 21px);
  line-height: 1.72;
}
.screen-vote-copy .screen-vote-instruction {
  display: block;
  margin-bottom: 9px;
  color: #fff;
  font-size: clamp(18px, 1.65vw, 27px);
  line-height: 1.42;
  letter-spacing: .01em;
}
.screen-vote-copy .screen-vote-context {
  display: block;
  color: #b8c8cf;
  font-size: .88em;
  line-height: 1.7;
}
.screen-vote-visual {
  grid-area: visual;
  min-width: 0;
  align-self: center;
  display: grid;
  justify-items: center;
  gap: clamp(18px, 3vh, 34px);
  padding: clamp(18px, 2.5vw, 32px);
  border: 1px solid rgba(241, 176, 124, .2);
  border-radius: 28px;
  background: radial-gradient(circle at 50% 42%, rgba(241, 176, 124, .12), transparent 60%), rgba(255,255,255,.035);
}
.screen-vote-visual .screen-countdown-panel {
  width: min(100%, 520px);
  margin: 0;
}
.screen-vote-visual .screen-focus-panel {
  width: 100%;
  margin: 0;
}
.screen-vote-visual .screen-focus-pie {
  width: min(100%, min(30vw, 41vh));
}
.screen-vote-focus > .screen-status {
  grid-area: status;
  width: 100%;
  margin: 0;
  text-align: center;
  line-height: 1.7;
}
/* Earlier versions assigned grid areas directly to these children. Reset the
   assignments because they now live inside the copy/visual columns. */
.screen-vote-focus .screen-title,
.screen-vote-focus .screen-proposition,
.screen-vote-focus .screen-debate-viewpoints,
.screen-vote-focus .screen-mvp-candidates,
.screen-vote-focus .screen-countdown-panel,
.screen-vote-focus .screen-focus-panel {
  grid-area: auto;
}
.screen-vote-copy .screen-debate-viewpoints,
.screen-vote-copy .screen-mvp-candidates { width: 100%; }
.screen-vote-copy .screen-debate-viewpoints { margin-top: 2px; }
.screen-vote-copy .screen-mvp-candidates {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
}
.screen-vote-copy .screen-mvp-candidate {
  min-height: 78px;
  padding: 12px 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.screen-vote-copy .screen-mvp-candidate strong {
  margin-top: 6px;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.45;
  letter-spacing: .015em;
}
.screen-vote-copy .screen-mvp-candidate small { line-height: 1.45; }

/* Normal speaking stages: the long copy is a single readable block next to
   the time signal, rather than three unrelated pieces in different columns. */
.debate-screen-live:not(.debate-chess-live) {
  width: min(100%, 1180px);
  min-height: clamp(500px, calc(100vh - 170px), 720px);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, .78fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "kicker kicker" "copy countdown" "status status";
  align-content: center;
  align-items: center;
  gap: clamp(18px, 3vw, 42px);
  text-align: left;
}
.debate-screen-live:not(.debate-chess-live) .screen-kicker { grid-area: kicker; width: 100%; justify-content: center; }
.screen-live-copy {
  grid-area: copy;
  min-width: 0;
  align-self: center;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid var(--screen-panel-line);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--screen-panel-strong), rgba(255,255,255,.025));
}
.screen-live-copy .screen-title {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.6vw, 54px);
}
.screen-live-copy .screen-proposition {
  max-width: 900px;
  margin: 0;
  color: var(--screen-copy);
  font-size: clamp(15px, 1.35vw, 21px);
  line-height: 1.72;
}
.screen-live-copy .screen-stage-description {
  max-width: 900px;
  margin: 22px 0 0;
  padding: 15px 18px;
  border-left: 3px solid rgba(241, 176, 124, .72);
  border-radius: 0 12px 12px 0;
  color: var(--screen-muted);
  background: rgba(255,255,255,.045);
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.7;
}
.debate-screen-live:not(.debate-chess-live) > .screen-countdown-panel {
  grid-area: countdown;
  width: 100%;
  max-width: 560px;
  margin: 0;
  justify-self: center;
}
.debate-screen-live:not(.debate-chess-live) > .screen-manual-control {
  grid-area: countdown;
  width: 100%;
  margin: 0;
}
.debate-screen-live:not(.debate-chess-live) > .screen-status {
  grid-area: status;
  width: 100%;
  margin: 0;
  text-align: center;
}
.debate-screen-live:not(.debate-chess-live) .screen-single-viewpoint {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(18px, 2vw, 28px);
}

/* Chess clock: keep the proposition in a compact context card and give the
   two timers a generous, symmetrical stage. */
.debate-chess-live {
  width: min(100%, 1320px);
  min-height: clamp(520px, calc(100vh - 170px), 760px);
  grid-template-columns: minmax(290px, .72fr) minmax(500px, 1.28fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "kicker kicker" "context clock" "status status";
  gap: clamp(20px, 3vw, 48px);
  text-align: center;
}
.debate-chess-live .screen-kicker { width: 100%; justify-content: center; }
.debate-chess-context {
  align-self: center;
  min-width: 0;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--screen-panel-line);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--screen-panel-strong), rgba(255,255,255,.025));
  text-align: left;
}
.debate-chess-context .screen-title {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.25vw, 48px);
  line-height: 1.22;
}
.debate-chess-context .screen-proposition {
  margin: 0;
  color: var(--screen-copy);
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.72;
}
.debate-chess-context .screen-stage-description {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-left: 3px solid rgba(241,176,124,.72);
  border-radius: 0 12px 12px 0;
  color: var(--screen-muted);
  background: rgba(255,255,255,.045);
  line-height: 1.65;
}
.debate-chess-live > .debate-chess-clock { grid-area: clock; width: 100%; }
.debate-chess-live > .screen-status { grid-area: status; width: 100%; margin: 0; text-align: center; }
.debate-chess-live .debate-clock-side { min-height: clamp(190px, 29vh, 330px); }

/* Results: labels can wrap, but the chart remains an unbroken focus. MVP has
   eight rows, so its legend becomes a compact two-column card. */
.debate-screen-results .screen-result-winner small {
  max-width: 100%;
  white-space: normal;
  word-spacing: normal;
  letter-spacing: .025em;
  line-height: 1.65;
}
.debate-screen-results .screen-pie-legend {
  min-width: 0;
  max-height: min(52vh, 520px);
  overflow: auto;
  scrollbar-width: thin;
}
.debate-screen-results .screen-pie-item {
  min-width: 0;
  padding: 11px 0;
}
.debate-screen-results .screen-pie-item-copy {
  min-width: 0;
  align-items: baseline;
  line-height: 1.45;
}
.debate-screen-results .screen-pie-item-copy strong {
  min-width: 0;
  line-height: 1.45;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.screen-mvp-result .screen-pie-legend {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  padding: 13px 16px;
}
.screen-mvp-result .screen-pie-item { gap: 8px; padding: 8px 0; }
.screen-mvp-result .screen-pie-item-copy { display: grid; gap: 2px; }
.screen-mvp-result .screen-pie-item-copy strong { font-size: clamp(14px, 1.2vw, 18px); }
.screen-mvp-result .screen-pie-value { font-size: clamp(15px, 1.45vw, 20px); }

/* The rule is supporting copy, not another headline. A small label lets the
   audience understand the comparison without forcing one long sentence into
   the center of the page. */
.screen-comparison-rule {
  width: min(100%, 980px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 12px 18px;
  margin: 0;
  padding: 12px 18px;
  border: 1px solid var(--screen-panel-line);
  border-radius: 14px;
  color: var(--screen-copy);
  background: rgba(255,255,255,.045);
  font-size: clamp(13px, 1.2vw, 17px);
  line-height: 1.65;
  text-align: left;
}
.screen-comparison-rule p { margin: 0; }

@media (max-width: 980px), (max-height: 700px) {
  .debate-screen-page .screen-main { min-height: 0; place-content: start; }
  .debate-screen-waiting,
  .screen-vote-focus,
  .debate-screen-live:not(.debate-chess-live),
  .debate-chess-live,
  .debate-screen-results,
  .debate-screen-comparison {
    min-height: 0;
  }
  .screen-vote-focus,
  .debate-screen-live:not(.debate-chess-live),
  .debate-chess-live {
    display: flex;
    flex-direction: column;
    gap: 17px;
    text-align: center;
  }
  .screen-vote-focus .screen-kicker,
  .debate-screen-live:not(.debate-chess-live) .screen-kicker,
  .debate-chess-live .screen-kicker { width: 100%; justify-content: center; }
  .screen-vote-copy,
  .screen-vote-visual,
  .screen-live-copy,
  .debate-chess-context { width: 100%; }
  .screen-vote-copy,
  .screen-live-copy,
  .debate-chess-context { text-align: center; }
  .screen-vote-visual { order: 2; }
  .screen-vote-copy { order: 3; }
  .screen-vote-focus > .screen-status,
  .debate-screen-live:not(.debate-chess-live) > .screen-status,
  .debate-chess-live > .screen-status { order: 6; }
  .screen-vote-copy .screen-title,
  .screen-live-copy .screen-title { margin-left: auto; margin-right: auto; }
  .screen-live-copy .screen-stage-description,
  .debate-chess-context .screen-stage-description { border-left: 0; border-top: 2px solid rgba(241,176,124,.66); border-radius: 12px; }
  .screen-vote-visual .screen-focus-pie { width: min(70vw, 340px); }
  .screen-vote-copy .screen-mvp-candidates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .debate-chess-live .debate-chess-clock { width: 100%; }
  .debate-screen-results { display: flex; flex-direction: column; gap: 16px; text-align: center; }
  .debate-screen-results > div:first-child,
  .debate-screen-results > .screen-title,
  .debate-screen-results > .screen-status,
  .debate-screen-results .screen-result-winner { width: 100%; }
  .debate-screen-results .screen-pie-layout { display: contents; }
  .debate-screen-results .screen-pie-stage { order: 3; }
  .debate-screen-results .screen-result-winner { order: 2; }
  .debate-screen-results .screen-pie-legend { order: 4; width: 100%; max-height: none; text-align: left; }
  .debate-screen-results .screen-status { order: 5; }
  .debate-screen-results .screen-pie { width: min(62vw, 360px); }
  .debate-screen-comparison { display: flex; flex-direction: column; min-height: 0; }
}

@media (max-width: 700px) {
  .debate-screen-page { padding: 16px; }
  .debate-screen-page .screen-main { width: 100%; }
  .debate-screen-waiting { padding: 24px 17px; border-radius: 22px; }
  .screen-vote-copy,
  .screen-live-copy,
  .debate-chess-context,
  .screen-vote-visual { padding: 18px 16px; border-radius: 20px; }
  .screen-vote-copy .screen-mvp-candidates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen-debate-viewpoints { display: flex; flex-direction: column; }
  .screen-comparison-rule { grid-template-columns: 1fr; gap: 5px; text-align: center; }
  .screen-mvp-result .screen-pie-legend { grid-template-columns: 1fr; }
  .debate-screen-results .screen-pie { width: min(73vw, 320px); }
}

/* Projection polish: the room should read the core message at a glance.
   Explanatory/operator copy is intentionally removed from the public canvas;
   the control room remains the place for those instructions. */
.screen-page .screen-foot,
.screen-page .screen-status,
.screen-page:not(.debate-screen-page) .screen-waiting p,
.debate-screen-page .screen-foot,
.debate-screen-page .screen-status,
.debate-screen-page .screen-manual-control,
.debate-screen-page .screen-waiting-body > p,
.debate-screen-page .screen-vote-context,
.debate-screen-page .screen-stage-description,
.debate-screen-page .screen-live-copy > .screen-proposition,
.debate-screen-page .debate-chess-context > .screen-proposition,
.debate-screen-page .screen-waiting-proposition,
.debate-screen-page .screen-comparison-card-head > span {
  display: none;
}
.debate-screen-waiting .screen-kicker > span:last-child { display: none; }
.debate-screen-page .screen-main,
.debate-screen-page .screen-vote-copy,
.debate-screen-page .screen-live-copy,
.debate-screen-page .debate-chess-context,
.debate-screen-page .screen-waiting-topic-block {
  text-align: center;
}
.debate-screen-page .screen-title,
.debate-screen-page .screen-vote-instruction,
.debate-screen-page .screen-single-viewpoint,
.debate-screen-page .screen-debate-viewpoint,
.debate-screen-page .screen-comparison-card-head,
.debate-screen-page .screen-comparison-summary {
  text-align: center;
}
.screen-vote-copy .screen-title,
.screen-live-copy .screen-title {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.screen-vote-copy .screen-debate-viewpoints,
.screen-vote-copy .screen-mvp-candidates {
  margin-left: auto;
  margin-right: auto;
}
.screen-debate-viewpoint {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 92px;
}
.screen-debate-viewpoint strong {
  max-width: 100%;
  line-height: 1.5;
}
.screen-single-viewpoint strong {
  max-width: 100%;
}
.debate-screen-results .screen-result-winner {
  text-align: center;
}
.debate-screen-results .screen-result-winner small {
  display: block;
  white-space: normal;
  text-align: center;
}
.screen-comparison-rule {
  justify-content: center;
  text-align: center;
}
.screen-comparison-rule p { text-align: center; }
.screen-comparison-card-head h2 { letter-spacing: .02em; }

@media (max-width: 700px) {
  .screen-debate-viewpoint { min-height: 80px; }
  .screen-comparison-rule { justify-items: center; }
}

/* Final presentation pass: enlarge semantic labels, make long copy select a
   smaller display scale, and keep the main signal centered on the canvas. */
.debate-screen-page .screen-kicker {
  font-size: clamp(14px, 1.2vw, 19px);
  letter-spacing: .075em;
}
.debate-screen-page .screen-card-label {
  font-size: clamp(14px, 1.2vw, 19px);
  letter-spacing: .1em;
}
.debate-screen-page .screen-debate-viewpoint .screen-card-label,
.debate-screen-page .screen-single-viewpoint span {
  font-size: clamp(15px, 1.35vw, 21px);
}
.debate-screen-page .screen-debate-viewpoint strong {
  font-size: clamp(19px, 1.8vw, 29px);
}
.debate-screen-page .screen-pie-code {
  font-size: clamp(13px, 1.05vw, 17px);
}
.debate-screen-page .screen-pie-item-copy strong {
  font-size: clamp(17px, 1.55vw, 24px);
}
.debate-screen-page .screen-pie-hole span,
.debate-screen-page .screen-focus-pie-hole span {
  font-size: clamp(14px, 1.4vw, 19px);
  letter-spacing: .08em;
}
.debate-screen-page .screen-copy-long {
  font-size: clamp(25px, 2.7vw, 43px) !important;
}
.debate-screen-page .screen-copy-dense {
  font-size: clamp(21px, 2.25vw, 36px) !important;
}
.debate-screen-results .screen-result-winner strong {
  font-size: clamp(19px, 1.25vw, 27px);
  line-height: 1.25;
  white-space: nowrap;
}
.debate-screen-results .screen-result-winner strong.screen-copy-long {
  font-size: clamp(17px, 1vw, 22px) !important;
}
.debate-screen-results .screen-result-winner strong.screen-copy-dense {
  font-size: clamp(15px, .9vw, 20px) !important;
}

/* The opening/summary countdown is a primary stage signal, so it is slightly
   larger than the explanatory block beside it. */
.debate-screen-live:not(.debate-chess-live) > .screen-countdown-panel {
  padding: clamp(22px, 2.3vw, 34px) clamp(20px, 2vw, 30px) clamp(25px, 2.6vw, 38px);
}
.debate-screen-live:not(.debate-chess-live) > .screen-countdown-panel .screen-countdown-value {
  font-size: clamp(70px, 8.2vw, 126px);
  line-height: .94;
}

/* 16:9 projection screens benefit from a true centered chess clock. */
@media (min-width: 981px) and (min-height: 701px) {
  .debate-chess-live {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "kicker" "context" "clock";
    align-content: center;
    justify-items: center;
    text-align: center;
  }
  .debate-chess-live .screen-kicker,
  .debate-chess-context,
  .debate-chess-live > .debate-chess-clock {
    width: min(100%, 1160px);
  }
  .debate-chess-context {
    padding: 20px 34px;
    text-align: center;
  }
  .debate-chess-context .screen-title {
    margin-bottom: 0;
  }
  .debate-chess-live > .debate-chess-clock {
    justify-self: center;
  }
  .debate-chess-clock-screen {
    max-width: 1120px;
  }
  .debate-chess-clock-screen .debate-clock-side strong {
    font-size: clamp(72px, 8.4vw, 138px);
  }
}

/* The MVP root previously had a higher-specificity legacy grid declaration.
   Override it explicitly so its copy and visual columns cannot auto-place on
   top of each other. */
.screen-vote-focus.screen-mvp-vote {
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, .82fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "kicker kicker" "copy visual" "status status";
}
.screen-vote-focus.screen-mvp-vote .screen-vote-copy,
.screen-vote-focus.screen-mvp-vote .screen-vote-visual {
  min-width: 0;
}
.screen-vote-focus.screen-mvp-vote .screen-vote-copy {
  align-self: center;
}
.screen-vote-focus.screen-mvp-vote .screen-vote-visual {
  align-self: center;
}
.screen-vote-focus.screen-mvp-vote .screen-mvp-candidates {
  grid-area: auto;
  width: 100%;
}

/* Native graphic accents keep the stage from feeling like a wall of text.
   They do not carry information, so reduced-motion users can turn them off. */
.screen-page::before {
  z-index: 0;
  pointer-events: none;
}
.screen-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .46;
  background:
    radial-gradient(circle at 12% 25%, rgba(241,176,124,.38) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 72%, rgba(101,201,186,.32) 0 2px, transparent 3px),
    linear-gradient(117deg, transparent 0 47%, rgba(241,176,124,.1) 47.1% 47.25%, transparent 47.4% 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  animation: screen-drift 18s ease-in-out infinite alternate;
}
.debate-screen-page .screen-main {
  isolation: isolate;
}
.debate-screen-page .screen-main::before {
  content: "";
  position: absolute;
  inset: 5% 4%;
  z-index: -1;
  border: 1px solid rgba(101,201,186,.08);
  border-radius: 50%;
  transform: rotate(-7deg) scaleX(1.12);
  pointer-events: none;
  animation: screen-orbit 26s linear infinite;
}
.screen-vote-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.screen-vote-visual::before,
.screen-vote-visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.screen-vote-visual::before {
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid rgba(241,176,124,.18);
  transform: translate(23%, -27%);
  animation: screen-orbit 22s linear infinite reverse;
}
.screen-vote-visual::after {
  width: 7px;
  height: 7px;
  right: 13%;
  top: 15%;
  background: #7dd5c8;
  box-shadow: 0 0 0 7px rgba(125,213,200,.09), 0 0 24px rgba(125,213,200,.45);
  animation: screen-pulse 3s ease-in-out infinite;
}
.screen-vote-visual > * { position: relative; z-index: 1; }
.screen-focus-pie,
.screen-pie {
  isolation: isolate;
}
.screen-focus-pie::before,
.screen-pie::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(241,176,124,.24);
  border-radius: 50%;
  pointer-events: none;
  animation: screen-orbit 24s linear infinite;
}
.screen-focus-pie::after,
.screen-pie::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  top: -15px;
  left: 50%;
  border-radius: 50%;
  background: #f1b07c;
  box-shadow: 0 0 0 6px rgba(241,176,124,.09), 0 0 20px rgba(241,176,124,.55);
  pointer-events: none;
  animation: screen-pulse 3.8s ease-in-out infinite;
}
.screen-countdown-panel {
  position: relative;
  overflow: hidden;
}
.screen-countdown-panel::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -56px;
  bottom: -66px;
  border: 1px solid rgba(241,176,124,.3);
  border-radius: 50%;
  box-shadow: 0 0 0 16px rgba(241,176,124,.05), 0 0 0 32px rgba(241,176,124,.035);
  pointer-events: none;
}
.screen-vote-visual .screen-countdown-panel > *,
.screen-countdown-panel::after { z-index: 1; }

@keyframes screen-drift {
  from { transform: translate3d(-1%, -1%, 0) scale(1); }
  to { transform: translate3d(1%, 1%, 0) scale(1.03); }
}
@keyframes screen-orbit {
  to { transform: rotate(360deg); }
}
@keyframes screen-pulse {
  0%, 100% { opacity: .55; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .screen-page::after,
  .debate-screen-page .screen-main::before,
  .screen-vote-visual::before,
  .screen-focus-pie::before,
  .screen-focus-pie::after,
  .screen-pie::before,
  .screen-pie::after { animation: none; }
}

/* Palette 04: projection-only theme. Keep the participant and admin surfaces
   unchanged by scoping every override to the public screen shell. */
.screen-page,
.debate-screen-page {
  --screen-bg: #0b1020;
  --screen-ink: #f7f2e8;
  --screen-copy: #94a0b8;
  --screen-muted: #77839b;
  --screen-panel: rgba(20, 27, 47, .78);
  --screen-panel-strong: rgba(20, 27, 47, .92);
  --screen-panel-line: #2c3754;
  --screen-pro: #f26a5a;
  --screen-con: #55b8d9;
  --screen-accent: #f1c75b;
  color: var(--screen-ink);
  background:
    radial-gradient(circle at 50% 42%, rgba(85, 184, 217, .11), transparent 34%),
    radial-gradient(circle at 9% 92%, rgba(242, 106, 90, .08), transparent 27%),
    var(--screen-bg);
}
.screen-page::before,
.debate-screen-page::before {
  border-color: rgba(241, 199, 91, .2);
  box-shadow: 0 0 0 70px rgba(241, 199, 91, .028), 0 0 0 140px rgba(85, 184, 217, .025);
}
.screen-page::after,
.debate-screen-page::after {
  background:
    radial-gradient(circle at 12% 25%, rgba(242, 106, 90, .34) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 72%, rgba(85, 184, 217, .3) 0 2px, transparent 3px),
    linear-gradient(117deg, transparent 0 47%, rgba(241, 199, 91, .08) 47.1% 47.25%, transparent 47.4% 100%);
}
.screen-page .screen-top,
.screen-page .screen-main,
.screen-page .screen-top .brand,
.debate-screen-page .screen-top,
.debate-screen-page .screen-main,
.debate-screen-page .screen-top .brand { color: var(--screen-ink); }
.screen-page .screen-top .brand small,
.debate-screen-page .screen-top .brand small { color: var(--screen-muted); }
.screen-page .screen-controls .button-ghost,
.debate-screen-page .screen-controls .button-ghost {
  color: var(--screen-copy);
  border-color: rgba(148, 160, 184, .35);
  background: rgba(20, 27, 47, .72);
}
.screen-page .screen-kicker,
.debate-screen-page .screen-kicker { color: var(--screen-copy); }
.screen-page .screen-title,
.screen-page .screen-vote-instruction,
.screen-page .screen-result-row .result-name strong,
.screen-page .screen-result-row .result-value,
.debate-screen-page .screen-title,
.debate-screen-page .screen-vote-instruction,
.debate-screen-page .screen-debate-viewpoint strong,
.debate-screen-page .screen-single-viewpoint strong,
.debate-screen-page .screen-result-winner strong,
.debate-screen-page .screen-comparison-card-head h2,
.debate-screen-page .screen-comparison-summary strong { color: var(--screen-ink); }
.screen-page .screen-proposition,
.screen-page .screen-waiting p,
.screen-page .screen-result-row .result-name small,
.screen-page .screen-status,
.screen-page .screen-foot,
.debate-screen-page .screen-proposition,
.debate-screen-page .screen-vote-context,
.debate-screen-page .screen-stage-description,
.debate-screen-page .screen-status,
.debate-screen-page .screen-foot,
.debate-screen-page .screen-waiting-proposition,
.debate-screen-page .screen-comparison-rule,
.debate-screen-page .screen-result-winner small { color: var(--screen-copy); }
.screen-page .screen-status::before,
.debate-screen-page .screen-status::before { background: var(--screen-con); }
.screen-page .screen-progress,
.screen-page .screen-result-row .result-track { background: rgba(148, 160, 184, .18); }
.screen-page .screen-progress-fill { background: linear-gradient(90deg, var(--screen-pro), var(--screen-accent)); }
.screen-page .screen-percent,
.screen-page .screen-kicker .screen-time { color: var(--screen-accent); }
.debate-screen-page .screen-waiting-topic-block,
.debate-screen-page .screen-vote-copy,
.debate-screen-page .screen-live-copy,
.debate-screen-page .debate-chess-context,
.debate-screen-page .screen-comparison-card,
.debate-screen-page .screen-comparison-summary,
.debate-screen-page .screen-pie-legend,
.debate-screen-page .screen-debate-viewpoint,
.debate-screen-page .screen-single-viewpoint {
  border-color: var(--screen-panel-line);
  background: var(--screen-panel);
  box-shadow: 0 20px 52px rgba(0, 0, 0, .24);
}
.debate-screen-page .screen-vote-copy,
.debate-screen-page .screen-live-copy,
.debate-screen-page .debate-chess-context {
  background: linear-gradient(145deg, var(--screen-panel-strong), rgba(20, 27, 47, .56));
}
.debate-screen-page .screen-vote-visual {
  border-color: rgba(241, 199, 91, .3);
  background: radial-gradient(circle at 50% 42%, rgba(85, 184, 217, .12), transparent 60%), rgba(20, 27, 47, .72);
}
.debate-screen-page .screen-debate-viewpoint.is-pro,
.debate-screen-page .screen-single-viewpoint.is-pro {
  border-color: rgba(242, 106, 90, .48);
  background: rgba(242, 106, 90, .09);
}
.debate-screen-page .screen-debate-viewpoint.is-con,
.debate-screen-page .screen-single-viewpoint.is-con {
  border-color: rgba(85, 184, 217, .48);
  background: rgba(85, 184, 217, .09);
}
.debate-screen-page .screen-card-label,
.debate-screen-page .screen-debate-viewpoint.is-pro .screen-card-label,
.debate-screen-page .screen-single-viewpoint.is-pro span { color: var(--screen-pro); }
.debate-screen-page .screen-debate-viewpoint.is-con .screen-card-label,
.debate-screen-page .screen-single-viewpoint.is-con span { color: var(--screen-con); }
.debate-screen-page .screen-countdown-panel {
  border-color: rgba(241, 199, 91, .48);
  background: linear-gradient(135deg, #141b2f 0%, #203458 100%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .32), 0 0 0 5px rgba(241, 199, 91, .08);
}
.debate-screen-page .screen-countdown-panel > span,
.debate-screen-page .screen-pie-value { color: var(--screen-accent); }
.debate-screen-page .screen-countdown-value { color: var(--screen-ink); text-shadow: 0 4px 24px rgba(241, 199, 91, .32); }
.debate-screen-page .screen-focus-pie-hole,
.debate-screen-page .screen-pie-hole,
.debate-screen-page .screen-pie-hole-binary { background: #141b2f; }
.debate-screen-page .screen-focus-pie-hole span,
.debate-screen-page .screen-pie-hole span,
.debate-screen-page .screen-pie-code,
.debate-screen-page .screen-result-winner span { color: var(--screen-muted); }
.debate-screen-page .screen-focus-pie-hole strong,
.debate-screen-page .screen-pie-hole strong,
.debate-screen-page .screen-pie-hole-binary strong,
.debate-screen-page .screen-pie-item-copy strong { color: var(--screen-ink); }
.debate-screen-page .screen-pie-item { border-bottom-color: rgba(148, 160, 184, .18); }
.debate-screen-page .screen-comparison-summary { background: rgba(241, 199, 91, .12); border-color: rgba(241, 199, 91, .48); }
.debate-screen-page .screen-comparison-summary span,
.debate-screen-page .screen-comparison-summary strong,
.debate-screen-page .screen-topic-prefix { color: var(--screen-accent); }
.debate-screen-page .screen-mvp-code { color: var(--screen-accent); }
.screen-focus-pie::after,
.screen-pie::after { background: var(--screen-accent); box-shadow: 0 0 0 6px rgba(241, 199, 91, .1), 0 0 20px rgba(241, 199, 91, .55); }
.screen-focus-pie::before,
.screen-pie::before { border-color: rgba(241, 199, 91, .24); }

/* Countdown progress follows the Palette 04 navy/gold display treatment. */
.screen-countdown-progress {
  width: min(100%, 600px);
  height: clamp(9px, 1.1vw, 16px);
  margin: clamp(14px, 2vh, 20px) auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 160, 184, .2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .24);
}
.screen-countdown-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--screen-pro), var(--screen-accent));
  transition: width .35s ease;
}
.debate-clock-progress {
  width: min(100%, 600px);
  height: clamp(9px, 1.1vw, 16px);
  margin: 15px auto 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 160, 184, .2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .24);
}
.debate-clock-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--screen-accent, #f1c75b);
  transition: width .35s ease;
}
.debate-clock-side[data-clock-side="PRO"] .debate-clock-progress-fill { background: var(--screen-pro, #f26a5a); }
.debate-clock-side[data-clock-side="CON"] .debate-clock-progress-fill { background: var(--screen-con, #55b8d9); }
.debate-clock-console .debate-clock-progress-fill { background: var(--orange); }
@media (max-width: 720px) {
  .screen-countdown-progress,
  .debate-clock-progress { height: 9px; }
}

@media (max-width: 980px) {
  .screen-vote-focus.screen-mvp-vote {
    display: flex;
    grid-template-columns: none;
    grid-template-areas: none;
  }
  .debate-screen-page .screen-debate-viewpoint .screen-card-label,
  .debate-screen-page .screen-single-viewpoint span {
    font-size: 15px;
  }
}

/* Length-aware scales are intentionally scoped by role. A long topic title
   should shrink, while a long option label in a legend must stay compact. */
.screen-vote-copy .screen-title.screen-copy-long {
  font-size: clamp(27px, 2.05vw, 32px) !important;
}
.screen-vote-copy .screen-title.screen-copy-dense {
  font-size: clamp(23px, 1.8vw, 28px) !important;
}
.debate-screen-waiting .screen-waiting-topic.screen-copy-long,
.debate-screen-comparison .screen-title.screen-copy-long,
.debate-screen-results > .screen-title.screen-copy-long {
  font-size: clamp(29px, 3.2vw, 46px) !important;
}
.debate-screen-waiting .screen-waiting-topic.screen-copy-dense,
.debate-screen-comparison .screen-title.screen-copy-dense,
.debate-screen-results > .screen-title.screen-copy-dense {
  font-size: clamp(25px, 2.65vw, 37px) !important;
}
.screen-debate-viewpoint strong.screen-copy-long,
.screen-single-viewpoint strong.screen-copy-long {
  font-size: clamp(17px, 1.25vw, 22px) !important;
}
.screen-debate-viewpoint strong.screen-copy-dense,
.screen-single-viewpoint strong.screen-copy-dense {
  font-size: clamp(15px, 1.1vw, 19px) !important;
}
.debate-screen-results .screen-pie-item-copy strong.screen-copy-long {
  font-size: clamp(15px, 1.25vw, 20px) !important;
}
.debate-screen-results .screen-pie-item-copy strong.screen-copy-dense {
  font-size: clamp(14px, 1.1vw, 18px) !important;
}

@media (min-width: 981px) {
  .screen-vote-copy .screen-title,
  .debate-screen-waiting .screen-title,
  .debate-screen-waiting .screen-waiting-topic,
  .debate-screen-live:not(.debate-chess-live) .screen-title,
  .debate-screen-results > .screen-title,
  .debate-screen-comparison .screen-title,
  .debate-chess-context .screen-title {
    white-space: nowrap;
  }
}

/* Center the chess topic and clock without giving up the topic label. */
.screen-topic-prefix {
  color: #f1b07c;
  font-size: .42em;
  font-weight: 800;
  letter-spacing: .12em;
  margin-right: .24em;
  vertical-align: .16em;
  white-space: nowrap;
}

/* Removing the calculation-rule row should also remove the empty vertical
   slot it used to occupy. Keep the comparison composition centered with a
   little breathing room above and below. */
.debate-screen-comparison {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: center;
}
.debate-screen-comparison .screen-comparison-panels {
  align-self: center;
}

/* Projection redesign v2: use the control-room palette and make the visual
   motif a real canvas element, not only a background gradient. */
.debate-screen-page {
  --screen-bg: #f5f7f8;
  --screen-ink: #142437;
  --screen-copy: #536276;
  --screen-muted: #7c8998;
  --screen-panel: rgba(255, 255, 255, .9);
  --screen-panel-strong: #ffffff;
  --screen-panel-line: #dfe5e9;
  --screen-pro: #da8952;
  --screen-con: #4f8f87;
  color: var(--screen-ink);
  background:
    radial-gradient(circle at 78% 8%, rgba(218, 137, 82, .17), transparent 25%),
    radial-gradient(circle at 8% 88%, rgba(79, 143, 135, .15), transparent 27%),
    linear-gradient(135deg, #f8faf9 0%, var(--screen-bg) 52%, #edf2f2 100%);
}
.debate-screen-page::before {
  border-color: rgba(218, 137, 82, .22);
  box-shadow: 0 0 0 70px rgba(218, 137, 82, .045), 0 0 0 140px rgba(79, 143, 135, .035);
}
.debate-screen-page::after {
  opacity: .32;
  background:
    radial-gradient(circle at 14% 20%, rgba(218, 137, 82, .5) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 76%, rgba(79, 143, 135, .5) 0 2px, transparent 3px),
    linear-gradient(117deg, transparent 0 47%, rgba(20, 36, 55, .06) 47.1% 47.25%, transparent 47.4% 100%);
}
.debate-screen-page .screen-top,
.debate-screen-page .screen-main {
  color: var(--screen-ink);
}
.debate-screen-page .screen-top .brand {
  color: var(--screen-ink);
}
.debate-screen-page .screen-top .brand small {
  color: #8b98aa;
}
.debate-screen-page .screen-controls .button-ghost {
  color: var(--screen-ink);
  border-color: rgba(20, 36, 55, .14);
  background: rgba(255, 255, 255, .7);
}
.debate-screen-page .screen-kicker {
  color: var(--screen-copy);
}
.debate-screen-page .screen-title,
.debate-screen-page .screen-vote-instruction,
.debate-screen-page .screen-debate-viewpoint strong,
.debate-screen-page .screen-single-viewpoint strong,
.debate-screen-page .screen-result-winner strong,
.debate-screen-page .screen-comparison-card-head h2,
.debate-screen-page .screen-comparison-summary strong {
  color: var(--screen-ink);
}
.debate-screen-page .screen-card-label,
.debate-screen-page .screen-debate-viewpoint.is-pro .screen-card-label,
.debate-screen-page .screen-single-viewpoint.is-pro span {
  color: var(--screen-pro);
}
.debate-screen-page .screen-debate-viewpoint.is-con .screen-card-label,
.debate-screen-page .screen-single-viewpoint.is-con span {
  color: var(--screen-con);
}
.debate-screen-page .screen-waiting-topic-block,
.debate-screen-page .screen-vote-copy,
.debate-screen-page .screen-live-copy,
.debate-screen-page .debate-chess-context,
.debate-screen-page .screen-comparison-card,
.debate-screen-page .screen-comparison-summary,
.debate-screen-page .screen-pie-legend {
  border-color: var(--screen-panel-line);
  background: var(--screen-panel);
  box-shadow: 0 20px 52px rgba(20, 36, 55, .08);
}
.debate-screen-page .screen-vote-visual {
  border-color: rgba(218, 137, 82, .3);
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(249, 244, 238, .88));
  box-shadow: 0 20px 52px rgba(20, 36, 55, .1);
}
.debate-screen-page .screen-debate-viewpoint.is-pro,
.debate-screen-page .screen-single-viewpoint.is-pro {
  border-color: rgba(218, 137, 82, .35);
  background: linear-gradient(135deg, rgba(218, 137, 82, .1), rgba(255, 255, 255, .8));
}
.debate-screen-page .screen-debate-viewpoint.is-con,
.debate-screen-page .screen-single-viewpoint.is-con {
  border-color: rgba(79, 143, 135, .35);
  background: linear-gradient(135deg, rgba(79, 143, 135, .1), rgba(255, 255, 255, .8));
}
.debate-screen-page .screen-debate-viewpoint strong,
.debate-screen-page .screen-single-viewpoint strong {
  text-shadow: none;
}
.debate-screen-page .screen-countdown-panel {
  border-color: rgba(218, 137, 82, .45);
  background: linear-gradient(135deg, #142437 0%, #21415a 100%);
  box-shadow: 0 18px 42px rgba(20, 36, 55, .2), 0 0 0 5px rgba(218, 137, 82, .08);
}
.debate-screen-page .screen-countdown-panel > span,
.debate-screen-page .screen-pie-value {
  color: var(--screen-pro);
}
.debate-screen-page .screen-countdown-value {
  color: #ffffff;
  text-shadow: 0 4px 24px rgba(218, 137, 82, .35);
}
.debate-screen-page .screen-focus-pie-hole,
.debate-screen-page .screen-pie-hole,
.debate-screen-page .screen-pie-hole-binary {
  background: #142437;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 28px rgba(20, 36, 55, .2);
}
.debate-screen-page .screen-focus-pie-hole span,
.debate-screen-page .screen-pie-hole span,
.debate-screen-page .screen-pie-code,
.debate-screen-page .screen-result-winner span {
  color: #8b98aa;
}
.debate-screen-page .screen-focus-pie-hole strong,
.debate-screen-page .screen-pie-hole strong,
.debate-screen-page .screen-pie-hole-binary strong {
  color: #ffffff;
}
.debate-screen-page .screen-pie-legend {
  background: rgba(255, 255, 255, .84);
}
.debate-screen-page .screen-pie-item {
  border-bottom-color: rgba(20, 36, 55, .1);
}
.debate-screen-page .screen-pie-item-copy strong {
  color: var(--screen-ink);
}
.debate-screen-page .screen-comparison-summary span,
.debate-screen-page .screen-comparison-summary small,
.debate-screen-page .screen-result-winner small {
  color: var(--screen-copy);
}
.debate-screen-page .screen-comparison-summary strong {
  color: var(--screen-pro);
}
.debate-screen-page .screen-topic-prefix {
  color: var(--screen-pro);
}

/* One-line policy for projection labels. Long viewpoint copy receives a full
   row before this rule is applied, so it stays readable without wrapping. */
@media (min-width: 981px) {
  .debate-screen-page .screen-kicker > span,
  .debate-screen-page .screen-vote-instruction,
  .debate-screen-page .screen-single-viewpoint strong,
  .debate-screen-page .screen-debate-viewpoint strong,
  .debate-screen-page .screen-result-winner small,
  .debate-screen-page .screen-comparison-summary small,
  .debate-screen-page .screen-comparison-card-head h2,
  .debate-screen-page .screen-pie-item-copy strong {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  .screen-vote-copy .screen-debate-viewpoints:has(.screen-copy-long),
  .screen-vote-copy .screen-debate-viewpoints:has(.screen-copy-dense),
  .screen-waiting-topic-block .screen-debate-viewpoints:has(.screen-copy-long),
  .screen-waiting-topic-block .screen-debate-viewpoints:has(.screen-copy-dense) {
    grid-template-columns: minmax(0, 1fr);
  }
  .screen-vote-copy .screen-debate-viewpoint,
  .screen-waiting-topic-block .screen-debate-viewpoint {
    min-height: 74px;
  }
}

/* Projection correction: restore the original dark control-room palette and
   never discard public-screen copy. The layout and length-aware font scales
   above still keep ordinary labels on one line; genuinely long copy can use
   its full width and wrap instead of being replaced by an ellipsis. */
.debate-screen-page {
  --screen-bg: #0d1b2a;
  --screen-ink: #ffffff;
  --screen-copy: #d7e2e7;
  --screen-muted: #9eb1bc;
  --screen-panel: rgba(255, 255, 255, .055);
  --screen-panel-strong: rgba(255, 255, 255, .09);
  --screen-panel-line: rgba(255, 255, 255, .15);
  --screen-pro: #f1b07c;
  --screen-con: #7dd5c8;
  color: var(--screen-ink);
  background:
    radial-gradient(circle at 50% 42%, rgba(67, 127, 145, .13), transparent 34%),
    radial-gradient(circle at 9% 92%, rgba(79, 143, 135, .1), transparent 27%),
    var(--screen-bg);
}
.debate-screen-page::before {
  border-color: rgba(218, 137, 82, .17);
  box-shadow: 0 0 0 70px rgba(218, 137, 82, .025), 0 0 0 140px rgba(218, 137, 82, .025);
}
.debate-screen-page::after {
  opacity: .46;
  background:
    radial-gradient(circle at 12% 25%, rgba(241, 176, 124, .38) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 72%, rgba(101, 201, 186, .32) 0 2px, transparent 3px),
    linear-gradient(117deg, transparent 0 47%, rgba(255, 255, 255, .07) 47.1% 47.25%, transparent 47.4% 100%);
}
.debate-screen-page .screen-top,
.debate-screen-page .screen-main,
.debate-screen-page .screen-top .brand {
  color: var(--screen-ink);
}
.debate-screen-page .screen-top .brand small {
  color: #7890a0;
}
.debate-screen-page .screen-controls .button-ghost {
  color: #b6c5cf;
  border-color: rgba(255, 255, 255, .14);
  background: transparent;
}
.debate-screen-page .screen-kicker {
  color: var(--screen-copy);
}
.debate-screen-page .screen-title,
.debate-screen-page .screen-vote-instruction,
.debate-screen-page .screen-debate-viewpoint strong,
.debate-screen-page .screen-single-viewpoint strong,
.debate-screen-page .screen-result-winner strong,
.debate-screen-page .screen-comparison-card-head h2,
.debate-screen-page .screen-comparison-summary strong {
  color: var(--screen-ink);
}
.debate-screen-page .screen-card-label,
.debate-screen-page .screen-debate-viewpoint.is-pro .screen-card-label,
.debate-screen-page .screen-single-viewpoint.is-pro span {
  color: var(--screen-pro);
}
.debate-screen-page .screen-debate-viewpoint.is-con .screen-card-label,
.debate-screen-page .screen-single-viewpoint.is-con span {
  color: var(--screen-con);
}
.debate-screen-page .screen-waiting-topic-block,
.debate-screen-page .screen-vote-copy,
.debate-screen-page .screen-live-copy,
.debate-screen-page .debate-chess-context,
.debate-screen-page .screen-comparison-card,
.debate-screen-page .screen-comparison-summary,
.debate-screen-page .screen-pie-legend {
  border-color: var(--screen-panel-line);
  background: var(--screen-panel);
  box-shadow: 0 20px 52px rgba(0, 0, 0, .18);
}
.debate-screen-page .screen-vote-copy,
.debate-screen-page .screen-live-copy,
.debate-screen-page .debate-chess-context {
  background: linear-gradient(145deg, var(--screen-panel-strong), rgba(255, 255, 255, .025));
}
.debate-screen-page .screen-vote-visual {
  border-color: rgba(241, 176, 124, .2);
  background: radial-gradient(circle at 50% 42%, rgba(241, 176, 124, .12), transparent 60%), rgba(255, 255, 255, .035);
  box-shadow: 0 20px 58px rgba(0, 0, 0, .18);
}
.debate-screen-page .screen-debate-viewpoint.is-pro,
.debate-screen-page .screen-single-viewpoint.is-pro {
  border-color: rgba(241, 176, 124, .38);
  background: rgba(241, 176, 124, .075);
}
.debate-screen-page .screen-debate-viewpoint.is-con,
.debate-screen-page .screen-single-viewpoint.is-con {
  border-color: rgba(101, 201, 186, .38);
  background: rgba(101, 201, 186, .075);
}
.debate-screen-page .screen-debate-viewpoint strong,
.debate-screen-page .screen-single-viewpoint strong {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .22);
}
.debate-screen-page .screen-countdown-panel {
  border-color: rgba(241, 176, 124, .42);
  background: linear-gradient(135deg, #102033 0%, #173b52 100%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28), 0 0 0 5px rgba(241, 176, 124, .08);
}
.debate-screen-page .screen-countdown-panel > span,
.debate-screen-page .screen-pie-value {
  color: var(--screen-pro);
}
.debate-screen-page .screen-countdown-value {
  color: #ffffff;
  text-shadow: 0 4px 24px rgba(241, 176, 124, .35);
}
.debate-screen-page .screen-focus-pie-hole,
.debate-screen-page .screen-pie-hole,
.debate-screen-page .screen-pie-hole-binary {
  background: #13283a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 28px rgba(0, 0, 0, .22);
}
.debate-screen-page .screen-focus-pie-hole span,
.debate-screen-page .screen-pie-hole span,
.debate-screen-page .screen-pie-code,
.debate-screen-page .screen-result-winner span {
  color: #91a7b4;
}
.debate-screen-page .screen-focus-pie-hole strong,
.debate-screen-page .screen-pie-hole strong,
.debate-screen-page .screen-pie-hole-binary strong {
  color: #ffffff;
}
.debate-screen-page .screen-pie-legend {
  background: rgba(255, 255, 255, .045);
}
.debate-screen-page .screen-pie-item {
  border-bottom-color: rgba(255, 255, 255, .08);
}
.debate-screen-page .screen-pie-item-copy strong {
  color: #ffffff;
}
.debate-screen-page .screen-comparison-summary span,
.debate-screen-page .screen-comparison-summary small,
.debate-screen-page .screen-result-winner small {
  color: var(--screen-copy);
}
.debate-screen-page .screen-comparison-summary strong,
.debate-screen-page .screen-topic-prefix {
  color: var(--screen-pro);
}
.debate-screen-page .screen-comparison-summary {
  background: rgba(241, 176, 124, .11);
  border-color: rgba(241, 176, 124, .45);
}

/* No projection copy is clipped. On a desktop projection, the stage keeps
   each visible message on one line and uses the length-aware font scales
   above to make room for the complete text. Narrow mobile screens may still
   wrap naturally so that the content remains reachable instead of clipped. */
.debate-screen-page .screen-title,
.debate-screen-page .screen-kicker > span,
.debate-screen-page .screen-vote-instruction,
.debate-screen-page .screen-single-viewpoint strong,
.debate-screen-page .screen-debate-viewpoint strong,
.debate-screen-page .screen-result-winner strong,
.debate-screen-page .screen-result-winner small,
.debate-screen-page .screen-comparison-summary small,
.debate-screen-page .screen-comparison-card-head h2,
.debate-screen-page .screen-pie-item-copy strong {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: nowrap;
}
.debate-screen-page .screen-pie-item-copy,
.debate-screen-page .screen-result-winner,
.debate-screen-page .screen-comparison-card-head {
  min-width: 0;
}

/* Keep result labels inside their own columns. The percentage column has a
   reserved width and the label scale is deliberately smaller than the main
   headline, so a full label never presses against the percentage. */
.debate-screen-page .screen-pie-item {
  grid-template-columns: 14px minmax(0, 1fr) minmax(68px, 5.5em);
  column-gap: clamp(10px, 1.1vw, 18px);
}
.debate-screen-page .screen-pie-item-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(6px, .7vw, 10px);
  row-gap: 2px;
}
.debate-screen-page .screen-pie-item-copy strong {
  min-width: 0;
  font-size: clamp(13px, 1.05vw, 17px);
  line-height: 1.25;
  letter-spacing: .01em;
}
.debate-screen-page .screen-pie-item-copy strong.screen-copy-long {
  font-size: clamp(12px, .92vw, 15px) !important;
}
.debate-screen-page .screen-pie-item-copy strong.screen-copy-dense {
  font-size: clamp(11px, .82vw, 14px) !important;
}
.debate-screen-page .screen-pie-item-copy small {
  grid-column: 1 / -1;
  min-width: 0;
  white-space: normal;
}
.debate-screen-page .screen-pie-value {
  min-width: 68px;
  text-align: right;
  font-size: clamp(14px, 1.35vw, 20px);
  letter-spacing: .015em;
}
.debate-screen-page .screen-vote-instruction {
  font-size: clamp(15px, 1.2vw, 21px);
}
.debate-screen-page .screen-debate-viewpoint strong,
.debate-screen-page .screen-single-viewpoint strong {
  font-size: clamp(14px, 1.1vw, 18px);
  letter-spacing: .01em;
}
.debate-screen-page .screen-result-winner {
  width: 100%;
  padding-inline: clamp(6px, 1vw, 14px);
}
.debate-screen-page .screen-result-winner small {
  font-size: clamp(10px, .75vw, 14px);
  letter-spacing: .02em;
  word-spacing: normal;
}
.debate-screen-page .screen-comparison-summary small {
  font-size: clamp(11px, .95vw, 14px);
  letter-spacing: .015em;
}

@media (min-width: 981px) {
  .debate-screen-page .screen-main {
    width: min(1400px, 100%);
  }
  .debate-screen-page .screen-title.screen-copy-dense,
  .debate-screen-page .screen-vote-copy .screen-title.screen-copy-dense,
  .debate-screen-page .screen-live-copy .screen-title.screen-copy-dense,
  .debate-screen-page .debate-chess-context .screen-title.screen-copy-dense {
    font-size: clamp(17px, 1.2vw, 20px) !important;
    letter-spacing: 0;
  }
  .debate-screen-page .screen-title.screen-copy-long,
  .debate-screen-page .screen-vote-copy .screen-title.screen-copy-long,
  .debate-screen-page .screen-live-copy .screen-title.screen-copy-long,
  .debate-screen-page .debate-chess-context .screen-title.screen-copy-long {
    font-size: clamp(22px, 1.8vw, 28px) !important;
    letter-spacing: 0;
  }
  .debate-screen-page .screen-pie-legend {
    padding-inline: clamp(14px, 1.6vw, 22px);
  }
  .debate-screen-results {
    grid-template-columns: minmax(300px, .95fr) minmax(420px, 1.25fr) minmax(290px, .9fr);
    column-gap: clamp(18px, 2vw, 34px);
  }
}

@media (max-width: 980px) {
  .debate-screen-page .screen-title,
  .debate-screen-page .screen-kicker > span,
  .debate-screen-page .screen-vote-instruction,
  .debate-screen-page .screen-single-viewpoint strong,
  .debate-screen-page .screen-debate-viewpoint strong,
  .debate-screen-page .screen-result-winner strong,
  .debate-screen-page .screen-result-winner small,
  .debate-screen-page .screen-comparison-summary small,
  .debate-screen-page .screen-comparison-card-head h2,
  .debate-screen-page .screen-pie-item-copy strong {
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
}

/* Restore light-on-dark colors for the inline debate illustration. */
.debate-screen-page .screen-visual-ring {
  stroke: rgba(255, 255, 255, .16);
}
.debate-screen-page .screen-visual-ring-b {
  stroke: rgba(125, 213, 200, .3);
}
.debate-screen-page .screen-visual-axis {
  stroke: rgba(255, 255, 255, .16);
}
.debate-screen-page .screen-visual-caption {
  color: rgba(255, 255, 255, .42);
}
.debate-screen-page .screen-visual-core {
  fill: #102033;
}

@media (min-width: 981px) {
  .debate-screen-page .screen-vote-copy .screen-title,
  .debate-screen-page .screen-live-copy .screen-title,
  .debate-screen-page .debate-chess-context .screen-title {
    max-width: none;
  }
  .debate-screen-page .screen-debate-viewpoints,
  .debate-screen-page .screen-mvp-candidates {
    min-width: 0;
  }
}

/* Real canvas illustration: two speakers, opposing sweeps and a central
   debate emblem. It is intentionally an inline SVG so the screen has a real
   visual subject without adding external image loading or fragile assets. */
.debate-screen-page .screen-main > .screen-stage-visual {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(-72px, -2vw, -18px);
  width: min(34vw, 500px);
  pointer-events: none;
  transform: translateY(-50%);
  opacity: .34;
  filter: drop-shadow(0 18px 28px rgba(20, 36, 55, .12));
}
.debate-screen-page .screen-main > :not(.screen-stage-visual) {
  position: relative;
  z-index: 3;
}
.debate-screen-page .screen-stage-visual-vote {
  right: clamp(-110px, -4vw, -32px);
  opacity: .16;
}
.debate-screen-page .screen-stage-visual-result,
.debate-screen-page .screen-stage-visual-mvp {
  left: clamp(-84px, -3vw, -16px);
  right: auto;
  opacity: .2;
}
.debate-screen-page .screen-stage-visual-live {
  opacity: .3;
}
.screen-visual-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.screen-visual-ring {
  fill: none;
  stroke: rgba(20, 36, 55, .16);
  stroke-width: 1.5;
  stroke-dasharray: 5 11;
  transform-origin: 280px 160px;
  animation: screen-visual-rotate 24s linear infinite;
}
.screen-visual-ring-b {
  stroke: rgba(79, 143, 135, .25);
  stroke-dasharray: 2 8;
  animation-direction: reverse;
  animation-duration: 18s;
}
.screen-visual-sweep {
  stroke-width: 1;
  stroke-linejoin: round;
}
.screen-visual-sweep-pro {
  fill: rgba(218, 137, 82, .2);
  stroke: rgba(218, 137, 82, .7);
}
.screen-visual-sweep-con {
  fill: rgba(79, 143, 135, .2);
  stroke: rgba(79, 143, 135, .7);
}
.screen-visual-axis {
  stroke: rgba(20, 36, 55, .16);
  stroke-width: 1;
  stroke-dasharray: 4 9;
}
.screen-visual-person-pro circle,
.screen-visual-person-pro path,
.screen-visual-person-pro rect {
  fill: rgba(218, 137, 82, .75);
  stroke: rgba(218, 137, 82, .95);
}
.screen-visual-person-con circle,
.screen-visual-person-con path,
.screen-visual-person-con rect {
  fill: rgba(79, 143, 135, .75);
  stroke: rgba(79, 143, 135, .95);
}
.screen-visual-person circle {
  stroke-width: 2;
}
.screen-visual-person path {
  stroke-width: 2;
  stroke-linejoin: round;
}
.screen-visual-person rect {
  stroke-width: 1;
}
.screen-visual-center {
  fill: #ffffff;
  stroke: var(--screen-pro);
  stroke-width: 3;
  stroke-linejoin: round;
  filter: drop-shadow(0 5px 10px rgba(218, 137, 82, .28));
}
.screen-visual-core {
  fill: var(--screen-ink);
  stroke: #ffffff;
  stroke-width: 2;
}
.screen-visual-spark {
  fill: none;
  stroke: var(--screen-pro);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .8;
}
.screen-visual-badge {
  position: absolute;
  top: 47%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 99px;
  color: #ffffff;
  font-size: clamp(11px, .95vw, 14px);
  font-weight: 800;
  letter-spacing: .08em;
  box-shadow: 0 7px 18px rgba(20, 36, 55, .12);
}
.screen-visual-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .16);
}
.screen-visual-badge-pro {
  left: 11%;
  background: var(--screen-pro);
}
.screen-visual-badge-con {
  right: 11%;
  background: var(--screen-con);
}
.screen-visual-badge-pro::before,
.screen-visual-badge-con::before {
  background: #ffffff;
}
.screen-visual-caption {
  position: absolute;
  top: 4%;
  left: 50%;
  color: rgba(20, 36, 55, .42);
  font-size: clamp(10px, .85vw, 13px);
  font-weight: 850;
  letter-spacing: .28em;
  white-space: nowrap;
  transform: translateX(-50%);
}
.screen-stage-visual-result .screen-visual-center,
.screen-stage-visual-mvp .screen-visual-center {
  fill: var(--screen-pro);
  stroke: #ffffff;
}
.screen-stage-visual-result .screen-visual-core,
.screen-stage-visual-mvp .screen-visual-core {
  fill: #ffffff;
}

@keyframes screen-visual-rotate {
  to { transform: rotate(360deg); }
}

@media (max-width: 980px) {
  .debate-screen-page .screen-main > .screen-stage-visual {
    top: 16%;
    right: -92px;
    width: min(58vw, 360px);
    opacity: .12;
  }
  .debate-screen-page .screen-stage-visual-result,
  .debate-screen-page .screen-stage-visual-mvp {
    left: auto;
    right: -92px;
  }
  .screen-visual-badge,
  .screen-visual-caption { display: none; }
}
@media (max-width: 700px) {
  .debate-screen-page .screen-main > .screen-stage-visual {
    top: 8%;
    right: -110px;
    width: 300px;
    opacity: .1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen-visual-ring { animation: none; }
}

/* Projection clarity: remove all decorative motion and overlay artwork from
   the public screen. The stage content is the only visual priority; hiding
   these layers also prevents them from covering long titles or countdowns. */
.screen-page::before,
.screen-page::after,
.debate-screen-page::before,
.debate-screen-page::after,
.debate-screen-page .screen-main::before,
.debate-screen-page .screen-stage-visual,
.screen-vote-visual::before,
.screen-vote-visual::after,
.screen-focus-pie::before,
.screen-focus-pie::after,
.screen-pie::before,
.screen-pie::after,
.screen-countdown-panel::after {
  display: none !important;
  animation: none !important;
}

/* Give result/comparison titles the full projection width. The old layout put
   a title in a narrow side column, which was the main source of avoidable
   wrapping on result screens. */
@media (min-width: 981px) {
  .debate-screen-results {
    grid-template-columns: minmax(300px, .95fr) minmax(420px, 1.25fr) minmax(290px, .9fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "kicker kicker kicker" "title title title" "winner pie legend";
    column-gap: clamp(18px, 2vw, 34px);
    align-content: center;
  }
  .debate-screen-results > .screen-title {
    width: 100%;
    max-width: none;
    text-align: center;
  }
  .debate-screen-results .screen-result-winner {
    align-self: center;
  }
  .debate-screen-results .screen-pie-stage,
  .debate-screen-results .screen-pie-legend {
    align-self: center;
  }
  .debate-screen-comparison {
    width: min(100%, 1280px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "kicker" "title" "panels" "summary";
    align-content: center;
    justify-items: center;
  }
  .debate-screen-comparison > .screen-comparison-kicker { grid-area: kicker; }
  .debate-screen-comparison > .screen-title { grid-area: title; text-align: center; }
  .debate-screen-comparison > .screen-comparison-panels {
    grid-area: panels;
    align-self: center;
  }
  .debate-screen-comparison > .screen-comparison-summary {
    grid-area: summary;
    width: min(100%, 760px);
    text-align: center;
  }
  .screen-live-copy .screen-title.screen-copy-long {
    font-size: clamp(25px, 2vw, 32px) !important;
  }
  .screen-live-copy .screen-title.screen-copy-dense {
    font-size: clamp(22px, 1.7vw, 27px) !important;
  }
}

/* Final projection type scale: keep the major messages visually related
   across waiting, live, vote and result pages. Long copy gets a measured
   reduction, while result labels reserve a real percentage column instead of
   allowing the value to collide with the text. */
@media (min-width: 981px) {
  .debate-screen-page .screen-title {
    font-size: clamp(38px, 4vw, 60px);
    line-height: 1.12;
  }
  .debate-screen-page .screen-title.screen-copy-long {
    font-size: clamp(30px, 2.45vw, 37px) !important;
  }
  .debate-screen-page .screen-title.screen-copy-dense {
    font-size: clamp(22px, 1.65vw, 27px) !important;
  }
  .debate-screen-page .screen-vote-copy .screen-title.screen-copy-long,
  .debate-screen-page .screen-live-copy .screen-title.screen-copy-long,
  .debate-screen-page .debate-chess-context .screen-title.screen-copy-long {
    font-size: clamp(30px, 2.45vw, 37px) !important;
  }
  .debate-screen-page .screen-vote-copy .screen-title.screen-copy-dense,
  .debate-screen-page .screen-live-copy .screen-title.screen-copy-dense,
  .debate-screen-page .debate-chess-context .screen-title.screen-copy-dense {
    font-size: clamp(22px, 1.65vw, 27px) !important;
  }
  .debate-screen-page .screen-kicker > span {
    font-size: clamp(13px, .9vw, 17px);
    line-height: 1.35;
  }
  .debate-screen-page .screen-vote-instruction {
    font-size: clamp(18px, 1.35vw, 23px);
    line-height: 1.35;
  }
  .debate-screen-page .screen-debate-viewpoint strong,
  .debate-screen-page .screen-single-viewpoint strong {
    font-size: clamp(16px, 1.2vw, 20px);
    line-height: 1.3;
  }
  .debate-screen-page .screen-debate-viewpoint strong.screen-copy-long,
  .debate-screen-page .screen-single-viewpoint strong.screen-copy-long {
    font-size: clamp(15px, 1.05vw, 18px) !important;
  }
  .debate-screen-page .screen-debate-viewpoint strong.screen-copy-dense,
  .debate-screen-page .screen-single-viewpoint strong.screen-copy-dense {
    font-size: clamp(14px, .95vw, 17px) !important;
  }
  .debate-screen-page .screen-result-winner strong {
    font-size: clamp(24px, 1.8vw, 32px);
    line-height: 1.2;
  }
  .debate-screen-page .screen-result-winner small {
    font-size: clamp(12px, .85vw, 16px);
    line-height: 1.35;
  }
  .debate-screen-page .screen-pie-item {
    grid-template-columns: 14px minmax(0, 1fr) minmax(76px, 5.8em);
    column-gap: clamp(12px, 1.25vw, 20px);
    padding-block: clamp(10px, 1vh, 14px);
  }
  .debate-screen-page .screen-pie-item-copy {
    column-gap: clamp(7px, .8vw, 12px);
  }
  .debate-screen-page .screen-pie-code {
    font-size: clamp(12px, .85vw, 15px);
  }
  .debate-screen-page .screen-pie-item-copy strong {
    font-size: clamp(15px, 1.1vw, 19px);
    line-height: 1.25;
  }
  .debate-screen-page .screen-pie-item-copy strong.screen-copy-long {
    font-size: clamp(14px, .98vw, 17px) !important;
  }
  .debate-screen-page .screen-pie-item-copy strong.screen-copy-dense {
    font-size: clamp(13px, .88vw, 16px) !important;
  }
  .debate-screen-page .screen-pie-value {
    min-width: 76px;
    font-size: clamp(16px, 1.35vw, 21px);
    line-height: 1.1;
  }
  .debate-screen-page .screen-comparison-summary small {
    font-size: clamp(12px, .95vw, 15px);
    line-height: 1.35;
  }
}

/* When a result label is genuinely long, give that label the full row and
   move its percentage to a separate aligned row. Short labels stay in the
   compact one-line label/value layout above. */
@media (min-width: 981px) {
  .debate-screen-page .screen-pie-item:has(.screen-copy-long),
  .debate-screen-page .screen-pie-item:has(.screen-copy-dense) {
    grid-template-columns: 14px minmax(0, 1fr);
    row-gap: 4px;
  }
  .debate-screen-page .screen-pie-item:has(.screen-copy-long) .screen-pie-value,
  .debate-screen-page .screen-pie-item:has(.screen-copy-dense) .screen-pie-value {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    min-width: 76px;
  }
  .debate-screen-page .screen-pie-item-copy strong.screen-copy-long {
    font-size: clamp(13px, .9vw, 16px) !important;
  }
  .debate-screen-page .screen-pie-item-copy strong.screen-copy-dense {
    font-size: clamp(12px, .78vw, 14px) !important;
  }
}

@media (min-width: 981px) and (max-width: 1199px) {
  .debate-screen-results {
    grid-template-columns: minmax(260px, .9fr) minmax(340px, 1.2fr) minmax(260px, .9fr);
    column-gap: 12px;
  }
}

@media (min-width: 1200px) {
  .debate-screen-results {
    grid-template-columns: minmax(300px, .95fr) minmax(420px, 1.25fr) minmax(330px, .95fr);
    column-gap: clamp(18px, 2vw, 34px);
  }
}

/* Stages 08 and 16 share this comparison screen. Full debate positions use
   the wide row beneath the topic; compact chart legends only identify the
   side, so their percentage column can never collide with long position text. */
.screen-comparison-positions {
  width: min(100%, 1280px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  margin: 0 auto;
}
.screen-comparison-position {
  min-width: 0;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border: 1px solid var(--screen-panel-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
}
.screen-comparison-position b {
  font-size: clamp(14px, 1vw, 17px);
  letter-spacing: .03em;
  white-space: nowrap;
}
.screen-comparison-position.is-pro b { color: var(--screen-pro); }
.screen-comparison-position.is-con b { color: var(--screen-con); }
.screen-comparison-position-text {
  min-width: 0;
  color: #fff;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
}
.screen-comparison-position-text.screen-copy-long {
  font-size: clamp(14px, .95vw, 16px) !important;
}
.screen-comparison-position-text.screen-copy-dense {
  font-size: clamp(12px, .82vw, 14px) !important;
}
.screen-comparison-legend .screen-pie-item {
  grid-template-columns: 14px minmax(90px, 1fr) minmax(76px, 5.8em);
}
.screen-comparison-legend {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row;
}
.screen-comparison-legend .screen-pie-item:first-child { grid-row: 1; }
.screen-comparison-legend .screen-pie-item:nth-child(2) { grid-row: 2; }
.screen-comparison-legend .screen-pie-item-copy strong {
  font-size: clamp(16px, 1.15vw, 20px);
}
.screen-comparison-summary {
  gap: 5px;
}
.screen-comparison-winner-label {
  display: block;
  width: 100%;
  min-width: 0;
  font-size: clamp(14px, 1vw, 17px) !important;
  line-height: 1.3;
  white-space: nowrap;
}
.screen-comparison-winner-label.screen-copy-long {
  font-size: clamp(13px, .9vw, 16px) !important;
}
.screen-comparison-winner-label.screen-copy-dense {
  font-size: clamp(12px, .8vw, 14px) !important;
}
.screen-comparison-percentages {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  margin-top: 3px;
  white-space: nowrap;
}
.screen-comparison-percentages span {
  color: var(--screen-copy);
  font-size: clamp(13px, .95vw, 16px);
}
.screen-comparison-percentages b {
  margin-left: 7px;
  color: var(--screen-pro);
  font: 800 clamp(18px, 1.35vw, 23px)/1 var(--mono);
  letter-spacing: .02em;
}
.screen-comparison-percentages span:last-child b { color: var(--screen-con); }

@media (min-width: 981px) {
  .debate-screen-page {
    height: 100vh;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 10px;
    padding: 24px clamp(28px, 3vw, 48px) 36px;
    overflow: hidden;
  }
  .debate-screen-page .screen-main {
    width: min(1440px, 100%);
    height: 100%;
    min-height: 0;
    padding-bottom: 18px;
    place-content: stretch;
  }
  .debate-screen-comparison {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "kicker" "title" "positions" "panels" "summary";
    row-gap: clamp(8px, 1.15vh, 14px);
    align-content: start;
    padding-bottom: 8px;
  }
  .debate-screen-comparison > .screen-comparison-positions { grid-area: positions; }
  .debate-screen-comparison > .screen-comparison-panels {
    min-height: 0;
    align-self: center;
  }
  .debate-screen-comparison .screen-comparison-card {
    padding: clamp(12px, 1.4vw, 20px);
  }
  .debate-screen-comparison .screen-comparison-card-body {
    margin-top: 6px;
  }
  .debate-screen-comparison .screen-comparison-card .screen-pie {
    width: min(100%, min(18vw, 27vh, 280px));
  }
  .debate-screen-comparison > .screen-comparison-summary {
    margin-bottom: 8px;
    padding-block: 9px;
  }
}

@media (max-width: 980px) {
  .screen-comparison-positions {
    grid-template-columns: minmax(0, 1fr);
  }
  .screen-comparison-position {
    grid-template-columns: 1fr;
    gap: 5px;
    text-align: center;
  }
  .screen-comparison-position-text,
  .screen-comparison-winner-label {
    white-space: normal;
    overflow-wrap: break-word;
  }
}

@media (min-width: 981px) and (max-height: 800px) {
  .debate-screen-page {
    padding-top: 16px;
    padding-bottom: 28px;
    row-gap: 6px;
  }
  .debate-screen-page .screen-main { padding-bottom: 14px; }
  .debate-screen-comparison {
    row-gap: 6px;
  }
  .debate-screen-comparison > .screen-title {
    font-size: clamp(22px, 2vw, 30px) !important;
  }
  .screen-comparison-position {
    padding-block: 6px;
  }
  .debate-screen-comparison .screen-comparison-card {
    padding: 10px 14px;
  }
  .debate-screen-comparison .screen-comparison-card .screen-pie {
    width: min(100%, min(17vw, 24vh, 220px));
  }
  .debate-screen-comparison .screen-comparison-card-head h2 {
    font-size: clamp(18px, 1.6vw, 24px);
  }
  .debate-screen-comparison > .screen-comparison-summary {
    margin-bottom: 6px;
    padding-block: 7px;
  }
  .debate-screen-comparison .screen-comparison-summary > strong {
    font-size: clamp(22px, 2vw, 30px);
  }
}

/* Stage 19: reveal both debate MVP winners without exposing vote totals. */
.screen-mvp-summary {
  width: min(1380px, 100%);
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2vh, 26px);
  align-content: center;
  text-align: center;
}
.screen-mvp-summary > .screen-kicker { width: 100%; }
.screen-mvp-summary-heading {
  display: grid;
  justify-items: center;
  gap: 5px;
}
.screen-mvp-summary-heading > span {
  color: var(--screen-pro);
  font-size: clamp(14px, 1.2vw, 19px);
  font-weight: 800;
  letter-spacing: .08em;
}
.screen-mvp-summary-heading > .screen-title {
  max-width: none;
  margin: 0;
  font-size: clamp(38px, 4.7vw, 72px);
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
}
.screen-mvp-summary-grid {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vh, 24px);
}
.screen-mvp-summary-card {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(190px, 30%);
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  padding: clamp(16px, 1.7vw, 26px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 5px solid var(--screen-pro);
  border-radius: 8px;
  background: rgba(12, 28, 41, .82);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .2);
  text-align: left;
}
.screen-mvp-summary-card:nth-child(2) { border-left-color: var(--screen-con); }
.screen-mvp-topic-index {
  color: var(--screen-muted);
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 800;
  white-space: nowrap;
}
.screen-mvp-summary-card > h2 {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: white;
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
}
.screen-mvp-summary-card > h2.screen-copy-long { font-size: clamp(18px, 1.55vw, 26px); }
.screen-mvp-summary-card > h2.screen-copy-dense { font-size: clamp(16px, 1.3vw, 22px); }
.screen-mvp-award {
  min-width: 0;
  max-width: 100%;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding-left: clamp(18px, 2vw, 30px);
  border-left: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
}
.screen-mvp-award > span {
  color: var(--screen-muted);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 700;
  white-space: nowrap;
}
.screen-mvp-award > strong {
  display: block;
  max-width: 100%;
  color: var(--screen-pro);
  font-size: clamp(28px, 2.7vw, 44px);
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
}
.screen-mvp-summary-card:nth-child(2) .screen-mvp-award > strong { color: var(--screen-con); }
.screen-mvp-award > strong.screen-copy-long { font-size: clamp(24px, 2.4vw, 38px); }
.screen-mvp-award > strong.screen-copy-dense { font-size: clamp(20px, 2vw, 32px); }
.screen-mvp-summary > .screen-status { margin: 0 0 8px; }

@media (min-width: 981px) and (max-width: 1380px) {
  .screen-mvp-summary-card {
    grid-template-columns: auto minmax(0, 1fr) minmax(170px, 26%);
    gap: 14px;
  }
  .screen-mvp-summary-card > h2 { font-size: clamp(18px, 1.7vw, 25px); }
  .screen-mvp-award { padding-left: 14px; }
  .screen-mvp-award > strong { font-size: clamp(26px, 2.6vw, 38px); }
}

@media (max-width: 980px) {
  .screen-mvp-summary { height: auto; }
  .screen-mvp-summary-grid { grid-template-rows: none; }
  .screen-mvp-summary-card {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    text-align: center;
  }
  .screen-mvp-summary-card > h2,
  .screen-mvp-award > strong { white-space: normal; overflow-wrap: break-word; }
  .screen-mvp-award { width: 100%; padding: 14px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
}

@media (min-width: 981px) and (max-height: 760px) {
  .screen-mvp-summary { gap: 10px; }
  .screen-mvp-summary-heading > .screen-title { font-size: clamp(34px, 4vw, 58px); }
  .screen-mvp-summary-card { padding: 14px 22px; }
  .screen-mvp-award > strong { font-size: clamp(28px, 2.7vw, 42px); }
}

/* Final projection palette lock. This is intentionally last because this
   stylesheet contains older screen themes kept for compatibility. */
.screen-page,
.debate-screen-page {
  --screen-bg: #0b1020;
  --screen-ink: #f7f2e8;
  --screen-copy: #94a0b8;
  --screen-muted: #77839b;
  --screen-panel: rgba(20, 27, 47, .78);
  --screen-panel-strong: rgba(20, 27, 47, .92);
  --screen-panel-line: #2c3754;
  --screen-pro: #f26a5a;
  --screen-con: #55b8d9;
  --screen-accent: #f1c75b;
  --orange: #f26a5a;
  --orange-dark: #f1c75b;
  --teal: #55b8d9;
  --navy: #141b2f;
  --navy-2: #203458;
  --navy-3: #2c4770;
  color: var(--screen-ink);
  background:
    radial-gradient(circle at 50% 42%, rgba(85, 184, 217, .11), transparent 34%),
    radial-gradient(circle at 9% 92%, rgba(242, 106, 90, .08), transparent 27%),
    var(--screen-bg);
}
.screen-page::before,
.debate-screen-page::before {
  border-color: rgba(241, 199, 91, .2) !important;
  box-shadow: 0 0 0 70px rgba(241, 199, 91, .028), 0 0 0 140px rgba(85, 184, 217, .025) !important;
}
.screen-page::after,
.debate-screen-page::after {
  background:
    radial-gradient(circle at 12% 25%, rgba(242, 106, 90, .34) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 72%, rgba(85, 184, 217, .3) 0 2px, transparent 3px),
    linear-gradient(117deg, transparent 0 47%, rgba(241, 199, 91, .08) 47.1% 47.25%, transparent 47.4% 100%) !important;
}
.screen-page .screen-top,
.screen-page .screen-main,
.screen-page .screen-top .brand,
.debate-screen-page .screen-top,
.debate-screen-page .screen-main,
.debate-screen-page .screen-top .brand { color: var(--screen-ink); }
.screen-page .screen-top .brand small,
.debate-screen-page .screen-top .brand small { color: var(--screen-muted); }
.screen-page .screen-controls .button-ghost,
.debate-screen-page .screen-controls .button-ghost { color: var(--screen-copy); border-color: rgba(148, 160, 184, .35); background: rgba(20, 27, 47, .72); }
.screen-page .screen-kicker,
.debate-screen-page .screen-kicker { color: var(--screen-copy); }
.screen-page .screen-title,
.screen-page .screen-progress-label strong,
.screen-page .screen-result-row .result-name strong,
.screen-page .screen-result-row .result-value,
.debate-screen-page .screen-title,
.debate-screen-page .screen-vote-instruction,
.debate-screen-page .screen-debate-viewpoint strong,
.debate-screen-page .screen-single-viewpoint strong,
.debate-screen-page .screen-result-winner strong,
.debate-screen-page .screen-comparison-card-head h2,
.debate-screen-page .screen-comparison-summary strong,
.debate-screen-page .screen-focus-pie-hole strong,
.debate-screen-page .screen-pie-hole strong,
.debate-screen-page .screen-pie-hole-binary strong,
.debate-screen-page .screen-pie-item-copy strong { color: var(--screen-ink); }
.screen-page .screen-proposition,
.screen-page .screen-waiting p,
.screen-page .screen-result-row .result-name small,
.screen-page .screen-status,
.screen-page .screen-foot,
.debate-screen-page .screen-proposition,
.debate-screen-page .screen-vote-context,
.debate-screen-page .screen-stage-description,
.debate-screen-page .screen-status,
.debate-screen-page .screen-foot,
.debate-screen-page .screen-waiting-proposition,
.debate-screen-page .screen-comparison-rule,
.debate-screen-page .screen-result-winner small { color: var(--screen-copy); }
.screen-page .screen-status::before,
.debate-screen-page .screen-status::before { background: var(--screen-con); }
.screen-page .screen-progress,
.screen-page .screen-result-row .result-track { background: rgba(148, 160, 184, .18); }
.screen-page .screen-progress-fill { background: linear-gradient(90deg, var(--screen-pro), var(--screen-accent)); }
.screen-page .screen-percent,
.screen-page .screen-kicker .screen-time,
.screen-page .screen-topic-prefix { color: var(--screen-accent); }
.debate-screen-page .screen-waiting-topic-block,
.debate-screen-page .screen-vote-copy,
.debate-screen-page .screen-live-copy,
.debate-screen-page .debate-chess-context,
.debate-screen-page .screen-comparison-card,
.debate-screen-page .screen-comparison-summary,
.debate-screen-page .screen-pie-legend,
.debate-screen-page .screen-debate-viewpoint,
.debate-screen-page .screen-single-viewpoint { border-color: var(--screen-panel-line); background: var(--screen-panel); box-shadow: 0 20px 52px rgba(0, 0, 0, .24); }
.debate-screen-page .screen-vote-copy,
.debate-screen-page .screen-live-copy,
.debate-screen-page .debate-chess-context { background: linear-gradient(145deg, var(--screen-panel-strong), rgba(20, 27, 47, .56)); }
.debate-screen-page .screen-vote-visual { border-color: rgba(241, 199, 91, .3); background: radial-gradient(circle at 50% 42%, rgba(85, 184, 217, .12), transparent 60%), rgba(20, 27, 47, .72); }
.debate-screen-page .screen-debate-viewpoint.is-pro,
.debate-screen-page .screen-single-viewpoint.is-pro { border-color: rgba(242, 106, 90, .48); background: rgba(242, 106, 90, .09); }
.debate-screen-page .screen-debate-viewpoint.is-con,
.debate-screen-page .screen-single-viewpoint.is-con { border-color: rgba(85, 184, 217, .48); background: rgba(85, 184, 217, .09); }
.debate-screen-page .screen-card-label,
.debate-screen-page .screen-debate-viewpoint.is-pro .screen-card-label,
.debate-screen-page .screen-single-viewpoint.is-pro span { color: var(--screen-pro); }
.debate-screen-page .screen-debate-viewpoint.is-con .screen-card-label,
.debate-screen-page .screen-single-viewpoint.is-con span { color: var(--screen-con); }
.debate-screen-page .screen-countdown-panel { border-color: rgba(241, 199, 91, .48); background: linear-gradient(135deg, #141b2f 0%, #203458 100%); box-shadow: 0 18px 42px rgba(0, 0, 0, .32), 0 0 0 5px rgba(241, 199, 91, .08); }
.debate-screen-page .screen-countdown-panel > span,
.debate-screen-page .screen-pie-value { color: var(--screen-accent); }
.debate-screen-page .screen-countdown-value { color: var(--screen-ink); text-shadow: 0 4px 24px rgba(241, 199, 91, .32); }
.debate-screen-page .screen-focus-pie-hole,
.debate-screen-page .screen-pie-hole,
.debate-screen-page .screen-pie-hole-binary { background: #141b2f; }
.debate-screen-page .screen-focus-pie-hole span,
.debate-screen-page .screen-pie-hole span,
.debate-screen-page .screen-pie-code,
.debate-screen-page .screen-result-winner span { color: var(--screen-muted); }
.debate-screen-page .screen-pie-item { border-bottom-color: rgba(148, 160, 184, .18); }
.debate-screen-page .screen-comparison-summary { background: rgba(241, 199, 91, .12); border-color: rgba(241, 199, 91, .48); }
.debate-screen-page .screen-comparison-summary span,
.debate-screen-page .screen-comparison-summary strong,
.debate-screen-page .screen-topic-prefix { color: var(--screen-accent); }
.debate-screen-page .screen-mvp-code { color: var(--screen-accent); }
.screen-focus-pie::after,
.screen-pie::after { background: var(--screen-accent); box-shadow: 0 0 0 6px rgba(241, 199, 91, .1), 0 0 20px rgba(241, 199, 91, .55); }
.screen-focus-pie::before,
.screen-pie::before { border-color: rgba(241, 199, 91, .24); }