html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.play-shell { --primary: var(--cs-accent-fill); --primary-text: var(--cs-on-accent); --field: var(--cs-surface-raised); --border: var(--cs-border); --border-strong: var(--cs-border-strong); --text: var(--cs-text); --muted: var(--cs-text-muted); --accent: var(--cs-accent); --danger-text: var(--cs-danger); --surface: var(--cs-surface); --surface-raised: var(--cs-surface-raised); }
.play-shell { max-width: 46rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 4rem); color: var(--text); }
.play-shell:has(#host-setup:not([hidden])), .play-shell:has(#host-lobby:not([hidden])) { max-width: 42rem; padding-bottom: calc(7rem + var(--cs-app-tabs-height)); }
.play-shell > .eyebrow, .play-label { display: block; color: var(--cs-text-muted); font: 600 11px/1.4 "IBM Plex Mono", monospace; letter-spacing: .1em; }
.play-shell > h1 { font-family: "IBM Plex Sans", sans-serif; font-weight: 600; letter-spacing: -.045em; }
.play-shell > p { color: var(--cs-text-2); }
.play-block { margin: 2rem 0; border-top: 1px solid var(--cs-divider); padding-top: 1.1rem; }
.play-block > input, .play-block > select, .play-sheet select, .play-sheet input { box-sizing: border-box; width: 100%; min-height: 48px; margin: .6rem 0; padding: .7rem; color: var(--cs-text); background: var(--cs-surface-raised); border: 1px solid var(--cs-border-control); border-radius: 8px; font: inherit; }
.play-hint { color: var(--cs-text-muted); font-size: .84rem; line-height: 1.5; }
.play-offline-notice { display: flex; align-items: flex-start; gap: .6rem; margin: .8rem 0 0; color: var(--cs-text-2); font-size: .86rem; line-height: 1.45; }
.play-offline-notice svg { flex: none; width: 18px; height: 18px; margin-top: .1rem; }
.play-offline-notice[hidden] { display: none; }
.game-radio-cards { display: grid; gap: 8px; margin-top: .75rem; }
.game-radio-card { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 73px; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--cs-border-card); border-radius: 12px; background: var(--cs-surface); cursor: pointer; }
.game-mini-board { flex: none; display: grid; place-items: center; width: 105px; height: 63px; border-radius: 9px; overflow: hidden; }
.game-mini-board canvas { display: block; width: 99px; height: 55px; }
.game-radio-card .game-row-copy { display: grid; flex: 1; min-width: 0; gap: 2px; }
.game-radio-card .game-row-copy strong { color: var(--cs-text); font: 600 16px/1.1 "IBM Plex Sans", sans-serif; }
.game-radio-card .game-row-copy small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; color: var(--cs-text-2); font: 400 13px/1.2 "IBM Plex Sans", sans-serif; }
.game-radio-card .game-row-copy em { color: var(--cs-text-muted); font: 600 10px/1.2 "IBM Plex Mono", monospace; }
.game-radio-card--coming-soon { cursor: default; }
.game-radio-card--coming-soon .game-mini-board, .game-radio-card--coming-soon .game-row-copy { opacity: .45; }
.game-radio-card .game-coming-soon { flex: none; color: var(--cs-text-muted); font: 600 10px/1.2 "IBM Plex Mono", monospace; letter-spacing: .06em; white-space: nowrap; }
.play-shell .game-radio-card input[type="radio"] { appearance: none; flex: none; width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; border: 1.5px solid var(--cs-border-strong); border-radius: 50%; background: var(--cs-surface-raised); }
.play-shell .game-radio-card input[type="radio"]:checked { border-color: var(--cs-accent); background: var(--cs-accent); box-shadow: inset 0 0 0 4px var(--cs-accent-tint); }
.game-radio-card:has(input:focus-visible) { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
.game-radio-card:has(input:checked) { border: 1.5px solid var(--cs-accent); background: var(--cs-accent-tint); padding: 6.5px 8.5px; }
@media (max-width: 360px) { .game-radio-card { gap: 8px; } .game-mini-board { width: 94px; height: 60px; } .game-mini-board canvas { width: 90px; height: 50px; } }
/* Setup is one focused choice at a time. The page action sits above the app tabs. */
.play-shell:has(#host-setup:not([hidden])) { padding-top: 1.1rem; }
.play-shell:has(#host-setup:not([hidden])) > .eyebrow { margin: 0 0 .35rem; }
.play-shell:has(#host-setup:not([hidden])) > h1 { max-width: none; margin: 0; font-size: clamp(24px, 6.9vw, 28px); line-height: 1.13; }
.play-shell:has(#host-setup:not([hidden])) > #play-intro { margin: .6rem 0 0; font-size: .9rem; line-height: 1.4; }
#host-setup .play-block { margin: 1.35rem 0; }
#setup-pick-step .play-block { border: 0; padding: 0; }
#setup-pick-step .play-label { margin: 0; }
.setup-step-actions { position: fixed; z-index: 8; left: 0; right: 0; bottom: var(--cs-app-tabs-height); padding: .7rem max(1rem, calc((100vw - 40rem)/2)); background: var(--cs-bg); border-top: 1px solid var(--cs-divider); }
.setup-step-actions button { width: 100%; }
.play-shell button.play-step-back { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; margin: .55rem 0 0 -6px; padding: 0 6px 0 0; border: 0; background: none; color: var(--cs-accent); font: 600 .86rem "IBM Plex Sans", sans-serif; cursor: pointer; }
/* The chevron's path starts 6px into its 16px box, so the -6px margin puts its stroke on the page edge;
   flex centring sits it on the line box, a touch above the capitals, so it drops 1px to meet them. */
.play-shell button.play-step-back svg { flex: none; width: 16px; height: 16px; transform: translateY(1px); }
.trivia-options { margin: 1rem 0; padding: 1rem; border: 1px solid var(--cs-border-card); border-radius: 14px; background: var(--cs-surface); }
.trivia-options > .play-label { margin: .6rem 0; }
.trivia-options-square { display: inline-block; width: 11px; height: 11px; margin-right: .5rem; background: var(--game-color); border-radius: 2px; vertical-align: -1px; }
.trivia-options .trivia-pack-card { background: var(--cs-surface-raised) !important; }
.trivia-segments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: 9px; background: var(--cs-surface-raised); }
.play-shell .trivia-segments button { min-height: 44px; padding: .4rem .15rem; border: 0; border-radius: 7px; background: transparent; color: var(--cs-text-2); font: 600 .76rem "IBM Plex Sans", sans-serif; }
.play-shell .trivia-segments button[aria-pressed="true"] { background: var(--cs-accent-tint); color: var(--cs-accent); }
.trivia-time-meta { display: flex; align-items: center; justify-content: space-between; margin-top: .65rem; color: var(--cs-text-2); font-size: .82rem; }
.trivia-stepper { display: flex; align-items: center; gap: .3rem; }
.play-shell .trivia-stepper button { width: 36px; height: 36px; border: 1px solid var(--cs-border-control); border-radius: 7px; background: var(--cs-surface-raised); color: var(--cs-text); }
.trivia-stepper output { min-width: 2.5rem; text-align: center; font: 600 .8rem "IBM Plex Mono", monospace; }
#setup-game-options label, .play-sheet label:not(.game-radio-card) { display: block; margin-top: 1rem; font-size: .8rem; }
.play-display-row { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; margin-top: .7rem; }
.play-display-row > span { color: var(--cs-text-muted); }
.play-shell button.play-link, .play-shell button.play-danger-link { border: 0; background: transparent; color: var(--cs-accent); padding: .45rem; font: 600 .86rem "IBM Plex Sans", sans-serif; cursor: pointer; }
.play-shell button.play-danger-link { color: var(--cs-danger); }
.play-shell button.play-primary, .play-shell button.play-secondary, .play-shell button.play-danger { min-height: 48px; padding: .7rem 1rem; border: 1px solid var(--cs-accent-fill); border-radius: 9px; background: var(--cs-accent-fill); color: var(--cs-on-accent); font: 600 1rem "IBM Plex Sans", sans-serif; cursor: pointer; }
.play-shell button.play-secondary { background: transparent; border-color: var(--cs-border-control); color: var(--cs-text); }
.play-shell button.play-danger { background: transparent; border-color: var(--cs-danger); color: var(--cs-danger); }
.play-shell button.play-primary:disabled { background: var(--cs-disabled-bg); border-color: var(--cs-border-control); color: var(--cs-disabled-text); }
#start-whirrrdy { width: 100%; }
#host-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; }
#host-game { background: transparent; border: 0; padding: 0; }
#host-lobby h1 { margin: .4rem 0 1.2rem; font-size: clamp(2rem, 8vw, 3.4rem); }
.lobby-board { padding: .7rem; background: var(--cs-board-well); border-radius: 12px; }
.lobby-board canvas { display: block; width: 100%; height: auto; }
.lobby-board figcaption { display: none; }
.lobby-title-row { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.lobby-title-row h1 { min-width: 0; overflow-wrap: anywhere; }
.play-shell .lobby-title-row button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--cs-border-control); border-radius: 9px; background: var(--cs-surface); color: var(--cs-accent); cursor: pointer; }
.lobby-title-row svg { width: 18px; height: 18px; }
#rename-session-dialog input { box-sizing: border-box; width: 100%; min-height: 48px; padding: .7rem; border: 1px solid var(--cs-border-control); border-radius: 8px; background: var(--cs-surface-raised); color: var(--cs-text); font: inherit; caret-color: var(--cs-accent); }
#rename-session-dialog input:focus { outline: 0; border-color: var(--cs-text-faint); }
#rename-session-dialog label { display: block; margin-bottom: .45rem; }
.play-error { color: var(--cs-danger); min-height: 1.1em; font-size: .82rem; }
.lobby-code-card { display: grid; gap: .5rem; margin: 1.3rem 0; padding: 1.2rem; background: var(--cs-surface); border: 1px solid var(--cs-border-card); border-radius: 14px; }
.lobby-code-card strong { font: 600 clamp(2rem, 10vw, 3rem) "IBM Plex Mono", monospace; letter-spacing: .08em; }
.lobby-code-card a { font-size: .83rem; overflow-wrap: anywhere; }
.lobby-invite-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
#host-lobby #copy-lobby-link { color: var(--cs-text-2); }
.lobby-section { border-top: 1px solid var(--cs-divider); padding: 1rem 0; }
.lobby-section h2 { margin: 0 0 .7rem; font-size: 1.15rem; }
.lobby-section-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.lobby-person, .lobby-queue-row { display: flex; align-items: center; gap: .5rem; min-height: 52px; border-top: 1px solid var(--cs-divider); }
.lobby-person > span, .lobby-queue-row > span { flex: 1; min-width: 0; }
.play-shell .lobby-queue-toggle { display: flex; align-items: center; justify-content: space-between; gap: .4rem; flex: 1; min-width: 0; min-height: 48px; padding: .5rem 0; border: 0; background: transparent; color: var(--cs-text); font: 600 .9rem "IBM Plex Sans", sans-serif; text-align: left; cursor: pointer; }
.lobby-queue-toggle svg { flex: none; width: 18px; height: 18px; color: var(--cs-text-muted); transition: transform .15s; }
.lobby-queue-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.lobby-title-row button:focus-visible, .lobby-queue-toggle:focus-visible, .lobby-invite-actions button:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
/* One box only: the open row adds no frame, and the options inside drop theirs; the pack card keeps its own (owner: "super nested"). */
.lobby-queue-options { padding: .25rem 0 1rem; border: 0; background: transparent; }
.lobby-queue-options .trivia-options { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.lobby-queue-remove { display: flex; justify-content: flex-end; margin-top: .75rem; }
.lobby-queue-options .game-options { display: grid; gap: .35rem; }
.lobby-queue-options .game-options label { font-size: .82rem; }
.lobby-queue-options select { box-sizing: border-box; width: 100%; min-height: 48px; padding: .65rem; border: 1px solid var(--cs-border-control); border-radius: 8px; background: var(--cs-surface-raised); color: var(--cs-text); font: inherit; }
.lobby-person strong { flex: 1; overflow-wrap: anywhere; }
.lobby-person small { display: block; color: var(--cs-text-muted); font-size: .76rem; }
.lobby-person.is-away { color: var(--cs-text-muted); }
.lobby-sticky { position: fixed; z-index: 8; left: 0; right: 0; bottom: var(--cs-app-tabs-height); padding: .7rem max(1rem, calc((100vw - 40rem)/2)); background: var(--cs-bg); border-top: 1px solid var(--cs-divider); }
.lobby-sticky button { width: 100%; }
#lobby-start-reason { max-width: 40rem; margin: 0 auto .55rem; color: var(--cs-text-2); font-size: .8rem; text-align: center; }
.play-toast { position: fixed; z-index: 20; left: 12px; right: 12px; bottom: calc(135px + env(safe-area-inset-bottom, 0px)); max-width: 38rem; margin: auto; padding: .8rem 1rem; border-radius: 9px; background: var(--cs-toast-bg); color: var(--cs-toast-text); box-shadow: 0 12px 30px var(--cs-scrim); }
.play-toast button { float: right; border: 0; background: transparent; color: inherit; text-decoration: underline; font: inherit; cursor: pointer; }
.play-sheet #confirm-add-game { width: 100%; margin-top: 1rem; }
.play-add-game-sheet #queue-next { width: 100%; margin-top: 1rem; }
.play-add-game-sheet .play-step-back { margin: 0 0 .5rem -6px; }
.play-add-game-sheet #queue-options-label { margin: .3rem 0; }
@media (max-width: 360px) {
  .play-add-game-sheet .trivia-options { padding: .7rem; }
  .play-add-game-sheet .trivia-pack-card { flex-wrap: wrap; }
  .play-add-game-sheet .trivia-pack-card .play-pack-card-copy { flex-basis: calc(100% - 64px); }
  .play-add-game-sheet .trivia-pack-card .play-pack-change { margin-left: auto; }
  .lobby-queue-options .play-pack-card { flex-wrap: wrap; }
  .lobby-queue-options .play-pack-card .play-pack-card-copy { flex-basis: calc(100% - 64px); }
  .lobby-queue-options .play-pack-card .play-pack-change { margin-left: auto; }
}
.play-confirm-sheet :focus:not(:focus-visible) { outline: none; }
.play-switch-row { display: flex !important; align-items: center; justify-content: space-between; min-height: 48px; gap: 1rem; margin: .7rem 0; font-weight: 500 !important; }
.play-card .play-switch-row input { appearance: none; width: 48px; height: 28px; min-height: 28px; margin: 0; padding: 0; border: 1px solid var(--cs-border-strong); border-radius: 20px; background: var(--cs-surface-raised); cursor: pointer; }
.play-switch-row input::before { content: ""; display: block; width: 20px; height: 20px; margin: 3px; border-radius: 50%; background: var(--cs-text-muted); }
.play-switch-row input:checked { border-color: var(--cs-accent-fill); background: var(--cs-accent-fill); }
.play-switch-row input:checked::before { transform: translateX(20px); background: var(--cs-on-accent); }
#lobby-testing summary { min-height: 44px; cursor: pointer; font-weight: 600; }
@media (max-width: 360px) { .play-shell { padding-inline: 1rem; } .lobby-code-card { padding: 1rem; } .lobby-person { flex-wrap: wrap; } }
.play-shell h1 { font-size: clamp(3rem, 10vw, 6rem); line-height: 1; margin: .5rem 0 1rem; }
.play-shell h2 { margin-top: 2rem; }
.play-card { background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; margin: 1.5rem 0; }
.play-card[hidden], [hidden] { display: none !important; }
.play-card #open-games-list a { display: block; padding: .85rem 0; border-top: 1px solid var(--border-strong); }
.play-card #open-games-list a:first-child { border-top: 0; }
.play-card label { display: block; margin-bottom: .5rem; font-weight: 700; }
.play-card input, .play-card select { box-sizing: border-box; width: 100%; font: inherit; padding: .85rem; margin-bottom: 1rem;
  color: var(--text); background: var(--field); border: 1px solid var(--border-strong); border-radius: .4rem; }
.play-card .watch-next-toggle { display: flex; align-items: center; gap: .65rem; min-height: 44px; margin: 1rem 0; cursor: pointer; }
.play-card .watch-next-toggle input { flex: none; width: 20px; height: 20px; margin: 0; padding: 0; accent-color: var(--accent); }
.play-card button { font: inherit; font-weight: 700; padding: .85rem 1.1rem; margin: .25rem .5rem .5rem 0;
  border: 1px solid var(--primary); border-radius: .4rem; background: var(--primary); color: var(--primary-text); cursor: pointer; }
.play-card button:disabled { opacity: .45; cursor: default; }
.play-card .text-button { padding: 0; margin: 0; color: var(--accent); background: transparent; border: 0; text-decoration: underline; }
.play-card #back-to-snacks, .play-card #next-round { border-color: var(--border-strong); background: transparent; color: var(--text); }
.pace-controls { border-top: 1px solid var(--border); padding-top: .5rem; margin-bottom: 1.5rem; }
.pace-controls h2 { font-size: .9rem; letter-spacing: .08em; }
.play-card .pace-controls input[type="range"] { display: block; padding: 0; accent-color: var(--accent); }
.pace-controls label output { float: right; color: var(--accent); font-variant-numeric: tabular-nums; }
.play-card a, .play-shell a { color: var(--accent); overflow-wrap: anywhere; }
.play-card img { display: block; width: min(65vw, 240px); background: var(--surface-raised); padding: .5rem; }
.word-pattern { display: block; min-height: 1.2em; font: 700 clamp(2rem, 8vw, 4rem) monospace; letter-spacing: .12em; overflow-wrap: anywhere; }
.game-theme { font-weight: 700; margin-bottom: .25rem; }
.how-to { line-height: 1.7; padding-left: 1.4rem; }
.play-card .qr-toggle { display: flex; align-items: center; gap: .5rem; margin: 1rem 0; }
.qr-toggle input { width: auto; margin: 0; }
.waiting-player { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.waiting-player span { min-width: 8rem; }
.play-shell .guest-appearance { display: flex; align-items: center; gap: .25rem; border: 0; border-top: 1px solid var(--border); padding: .5rem 0 0; margin: 2rem 0 .5rem; }
.guest-appearance legend { padding: 0 .6rem 0 0; color: var(--muted); font-size: .75rem; font-weight: 700; }
.play-shell .guest-appearance button { padding: .4rem .55rem; margin: 0; border: 1px solid transparent; border-radius: .35rem; background: transparent; color: var(--muted); font-size: .82rem; font-weight: 600; }
.play-shell .guest-appearance button[aria-pressed="true"] { border-color: var(--border-strong); color: var(--text); background: var(--surface-raised); }
.play-shell .guest-appearance button:focus-visible, .lineup-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.waiting-player.lineup-row { flex-wrap: nowrap; gap: .6rem; }
.lineup-row span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.play-card .lineup-row select { width: auto; min-width: 7rem; margin: 0; padding: .55rem .7rem; }
.play-card .lineup-remove { flex: none; padding: .45rem .25rem; margin: 0; border: 0; background: transparent; color: var(--danger-text); font-size: .75rem; }
.play-card .lineup-remove:hover { background: transparent; text-decoration: underline; }
.doublecross { color: var(--text); }
.word-pattern { background: #0b0e0c; color: #f2f0e9; }
.doublecross { min-width: 0; color: var(--cs-text); }
:root[data-controller-theme="light"] .doublecross { --cs-accent-soft: var(--cs-accent-fill); }
#game-content.is-watching:has(.doublecross) { opacity: 1; }
.dc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dc-top .play-label { margin: 0 0 6px; color: var(--cs-text-muted); font: 600 11px "IBM Plex Mono", monospace; }
.play-shell .dc-status { margin: 0; color: var(--cs-text); font: 600 22px/1.2 "IBM Plex Sans", sans-serif; }
.play-shell .dc-status.is-own { color: var(--cs-accent); }
.dc-avatar { width: 40px; height: 40px; border-color: var(--cs-border-strong); }
.dc-avatar.is-own { border: 2px solid var(--cs-accent); }
.dc-grid { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); width: 100%; max-width: 450px; gap: 1px; margin: 20px auto 12px; background: var(--cs-map-empty); }
.dc-square { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; padding: 0; border: 1px solid var(--cs-border-strong); background: var(--cs-surface-raised); color: var(--cs-text); font: 600 clamp(6px, 2.2vw, 12px) "IBM Plex Mono", monospace; line-height: 1; }
.dc-square.dc-black { border-color: var(--cs-map-empty); background: var(--cs-map-empty); }
.dc-square.dc-active { border-color: var(--cs-accent); background: var(--cs-accent-tint); }
.dc-square.dc-active.dc-filled { background: var(--cs-accent-soft); color: var(--cs-on-accent); }
.play-card .doublecross button.dc-tappable { width: 100%; min-height: 0; margin: 0; padding: 0; border-radius: 0; background: var(--cs-surface-raised); color: var(--cs-text); }
.play-card .doublecross button.dc-tappable.dc-active { border-color: var(--cs-accent); background: var(--cs-accent-tint); }
.play-card .doublecross button.dc-tappable.dc-active.dc-filled { background: var(--cs-accent-soft); color: var(--cs-on-accent); }
.dc-chips { display: flex; gap: 6px; margin: 0 -4px 14px; padding: 4px; overflow-x: auto; scrollbar-width: thin; }
.play-card .doublecross .dc-chip { flex: none; min-height: 36px; margin: 0; padding: 6px 10px; border: 1px solid var(--cs-border-control); border-radius: 18px; background: var(--cs-surface); color: var(--cs-text-2); font: 600 12px "IBM Plex Sans", sans-serif; }
.play-card .doublecross .dc-chip svg { width: 14px; height: 14px; vertical-align: middle; }
.play-card .doublecross .dc-chip[aria-pressed="true"] { border-color: var(--cs-accent); background: var(--cs-accent-tint); color: var(--cs-accent); }
.play-card .doublecross .dc-chip:disabled { opacity: .4; }
.dc-clue { padding: 14px; border: 1px solid var(--cs-border-card); border-radius: 10px; background: var(--cs-surface-raised); }
.dc-clue-header { margin: 0 0 8px; color: var(--cs-accent); font: 600 11px "IBM Plex Mono", monospace; }
.dc-clue-copy { margin: 0; color: var(--cs-text); font: 400 17px/1.4 "IBM Plex Sans", sans-serif; }
.dc-main { margin-top: 18px; }
.play-card .doublecross .dc-primary { display: block; width: 100%; min-height: 50px; margin: 12px 0; padding: 10px; border: 1px solid var(--cs-accent-fill); border-radius: 9px; background: var(--cs-accent-fill); color: var(--cs-on-accent); font: 600 16px "IBM Plex Sans", sans-serif; }
.play-card .doublecross .dc-primary:disabled { border-color: var(--cs-border-control); background: var(--cs-disabled-bg); color: var(--cs-disabled-text); }
.play-card .doublecross .dc-link { display: block; margin: 10px auto; padding: 8px; border: 0; background: none; color: var(--cs-accent); font: 600 14px "IBM Plex Sans", sans-serif; }
.dc-entry { position: relative; margin: 14px 0; --dc-box-width: 34px; }
.dc-letter-boxes { display: grid; gap: 7px; justify-content: center; }
.dc-letter-row { display: flex; justify-content: center; gap: 14px; min-width: 0; }
.dc-word-group { display: flex; gap: 4px; }
.dc-word-group.dc-gap-five + .dc-word-group.dc-gap-five { margin-left: -9px; }
.dc-letter-box { --dc-responsive-width: min(var(--dc-box-width), calc((100vw - 72px - (var(--dc-longest-row) - 1) * 4px - 10px) / var(--dc-longest-row))); box-sizing: border-box; display: grid; place-items: center; flex: none; width: var(--dc-responsive-width); height: calc(var(--dc-responsive-width) * 1.25); border: 1px solid var(--cs-border-control); border-radius: 3px; background: var(--cs-surface-raised); color: var(--cs-text); font: 600 max(12px, calc(var(--dc-responsive-width) * .55)) "IBM Plex Mono", monospace; }
.dc-letter-box.is-given { border-color: var(--cs-border-strong); background: var(--cs-surface); }
.dc-letter-box.is-next { border: 2px solid var(--cs-accent); }
.play-card .doublecross input.dc-hidden-input { position: absolute; width: 1px; height: 1px; opacity: 0; padding: 0; margin: 0; border: 0; }
.play-card .doublecross .dc-hint { display: flex; align-items: center; gap: 5px; width: 100%; min-height: 44px; margin: 5px 0; padding: 6px 0; border: 0; background: none; color: var(--cs-text); }
.dc-hint svg { width: 18px; height: 18px; }
.dc-hint-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cs-border-strong); }
.dc-hint-dot:nth-last-child(3) { margin-left: auto; }
.dc-hint-dot.is-left { background: var(--cs-accent); }
.dc-hint-copy, .dc-pick-hint, .dc-wait-note { color: var(--cs-text-muted); font-size: 13px; line-height: 1.4; }
.dc-pass-label { color: var(--cs-accent); font: 600 11px "IBM Plex Mono", monospace; }
.dc-result-banner { padding: 12px; border: 1px solid var(--cs-success); border-radius: 8px; background: var(--cs-success-surface-bg); color: var(--cs-success-surface-text); font-size: 14px; }
.dc-result-banner.is-danger { border-color: var(--cs-danger-surface-border); background: var(--cs-danger-surface-bg); color: var(--cs-danger-surface-text); }
.dc-player-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.play-card .doublecross .dc-player-card { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; min-height: 83px; margin: 0; padding: 8px 2px; border: 1px solid var(--cs-border-control); border-radius: 8px; background: var(--cs-surface-raised); color: var(--cs-text); font-size: 12px; }
.play-card .doublecross .dc-player-card[aria-pressed="true"] { border-color: var(--cs-accent); }
.dc-player-card .dc-avatar { width: 35px; height: 35px; }
.dc-doublecrossed { padding: 18px; border: 2px solid var(--cs-accent); border-radius: 12px; }
.dc-doublecrossed.is-new { animation: dc-enter .25s ease-out both; }
.dc-doublecrossed strong { color: var(--cs-accent); font: 600 24px "IBM Plex Sans", sans-serif; }
@keyframes dc-enter { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .dc-doublecrossed { animation: none; } }
.dc-wait-status { color: var(--cs-accent); font: 600 12px "IBM Plex Mono", monospace; }
.dc-wait-status::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.dc-feedback { color: var(--cs-danger); min-height: 1em; }
.dc-stats { width: 100%; border-collapse: collapse; font-size: 12px; }
.dc-stats th, .dc-stats td { padding: 9px 3px; border-bottom: 1px solid var(--cs-divider); text-align: left; }
.dc-stats th { color: var(--cs-text-muted); font: 600 10px "IBM Plex Mono", monospace; }
.dc-stats td:not(:first-child), .dc-stats th:not(:first-child) { text-align: right; }
.dc-own { background: var(--cs-accent-tint); }
.dc-leader { color: var(--cs-accent); }
.dc-award { margin: 9px 0; font-size: 13px; }
.dc-session-card { margin-top: 20px; padding: 14px; border: 1px solid var(--cs-border-card); border-radius: 10px; background: var(--cs-surface-raised); }
.dc-session-card h3 { margin: 7px 0 12px; font-size: 17px; }
.dc-session-row { display: grid; grid-template-columns: 18px 32px minmax(0,1fr) auto auto; align-items: center; gap: 7px; padding: 7px 0; border-top: 1px solid var(--cs-divider); font-size: 13px; }
.dc-session-row .dc-avatar { width: 30px; height: 30px; font-size: 10px; }
.dc-placement { color: var(--cs-success); }
.dc-solution { overflow-wrap: anywhere; }
#host-panel-doublecross { border-top: 1px solid var(--cs-divider); padding: 10px 0; }
#host-panel-doublecross h3 { margin: 0 0 8px; }
#host-panel-doublecross .play-secondary { width: 100%; }
@media (max-width: 420px) {
  .play-shell:has(.doublecross) { padding-inline: 1rem; }
  .play-card:has(.doublecross) { padding-inline: .75rem; }
}
#host-lobby button.play-link, #host-lobby button.play-danger-link { border: 0; background: transparent; color: var(--cs-accent); padding: .45rem; font-weight: 600; }
#host-lobby button.play-danger-link { color: var(--cs-danger); }
#host-lobby button.play-secondary { border: 1px solid var(--cs-border-control); background: transparent; color: var(--cs-text); }
#host-lobby .lobby-code-card button { width: max-content; }
#back-to-snacks { width: 100%; margin-top: 2rem; }
.play-shell:has(#host-game:not([hidden]) #host-lobby:not([hidden])) > .eyebrow { display: none; }
.game-radio-card { text-transform: none; letter-spacing: normal; }
.game-radio-card strong, .game-radio-card small, .game-radio-card em { text-transform: none; letter-spacing: normal; }
.play-shell:has(#host-setup:not([hidden])) #play-back, .play-shell:has(#host-game:not([hidden]) #host-lobby:not([hidden])) #play-back { display: none; }
#host-lobby button.play-link, #host-lobby button.play-danger-link { min-height: 44px; }
/* A quiet card, like the game cards: the setup screen sits outside .play-card, so scope to .play-shell. */
.play-shell button.play-pack-card { width: 100%; min-height: 0; display: flex; align-items: center; gap: .75rem; padding: .75rem; margin: .75rem 0; border: 1px solid var(--cs-border-card); border-radius: 12px; background: var(--cs-surface); color: var(--cs-text); font: 400 1rem "IBM Plex Sans", sans-serif; letter-spacing: normal; text-transform: none; text-align: left; cursor: pointer; }
.play-pack-card-copy { display: grid; flex: 1; min-width: 0; gap: .18rem; }
.play-pack-card-copy strong { font-size: .94rem; overflow-wrap: anywhere; }
.play-pack-card-copy small { color: var(--cs-text-muted); font-size: .75rem; }
.play-pack-change { color: var(--cs-accent); font-weight: 600; }
.play-pack-change svg { width: 15px; height: 15px; transform: rotate(-90deg); vertical-align: middle; }
.game-pack-tile { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 5px; font: 600 20px "IBM Plex Mono", monospace; }
.game-pack-tile.large { width: 48px; height: 48px; }
.game-pack-picker { position: fixed; z-index: 50; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--cs-bg); color: var(--cs-text); }
.game-pack-picker-shell { display: flex; flex-direction: column; height: 100%; width: min(100%, 680px); margin: auto; }
.game-pack-picker-header { padding: max(20px, env(safe-area-inset-top)) 18px 12px; }
.game-pack-back, .game-pack-sort { border: 0; background: none; color: var(--cs-accent); font: 600 .85rem "IBM Plex Sans", sans-serif; cursor: pointer; min-height: 44px; }
.game-pack-back { display: inline-flex; align-items: center; gap: .2rem; padding: 0; }
.game-pack-back svg { width: 17px; height: 17px; }
.game-pack-picker h1 { margin: .3rem 0; font: 600 clamp(2rem, 7vw, 3rem)/1.05 "IBM Plex Sans", sans-serif; letter-spacing: -.04em; }
.game-pack-total { margin: .4rem 0 0; color: var(--cs-text-muted); }
.game-pack-search { box-sizing: border-box; width: calc(100% - 36px); margin: 0 18px 10px; min-height: 48px; padding: .7rem; border: 1px solid var(--cs-border-control); border-radius: 9px; background: var(--cs-surface-raised); color: var(--cs-text); font: inherit; }
.game-pack-chips { display: flex; flex: none; gap: .5rem; overflow-x: auto; padding: 0 18px 12px; scrollbar-width: none; }
.game-pack-chip { flex: none; min-height: 38px; padding: .4rem .8rem; border: 1px solid var(--cs-border-control); border-radius: 25px; background: var(--cs-surface); color: var(--cs-text-2); font: 500 .82rem "IBM Plex Sans", sans-serif; }
.game-pack-chip[aria-pressed="true"] { border-color: var(--cs-accent); background: var(--cs-accent-tint); color: var(--cs-accent); }
.game-pack-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px; }
.game-pack-list-header { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--cs-divider); color: var(--cs-text-muted); font: 600 11px "IBM Plex Mono", monospace; }
.game-pack-row { border-top: 1px solid var(--cs-divider); }
.game-pack-row.is-mixed { border-top-color: var(--cs-accent); background: var(--cs-accent-tint); }
.game-pack-row-top { display: flex; align-items: center; min-height: 74px; }
.game-pack-row-select { display: flex; flex: 1; align-items: center; gap: .75rem; min-width: 0; padding: .65rem 0; border: 0; background: none; color: var(--cs-text); text-align: left; cursor: pointer; }
.game-pack-row-copy { display: grid; min-width: 0; gap: .1rem; }
.game-pack-row-copy strong { font-size: .97rem; }
.game-pack-row-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cs-text-muted); font-size: .72rem; }
.game-pack-row-copy .game-pack-counts { font-family: "IBM Plex Mono", monospace; font-size: .65rem; }
.game-pack-new { margin-left: .4rem; color: var(--cs-accent); font: 600 .62rem "IBM Plex Mono", monospace; font-style: normal; }
.game-pack-star { flex: none; width: 48px; height: 48px; border: 0; background: none; color: var(--cs-accent); font-size: 1.45rem; cursor: pointer; }
.game-pack-star svg { width: 23px; height: 23px; }
.game-pack-star[aria-pressed="true"] svg { fill: var(--cs-accent); }
.game-pack-details { padding: 0 0 1rem 52px; color: var(--cs-text-2); font-size: .81rem; line-height: 1.45; }
.game-pack-details p { margin: .5rem 0; }
.game-pack-details .game-pack-based-on { font-weight: 600; }
.game-pack-levels { display: grid; gap: .35rem; }
.game-pack-levels label { display: flex; align-items: center; gap: .5rem; min-height: 38px; cursor: pointer; }
.game-pack-levels input { accent-color: var(--cs-accent); width: 19px; height: 19px; }
.game-pack-empty { color: var(--cs-text-muted); padding: 2rem 0; }
.game-pack-footer { padding: .7rem 18px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--cs-divider); background: var(--cs-bg); }
.game-pack-footer p { margin: 0 0 .5rem; color: var(--cs-text-2); font-size: .77rem; }
.game-pack-footer button { width: 100%; min-height: 48px; border: 0; border-radius: 9px; background: var(--cs-accent-fill); color: var(--cs-on-accent); font: 600 1rem "IBM Plex Sans", sans-serif; }
.host-strip { position: sticky; top: 0; z-index: 5; width: 100%; display: flex; align-items: center; gap: .5rem; min-height: 54px; padding: .6rem .75rem; border: 1px solid var(--cs-accent); border-radius: 9px; background: var(--cs-surface); color: var(--cs-text); text-align: left; cursor: pointer; }
#host-game button.host-strip { width: 100%; display: flex; min-height: 54px; margin: 0 0 12px; padding: .6rem .75rem; border: 1px solid var(--cs-accent); border-radius: 9px; background: var(--cs-surface); color: var(--cs-text); text-align: left; }
.host-strip-tag { color: var(--cs-accent); font: 600 .66rem "IBM Plex Mono", monospace; }
.host-strip svg { width: 17px; height: 17px; color: var(--cs-accent); }
.host-strip-title { flex: 1; font-weight: 600; }
.host-strip-waiting { color: var(--cs-accent); font-size: .74rem; }
.host-strip-waiting:not([hidden])::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .3rem; border-radius: 50%; background: currentColor; animation: host-wait 1.3s ease-in-out infinite; }
@keyframes host-wait { 50% { opacity: .3; } }
.host-panel { bottom: var(--cs-app-tabs-height); max-height: calc(86dvh - var(--cs-app-tabs-height)); }
.host-panel h2 { margin: .25rem 0 1rem; }
.host-panel .play-sheet-close { min-width: 44px; min-height: 44px; cursor: pointer; }
.host-panel .play-sheet-close:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.host-panel #host-panel-invite { margin: 0 0 1rem; }
.host-panel .lobby-section { margin: 0; }
.host-panel .play-danger { width: 100%; margin-top: .7rem; }
.host-panel #host-panel-end-session { border: 0; background: none; color: var(--cs-danger); font-size: .82rem; }
.host-panel #host-panel-more { margin-top: 1.2rem; border-top: 1px solid var(--cs-divider); padding-top: 1rem; }
.host-panel #host-panel-more summary { min-height: 44px; cursor: pointer; color: var(--cs-text-2); }
.play-shell:has(#host-strip:not([hidden])) #back-to-snacks { display: none; }
.play-shell:has(#host-game:not([hidden])) > .eyebrow { display: none; }
@media (prefers-reduced-motion: reduce) { .host-strip-waiting:not([hidden])::before { animation: none; } }
@media (max-width: 360px) { .game-pack-details { padding-left: 8px; } .host-strip { gap: .3rem; } }

.whirrrdy-phone { min-width: 0; }
.whirrrdy-top { display: grid; grid-template-columns: 1fr auto; gap: .2rem .5rem; align-items: start; }
.whirrrdy-top .play-label { grid-column: 1 / -1; margin: 0; }
.play-shell .whirrrdy-top h2 { margin: 0; font: 600 clamp(1.5rem, 7vw, 2.2rem)/1.1 "IBM Plex Sans", sans-serif; letter-spacing: -.04em; }
.whirrrdy-you { margin: .1rem 0 0; color: var(--cs-text-muted); font: 600 .68rem "IBM Plex Mono", monospace; text-align: right; }
.whirrrdy-you strong { display: block; color: var(--cs-text); font-size: 1.1rem; }
.whirrrdy-phone .game-theme { margin: 1rem 0; color: var(--cs-text-2); font-size: .9rem; }
.whirrrdy-points { margin: 1.15rem 0; padding: 1rem; border: 1px solid var(--cs-border-card); border-radius: 12px; background: var(--cs-surface-raised); text-align: center; }
.whirrrdy-points .play-label { margin: 0; }
.whirrrdy-points-value { display: block; margin: .2rem 0; color: var(--cs-accent); font: 600 clamp(3rem, 14vw, 5rem)/1 "IBM Plex Mono", monospace; }
.whirrrdy-points-value[data-step="medium"] { color: var(--cs-text); }
.whirrrdy-points-value[data-step="low"] { color: var(--cs-danger); }
.whirrrdy-meter { height: 6px; border-radius: 6px; overflow: hidden; background: var(--cs-border-control); }
.whirrrdy-meter span { display: block; height: 100%; background: var(--cs-accent); }
.whirrrdy-points:has([data-step="medium"]) .whirrrdy-meter span { background: var(--cs-text); }
.whirrrdy-points:has([data-step="low"]) .whirrrdy-meter span { background: var(--cs-danger); }
.whirrrdy-points > p:last-child { margin: .55rem 0 0; color: var(--cs-text-muted); font-size: .73rem; }
.whirrrdy-board { margin: 1.3rem 0; }
.play-shell .whirrrdy-board h3 { margin: 0 0 .6rem; }
.whirrrdy-tiles { display: grid; grid-template-columns: repeat(var(--letters), minmax(0, 1fr)); gap: 4px; max-width: calc(var(--letters) * 30px + (var(--letters) - 1) * 4px); margin: auto; }
.whirrrdy-tile { display: grid; place-items: center; min-width: 0; aspect-ratio: .82; border: 1px solid var(--cs-border-strong); border-radius: 3px; background: var(--cs-surface-raised); color: var(--cs-text); font: 600 clamp(.67rem, 3vw, 1.4rem) "IBM Plex Mono", monospace; }
.whirrrdy-tile.is-spinning { animation: whirrrdy-flicker .65s steps(2) infinite; }
@keyframes whirrrdy-flicker { 50% { background: var(--cs-surface); } }
.whirrrdy-settled, .whirrrdy-ready { color: var(--cs-text-muted); font-size: .78rem; }
.whirrrdy-phone form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: start; }
.whirrrdy-phone form label { grid-column: 1 / -1; margin: 0; color: var(--cs-text-muted); font: 600 .7rem "IBM Plex Mono", monospace; }
.whirrrdy-phone form input { margin: 0; min-height: 48px; text-transform: uppercase; }
.play-card .whirrrdy-phone form button { margin: 0; min-height: 48px; }
.whirrrdy-wrongs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.whirrrdy-wrongs span { padding: .35rem .55rem; border: 1px solid var(--cs-border-control); border-radius: 20px; color: var(--cs-text-muted); font: 600 .7rem "IBM Plex Mono", monospace; text-decoration: line-through; }
.whirrrdy-got-it { margin: 1rem 0; padding: 1rem; border: 1px solid var(--cs-accent); border-radius: 12px; }
.whirrrdy-got-it .play-label { text-transform: uppercase; }
.whirrrdy-got-it strong { color: var(--cs-accent); font: 600 2.7rem "IBM Plex Mono", monospace; }
.whirrrdy-got-it p:last-child { margin-bottom: 0; color: var(--cs-text-2); }
@media (prefers-reduced-motion: reduce) { .whirrrdy-tile.is-spinning { animation: none; } }

.guest-shell { max-width: 42rem; padding-top: max(2rem, env(safe-area-inset-top)); }
.guest-brand { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0 1.2rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--cs-divider); }
.play-shell button.guest-theme-toggle { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--cs-border-control); border-radius: 50%; background: var(--cs-surface-raised); color: var(--cs-text); cursor: pointer; }
.guest-theme-toggle svg { width: 20px; height: 20px; }
.guest-theme-toggle:focus:not(:focus-visible) { outline: none; }
:root .guest-theme-toggle .guest-theme-light-icon[data-lucide-icon] { display: none; }
:root[data-controller-theme="light"] .guest-theme-toggle .guest-theme-dark-icon[data-lucide-icon] { display: none; }
:root[data-controller-theme="light"] .guest-theme-toggle .guest-theme-light-icon[data-lucide-icon] { display: inline-grid; }
.guest-brand img { display: block; width: 153px; height: auto; }.guest-brand-light { display: none !important; }
html[data-controller-theme="light"] .guest-brand-dark { display: none !important; }
html[data-controller-theme="light"] .guest-brand-light { display: block !important; }
.guest-shell #guest-join h1, .guest-shell #guest-end h1 { font-size: clamp(2.5rem, 9vw, 4.5rem); }
.guest-shell #code-form { display: grid; gap: .55rem; }
.guest-shell #code-form input { font: 600 2rem "IBM Plex Mono", monospace; letter-spacing: .13em; text-align: center; }
.guest-shell #code-form button, .guest-shell #rejoin { width: 100%; margin: 0; }
.guest-shell #code-form button:disabled { background: var(--cs-disabled-bg); border-color: var(--cs-border-control); color: var(--cs-disabled-text); }
.guest-frame-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.guest-frame-head .eyebrow { margin: .25rem 0; color: var(--cs-text-muted); font: 600 11px "IBM Plex Mono", monospace; letter-spacing: .07em; }
.guest-pack { margin: .3rem 0 .8rem; color: var(--cs-text-2); font-size: .82rem; line-height: 1.35; }
.guest-avatar { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--cs-border-control); border-radius: 50%; background: var(--cs-surface-raised); color: var(--cs-text); font: 600 .9rem "IBM Plex Sans", sans-serif; }
.guest-avatar { display: flex; gap: .1rem; justify-content: center; }.guest-avatar svg { width: 12px; height: 12px; }
.guest-shell #waiting-screen h1 { font-size: clamp(2rem, 8vw, 3rem); }
.watch-banner { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .75rem 1rem; margin-top: 1rem; border: 1px solid var(--cs-border-card); border-radius: 10px; background: var(--cs-surface); }
.watch-banner p { margin: 0; font-size: .85rem; line-height: 1.4; }
.watch-banner button { flex: none; }
#game-content.is-watching { opacity: .4; pointer-events: none; }
.guest-player-menu { width: min(100%, 42rem); }
.guest-player-menu h2 { margin: .35rem 0 1rem; }
.guest-player-menu > button:not(.play-sheet-close) { width: 100%; margin: .4rem 0; }
.guest-player-menu > button.play-secondary { min-height: 48px; border: 1px solid var(--cs-border-control); border-radius: 9px; background: transparent; color: var(--cs-text); }
.guest-player-menu > button.play-danger { min-height: 48px; border: 1px solid var(--cs-danger); border-radius: 9px; background: transparent; color: var(--cs-danger); }
.guest-player-menu > button.play-sheet-close { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--cs-text); }
.guest-player-menu .guest-appearance { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 1rem 0; padding: 1rem 0; border-top: 1px solid var(--cs-divider); border-bottom: 1px solid var(--cs-divider); }
.guest-player-menu .guest-appearance legend { grid-column: 1 / -1; }
.guest-player-menu .guest-appearance button { min-height: 44px; border: 1px solid var(--cs-border-control); border-radius: 8px; background: var(--cs-surface-raised); color: var(--cs-text); }
.guest-player-menu .guest-appearance button[aria-pressed="true"] { border-color: var(--cs-accent); color: var(--cs-accent); }
.guest-shell button:focus-visible, .guest-player-menu button:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
#member-session-join, #results-new { width: 100%; margin-top: 1rem; }
.trivia-player { color: var(--cs-text); }
.trivia-band { height: 4px; margin: -.1rem 0 1rem; border-radius: 3px; background: var(--game-color); }
.trivia-title { display: flex; align-items: center; gap: .7rem; min-width: 0; margin-bottom: 1.2rem; }
.trivia-game-tile { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 5px; background: var(--game-color, var(--cs-accent-fill)); color: var(--game-ink, var(--cs-on-accent)); font: 600 21px "IBM Plex Mono", monospace; }
.trivia-title > div:nth-child(2) { min-width: 0; flex: 1; }
.trivia-title .play-label { margin: 0; font-size: 9px; }
.trivia-title h2 { margin: .15rem 0 0; font-size: 1.4rem; line-height: 1.1; }
.trivia-score, .trivia-no-timer { flex: none; color: var(--cs-text-muted); font: 600 .7rem "IBM Plex Mono", monospace; }
.trivia-score strong { display: block; color: var(--cs-text); font-size: 1.35rem; text-align: right; }
.trivia-no-timer { padding: .4rem; border: 1px solid var(--cs-border-control); border-radius: 20px; }
.trivia-ring { position: relative; display: grid; flex: none; place-items: center; width: 54px; height: 54px; }
.trivia-ring svg { position: absolute; inset: 0; width: 54px; height: 54px; transform: rotate(-90deg); }
.trivia-ring circle { fill: none; stroke-width: 5; }
.trivia-ring-track { stroke: var(--cs-border-control); }
.trivia-ring-time { stroke: var(--game-color, var(--cs-accent)); stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.trivia-ring.is-danger .trivia-ring-time { stroke: var(--cs-danger); }
.trivia-ring span { position: relative; font: 600 1.15rem "IBM Plex Mono", monospace; }
.trivia-ring.is-danger span { color: var(--cs-danger); }
.trivia-question { margin: 0 0 1rem; padding: 1.15rem; border: 1px solid var(--cs-border-card); border-radius: 14px; background: var(--cs-surface); }
.trivia-question .play-label { color: var(--game-color); }
.trivia-question h3 { margin: .55rem 0; font-size: 1.3rem; line-height: 1.28; overflow-wrap: anywhere; }
.trivia-question.is-small h3 { font-size: 1.08rem; }
.trivia-question p:last-child { margin-bottom: 0; color: var(--cs-text-muted); }
.trivia-blank { width: 45%; height: 2px; margin: 1.2rem 0 0; background: var(--game-color); }
.trivia-slip { margin: 1rem 0; padding: 1rem; border: 1px solid var(--cs-border-card); border-top: 2px dashed var(--game-color); border-radius: 12px; background: var(--cs-accent-tint); }
.trivia-slip-head { display: flex; justify-content: space-between; gap: .6rem; color: var(--game-color); font: 600 .68rem "IBM Plex Mono", monospace; }
.trivia-slip input { box-sizing: border-box; width: 100%; min-height: 58px; margin: 1rem 0 .2rem; border: 0; border-bottom: 3px solid var(--game-color); border-radius: 0; background: var(--cs-surface-raised); color: var(--cs-text); font: 600 1.4rem "IBM Plex Sans", sans-serif; }
.trivia-slip p { color: var(--cs-text-2); font-size: .82rem; }
.trivia-pending { display: flex; align-items: center; gap: .5rem; }
.trivia-pending::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--game-color); animation: host-wait 1.3s ease-in-out infinite; }
.between-games h2 { margin: .4rem 0 1.5rem; }
.between-games h3 { margin-bottom: .6rem; }
.between-games ol { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.between-games li { padding: .35rem 0; }
.between-games li strong { float: right; }
.between-games > p:last-child { color: var(--cs-text-2); }
.trivia-slip button, .trivia-confirm, .trivia-next { width: 100%; }
.trivia-choices { display: grid; gap: .7rem; }
.trivia-choices.speed { grid-template-columns: minmax(0, 1fr); }
.play-shell .trivia-choice { display: flex; align-items: center; gap: .7rem; min-width: 0; min-height: 76px; padding: .5rem; border: 3px solid var(--cs-border-control); border-radius: 18px; background: var(--cs-surface); color: var(--cs-text); font: 600 1rem "IBM Plex Sans", sans-serif; text-align: left; }
.play-shell .trivia-choice.is-picked { border-color: var(--cs-accent); }
.play-shell .trivia-choice.is-right { border-color: var(--cs-online); }
.play-shell .trivia-choice.is-wrong { border-color: var(--cs-danger); }
.play-card .trivia-choice:disabled:not(.is-picked):not(.is-right):not(.is-wrong) { opacity: .48; }
.play-card .trivia-choice:disabled:is(.is-picked, .is-right, .is-wrong) { opacity: 1; }
.play-card .trivia-player.is-settling .trivia-choice:disabled { opacity: 1; pointer-events: none; }
.trivia-player.is-settling .trivia-choices { filter: blur(7px); user-select: none; }
.trivia-choice-tile { display: grid; flex: none; place-items: center; width: 54px; height: 54px; border-radius: 10px; background: var(--cs-accent-fill); color: var(--cs-on-accent); font: 600 1.4rem "IBM Plex Mono", monospace; }
.trivia-choice-copy { flex: 1; min-width: 0; overflow-wrap: normal; word-break: normal; }
.trivia-choice-mark { color: var(--cs-accent); font: 600 .65rem "IBM Plex Mono", monospace; }
.trivia-choice-mark svg, .trivia-chip svg, .trivia-results-list svg, .trivia-result strong svg, .trivia-review-calls svg, .trivia-review-auto-row svg { width: 15px; height: 15px; vertical-align: middle; }
.trivia-star svg { width: 22px; height: 22px; }
.trivia-hint { color: var(--cs-text-muted); font-size: .8rem; }
.trivia-locked, .trivia-wait, .trivia-result, .trivia-round, .trivia-host-action { margin: 1rem 0; padding: 1rem; border: 1px solid var(--cs-border-card); border-radius: 12px; background: var(--cs-surface); }
.trivia-locked { display: flex; justify-content: space-between; gap: .5rem; font: 600 .8rem "IBM Plex Mono", monospace; }
.trivia-locked span { color: var(--cs-text-muted); }
.trivia-result.is-right { border-color: var(--cs-online); }.trivia-result.is-wrong { border-color: var(--cs-danger); }
.trivia-result strong { font-size: 1.12rem; }.trivia-result p { color: var(--cs-text-2); }
.trivia-star { font-size: 1.5rem; }
.trivia-results-list > div { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem 0; border-top: 1px solid var(--cs-divider); font-size: .8rem; }
.trivia-results-list span { color: var(--cs-text-2); text-align: right; }
.trivia-chip { display: inline-block; margin: .2rem; padding: .4rem .6rem; border: 1px solid var(--cs-border-control); border-radius: 18px; font-size: .75rem; }.trivia-chip.is-right { border-color: var(--cs-online); }.trivia-chip.is-wrong { border-color: var(--cs-danger); }
.trivia-wait-avatars { display: flex; gap: .4rem; margin: .7rem 0; }.trivia-wait-avatars span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--cs-online); background: var(--cs-surface-raised); }.trivia-wait-avatars .pending { border-style: dashed; border-color: var(--cs-border-strong); }
.trivia-wait p, .trivia-ready { color: var(--cs-text-muted); font-size: .85rem; }
.trivia-error { color: var(--cs-danger); font-size: .8rem; }
.trivia-review-sheet { bottom: var(--cs-app-tabs-height); max-height: calc(90dvh - var(--cs-app-tabs-height)); padding: 1rem 1rem 0; }
.trivia-review-sheet #trivia-review-later { float: right; min-height: 44px; padding: .3rem .5rem; color: var(--cs-text-2); font: 600 .85rem "IBM Plex Sans", sans-serif; cursor: pointer; }
.trivia-review-sheet h2 { margin: .25rem 0 1rem; font-size: 1.6rem; }
.trivia-review-answer, .trivia-review-card { margin: .8rem 0; padding: 1rem; border: 1px solid var(--cs-border-card); border-radius: 12px; background: var(--cs-surface-raised); }
.trivia-review-answer p { margin: 0 0 .8rem; font-weight: 600; line-height: 1.4; }
.trivia-review-answer span, .trivia-review-section span { display: block; color: var(--cs-online); font: 600 .7rem "IBM Plex Mono", monospace; }
.trivia-review-answer strong { display: block; margin: .2rem 0 .5rem; font-size: 1.1rem; overflow-wrap: anywhere; }
.trivia-review-answer small { color: var(--cs-text-muted); line-height: 1.4; }
.trivia-review-section { margin: 1.3rem 0 .7rem; }.trivia-review-section span { color: var(--cs-text); }.trivia-review-section p { margin: .2rem 0; color: var(--cs-text-muted); font-size: .82rem; }
.trivia-review-card.is-accepted { border-color: var(--cs-online); }.trivia-review-card.is-rejected { border-color: var(--cs-danger); }
.trivia-review-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.trivia-review-card-head strong { min-width: 0; overflow-wrap: anywhere; font-size: 1.05rem; text-transform: uppercase; }
.trivia-review-pill { flex: none; padding: .25rem .4rem; border: 1px solid var(--cs-border-control); border-radius: 20px; color: var(--cs-text-2); font: 600 .6rem "IBM Plex Mono", monospace; white-space: nowrap; }
.is-accepted .trivia-review-pill { border-color: var(--cs-online); color: var(--cs-online); }.is-rejected .trivia-review-pill { border-color: var(--cs-danger); color: var(--cs-danger); }
.trivia-review-reason { margin: .3rem 0 .8rem; color: var(--cs-accent); font: 600 .68rem "IBM Plex Mono", monospace; }
.trivia-review-chips { display: flex; flex-wrap: wrap; gap: .3rem; }.trivia-review-chips span { padding: .3rem .55rem; border: 1px solid var(--cs-border-control); border-radius: 20px; font-size: .76rem; }
.trivia-review-calls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin-top: 1rem; }
.play-shell .trivia-review-calls button { min-width: 0; min-height: 44px; padding: .5rem .2rem; font-size: .8rem; }
.trivia-review-calls [data-accept="false"].is-selected { border-color: var(--cs-danger); color: var(--cs-danger); }
.trivia-review-calls [data-accept="true"].is-selected { border-color: var(--cs-online); color: var(--cs-online); }
.trivia-review-note { margin: .7rem 0 0; color: var(--cs-text-muted); font-size: .75rem; }
.trivia-review-automatic { margin: 1.1rem 0; border-top: 1px solid var(--cs-divider); }.trivia-review-automatic summary { min-height: 44px; padding: .8rem 0; color: var(--cs-text-2); font-size: .83rem; cursor: pointer; }
.trivia-review-auto-row { display: flex; align-items: center; gap: .5rem; padding: .65rem 0; border-top: 1px solid var(--cs-divider); }
.trivia-review-auto-row > span.is-right { color: var(--cs-online); }.trivia-review-auto-row > span.is-wrong { color: var(--cs-danger); }
.trivia-review-auto-row > div { min-width: 0; flex: 1; }.trivia-review-auto-row strong, .trivia-review-auto-row small { display: block; overflow-wrap: anywhere; }.trivia-review-auto-row strong { font-size: .8rem; }.trivia-review-auto-row small { color: var(--cs-text-muted); font-size: .72rem; }
.play-shell .trivia-review-auto-row button { flex: none; min-height: 44px; padding: .45rem; font-size: .73rem; }
.trivia-review-footer { position: sticky; bottom: 0; margin: 0 -1rem; padding: .65rem 1rem calc(.8rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cs-divider); background: var(--cs-surface); }
.trivia-review-footer p { margin: 0 0 .55rem; color: var(--cs-text-2); font-size: .76rem; line-height: 1.4; }
.trivia-review-footer button { width: 100%; min-height: 48px; }.trivia-review-footer button:disabled { background: var(--cs-surface-raised); color: var(--cs-text-muted); border: 1px solid var(--cs-border-control); }
.trivia-review-error { color: var(--cs-danger); font-size: .8rem; }.trivia-review-sheet :focus:not(:focus-visible) { outline: none; box-shadow: none; }
.trivia-summary { min-width: 0; margin: 1rem 0; }
.trivia-summary h2 { margin: 0; font-size: 1.6rem; }
.trivia-summary-result { margin: .25rem 0 1.25rem; font-size: 1.1rem; }
.trivia-summary-scores { padding: 0; margin: .5rem 0 1.5rem; list-style: none; }
.trivia-summary-scores li { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--cs-divider); }
.trivia-summary-scores li span { min-width: 0; overflow-wrap: anywhere; }
.trivia-summary-scores li strong { flex: none; }
.trivia-summary-answers { display: grid; gap: .8rem; }
.trivia-summary-card { min-width: 0; padding: 1rem; border: 1px solid var(--cs-border-card); border-radius: 12px; background: var(--cs-surface); overflow-wrap: anywhere; }
.trivia-summary-card h3 { margin: .3rem 0 .8rem; font-size: 1rem; line-height: 1.35; }
.trivia-summary-card dl { margin: .8rem 0 0; }
.trivia-summary-card dl div { margin: .65rem 0; }
.trivia-summary-card dt { color: var(--cs-text-muted); font-size: .75rem; }
.trivia-summary-card dd { margin: .2rem 0; }
.trivia-summary-mark { font-weight: 600; }
.trivia-summary-mark svg { width: 15px; height: 15px; vertical-align: middle; }
.trivia-summary-note, .trivia-summary-fact { margin: .75rem 0 0; color: var(--cs-text-2); font-size: .85rem; line-height: 1.45; }
.trivia-summary-fact { border-top: 1px solid var(--cs-divider); padding-top: .75rem; }
.last-trivia-answers { margin: 1rem 0; }
.last-trivia-answers summary { min-height: 44px; padding: .7rem 0; cursor: pointer; font-weight: 600; }
#host-panel-trivia { margin: .9rem 0; }#host-panel-trivia > button { width: 100%; min-height: 48px; }
.trivia-skip-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-height: 48px; border-top: 1px solid var(--cs-divider); }
.trivia-skip-row span { min-width: 0; overflow-wrap: anywhere; }.trivia-skip-row button { min-width: 70px; min-height: 44px; }
#member-session-review { width: 100%; min-height: 48px; margin: .5rem 0; }
@media (max-width: 360px) { .play-shell { padding-left: 1rem; padding-right: 1rem; }.trivia-title h2 { font-size: 1.2rem; }.game-radio-card { padding: .75rem; } }
.results-podium { display: flex; align-items: end; justify-content: center; gap: .5rem; margin: 2rem 0; }
.results-place { flex: 1; display: grid; gap: .4rem; min-width: 0; padding: .75rem .3rem; border: 1px solid var(--cs-border-card); border-radius: 10px; background: var(--cs-surface); text-align: center; overflow-wrap: anywhere; }
.results-place-1 { min-height: 8rem; border-color: var(--cs-accent); }
.results-place-2 { min-height: 6.5rem; }.results-place-3 { min-height: 5rem; }
.results-place small { color: var(--cs-accent); font: 600 .72rem "IBM Plex Mono", monospace; text-transform: uppercase; }
.results-place strong { font-size: clamp(.8rem, 3vw, 1.15rem); }
.results-place span { color: var(--cs-text-muted); font: .72rem "IBM Plex Mono", monospace; }
.results-table-wrap { overflow-x: auto; }.results-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.results-table th, .results-table td { padding: .65rem .4rem; border-bottom: 1px solid var(--cs-divider); text-align: left; }
.results-table tbody th { font-weight: 600; }
.results-table th { color: var(--cs-text-muted); font: 600 .68rem "IBM Plex Mono", monospace; text-transform: uppercase; }
.results-table-note td { color: var(--cs-text-muted); font-size: .72rem; }
#results-done { margin: 2rem 0 0; color: var(--cs-text-2); }
@media (max-width: 360px) { .guest-shell { padding-inline: 1rem; } .watch-banner { flex-wrap: wrap; } .results-podium { gap: .25rem; } }