/* Less narration, more recognizable controls and state. Do not hide actual game content. */
.home-panel .avatar-section { padding-top:8px; }
.home-panel .identity-preview { padding-bottom:0; }
.home-panel .field-icon .game-icon { width:18px; height:18px; }
.home-footer #home-rules { width:44px; height:44px; min-height:44px; padding:0; border:1px solid #4f63814d; border-radius:13px; }
.home-footer #home-rules .game-icon { width:21px; height:21px; }
.home-footer .home-facts { gap:16px; }
.room-code .game-icon { width:17px; height:17px; margin-left:8px; color:#92a6c4; vertical-align:baseline; }
.room-code:hover .game-icon { color:#eacb80; }
.room-head #leave { flex:0 0 44px; color:#8fa7c8; }
.table-heading h2 { display:flex; align-items:center; gap:8px; }
.table-heading h2 .game-icon { color:#d7ba78; width:24px; height:24px; }
.is-lobby .empty-seat { display:grid; place-items:center; align-content:center; }
.is-lobby .empty-sigil .game-icon { width:26px; height:26px; }
.is-lobby .seat-status { min-height:16px; }
.is-lobby .player-seat .avatar-change-button:focus-visible,.is-lobby .empty-seat:focus-visible { outline:2px solid #edcd81; outline-offset:3px; }
.icon-button { position:relative; min-width:44px; min-height:44px; }
.icon-button[data-busy] .game-icon { opacity:.35; }
.icon-button[data-busy]::after { position:absolute; left:calc(50% - 7px); top:calc(50% - 7px); margin:0; }
.icon-button:hover:not(:disabled) { color:#f0d38d; border-color:#cbae6a77; }
.settings-role.host-role { min-width:34px; padding:6px; }
.settings-legend { display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 0 12px; color:#8fa7c7; font-size:12px; flex-shrink:0; }
.settings-legend .game-icon { width:16px; height:16px; }
.assignment-scene { display:flex; align-items:center; justify-content:center; gap:16px; min-height:140px; padding:18px 0; }
.assignment-avatar { width:66px; height:66px; border-radius:22px; }
.assignment-target { display:flex; flex-direction:column; align-items:center; gap:8px; max-width:40%; }
.assignment-target b { font-size:15px; overflow-wrap:anywhere; }
.assignment-path { display:flex; align-items:center; gap:8px; color:#cfb372; }
.assignment-path .game-icon { width:20px; height:20px; }
.assignment-path .game-icon:nth-child(2) { width:34px; height:34px; transform:rotate(-8deg); }
.setting-card .pick-progress { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:12px 0; padding:4px 0; }
.pick-status { position:relative; display:inline-flex; width:40px; height:40px; opacity:.6; }
.pick-status .avatar-face { width:40px; height:40px; border-radius:13px; }
.pick-status i { position:absolute; right:-5px; bottom:-5px; display:grid; place-items:center; width:20px; height:20px; border:2px solid #17253a; border-radius:50%; color:#b1bfd3; background:#3b4960; }
.pick-status i .game-icon { width:12px; height:12px; }
.pick-status.is-ready { opacity:1; }.pick-status.is-ready i { background:#285f4c; color:#a5efd0; }
.pick-meter { display:flex; align-items:center; gap:10px; max-width:320px; margin:18px auto; }
.pick-meter > span { flex:1; height:5px; border-radius:8px; background:#293b55; overflow:hidden; }
.pick-meter i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6faec3,#95ddbc); transition:width .25s ease; }
.pick-meter b { color:#94adc9; font-size:12px; font-weight:500; }
.setting-card #open-pick { min-height:52px; display:flex; align-items:center; justify-content:center; gap:9px; }
.setting-card .locked-card { padding:20px; gap:12px; }
.setting-card .locked-card > .game-icon { color:#8fd9b5; width:34px; height:34px; }
.waiting-dots { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:18px; }
.waiting-dots i { display:block; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.4; animation:waiting-dot 1.5s ease-in-out infinite; }
.waiting-dots i:nth-child(2) { animation-delay:.15s; }.waiting-dots i:nth-child(3) { animation-delay:.3s; }
@keyframes waiting-dot { 0%,60%,100% { opacity:.3; transform:translateY(0); } 30% { opacity:.85; transform:translateY(-2px); } }
.hint-waiting .orbit-dot { display:none; }
.mystery-token { display:grid; place-items:center; width:32px; height:36px; border:1px solid #667ca0; border-radius:9px; color:#e6c983; font-size:20px; background:#132036; }
.dock-wait > .game-icon { color:#879cb9; }
.result-hero h2 .game-icon { width:24px; height:24px; }
.result-rank { display:flex; align-items:center; justify-content:center; gap:7px; margin:8px 0 0; color:#dfc078; }
.result-rank .game-icon { width:22px; height:22px; }
.result-row .psub .game-icon { width:14px; height:14px; margin-left:4px; color:#8bb9a7; }
.end-title h1 { display:flex; align-items:center; justify-content:center; gap:12px; }.end-title h1 .game-icon { width:32px; height:32px; }
#rematch { display:flex; align-items:center; justify-content:center; gap:9px; }
#hint-send,#ask-send,#open-guess { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; }
#ans-send { width:44px; flex:0 0 44px; padding:0; }
#ans-send .game-icon { width:21px; height:21px; }
.question-toolbar > div { display:flex; gap:6px; }
.question-toolbar .icon-button { width:44px; height:44px; padding:0; }
.question-toolbar .icon-button .game-icon { width:21px; height:21px; }
.question-state .game-icon { width:18px; height:18px; color:#8b9db9; }.question-option.asked .question-state .game-icon { color:#84c5a7; }
.count-badge { display:inline-flex; align-items:center; justify-content:center; min-width:24px; padding:2px 7px; margin-left:5px; border-radius:8px; background:#2d405d; color:#b7c9e2; font-size:11px; font-weight:500; }
.picker-count { display:flex; align-items:center; gap:5px; color:#819bbf; font-size:12px; }
.picker-count .game-icon { width:15px; height:15px; }
.preview-placeholders { display:flex; flex-direction:column; gap:7px; opacity:.5; }
.preview-placeholders > i { display:block; width:84px; height:8px; border-radius:5px; background:#476183; }
.preview-placeholders > span { display:flex; gap:5px; }.preview-placeholders > span i { width:38px; height:18px; border-radius:6px; border:1px solid #476183; }
.ccard { position:relative; }.ccard.sel::after { content:'✓'; position:absolute; top:5px; right:5px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#e7c67a; color:#231e12; border:2px solid #17273c; font-size:12px; box-shadow:0 2px 8px #0006; }
.picker-footer #pick-confirm { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; }
.empty-state > .game-icon { width:36px; height:36px; color:#819abb; }
.empty-state [data-clear-filters] { margin-top:6px; }
.action-choices > button.selected { border-color:#d9be7b; box-shadow:inset 0 0 0 1px #d9be7b44; }
.action-choices > button:focus-visible,.ccard:focus-visible { outline:2px solid #e8ca80; outline-offset:3px; }
@media (max-width:560px) {
  .assignment-scene { gap:10px; }.assignment-avatar { width:56px; height:56px; border-radius:18px; }.assignment-path { gap:5px; }
  .setting-card .pick-progress { gap:12px; }.setting-card { padding:12px; }
  .room-code { font-size:23px; }.table-heading h2 { font-size:20px; }
}
@media (prefers-reduced-motion:reduce) {
  .waiting-dots i { animation:none; opacity:.6; }.pick-meter i { transition:none; }
}
/* Let the next available action guide attention, once, without another instruction banner. */
.self-dock:has(.portrait-seat.turn) .action-choices { animation:actions-ready .35s ease-out; }
@keyframes actions-ready { from { opacity:.7; transform:translateY(4px); } to { opacity:1; transform:none; } }
.lobby-table[data-players="1"] .empty-seat:first-of-type { border-color:#9ab6d27d; background:#243b542b; }
@media (prefers-reduced-motion:reduce) { .self-dock .action-choices { animation:none !important; } }

/* Waiting may end early, but the exit stays secondary and content-sized on any viewport. */
.self-dock .stop-wait {
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:fit-content; max-width:100%; min-width:44px; height:44px; min-height:44px;
  padding:6px 12px; margin:0 auto; border:1px solid transparent; border-radius:999px;
  background:transparent; color:#8da3c4; font-size:12px; line-height:1; white-space:nowrap;
}
.self-dock .stop-wait .game-icon { width:16px; height:16px; flex-shrink:0; }
.self-dock .stop-wait:hover:not(:disabled) { color:#e5cd92; background:#d5b5740d; border-color:#d5b57440; transform:none; }
.self-dock .stop-wait:active:not(:disabled) { transform:scale(.96); background:#d5b5741a; }
.self-dock .stop-wait:focus-visible { outline:2px solid #ebcb80; outline-offset:2px; }
.self-dock .stop-wait[data-busy] { opacity:.65; }
.self-dock .stop-wait[data-busy]::after { display:none; }
.self-dock .stop-wait[data-busy] .game-icon { opacity:.45; }

/* One existing speaker entry opens a compact, keyboard-friendly volume sheet. */
#open-volume.is-muted { color:#e6b7b7; border-color:#70404b; }
#open-volume.audio-active { color:#a6eadb; border-color:#467f79; }
#open-volume.audio-active:focus-visible { box-shadow:0 0 0 3px #65d7be38; }
.sheet[data-kind="audio"] .audio-panel { width:calc(100% - 16px); max-width:360px; margin:0 auto max(8px, var(--safe-b)); border-radius:20px; }
.sheet[data-kind="audio"] .audio-body { display:grid; gap:14px; padding:14px 18px 18px; }
#audio-muted-state { color:#dbaeb6; font-size:12px; white-space:nowrap; }
.audio-mute { display:inline-flex; align-items:center; justify-content:center; gap:7px; justify-self:start; min-width:44px; min-height:44px; padding:8px 14px; background:transparent; color:#a6c2d3; }
.audio-mute .game-icon { width:18px; height:18px; }
.audio-mute.is-muted { color:#e6b7b7; border-color:#70404b; }
.volume-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:0 12px; }
.volume-row label { font-size:14px; color:#b8c8de; }
.volume-row output { color:#95acc7; font-size:12px; font-variant-numeric:tabular-nums; }
.volume-row input[type="range"] { grid-column:1 / -1; width:100%; min-width:0; height:44px; min-height:44px; padding:0; margin:0; background:transparent; border:0; accent-color:#92b4c7; }
.audio-mute:focus-visible,.volume-row input[type="range"]:focus-visible { outline:2px solid #ebcb80; outline-offset:2px; }
@media (min-width:900px) { .sheet[data-kind="audio"] .audio-panel { margin:auto; } }