/* Independent HUD layout editor. Stored positions are relative to the safe area. */
#controlsSafeArea{position:fixed;left:calc(var(--safe-left) + 12px);right:calc(var(--safe-right) + 12px);top:calc(var(--safe-top) + 12px);bottom:calc(var(--safe-bottom) + 12px);pointer-events:none;visibility:hidden}
#controlsPanel .controls-card{width:min(1240px,100%);height:min(740px,calc(var(--usable-height) - 24px))}
#controlsPanel .controls-body{grid-template-columns:240px minmax(0,1fr);gap:24px}
.control-options{min-width:0}.control-select-label{display:block;font-size:12px;color:#aeb7c3;margin-bottom:7px}
#controlItem{width:100%;height:44px;background:#282e36;color:#eef1f5;border:2px solid #626d7c;border-radius:12px;padding:8px 10px;font:700 15px var(--ui);margin-bottom:24px;touch-action:manipulation}
#controlsPanel .device-tabs{margin-bottom:22px}
#touchSensitivitySetting[hidden]{display:none!important}
.layout-preview-wrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:0;min-width:0}
#controlsPanel .preview-caption{position:static;align-self:flex-start;flex:none;letter-spacing:2px;line-height:16px}
#controlsPanel #previewHelp{position:static;flex:none;font-size:11px;line-height:18px;text-align:center;min-height:18px}
#controlPreview{flex:none;position:relative;overflow:visible;border:0;outline:2px solid #444e5b;border-radius:16px;background:radial-gradient(ellipse,#30363e,#14181e);touch-action:none}
#controlPreview:before{content:'';position:absolute;inset:0;border-radius:16px;background-image:linear-gradient(#6b77870a 1px,transparent 1px),linear-gradient(90deg,#6b77870a 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.layout-item{position:absolute;padding:0;border:0;background:transparent;border-radius:12px;overflow:visible;touch-action:none;cursor:grab;isolation:isolate;min-width:0;min-height:0}
.layout-item:hover:not(:disabled){filter:none}.layout-item:active{cursor:grabbing}.layout-item.selected{outline:2px dashed #f0f3f8;outline-offset:3px;z-index:3}.layout-item:focus-visible{outline:2px solid #dce7f4;outline-offset:4px}.layout-item.transparent-item:not(.selected){outline:1px dashed #8593a5;outline-offset:1px}
.layout-item-art{display:block;position:absolute;left:0;top:0;transform-origin:top left;pointer-events:none;text-align:left}
.layout-item-tag{position:absolute;display:none;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;font:700 10px var(--ui);color:#11161d;background:#dae2ed;border-radius:5px;padding:2px 5px;pointer-events:none}
.layout-item.selected .layout-item-tag{display:block}.layout-item[data-item=length] .layout-item-tag,.layout-item[data-item=leaderboard] .layout-item-tag,.layout-item[data-item=metrics] .layout-item-tag,.layout-item[data-item=timer] .layout-item-tag{bottom:auto;top:calc(100% + 6px)}
.layout-stats,.layout-board,.layout-metrics,.layout-icon{border:3px solid #798696;background:#202832;color:#e0e7f0;box-shadow:inset 0 0 0 2px #0a1017;border-radius:16px;width:100%;height:100%}
.layout-stats{display:flex;justify-content:space-around;align-items:center}.layout-stats small{display:block;font-size:10px;letter-spacing:1px}.layout-stats strong{display:block;font:400 27px var(--display)}
.layout-board{padding:12px;font-size:12px}.layout-board-title{font:900 11px var(--ui);margin-bottom:13px}.layout-board>div:not(:first-child){margin:8px 0}.layout-board span{float:right}
.layout-metrics{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px}.layout-metrics b{font-size:13px}
.layout-timer{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:3px solid #798696;border-radius:16px;background:#202832;color:#eaf2dc;box-shadow:inset 0 0 0 2px #0a1017;font:700 21px/1 var(--ui,Arial);font-variant-numeric:tabular-nums}
.layout-icon{display:grid;place-items:center;padding:12px;border-radius:50%}.layout-item[data-item=chat] .layout-icon{border-radius:16px}.layout-stick{width:100%;height:100%;border:3px solid #7d8a9d;border-radius:50%;background:#7f92ac14;display:grid;place-items:center;box-shadow:inset 0 0 0 6px #202c3933}.layout-stick span{width:42px;height:42px;border:2px solid #b6c4d5;border-radius:50%;background:#768da9}
#hud,#leaderboard,#performanceHud,#runTimer,#emoteToggle,#slow,#boost,#touchPad{transition:none}
#leaderboardRows{scrollbar-width:none;-ms-overflow-style:none}
#leaderboardRows::-webkit-scrollbar{display:none;width:0;height:0}
#emoteToggle{z-index:12}
#touchPad{z-index:7;pointer-events:auto;touch-action:none;border:2px solid #d3e1c388;background:#18221545}#touchPad #thumb{pointer-events:none}
body:not(.mobile-device) #touchPad{display:none!important}
body.playing.mobile-device:not(:has(#boost.hidden)) #touchPad{display:block!important}
body.playing:not(.mobile-device) #boost:not(.hidden),body.playing:not(.mobile-device) #slow:not(.hidden){display:flex!important;z-index:7;width:58.4px;height:58.4px;touch-action:none}
body:has(#modal:not(.hidden)) #touchPad,body:has(#replayControls:not(.hidden)) #touchPad{display:none!important}
#emotePicker{max-width:calc(100% - var(--safe-left) - var(--safe-right) - 32px);max-height:calc(var(--usable-height) - 32px);z-index:11}
#emoteGrid{grid-template-columns:repeat(var(--emote-columns,7),minmax(0,1fr))}
@media(orientation:landscape) and (max-height:600px){
 #controlsPanel .controls-card{padding:12px 16px}#controlsPanel .controls-body{grid-template-columns:188px minmax(0,1fr);gap:18px}
 #controlsPanel .device-tabs{margin-bottom:7px}.control-select-label{font-size:10px;margin-bottom:3px}#controlItem{height:38px;font-size:12px;padding:4px 8px;margin-bottom:9px}
 #controlsPanel .control-range{margin-bottom:4px}#controlsPanel .control-note{font-size:10px}.layout-preview-wrap{gap:8px}#controlsPanel .preview-caption{font-size:9px}#controlsPanel #previewHelp{font-size:9px;line-height:14px}
}
@media(max-width:700px){#controlsPanel .controls-body{grid-template-columns:158px minmax(0,1fr);gap:12px}#controlsPanel .controls-card{padding:10px 12px}.controls-heading{margin-bottom:8px}.control-options{padding-right:5px}.device-tabs button{font-size:13px}.layout-item-tag{font-size:8px}}
.layout-item.selected:after{content:'';position:absolute;inset:-8px;border-radius:inherit;background:transparent}
@media(orientation:landscape) and (max-height:600px){#controlsPanel .preview-caption,#controlsPanel #previewHelp{display:none}.layout-preview-wrap{gap:0}}