/* An illustrated surround with live, accessible controls on its dark glass. */
#modal[data-kind="settings"]{--settings-height:min(800px,calc(100dvh - 24px));--settings-width:min(640px,calc(100vw - 24px));box-sizing:border-box;width:var(--settings-width);height:var(--settings-height);max-width:none;max-height:none;margin:auto;padding:calc(var(--settings-height) * .115) calc(var(--settings-width) * .11);overflow:hidden;border:0;clip-path:none;background:url('../public/assets/settings-v1/panel.png') center/100% 100% no-repeat;color:#e7f8ff;filter:drop-shadow(0 14px 28px #000b);animation:settings-panel-in .3s cubic-bezier(.2,.8,.2,1)}
#modal[data-kind="settings"]::backdrop{background:#010712b5;backdrop-filter:blur(6px)}
#modal[data-kind="settings"] .modal-header{position:static;inset:auto;margin:0;background:none;box-shadow:none;height:40px;min-height:40px;box-sizing:border-box;padding:0 12px 8px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2fcaff42;gap:12px}
#modal[data-kind="settings"] #modal-kicker{font:700 11px/1.2 Rajdhani,sans-serif;color:#82eaff;letter-spacing:2px}
#modal[data-kind="settings"] #close-modal{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:1px solid #4ddcff99;background:linear-gradient(135deg,#07517c,#07142b);color:#e6faff;box-shadow:inset 0 0 12px #06c4ff22,0 0 10px #0acbff20;clip-path:polygon(15% 0,100% 0,100% 85%,85% 100%,0 100%,0 15%);font-size:18px}
#modal[data-kind="settings"] #modal-content{height:calc(100% - 40px);min-width:0;overflow-y:auto;overflow-x:hidden;padding:0 6px 4px;scrollbar-width:thin;scrollbar-gutter:stable;scrollbar-color:#35caff #051429;overscroll-behavior:contain}
.settings-title{display:flex;align-items:center;gap:17px;padding:10px 0}
.settings-title-icon{display:grid;place-items:center;width:48px;height:48px;flex:none;color:#7beeff;filter:drop-shadow(0 0 7px #00bfff88)}
.settings-title-icon .setup-icon{width:40px;height:40px}
#modal .settings-title h2{margin:0;font:700 italic 34px/1 'Chakra Petch',sans-serif;letter-spacing:1px;color:#f0fcff;text-shadow:0 0 12px #29bfff55}
#modal .settings-title p{margin:7px 0 0;font:700 10px/1 Rajdhani,sans-serif;letter-spacing:3px;color:#64dcff}
#modal[data-kind="settings"] .settings-controls{border-top:1px solid #48cfff38}
#modal[data-kind="settings"] .settings-row{box-sizing:border-box;margin:0;border:0;box-shadow:none;min-height:clamp(48px,calc(var(--settings-height) * .074),60px);display:grid;grid-template-columns:minmax(0,1fr) 160px;align-items:center;gap:18px;padding:6px 4px;border-bottom:1px solid #2fb7ea25;background:linear-gradient(90deg,#007dbb09,transparent 70%)}
#modal[data-kind="settings"] .settings-row label{min-width:0;font:700 16px/1.1 Rajdhani,sans-serif;color:#e7f7ff;letter-spacing:.3px}
#modal[data-kind="settings"] .settings-row small{display:block;margin:5px 0 0;font:500 11px/1.25 Rajdhani,sans-serif;color:#8eacc8;letter-spacing:0}
#modal[data-kind="settings"] .settings-row select{box-sizing:border-box;width:100%;min-width:0;height:38px;padding:6px 10px;background:#031425;border:1px solid #248cc2;border-radius:2px;box-shadow:inset 0 0 12px #00bfff0c;color:#dff8ff;font:600 13px/1.1 Rajdhani,sans-serif;cursor:pointer}
#modal[data-kind="settings"] .settings-row select:disabled{opacity:.55;cursor:default}
#modal[data-kind="settings"] .settings-row input[type="checkbox"]{appearance:none;box-sizing:border-box;position:relative;justify-self:end;width:48px;height:26px;margin:0;cursor:pointer;border:1px solid #35607c;border-radius:20px;background:#04111f;transition:background .18s,border-color .18s,box-shadow .18s}
#modal[data-kind="settings"] .settings-row input[type="checkbox"]::after{content:'';position:absolute;left:4px;top:4px;width:16px;height:16px;border-radius:50%;background:#7795ad;transition:transform .18s,background .18s;box-shadow:0 1px 4px #0008}
#modal[data-kind="settings"] .settings-row input[type="checkbox"]:checked{border-color:#55e9ff;background:#005a77;box-shadow:0 0 12px #00d9ff35}
#modal[data-kind="settings"] .settings-row input[type="checkbox"]:checked::after{transform:translateX(22px);background:#c3fbff;box-shadow:0 0 7px #4deaff}
.settings-range{display:grid;grid-template-columns:minmax(0,1fr) 35px;align-items:center;gap:10px;width:100%}
.settings-range output{grid-column:2;grid-row:1;font:700 14px/1 Rajdhani,sans-serif;color:#77edff;text-align:right}
#modal[data-kind="settings"] .settings-range input{grid-column:1;grid-row:1;box-sizing:border-box;width:100%;min-width:0;height:24px;margin:0;accent-color:#65e6ff;cursor:pointer;filter:drop-shadow(0 0 3px #00ccff40)}
#modal[data-kind="settings"] :is(input,select,button,summary):focus-visible{outline:2px solid #c6faff;outline-offset:3px}
#modal[data-kind="settings"] .settings-footer{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
#modal[data-kind="settings"] .settings-footer button{min-height:36px;max-width:100%;padding:8px 12px;border:1px solid #18bdf3;background:linear-gradient(135deg,#063559,#041328);color:#c6f4ff;font:700 italic 13px/1.2 'Chakra Petch',sans-serif;letter-spacing:.6px;white-space:normal;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
#modal[data-kind="settings"] .settings-save-note{margin:10px 0;font:500 11px/1.3 Rajdhani,sans-serif;color:#8fb9d2}
.settings-credits{font:500 11px/1.4 Rajdhani,sans-serif;color:#91a8bd;border-top:1px solid #2dbce02b;padding-top:8px;overflow-wrap:anywhere}
.settings-credits summary{cursor:pointer;color:#6eb3d2;font-size:10px;letter-spacing:1px}
#modal .settings-credits p{font-size:10px;line-height:1.45}
.settings-credits a{color:#7cd8ff}
@keyframes settings-panel-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:520px){#modal[data-kind="settings"]{--settings-height:min(800px,calc(100dvh - 12px));--settings-width:calc(100vw - 12px)}#modal[data-kind="settings"] .modal-header{padding-inline:0;gap:6px}.settings-title{gap:10px;padding:10px 0}#modal .settings-title h2{font-size:clamp(24px,7.2vw,28px)}.settings-title-icon{width:30px}.settings-title-icon .setup-icon{width:28px;height:28px}#modal[data-kind="settings"] .settings-row{grid-template-columns:minmax(0,1fr) 48px;gap:10px;min-height:62px;padding:9px 1px}#modal[data-kind="settings"] .settings-row:has(.settings-range),#modal[data-kind="settings"] .settings-row:has(select){grid-template-columns:minmax(0,1fr);gap:8px}#modal[data-kind="settings"] .settings-row label{font-size:15px}#modal[data-kind="settings"] .settings-row small{font-size:11px;line-height:1.3}#modal[data-kind="settings"] #modal-kicker{font-size:9px;letter-spacing:.8px}.settings-range{gap:10px;grid-template-columns:minmax(0,1fr) 35px}.settings-range output{font-size:14px}}
@media(prefers-reduced-motion:reduce){#modal[data-kind="settings"],#modal[data-kind="settings"] *{animation:none!important;transition:none!important}}
body:has(#app[data-reduced-motion="true"]) #modal[data-kind="settings"],body:has(#app[data-reduced-motion="true"]) #modal[data-kind="settings"] *{animation:none!important;transition:none!important}