/* Settings share the HUD's pixel-art palette and keep a full touch target. */
#ui .hud-settings{flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:9px;pointer-events:auto;border:2px solid #9fefff66;border-radius:8px;background:#03101ae8;color:#c8f6ff;box-shadow:0 3px 0 #0008;touch-action:manipulation}
.hud-settings svg{display:block;width:22px;height:22px;fill:currentColor}
#ui .hud-top{top:calc(max(var(--safe-top),var(--platform-safe-top,0px)) + 10px);align-items:center;gap:6px}
#ui .hud-top .o2box{flex:0 1 auto;min-width:0}
#ui .hud-top .o2bar{flex:0 1 118px;width:118px;min-width:20px}
#ui .hud-top .o2num{flex-shrink:0}
#ui .hud-top .depth{padding-left:6px;padding-right:6px}
#ui .layer-settings{z-index:180;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:#02101cd9;padding:max(12px,var(--safe-top),var(--platform-safe-top,0px)) max(12px,var(--safe-right),var(--platform-safe-right,0px)) max(12px,var(--safe-bottom),var(--platform-safe-bottom,0px)) max(12px,var(--safe-left),var(--platform-safe-left,0px));box-sizing:border-box;touch-action:pan-y}
.settings-panel{width:min(100%,420px);max-height:100%;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;border:2px solid #6cb8c4;border-radius:14px;background:linear-gradient(#103346,#071e2e);color:#e5f5ed;box-shadow:0 8px 0 #0005,0 24px 64px #0008}
.settings-panel header{position:relative;display:flex;align-items:center;justify-content:center;min-height:64px;flex-shrink:0;border-bottom:1px solid #72b9c540}
.settings-panel h2{margin:0;font-size:23px;color:#fff3c9}
.settings-panel .settings-back{position:absolute;left:10px;top:10px;min-height:44px;padding:6px 12px}
.settings-body{padding:16px 20px 12px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y}
.settings-body::-webkit-scrollbar{display:none}
.settings-body fieldset{margin:0 0 16px;padding:0;border:0;min-width:0}
.settings-body legend{padding:0 0 10px;font-size:16px}
.settings-directions{display:flex;gap:12px}
.settings-directions .btn{flex:1;min-height:44px}
.settings-directions [aria-pressed=true]{background:#24676a;border-color:#b2eab2;color:#fff6d4}
.settings-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;font-size:16px}
.settings-row input{width:24px;height:24px;accent-color:#8bd6bc;flex-shrink:0}
.settings-volume{display:block;width:100%;min-height:44px;margin:0;accent-color:#8bd6bc;touch-action:pan-x}
.settings-hint{margin:2px 0 14px;color:#a4c6d0;font-size:13px;line-height:1.6}
.settings-reset{width:100%;min-height:44px;margin-top:2px}
.settings-status{min-height:22px;color:#ffe2a1;font-size:13px;line-height:1.5;margin:10px 0 0;overflow-wrap:anywhere}
.settings-panel :focus-visible,.hud-settings:focus-visible{outline:2px solid #ffe49a;outline-offset:3px}
@media(max-width:360px){#ui .hud-top{gap:4px}#ui .hud-top .o2box{gap:4px;padding-left:5px;padding-right:5px}#ui .hud-top .depth{font-size:16px}#ui .hud-top .o2label{min-width:25px}}