/* Approved October 2026 design. Local presentation adapter: shared voting
   sources and all game-state/permission decisions remain owned by their code. */
:root {
  color-scheme: dark;
  --ui-bg: #0e1423;
  --ui-surface: #171f32;
  --ui-raised: #202d44;
  --ui-line: #34445f;
  --ui-text: #f3f6fc;
  --ui-muted: #b2c2db;
  --ui-gold: #f5c65d;
  --ui-green: #86e4b2;
  --ui-red: #ffb7bf;
  /* Existing shared voting-panel theme contract. */
  --color-bg: var(--ui-bg);
  --color-bg-secondary: var(--ui-surface);
  --color-bg-card: var(--ui-surface);
  --color-border: var(--ui-line);
  --color-primary: var(--ui-gold);
  --color-primary-dark: #c49534;
  --color-text: var(--ui-text);
  --color-text-muted: var(--ui-muted);
  --color-text-dim: var(--ui-muted);
  --color-accent-green: var(--ui-green);
  --color-accent-blue: #92b9ff;
  --font-display: 'Segoe UI', system-ui, sans-serif;
  --footer-bg: #111a2c;
  --footer-text: var(--ui-muted);
  --footer-accent: var(--ui-gold);
}
body { background: var(--ui-bg); color: var(--ui-text); font-family: 'Segoe UI', system-ui, sans-serif; line-height: 1.5; }
#app { max-width: 1040px; padding: 20px 28px 48px; min-width: 0; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button, [role=button], a, input, select, textarea { touch-action: manipulation; }
button, [role=button] { -webkit-tap-highlight-color: transparent; }
:is(button, [role=button], a, input, select, textarea, summary):focus-visible { outline: 3px solid #a8c9ff; outline-offset: 3px; }
a { color: #c8dcff; text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.025em; }
.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; }
.eyebrow { color: var(--ui-muted); font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 12px; }
.muted, .vote-names, .settings-hint, .settings-meta, .settings-locked-value { color: var(--ui-muted); font-style: normal; }
.muted { font-size: .9375rem; }
.notice { padding: 12px 16px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); }
.notice.warning { color: #ffe3af; background: #362b17; border-color: #94733b; }
.inline-form { align-items: center; min-width: 0; }
input:not([type=checkbox]):not([type=range]), select, textarea { background: #111b2e; color: var(--ui-text); border: 1px solid var(--ui-line); border-radius: 10px; min-height: 44px; padding: 10px 12px; max-width: 100%; }
input::placeholder, textarea::placeholder { color: #a6b7d0; opacity: 1; }
.inline-form input { width: 100%; min-width: 0; flex: 1; }
.clearable-field { min-width: 0; }
.clearable-field input { padding-right: 40px !important; }
.input-clear-btn { color: var(--ui-muted); }
.btn { border: 1px solid transparent; border-radius: 10px; min-height: 44px; padding: 11px 18px; font-size: .9375rem; font-weight: 700; transition: background 150ms, color 150ms, border-color 150ms, transform 150ms; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: none; }
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary, .btn-lock-in { background: var(--ui-gold); color: #201806; border-color: var(--ui-gold); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover,
  .btn-lock-in:hover { background: #ffe099; color: #201806; border-color: #ffe099; }
}
.btn-secondary, .btn-ask-friend, .btn-restart { background: var(--ui-raised); color: var(--ui-text); border-color: #526582; }
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-correct):not(.btn-incorrect):not(.btn-danger):not(.btn-bad):not(.btn-lock-in):not(.btn-ask-friend):not(.btn-restart) { background: var(--ui-raised); color: var(--ui-text); border-color: #526582; }
@media (hover: hover) and (pointer: fine) {
  .btn:not(.btn-primary):not(.btn-secondary):not(.btn-correct):not(.btn-incorrect):not(.btn-danger):not(.btn-bad):not(.btn-lock-in):not(.btn-ask-friend):not(.btn-restart):hover { background: #334562; color: #fff; }
}
@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover,
  .btn-ask-friend:hover,
  .btn-restart:hover { background: #334562; color: #fff; border-color: #7992b6; }
}
.btn-correct { background: #173d2e; color: #b9f4d4; border-color: #458360; }
@media (hover: hover) and (pointer: fine) {
  .btn-correct:hover { background: #b9f4d4; color: #102d20; border-color: #b9f4d4; }
}
.btn-incorrect, .btn-danger { background: #512b39; color: #ffe1e5; border-color: #a45164; }
@media (hover: hover) and (pointer: fine) {
  .btn-incorrect:hover,
  .btn-danger:hover { background: #ffd0d8; color: #421725; border-color: #ffd0d8; }
}
.btn-large { min-height: 52px; padding: 14px 30px; font-size: 1.0625rem; }
.btn-small { padding: 7px 12px; font-size: .8125rem; }
.btn-settings, .btn-host-crown, .btn-qr { width: 44px; height: 44px; min-width: 44px; padding: 10px; display: inline-flex; justify-content: center; align-items: center; background: var(--ui-raised); border: 1px solid var(--ui-line); color: var(--ui-text); border-radius: 10px; font-size: 1.15rem; margin: 0; flex: none; }
.btn-settings svg, .btn-host-crown svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn-host-crown { color: var(--ui-gold); }
@media (hover: hover) and (pointer: fine) {
  .btn-settings:hover,
  .btn-host-crown:hover,
  .btn-qr:hover { background: #334562; color: #fff; border-color: #7992b6; transform: none; }
}
.text-action, .btn-bad { background: transparent; color: #c8dcff; border: 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; min-height: 44px; padding: 8px 4px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .text-action:hover,
  .btn-bad:hover { background: #202d44; color: #fff; transform: none; }
}
.how-to-play-link { background: var(--ui-raised); border: 1px solid var(--ui-line); color: var(--ui-text); display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 10px; font-size: .8125rem; }
@media (hover: hover) and (pointer: fine) {
  .how-to-play-link:hover { background: #334562; color: #fff; }
}
.banner-htp-row { justify-content: flex-end; padding: 0; position: absolute; right: 28px; top: 20px; }
#app { position: relative; }
.game-banner { margin: 0 0 28px; padding: 0 140px 20px 0; border-bottom: 1px solid var(--ui-line); display: flex; align-items: center; gap: 12px; text-align: left; min-height: 66px; }
.game-banner img, .game-banner img.logo-natural { width: 31px; max-width: 100%; height: 43px; border-radius: 4px; object-fit: contain; }
.game-brand strong { display: block; font-size: 1rem; font-weight: 850; letter-spacing: .045em; }
.game-brand span { display: block; color: var(--ui-muted); font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; margin-top: 2px; }
#app[data-screen=screen-no-game] .game-banner { justify-content: center; border: 0; margin: 28px auto 20px; padding: 0; }
#app[data-screen=screen-no-game] .game-banner img { width: min(390px,100%); height: auto; }
#app[data-screen=screen-no-game] .game-brand { display: none; }
.game-name-row, .round-indicator-row { justify-content: flex-start; gap: 8px; flex-wrap: wrap; margin: 0 0 24px; }
.game-name-row p, .game-name-row h2 { flex: 1; min-width: 80px; color: var(--ui-muted); font-size: .9375rem; font-weight: 500; overflow-wrap: anywhere; }
.round-indicator-left { gap: 8px; flex-wrap: wrap; min-width: 0; }
.game-room-display { color: var(--ui-muted); white-space: normal; overflow-wrap: anywhere; }
.round-indicator { color: var(--ui-muted); margin-left: auto; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.btn-new-game { min-height: 44px; padding: 7px 12px !important; }
.center-card { max-width: 860px; margin: 0 auto; }
.center-card h1 { font-size: clamp(2.25rem,5vw,3.5rem); margin-bottom: 16px; }
.center-card p { color: var(--ui-muted); }
.center-card .eyebrow { color: var(--ui-gold); }
.welcome-lead { max-width: 510px; margin: 0 auto; font-size: 1.0625rem; }
.welcome-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 30px 0; text-align: left; }
.welcome-option { border: 1px solid var(--ui-line); background: var(--ui-surface); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.welcome-option p { margin: 0; flex: 1; }
.welcome-option label { font-size: .875rem; color: var(--ui-muted); }
.welcome-option .inline-form { flex-wrap: wrap; }
.welcome-option .inline-form input { flex-basis: 140px; }
.welcome-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; font-size: .875rem; }
.welcome-steps b { color: var(--ui-gold); margin-right: 7px; }
#screen-join .center-card { max-width: 580px; }
#screen-join .game-name-row { margin-bottom: 30px; }
#screen-join .center-card h1 { font-size: 2rem; }
#join-form-container { padding: 20px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-surface); margin-top: 18px; }
#join-player-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
#join-player-list li { border: 0; background: var(--ui-raised); border-radius: 8px; overflow-wrap: anywhere; }
.player-list-container { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 16px; padding: 20px; max-width: none; margin: 0 0 18px; text-align: left; }
.player-list-container h3 { color: var(--ui-text); margin: 0; }
.lobby-container { margin: 0; text-align: left; }
.lobby-heading { margin-bottom: 24px; }
.lobby-heading h1 { font-size: clamp(2rem,4vw,3rem); margin-bottom: 10px; }
.lobby-heading>p:last-child { color: var(--ui-muted); }
.lobby-host-primer { background: #202b40; border-color: #786438; padding: 14px 18px; }
.lobby-host-primer-title { color: var(--ui-gold); }
.lobby-host-primer p { color: var(--ui-muted); }
.lobby-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 20px; align-items: start; }
.roster-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
#lobby-player-count { color: var(--ui-muted); font-weight: 500; font-size: .875rem; }
#lobby-presence-summary { font-size: .8125rem; margin: 8px 0 14px; }
#lobby-player-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-bottom: 14px; list-style: none; }
#lobby-player-list li { display: flex; align-items: center; gap: 4px; padding: 7px; border: 1px solid var(--ui-line); border-radius: 9px; min-height: 64px; min-width: 0; background: #111b2e; }
#lobby-player-list li.player-disconnected { opacity: 1; border-style: dashed; border-color: #9d7b3a; }
.lobby-identity { flex: 1; min-width: 0; }
#lobby-player-list .player-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; }
.player-host-badge { display: inline; color: var(--ui-gold); background: transparent; font-size: .5625rem; margin-left: 4px; padding: 0; }
.presence-label, .answer-status { display: flex; align-items: center; gap: 4px; font-size: .6875rem; color: var(--ui-muted); }
.presence-label.offline { color: #ffe3af; }
.conn-dot { width: 7px; height: 7px; min-width: 7px; border: 1px solid currentColor; flex: none; }
.conn-dot.connected { background: var(--ui-green); color: var(--ui-green); }
.conn-dot.disconnected { background: transparent; color: #ffe3af; }
.conn-dot { box-shadow: none !important; }
.btn-remove { min-width: 44px; height: 44px; padding: 0; border: 1px solid #9d5163; color: #ffd0d8; border-radius: 8px; background: #462534; font-size: 1.25rem; }
@media (hover: hover) and (pointer: fine) {
  .btn-remove:hover { background: #ffd0d8; color: #421725; }
}
.lobby-invite-panel { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 16px; padding: 22px; display: grid; gap: 12px; }
.lobby-invite-panel .muted { margin: 0; font-size: .8125rem; }
.lobby-rounds-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--ui-line); padding-top: 14px; }
.lobby-rounds-row label { color: var(--ui-text); font-size: .9375rem; }
.lobby-rounds-row small { display: block; color: var(--ui-muted); font-size: .75rem; }
.lobby-rounds-row select { width: 72px; }
.lobby-qr-code { padding: 12px; background: #fff; border-radius: 10px; width: 156px; justify-self: start; }
.lobby-qr-code img, .lobby-qr-code canvas { width: 132px; height: 132px; }
.share-url { color: var(--ui-muted); font-size: .8125rem; overflow-wrap: anywhere; }
.lobby-start-dock { text-align: center; margin-top: 22px; }
.lobby-start-dock>button { margin: 6px; }
.lobby-start-dock .muted { font-size: .8125rem; }
.game-context { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 9px 12px; background: #111b2ff7; border: 1px solid var(--ui-line); border-radius: 10px; backdrop-filter: blur(10px); margin-bottom: 10px; }
.turn-context { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .875rem; min-width: 0; }
#score-turn-label { overflow-wrap: anywhere; }
.turn-arrow { color: var(--ui-gold); font-size: .75rem; }
.own-score { color: var(--ui-muted); font-size: .8125rem; border-left: 1px solid var(--ui-line); padding-left: 8px; font-variant-numeric: tabular-nums; }
.context-actions { display: flex; gap: 6px; margin-left: auto; }
.scores-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0 2px 8px; }
.scores-heading h2 { font-size: 1rem; }
.scores-heading p { color: var(--ui-muted); font-size: .75rem; }
.scoreboard { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; padding: 0; background: transparent; margin-bottom: 20px; }
.score-item { width: 100%; min-width: 0; min-height: 76px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); color: var(--ui-text); padding: 8px 6px; gap: 2px; cursor: pointer; font: inherit; overflow: hidden; transition: background 160ms, border-color 160ms; }
@media (hover: hover) and (pointer: fine) {
  .score-item:hover { background: #24334c; color: #fff; border-color: #7991b4; }
}
.score-item.active { background: #322b1b; color: var(--ui-text); border-color: var(--ui-gold); transform: none; box-shadow: inset 0 0 0 1px #f5c65d33; animation: none; }
@media (hover: hover) and (pointer: fine) {
  .score-item.active:hover { background: #493d21; color: #fff; }
}
.score-item.disconnected { opacity: 1; border-style: dashed; border-color: #b68a44; }
.score-item.active.disconnected { border-color: #ffe3af; border-style: solid; }
.score-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; }
.score-value { line-height: 1.15; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.score-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; min-height: 14px; font-size: .625rem; }
.score-turn-badge { color: var(--ui-gold); font-weight: 750; }
.score-you-badge { color: var(--ui-muted); }
.score-offline-badge { color: #ffe3af; }
.score-offline-badge::before { content: '!'; display: inline-grid; place-items: center; border: 1px solid currentColor; width: 10px; height: 10px; border-radius: 3px; font-size: .5rem; margin-right: 3px; }
.score-change { position: absolute; right: 5px; top: 5px; font-size: .6875rem; border-radius: 5px; padding: 2px 4px; background: #164f39; color: #c8f9dc; animation: ui-points 1000ms ease-out both; }
.score-change.loss { background: #512b39; color: #ffe1e5; }
.score-item.turn-arrival { animation: ui-turn 700ms ease-out both; }
#turn-connection-notice { margin-bottom: 18px; }
#turn-connection-detail { margin-right: 10px; }
.host-focused-player { outline: 2px solid var(--ui-gold); outline-offset: 3px; border-radius: 8px; }
.double-points-banner { background: #322b1b; border: 1px solid #9c7833; color: #ffe3af; border-radius: 10px; font-size: .875rem; }
.game-phase { max-width: 760px; margin: 0 auto; animation: ui-phase 220ms ease-out; }
.game-phase>h2 { font-size: clamp(1.7rem,4vw,2.6rem); margin-bottom: 10px; text-align: left; }
.game-phase>.eyebrow, .game-phase>.muted { text-align: left; }
.spin-slots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 24px 0; }
.slot { width: 100%; min-width: 0; min-height: 220px; border: 1px solid #4c6083; border-top: 3px solid var(--ui-gold); background: linear-gradient(160deg,#24364f,#152037); padding: 18px 10px; gap: 8px; }
.slot-name { font-size: 1rem; margin: 0; line-height: 1.25; overflow-wrap: anywhere; }
.slot:not(.revealed) .slot-name { font-size: 1rem; }
.slot-image { margin: 0; width: 100%; }
.cat-card-img { width: 96px; height: 128px; object-fit: contain; }
.cat-card-generic, .cat-card-generic-lg { width: 96px; height: 128px; background: #2d4567; border: 1px solid #536d94; border-radius: 10px; font-size: 2.6rem; }
.cat-card-generic svg { width: 48%; height: 48%; fill: none; stroke: #fff2cf; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.slot-points { color: var(--ui-gold); font-size: .9375rem; white-space: normal; }
#phase-spin .slot:not(.spinning):not(.revealed), #btn-spin, .voting-buttons .btn { animation: none; }
.slot.spinning { animation: ui-reel 400ms ease-in-out infinite; }
.slot.revealed { border-color: var(--ui-gold); animation: ui-turn 700ms ease-out; }
.slot.revealed.joker-reveal { animation: ui-joker 800ms ease-out; }
#btn-spin { min-width: 230px; }
.category-choices { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.category-btn { min-width: 0; max-width: none; width: 100%; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 14px; padding: 14px 10px; gap: 8px; color: var(--ui-text); font-size: .9375rem; }
@media (hover: hover) and (pointer: fine) {
  .category-btn:hover { transform: translateY(-2px); background: #26334b; color: #fff; border-color: var(--ui-gold); }
}
.category-btn .cat-points { color: var(--ui-gold); font-size: .875rem; }
.category-btn-display { opacity: 1; }
.category-btn { min-height: 180px; }
.category-btn.category-selection { animation: ui-selection 300ms ease-out; outline: 2px solid var(--ui-gold); outline-offset: 3px; }
.category-btn .cat-card-img, .category-btn .cat-card-generic { width: 72px; height: 96px; }
.question-card { max-width: none; text-align: left; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 18px; padding: 32px; margin: 24px 0 20px; }
.question-info { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.question-info .question-category-img { margin: 0; flex: none; }
.question-info .voting-cat-img, .question-info .cat-card-generic-lg { width: 28px; height: 36px; border-radius: 4px; font-size: 1.1rem; }
.category-chip { color: var(--ui-muted); font-size: .875rem; }
.inline-points { margin: 0; padding: 4px 8px; border: 1px solid #8d7337; border-radius: 8px; color: var(--ui-gold); font-size: .8125rem; }
.inline-points:empty { display: none; }
.timer-label { display: flex; gap: 5px; margin-left: auto; color: var(--ui-gold); align-items: baseline; font-size: .875rem; font-variant-numeric: tabular-nums; }
.timer { color: inherit; font-size: 1rem; margin: 0; }
.timer.urgent { color: #ffb7bf; animation: none; }
.question-text { font-size: clamp(1.6rem,3.4vw,2.15rem); line-height: 1.3; letter-spacing: -.025em; font-weight: 650; margin: 28px 0; overflow-wrap: anywhere; }
.question-instruction { color: var(--ui-muted); font-size: .9375rem; }
.question-answer { color: var(--ui-green); font-size: 1.3rem; border-color: var(--ui-line); margin-top: 20px; padding-top: 20px; overflow-wrap: anywhere; }
.answer-label { border-top: 1px solid var(--ui-line); color: var(--ui-gold); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; font-weight: 750; padding-top: 24px; }
.answer-label+.question-answer { border: 0; padding: 0; margin-top: 10px; }
.progress-track, .vote-bar { height: 10px; width: 100%; border-radius: 999px; background: #303d52; overflow: hidden; margin: 18px 0 0; }
.progress-fill, .vote-bar-fill { height: 100%; display: block; border-radius: 999px; background: var(--ui-gold); transition: width 300ms ease; }
.progress-fill { width: 100%; }
.progress-track.urgent .progress-fill { background: #ffb7bf; }
#btn-lock-in-answer { width: 100%; margin: 0; min-height: 52px; }
.ask-friend-section { margin-top: 16px; padding-top: 16px; border-color: var(--ui-line); }
.friend-picker { background: var(--ui-surface); border-color: var(--ui-line); }
.friend-picker-player { min-height: 44px; border-color: var(--ui-line); }
@media (hover: hover) and (pointer: fine) {
  .friend-picker-player:hover { background: #334562; color: #fff; }
}
.voting-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 20px 0; }
.voting-buttons>.btn { width: 100%; min-height: 60px; font-size: 1.0625rem; padding: 14px; }
.question-issue-row { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; }
.question-issue-row small { color: var(--ui-muted); font-size: .8125rem; }
.voting-status { color: var(--ui-muted); font-size: .875rem; text-align: left; }
.vote-names { max-width: none; font-size: .8125rem; }
#voted-confirmation { background: #173d2e; border: 1px solid #458360; border-radius: 10px; padding: 16px; margin: 16px 0; }
#voted-confirmation .muted { color: #b9f4d4; margin: 0; }
#phase-results { position: relative; overflow: hidden; background: var(--ui-surface); border: 1px solid var(--ui-line); padding: 40px; border-radius: 18px; margin: 28px auto; }
#phase-results h2 { color: var(--ui-green); text-align: center; font-size: clamp(1.8rem,4vw,3rem); }
#phase-results.incorrect h2 { color: var(--ui-red); }
#results-detail { font-size: 1.0625rem; color: var(--ui-muted); }
#phase-results .muted { text-align: center; }
#phase-game-over { position: relative; overflow: hidden; }
#phase-game-over h1 { font-size: clamp(2rem,4vw,3rem); margin: 24px 0; }
.final-scores { max-width: 620px; }
.final-score-item { color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-line); padding: 14px 18px; font-size: 1rem; gap: 12px; }
.final-score-item>span:first-child { min-width: 0; overflow-wrap: anywhere; }
.final-score-item>span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.final-score-item:first-child { background: #322b1b; border-color: var(--ui-gold); font-size: 1.125rem; }
.ui-suit { position: absolute; pointer-events: none; left: 50%; top: 40%; font-size: 1.25rem; color: var(--ui-gold); animation: ui-suit 900ms ease-out both; }
/* Joker-specific layout over the unchanged canonical voting component. */
#screen-category-voting .voting-container { margin-top: 0; }
.voting-room-tools { color: var(--ui-muted); justify-content: flex-end; margin-bottom: 18px; }
.voting-room-tools>span { margin-right: auto; }
#screen-category-voting .vp-band { margin: 0 0 14px; padding: 16px; border: 1px solid var(--ui-line); border-radius: 14px; box-shadow: 0 6px 18px #0003; }
#screen-category-voting .vp-title { font-size: 1.125rem; text-transform: none; line-height: 1.15; font-weight: 750; }
#screen-category-voting .vp-row-controls { gap: 10px; }
#screen-category-voting .vp-field { flex-basis: 170px; }
#screen-category-voting .vp-input { min-height: 44px; font: inherit; font-size: .875rem; }
#screen-category-voting .vp-cta { background: var(--ui-gold); color: #201806; border-color: var(--ui-gold); box-shadow: none; animation: none; }
@media (hover: hover) and (pointer: fine) {
  #screen-category-voting .vp-cta:hover,
  #screen-category-voting .vp-cta.ready:hover { background: #ffe099; color: #201806; }
}
#screen-category-voting .vp-cta.ready { background: #b9f4d4; color: #102d20; border-color: #b9f4d4; box-shadow: none; }
#screen-category-voting .vp-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
#screen-category-voting .vp-chip { min-height: 52px; padding: 8px; border-radius: 9px; gap: 7px; background: var(--ui-surface); color: var(--ui-text); }
@media (hover: hover) and (pointer: fine) {
  #screen-category-voting .vp-chip:hover { background: #26334b; color: #fff; border-color: #7991b4; }
}
#screen-category-voting .vp-chip.voted { border-color: var(--ui-gold); background: #322b1b; color: #fff2cf; }
@media (hover: hover) and (pointer: fine) {
  #screen-category-voting .vp-chip.voted:hover { background: #493d21; color: #fff; }
}
#screen-category-voting .vp-chip.voted .vp-chip-name::after { content: ' ✓'; color: var(--ui-gold); }
#screen-category-voting .vp-chip-name { font: 650 .875rem/1.25 'Segoe UI',system-ui,sans-serif; white-space: normal; overflow-wrap: anywhere; }
#screen-category-voting .vp-chip-info { display: grid; gap: 3px; min-width: 0; flex: 1; }
#screen-category-voting .ui-selection .vp-chip-name::after { display: inline-block; animation: ui-check 300ms ease-out; }
#screen-category-voting .vp-chip-count { width: 26px; height: 26px; min-width: 26px; background: #28354d; color: var(--ui-muted); border-radius: 7px; font-size: .8125rem; box-shadow: none; }
#screen-category-voting .vp-chip-count.has-votes { background: var(--ui-gold); color: #201806; box-shadow: none; }
#screen-category-voting .vp-chip-count.has-votes { animation: none; }
#screen-category-voting .vp-chip-pool { color: var(--ui-muted); font-size: .6875rem; }
#screen-category-voting .vp-chip.disabled { opacity: .65; }
#screen-category-voting .vp-pip.on { box-shadow: none; }
.voting-picks-disclosure { flex: 1; min-width: 180px; color: var(--ui-muted); font-size: .8125rem; }
.voting-picks-disclosure summary { cursor: pointer; min-height: 44px; display: list-item; padding: 10px 0; }
#screen-category-voting .vp-pick { color: #fff2cf; background: #322b1b; min-height: 44px; }
@media (hover: hover) and (pointer: fine) {
  #screen-category-voting .vp-pick:hover { background: #493d21; color: #fff; }
}
#screen-category-voting .vp-sub { color: var(--ui-muted); }
#screen-category-voting .vp-sub { flex: 1 1 280px; }
#screen-category-voting .vp-coach { color: #d9e6ff; background: #192d4d; border-color: #3c5d88; }
#screen-category-voting .vp-clear { color: var(--ui-muted); }
/* Dialogs and the existing host/settings controls keep their IDs and handlers. */
.modal-overlay { background: #080e1bcc; }
.modal-content, .score-dialog { background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-line); border-radius: 18px; box-shadow: 0 16px 60px #0008; }
.host-panel-box, .pregame-modal-box { background: var(--ui-surface); border-color: var(--ui-line); max-height: calc(100dvh - 24px); }
.host-panel-header { color: var(--ui-gold); border-color: var(--ui-line); }

.pregame-modal-box h2 { color: var(--ui-text); }
.pregame-intro, .host-field-label, .host-hint { color: var(--ui-muted); }
.pregame-refresh-btn, .btn-remove-question { width: 44px; min-width: 44px; min-height: 44px; }
.pregame-refresh-btn { color: var(--ui-gold); background: var(--ui-raised); }
@media (hover: hover) and (pointer: fine) {
  .pregame-refresh-btn:hover:not(:disabled) { background: #334562; color: #fff; transform: none; }
}
.btn-remove-question { background: #462534; color: #ffd0d8; border-color: #a45164; }
@media (hover: hover) and (pointer: fine) {
  .btn-remove-question:hover { background: #ffd0d8; color: #421725; border-color: #ffd0d8; }
}
.host-question-row { min-width: 0; }
.host-question-input { min-width: 0; }
.pregame-question-row { background: #111b2e; border-color: var(--ui-line); }
.pregame-status.error, .host-save-status.error { color: #ffb7bf; }
.host-save-status.success { color: #b9f4d4; background: #173d2e; border-color: #458360; }
.host-text-input, .host-question-input, .pregame-answer-input { width: 100%; }
.modal-content h2, .score-dialog h2 { color: var(--ui-text); letter-spacing: -.025em; }
.modal-close { width: 44px; height: 44px; background: var(--ui-raised); color: var(--ui-text); border: 1px solid var(--ui-line); border-radius: 10px; }
@media (hover: hover) and (pointer: fine) {
  .modal-close:hover { background: #334562; color: #fff; transform: none; }
}
.host-panel-tabs { border-color: var(--ui-line); gap: 8px; }
.tab-btn { background: transparent; color: var(--ui-muted); border: 1px solid var(--ui-line); border-radius: 9px; min-height: 44px; padding: 9px 16px; }
.tab-btn.active { background: #322b1b; color: #fff2cf; border-color: #9c7833; }
@media (hover: hover) and (pointer: fine) {
  .tab-btn:hover { background: #334562; color: #fff; }
}
.settings-row, .hp-player-row { border-color: var(--ui-line); }
.settings-row { gap: 12px; }
.settings-label-group { min-width: 0; }
.settings-control { flex: none; }
.settings-label { color: var(--ui-text); }
.settings-badge { color: var(--ui-muted); background: var(--ui-raised); }
.settings-tab-content { min-width: 0; }
.toggle-slider { background: #53647c; }
.toggle-switch::after { content: ''; position: absolute; inset: -10px 0; }
#settings-volume { height: 44px; background: transparent; }
#settings-volume::-webkit-slider-runnable-track { background: #53647c; }
#settings-volume::-moz-range-track { background: #53647c; }
.toggle-switch input:checked+.toggle-slider { background: #c49534; }
.toggle-switch input:focus-visible+.toggle-slider { outline: 3px solid #a8c9ff; outline-offset: 3px; }
.btn-remove-player { min-height: 44px; border-color: #a45164; color: #ffd0d8; background: #462534; }
@media (hover: hover) and (pointer: fine) {
  .btn-remove-player:hover { background: #ffd0d8; color: #421725; }
}
.hp-player-name { min-width: 0; overflow-wrap: anywhere; }
.hp-player-row { flex-wrap: wrap; }
.hp-presence-label { color: var(--ui-muted); font-size: .75rem; }
.hp-presence-label.offline { color: #ffe3af; }
.score-dialog { width: min(540px,calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 28px; position: fixed; margin: auto; }
.score-dialog::backdrop { background: #080e1bcc; }
.score-dialog h2 { padding-right: 44px; margin-bottom: 20px; font-size: 1.5rem; }
.score-dialog .btn { margin: 12px 6px 0 0; }
.suggestion-dialog .vp-field { margin-top: 12px; }
#category-suggestion-fields .vp-field { margin: 12px 0; }
.score-status-row { padding: 12px 0; border-bottom: 1px solid var(--ui-line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.score-status-row strong { flex: 1; overflow-wrap: anywhere; }
.score-status-row .btn { margin: 0; }
.score-toast { background: #173d2e; border-color: #458360; color: #b9f4d4; }
.score-toast { max-width: calc(100vw - 32px); white-space: normal; overflow-wrap: anywhere; box-shadow: 0 4px 18px #0005; }
.score-toast.score-toast-loss, .score-toast.score-toast-error { background: #512b39; border-color: #a45164; color: #ffe1e5; box-shadow: 0 4px 18px #0005; }
.score-toast.score-toast-join { background: #192d4d; border-color: #3c5d88; color: #d9e6ff; box-shadow: 0 4px 18px #0005; }
.score-toast.score-toast-error .toast-close-btn { min-width: 44px; min-height: 44px; }
.modal-close-btn { min-width: 44px; min-height: 44px; background: var(--ui-raised); border: 1px solid var(--ui-line); color: var(--ui-text); border-radius: 9px; }
@media (hover: hover) and (pointer: fine) {
  .modal-close-btn:hover { background: #334562; color: #fff; }
}
.site-footer { border-color: var(--ui-line); }
.coachmark-ring { animation: ui-turn 700ms ease-out; }
.coachmark-banner { background: var(--ui-surface); color: var(--ui-text); border-color: #9c7833; }
.coachmark-dismiss-btn { min-height: 44px; background: var(--ui-gold); color: #201806; }
@media (hover: hover) and (pointer: fine) {
  .coachmark-dismiss-btn:hover { background: #ffe099; color: #201806; }
}
.modal-overlay, .score-dialog[open] { animation: ui-phase 160ms ease-out; }
.screen { animation: ui-phase 220ms ease-out; }
.slide-in-left, .slide-in-top { animation: ui-phase 220ms ease-out both; animation-delay: var(--slide-delay,0s); }
@keyframes ui-phase { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ui-turn { from { box-shadow: 0 0 0 2px #f5c65d88,0 0 16px #f5c65d55; } to { box-shadow: inset 0 0 0 1px #f5c65d33; } }
@keyframes ui-points { 0% { opacity: 0; transform: translateY(5px); } 20%,65% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-9px); } }
@keyframes ui-reel { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ui-check { from { transform: scale(.5); opacity: .5; } to { transform: scale(1); opacity: 1; } }
@keyframes ui-selection { 0%,100% { transform: scale(1); } 45% { transform: scale(1.025); } }
@keyframes ui-joker { 0%,100% { transform: scale(1); } 40% { transform: scale(1.035); box-shadow: 0 0 20px #f5c65d55; } }
@keyframes ui-suit { from { opacity: .9; transform: translate(-50%,0) rotate(0); } to { opacity: 0; transform: translate(var(--suit-x),var(--suit-y)) rotate(var(--suit-rotation)); } }
@media(max-width:850px) {
  .scoreboard { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .lobby-layout { grid-template-columns: minmax(0,1fr) 280px; }
  #lobby-player-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:679px) {
  #screen-category-voting .vp-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #screen-category-voting .vp-input { font-size: 1rem; }
  #screen-category-voting .vp-row-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  #screen-category-voting .vp-field { grid-column: 1 / -1; min-width: 0; }
  #screen-category-voting .vp-field-add { grid-column: 1; min-width: 0; }
  #screen-category-voting .vp-add-btn { grid-column: 2; }
  #screen-category-voting .vp-done-tag { grid-column: 1 / -1; display: block; }
  #screen-category-voting #btn-suggest-category { grid-column: 1 / -1; justify-self: start; font-size: .8125rem; }
  #screen-category-voting .vp-rule { display: none; }
  #screen-category-voting .vp-band { padding: 10px; border-radius: 10px; }
  #screen-category-voting .vp-row-guide { gap: 4px; }
  #screen-category-voting .vp-coach { font-size: .75rem; }
  #screen-category-voting .vp-chip { min-height: 48px; padding: 7px; gap: 5px; }
  #screen-category-voting .vp-chip-pool { font-size: .625rem; }
  #screen-category-voting .vp-chip-count { width: 24px; height: 24px; min-width: 24px; }
  #screen-category-voting .vp-chip-name { font-size: .8125rem; }
  #screen-category-voting .vp-dock { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; background: #111b2ff7; border-top: 1px solid var(--ui-line); padding-bottom: calc(10px + env(safe-area-inset-bottom,0px)); }
  #screen-category-voting .vp-band.condensed .vp-picks { display: flex; }
  #app[data-screen=screen-category-voting] { padding-bottom: 100px; }
}
@media(max-width:600px) {
  #app { padding: 14px 12px 32px; }
  .banner-htp-row { right: 12px; top: 14px; }
  .game-banner { padding: 0 126px 14px 0; margin-bottom: 18px; }
  .game-brand strong { font-size: .875rem; }
  .game-brand span { font-size: .5625rem; letter-spacing: .06em; }
  .game-banner img, .game-banner img.logo-natural { width: 26px; height: 36px; }
  #app[data-screen=screen-no-game] .game-banner { margin-top: 58px; }
  #app[data-screen=screen-no-game] .game-banner img { width: min(300px,100%); height: auto; }
  .welcome-options { grid-template-columns: 1fr; margin: 24px 0; gap: 12px; }
  .welcome-option { padding: 20px; }
  .welcome-steps { gap: 12px; font-size: .75rem; }
  .game-name-row, .round-indicator-row { margin-bottom: 18px; gap: 6px; }
  .game-name-row p, .game-name-row h2 { font-size: .8125rem; }
  #join-form-container { flex-wrap: wrap; padding: 14px; }
  #join-form-container input { flex-basis: 150px; }
  .lobby-heading { margin-bottom: 18px; }
  .lobby-heading>p:last-child { font-size: .875rem; }
  .lobby-layout { grid-template-columns: 1fr; gap: 14px; }
  .lobby-roster-panel { padding: 14px; margin: 0; }
  #lobby-player-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lobby-invite-panel { grid-template-columns: 1fr auto; padding: 16px; gap: 10px; }
  .lobby-invite-panel>.eyebrow, .lobby-invite-panel>h3 { grid-column: 1; margin: 0; }
  .lobby-qr-code { grid-column: 2; grid-row: 1 / 5; width: 108px; padding: 8px; }
  .lobby-qr-code img, .lobby-qr-code canvas { width: 92px; height: 92px; }
  .lobby-invite-panel>.muted, .lobby-rounds-row, #btn-lobby-settings, #lobby-rounds-summary { grid-column: 1 / -1; }
  .lobby-start-dock { position: sticky; bottom: 0; z-index: 7; background: #111b2ff7; border: 1px solid var(--ui-line); border-radius: 10px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom,0px)); margin-top: 16px; }
  .lobby-start-dock>button { width: calc(100% - 12px); }
  .lobby-start-dock .muted { margin-top: 6px; }
  .round-indicator { font-size: .75rem; }
  .game-room-display { font-size: .8125rem; }
  .game-context { padding: 7px 9px; gap: 5px; border-radius: 8px; }
  .turn-context { font-size: .75rem; gap: 4px; }
  .own-score { font-size: .6875rem; padding-left: 5px; }
  .context-actions .btn { padding: 6px 8px; font-size: .6875rem; }
  .scoreboard { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin-bottom: 16px; }
  .score-item { padding: 6px 4px; min-height: 60px; border-radius: 8px; }
  .score-name { font-size: .75rem; }
  .score-value { font-size: 1.15rem; }
  .score-badges { font-size: .5625rem; gap: 3px; min-height: 12px; }
  .score-change { top: 3px; right: 3px; font-size: .625rem; }
  .scores-heading h2 { font-size: .875rem; }
  .scores-heading p { font-size: .6875rem; }
  .spin-slots { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 18px 0; }
  .slot { min-height: 160px; padding: 12px 5px; border-radius: 12px; gap: 7px; }
  .cat-card-img, .cat-card-generic, .cat-card-generic-lg { width: 64px; height: 86px; }
  .slot-name, .slot:not(.revealed) .slot-name, #watching-spin-slots .slot-name { font-size: .75rem; }
  .slot-points { font-size: .8125rem; }
  .category-choices { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .category-btn { padding: 12px 8px; }
  .question-card { padding: 20px 18px; border-radius: 14px; margin: 18px 0 16px; }
  .question-text { font-size: 1.5rem; margin: 22px 0; }
  .question-info { gap: 6px; }
  .category-chip { font-size: .8125rem; }
  .inline-points { font-size: .75rem; }
  .question-info .voting-cat-img, .question-info .cat-card-generic-lg { width: 20px; height: 27px; }
  .question-instruction { font-size: .8125rem; }
  .voting-buttons { gap: 8px; }
  .voting-buttons>.btn { min-height: 52px; font-size: 1rem; }
  .question-issue-row { flex-wrap: wrap; gap: 0; }
  .question-issue-row small { font-size: .75rem; }
  #phase-results { padding: 28px 18px; margin-top: 20px; }
  .modal-content, .score-dialog { padding: 24px 18px; max-height: calc(100dvh - 24px); }
  .htp-modal { padding: 0; }
  .modal-content h2 { font-size: 1.35rem; }
  .tab-btn { padding: 8px 12px; font-size: .8125rem; }
  .settings-label { font-size: .875rem; }
  #settings-volume { width: 95px; }
  .settings-volume-control { gap: 5px; }
  .settings-volume-value { min-width: 2.7em; font-size: .8125rem; }
  .score-dialog h2 { font-size: 1.35rem; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .slide-in-left, .slide-in-top { opacity: 1; }
  .ui-suit { display: none; }
}
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body.reduce-motion .slide-in-left, body.reduce-motion .slide-in-top { opacity: 1; }
body.reduce-motion .ui-suit { display: none; }