/* One emerald, walnut and brass palette for app controls and game overlays.
   Transparency belongs to the surface, never to the text or its controls. */
:root{--game-veil:rgba(7,27,23,.10);--game-panel:rgba(7,27,23,.70);--game-field:rgba(16,40,32,.56);--game-line:rgba(226,189,117,.34);--game-muted:#dbe5d6;accent-color:var(--gold)}
select,option,optgroup{color:var(--text);background-color:var(--surface);border-color:var(--line);color-scheme:dark}
option:checked{background-color:var(--surface3);color:var(--gold)}
.voice-mode select{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:7px 10px}
input[type="checkbox"],input[type="radio"],input[type="range"]{accent-color:var(--gold)}
input[type="checkbox"]:not([role="switch"]){appearance:none;width:22px;height:22px;min-width:22px;vertical-align:middle;border:1px solid var(--line);border-radius:4px;background:var(--surface);cursor:pointer}
input[type="checkbox"]:not([role="switch"]):checked{background-color:var(--gold);border-color:var(--gold);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4 10-10' fill='none' stroke='%23071b17' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:100% 100%}
input[type="range"]::-webkit-slider-runnable-track{background:var(--line)}
input[type="range"]::-webkit-slider-thumb{border-color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input:-webkit-autofill{-webkit-text-fill-color:var(--text);box-shadow:inset 0 0 0 1000px var(--surface)}
audio{color-scheme:dark;accent-color:var(--gold);background:var(--surface);border:1px solid var(--line);border-radius:7px;max-width:100%}
audio::-webkit-media-controls-panel{background-color:var(--surface2)}
audio::-webkit-media-controls-current-time-display,audio::-webkit-media-controls-time-remaining-display{color:var(--text);text-shadow:none}
.toast{background:var(--surface2);color:var(--text);border:1px solid var(--gold)}
.toast.error{background:var(--surface2);color:var(--danger);border-color:var(--danger)}
.notice.error{color:var(--danger);background:rgba(243,165,160,.08);border-color:rgba(243,165,160,.34)}
.family-grid button{background:var(--surface2);color:var(--text);border-color:var(--line)}
.family-grid button.red{color:var(--danger)}
.family-grid button:hover,.family-grid button:focus-visible{border-color:var(--gold)}
.queen-targets button{background:var(--surface2);color:var(--text);border-color:var(--line)}

/* During a game the table remains visible through every transient surface. */
body[data-route="game"] .modal-scrim{background:var(--game-veil);backdrop-filter:none}
body[data-route="game"] .modal{background:var(--game-panel);border-color:var(--game-line);color:var(--text);box-shadow:0 14px 40px #0005;backdrop-filter:none}
body[data-route="game"] .modal p,body[data-route="game"] .modal .muted,body[data-route="game"] .modal .field,body[data-route="game"] .modal .field small,body[data-route="game"] .modal .switch-row small{color:var(--game-muted)}
body[data-route="game"] .modal-header h2{color:var(--gold)}
body[data-route="game"] .modal .panel{background:transparent;border:0;border-bottom:1px solid var(--game-line);border-radius:0;padding:12px 0 18px;box-shadow:none}
body[data-route="game"] .modal .panel:last-child{border-bottom:0}
body[data-route="game"] .modal .field input:not([type="range"]):not([type="checkbox"]),body[data-route="game"] .modal select,body[data-route="game"] .modal textarea{background:var(--game-field);color:var(--text);border-color:var(--game-line)}
body[data-route="game"] .modal .btn.secondary,body[data-route="game"] .modal .btn.ghost{background:transparent}
body[data-route="game"] .queen-targets button,body[data-route="game"] .hand-family,body[data-route="game"] .hand-family .family-grid button{background:var(--game-panel);border-color:var(--game-line)}
body[data-route="game"] .game-route .my-hand,body[data-route="game"] .game-route .end-round,body[data-route="game"] .reconnect-notice,body[data-route="game"] .mascot-popover,body[data-route="game"] #voice-dock{background:var(--game-panel);border-color:var(--game-line);box-shadow:none;color:var(--text)}
body[data-route="game"] .hand-title small,body[data-route="game"] .end-round p,body[data-route="game"] .mascot-popover p{color:var(--game-muted)}
body[data-route="game"] .end-round h2{color:var(--gold)}
body[data-route="game"] .hand-observer select{background:transparent;color:var(--gold);border-color:var(--game-line)}
body[data-route="game"] .table-preparation{background:var(--game-panel)}
body[data-route="game"][data-table-preparing="true"] .game-room-background{background-image:var(--room-image);background-position:center;background-size:cover}
body[data-route="game"][data-table-preparing="true"] .game-room-background .room3d-host{visibility:hidden}
body[data-route="game"] .event-announcement>div,body[data-route="game"] .event-announcement.compact>div,body[data-route="game"] .event-announcement.command>div,body[data-route="game"] .event-announcement.outcome>div,body[data-route="game"] .player-call{background:var(--game-panel);border-color:var(--game-line);color:var(--text);box-shadow:none}
body[data-route="game"] .event-announcement strong{color:var(--gold)}
body[data-route="game"] .event-announcement p{color:var(--game-muted)}
body[data-route="game"] .event-announcement.defeat strong{color:var(--danger)}

body[data-route="game"] #social-root:not([hidden]){background:var(--game-veil);backdrop-filter:none}
body[data-route="game"] .social-panel{background:var(--game-panel);color:var(--text);backdrop-filter:none;box-shadow:none}
body[data-route="game"] .social-heading h2{color:var(--gold)}
body[data-route="game"] .social-heading p,body[data-route="game"] .live-status,body[data-route="game"] .voice-privacy,body[data-route="game"] .chat-footnote{color:var(--game-muted)}
body[data-route="game"] .live-voice,body[data-route="game"] .social-messages,body[data-route="game"] .chat-composer,body[data-route="game"] .chat-footnote{background:transparent;border-color:var(--game-line)}
body[data-route="game"] .chat-turn-status,body[data-route="game"] .chat-turn-status.your-turn{background:transparent;color:var(--gold);border-bottom:1px solid var(--game-line);border-radius:0}
body[data-route="game"] .chat-message{background:rgba(16,40,32,.42);border-color:var(--line);color:var(--text)}
body[data-route="game"] .chat-message.mine{background:rgba(23,55,44,.50);border-color:var(--game-line)}
body[data-route="game"] .chat-meta,body[data-route="game"] .chat-meta time{color:var(--game-muted)}
body[data-route="game"] .chat-meta strong{color:var(--gold)}
body[data-route="game"] .chat-composer textarea,body[data-route="game"] .voice-mode select{background:var(--game-field);border-color:var(--game-line);color:var(--text)}
body[data-route="game"] .chat-composer textarea::placeholder{color:var(--game-muted)}
body[data-route="game"] .voice-person{color:var(--game-muted);background:transparent;border-color:var(--game-line)}
body[data-route="game"] .voice-person.speaking{background:rgba(141,210,172,.14);color:var(--green);border-color:var(--green)}
body[data-route="game"] .voice-person-row{border-color:var(--game-line)}
body[data-route="game"] .voice-person-row label,body[data-route="game"] .voice-mode{color:var(--game-muted)}
body[data-route="game"] .hold-to-talk[aria-pressed="true"]{background:rgba(141,210,172,.18);border-color:var(--green);color:var(--text)}
body[data-route="game"] audio{background:var(--game-field);border-color:var(--game-line)}
body[data-high-contrast="true"][data-route="game"] .modal,body[data-high-contrast="true"][data-route="game"] .social-panel{--game-panel:rgba(7,27,23,.86)}
.select-control{display:block;position:relative;min-width:0;width:100%}
.select-control .themed-select-source{position:absolute!important;top:0;left:0;width:1px!important;height:1px!important;min-height:1px!important;padding:0!important;margin:0!important;opacity:0;pointer-events:none;clip-path:inset(50%)}
.themed-select{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text);font-size:16px;line-height:1.4;text-align:left}
.themed-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.themed-select>svg{width:16px;height:16px;transform:rotate(90deg);flex-shrink:0}
.themed-select[aria-expanded="true"]{border-color:var(--gold)}
.themed-select-layer{position:fixed;inset:0;z-index:250;background:rgba(7,27,23,.18)}
.themed-select-menu{position:fixed;max-height:min(360px,calc(100dvh - 24px));overflow:auto;overscroll-behavior:contain;padding:5px;border:1px solid var(--game-line);border-radius:10px;background:var(--surface);color:var(--text);box-shadow:0 12px 35px #0005}
.themed-select-menu [role="option"]{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;width:100%;padding:10px 12px;background:transparent;border:1px solid transparent;border-radius:5px;color:var(--text);text-align:left;font-size:15px;line-height:1.45}
.themed-select-menu [aria-selected="true"]{color:var(--gold);background:rgba(226,189,117,.10)}.themed-select-menu [role="option"]:focus-visible{outline:0;border-color:var(--gold)}.themed-select-menu svg{color:var(--gold);width:18px;height:18px}
body[data-route="game"] .themed-select-layer{background:var(--game-veil)}
body[data-route="game"] .themed-select-menu{background:var(--game-panel)}
body[data-route="game"] .themed-select{background:var(--game-field);border-color:var(--game-line);color:var(--text)}
.hand-observer .themed-select{min-height:36px;padding:4px 3px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;font-size:12px;color:var(--gold)}
body[data-route="game"] .hand-observer .themed-select{background:transparent;color:var(--gold)}