:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --ink: #1d2836;
  --muted: #667386;
  --line: #dce4ed;
  --blue: #2475bd;
  --blue-dark: #15558f;
  --blue-soft: #eaf3fb;
  --green: #4b922f;
  --green-soft: #eef7e9;
  --gold: #b77909;
  --gold-soft: #fff5dc;
  --red: #bd3c32;
  --red-soft: #fff0ee;
  --shadow: 0 16px 40px rgba(32, 49, 70, .12);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 8% 0%, rgba(75, 146, 47, .10), transparent 31%),
    radial-gradient(circle at 92% 2%, rgba(209, 151, 29, .09), transparent 29%),
    radial-gradient(circle at 50% 100%, rgba(36, 117, 189, .09), transparent 38%),
    linear-gradient(180deg, #fbfcfe 0%, var(--bg) 100%);
}
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:active:not(:disabled) { transform: scale(.985); }
.hidden { display: none !important; }

.app-shell { width: min(760px, 100%); margin: 0 auto; padding: 16px 14px 36px; }
.home-brand { text-align: center; padding: 2px 8px 16px; }
.home-logo { display: block; width: min(470px, 94vw); height: auto; margin: 0 auto -2px; filter: drop-shadow(0 12px 22px rgba(25, 39, 58, .16)); }
.build-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-family: Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 950;
}
.home-build-badge { margin: 1px 0 3px; padding: 4px 8px; background: var(--blue-soft); color: var(--blue-dark); font-size: 9px; }
.home-brand p { margin: 4px 0 0; color: var(--muted); font-weight: 700; }

.surface {
  background: var(--surface);
  border: 1px solid rgba(220, 228, 237, .94);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 14px;
}
.home-surface { display: grid; gap: 13px; }
label { display: block; color: var(--muted); font-size: 13px; font-weight: 850; margin-bottom: 6px; }
input {
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  color: var(--ink);
  outline: none;
  font-size: 17px;
}
input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(36, 117, 189, .11); }
.path-card { border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: #fbfcfe; }
.create-path { transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.create-path.available { border-color: #acd19b; background: #f6fbf3; box-shadow: 0 5px 14px rgba(75, 146, 47, .09); }
.path-heading { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.path-heading h2 { margin: 0 0 4px; font-size: 18px; }
.path-heading p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.4; }
.path-icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-dark); font-weight: 950; }
.path-icon.create { background: var(--green-soft); color: var(--green); }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 900; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.button { width: 100%; border: 0; border-radius: 15px; padding: 14px 16px; margin-top: 12px; cursor: pointer; font-weight: 900; transition: transform .08s ease, opacity .15s ease, background .15s ease; }
.button.primary { background: var(--blue); color: #fff; }
.button.primary:hover { background: var(--blue-dark); }
.button.secondary { background: #e8edf3; color: var(--ink); }
.button.create-game {
  border: 2px solid var(--green);
  background: var(--green);
  color: #fff;
  box-shadow: 0 7px 16px rgba(75, 146, 47, .18);
}
.button.create-game:hover { background: #397922; }
.button.create-game:disabled {
  border-color: var(--line);
  background: #e8edf3;
  color: #738092;
  box-shadow: none;
}
.button.danger { background: var(--red-soft); color: var(--red); }
.button.small { width: auto; margin: 0; padding: 9px 11px; border-radius: 11px; font-size: 13px; }
.button:disabled { opacity: .42; cursor: not-allowed; }

.game-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: calc(72px + env(safe-area-inset-top, 0px));
  margin: -16px -14px 16px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  background: linear-gradient(180deg, #07090d 0%, #0c1016 100%);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #73c845, #e3aa35, #4a98dd, #e55b51) 1;
  box-shadow: 0 6px 18px rgba(15, 23, 34, .24);
}
.wordmark { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: clamp(22px, 6vw, 32px); }
.wordmark .odd { color: #73c845; }
.wordmark .one { color: #e3aa35; }
.wordmark .out { color: #4a98dd; }
.wordmark .question { color: #e55b51; }
.header-build-badge { margin-left: 2px; border: 1px solid rgba(255,255,255,.15); padding: 3px 5px; background: rgba(255,255,255,.08); color: #b9c4d1; font-size: 7px; line-height: 1; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.room-code-button { border: 0; border-radius: 12px; padding: 7px 9px; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.room-code-button span { display: block; color: #aeb9c7; text-transform: uppercase; letter-spacing: .09em; font-size: 9px; font-weight: 900; }
.room-code-button strong { letter-spacing: .1em; font-size: 16px; }
.header-link { border: 0; background: transparent; color: #dce7f1; text-decoration: underline; text-underline-offset: 3px; font-size: 12px; font-weight: 850; cursor: pointer; padding: 8px 2px; }

.room-content { display: grid; gap: 14px; }
.lobby-hero { display: grid; gap: 6px; }
.eyebrow { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; }
.lobby-hero h1 { margin: 0; font-size: clamp(27px, 7vw, 38px); letter-spacing: -.03em; }
.lobby-hero p { margin: 0; color: var(--muted); font-weight: 700; line-height: 1.45; }
.phase-note { border-radius: 14px; padding: 12px 14px; background: var(--blue-soft); color: var(--blue-dark); font-weight: 750; }
.warning-note { background: var(--gold-soft); color: #704a08; }
.success-note { background: var(--green-soft); color: #376d25; }
.waiting-copy { margin-top: 12px; color: var(--muted); font-weight: 750; text-align: center; }
.section-copy { margin: -3px 0 12px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.45; }
.centered-heading { margin: 0; text-align: center; }
.countdown-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; border: 1px solid var(--line); border-radius: 15px; padding: 11px 13px; background: #f7f9fc; }
.countdown-panel > span { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.countdown-panel > strong { grid-row: 1 / span 2; grid-column: 2; font-variant-numeric: tabular-nums; font-size: 27px; line-height: 1; }
.countdown-panel > small { color: var(--muted); font-weight: 700; line-height: 1.3; }

.settings-surface { display: grid; gap: 15px; }
.setting-group { display: grid; gap: 8px; }
.setting-label { display: block; color: var(--ink); font-size: 14px; font-weight: 900; }
.setting-group p, .setting-row p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.4; }
.segmented-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 5px; border-radius: 14px; background: #edf2f7; }
.segmented-control button { border: 0; border-radius: 10px; padding: 11px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 900; }
.segmented-control button.selected { background: #fff; color: var(--blue-dark); box-shadow: 0 3px 10px rgba(36, 60, 88, .12); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.setting-row select { flex: 0 0 76px; border: 2px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; color: var(--ink); font-weight: 900; }
.toggle-setting { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 15px; padding: 13px; background: #fbfcfe; color: var(--ink); text-align: left; cursor: pointer; }
.toggle-setting span { display: grid; gap: 3px; }
.toggle-setting strong { font-size: 14px; }
.toggle-setting small { color: var(--muted); font-weight: 700; line-height: 1.35; }
.toggle-setting b { flex: 0 0 auto; border-radius: 999px; padding: 7px 10px; background: #e8edf3; color: var(--muted); font-size: 12px; }
.toggle-setting.on { border-color: #b8d8a8; background: var(--green-soft); }
.toggle-setting.on b { background: var(--green); color: #fff; }
.settings-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.settings-summary span { display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 13px; padding: 10px; background: #fbfcfe; }
.settings-summary small { color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.settings-summary strong { font-size: 15px; }

.phase-hero { gap: 10px; }
.progress-track { width: 100%; height: 10px; overflow: hidden; border-radius: 999px; background: #e5ebf1; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--blue)); transition: width .25s ease; }
.prompt-surface { overflow: hidden; }
.role-banner { display: grid; gap: 3px; margin: -20px -20px 18px; padding: 15px 20px; background: #eef2f6; color: var(--ink); }
.role-banner.spectator-role { background: #eef2f6; color: #556273; }
.role-banner span { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.role-banner strong { font-size: 22px; line-height: 1.2; }
.team-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 13px; padding: 11px 13px; background: #f7f9fc; color: var(--ink); }
.team-note span { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.team-note strong { text-align: right; }
.hidden-question { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 17px; padding: 18px; background: #f8fafc; text-align: center; }
.hidden-question strong { font-size: 22px; }
.hidden-question span { color: var(--muted); font-weight: 750; }
.question-card { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 17px; padding: 15px; background: #f8fafc; }
.question-card.question-hidden { background: #f8fafc; }
.category-block { display: flex; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; gap: 5px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.category-label, .category-name { color: var(--ink); font-size: clamp(18px, 4.8vw, 21px); font-weight: 950; letter-spacing: normal; text-transform: none; }
.category-name { text-align: left; }
.prompt-question { font-size: clamp(19px, 5vw, 25px); font-weight: 900; line-height: 1.3; }
.question-hidden .prompt-question { color: #445266; font-size: clamp(17px, 4.5vw, 21px); }
.answer-picker { margin-top: 18px; }
.picker-label { margin-bottom: 9px; color: var(--muted); font-size: 13px; font-weight: 900; }
.answer-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.answer-grid.binary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.answer-choice { min-height: 50px; border: 2px solid var(--line); border-radius: 13px; background: #fff; color: var(--ink); cursor: pointer; font-size: 17px; font-weight: 950; transition: transform .08s ease, border-color .15s ease, background .15s ease; }
.answer-choice.selected { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-dark); box-shadow: 0 0 0 3px rgba(36, 117, 189, .1); }
.lock-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.locked-answer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; border-radius: 15px; padding: 13px 15px; background: var(--green-soft); color: #376d25; }
.locked-answer span { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.locked-answer strong { font-size: 24px; }
.answer-list { display: grid; gap: 6px; }
.answer-row { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 7px 10px; background: #fff; }
.answer-row.your-answer { border-color: #bcd8ed; background: #f6fbff; }
.answer-row > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; }
.answer-row > div > strong { font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.answer-value { flex: 0 0 auto; min-width: 45px; border-radius: 10px; padding: 6px 9px; background: #edf2f7; text-align: center; font-size: 17px; font-weight: 950; }
.vote-surface { display: grid; }
.vote-list { display: grid; gap: 7px; }
.vote-option { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 2px solid var(--line); border-radius: 14px; padding: 8px 10px 8px 13px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; transition: transform .08s ease, border-color .15s ease, background .15s ease; }
.vote-option > span { min-width: 0; display: grid; gap: 2px; }
.vote-option > span strong { overflow-wrap: anywhere; font-size: 15px; }
.vote-option > span small { color: var(--muted); font-size: 11px; font-weight: 750; }
.vote-option > b { flex: 0 0 auto; min-width: 48px; border-radius: 10px; padding: 7px 9px; background: #edf2f7; text-align: center; font-size: 16px; }
.vote-option.selected { border-color: var(--blue); background: #f5faff; box-shadow: 0 0 0 3px rgba(36, 117, 189, .09); }
.vote-option.selected > b { background: var(--blue); color: #fff; }
.skip-option { margin-top: 9px; }
.locked-vote { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 15px; padding: 13px 15px; background: var(--green-soft); color: #376d25; }
.locked-vote span { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.locked-vote strong { text-align: right; font-size: 18px; }
.result-surface { display: grid; gap: 12px; }
.vote-totals { display: grid; gap: 5px; }
.vote-totals > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 7px 2px; font-weight: 800; }
.vote-totals > div:last-child { border-bottom: 0; }
.vote-totals strong { min-width: 28px; border-radius: 9px; padding: 4px 7px; background: #edf2f7; text-align: center; }
.vote-footnote { display: flex; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.vote-footnote span { border-radius: 999px; padding: 5px 8px; background: #f0f3f7; }
.elimination-list { display: grid; gap: 7px; margin-top: 5px; }
.elimination-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid #ebd59a; border-radius: 14px; padding: 10px 12px; background: #fffaf0; }
.elimination-card > div { min-width: 0; display: grid; gap: 2px; }
.elimination-card span { color: #7a5a18; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.elimination-card strong { overflow-wrap: anywhere; }
.elimination-card > b { flex: 0 0 auto; text-align: right; font-size: 13px; }
.roster-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 18px; font-weight: 900; list-style: none; }
.roster-details > summary::-webkit-details-marker { display: none; }
.roster-details[open] > summary { margin-bottom: 12px; }
.test-surface .button { margin-bottom: 0; }

.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.section-heading h2 { margin: 0; font-size: 18px; }
.count-chip { border-radius: 999px; padding: 6px 9px; background: var(--blue-soft); color: var(--blue-dark); font-size: 12px; font-weight: 900; }
.player-list { display: grid; gap: 9px; }
.player-row { border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: #fff; }
.player-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #edf2f7; color: var(--ink); font-weight: 950; }
.player-copy { min-width: 0; flex: 1; }
.player-name { font-weight: 900; overflow-wrap: anywhere; }
.player-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.tag { border-radius: 999px; padding: 4px 7px; font-size: 11px; font-weight: 850; background: #eef2f6; color: #556273; }
.tag.online { background: var(--green-soft); color: var(--green); }
.tag.reconnecting { background: var(--gold-soft); color: var(--gold); }
.tag.away { background: var(--red-soft); color: var(--red); }
.tag.host { background: var(--blue-soft); color: var(--blue-dark); }
.tag.acting { background: #f3ebff; color: #6f3fa2; }
.tag.removed { background: var(--red-soft); color: var(--red); }
.tag.eliminated { background: var(--gold-soft); color: #79520a; }
.tag.revealed-role.regular { background: var(--blue-soft); color: var(--blue-dark); }
.tag.revealed-role.odd { background: var(--gold-soft); color: #704a08; }
.manage-panel { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.manage-panel summary { cursor: pointer; color: var(--blue-dark); font-weight: 900; font-size: 13px; }
.manage-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }

.reclaim-card { border: 1px solid #ebd59a; border-radius: 16px; padding: 13px; background: #fffaf0; }
.reclaim-card strong { display: block; margin-bottom: 3px; }
.reclaim-actions { display: flex; gap: 8px; margin-top: 10px; }

.test-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.test-grid .button { margin: 0; }
.test-role-control { display: grid; gap: 8px; margin: 13px 0; }
.test-role-control .segmented-control { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.test-role-control small { color: var(--muted); font-weight: 700; }

.message { border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; background: var(--blue-soft); color: var(--blue-dark); font-weight: 750; }
.message.error { background: var(--red-soft); color: var(--red); }
.message.success { background: var(--green-soft); color: var(--green); }
.reclaim-surface { text-align: center; margin-top: 18px; }
.reclaim-surface h1 { margin-bottom: 8px; }
.reclaim-surface p { color: var(--muted); font-weight: 700; line-height: 1.5; }
.status-orb { width: 56px; height: 56px; margin: 4px auto 10px; border-radius: 50%; background: var(--blue-soft); position: relative; }
.waiting-orb::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; border: 4px solid #bad7ed; border-top-color: var(--blue); animation: spin .8s linear infinite; }

.busy-overlay { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; background: rgba(25, 29, 42, .38); }
.busy-card { min-width: 190px; border-radius: 20px; padding: 22px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.spinner { width: 26px; height: 26px; margin: 0 auto 10px; border-radius: 50%; border: 3px solid #d8e8f6; border-top-color: var(--blue); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
footer { text-align: center; color: var(--muted); font-size: 12px; padding-top: 8px; }

@media (max-width: 560px) {
  .surface { border-radius: 20px; padding: 17px; }
  .game-header { align-items: flex-start; }
  .header-actions { gap: 5px; }
  .header-link { max-width: 58px; line-height: 1.15; }
  .test-grid { grid-template-columns: 1fr; }
  .settings-summary { grid-template-columns: 1fr; }
  .role-banner { margin: -17px -17px 16px; padding: 14px 17px; }
  .answer-reveal-surface { padding: 14px; }
  .answer-grid { gap: 6px; }
  .answer-choice { min-height: 46px; }
  .vote-option { min-height: 52px; }
  .countdown-panel > strong { font-size: 24px; }
  .elimination-card { align-items: flex-start; }
}

/* Game-screen polish carried forward from the Apps Script UI. */
body.in-room .app-shell { width: min(920px, 100%); }
body.in-room .room-content { gap: 13px; }
body.in-room .room-content > .surface,
body.in-room .room-content > details { margin-bottom: 0; }

.game-main-card {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.98);
}
.game-phase-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}
.phase-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 900;
}
.round-indicator { color: var(--muted); font-size: 13px; font-weight: 850; }

.lobby-settings { display: grid; gap: 16px; }
.difficulty-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 9px; }
.difficulty-card {
  border: 2px solid var(--line);
  border-radius: 15px;
  padding: 11px 7px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
}
.difficulty-card strong, .difficulty-card span { display: block; }
.difficulty-card span { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 700; }
.difficulty-card.selected {
  border-color: var(--blue);
  background: linear-gradient(145deg, var(--blue-soft), #f7fbfe);
  color: var(--blue-dark);
  box-shadow: inset 0 -3px 0 rgba(75,146,47,.22);
}
.difficulty-card:disabled, .setting-chip:disabled, .toggle-switch:disabled { opacity: 1; cursor: default; }
.difficulty-description {
  margin: 7px 2px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.42;
}
.game-setting { margin-top: 1px; }
.setting-chip-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-top: 9px; }
.setting-chip {
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 10px 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}
.setting-chip.selected { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-dark); }
.setting-helper { margin: 7px 2px 0; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.35; }
.extra-elimination-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 13px 14px;
  background: #fff;
}
.extra-elimination-copy { min-width: 0; }
.extra-elimination-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.extra-elimination-title strong { font-size: 14px; }
.extra-elimination-copy > span { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.setting-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eef1f5;
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.setting-status.on { background: var(--green-soft); color: var(--green); }
.setting-recommendation { margin-top: 5px; color: #99620a !important; font-weight: 850; }
.toggle-switch {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: #dce2ea;
  cursor: pointer;
}
.toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: transform .18s ease;
}
.toggle-switch.on { background: var(--green); }
.toggle-switch.on::after { transform: translateX(22px); }

.lobby-player-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 14px; }
.lobby-player {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 10px 11px;
  background: #fff;
}
.player-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--player-color, var(--blue));
  color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
  font-size: 14px;
  font-weight: 950;
}
.lobby-player-copy { min-width: 0; }
.lobby-player-name { overflow-wrap: anywhere; font-weight: 900; }
.lobby-player-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-top: 1px; color: var(--muted); font-size: 11px; }
.lobby-player-presence.online { color: var(--green); }
.lobby-player-presence.reconnecting { color: var(--gold); }
.lobby-player-presence.away { color: var(--red); }
.kick-btn {
  min-height: 34px;
  border: 1px solid #f2c1bc;
  border-radius: 10px;
  padding: 7px 10px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}
.lobby-ready { margin-top: 14px; color: var(--muted); text-align: center; font-size: 12px; font-weight: 800; }
.lobby-ready.ready { color: var(--green); }
.lobby-start-button { margin-top: 11px; }

.role-identity-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px 12px;
  background: #f5f7fa;
  color: var(--ink);
}
.role-identity-strip span { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.role-identity-strip strong { text-align: right; font-size: 16px; }
.role-identity-strip.spectator-role { color: #556273; }
.answering-game-card .team-note, .round-prompt-summary .team-note { margin: 9px 0 0; }
.game-prompt-block { margin-top: 15px; }
.game-category {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: clamp(17px, 4vw, 20px);
  font-weight: 950;
}
.game-prompt { margin: 9px 0 10px; font-size: clamp(25px, 5.8vw, 34px); line-height: 1.15; letter-spacing: -.025em; }
.prompt-helper { margin: -2px 0 10px; color: var(--muted); font-weight: 750; }
.format-line { margin-bottom: 15px; color: var(--muted); font-size: 14px; font-weight: 800; }
.game-main-card .answer-picker { margin-top: 4px; }
.game-main-card .picker-label { display: none; }
.game-main-card .answer-choice { min-height: 56px; }
.game-main-card .button[data-room-action="submit-answer"] { margin-top: 14px; }
.answer-locked-copy { display: grid; gap: 2px; margin: 12px 0 2px; text-align: center; }
.answer-locked-copy strong { font-size: 24px; }
.answer-locked-copy span { color: var(--muted); font-size: 13px; font-weight: 750; }
.answer-progress-line, .vote-progress-line { display: grid; gap: 7px; margin-top: 14px; color: var(--muted); font-size: 12px; font-weight: 800; }
.answer-progress-line .progress-track, .vote-progress-line .progress-track { height: 7px; }
.private-prompt-loading, .spectator-waiting { padding: 18px 4px 8px; text-align: center; }
.spectator-waiting p { color: var(--muted); font-weight: 750; line-height: 1.45; }

.round-prompt-summary { margin-bottom: 14px; }
.round-prompt-summary .game-category { margin: 12px 0 5px; font-size: 15px; }
.round-prompt-summary h2 { margin: 0; font-size: clamp(19px,4.4vw,25px); line-height: 1.2; }
.round-prompt-summary .locked-answer { margin-top: 10px; padding: 9px 12px; }
.round-prompt-summary .locked-answer strong { font-size: 20px; }
.spectator-summary p { margin: 5px 0 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.discussion-open-vote { margin-top: 9px; }
.game-section-label { margin-top: 15px; }
.game-section-title { margin: 7px 0 8px; font-size: clamp(22px,5vw,28px); line-height: 1.15; }

.ballot-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.ballot-card {
  position: relative;
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--line);
  border-radius: 15px;
  padding: 11px 12px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.ballot-card:disabled { opacity: 1; cursor: default; }
.ballot-name { min-width: 0; display: grid; gap: 3px; line-height: 1.08; overflow-wrap: anywhere; }
.ballot-name strong { font-weight: 900; }
.ballot-name small { color: var(--blue-dark); font-size: 9px; font-weight: 950; text-transform: uppercase; letter-spacing: .07em; }
.ballot-answer {
  min-width: 48px;
  border-radius: 10px;
  padding: 7px 8px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  text-align: center;
  font-size: 21px;
  font-weight: 950;
}
.ballot-card.self-answer { border-color: #95bddf; background: linear-gradient(145deg,#edf6fd,#fff); box-shadow: inset 4px 0 0 var(--blue); }
.ballot-card.selected { border-color: var(--green); background: linear-gradient(145deg,#f7fcf4,var(--green-soft)); box-shadow: 0 0 0 3px rgba(75,146,47,.10); }
.ballot-card.selected::before {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}
.ballot-card.selected .ballot-name small { color: var(--green); }
.vote-helper { margin: -1px 0 12px; color: var(--muted); font-weight: 750; }
.vote-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; margin-top: 12px; }
.vote-actions .button { margin: 0; }
.vote-skip-button { width: auto; min-width: 112px; border: 1px solid var(--line); background: #fff; color: var(--muted); }
.ballot-progress { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #f5f8fb; color: var(--muted); font-weight: 850; }
.ballot-progress .spinner { width: 20px; height: 20px; margin: 0; border-width: 3px; }
.vote-deadline { display: grid; gap: 7px; margin-bottom: 14px; border: 1px solid #cbdced; border-radius: 15px; padding: 12px 13px; background: linear-gradient(145deg,#f7fbff,var(--blue-soft)); }
.vote-deadline.host-control { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.vote-deadline.host-control .button { width: auto; margin: 0; white-space: nowrap; }
.vote-deadline.active { border-color: #e3b04a; background: linear-gradient(145deg,#fffaf0,var(--gold-soft)); }
.vote-deadline.active > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vote-deadline.active strong { display: grid; place-items: center; min-width: 58px; min-height: 52px; border-radius: 14px; background: #fff; color: var(--red); font-size: 25px; line-height: 1; box-shadow: 0 5px 14px rgba(32,49,70,.10); }
.vote-deadline p { margin: 2px 0 0; color: var(--muted); font-size: 12px; font-weight: 750; }

.round-outcome-block { margin: 1px 0 16px; border-bottom: 1px solid var(--line); padding: 2px 1px 16px; }
.round-outcome-block h1 { margin: 6px 0 4px; font-size: clamp(27px,6vw,37px); line-height: 1.1; letter-spacing: -.03em; }
.round-outcome-block p { margin: 0; color: var(--muted); font-size: 14px; font-weight: 750; line-height: 1.4; }
.embedded-result { gap: 11px; }
.result-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.result-section-heading h2 { margin: 3px 0 0; font-size: 21px; }
.result-player-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.result-player-card {
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  border: 2px solid var(--line);
  border-radius: 15px;
  padding: 9px 10px;
  background: #fff;
}
.result-player-card.highest-total { border-color: #a9c9e3; background: #f7fbff; }
.result-player-card.eliminated-result { box-shadow: inset 4px 0 0 var(--gold); }
.result-player-copy { min-width: 0; display: grid; gap: 3px; overflow-wrap: anywhere; }
.result-player-copy strong { font-size: 15px; font-weight: 900; line-height: 1.1; }
.result-player-copy small { color: var(--muted); font-size: 11px; font-weight: 750; }
.result-vote-count { min-width: 47px; display: grid; justify-items: center; border-radius: 11px; padding: 6px 7px; background: var(--blue-soft); color: var(--blue-dark); }
.result-vote-count strong { font-size: 21px; line-height: 1; }
.result-vote-count small { margin-top: 2px; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.result-surface .vote-footnote { margin-top: 1px; }
.result-surface .vote-footnote span { display: inline-flex; align-items: baseline; gap: 3px; }
.result-surface .vote-footnote strong { color: var(--ink); }
.result-reveals { margin-top: 3px; border-top: 1px solid var(--line); padding-top: 12px; }
.result-reveals .elimination-list { margin-top: 8px; }
.next-round-panel { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 15px; }
.next-round-status { color: var(--muted); text-align: center; font-size: 12px; font-weight: 800; }
.next-round-status.ready { color: var(--green); }
.next-round-panel .button { margin-top: 11px; }

.game-over-game-card { overflow: hidden; }
.game-over-game-card.regular-winner { border-color: #cbdcac; }
.game-over-game-card.odd-winner { border-color: #e4ce98; }
.game-over-outcome {
  margin: 0 0 17px;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 15px 16px;
}
.regular-winner .game-over-outcome { border-color: #c8dfba; background: linear-gradient(145deg,#fbfef9,var(--green-soft)); }
.odd-winner .game-over-outcome { border-color: #ead59f; background: linear-gradient(145deg,#fffdf8,var(--gold-soft)); }
.game-over-outcome h1 { font-size: clamp(29px,6.5vw,40px); }
.final-role-section { display: grid; gap: 11px; }
.final-role-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.final-role-card {
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 9px;
  border: 2px solid var(--line);
  border-radius: 15px;
  padding: 9px 10px;
  background: #fff;
}
.final-role-card.odd-role { border-color: #e2c882; background: #fffdf7; box-shadow: inset 4px 0 0 var(--gold); }
.final-role-copy { min-width: 0; display: grid; justify-items: start; gap: 5px; }
.final-role-copy > strong { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; overflow-wrap: anywhere; font-size: 15px; font-weight: 900; line-height: 1.1; }
.final-you-label { border-radius: 999px; padding: 3px 5px; background: #eef2f6; color: var(--muted); font-size: 8px; font-weight: 950; text-transform: uppercase; letter-spacing: .05em; }
.final-role-badge { border-radius: 999px; padding: 4px 7px; background: var(--blue-soft); color: var(--blue-dark); font-size: 10px; font-weight: 900; line-height: 1.1; }
.odd-role .final-role-badge { background: var(--gold-soft); color: #704a08; }
.game-over-history-section { margin-top: 17px; border-top: 1px solid var(--line); padding-top: 15px; }
.game-over-history-list { margin-top: 11px; }
.game-over-action-panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(240px,.7fr);
  align-items: end;
  gap: 16px;
  margin-top: 17px;
  border-top: 1px solid var(--line);
  padding-top: 15px;
}
.game-over-action-panel h2 { margin: 4px 0 3px; font-size: 21px; }
.game-over-action-panel p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 750; line-height: 1.4; }
.game-over-action-panel .button, .game-over-action-panel .waiting-copy { margin: 0; }

.roster-card {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 10px 28px rgba(32,49,70,.08);
}
.roster-section { min-width: 0; padding: 14px; }
.roster-section + .roster-section { border-left: 1px solid var(--line); }
.roster-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; font-size: 13px; font-weight: 950; }
.roster-title.active { color: var(--green); }
.roster-title.eliminated { color: var(--muted); }
.roster-chips { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.roster-section.eliminated .roster-chips { grid-template-columns: 1fr; }
.roster-chip {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 6px 8px;
  background: #fff;
}
.roster-chip .player-avatar { flex-basis: 25px; width: 25px; height: 25px; font-size: 11px; }
.roster-chip-copy { min-width: 0; }
.roster-chip-name { overflow-wrap: anywhere; font-size: 12px; font-weight: 900; }
.roster-chip-meta { margin-top: 1px; color: var(--muted); font-size: 9px; font-weight: 750; line-height: 1.2; }
.roster-chip.inactive { opacity: .64; filter: grayscale(.28); }
.roster-empty { color: var(--muted); font-size: 12px; }
.roster-chip .compact-manage { grid-column: 3; grid-row: 1; margin: 0; padding: 0; border: 0; }
.roster-chip .compact-manage summary { border-radius: 8px; padding: 5px 6px; background: #eef3f8; font-size: 9px; }
.roster-chip .compact-manage[open] { grid-column: 1 / -1; grid-row: auto; width: 100%; margin-top: 3px; }
.roster-chip .compact-manage[open] .manage-actions { display: grid; grid-template-columns: 1fr; }
.roster-chip .compact-manage[open] .button { width: 100%; }

.test-surface { border: 2px dashed #8a6bc5; background: linear-gradient(135deg,#faf7ff,#fff); box-shadow: 0 10px 24px rgba(82,56,139,.08); }

@media (max-width: 620px) {
  body.in-room .app-shell { padding-left: 8px; padding-right: 8px; }
  body.in-room .game-header { margin-left: -8px; margin-right: -8px; }
  .game-main-card { padding: 16px; border-radius: 20px; }
  .lobby-player-list { grid-template-columns: 1fr; }
  .difficulty-card { min-width: 0; padding: 10px 4px; }
  .difficulty-card span { display: none; }
  .setting-chip-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .discussion-time-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .extra-elimination-row { gap: 10px; }
  .roster-card { grid-template-columns: 1fr; }
  .roster-section + .roster-section { border-left: 0; border-top: 1px solid var(--line); }
  .roster-section.eliminated .roster-chips { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ballot-card {
    grid-template-columns: auto minmax(0,1fr);
    grid-template-areas: "avatar name" "answer answer";
    align-content: center;
    min-height: 92px;
    padding: 9px;
    gap: 7px;
  }
  .ballot-card .player-avatar { grid-area: avatar; width: 30px; height: 30px; flex-basis: 30px; }
  .ballot-name { grid-area: name; }
  .ballot-answer { grid-area: answer; width: 100%; min-width: 0; padding: 5px 8px; font-size: 18px; }
  .vote-actions { grid-template-columns: 1fr; }
  .vote-skip-button { width: 100%; }
  .vote-deadline.host-control { grid-template-columns: 1fr; }
  .vote-deadline.host-control .button { width: 100%; }
  .result-player-card { padding: 8px; gap: 7px; }
  .result-player-card .player-avatar { width: 30px; height: 30px; flex-basis: 30px; }
  .result-player-copy strong { font-size: 13px; }
  .result-player-copy small { font-size: 10px; }
  .result-vote-count { min-width: 39px; padding: 6px 5px; }
  .result-vote-count strong { font-size: 18px; }
  .final-role-card { min-height: 62px; padding: 8px; gap: 7px; }
  .final-role-card .player-avatar { width: 30px; height: 30px; flex-basis: 30px; }
  .final-role-copy > strong { font-size: 13px; }
  .final-role-badge { padding: 4px 6px; font-size: 9px; }
  .game-over-action-panel { grid-template-columns: 1fr; gap: 11px; }
  .game-over-action-panel .button { width: 100%; }
}

@media (min-width: 621px) {
  .game-over-history-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 390px) {
  .ballot-grid { gap: 8px; }
  .ballot-card { min-height: 90px; }
  .game-phase-row { align-items: flex-start; }
  .round-indicator { max-width: 48%; text-align: right; }
  .role-identity-strip { align-items: flex-start; }
  .role-identity-strip strong { max-width: 68%; }
}