/* Setting choice is presentation only; modes retain their independent meaning. */
.setting-picker { margin:12px auto; max-width:460px; }
.setting-picker[hidden] { display:none; }
.setting-picker legend { color:var(--muted); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; }
.setting-picker { border:0; padding:0; }
.setting-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.setting-card { position:relative; overflow:hidden; min-height:76px; padding:12px 14px; border:1px solid #73789b66; border-radius:10px; color:#fff; background:#151931; text-align:left; }
.setting-card strong,.setting-card small { position:relative; display:block; text-shadow:0 1px 5px #020511; }
.setting-card strong { font-size:14px; margin-bottom:6px; }
.setting-card small { font-size:10px; color:#d5d8e9; }
.setting-card::before { content:''; position:absolute; inset:0; opacity:.6; }
.setting-classic::before { background:radial-gradient(circle at 80% 25%,#ffd88a 0 2px,transparent 3px),radial-gradient(circle at 65% 70%,#7cddd5 0 1px,transparent 2px),radial-gradient(ellipse at 85% 50%,#594282,transparent),#10172e; }
.setting-ember::before { background:linear-gradient(90deg,#080e24cc,#080e2433),url('assets/ember/harbor-dusk-v1.webp') center 64%/cover; }
.setting-card[aria-pressed=true] { border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
.setting-card[aria-pressed=true] strong::after { content:' ✓'; color:var(--gold); }
.setting-card:hover { border-color:var(--gold); }
.setting-card:focus-visible { outline:3px solid var(--cyan); outline-offset:2px; }
.overlay #setting-help { font-size:10px; line-height:1.4; margin:8px 0 0; }
.prototype-note { display:block; color:#b6c6df; font-size:10px; margin:6px 0; }
.prototype-note strong { color:#9be7e7; }
.setting-state { font-size:9px; color:#b6c6df; }
.setting-state::before { content:'·'; margin:0 6px; }
.overlay { overflow-y:auto; overscroll-behavior:contain; }
.overlay-content { margin:auto; }
.overlay-content:has(#setting-picker:not([hidden])) .hero-star { display:none; }
.overlay-content:has(#setting-picker:not([hidden])) #overlay-description { font-size:11px; margin-bottom:8px; line-height:1.5; }
.focused-arcade .setting-card { min-height:66px; }
.focused-arcade .setting-picker { margin:8px auto; }
.overlay-content:has(#setting-picker:not([hidden])) h2 { font-size:clamp(21px,2.8vw,32px); margin-bottom:8px; }
body[data-setting=ember] .stage-caption { color:#d5cbba; }
@media(max-width:580px) {
 .setting-card { min-height:64px; padding:10px; }
 .setting-card strong { font-size:12px; }
 .setting-card small { font-size:9px; }
 .setting-picker { margin:8px auto; }
 .setting-state { display:none; }
 .overlay-content:has(#setting-picker:not([hidden])) .eyebrow { margin:4px 0; }
}
/* Menus get their own reading space on small screens; the live arena keeps
   its proportional bounds. No disabled joystick takes space from the menu. */
@media(max-width:600px), (max-height:460px) {
 .focused-arcade:has(#setting-picker:not([hidden])) { justify-content:flex-start; }
 .focused-arcade:has(#setting-picker:not([hidden])) .touch-controls,
 .focused-arcade:has(#setting-picker:not([hidden])) .game-footer { display:none; }
 .focused-arcade .overlay:has(#setting-picker:not([hidden])) {
   position:fixed; inset:190px 12px 16px; z-index:45;
   border:1px solid var(--line); border-radius:12px;
   background:radial-gradient(ellipse at 70% 25%,#49346777,transparent),#10172ef5;
 }
 body[data-setting=ember] .focused-arcade .overlay:has(#setting-picker:not([hidden])) {
   background:linear-gradient(#050d28bb,#050d2866),url('assets/ember/harbor-dusk-v1.webp') center/cover;
 }
 .focused-arcade .overlay-content:has(#setting-picker:not([hidden])) {
   width:min(100%,480px); max-width:100%; padding:20px 12px;
 }
}
@media(max-height:460px) {
 .focused-arcade .overlay:has(#setting-picker:not([hidden])) { inset:118px 12px 8px; }
 .overlay-content:has(#setting-picker:not([hidden])) { max-height:none; padding:10px 12px; }
 .setting-card,.focused-arcade .setting-card { min-height:52px; padding:8px 12px; }
 .setting-card small { display:none; }
 .overlay-content:has(#setting-picker:not([hidden])) #overlay-description { display:none; }
}