/* The title screen owns the viewport until START, including mobile overscroll. */
html.boot-pending{overflow:hidden;overscroll-behavior:none}
html.boot-pending body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
html.boot-pending #castleMain,html.boot-pending .ghost-layer{visibility:hidden}
html[data-theme] .start-screen{height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box}
.start-loading[hidden]{display:none!important}
.start-loading{margin-top:18px;text-align:left;color:var(--g-text)}
.loading-heading{display:flex;justify-content:space-between;gap:8px;font:14px/1.5 var(--ui-font);margin-bottom:8px}
.loading-meter{height:22px;border:3px double var(--g-line);padding:3px;background:var(--g-inset)}
.loading-fill{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--g-accent) 0 8px,transparent 8px 11px)}
.loading-detail{margin:8px 0;color:var(--g-muted);font:14px/1.5 var(--ui-font)}
.loading-message{margin:8px 0 0;font:14px/1.5 var(--ui-font);overflow-wrap:break-word}
.start-screen[data-state=loading] :is(.start-prompt,.start-hint){display:none}
.start-screen[data-state=loading] .start-ghost{width:64px}
.start-screen[data-state=loading] .start-panel h1{font-size:28px;line-height:1.25}
.start-screen[data-state=error] .start-hint{display:none}

@media(max-width:740px){
  html[data-theme] .start-screen{padding:max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
  html[data-theme] .start-panel{box-sizing:border-box;flex-shrink:0}
  html[data-theme] .player-card{gap:20px;padding:16px 12px}
  html[data-theme] .card-caption{padding-bottom:12px}
  html[data-theme] .now-display{min-height:96px;padding:12px}
  html[data-theme] .player-card .transport{margin:14px 0;gap:20px}
  html[data-theme] .visualizer{margin-top:8px;height:14px}
  html[data-theme] .deck .volume-panel{margin-top:8px;gap:8px}
  html[data-theme] .player-status:empty{display:none}
  html[data-theme] .panel-heading{min-height:48px;padding-block:8px}
  html[data-theme] .playlist-window.has-win30-scrollbar{grid-template-columns:minmax(0,1fr) 44px}
  .win30-scrollbar{width:44px;grid-template-rows:44px minmax(0,1fr) 44px}
  .win30-scrollbar .win30-arrow{height:44px;min-height:44px;touch-action:manipulation}
  .win30-scrollbar .win30-thumb{min-height:44px}
  html[data-theme] .settings-panel select{font-size:16px}
  html[data-theme] .settings-panel .sfx-volume input{min-height:44px}
  html[data-theme] .footer-hint{display:none}
  html[data-theme] .console-footer{display:none}
}

@media(max-height:500px){
  .start-screen[data-state=loading] .start-ghost{display:none}
  .start-screen[data-state=loading] .start-panel h1{font-size:22px;line-height:1.1}
  html[data-theme] .start-panel{padding:14px 18px;margin:auto}
  html[data-theme] .start-ghost{width:64px;margin-bottom:4px}
  html[data-theme] .start-panel h1{font-size:24px;line-height:1.2}
  html[data-theme] .start-caption{margin-top:0;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}
}