html, body { height: 100%; margin: 0; }
/* Layout rules must not reveal fields or screens hidden by capability checks. */
[hidden] { display: none !important; }
body { padding: 0 12px; box-sizing: border-box; }
#app { display: grid; grid-template-rows: minmax(0, 1fr); grid-auto-rows: auto; height: 100%; }
/* The chart background covers the window behind every screen and takes no grid row. */
#backdrop { position: absolute; inset: 0; z-index: -1; }
#bg, #bg-old { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Title shows the whole background; letterbox bars are fine, cropping is not. */
body:has(#title:not([hidden])) #bg, body:has(#title:not([hidden])) #bg-old { object-fit: contain; }
#loader:not([hidden]) { position: fixed; inset: 0; z-index: 1; margin: auto; width: min(420px, 80vw); height: fit-content; box-sizing: border-box; }
#loader-cover { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 30vh; object-fit: cover; }
#loader-info { display: grid; gap: 4px; padding: 16px 20px; overflow-wrap: anywhere; }
#songselect:not([hidden]) { display: grid; grid-template-columns: clamp(280px, 28vw, 360px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "info search" "info list" "commands commands"; gap: 8px 24px; min-height: 0; }
body.background-view > :not(#app):not(#cursor) { display: none !important; }

/* osu!lazer ButtonSystem: the band (ButtonArea, 100px) and the button row sit on the window's centre line. The row
   is centred on the logo facade, 0.74 of the logo's 256px TopLevel size, and the whole row shifts left by
   WEDGE_WIDTH × 2 − (BUTTON_WIDTH + SizeForFlow / 4) = 40 − (140 + 512 / 4) = −228px. Neighbours overlap by the
   20px wedge (flow spacing −WEDGE_WIDTH), so their slanted edges meet. */
#title:not([hidden]) { position: relative; overflow: hidden; }
#title-band { position: absolute; left: -12px; right: -12px; top: 50%; height: 100px; margin-top: -50px; }
#title-menu { position: absolute; left: -228px; right: 228px; top: 50%; height: 100px; margin-top: -50px; display: grid; grid-template-columns: minmax(0, 1fr) 189px minmax(0, 1fr); }
#title-left { display: flex; justify-content: flex-end; }
#title-right { display: flex; }
#title-left .menu-button { margin-right: -20px; }
#title-right .menu-button { margin-left: -20px; }
/* MainMenuButton: BUTTON_WIDTH 140, plus the 20px wedge padding on the first button of each side; exploding to 2×.
   Hover keeps the width so neighbours stay put. Contracted and exploded buttons leave the flow once faded (title.js adds menu-gone). */
.menu-button { position: relative; flex: none; width: 0; height: 100px; padding: 0; }
.menu-button.menu-expanded { width: 140px; }
.menu-button.menu-wedge.menu-expanded { width: 160px; }
.menu-button.menu-exploded { width: 280px; }
.menu-button.menu-wedge.menu-exploded { width: 320px; }
.menu-button.menu-gone { display: none; }
.menu-box, .menu-flash, .menu-content { position: absolute; inset: 0; }
.menu-box { overflow: hidden; }
#title-left .menu-wedge .menu-content { right: 20px; }
#title-right .menu-wedge .menu-content { left: 20px; }
/* Icon 32px in the middle, 4px up; label at the foot, 7px up and 3px left. */
.menu-icon { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -20px 0 0 -16px; }
.menu-icon svg { display: block; width: 100%; height: 100%; }
.menu-text { position: absolute; left: -3px; right: 3px; bottom: 7px; text-align: center; white-space: nowrap; }
/* The logo: 512px in the middle when alone; theme.css moves it onto the facade at half size. */
#title-spot { position: absolute; left: 50%; top: 50%; width: 512px; height: 512px; margin: -256px 0 0 -256px; }
#title-logo { width: 100%; height: 100%; }
#title-logo svg { display: block; width: 100%; height: 100%; }
#title-web:not([hidden]) { position: absolute; left: 0; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 0; text-align: left; }
.title-site { display: grid; }
/* NowPlayingOverlay: 400px at the top right; hidden with the toolbar while the logo is alone. */
/* One row: song cut with an ellipsis, time, buttons; the progress bar under it. Nothing wraps. */
#title-player:not([hidden]) { position: absolute; top: 10px; right: 0; width: min(560px, 100%); box-sizing: border-box; padding: 4px 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px 8px; }
#title.initial #title-player { visibility: hidden; }
#title-player p { margin: 0; grid-row: 1; white-space: nowrap; }
#title-song { grid-column: 1; overflow: hidden; text-overflow: ellipsis; }
#title-time { grid-column: 2; font-variant-numeric: tabular-nums; }
/* IconButton's 18px icon, boxes trimmed to 24px and touching; play keeps the same box. */
#title-controls { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: 0; }
#title-controls button { width: 24px; height: 24px; padding: 3px; display: grid; place-items: center; box-sizing: border-box; }
#title-controls svg { width: 18px; height: 18px; display: block; }
#title-pause:not([data-paused]) .title-play-glyph, #title-pause[data-paused] .title-pause-glyph { display: none; }
/* HoverableProgressBar: 5px, 10px under the pointer; it grows upward, so the box keeps 10px. */
#title-progress { grid-column: 1 / -1; height: 10px; display: flex; flex-direction: column; justify-content: flex-end; touch-action: none; }
.title-track { height: 5px; }
#title-progress:hover .title-track, #title-progress[data-seeking] .title-track { height: 10px; }
#title-progress span { display: block; width: 0; height: 100%; }
/* Volume overlay (osu!lazer): a 300px column at the left edge, meters stacked 10px apart, label beside each ring. */
#volume:not([hidden]) { position: fixed; z-index: 100; top: 0; bottom: 0; left: 0; width: 300px; padding-left: 10px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.volume-meter { display: flex; align-items: center; gap: 10px; }
.volume-ring { display: grid; place-items: center; }
.volume-ring > * { grid-area: 1 / 1; }
.volume-name { width: 120px; height: 20px; display: grid; place-items: center; }
#medley:not([hidden]) { display: grid; grid-template-columns: clamp(280px, 28vw, 360px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "info search" "info list" "commands commands"; gap: 8px 24px; min-height: 0; }
#medley h2, #medley h3, #medley p { margin: 0; }
#medley-detail { grid-area: info; display: grid; align-content: start; gap: 16px; padding: 12px; min-height: 0; overflow: auto; }
#medley-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 12px; }
#medley-songs { margin: 0; padding-left: 1.5em; display: grid; gap: 12px; }
#medley-songs li { padding: 8px 4px; }
.medley-picked-name { display: block; overflow-wrap: anywhere; }
.medley-picked-chart { display: flex; gap: 8px; align-items: center; }
#medley-top { grid-area: search; display: flex; align-items: center; gap: 12px; padding: 10px 10px 8px; }
#medley-search { flex: 1; min-width: 0; height: 40px; padding: 0 12px; box-sizing: border-box; }
#medley-list { grid-area: list; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 8px 12px; min-height: 0; }
#medley-list-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 12px; }
#medley-candidates { margin: 0; padding: 0; overflow: auto; overflow-x: hidden; min-height: 0; }
#medley-candidates .chart-name { flex: 1; }
#medley-commands { grid-area: commands; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#medley-status { flex: 1; }
#medley-pages { display: flex; align-items: center; gap: 8px; }
#course:not([hidden]) { display: grid; grid-template-columns: clamp(280px, 28vw, 360px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "info list" "commands commands"; gap: 8px 24px; min-height: 0; }
#course h2, #course h3, #course p { margin: 0; }
#course-detail { grid-area: info; display: grid; align-content: start; gap: 16px; padding: 12px; min-height: 0; overflow: auto; }
#course-songs { margin: 0; padding-left: 1.5em; display: grid; gap: 12px; }
#course-songs li { padding: 8px 4px; display: grid; gap: 4px; overflow-wrap: anywhere; }
#course-list { grid-area: list; margin: 0; padding: 8px 12px; overflow: auto; overflow-x: hidden; min-height: 0; }
#course-list .chart-name { flex: 1; }
#course-commands { grid-area: commands; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#course-status { flex: 1; }
#story:not([hidden]) { display: grid; grid-template-columns: clamp(280px, 28vw, 360px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "info list" "commands commands"; gap: 8px 24px; min-height: 0; }
#story h2, #story p { margin: 0; }
#story-detail { grid-area: info; display: grid; align-content: start; gap: 16px; padding: 12px; min-height: 0; overflow: auto; }
#story-charts { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
#story-charts li { padding: 8px 12px; }
#story-list { grid-area: list; margin: 0; padding: 8px 12px; overflow: auto; overflow-x: hidden; min-height: 0; }
#story-list li { grid-template-columns: 64px minmax(0, 1fr); align-items: center; }
#story-list .chart-name { flex: 1; }
.story-photo { width: 64px; height: 64px; object-fit: cover; }
#story-stage { position: relative; aspect-ratio: 1; overflow: hidden; }
#story-cover, .story-fx-copy { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#story-cover:not([src]) { visibility: hidden; }
#story-fx { position: absolute; inset: 0; pointer-events: none; }
.story-fx-flash { position: absolute; inset: 0; }
.story-fx-side { position: absolute; top: 0; bottom: 0; width: 29%; }
.story-fx-side.left { left: 0; }
.story-fx-side.right { right: 0; }
.story-fx-dot { position: absolute; top: 100%; width: 11%; aspect-ratio: 1; }
.story-fx-star { position: absolute; bottom: 0; width: 2%; aspect-ratio: 1; }
.story-fx-title { position: absolute; left: 0; right: 0; bottom: 12%; text-align: center; white-space: pre; }
.story-fx-title span { display: inline-block; white-space: pre; }
#story-commands { grid-area: commands; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#story-status { flex: 1; }
#top p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 10px 0 6px; }
#search-text { flex: 1 1 18em; max-width: 36em; height: 40px; box-sizing: border-box; padding: 0 12px; }
#view-switch, #sort-direction, #level-model { display: flex; align-items: center; gap: 4px; }
#top { grid-area: search; padding: 0 10px 8px; }
#menu-fps { margin-left: auto; flex-shrink: 0; white-space: nowrap; font-size: 12px; font-variant-numeric: tabular-nums; }
#filters { margin: 0 0 16px; display: grid; gap: 16px; }
#key-filter, #lamp-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
#time-rate { width: 5ch; padding: 0; }
#time-rate::-webkit-inner-spin-button, #time-rate::-webkit-outer-spin-button { display: none; }
#rate-controls { flex-basis: 100%; margin: 12px 0 0; padding: 8px 12px; min-width: 0; }
#rate-value { margin-left: 8px; }
#rate-input:not([hidden]) { display: inline-flex; align-items: baseline; margin-left: 8px; }
#rate-presets { position: relative; height: 30px; margin: 0 6px 12px; }
#rate-presets button { position: absolute; top: 0; padding: 6px 3px; }
#rate-presets .rate-end { position: absolute; top: 6px; }
#rate-presets .rate-end:first-child { left: 0; }
#rate-presets .rate-end:last-child { right: 0; }
#rate-controls .slider { width: auto; margin-bottom: 12px; }
.rate-custom-row { display: flex; align-items: center; }
#rate-custom { display: flex; align-items: center; gap: 12px; padding: 2px 6px; }
#rate-custom .feel-label { display: flex; align-items: center; gap: 12px; }
#rate-custom .feel-hover, #rate-custom .feel-flash, #rate-presets .feel-hover, #rate-presets .feel-flash { display: none; }
.range { display: grid; grid-template-columns: 3em minmax(14em, 1fr); column-gap: 8px; }
.range-title { grid-row: 1 / span 3; align-self: center; }
.range-chart { position: relative; height: 40px; display: grid; align-items: end; gap: 1px; }
.range-window { position: absolute; top: 0; bottom: 0; }
.range-bar { position: relative; z-index: 1; }
.range-axis { display: grid; gap: 1px; }

#panes { display: contents; }
#detail { grid-area: info; display: grid; grid-template-rows: minmax(0, auto) auto minmax(150px, 1fr); gap: 8px; overflow: hidden; min-height: 0; }
#detail, #list-pane { padding: 8px 12px; }
#selection { max-height: calc(100vh - 288px); overflow: auto; }
/* Hero: the chart background fills the pane width; level, chart name and title sit on its bottom edge. */
#hero { display: grid; grid-template-rows: auto auto; margin: 0 0 8px; overflow: hidden; }
#song-cover, #hero-text { min-width: 0; }
#song-cover { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 180px; padding: 12px 12px 0; box-sizing: border-box; object-fit: contain; }
#song-cover[hidden] { display: none; }
#hero-text { align-self: end; display: grid; gap: 2px; padding: 6px 12px; overflow-wrap: anywhere; }
#hero-text p, #hero-text h2 { margin: 0; }
#chart-line:not([hidden]) { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rate-badge { flex: none; padding: 1px 8px; }
#loader-rate { justify-self: start; margin-top: 6px; }
#song-duration:not([hidden]) { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; padding: 5px 0 2px; }
#song-duration svg { align-self: center; flex: none; width: 14px; height: 14px; }
#duration-value, #duration-original { flex: none; }
#song-notes:not([hidden]) { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 0 2px; }
#song-notes > span { white-space: nowrap; }
#density-overview { margin-bottom: 6px; }
#info-density { display: flex; align-items: end; gap: 1px; height: 40px; }
#info-density span { flex: 1; min-width: 0; }
#best { margin: 4px 0; }
#preview-status { margin: 6px 0 0; }
#links { margin: 6px 0 0; }
#links-list { margin: 4px 0; padding: 0; list-style: none; display: grid; gap: 4px; }
#links-list li { display: flex; align-items: center; gap: 6px; min-width: 0; }
#links-list label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#links-list input[type="number"], #links-offset { width: 8ch; }
#links-new { display: flex; align-items: center; gap: 6px; }
#links-url { flex: 1; min-width: 0; }
#links-status { margin: 0; }
#chart-menu { position: fixed; margin: 0; min-width: 180px; max-width: min(320px, calc(100vw - 24px)); padding: 8px; z-index: 1200; }
#chart-menu-name { margin: 0 0 6px; overflow-wrap: anywhere; }
#chart-edit { width: 100%; padding: 10px 12px; }
.play-options { padding: 0; margin: 0; min-width: 0; }
.mod-section { margin: 0 0 14px; }
.mod-section h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.mod-section output { margin-left: 12px; }
.option-buttons, .mod-buttons { display: flex; gap: 8px; }
.option-buttons button { flex: 1; padding: 8px; }
.option-buttons small { display: block; margin-top: 4px; }
.mod-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mod-buttons button { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; padding: 24px 10px 8px; text-align: center; }
.mod-buttons .feel-label { display: grid; grid-column: 1 / -1; justify-items: center; align-content: start; }
.mod-buttons strong { position: absolute; top: 9px; left: 12px; }
.mod-icon { display: block; width: 120px; max-width: 100%; height: 54px; }
.mod-copy { display: block; min-width: 0; }
.mod-buttons small { display: block; margin-top: 3px; }
#visibility-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#visibility-buttons .mod-icon { width: 72px; }
#visibility-buttons small { min-height: 1.5em; }
#arrangement-buttons button, #event-buttons button, #arrangement-buttons .feel-label, #event-buttons .feel-label { grid-template-columns: 90px minmax(0, 1fr); align-items: center; text-align: left; }
#arrangement-buttons .mod-icon, #event-buttons .mod-icon { width: 90px; }
.mod-state { position: absolute; top: 8px; right: 8px; padding: 1px 5px; }
.mod-note { margin: 8px 0 0; }
#play-controls { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(270px, 1fr); gap: 28px; }
.mod-deck, .mod-tuning { min-width: 0; }
.mod-tuning { padding-left: 24px; }
#mode-buttons button, #mode-buttons .feel-label { display: flex; align-items: center; justify-content: center; gap: 12px; }
#mode-buttons svg { width: 30px; height: 30px; flex: none; }
#mode-buttons button { padding: 4px 8px; }
#mods-dialog #rate-controls { margin-bottom: 14px; }
#health-buttons .gauge-mark { display: block; margin-bottom: 4px; }
#mods-dialog .mod-section:last-child { margin-bottom: 0; }
#mods-dialog .range { grid-template-columns: 1fr; }
#mods-dialog .range-title { grid-row: auto; }
@media (max-width: 800px) {
    #play-controls { grid-template-columns: 1fr; gap: 24px; }
    .mod-tuning { padding-left: 0; }
}
@media (max-width: 480px) {
    #visibility-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #arrangement-buttons, #event-buttons { grid-template-columns: 1fr; }
}
#detail svg { max-width: 100%; height: auto; }
#history-box { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); min-height: 0; }
#history-heading, #history-status { margin: 4px 0; }
#history-status:not(.placeholder) svg { display: none; }
#history-status.placeholder { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 20px; overflow-wrap: anywhere; }
#history-status.placeholder svg { flex: none; width: 22px; height: 22px; }
#history-controls, #history-controls label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
#history-scope { display: flex; gap: 0; }
/* Leave room for the sheared corners of multiline record buttons inside the scroll area. */
#history { overflow: auto; margin: 4px 0 0; padding: 0 20px; }
#history li { display: block; padding: 2px 0; }
#history li.ranked { display: grid; grid-template-columns: 2.5em minmax(0, 1fr) auto 4.5em; align-items: baseline; gap: 8px; }
#history li.ranked > :last-child { justify-self: end; }
.score-open { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding: 10px 16px; container-type: inline-size; }
.score-open > .feel-label { min-width: 0; }
.score-points { flex: none; min-width: 9ch; text-align: right; }
.score-mods { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-width: 0; margin-left: auto; }
.score-mods > span { padding: 2px 5px; overflow-wrap: anywhere; }
.score-performance { flex: 1 1 100%; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 8px; text-align: left; }
.score-performance > span { display: grid; align-content: start; gap: 3px; min-width: 0; }
.score-value { display: grid; gap: 2px; }
@container (max-width: 230px) {
    .score-performance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#score-tip { position: fixed; z-index: 10; display: grid; gap: 2px; padding: 6px 10px; }
#score-tip[hidden] { display: none; }

#list-pane { grid-area: list; display: grid; grid-template-columns: minmax(0, 1fr) 4px; grid-template-rows: auto minmax(0, 1fr); column-gap: 8px; padding-right: 0; margin-right: -12px; min-height: 0; }
#list-head { grid-column: 1; max-width: 52em; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; }
#list-head p { margin: 4px 0; }
#key-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
#library-tabs, .chart-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
#list-head #list-summary { flex: 1 1 100%; }
#song-list { grid-area: 2 / 1; min-width: 0; overflow: auto; overflow-x: hidden; margin: 0; padding: var(--level-head, 0px) calc(24px + var(--level-columns, 0px)) 0 0; }
#level-columns { grid-area: 2 / 1; justify-self: end; display: flex; flex-direction: column; min-height: 0; margin-right: 8px; pointer-events: none; }
#level-head, .level-row { display: flex; gap: 12px; }
#level-cells { position: relative; flex: 1; overflow: hidden; }
.level-row { position: absolute; right: 0; align-items: center; }
.level-col { width: 7ch; text-align: right; white-space: nowrap; }
.level-col:last-child { width: 15ch; }
#level-head .level-col { pointer-events: auto; flex-shrink: 0; padding: 4px 0; }
#catalog-loading:not([hidden]) { grid-area: 2 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 24px; }
.song-catalog li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; max-width: 52em; padding: 1px 4px; }
#song-list li.chart-in-song, #song-list li.more { padding-left: 32px; }
/* A rail under the open folder marks its charts. It stays 29 px from the list edge, where the folder row starts:
   left = 29 px - border - margin-left, so a row that moves (selected margin 0, others 75 px) keeps it in place. */
#song-list li.chart-in-song::before, #song-list li.more::before { content: ''; position: absolute; top: 0; bottom: 0; left: -50px; width: 2px; }
#song-list li.chart-in-song[aria-selected="true"]::before { left: 25px; }
#song-list li[role="presentation"]:not(.more) { padding-top: 10px; }
#song-list li.list-spacer { padding: 0; border: 0; }
.chart-progress { justify-content: flex-end; max-width: 26em; }
#song-list .chart-progress time, #song-list .chart-progress .chart-reason { display: flex; justify-content: flex-end; flex: 1 1 100%; }
.chart-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chart-name { display: block; min-width: 0; overflow: hidden; }
.chart-title { display: block; position: relative; width: max-content; }
.chart-repeat { position: absolute; top: 0; left: calc(100% + 48px); width: max-content; }
.chart-mark { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.chart-level { display: block; width: 2ch; flex-shrink: 0; }
.source-level { flex-shrink: 0; }
.chart-mark .source-level { min-width: 4ch; }
.chart-lamp { display: block; width: 10px; height: 22px; box-sizing: border-box; flex-shrink: 0; }
.combo-lamp { display: grid; place-items: center; position: relative; }
.lamp-flash { position: absolute; inset: 0; }
.lamp-shine { position: absolute; top: 0; left: 0; right: 0; height: 8px; }
.combo-lamp[data-half] .lamp-flash { top: 50%; }
.combo-lamp[data-half] .lamp-shine { display: none; }
.chart-release { white-space: nowrap; }
.chart-points { display: flex; justify-content: flex-end; width: 6ch; flex-shrink: 0; }

#sort-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); gap: 8px; margin-bottom: 16px; }
#sort-options button { padding: 12px 16px; }
/* Bottom command bar: command buttons left, the player profile centred, status text right. */
/* Command bar: one joined strip of buttons flush with the bar's left, top and bottom edges. */
#commands { grid-area: commands; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.hints { min-width: 0; display: flex; gap: 0; align-self: stretch; }
.hints button { flex: 0 1 auto; display: grid; align-content: center; justify-items: center; gap: 2px; min-width: 7em; min-height: 56px; box-sizing: border-box; margin: 0; padding: 8px 20px; }
.hints button > span, .hints button > feel-label > span { max-width: 100%; overflow-wrap: anywhere; }
#hints-end { justify-self: end; }
#scroll-summary { align-self: center; flex: none; padding-left: 16px; white-space: nowrap; }
#mod-summary { align-self: center; min-width: 0; padding: 0 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#mod-summary .mod-key { padding: 1px 6px; }
#player { display: grid; justify-items: center; gap: 2px; min-width: 12em; padding: 6px 20px; }
#player > span, #player > feel-label > span { display: flex; gap: 12px; }
#notices { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 20; display: grid; gap: 8px; justify-items: center; max-width: min(640px, calc(100vw - 32px)); pointer-events: none; }
#notices > p { margin: 0; padding: 10px 20px; white-space: pre-line; }
#popups { position: fixed; right: 16px; bottom: 72px; z-index: 20; display: grid; gap: 8px; justify-items: end; max-width: min(420px, calc(100vw - 32px)); }
#popups > p { margin: 0; padding: 10px 16px; white-space: pre-line; cursor: pointer; }
#player-input { width: 16em; }
#best-dialog { width: min(820px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 24px 28px; box-sizing: border-box; overflow: auto; }
#best-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
#best-head h2 { display: flex; align-items: baseline; gap: 16px; margin: 0; }
#best-list { margin: 0; padding: 0; list-style: none; }
#best-list li { display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto 100px; align-items: center; gap: 0 16px; }
#best-list li > div { display: grid; gap: 2px; min-width: 0; padding: 10px 0; }
#best-list li > div > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#best-list .best-mm { justify-items: end; text-align: right; }
#best-list .best-box { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 2px; padding-left: 12px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }
#mods-dialog { width: min(1020px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 24px 28px; box-sizing: border-box; overflow: auto; }
#downloads { width: min(940px, calc(100vw - 48px)); max-height: calc(100vh - 48px); box-sizing: border-box; overflow: auto; }
#downloads > header, #downloads > footer, #download-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#downloads > header { justify-content: space-between; }
#download-form label { display: flex; align-items: center; gap: 6px; }
#download-query { width: 26em; max-width: 55vw; }
#download-server { width: 30em; max-width: 65vw; }
#download-list { padding: 0; max-height: 50vh; overflow: auto; }
#download-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 12px 0; }
#download-list strong, #download-list span { min-width: 0; overflow-wrap: anywhere; }
#download-list strong { grid-column: 1; }
#download-list span { grid-column: 1; }
#download-list button { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
#download-progress { width: 100%; margin-top: 12px; }
#download-status { overflow-wrap: anywhere; }
#mods-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 10px; }
#mods-dialog h2 { margin: 0; }
#playback-status { margin: 8px 0; min-height: 1.2em; }
#advanced { width: min(900px, calc(100vw - 48px)); max-height: calc(100vh - 48px); box-sizing: border-box; overflow: auto; }
#advanced h2 { margin: 0 0 16px; }

#editor:not([hidden]) { display: grid; grid-template-rows: auto auto minmax(240px, 1fr) auto auto; gap: 8px; min-height: 0; }
#editor header, #edit-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; }
#editor header h2, #editor p { margin: 0; }
#edit-title { flex: 1; }
#edit-body { display: grid; grid-template-columns: 160px minmax(280px, 1fr) 44px 220px; gap: 12px; min-height: 0; }
#edit-charts, #edit-inspector { overflow: auto; min-height: 0; }
#edit-charts ul { padding: 0; margin: 8px 0; }
#edit-charts button { width: 100%; margin-bottom: 4px; }
#edit-chart-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; }
#edit-chart-list li button + button { width: auto; }
#edit-field { display: grid; min-height: 0; overflow: hidden; }
#edit-grid, #edit-map { width: 100%; height: 100%; min-height: 240px; }
#edit-inspector form { display: grid; gap: 6px; }
#edit-inspector form[hidden] { display: none; }
#edit-inspector label { display: grid; gap: 2px; }
#edit-inspector input, #edit-inspector select { width: 100%; box-sizing: border-box; }
#edit-inspector h3 { margin: 8px 0; }
#edit-inspector ol { padding-left: 20px; }
#edit-inspector li { margin: 4px 0; }
#edit-sv-effects { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
#edit-sv canvas { display: block; width: 100%; margin-top: 6px; }
#edit-sv-apply { margin-top: 6px; width: 100%; }
/* Audio menu (Quaver's editor menu bar): checked items drop down under the button. */
#edit-audio-menu { position: relative; }
#edit-audio-items:not([hidden]) { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; min-width: 14em; padding: 4px 0; }
#edit-audio-items label { display: flex; justify-content: space-between; gap: 16px; padding: 6px 12px; }
#edit-audio-items input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; }
/* osu!lazer editor BottomBar: 50 high; columns time | summary | playback | Test, 15 padding inside each.
   lazer's 150 / 220 columns are 180 / 300 here: Gosu UI digits are wider than Torus and there are five speeds. */
#edit-transport { display: grid; grid-template-columns: 180px minmax(0, 1fr) 300px 110px; height: 50px; }
#edit-clock { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; padding: 0 15px; min-width: 0; }
#edit-time, #edit-position { grid-column: 1 / -1; justify-self: start; padding: 0 2px; }
#edit-position { width: 128px; height: 26px; box-sizing: border-box; }
#edit-summary { width: 100%; height: 100%; padding: 0 15px; box-sizing: border-box; }
#edit-playback { display: flex; align-items: center; gap: 9px; padding: 0 15px; }
#edit-play { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; flex: none; }
#edit-play svg { width: 28px; height: 28px; }
#edit-speed { display: grid; flex: 1; min-width: 0; }
#edit-rates { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 16px; }
#edit-rates button { padding: 0; text-align: center; }
#edit-test { height: 100%; }
#editor.compact #edit-charts { display: none; }
#editor.compact #edit-body { grid-template-columns: minmax(280px, 1fr) 44px 220px; }
#editor.testing #edit-charts, #editor.testing #edit-inspector, #editor.testing #edit-toolbar { display: none; }
#editor.testing #edit-body { grid-template-columns: minmax(280px, 1fr) 44px; }
#editor.testing { grid-template-rows: auto minmax(240px, 1fr) auto auto; }
#key-controls { display: flex; align-items: center; gap: 12px; }
#key-count { min-width: 6em; padding: 6px 10px; }
#lane-keys { display: grid; gap: 2px; max-width: 100%; margin: 0 auto; }
.key-lane { position: relative; display: grid; grid-template-rows: 48px 180px 24px; min-width: 0; padding: 0; }
.key-arrow { align-self: center; }
.key-track { position: relative; display: block; grid-row: 2; overflow: hidden; box-sizing: border-box; }
.key-name { position: absolute; top: 48px; bottom: 24px; left: 0; right: 0; display: grid; place-items: center; overflow: hidden; }
.key-number { grid-row: 3; }
.key-note { position: absolute; left: 2px; right: 2px; }
#key-help { margin: 12px 0 0; }
#key-status { min-height: 3em; margin: 12px 0 0; }
#key-pad { box-sizing: border-box; margin: 16px 0 0; padding: 10px; }
/* Settings: a fixed panel with section tabs on the left (Quaver's options menu). */
/* One fixed size; the preview column stays while the list scrolls, so sections never reflow. */
#settings[open] { display: grid; grid-template-columns: 9em minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head head" "tabs panel"; gap: 12px 24px; box-sizing: border-box; width: min(1480px, calc(100vw - 32px)); height: min(680px, calc(100vh - 32px)); max-width: none; max-height: none; margin: auto; padding: 14px 20px; overflow: hidden; }
#settings-head { grid-area: head; display: flex; justify-content: space-between; align-items: center; }
#settings-head h2 { margin: 0; }
/* Scroll boxes clip their children, so pad by the skewed buttons' overhang (height × tan 11.31° / 2) plus the press bounce. */
#settings-tabs { grid-area: tabs; display: grid; align-content: start; gap: 4px; padding: 4px 8px; overflow: auto; }
#settings-tabs button { display: flex; justify-content: flex-start; padding: 10px 14px; }
#preferences:not([hidden]) { display: contents; }
#settings-content { grid-area: panel; min-height: 0; padding: 4px 8px; overflow: auto; }
#settings.with-preview[open] { grid-template-columns: 9em minmax(0, 1fr) minmax(360px, 1.05fr); grid-template-areas: "head head head" "tabs panel preview"; }
#settings-preview { grid-area: preview; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-self: stretch; gap: 8px; }
#settings-preview header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#settings-preview-frame { aspect-ratio: 16 / 9; width: 100%; }
#settings-preview-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
#settings-preview-retry { align-self: flex-start; }
@media (max-width: 1050px) {
    #settings.with-preview[open] { grid-template-columns: 8em minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "head head" "tabs preview" "tabs panel"; }
    #settings-preview { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
    #settings-preview header { grid-column: 1 / -1; }
    #settings-preview-frame { grid-row: 2 / 5; max-width: 360px; }
    #settings-preview-retry { align-self: start; }
}
@media (max-width: 600px) {
    #settings.with-preview[open] { grid-template-columns: 6em minmax(0, 1fr); gap: 8px; padding: 12px; }
    #settings-preview { display: flex; }
    #settings-preview-frame { max-width: 100%; }
    #settings-preview > p:empty { display: none; }
    #settings.with-preview .settings-row { grid-template-columns: 1fr; gap: 4px; }
    #settings.with-preview .slider { width: min(18em, calc(100vw - 170px)); }
}
#settings [role="tabpanel"] { min-height: 0; }
#panel-hud-layout { height: 100%; }
.section-heading { margin: 40px 0 8px; }
#settings-content > .section-heading:first-of-type { margin-top: 0; }
/* The preview takes whatever the panel leaves after the item rows, the controls and the status line, however many rows they wrap to. */
#hud-layout-form { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; gap: 10px; }
#hud-preview { container-type: size; min-width: 0; min-height: 0; display: grid; place-items: center; }
#hud-items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
#hud-items button { min-width: 0; white-space: nowrap; }
#hud-layout-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#hud-layout-controls input[type="number"] { width: 4.5em; }
#hud-preview-keys { margin-left: auto; }
#settings #hud-layout-status { margin: 0; min-height: 1.2em; }
#hud-preview iframe { display: block; aspect-ratio: 16 / 9; width: min(100cqw, 100cqh * 16 / 9); height: auto; }
.hud-preview-page { padding: 0; overflow: hidden; }
.hud-preview-page canvas { display: block; }
#preview-error { padding: 12px; }
#settings h3 { margin: 4px 0 6px; }
#settings h3:not(:first-child) { margin-top: 16px; }
#settings p { margin: 6px 0; }
/* One "name | value" row per item. */
.settings-row { display: grid; grid-template-columns: 10em minmax(0, 1fr); align-items: center; gap: 16px; padding: 5px 0; }
.settings-row > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
#folder-list { margin: 0 0 8px; display: grid; gap: 4px; }
#folder-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
#folder-list span { overflow-wrap: anywhere; }
#folder-path { width: 28em; max-width: 100%; }
/* Settings sliders (settings/slider.js): parts sit under the invisible range input. */
.choice { display: flex; flex-wrap: wrap; gap: 6px; }
/* Long settings choices (settings/dropdown.js), after osu!lazer OsuDropdown: 40px header with 10px padding,
   corner radius 5, menu 4px below with 5px inner padding; each item pads 2px and indents its label 15px. */
.dropdown { position: relative; display: inline-block; min-width: 14em; }
.dropdown-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px 0 10px; border-radius: 5px; text-align: left; }
.dropdown-chevron { flex: none; width: 6px; height: 6px; margin-top: -4px; border-style: solid; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dropdown.open .dropdown-chevron { transform: scaleY(-1) rotate(45deg); margin-top: 4px; }
.dropdown-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; display: grid; grid-template-rows: 0fr; border-radius: 5px; overflow: hidden; visibility: hidden; opacity: 0; }
.dropdown.open .dropdown-menu { grid-template-rows: 1fr; visibility: visible; opacity: 1; }
.dropdown-list { min-height: 0; display: flex; flex-direction: column; padding: 0 5px; }
.dropdown-list > :first-child { margin-top: 5px; }
.dropdown-list > :last-child { margin-bottom: 5px; }
.dropdown-list > button { position: relative; display: block; padding: 2px 2px 2px 17px; border: 0; border-radius: 5px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-mark { position: absolute; left: 5px; top: 50%; width: 4px; height: 4px; border-style: solid; border-width: 0 2px 2px 0; transform: translate(-3px, -50%) rotate(-45deg); }
.slider { position: relative; display: block; width: 18em; height: 30px; margin-inline: 6px; }
.slider-fill, .slider-rest, .slider-nub { position: absolute; top: 0; bottom: 0; }
.slider-fill { left: 0; }
.slider-rest { right: 0; }
.slider-nub { width: 50px; box-sizing: border-box; }
.slider input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
/* Equal columns, so the wider 10K label does not stretch the 9K column above it. */
.lane-picker { display: grid; grid-template-columns: repeat(var(--lane-columns, 5), 1fr); width: max-content; gap: 4px; }
.lane-picker button:last-child { grid-column: -2 / -1; }
#skin-picker { display: flex; flex-wrap: wrap; gap: 8px; }
#skin-picker button { display: grid; justify-items: center; gap: 4px; padding: 4px; }
#skin-picker img { width: 85px; height: 154px; }
#settings.with-preview .settings-row { grid-template-columns: 9em minmax(0, 1fr); gap: 10px; }
#settings.with-preview .settings-row > span { min-width: 0; }
#settings.with-preview .slider { width: min(18em, 100% - 12px); }
#settings.with-preview #skin-picker { gap: 6px; }
#settings.with-preview #skin-picker img { width: 58px; height: 105px; }
#settings.with-preview #skin-picker button { font-size: 12px; }
.lane-picker button { min-width: 3.2em; padding: 4px 6px; }
#key-binding { margin-top: 8px; }
/* osu!lazer OsuTextBox: 40px tall, 10px either side, text at half the height; the 3px focus border is always
   reserved so focusing does not move the text. Number boxes drop the browser spinners. */
#settings .settings-row input:is([type="text"], [type="number"], [type="url"], :not([type])) { box-sizing: border-box; height: 40px; padding: 0 7px; }
#settings input[type="number"] { width: 5.5em; appearance: textfield; }
#settings #display-ghostScore { width: 8em; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-height: 760px) {
    #settings .key-lane { grid-template-rows: 40px 140px 24px; }
    #settings .key-name { top: 40px; }
}
@media (max-height: 680px) {
    #detail { grid-template-rows: minmax(0, auto) auto minmax(220px, 1fr); }
}
/* Keep actions in view; each column can scroll in a short window. */
#result:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head head" "score detail" "foot foot"; gap: 20px 40px; width: min(1160px, 100%); margin-inline: auto; padding: 24px 28px 16px; box-sizing: border-box; min-height: 0; overflow: hidden; }
#result-head { grid-area: head; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label state" "song state" "meta state" "run run" "calibration calibration"; gap: 8px 24px; padding-bottom: 18px; }
#result-head h1, #result-head p { margin: 0; }
#result-heading { grid-area: label; }
#result-song { grid-area: song; overflow-wrap: anywhere; }
#result-state { grid-area: state; align-self: center; }
#result-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
#result-chart-name { display: flex; align-items: center; gap: 12px; }
#result-keys { padding: 4px 10px; }
#result-flags:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
#result-run { grid-area: run; min-width: 0; }
#result-run summary { width: max-content; padding-block: 4px; }
#result-run dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 8px 0 0; }
#result-run dd { overflow-wrap: anywhere; }
#result-calibration { grid-area: calibration; }
#result-calibration:not([hidden]) { display: flex; align-items: center; gap: 12px; }
#result-score { grid-area: score; min-height: 0; overflow: auto; padding-right: 8px; }
#result-total { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 0 28px; }
#result-total > div:not(.result-points) { display: grid; gap: 6px; }
#result-performance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; padding-top: 14px; }
#result-performance div { display: grid; gap: 6px; min-width: 0; }
#result-performance dt, #result-performance dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#result-mm-status { margin: 0 0 12px; }
#result-mm-status:empty { display: none; }
#result-performance-status { margin: 0 0 12px; }
#result-performance-status:empty { display: none; }
.result-points { grid-column: 1 / -1; padding: 8px 0 20px; }
#result dd { margin: 0; }
#result h2 { margin: 0 0 6px; }
#comparison-status { margin: 0 0 12px; }
#comparison:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; margin: 0; }
#result-detail { grid-area: detail; display: grid; align-content: center; min-height: 0; overflow: auto; padding: 12px 0 24px 24px; }
#result-judgements { display: grid; gap: 22px; margin: 0; }
.result-grade { display: grid; grid-template-columns: 5em minmax(0, 1fr); align-items: baseline; gap: 5px 16px; }
.result-grade > dd:not(.result-track) { justify-self: end; }
.result-track { grid-column: 1 / -1; height: 4px; overflow: hidden; }
.result-track span { display: block; height: 100%; }
#result-timeline:not([hidden]) { position: relative; display: flex; align-items: end; gap: 1px; height: 48px; margin: 22px 0 0; }
#result-timeline > span { flex: 1; min-width: 0; }
#result-timeline > i { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
#result-timing:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 0; }
#result-timing div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#result-foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px 4px 0; }
#result-foot button { min-height: 42px; padding: 8px 24px; }
#result-foot #retry { margin-left: auto; }
#result-foot kbd { margin-left: 12px; }
#result-foot p { flex: 1 1 100%; margin: 0; overflow-wrap: anywhere; }
#result-foot p:empty { display: none; }
@media (max-height: 720px) {
    #result:not([hidden]) { padding-top: 16px; gap: 14px 32px; }
    #result-head { padding-bottom: 12px; }
    #result-total { gap: 12px; margin-bottom: 20px; }
    .result-points { padding: 0 0 12px; }
    #result-judgements { gap: 16px; }
}
@media (max-width: 760px) {
    #result:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, max-content); grid-template-areas: "head" "score" "detail" "foot"; align-content: start; gap: 24px; padding: 16px 12px; overflow: auto; }
    #result-score, #result-detail { overflow: visible; padding: 0; }
    #result-foot { position: sticky; bottom: -16px; }
    #result-foot button { padding-inline: 16px; }
}
#edit-sync-dialog { width: min(640px, 90vw); max-height: 85vh; overflow: auto; }
#edit-sync-dialog label { display: block; margin: 8px 0; }
#sync-regions { max-height: 160px; overflow: auto; }
@media (max-width: 1000px) {
    #edit-body { grid-template-columns: 110px minmax(240px, 1fr) 32px 180px; gap: 6px; }
    #editor.compact #edit-body { grid-template-columns: minmax(240px, 1fr) 32px 180px; }
}
#cursor { position: fixed; inset: auto; margin: 0; padding: 0; overflow: visible; }
#cursor svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 0 0; }

/* motion/motion.js: hover and flash layers sit under a button's label. The label wrapper lays its
   children out the way the button itself would, so each button's own layout rules still apply. */
/* osu!lazer ShearedButton: 15 px either side of the label. */
button { padding: 4px 15px; }
button.feel { position: relative; overflow: hidden; z-index: 0; }
.feel-hover, .feel-flash { position: absolute; inset: 0; z-index: -1; }
.feel-label { display: inherit; flex-direction: inherit; flex-wrap: inherit; align-items: inherit; align-content: inherit; justify-content: inherit; justify-items: inherit; gap: inherit; grid-template-columns: inherit; grid-template-rows: inherit; width: 100%; }
/* The leaving title copy covers the window while it slides out. */
#title.leaving-ghost { position: absolute; inset: 0; }

#song-list { position: relative; }
#list-position { flex: 1 1 100%; }
.list-track { grid-area: 2 / 2; position: relative; width: 4px; }
#list-range-window { position: absolute; left: 0; width: 100%; min-height: min(24px, 100%); max-height: 100%; }

#playing-status:not([hidden]) { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 24px; }
#playing-message { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; box-sizing: border-box; padding: 28px 36px; text-align: center; overflow-wrap: anywhere; }
#playing-status h2, #playing-status p { margin: 0; }
/* While the game window plays, only the background shows behind the status; open dialogs (HUD settings) stay. */
body:has(#playing-status:not([hidden])) #app > :not(#backdrop):not(#playing-status):not(dialog) { visibility: hidden; }

#web-play:not([hidden]) { position: fixed; inset: 0; z-index: 80; padding: 8px; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; }
#web-play > p { margin: 0; }
#web-controls { display: flex; gap: 8px; }
#web-play > iframe { width: 100%; height: 100%; min-height: 0; }
#web-youtube { position: absolute; right: 8px; bottom: 8px; width: 356px; height: 200px; }
#web-youtube iframe { width: 100%; height: 100%; }
#record-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
#record-tools textarea { width: 100%; min-width: 0; box-sizing: border-box; }
/* Toasts (notification.js): 320 px wide, 20 px from the bottom-right corner, newest at the bottom. */
#toasts:popover-open { position: fixed; inset: auto 20px 20px auto; width: 320px; margin: 0; padding: 0; overflow: visible; display: flex; flex-direction: column; pointer-events: none; }
.toast { width: 100%; padding: 3px 0; box-sizing: border-box; pointer-events: auto; }
.toast-main { position: relative; overflow: hidden; display: grid; grid-template-columns: 40px minmax(0, 1fr) 28px; min-height: 80px; }
.toast-icon { display: grid; place-items: center; }
.toast-icon svg { width: 16px; height: 16px; }
.toast-text { min-width: 0; margin: 0; padding: 10px; }
.toast-text > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.toast-close { display: grid; place-items: center; padding: 0; }
.toast-close svg { width: 12px; height: 16px; }
.toast-flash { position: absolute; inset: 0; pointer-events: none; }
/* Catch uses a continuous X field rather than piano lanes. */
#catch-editor { position:fixed; inset:0; z-index:30; background:var(--bg,#101722); color:var(--fg,#edf2f7); padding:18px 28px; overflow:auto; }
#catch-editor[hidden] { display:none; }
#catch-editor header, #catch-editor nav, #catch-editor footer { display:flex; align-items:center; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
#catch-editor h2 { font-size:22px; margin:0 18px; }
.catch-edit-body { display:grid; grid-template-columns:minmax(400px,1fr) 340px; gap:24px; height:calc(100vh - 230px); min-height:360px; }
.catch-edit-body > svg { width:100%; height:100%; background:#0b121b; touch-action:none; }
.catch-edit-body aside { overflow:auto; padding-right:12px; }
.catch-edit-body form { display:grid; gap:8px; margin-bottom:16px; }
#catch-editor label { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#catch-editor input[type=number] { width:130px; }
#catch-editor textarea { width:180px; }
#catch-editor [data-field=curve] { width:100%; height:150px; background:#101d28; touch-action:none; }
#catch-editor [data-field=timeline] { flex:1; min-width:150px; }
#catch-editor [data-field=message] { color:#6fe1b8; }