/* The phone uses the same two-column console, scaled as one unit. */
@media(max-width:740px){
 html[data-theme] .player-page{padding:20px 14px 32px;align-content:center}
 html[data-theme] .player-card{width:700px;max-width:none;min-width:700px;zoom:var(--console-scale,1)}
 html[data-theme] .start-panel{width:380px;max-width:none;zoom:var(--title-scale,1)}
 html[data-theme] .settings-panel{max-width:none}
}
@media(max-height:500px){html[data-theme] .player-page{align-content:start}}

html[data-theme] .upload-note{font-size:7.5px;line-height:1.4}

/* Small title screen and a framed pixel scrollbar in the playlist. */
html[data-theme] .start-panel{width:320px;padding:22px 18px}
html[data-theme] .start-panel h1{font-size:28px}
html[data-theme] .start-ghost{width:96px;height:auto}
html[data-theme] .playlist{scrollbar-color:var(--g-metal) var(--g-inset);scrollbar-width:thin;scrollbar-gutter:stable}
.playlist::-webkit-scrollbar{width:10px}
.playlist::-webkit-scrollbar-track{background:var(--g-inset);border-left:2px solid var(--g-line)}
.playlist::-webkit-scrollbar-thumb{background:var(--g-metal);border:2px solid var(--g-line);border-radius:0;box-shadow:inset 1px 1px 0 var(--g-paper),inset -1px -1px 0 var(--g-shadow)}
.playlist::-webkit-scrollbar-thumb:hover{background:var(--g-text)}

/* Compact playlist with a chunky, stepped scrollbar. */
html[data-theme] .playlist{max-height:108px;scrollbar-width:auto;scrollbar-color:var(--g-metal) var(--g-panel)}
html[data-theme] .playlist::-webkit-scrollbar{width:18px}
html[data-theme] .playlist::-webkit-scrollbar-track{background:repeating-linear-gradient(0deg,var(--g-panel) 0 6px,var(--g-inset) 6px 8px);border-left:3px solid var(--g-line)}
html[data-theme] .playlist::-webkit-scrollbar-thumb{min-height:32px;border:3px solid var(--g-line);border-radius:0;background:repeating-linear-gradient(0deg,var(--g-metal) 0 5px,var(--g-line) 5px 7px,var(--g-metal) 7px 11px);box-shadow:inset 2px 2px 0 var(--g-paper),inset -2px -2px 0 var(--g-shadow)}
html[data-theme] .playlist::-webkit-scrollbar-thumb:hover{background:repeating-linear-gradient(0deg,var(--g-text) 0 5px,var(--g-metal) 5px 7px,var(--g-text) 7px 11px)}
html[data-theme] .playlist::-webkit-scrollbar-button:single-button{display:block;height:16px;background:var(--g-metal);border:3px solid var(--g-line);box-shadow:inset 2px 2px 0 var(--g-paper)}

/* Windows 3.0 scrollbar: plain grey surfaces, black dividers and pixel arrows. */
html[data-theme] .playlist{scrollbar-color:#aaa #c0c0c0;scrollbar-width:auto}
html[data-theme] .playlist::-webkit-scrollbar{width:16px;background:#c0c0c0}
html[data-theme] .playlist::-webkit-scrollbar-track{background:#c0c0c0;border:1px solid #161616;box-shadow:none}
html[data-theme] .playlist::-webkit-scrollbar-thumb,html[data-theme] .playlist::-webkit-scrollbar-thumb:hover{background:#aaa;border:1px solid #161616;border-radius:0;min-height:28px;box-shadow:none}
html[data-theme] .playlist::-webkit-scrollbar-thumb:active{background:#969696}
html[data-theme] .playlist::-webkit-scrollbar-button:single-button{display:block;height:16px;background-color:#c0c0c0;border:1px solid #161616;box-shadow:none;background-position:center;background-repeat:no-repeat;background-size:9px 7px}
html[data-theme] .playlist::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23161616' d='M4 0h1v1H4ZM3 1h3v1H3ZM2 2h5v1H2ZM1 3h7v1H1ZM0 4h9v1H0ZM3 5h3v2H3Z'/%3E%3C/svg%3E")}
html[data-theme] .playlist::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23161616' d='M3 0h3v2H3ZM0 2h9v1H0ZM1 3h7v1H1ZM2 4h5v1H2ZM3 5h3v1H3ZM4 6h1v1H4Z'/%3E%3C/svg%3E")}
html[data-theme] .playlist::-webkit-scrollbar-button:single-button:active{background-color:#aaa}

/* Match the 3.0 geometry to the console's active palette. */
html[data-theme] .playlist{scrollbar-color:var(--g-metal) var(--g-panel)}
html[data-theme] .playlist::-webkit-scrollbar{background:var(--g-panel)}
html[data-theme] .playlist::-webkit-scrollbar-track{background:var(--g-panel);border-color:var(--g-line)}
html[data-theme] .playlist::-webkit-scrollbar-thumb,html[data-theme] .playlist::-webkit-scrollbar-thumb:hover{background:var(--g-metal);border-color:var(--g-line)}
html[data-theme] .playlist::-webkit-scrollbar-thumb:active{background:var(--g-muted)}
html[data-theme] .playlist::-webkit-scrollbar-button:single-button{background-color:var(--g-paper);border-color:var(--g-line)}
html[data-theme] .playlist::-webkit-scrollbar-button:single-button:active{background-color:var(--g-metal)}
html[data-theme=dark] .playlist::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23eeece7' d='M4 0h1v1H4ZM3 1h3v1H3ZM2 2h5v1H2ZM1 3h7v1H1ZM0 4h9v1H0ZM3 5h3v2H3Z'/%3E%3C/svg%3E")}
html[data-theme=dark] .playlist::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23eeece7' d='M3 0h3v2H3ZM0 2h9v1H0ZM1 3h7v1H1ZM2 4h5v1H2ZM3 5h3v1H3ZM4 6h1v1H4Z'/%3E%3C/svg%3E")}

/* Chromium ignores legacy scrollbar parts when standard colors are non-auto. */
@supports selector(::-webkit-scrollbar){
 html[data-theme] .playlist{scrollbar-color:auto;scrollbar-width:auto}
}

.playlist-window{display:grid;grid-template-columns:minmax(0,1fr) 16px}
html[data-theme] .playlist{scrollbar-width:none;scrollbar-gutter:auto}
html[data-theme] .playlist::-webkit-scrollbar{display:none;width:0}
.playlist-scrollbar{display:grid;grid-template-rows:16px minmax(0,1fr) 16px;border-left:1px solid var(--g-line);background:var(--g-panel)}
.playlist-scrollbar button{display:grid;place-items:center;width:15px;height:16px;padding:2px;border:1px solid var(--g-line);border-radius:0;background:var(--g-paper);color:var(--g-text);cursor:pointer;box-shadow:none}
.playlist-scrollbar svg{width:9px;height:7px;fill:currentColor;shape-rendering:crispEdges}
.scroll-track{position:relative;min-height:28px;background:var(--g-panel);touch-action:none}
.scroll-thumb{position:absolute;top:0;left:0;width:100%;min-height:20px;border:1px solid var(--g-line);background:var(--g-metal);touch-action:none;cursor:grab}
.scroll-thumb:active{cursor:grabbing;background:var(--g-muted)}

/* Stepped panel shadows, with an inset lip and a solid lower edge. */
html[data-theme] .curse-control,html[data-theme] .playlist-panel{
 box-shadow:2px 2px 0 var(--g-metal),4px 4px 0 var(--g-shadow),6px 6px 0 color-mix(in srgb,var(--g-shadow) 36%,transparent),inset 1px 1px 0 var(--g-inset),inset -1px -1px 0 var(--g-metal);
}
html[data-theme] .curse-control{margin-bottom:16px}
html[data-theme] .playlist-panel{margin-bottom:12px}
html[data-theme=dark] .curse-control,html[data-theme=dark] .playlist-panel{
 box-shadow:2px 2px 0 #444149,4px 4px 0 #08080a,6px 6px 0 rgba(0,0,0,.38),inset 1px 1px 0 #45424b,inset -1px -1px 0 #131216;
}

/* Buttons share the panel's stepped depth, with a slightly longer shadow. */
:root{--button-depth:3px 3px 0 var(--g-metal),6px 6px 0 var(--g-shadow),8px 8px 0 color-mix(in srgb,var(--g-shadow) 36%,transparent);--button-face-light:var(--key-top);--button-face-dark:var(--key-edge)}
html[data-theme=dark]{--button-depth:3px 3px 0 #444149,6px 6px 0 #08080a,8px 8px 0 rgba(0,0,0,.38)}
html[data-theme] .start-button,
html[data-theme] .player-card .console-key,
html[data-theme] .player-card .transport button,
html[data-theme] .player-card .console-key:hover,
html[data-theme] .player-card .console-key[aria-pressed=true],
html[data-theme] .player-card .transport .play,
html[data-theme] .player-card .transport .play:hover,
html[data-theme] .player-card .theme-toggle[aria-pressed=true]{
 box-shadow:var(--button-depth),inset 2px 2px 0 var(--button-face-light),inset -2px -2px 0 var(--button-face-dark);
}
html[data-theme] .player-card .console-key[aria-pressed=true],html[data-theme] .player-card .transport .play{--button-face-light:rgba(255,255,255,.3);--button-face-dark:rgba(0,0,0,.28)}
html[data-theme] .player-card .theme-toggle[aria-pressed=true]{--button-face-light:var(--key-top);--button-face-dark:var(--key-edge)}
html[data-theme] .start-button:active,
html[data-theme] .player-card .console-key:active,
html[data-theme] .player-card .console-key[aria-pressed=true]:active,
html[data-theme] .player-card .transport .play:active{
 transform:translate(3px,3px);
 box-shadow:1px 1px 0 var(--g-metal),3px 3px 0 var(--g-shadow),5px 5px 0 color-mix(in srgb,var(--g-shadow) 36%,transparent),inset 1px 1px 0 var(--button-face-dark);
}

/* Faceted rotary control with a pixel rim and a raised centre. */
html[data-theme] .curse-knob{width:40px;height:40px;filter:drop-shadow(2px 2px 0 var(--g-metal)) drop-shadow(2px 2px 0 var(--g-shadow))}
html[data-theme] .curse-knob-shadow{background:var(--g-shadow);transform:translate(2px,2px)}
html[data-theme] .curse-knob-face{background:var(--g-line)}
html[data-theme] .curse-knob-face::before{inset:2px;background:repeating-conic-gradient(from 0deg,var(--g-metal) 0deg 18deg,var(--g-panel) 18deg 36deg);box-shadow:inset 2px 2px 0 var(--g-inset),inset -2px -2px 0 var(--g-shadow)}
html[data-theme] .curse-knob-face::after{content:'';position:absolute;inset:7px;background:linear-gradient(135deg,var(--g-inset),var(--g-panel) 52%,var(--g-metal));border:2px solid var(--g-line);clip-path:polygon(25% 0,75% 0,75% 10%,90% 10%,90% 25%,100% 25%,100% 75%,90% 75%,90% 90%,75% 90%,75% 100%,25% 100%,25% 90%,10% 90%,10% 75%,0 75%,0 25%,10% 25%,10% 10%,25% 10%)}
html[data-theme] .curse-needle{z-index:3;top:5px;left:50%;width:4px;height:10px;background:var(--g-accent);box-shadow:1px 1px 0 var(--g-shadow);transform-origin:50% 15px;clip-path:polygon(25% 0,75% 0,75% 10%,100% 10%,100% 90%,75% 90%,75% 100%,25% 100%,25% 90%,0 90%,0 10%,25% 10%)}
html[data-theme] .curse-dial:focus-within{outline:2px dashed var(--g-line);outline-offset:4px}

/* Simplified knob: a quiet face, one bevel and a clear position marker. */
html[data-theme] .curse-knob{width:36px;height:36px;filter:drop-shadow(2px 2px 0 var(--g-shadow))}
html[data-theme] .curse-knob-shadow{transform:translate(1px,1px)}
html[data-theme] .curse-knob-face::before{inset:2px;background:var(--g-panel);box-shadow:inset 2px 2px 0 var(--g-inset),inset -2px -2px 0 var(--g-metal)}
html[data-theme] .curse-knob-face::after{content:none}
html[data-theme] .curse-needle{top:4px;width:3px;height:10px;transform-origin:50% 14px;box-shadow:none;clip-path:none}

/* Equal sprite brightness in both themes, preserving the health-based increase. */
html[data-theme] .ghost-layer .ada-image{filter:brightness(calc(var(--ghost-brightness,.55)*1.8))}

html[data-theme] .effect-switch{border:0;padding:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;text-align:left;box-shadow:none}
html[data-theme] .effect-switch:hover{text-shadow:1px 1px 0 var(--g-metal)}
.effect-switch:focus-visible{outline:2px dashed var(--g-line);outline-offset:3px}

/* Fixed control slots keep CURSE and REVERB keys in the same position. */
html[data-theme] .curse-dial-field{display:grid;grid-template-columns:minmax(0,1fr) 32px 56px 32px minmax(0,1fr);gap:8px;align-items:center}
html[data-theme] .curse-dial-field>.curse-scale:first-child{text-align:left}
html[data-theme] .curse-dial-field>.curse-scale:last-child{text-align:right}
html[data-theme] .curse-dial{width:56px;justify-self:center}
html[data-theme] .curse-control{transition:transform 80ms steps(2,end),box-shadow 80ms steps(2,end)}
html[data-theme] .curse-control.is-panel-pressed{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--g-metal),2px 2px 0 var(--g-shadow),3px 3px 0 color-mix(in srgb,var(--g-shadow) 36%,transparent),inset 1px 1px 0 var(--g-metal)}
/* The panel presses around its controls; its keys retain their screen position. */
html[data-theme] .curse-control.is-panel-pressed .curse-dial-field{transform:translate(-2px,-2px)}
html[data-theme] .player-card .curse-step:active{transform:none;box-shadow:1px 1px 0 var(--g-metal),3px 3px 0 var(--g-shadow),inset 1px 1px 0 var(--key-edge)}

/* Press depth is drawn in the panel surface; no control coordinates change. */
html[data-theme] .curse-control.is-panel-pressed{transform:none;box-shadow:1px 1px 0 var(--g-metal),2px 2px 0 var(--g-shadow),inset 2px 2px 0 var(--g-metal),inset -1px -1px 0 var(--g-inset)}
html[data-theme] .curse-control.is-panel-pressed .curse-dial-field{transform:none}

/* One shared press moves the panel and all its controls together. */
html[data-theme] .curse-control.is-panel-pressed{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--g-metal),2px 2px 0 var(--g-shadow),3px 3px 0 color-mix(in srgb,var(--g-shadow) 36%,transparent),inset 1px 1px 0 var(--g-metal)}
html[data-theme] .curse-control .curse-dial-field,
html[data-theme] .curse-control.is-panel-pressed .curse-dial-field{transform:none}
html[data-theme] .curse-control.is-panel-pressed .curse-step,
html[data-theme] .curse-control.is-panel-pressed .curse-dial{transform:none}

/* Keep the desktop composition while improving touch scrolling and safe-area spacing. */
@media(max-width:740px){
 html[data-theme] .player-page{padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(32px,env(safe-area-inset-bottom))}
 .playlist{overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
 .playlist-window{grid-template-columns:minmax(0,1fr) 24px}
 .playlist-scrollbar{grid-template-rows:24px minmax(0,1fr) 24px}
 .playlist-scrollbar button{width:23px;height:24px}
 .effect-switch{touch-action:manipulation}
}