/* A shared phone grid keeps labels, touch targets and panel edges aligned. */
@media(max-width:740px){
 html[data-theme] .player-page{padding: max(20px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
 html[data-theme] .player-card{width:min(540px,100%);gap:24px;padding:20px 16px;margin-inline:auto}
 html[data-theme] .card-caption{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:12px;align-items:center;padding-bottom:16px}
 .card-caption>div{min-width:0}
 html[data-theme] .card-caption h1{font-size:clamp(22px,6.5vw,26px);line-height:1.4;overflow-wrap:normal}
 html[data-theme] .system-label{font-size:12px;line-height:1.5}
 .card-caption .settings-menu{align-self:center;margin:0}
 html[data-theme] .player-card .settings-toggle{width:44px;height:44px;min-height:44px;padding:8px}
 html[data-theme] .settings-panel{width:min(340px,calc(100vw - 64px));max-width:calc(100vw - 64px);max-height:calc(100dvh - 120px);overscroll-behavior:contain}
 html[data-theme] .settings-panel :is(select,.mode-button){min-height:44px}
 html[data-theme] .panel-heading{flex-wrap:nowrap;align-items:center;gap:8px;min-height:56px;padding:12px 10px;font-size:14px;line-height:1.5}
 .panel-heading>span{white-space:nowrap}
 .panel-heading>span:last-child{text-align:right}
 html[data-theme] .playlist-window{height:264px}
 html[data-theme] .track{grid-template-columns:24px minmax(0,1fr) 36px;gap:8px;min-height:66px;padding:10px;font-size:18px}
 .track-name{min-width:0;overflow-wrap:break-word}
 html[data-theme] .track-duration{text-align:right;font-size:14px}
 html[data-theme] .playlist{touch-action:pan-y;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
 html[data-theme] .playlist::-webkit-scrollbar{width:24px}
 html[data-theme] .playlist::-webkit-scrollbar-thumb{min-height:44px}
 html[data-theme] .playlist::-webkit-scrollbar-button:single-button{height:24px}
 html[data-theme] .player-card .curse-dial-field{grid-template-columns:48px 56px 48px;grid-template-rows:48px 21px;justify-content:center;align-items:center;gap:8px 16px;padding:8px 0}
 html[data-theme] .curse-dial-field>.curse-scale:first-child{grid-column:1;grid-row:2;text-align:center}
 html[data-theme] .curse-dial-field>.curse-scale:last-child{grid-column:3;grid-row:2;text-align:center}
 html[data-theme] .curse-dial-field>.curse-step{grid-row:1}
 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:1;justify-self:center}
 html[data-theme] .player-card .curse-step{width:48px;height:48px;min-width:48px;min-height:48px}
 html[data-theme] .curse-scale{font-size:14px;line-height:1.5;white-space:nowrap}
 html[data-theme] .curse-mode{text-align:center;margin-top:8px}
 .deck .volume-panel{grid-template-columns:44px max-content minmax(0,1fr) 40px;gap:12px}
 html[data-theme] .deck .volume-panel output{text-align:right}
 html[data-theme] .volume-panel input{min-width:0;min-height:44px;margin:0}
 html[data-theme] .seek{height:44px;padding:13px 5px}
 html[data-theme] .upload-note{line-height:1.6}
 html[data-theme] .footer-hint{font-size:12px;line-height:1.6}
}
@media(max-width:360px){
 html[data-theme] .player-card{padding:18px 12px}
 html[data-theme] .track{font-size:16px}
 html[data-theme] .card-caption{gap:8px}
}
/* A sideways phone must scroll from the top, never crop a centred console. */
@media(max-height:500px){
 html[data-theme] .player-page{align-content:start;padding-top:max(16px,env(safe-area-inset-top))}
 html[data-theme] .start-screen{padding:16px max(20px,env(safe-area-inset-right)) 16px max(20px,env(safe-area-inset-left))}
 html[data-theme] .start-panel{padding:14px 18px;margin:auto}
 html[data-theme] .start-panel h1{font-size:24px;line-height:1.25}
 html[data-theme] .start-caption{margin-bottom:8px;font-size:12px}
 html[data-theme] .start-prompt{margin:8px 0}
 html[data-theme] .start-hint{margin:8px 0 0;font-size:12px}
 html[data-theme] .settings-panel{max-height:calc(100dvh - 150px)}
}