/* Visible actions for the desktop host; secondary does not mean tiny. */
.site-header .header-actions { gap: 10px; }
.site-header .quiet-button, .broadcast-help-actions .quiet-button {
  min-height: 44px; padding: 10px 16px; gap: 8px; font-size: 14px;
  font-weight: 600; border-radius: 11px; white-space: nowrap;
}
.site-header .quiet-button svg { width: 18px; height: 18px; }
.site-header .demo-entry {
  color: #ffe4a3; border-color: #bb985866; background: #eec36a16;
  box-shadow: inset 0 1px #ffe1a114;
}
.site-header .demo-entry:hover { background: #eec36a28; border-color: #efc36a; }
.site-header .demo-entry svg { color: #f0cd84; }
.site-header .demo-entry[data-active=true] { color: #e3d6ff; border-color: #b697f388; background: #ae8ee51a; }
.site-header .demo-entry[data-active=true] svg { color: inherit; }
.stage-panel .stage-toolbar { min-height: 64px; padding: 10px 18px; gap: 12px; flex-wrap: wrap; }
.stage-panel .stage-identity { min-width: 0; }
.stage-panel .stage-identity > strong { font-size: 16px; white-space: nowrap; }
.stage-panel .stage-tools { gap: 8px; align-items: center; flex-wrap: wrap; }
.stage-panel .stage-tools > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: auto; height: 42px; min-height: 42px; padding: 9px 12px; font-size: 14px;
  font-weight: 550; white-space: nowrap; border: 1px solid #ffffff24;
  border-radius: 10px; background: #ffffff05; color: #d5dbe6; flex-shrink: 0;
}
.stage-panel .stage-tools > button:hover { border-color: #d3b67688; background: #f0c56a12; color: #ffe1a3; }
.stage-panel .stage-tools > button:disabled { opacity: .45; }
.stage-panel .stage-tools > .broadcast-button { color: #f4d48f; border-color: #c1a05d88; background: #eac1640d; }
.stage-panel .stage-tools svg { width: 18px; height: 18px; flex-shrink: 0; }
.stage-panel .stage-tools #sound-state-label { display: inline; }
.stage-panel .stage-tools .sound-toggle[aria-pressed=false] { color: #aeb6c6; opacity: 1; }
.stage-panel .demo-banner {
  flex-shrink: 0; padding: 10px 20px; min-height: 66px; gap: 18px;
  color: #d9ccee; border-top: 1px solid #c2a5ef22; border-bottom: 1px solid #c2a5ef33;
  background: linear-gradient(105deg,#a987dc1b,#a987dc08);
}
.demo-banner-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; min-width: 0; }
.demo-banner-copy strong { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: #e3d5fa; white-space: nowrap; }
.demo-banner-copy > span { font-size: 13px; color: #b8afc9; }
.demo-banner .demo-indicator { background: #c4a1f5; box-shadow: 0 0 0 4px #b293e716; }
.stage-panel .demo-banner #exit-demo {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 152px; min-height: 44px; padding: 10px 16px; flex-shrink: 0;
  font-size: 14px; font-weight: 650; color: #f0e7ff; border: 1px solid #b49ad18c;
  border-radius: 10px; background: #9d7bcd22;
}
.stage-panel .demo-banner #exit-demo:hover { border-color: #d7b7ff; background: #a887dc38; }
.demo-banner #exit-demo svg { width: 18px; height: 18px; }
.demo-banner #exit-demo:disabled { opacity: .45; }
.rules-section .advanced-settings-button {
  position: static; width: auto; min-height: 36px; margin: 0; padding: 7px 10px;
  gap: 6px; font-size: 13px; border: 1px solid #ffffff26; border-radius: 8px;
  color: #d5c7a9; background: #ffffff04;
}
.rules-section .advanced-settings-button svg { width: 15px; height: 15px; }
.control-panel .participants-heading { flex-wrap: wrap; row-gap: 6px; }
.control-panel .audience-tabs { width: 100%; justify-content: space-between; gap: 12px; }
.control-panel .audience-tabs button { min-height: 40px; padding: 8px 0; font-size: 14px; }
.control-panel .audience-tabs b { font-size: 12px; padding: 2px 5px; }
.control-panel .audience-tools { width: 100%; justify-content: space-between; }
.control-panel .audience-tools > button { min-height: 36px; padding: 7px 10px; font-size: 13px; border: 1px solid #ffffff20; border-radius: 8px; }
.control-panel .audience-tools #audience-expand-btn { width: auto; gap: 6px; color: #d6c293; background: #e8c56d08; }
.control-panel .audience-tools #clear-btn { color: #b6becd; }
.control-panel .audience-tools #clear-btn:disabled { opacity: .4; }
.control-panel .audience-tools svg { width: 16px; height: 16px; }
.control-panel .section-label { align-items: center; }
.broadcast-controls-dialog .section-label, .control-panel .rules-section .section-label { margin-bottom: 8px; }
.broadcast-controls-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.broadcast-controls-dialog .dialog-heading { flex-shrink: 0; }
.broadcast-control-body { min-height: 0; overflow: auto; padding: 2px; }
.broadcast-help-actions { display: flex; flex-shrink: 0; gap: 10px; margin: 0 0 16px; border-bottom: 1px solid #ffffff12; padding-bottom: 16px; }
.broadcast-help-actions > button { flex: 1; }
dialog .dialog-close { width: 42px; height: 42px; border: 1px solid #ffffff24; background: #ffffff04; }
dialog .secondary-button, dialog .primary-button, dialog .text-button, dialog .copy-record,
dialog .room-refresh-button, dialog .search-box button { min-height: 40px; font-size: 14px; padding: 9px 13px; }
dialog .copy-record { border: 1px solid #d4b16f44; border-radius: 8px; background: #d4b16f08; margin-top: 8px; }
dialog .field-label, dialog .check-label, dialog .motion-select, dialog .search-box input { font-size: 14px; }
dialog .check-label input { width: 17px; height: 17px; }
button:focus-visible { outline: 2px solid #f3d491; outline-offset: 3px; }
@media (min-width: 961px) and (min-height: 600px) {
  body:not(.broadcast-mode) { grid-template-rows: 72px minmax(0,1fr) 24px; }
  .site-header { height: 72px; }
  .workspace { grid-template-columns: 312px minmax(0,1fr); }
  .control-panel .room-picker { min-height: 60px; }
  .control-panel .room-copy strong { font-size: 14px; }
  .control-panel .room-copy small { font-size: 11px; }
  .control-panel .field-label { font-size: 13px; }
  .control-panel .keyword-field { height: 42px; }
  .control-panel .keyword-field input { font-size: 17px; }
  .control-panel .number-field, .control-panel .text-field { height: 40px; }
  .control-panel .number-field button { width: 36px; height: 36px; font-size: 20px; }
  .control-panel .primary-button, .control-panel .secondary-button { min-height: 44px; font-size: 14px; }
  .control-panel .collection-status { margin: 7px 0 8px; font-size: 10px; }
  .stage-panel .stage-actions .draw-button { min-height: 50px; height: 50px; font-size: 18px; }
  .stage-panel .style-tab { min-height: 58px; }
  .stage-panel .style-name { font-size: 13px; }
  .stage-panel .style-name small { font-size: 9px; }
  .stage-panel .dock-label { font-size: 11px; }
  .stage-panel .stage-footer { display: none; }
}
.broadcast-mode .stage-tools { margin-left: auto; }
.broadcast-mode .stage-toolbar .stage-identity { flex: 1 1 240px; }
.broadcast-mode .stage-tools > button { min-height: 44px; height: 44px; font-size: 14px; }
.broadcast-mode .stage-tools > .icon-button { width: auto; height: 44px; padding: 9px 12px; }
.broadcast-mode .stage-tools #sound-test-btn { display: none; }
.broadcast-mode .stage-actions .draw-button { min-height: 58px; font-size: 22px; }
.collection-expanded .stage-tools #sound-state-label { display: none; }
.motion-mode-button, .new-chat-button { min-height: 36px; font-size: 13px; padding: 7px 11px; }
@media (min-width: 961px) and (min-height: 600px) and (max-height: 850px) {
  /* Keep animation space by dropping ornament, while retaining full-sized actions. */
  body:not(.broadcast-mode) .stage-intro { display: block; }
  body:not(.broadcast-mode) .stage-intro h1,
  body:not(.broadcast-mode) .stage-intro .stage-kicker,
  body:not(.broadcast-mode) .stage-intro .stage-description { display: none; }
  body:not(.broadcast-mode) .stage-meta { display: flex; flex-wrap: wrap; margin: 0; gap: 8px 14px; font-size: 13px; }
  body:not(.broadcast-mode) .stage-meta .meta-keyword { margin-left: auto; padding: 5px 12px; }
  body:not(.broadcast-mode) .stage-meta .meta-keyword b { font-size: 28px; }
  body:not(.broadcast-mode) .stage-meta strong { font-size: 25px; }
  body:not(.broadcast-mode) .stage-meta > i { display: none; }
  body:not(.broadcast-mode):not(.collection-expanded) .room-stat { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1px 6px; padding: 8px 12px; }
  body:not(.broadcast-mode):not(.collection-expanded) .room-stat > span { font-size: 11px; line-height: 1.4; white-space: normal; }
  body:not(.broadcast-mode):not(.collection-expanded) .room-stat > div { margin: 0; }
  body:not(.broadcast-mode):not(.collection-expanded) .room-stat strong { font-size: 25px; }
  body:not(.broadcast-mode):not(.collection-expanded) .room-stat p { grid-column: 1 / -1; margin: 2px 0 0; }
  body:not(.broadcast-mode) .stage-actions { margin-bottom: 0; }
}
@media (min-width: 1500px) and (min-height: 900px) {
  .broadcast-mode .stage-tools > button { font-size: 17px; min-height: 48px; height: 48px; }
  .broadcast-mode .stage-actions .draw-button { min-height: 68px; font-size: 28px; }
}

/* One action area explains the current state and keeps the next action in place. */
.stage-panel .stage-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; width: 100%; padding: 12px 14px; border: 1px solid #d2b87830; border-radius: 13px; background: #e7c67806; }
.action-guidance { flex: 1 1 180px; min-width: 0; text-align: left; }
.action-guidance > strong { display: block; font-size: 15px; color: #e5d4ad; font-weight: 600; line-height: 1.5; }
.stage-panel .action-guidance .draw-hint { margin: 4px 0 0; font-size: 12px; line-height: 1.6; min-height: 0; color: #aab5c9; }
.action-buttons, .result-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.action-buttons { margin-left: auto; }
.stage-panel .action-buttons > .secondary-button, .stage-panel .result-actions > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 9px 12px; font-size: 14px; border-color: #ffffff30; border-radius: 9px; background: #ffffff06; color: #d6deec; white-space: nowrap; }
.result-actions svg { width: 17px; height: 17px; }
.broadcast-mode .action-guidance > strong { font-size: 20px; }
.broadcast-mode .action-guidance .draw-hint { font-size: 13px; }
.broadcast-mode .stage-actions { flex-shrink: 0; }
.broadcast-mode .action-buttons .draw-button { min-width: 240px; }
.broadcast-mode .result-actions > button { min-height: 44px; font-size: 15px; }
.room-picker-action { font-size: 13px; color: #e9cb8a; border: 1px solid #d3ae6655; border-radius: 6px; padding: 4px 7px; white-space: nowrap; flex-shrink: 0; }
.control-panel .connection-detail { font-size: 11px; line-height: 1.6; color: #a9b5cb; }
.control-panel .collection-status { font-size: 12px; line-height: 1.5; }
.audience-tabs, .control-panel .audience-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; padding: 3px; border: 1px solid #ffffff16; border-radius: 10px; background: #10141c; }
.audience-tabs button, .control-panel .audience-tabs button { min-height: 40px; padding: 8px; border: 1px solid transparent; border-radius: 7px; color: #a7b3c9; }
.audience-tabs button[aria-selected=true] { color: #ffe1a0; background: #e9be601c; border-color: #c5a66666; }
.audience-tabs button[aria-selected=true] b { color: #ffe1a0; }
.control-panel .audience-tools #clear-btn { font-size: 13px; min-height: 38px; }
.danger-button:not(:disabled), .control-panel .audience-tools #clear-btn:not(:disabled) { color: #eca5a1; border-color: #d386803e; background: #d3868008; }
.danger-button:not(:disabled):hover { color: #ffc5c0; border-color: #d38680; background: #d3868018; }
#confirm-ok.danger-button { color: #fff4f1; border-color: #e29a8f; background: #9e5046; }
.confirm-dialog .confirm-actions { gap: 12px; }
.confirm-dialog .confirm-actions > button { min-height: 44px; padding: 10px 18px; font-size: 14px; }

/* Dialog headings and footer actions stay visible while their content scrolls. */
.app-dialog[open] { display: flex; flex-direction: column; gap: 0; overflow: hidden; max-height: calc(100dvh - 48px); padding: 24px; }
.app-dialog .dialog-heading { flex-shrink: 0; margin: 0; padding: 0 0 18px; border-bottom: 1px solid #ffffff18; align-items: center; }
.dialog-heading .eyebrow { font-size: 12px; line-height: 1.6; letter-spacing: .03em; color: #a6b2c6; }
.dialog-heading .dialog-close { display: inline-flex; gap: 6px; width: auto; min-width: 76px; height: 42px; padding: 9px 12px; flex-shrink: 0; align-self: center; font-size: 14px; color: #c9d2e1; }
.dialog-heading .dialog-close svg { width: 17px; height: 17px; }
.app-dialog .dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 3px; overscroll-behavior: contain; }
.app-dialog .dialog-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; flex-shrink: 0; gap: 12px; margin: 0; padding: 16px 0 0; border-top: 1px solid #ffffff18; }
.dialog-footer > p { margin: 0; flex: 1 1 200px; font-size: 12px; line-height: 1.7; color: #a7b3c7; }
.dialog-footer > button, .dialog-footer-actions > button { min-height: 44px; padding: 10px 16px; font-size: 14px; width: auto; }
.dialog-footer-actions { display: flex; gap: 10px; align-items: center; }
.dialog-feedback { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #8dcabf44; border-radius: 8px; background: #8dcabf0b; color: #aee2d8; font-size: 13px; line-height: 1.7; flex-shrink: 0; }
.settings-dialog.app-dialog { width: min(550px,calc(100vw - 48px)); }
.settings-group { margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid #ffffff12; }
.settings-group h3 { margin: 0 0 12px; font-size: 16px; color: #f1dba9; font-weight: 600; }
.settings-group .check-label { min-height: 36px; margin: 0 0 8px; gap: 10px; }
.settings-group .check-label input { flex-shrink: 0; width: 18px; height: 18px; }
.settings-group .field-label { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 6px; font-size: 14px; color: #c0ccdf; }
.settings-group .settings-note, .settings-group .motion-settings-note { margin: 8px 0; font-size: 13px; line-height: 1.7; color: #a9b8cf; }
#rules-lock-note { padding: 10px 12px; border: 1px solid #c2a15e44; border-radius: 8px; background: #c2a15e09; color: #d9caa9; }
.settings-group .motion-select { min-height: 42px; font-size: 14px; margin-top: 0; }
.settings-group input[type=range] { min-height: 28px; margin-bottom: 6px; }
.audio-settings-actions { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.audio-settings-actions button { display: inline-flex; align-items: center; gap: 8px; }
.audio-settings-actions svg { width: 18px; height: 18px; }
.audio-settings-actions .audio-meter { flex: 1; }
.app-dialog .fairness-note { font-size: 12px; line-height: 1.7; margin: 0; }
.room-dialog.app-dialog { width: min(730px,calc(100vw - 48px)); }
.app-dialog #room-search-form { flex-shrink: 0; margin-top: 18px; }
.app-dialog .search-box { min-height: 52px; }
.app-dialog .search-box input, .app-dialog .search-box input::placeholder { font-size: 14px; }
.app-dialog .search-box button { min-height: 42px; min-width: 102px; font-size: 14px; white-space: nowrap; }
.app-dialog .room-filter { flex-shrink: 0; font-size: 14px; margin: 16px 0 0; }
.app-dialog .room-filter .check-label { min-height: 40px; padding: 7px 9px; border: 1px solid #ffffff1e; border-radius: 8px; font-size: 14px; }
.app-dialog #room-search-status { font-size: 13px; line-height: 1.7; }
.app-dialog .room-results { max-height: none; overflow: visible; }
.app-dialog .creator-result { border-color: #ffffff12; margin-bottom: 8px; padding: 13px; min-height: 90px; }
.app-dialog .creator-result:hover { border-color: #d6b66f88; background: #e8c56b0b; }
.app-dialog .creator-result .room-copy strong { font-size: 16px; line-height: 1.5; }
.app-dialog .creator-result .room-copy small { font-size: 13px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.creator-meta { display: flex; gap: 8px 14px; flex-wrap: wrap; margin-top: 5px; }
.creator-meta .creator-live, .creator-meta .online-label { font-size: 12px; margin: 0; }
.creator-action { padding: 9px 12px; border: 1px solid #d6b66f55; border-radius: 9px; font-size: 14px; color: #e8ca89; white-space: nowrap; flex-shrink: 0; }
.creator-result:disabled .creator-action { color: #8b97ae; border-color: #ffffff18; }
.creator-result[data-current=true] { border-color: #8fceba66; }
.creator-result[data-current=true] .creator-action { color: #ade4d4; border-color: #8fceba55; }
.records-dialog.app-dialog { width: min(930px,calc(100vw - 48px)); }
.app-dialog .records-tools { flex-shrink: 0; margin: 16px 0; font-size: 14px; }
.app-dialog .records-tools .secondary-button { font-size: 14px; min-height: 42px; }
.app-dialog .record-top { font-size: 12px; line-height: 1.6; }
.app-dialog .record-top > strong { font-size: 15px; }
.app-dialog .record-winners { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.app-dialog .record-winner { border-radius: 10px; padding: 12px; }
.app-dialog .record-avatar { width: 48px; height: 48px; flex-basis: 48px; border-radius: 12px; }
.app-dialog .record-winner-details > span { font-size: 16px; line-height: 1.5; }
.app-dialog .record-winner-details > small { font-size: 11px; line-height: 1.6; }
.app-dialog .record-winner-details > .profile-link { display: inline-flex; min-height: 40px; padding: 8px 10px; border: 1px solid #d6b66f44; border-radius: 7px; background: #e9c57708; font-size: 14px; }
.app-dialog .record-info { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-size: 13px; line-height: 1.6; }
.app-dialog .copy-record { flex-shrink: 0; margin: 0; }
.toast-stack { top: 84px; bottom: auto; }
.toast { font-size: 14px; line-height: 1.6; }
.winner-count-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.winner-count-row .field-label { margin: 0; white-space: nowrap; }
.control-panel .winner-count-row .number-field { flex: 0 1 150px; width: 150px; height: 42px; margin: 0; }
.stage-identity .round-tag { font-size: 12px; white-space: nowrap; padding: 5px 7px; }
.settings-group > .text-field { width: 100%; min-height: 42px; font-size: 14px; margin: 0 0 8px; }
@media (min-width: 961px) and (min-height: 600px) and (max-height: 850px) {
  body:not(.broadcast-mode) .workspace > .control-panel .collection-status { display: none; }
}

/* Shared detail pass: readable captions, quiet surfaces, clear interactive states. */
:root { --ui-caption: #a4aec0; --ui-border: #ffffff20; --ui-hover: #efca7c10; }
button { -webkit-tap-highlight-color: transparent; }
button:disabled { box-shadow: none; }
a:focus-visible, input:focus-visible, select:focus-visible,
.audience-scroll:focus-visible { outline: 2px solid #f3d491; outline-offset: 3px; }
input:disabled, select:disabled { -webkit-text-fill-color: #c2c9d7; color: #c2c9d7; opacity: 1; cursor: not-allowed; }
.keyword-field input:disabled { -webkit-text-fill-color: #ecd5a6; color: #ecd5a6; }
.keyword-field .keyword-badge { color: #a4aec0; font-size: 10px; }
.number-field:focus-within { border-color: #d4b474; box-shadow: 0 0 0 3px #d4b47412; }
.number-field button { border-radius: 7px; }
.number-field button:hover:not(:disabled) { background: #f0c97512; }
.stage-panel .stage-tools > button[aria-pressed=true] { color: #ffe0a0; border-color: #d1ac6566; background: #d1ac6512; }
.stage-panel .stage-tools > #sound-btn[aria-pressed=true] { color: #c3e7d8; border-color: #8dbfa84d; background: #8dbfa80b; }
.stage-panel .stage-tools > button:disabled { color: #919aaa; border-color: #ffffff12; background: #ffffff02; opacity: .7; }
.stage-panel .action-buttons > .secondary-button:hover:not(:disabled),
.stage-panel .result-actions > button:hover:not(:disabled),
.control-panel .audience-tools > button:hover:not(:disabled):not(.danger-button) { border-color: #d6b16a88; background: var(--ui-hover); color: #ffe0a0; }
.site-header .record-count { min-width: 22px; text-align: center; font-size: 12px; border: 1px solid #ffffff09; background: #ffffff08; }
.audience-tabs button, .control-panel .audience-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.audience-tabs b, .control-panel .audience-tabs b { margin-left: 0; min-width: 22px; text-align: center; line-height: 1.4; }
.audience-tabs button:hover:not([aria-selected=true]) { background: #ffffff05; color: #d7deeb; }
.audience-tabs button[aria-selected=true] { box-shadow: inset 0 1px #ffe1a110; }
.participant-row .joined { padding: 2px 5px; border-radius: 5px; color: #a1bdad; white-space: nowrap; background: #96c4ad08; }
.participant-row.won .joined { color: #e8cd93; background: #e8bd6012; }
.participant-index { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.chat-meta { align-items: baseline; gap: 6px 10px; }
.chat-name { min-width: 0; overflow-wrap: anywhere; }
.chat-time { font-variant-numeric: tabular-nums; }
.chat-text { margin-bottom: 0; }
.empty-participants { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100%; padding: 16px 10px; gap: 8px; }
.empty-participants > svg { width: 30px; height: 30px; padding: 5px; box-sizing: content-box; color: #b0a78d; border: 1px solid #d7bf8b24; border-radius: 12px; background: #d7bf8b07; }
.empty-participants > p { margin: 0; font-size: 13px; line-height: 1.6; color: #c4ccda; }
.empty-participants > span { max-width: 340px; font-size: 11px; line-height: 1.7; color: var(--ui-caption); }
.empty-records { min-height: 230px; }
.empty-records > svg { width: 36px; height: 36px; padding: 12px; border-radius: 18px; }
.empty-records > p { margin-top: 8px; font-size: 18px; color: #ead6ac; }
.empty-records > span { max-width: 400px; font-size: 14px; }
.participants-note, .chat-note { color: var(--ui-caption); line-height: 1.6; }
.dialog-body, .broadcast-control-body, .audience-scroll, .guide-card,
.winner-card strong { scrollbar-width: thin; scrollbar-color: #66605266 transparent; }
.app-dialog .dialog-body { padding: 18px 5px 18px 2px; scrollbar-gutter: stable; }
.app-dialog .dialog-heading h2 { margin-top: 5px; font-size: 24px; line-height: 1.4; letter-spacing: -.3px; }
.app-dialog .dialog-close:hover { color: #f4ddae; border-color: #d4b17177; background: #d4b1710c; }
.app-dialog .search-box:focus-within { border-color: #d4b171; box-shadow: 0 0 0 3px #d4b17110; }
.app-dialog .search-box input:focus-visible { outline: none; }
.app-dialog .creator-result { gap: 14px; border-radius: 12px; background: #ffffff02; }
.app-dialog .creator-result .room-avatar { width: 44px; height: 44px; border-radius: 12px; }
.app-dialog .creator-result:disabled { opacity: 1; background: #0000000a; }
.app-dialog .creator-result:disabled .room-copy { opacity: .65; }
.app-dialog .creator-result:disabled .room-avatar { opacity: .5; }
.app-dialog .creator-result .creator-action { text-align: center; min-width: 100px; }
.app-dialog .record-item { padding: 18px; margin-bottom: 14px; border-color: #ffffff18; border-radius: 14px; background: #11151c55; }
.app-dialog .record-top { align-items: baseline; gap: 8px 18px; margin-bottom: 14px; }
.app-dialog .record-top > strong { min-width: 0; overflow-wrap: anywhere; }
.app-dialog .record-top > span { flex-shrink: 0; color: #a8b2c5; font-variant-numeric: tabular-nums; }
.app-dialog .record-winner { background: #ffffff03; border: 1px solid #ffffff0c; }
.app-dialog .record-winner-details > .profile-link { width: fit-content; }
.app-dialog .record-winner-details > .profile-link:hover { background: #e9c57716; border-color: #d6b66f88; }
.app-dialog .record-info { border-top: 1px solid #ffffff0d; padding-top: 12px; }
.broadcast-controls-dialog .broadcast-help-actions { margin: 16px 0; }
.broadcast-controls-dialog .broadcast-control-body { padding-right: 6px; scrollbar-gutter: stable; }
.toast { max-width: min(560px,calc(100vw - 48px)); padding: 13px 18px; border-radius: 11px; box-shadow: 0 8px 30px #0006; }

@media (min-width: 961px) and (min-height: 600px) {
  .control-panel .section-label { font-size: 13px; }
  .control-panel .connection-state { font-size: 11px; }
  .control-panel .participants-note, .control-panel .chat-note { font-size: 11px; margin: 7px 0 4px; }
  .control-panel .room-picker { padding: 10px; gap: 9px; }
  .control-panel .room-picker .chevron { display: none; }
  .control-panel .room-picker-action { padding: 5px 8px; }
  .stage-panel .room-stat > span { font-size: 13px; line-height: 1.5; color: #b4bdcc; }
  .stage-panel .room-stat p { font-size: 11px; line-height: 1.5; color: #97a3b8; min-height: 16px; }
  .stage-panel .room-stat small { font-size: 12px; color: #a5afc0; }
  .stage-panel .room-stat > span svg { width: 15px; height: 15px; }
  :is(.stage-panel,.broadcast-controls-dialog) .style-tab { gap: 10px; padding: 10px 23px 10px 10px; border-color: #ffffff24; border-radius: 11px; }
  :is(.stage-panel,.broadcast-controls-dialog) .style-tab:hover:not(:disabled) { transform: none; border-color: #c3a56899; background: #eac5700b; }
  :is(.stage-panel,.broadcast-controls-dialog) .style-tab.active { border-color: #d4ae66; background: linear-gradient(115deg,#d1ac6520,#d1ac6508); }
  :is(.stage-panel,.broadcast-controls-dialog) .style-name { font-size: 14px; color: #c7cddd; }
  :is(.stage-panel,.broadcast-controls-dialog) .style-name small { display: block; margin-top: 3px; font-size: 11px; color: #a1acbf; }
  :is(.stage-panel,.broadcast-controls-dialog) .style-tab.active .style-name { color: #ffe1a0; }
  :is(.stage-panel,.broadcast-controls-dialog) .style-tab.active .style-name small { color: #d1bd96; }
  :is(.stage-panel,.broadcast-controls-dialog) .style-selected { right: 6px; top: 7px; width: 16px; height: 16px; clip-path: none; border-radius: 50%; background: #e9c575; color: #302715; }
  :is(.stage-panel,.broadcast-controls-dialog) .style-selected svg { inset: 3px; width: 10px; height: 10px; }
  :is(.stage-panel,.broadcast-controls-dialog) .dock-label { font-size: 12px; }
  :is(.stage-panel,.broadcast-controls-dialog) .dock-label > span { display: inline; font: inherit; color: #a8b2c4; letter-spacing: 0; }
  .stage-panel .draw-arena { container-type: size; }
  /* Finished rounds use the available space for readable results. */
  .stage-panel[data-phase=drawn] .stage-content > .style-dock,
  .stage-panel[data-phase=drawn] .arena-topline,
  .stage-panel[data-phase=drawn] .arena-bottomline { display: none; }
  .stage-panel .winner-result { inset: 10px 0; gap: 12px; justify-content: flex-start; min-height: 0; }
  .stage-panel .winner-label { flex-shrink: 0; font-size: 16px; line-height: 1.5; letter-spacing: .08em; }
  .stage-panel .winner-cards { display: flex; flex: 1 1 0; align-items: stretch; min-height: 0; max-height: none; overflow: visible; gap: 12px; padding: 2px 4px 6px; }
  .stage-panel .winner-card { flex: 1; min-height: 0; max-width: none; justify-content: center; gap: 10px; padding: 16px 12px; border-radius: 16px; }
  .stage-panel .winner-cards:not(.many) > .winner-card { min-height: 0; }
  .stage-panel .winner-position { flex-shrink: 0; font-size: 12px; line-height: 1.5; letter-spacing: .05em; color: #d9c69d; }
  .stage-panel .winner-card .effect-avatar { width: clamp(44px,22cqh,78px); height: clamp(44px,22cqh,78px); border-radius: 20%; margin: 0; }
  .stage-panel .winner-card strong { flex-shrink: 1; min-height: 0; overflow: auto; max-width: 100%; font-size: 28px; line-height: 1.4; font-weight: 750; text-wrap: balance; }
  .stage-panel .winner-card[data-name-length=long] { gap: 6px; padding: 12px; }
  .stage-panel .winner-card[data-name-length=long] .effect-avatar { width: 48px; height: 48px; }
  .stage-panel .winner-card[data-name-length=long] strong { font-size: 19px; }
  .stage-panel .winner-card small { display: none; }
  .stage-panel .winner-card .profile-link { text-decoration-color: #e9c57544; text-decoration-thickness: 1px; text-underline-offset: 5px; }
  .stage-panel .winner-card .profile-link svg { display: none; }
  .stage-panel .winner-cards.single { max-width: 900px; }
  .stage-panel .winner-cards.single .winner-card { display: grid; grid-template-columns: auto minmax(0,max-content); grid-template-rows: auto minmax(0,auto); align-content: center; justify-content: center; column-gap: 24px; padding: 18px 28px; min-width: 0; max-width: none; width: 100%; }
  .stage-panel .winner-cards.single .winner-position { grid-column: 1 / -1; font-size: 14px; }
  .stage-panel .winner-cards.single .effect-avatar { width: clamp(64px,30cqh,128px); height: clamp(64px,30cqh,128px); }
  .stage-panel .winner-cards.single .winner-card strong { font-size: 44px; text-align: left; max-width: 100%; }
  .stage-panel .winner-cards.single .winner-card[data-name-length=long] strong { font-size: 32px; }
  .stage-panel .winner-pagination { gap: 16px; font-size: 14px; }
  .stage-panel .winner-pagination button { min-height: 40px; padding: 8px 17px; font-size: 14px; }
  .stage-panel .winner-pagination button:hover:not(:disabled) { border-color: #edca7a; background: #edca7a20; }
}
.broadcast-mode .stage-panel .winner-result { inset: 26px 0 12px; gap: 14px; }
.broadcast-mode .stage-panel .winner-label { font-size: clamp(21px,2vw,34px); }
.broadcast-mode .stage-panel .winner-cards { gap: 18px; padding: 3px 10px 8px; }
.broadcast-mode .stage-panel .winner-card { padding: 16px; gap: 12px; }
.broadcast-mode .stage-panel .winner-position { font-size: clamp(16px,1.5vw,25px); }
.broadcast-mode .stage-panel .winner-card .effect-avatar { width: clamp(56px,18cqh,112px); height: clamp(56px,18cqh,112px); }
.broadcast-mode .stage-panel .winner-card[data-name-length=long] { padding: 12px; gap: 6px; }
.broadcast-mode .stage-panel .winner-card[data-name-length=long] .effect-avatar { width: clamp(56px,14cqh,96px); height: clamp(56px,14cqh,96px); }
.broadcast-mode .stage-panel .winner-card strong { font-size: clamp(32px,3.6vw,66px); }
.broadcast-mode .stage-panel .winner-card[data-name-length=long] strong { font-size: clamp(22px,1.9vw,34px); }
.broadcast-mode .stage-panel .winner-cards.single .winner-position { font-size: clamp(16px,1.5vw,25px); }
.broadcast-mode .stage-panel .winner-cards.single .winner-card { padding: 20px 36px; column-gap: 32px; }
.broadcast-mode .stage-panel .winner-cards.single .effect-avatar { width: clamp(86px,30cqh,176px); height: clamp(86px,30cqh,176px); }
.broadcast-mode .stage-panel .winner-cards.single .winner-card strong { font-size: clamp(44px,5.2vw,96px); }
.broadcast-mode .stage-panel .winner-cards.single .winner-card[data-name-length=long] strong { font-size: clamp(32px,3.4vw,60px); }
.broadcast-mode .stage-panel .winner-pagination { font-size: 19px; gap: 24px; }
.broadcast-mode .stage-panel .winner-pagination button { min-height: 44px; font-size: 17px; }
.broadcast-mode .stage-panel .room-stat > span { font-size: clamp(15px,1.4vw,24px); }
.broadcast-mode .stage-panel .room-stat p { display: none; }
.broadcast-mode .stage-panel .room-stat[data-stale=true] p { display: block; }
@media (min-width: 961px) and (max-width: 1180px) {
  body:not(.broadcast-mode) .stage-identity .live-pill { display: none; }
  body:not(.broadcast-mode) .stage-panel .stage-toolbar { gap: 8px; padding-inline: 12px; }
  body:not(.broadcast-mode) .stage-panel .stage-tools { gap: 5px; }
  body:not(.broadcast-mode) .stage-panel .stage-tools > button { padding-inline: 9px; font-size: 13px; }
  .stage-panel .style-mini { display: none; }
  .stage-panel .style-tab { padding: 10px 20px 10px 8px; }
  .stage-panel .style-name { font-size: 13px; }
  .stage-panel .style-name small { font-size: 10px; }
  .stage-panel .room-stat > span { font-size: 12px; }
}
@media (min-width: 961px) and (min-height: 600px) and (max-height: 680px) {
  body:not(.broadcast-mode) { grid-template-rows: 64px minmax(0,1fr) 20px; }
  .site-header { height: 64px; }
  body:not(.broadcast-mode) .workspace > .control-panel { overflow: auto; }
  body:not(.broadcast-mode) .workspace > .control-panel > section,
  body:not(.broadcast-mode) .workspace > .control-panel > #audience-home { flex-shrink: 0; }
  body:not(.broadcast-mode) .workspace > .control-panel > #audience-home { min-height: 210px; }
  body:not(.broadcast-mode) .stage-panel .demo-banner { min-height: 52px; padding: 5px 14px; }
  body:not(.broadcast-mode) .demo-banner-copy > span { display: none; }
  body:not(.broadcast-mode) .stage-panel .room-stat p { display: none; }
  body:not(.broadcast-mode) .stage-panel .room-stat[data-stale=true] p { display: block; }
  body:not(.broadcast-mode) .stage-panel .room-stat { padding: 7px 10px; }
  body:not(.broadcast-mode) .stage-panel .stage-content { padding: 8px 16px 10px; }
  body:not(.broadcast-mode) .stage-panel .draw-arena { margin: 7px 0; }
  body:not(.broadcast-mode) .stage-panel .stage-actions { padding: 8px 10px; gap: 10px; }
  body:not(.broadcast-mode) .action-guidance { flex-basis: 140px; }
  body:not(.broadcast-mode) .stage-panel .draw-button { min-width: 180px; }
  body:not(.broadcast-mode) .stage-panel .style-tab { min-height: 44px; padding-block: 8px; }
  body:not(.broadcast-mode) .stage-panel .style-name small { display: none; }
  body:not(.broadcast-mode) .stage-panel .style-mini { display: none; }
}