:root {
    color-scheme: dark;
    --preferences-bg: var(--panel-solid, #181d2a);
    --preferences-fg: var(--text, #f2f5ff);
    --preferences-border: var(--border-strong, #65738f);
}
:root[data-theme="light"] {
    color-scheme: light;
    --preferences-bg: var(--panel-solid, #fff);
    --preferences-fg: var(--text, #18233c);
    --preferences-border: var(--border-strong, #64748b);
}
.player-settings {
    position: relative;
    flex: 0 0 auto;
    color: var(--preferences-fg);
    font: 600 13px/1.5 system-ui, sans-serif;
    z-index: 1100;
}
.player-settings > summary {
    cursor: pointer;
    border: 1px solid var(--preferences-border);
    border-radius: 999px;
    padding: 6px 12px;
    background: var(--preferences-bg);
    color: var(--preferences-fg);
    white-space: nowrap;
}
.player-settings-panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    width: min(260px, calc(100vw - 32px));
    display: grid;
    gap: 12px;
    padding: 16px;
    background: var(--preferences-bg);
    color: var(--preferences-fg);
    border: 1px solid var(--preferences-border);
    border-radius: 14px;
    box-shadow: var(--studio-shadow, 0 12px 40px #0004);
}
.player-settings-panel label {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 12px;
    align-items: center;
    color: inherit;
}
.player-settings-panel select {
    min-width: 0;
    min-height: 36px;
    padding: 5px;
    border: 1px solid var(--preferences-border);
    border-radius: 6px;
    background: var(--preferences-bg);
    color: var(--preferences-fg);
    font: inherit;
}
.player-settings :focus-visible {
    outline: 3px solid var(--yellow, #668bff);
    outline-offset: 3px;
}
.player-settings-floating {
    position: fixed;
    top: 12px;
    right: 16px;
}
@media (max-width: 600px) {
    .game-locked-nav .player-settings > summary { padding: 5px 8px; font-size: 12px; }
    .game-locked-nav .player-settings-panel { position: fixed; top: 70px; right: 12px; }
}