/* The console follows the listening flow; compact screens reflow rather than shrink. */
html[data-theme] .player-page{padding:32px 24px 72px;align-content:center}
html[data-theme] .player-card{width:min(920px,100%);min-width:0;max-width:100%;zoom:1;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"header header" "player tracks" "effects ghost" "links links" "footer footer";align-items:start;gap:24px 28px;padding:26px}
html[data-theme] .card-caption{grid-area:header;align-items:center;padding:0 0 18px}
html[data-theme] .card-caption h1{font-size:32px}
html[data-theme] .system-label{font-size:12px;line-height:1.5}
.deck{grid-area:player}
html[data-theme] .now-display{min-height:108px;padding:14px 16px}
html[data-theme] .now{margin:12px 0 0;font-size:26px;line-height:1.4}
html[data-theme] .display-line{font-size:14px}
html[data-theme] .player-card .transport{margin:18px 0 20px;gap:18px}
html[data-theme] .player-card .transport button{width:48px;height:44px;min-width:44px;min-height:44px}
html[data-theme] .player-card .transport .play{width:64px;height:50px}
html[data-theme] .times{font-size:14px;line-height:1.5}
.deck .volume-panel{grid-template-columns:44px auto minmax(0,1fr) 44px;gap:10px;margin-top:12px}
.deck .volume-panel label{font-size:14px}
.deck .volume-panel output{font:14px/1.5 var(--ui-font);color:var(--g-muted)}
html[data-theme] .deck .mute-button{width:44px;height:44px}
.visualizer{margin:12px 0 0;height:18px}
html[data-theme] .player-status{font:14px/1.5 var(--ui-font);text-align:left;color:var(--g-text)}
html[data-theme] .playlist-panel{grid-area:tracks;margin:0;min-width:0}
html[data-theme] .panel-heading{padding:14px 12px;font-size:16px;line-height:1.5}
.playlist-window{display:block}
html[data-theme] .playlist{max-height:none;overflow:visible;margin:0;scrollbar-gutter:auto}
html[data-theme] .track{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;min-height:61px;padding:10px 12px;font-size:18px;line-height:1.45;white-space:normal}
html[data-theme] .track.selected{box-shadow:inset 4px 0 0 var(--g-accent);background:var(--g-panel)}
html[data-theme] .track-slot{min-height:28px;font-size:14px}
.track-state{display:block;font:14px/1.5 var(--ui-font);letter-spacing:0;color:var(--g-muted)}
html[data-theme] .track-duration{font:14px/1.5 var(--ui-font)}
.effects-rack{grid-area:effects;min-width:0}
.effect-tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
html[data-theme] .player-card .effect-tab{min-height:44px;font-size:16px}
html[data-theme] .player-card .effect-tab[aria-selected=true]{background:var(--g-accent);color:var(--g-accent-text);border-color:var(--g-accent);box-shadow:var(--button-depth),inset 0 0 0 1px var(--g-accent-text)}
html[data-theme] .effects-rack .curse-control{position:relative;margin:0;padding:12px}
.effect-suit{position:absolute;top:12px;left:50%;display:block;width:24px;height:24px;margin:0;transform:translateX(-50%);fill:currentColor;shape-rendering:crispEdges}
html[data-theme] .curse-heading{font-size:16px;line-height:1.5}
html[data-theme] .curse-control .curse-heading output{font:14px/1.5 var(--ui-font)}
html[data-theme] .curse-dial-field{grid-template-columns:minmax(0,1fr) 44px 56px 44px minmax(0,1fr);gap:8px;min-height:58px;padding:6px 0}
html[data-theme] .player-card .curse-step{width:44px;height:44px;min-width:44px;min-height:44px}
html[data-theme] .curse-scale{font-size:14px}
html[data-theme] .curse-mode{font-size:14px;margin-top:8px;line-height:1.5}
.effect-status{margin:12px 0 0;color:var(--g-muted);font:14px/1.5 var(--ui-font)}
.effect-status:empty{display:none}
html[data-theme] .art{grid-area:ghost;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;align-self:stretch;max-width:none;min-height:0;height:var(--effects-rack-height,213px);margin:0;padding:58px 12px 6px;border:1px dashed var(--g-metal);background:var(--g-inset)}
.ghost-anchor{width:120px;flex:none}
html[data-theme] .ghost-help{margin:0;color:var(--g-muted);font:14px/1.5 var(--ui-font);text-align:center}
.extra-links{grid-area:links;border-top:1px solid var(--g-metal);padding-top:14px;display:flex;align-items:center;gap:24px;min-width:0}
html[data-theme] .player-card .donation-link{flex:none;width:auto;max-width:100%;min-height:44px;margin:0;padding:8px 14px;font-size:14px;line-height:1.5}
html[data-theme] .upload-note{margin:0;font:14px/1.5 var(--ui-font);white-space:normal;text-align:left;max-width:360px}
html[data-theme] .console-footer{grid-area:footer;padding:12px 0 0;justify-content:flex-start}
html[data-theme] .footer-hint{font-size:14px;line-height:1.6;color:var(--g-muted)}
.card-caption .settings-menu{z-index:30;margin-left:auto;align-self:center}
html[data-theme] .player-card .settings-toggle{display:flex;gap:8px;width:auto;height:auto;min-height:44px;padding:8px 12px;font-size:14px;line-height:1.5}
.settings-toggle .settings-icon{width:20px;height:20px}
html[data-theme] .settings-panel{top:calc(100% + 16px);bottom:auto;width:340px;max-width:calc(100vw - 48px);max-height:calc(100svh - 150px);overflow-y:auto;overscroll-behavior:contain;text-align:left}
.settings-panel .utility-bar{display:grid;grid-template-columns:44px 1fr 1fr;gap:12px;margin:14px 0}
html[data-theme] .settings-panel .utility-button{min-width:0;min-height:44px;font-size:14px}
.setting-help{font:14px/1.5 var(--ui-font);color:var(--g-muted);margin:8px 0 18px}
html[data-theme] .settings-panel .font-setting{font-size:14px;line-height:1.5}
html[data-theme] .settings-panel .sfx-volume{gap:8px}
.settings-panel .sfx-volume output{font:14px/1.5 var(--ui-font)}
html[data-theme] .start-panel{zoom:1;width:min(320px,100%);max-width:100%}
html[data-theme] .start-screen{padding:24px}
@media(max-width:740px){
 html[data-theme] .player-page{padding:20px 14px 64px;align-content:start}
 html[data-theme] .player-card{width:100%;min-width:0;zoom:1;grid-template-columns:minmax(0,1fr);grid-template-areas:"header" "player" "tracks" "effects" "ghost" "links" "footer";gap:24px;padding:20px 16px}
 html[data-theme] .card-caption{align-items:flex-start;gap:12px}
 html[data-theme] .card-caption h1{font-size:26px;line-height:1.4}
 html[data-theme] .system-label{font-size:12px;letter-spacing:0}
 html[data-theme] .player-card .settings-toggle{width:44px;padding:8px;justify-content:center}
 .settings-toggle>span{display:none}
 html[data-theme] .settings-panel{width:min(340px,calc(100vw - 60px));max-width:calc(100vw - 60px)}
 html[data-theme] .now{font-size:26px}
 html[data-theme] .track{min-height:62px}
 .extra-links{flex-direction:column;align-items:stretch;gap:12px}
 html[data-theme] .player-card .donation-link{width:100%}
 html[data-theme] .upload-note{max-width:none;text-align:center}
 html[data-theme] .footer-hint{font-size:14px}
}
@media(max-width:360px){
 html[data-theme] .player-card{padding:18px 12px}
 html[data-theme] .card-caption h1{font-size:24px}
 html[data-theme] .curse-dial-field{grid-template-columns:44px 56px 44px;justify-content:center;gap:8px 16px}
 html[data-theme] .curse-dial-field>.curse-scale:first-child{grid-column:1;grid-row:1}
 html[data-theme] .curse-dial-field>.curse-scale:last-child{grid-column:3;grid-row:1}
 html[data-theme] .curse-dial-field>.curse-step{grid-row:2}
 html[data-theme] .curse-dial-field>.curse-step:nth-child(2){grid-column:1}
 html[data-theme] .curse-dial-field>.curse-step:nth-child(4){grid-column:3}
 html[data-theme] .curse-dial-field>.curse-dial{grid-column:2;grid-row:2}
 html[data-theme] .curse-scale{font-size:12px}
 html[data-theme] .track{gap:8px;padding-inline:10px}
}