.settings-open{display:grid;place-items:center}.settings-open svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
dialog.settings-dialog{box-sizing:border-box;width:min(480px,calc(100vw - 28px));max-width:none;max-height:calc(var(--app-height,100dvh) - 28px);padding:28px 26px 18px;border:2px solid #af9a69;border-radius:25px;background:radial-gradient(ellipse at 50% 0,#36503b,#1c3226 75%);color:#e9e2c9;box-shadow:inset 0 0 0 4px #1b3025,inset 0 0 0 5px #8f7e5250,0 6px 0 #393625,0 18px 50px #0008;overflow:auto;scrollbar-width:thin;scrollbar-color:#697353 #1b3025}
.settings-dialog::backdrop{background:#071b13c4}.settings-close{position:absolute;right:13px;top:12px;width:36px;height:36px;padding:0;border-radius:50%;background:linear-gradient(#526046,#2b4030);color:#e8d7a5;border:1px solid #a18d5f;font-size:28px;line-height:1;box-shadow:0 3px 4px #0005;cursor:pointer}.settings-heading{text-align:center;padding:0 22px 16px}.settings-heading>span{color:#c5af79;font-size:25px}.settings-heading h2,html[lang=si] .settings-heading h2{font:650 30px/1.6 system-ui;margin:0;color:#e5d5a8;text-shadow:0 2px 2px #0005}.settings-heading p{margin:3px 0 0;color:#aebda3;font-size:10px;letter-spacing:1px;line-height:1.6}
.settings-tabs{display:flex;padding:4px;gap:4px;border-radius:12px;background:#15281d;box-shadow:inset 0 2px 4px #0005;margin-bottom:18px}.settings-tabs button{width:50%;border:0;border-radius:9px;background:transparent;color:#afbaa3;font:600 13px/1.5 system-ui;padding:11px;cursor:pointer}.settings-tabs [aria-selected=true]{background:linear-gradient(#5b6749,#3f563b);color:#eee3c0;box-shadow:inset 0 1px 0 #cbd0a32a,0 2px 4px #0004}
.settings-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:67px;padding:12px 14px;margin:9px 0;border-radius:13px;border:1px solid #63715270;background:linear-gradient(115deg,#334a36,#293e2e);box-shadow:inset 0 1px 0 #d7d7ac12,0 2px 0 #14271b;cursor:pointer}.settings-row b{display:block;font-size:14px;font-weight:550;line-height:1.6;color:#e4e5cf}.settings-row small{display:block;font-size:10px;line-height:1.6;color:#b0bda3;margin-top:2px}.settings-row input[type=checkbox]{position:absolute;opacity:0;right:14px;width:46px;height:28px;margin:0}.switch-track{flex:0 0 46px;width:46px;height:27px;border-radius:20px;background:#192c21;border:1px solid #748268;box-shadow:inset 0 2px 4px #0006;transition:background .15s}.switch-track::after{content:'';display:block;width:21px;height:21px;margin:2px;border-radius:50%;background:linear-gradient(#ece9d6,#bfc6ac);box-shadow:0 2px 3px #0006;transition:transform .15s}.settings-row input:checked+.switch-track{background:#8b9e69;border-color:#b6be88}.settings-row input:checked+.switch-track::after{transform:translateX(19px);background:linear-gradient(#fff5d6,#e2d4a6)}.settings-row input:focus-visible+.switch-track{outline:2px solid #e6cf8a;outline-offset:4px}.settings-row input:disabled+.switch-track{opacity:.4}.settings-row select{max-width:125px;background:#1a3023;color:#e3e2c9;border:1px solid #7f8966;border-radius:7px;padding:8px;font:13px system-ui}.settings-rules{width:100%;margin-top:16px;border:1px solid #b3a070;border-radius:12px;padding:12px;background:linear-gradient(120deg,#c7b481,#a39162);color:#1b3023;font:650 13px/1.6 system-ui;box-shadow:inset 0 1px 0 #f1e5bc66,0 3px 0 #534b31;cursor:pointer}.settings-saved{font-size:10px;text-align:center;color:#aebba1;margin:18px 0 6px;line-height:1.6}.settings-flourish{text-align:center;font-size:12px;letter-spacing:10px;color:#9c9970;opacity:.7}.settings-note{color:#b3bfa7;font-size:11px;line-height:1.8}.settings-note[hidden],[role=tabpanel][hidden]{display:none}.volume-heading{display:flex;justify-content:space-between;color:#e3dfc2;padding:18px 0;font-size:14px}.volume-heading output{color:#d8c18a}#setting-volume{width:100%;accent-color:#b8aa78;height:32px;cursor:pointer}#settings-advanced{min-height:270px}.settings-dialog button:focus-visible,.settings-dialog select:focus-visible,.settings-dialog input[type=range]:focus-visible{outline:2px solid #e6cf8a;outline-offset:3px}
@media(max-width:420px){dialog.settings-dialog{padding:21px 17px 16px;border-radius:21px}.settings-heading h2,html[lang=si] .settings-heading h2{font-size:27px}.settings-row{padding:11px 12px;min-height:64px}.settings-row b{font-size:13px}.settings-row small{font-size:9px}header{gap:4px}.brand-light{display:none}.sound-toggle{display:none}}
@media(orientation:landscape) and (max-height:550px){dialog.settings-dialog{width:min(600px,calc(100vw - 28px));padding:14px 22px}.settings-heading{padding-bottom:8px}.settings-heading>span,.settings-heading p,.settings-flourish{display:none}.settings-heading h2,html[lang=si] .settings-heading h2{font-size:23px}.settings-tabs{margin-bottom:8px}.settings-tabs button{padding:6px}#settings-general{display:grid;grid-template-columns:1fr 1fr;gap:8px}.settings-row{margin:0;min-height:62px;padding:9px}.settings-row small{font-size:9px}.settings-row b{font-size:12px}.settings-saved{margin:10px 0 0}.settings-rules{margin-top:10px;padding:8px}#settings-advanced{min-height:132px}.settings-note{grid-column:1/-1}}
header .settings-open{margin-left:auto}
@media(max-width:420px){header .brand-light{display:inline}}
/* Keep the settings control circular at every viewport size. */
header .settings-open{width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px;flex:0 0 36px;aspect-ratio:1;border-radius:50%;padding:0}
@media(max-width:420px),(orientation:landscape) and (max-height:600px){header .settings-open{width:32px;height:32px;min-width:32px;min-height:32px;max-width:32px;max-height:32px;flex-basis:32px}}