@font-face { font-family: Manrope; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../assets/manrope.ttf') format('truetype'); }
.choosing-setting :is(#hud,#panel,#capture,#build-toggle,#flash),.choosing-starter #build-toggle { visibility:hidden; }
#setting-picker { position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:22px;overflow:auto;background:rgba(8,30,29,.18);color:white;font:500 14px/1.5 Manrope,'Segoe UI',sans-serif; }
#setting-picker * { box-sizing:border-box; }
.setting-glass { width:min(800px,100%);padding:28px 32px 24px;border:1px solid #ffffff66;border-radius:28px;background:linear-gradient(135deg,#ffffff36,#ffffff1a);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 24px 80px #04181738,inset 0 1px #ffffff33; }
.setting-eyebrow { font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.2em;opacity:.85; }
#setting-title { font:800 clamp(26px,4vw,40px)/1.2 Manrope,sans-serif;letter-spacing:-.04em;margin:8px 0;color:white; }
.setting-intro { max-width:520px;margin:0 0 22px;color:#ffffffe0; }
.setting-options { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
#setting-picker .setting-option { min-width:0;padding:8px 8px 14px;border-radius:17px;border:1px solid #ffffff47;background:#ffffff1a;color:white;text-align:left;font:inherit;cursor:pointer; }
#setting-picker .setting-option:hover { background:#ffffff33; }
#setting-picker .setting-option[aria-pressed=true] { background:#e2ffee40;border-color:#e2ffec;box-shadow:inset 0 0 0 1px #e2ffec; }
.setting-mood { display:flex;align-items:end;min-height:60px;padding:10px;border-radius:11px;margin-bottom:10px;font-size:10px;letter-spacing:.05em;text-shadow:0 1px 6px #0008; }
.setting-bamboo-maple { background:linear-gradient(125deg,#858d4c,#496e56 55%,#d39360); }.setting-cliffside { background:linear-gradient(125deg,#6e8f92,#566d79 55%,#b1b5a4); }.setting-tropical { background:linear-gradient(125deg,#3d947d,#447542 55%,#aabf62); }.setting-temple { background:linear-gradient(125deg,#647d63,#3b584e 55%,#879d86); }.setting-mountain { background:linear-gradient(155deg,#d7a4a0,#8193a3 55%,#e7c6bb); }.setting-observatory { background:linear-gradient(155deg,#475f8f,#26354b 55%,#8191ae); }
.setting-option strong,.setting-option small { display:block;padding:0 4px; }.setting-option strong { font-size:14px;font-weight:800; }.setting-option small { font-size:11px;opacity:.85;margin-top:4px; }
.setting-footer { display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:22px; }.setting-footer p { margin:0;font-size:12px;color:#ffffffd9; }
#setting-confirm { border-radius:50px;padding:13px 20px;border:1px solid #ffffffb3;color:#173f39;background:#effff3;font:800 13px Manrope,sans-serif;white-space:nowrap; }#setting-confirm span { margin-left:12px; }
#setting-picker button:focus-visible { outline:3px solid white;outline-offset:3px; }
@media(max-width:650px) { #setting-picker { padding:12px;align-items:start; }.setting-glass { margin:auto 0;padding:22px 16px 18px;border-radius:22px; }.setting-options { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }.setting-mood { min-height:44px;margin-bottom:7px;padding:8px; }.setting-intro { font-size:12px;margin-bottom:16px; }.setting-option small { font-size:10px; }.setting-footer { flex-direction:column;gap:12px;margin-top:16px; }.setting-footer p { text-align:center;font-size:11px; }#setting-confirm { width:100%; } }
