/* Shared interaction and responsive rules for both listening layouts. */
:root { --ease-out: cubic-bezier(.2,.7,.2,1); }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
button[aria-busy=true] { opacity:.65; cursor:progress; }
.topbar { background:linear-gradient(#101523bb, #10152310); }
.top-actions { min-width:0; }
nav button, .library-tabs button { transition: color 180ms, border-color 180ms; }
.library-tabs button { min-height:32px; border-bottom:2px solid transparent; }
.library-tabs button.active { border-bottom-color:var(--pink); }
#search-form:focus-within { border-color:#f49bc699; background:#c7c8e310; }
#search-form button { min-width:26px; min-height:28px; }
#clear-search { font-size:12px; }
.song-card:before { background:linear-gradient(90deg,#0a0e21d6,#10142555 85%),linear-gradient(0deg,#0c1023a0,transparent 75%); }
.song-art.art-ready { opacity:1; }
.row-actions button { min-width:30px; min-height:30px; display:grid; place-content:center; border-radius:50%; }
.row-actions button:hover { background:#151b2ba6; }
.song-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.song-artist { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.now, .now-copy, .transport { min-width:0; }
#now-title:disabled { opacity:1; color:inherit; cursor:default; }
#now-title { max-width:100%; }
.seek input:disabled { cursor:default; opacity:.5; }
.volume input { min-width:0; }
.volume button { min-width:28px; min-height:32px; }
#import-db { cursor:pointer; }
body[data-page=myosu] #import-db { position:absolute; right:0; top:68px; }
.empty-library { padding:22px; border:1px dashed #ffffff25; border-radius:12px; text-align:center; color:var(--muted); }
.empty-library>span { font-size:28px; color:var(--pink); }
.empty-library h2 { font-size:18px; color:var(--text); font-weight:500; margin:8px 0; }
.empty-library p { margin:5px 0; font-size:12px; line-height:1.7; }
.song-grid:empty { display:none!important; }
#notice[data-status=error] { color:#f6c3d8; }
#notice .quiet { padding:6px 12px; margin-left:7px; }
#toast { animation:toast-in 180ms var(--ease-out); }
@keyframes toast-in { from { opacity:0; translate:0 5px; } to { opacity:1; translate:0 0; } }
body[data-theme][data-page] #art-dialog {
 inset:0; margin:auto; width:min(720px,calc(100vw - 36px)); max-height:min(650px,calc(100dvh - 48px));
 padding:24px; border-radius:16px; background:#141a29f5;
}
body[data-theme][data-page] #art-dialog[open] { display:flex; flex-direction:column; }
#art-dialog .dialog-heading { gap:20px; flex-shrink:0; }
#art-dialog .dialog-heading h2 { font-size:22px; line-height:1.3; }
#close-art, #close-appearance { min-width:36px; min-height:36px; border-radius:50%; }
#close-art:hover, #close-appearance:hover { background:#ffffff12; }
#picker-status { flex-shrink:0; font-size:11px; margin:10px 0 16px; }
#art-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:auto; gap:12px; min-height:0; padding:2px 4px 6px; }
#art-grid button { padding:7px; min-width:0; transition:background 160ms,border-color 160ms; }
#art-grid button:hover { background:#ffffff0d; border-color:#ffffff45; }
#art-grid button.selected { border-color:var(--pink); }
#art-grid strong { font-size:12px; }
#art-grid span { font-size:10px; }
#art-grid img { display:block; background:#303148; }
#map-filter { flex-shrink:0; padding:10px 12px; margin:0 0 14px; background:#ffffff08; border:1px solid var(--line); border-radius:7px; width:100%; font-size:14px; }
#art-grid .map-badge { display:block; margin-top:8px; color:var(--pink); font-size:9px; }
#art-grid span { white-space:normal; line-height:1.5; }
dialog::backdrop { background:#070b1670; backdrop-filter:blur(4px); }
.account-dialog { max-width:min(440px,calc(100vw - 40px)); padding:28px; border:1px solid var(--line); border-radius:16px; background:#171c2b; color:var(--text); }
.account-dialog p { color:var(--muted); line-height:1.8; }
.account-dialog h2 { font-size:22px; }
.motion-preference { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.motion-preference select { font:inherit; color:var(--text); background:#22283b; border:1px solid var(--line); padding:8px 10px; border-radius:7px; }
.motion-preference p { grid-column:1/-1; margin:0; font-size:11px!important; }
.mixtape { min-width:0; }
.mixtape h2 { overflow-wrap:anywhere; }
.mixtape .eyebrow { line-height:1.7; }
.mixtape-includes { color:var(--muted); font-size:11px; line-height:1.7; }
.mixtape-includes summary { cursor:pointer; padding:5px 0; }
.mixtape-includes ol { padding-left:20px; max-height:160px; overflow:auto; }
.mixtape-includes li { margin:5px 0; overflow-wrap:anywhere; }
.station-upcoming strong { overflow-wrap:anywhere; }
body[data-listening=false] #toast { bottom:125px; }
@media(min-width:761px) {
 body[data-theme=panorama][data-listening=true]:not([data-page=player]) main { height:294px; }
 body[data-theme=panorama][data-listening=true]:not([data-page=player]) .player { bottom:312px; }
 body[data-theme=panorama][data-listening=true] .section-heading { display:flex; margin:0 10px 10px; }
 body[data-theme=panorama][data-listening=true] .section-heading h2 { font-size:12px; }
 body[data-theme=panorama][data-listening=true] .library-tabs { top:5px; }
 body[data-theme=panorama][data-listening=true] #notice { position:static; margin:8px 10px; font-size:12px; }
 body[data-theme=panorama][data-listening=true] #notice[data-status=ready] { display:none; }
 body[data-theme=panorama][data-listening=true] .empty-library { margin:0 8px; padding:12px; }
 body[data-theme=panorama][data-listening=true] .empty-library>span { display:none; }
 body[data-theme=panorama][data-listening=true] #more { bottom:5px; }
 body[data-page=myosu] #import-status { padding-right:175px; }
 body[data-page=myosu] header { z-index:2; }
}
@media(max-width:1000px) and (min-width:761px) {
 nav { left:38%; gap:18px; }
 .top-actions { gap:9px; }
 body[data-listening=false] .player { grid-template-columns:minmax(0,1fr) minmax(300px,1.4fr); }
 body[data-listening=false] .volume { display:none; }
 body[data-listening=false] .transport { grid-template-columns:150px 1fr; }
 body[data-page=myosu] .collection-heading { max-width:58%; }
 body[data-page=myosu] header { width:36%; }
}
@media(max-width:760px) {
 .login-button { font-size:10px; line-height:1.3; }
 .row-actions button { min-width:36px; min-height:36px; }
 .topbar { background:linear-gradient(#111626e8,#1116266b); }
 nav { top:65px; }
 nav button { min-height:36px; }
 .library-tabs button { min-height:32px; }
 body[data-page=myosu] #import-db { position:static; margin-top:12px; }
 body[data-page=myosu] #import-panel { margin-bottom:18px; padding-bottom:18px; }
 #import-panel h1 { margin:4px 0; }
 .collection-heading p { margin:5px 0!important; }
 #import-status { margin-top:12px!important; }
 body[data-theme=panorama][data-listening=true]:not([data-page=player]) main { height:275px; padding-top:9px; }
 body[data-theme=panorama][data-listening=true] .player { bottom:293px; }
 body[data-theme=panorama][data-listening=true] header { width:100%; margin:0 0 6px; }
 body[data-theme=panorama][data-listening=true] .library-tabs { position:static; margin:0 0 6px; gap:18px; }
 body[data-theme=panorama][data-listening=true] .library-tabs #focus-mode { margin-left:auto; }
 body[data-theme=panorama][data-listening=true] .library-tabs button { font-size:11px; }
 body[data-theme=panorama][data-listening=true] #notice { margin:8px 0; line-height:1.7; }
 body[data-theme=panorama][data-listening=true] .empty-library { padding:8px 12px; }
 body[data-theme=panorama][data-listening=true] .empty-library>span { display:none; }
 body[data-theme=panorama][data-listening=true] #more { bottom:7px; }
 body[data-theme][data-page] #art-dialog { width:calc(100vw - 24px); padding:17px; }
 #art-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 #art-grid span { font-size:10px; }
 #appearance-dialog { max-height:calc(100dvh - 32px); overflow:auto; }
 #mixtape-form input { font-size:16px; }
 body[data-listening=false] .player { grid-template-columns:minmax(0,1fr) 135px; gap:10px; padding-inline:16px; }
 body[data-listening=false] .transport-buttons button { min-width:32px; min-height:32px; }
 body[data-listening=false] #toast { bottom:110px; }
 .station-note { line-height:1.7; }
}
@media(max-width:760px) and (max-height:740px) {
 body[data-theme=panorama][data-listening=true] #now-title { font-size:23px; }
 body[data-theme=panorama][data-listening=true] #now-art-button { margin:6px 0 8px; }
 body[data-theme=panorama][data-listening=true] .transport-buttons { margin-top:5px; gap:19px; }
 body[data-theme=panorama][data-listening=true] .transport-buttons .play-main { width:39px; height:39px; }
 body[data-theme=panorama][data-listening=true] .now-copy>span { font-size:11px; }
}
@media(max-height:580px) and (min-width:761px) {
 body[data-theme=panorama][data-listening=true]:not([data-page=player]) .player { bottom:280px; }
 body[data-theme=panorama][data-listening=true]:not([data-page=player]) main { height:263px; }
 body[data-theme=panorama][data-listening=true] .now { margin-bottom:8px; }
 body[data-theme=panorama][data-listening=true] #now-title { font-size:24px; }
 body[data-theme=panorama][data-listening=true] .song-card,body[data-theme=panorama][data-listening=true] .row-select { height:124px; min-height:124px; }
 body[data-theme=panorama][data-listening=true] .song-grid { height:146px; }
}
/* Keep navigation and transport reachable in landscape and short windows. */
@media(max-height:600px) {
 body[data-theme][data-listening=true][data-page] .player { inset:auto 0 0; transform:none; width:100%; height:96px; padding:12px 24px; display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,1fr); gap:24px; background:#111827ed; border-top:1px solid var(--line); visibility:visible; z-index:8; }
 body[data-theme][data-listening=true] .now { display:block; margin:0; }
 body[data-theme][data-listening=true] #now-title { font-size:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 body[data-theme][data-listening=true] .now-copy>span { font-size:10px; }
 body[data-theme][data-listening=true] #now-art-button { margin:5px 0 0; font-size:10px; min-height:20px; }
 body[data-theme][data-listening=true] #now-art-button img { width:26px; height:20px; }
 body[data-theme][data-listening=true] .transport { display:flex; flex-direction:column; gap:4px; padding:0; }
 body[data-theme][data-listening=true] .transport-buttons { gap:16px; margin:0; order:0; }
 body[data-theme][data-listening=true] .transport-buttons button { font-size:16px; padding:3px; }
 body[data-theme][data-listening=true] .transport-buttons .play-main { width:34px; height:34px; font-size:16px; }
 body[data-theme][data-listening=true] .seek { display:grid; width:100%; grid-template-columns:32px 1fr 32px; align-items:center; font-size:9px; gap:5px; }
 body[data-theme][data-listening=true] .seek input { grid-column:2; grid-row:1; }
 body[data-theme][data-listening=true] .seek #elapsed { grid-column:1; grid-row:1; }
 body[data-theme][data-listening=true] .seek #duration { grid-column:3; grid-row:1; }
 body[data-theme][data-listening=true] .volume { display:none; }
 body[data-theme][data-listening=true]:not([data-page=player]) main { inset:88px 18px 107px; height:auto; width:auto; padding:12px; overflow:auto; background:#111827bb; border-radius:12px; }
 body[data-theme][data-listening=true] header { width:50%; }
 body[data-theme][data-listening=true] .library-tabs { position:absolute; right:12px; top:12px; }
 body[data-theme][data-listening=true] .song-grid { height:auto; min-height:140px; }
 body[data-theme][data-listening=true] .song-card,body[data-theme][data-listening=true] .row-select { min-height:120px; height:120px; }
 body[data-theme][data-listening=true] #more { position:static; width:max-content; margin:5px auto; }
 body[data-theme][data-page=player] #browse-toggle { top:100px; bottom:auto; }
 body[data-theme=focus][data-listening=true] main { display:block; }
}
@media(max-height:600px) and (max-width:760px) {
 body[data-theme][data-listening=true]:not([data-page=player]) main { top:112px; }
 body[data-theme][data-listening=true] header { width:100%; }
 body[data-theme][data-listening=true] .library-tabs { position:static; }
 body[data-theme][data-listening=true][data-page] .player { grid-template-columns:minmax(0,1fr) 145px; padding-inline:16px; gap:10px; }
 body[data-theme][data-listening=true] #shuffle,body[data-theme][data-listening=true] #repeat { display:none; }
 body[data-theme][data-listening=true] #now-title { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
body[data-motion=reduced] *,body[data-motion=reduced] *::before,body[data-motion=reduced] *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
@media(prefers-reduced-motion:reduce) {
 body[data-motion=subtle] #scene-next { transition:opacity 420ms ease!important; }
 body[data-motion=subtle] button,body[data-motion=subtle] input,body[data-motion=subtle] a { transition:color 160ms,background-color 160ms,border-color 160ms!important; }
 body[data-motion=subtle] .song-art { transition:opacity 300ms ease!important; }
 body[data-motion=subtle] .song-card { transition:translate 180ms ease,border-color 180ms ease!important; }
 body[data-motion=subtle].on-air .broadcast-meter i { animation:broadcast 1100ms ease-in-out infinite alternate!important; }
}