/* Full viewport presentation: background and HUD fill the window; chart geometry is fitted inside the canvas. */
html, body { width: 100%; height: 100%; background: #1b2b37; }
body { overscroll-behavior: none; }
#game-canvas { --screen-safe-top:env(safe-area-inset-top,0px); --screen-safe-left:env(safe-area-inset-left,0px); --screen-safe-right:env(safe-area-inset-right,0px); }
#app, #app:fullscreen {
  width: 100%; height: 100dvh; margin: 0; top: 0; transform: none;
  --u: min(1cqw, 1.85cqh);
}
:fullscreen, :-webkit-full-screen { background: #1b2b37; }
.empty-state { position: absolute; inset: 0 0 27.5%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u)*1.8); }
.empty-state strong { font-weight: 400; font-size: calc(var(--u)*2); letter-spacing: .04em; }
.empty-state>span { font-size: calc(var(--u)*.9); opacity: .55; }
.empty-state .flat-button { margin-top: calc(var(--u)*1); }
.empty-list-caption { font-size: calc(var(--u)*1.8); opacity: .45; padding: calc(var(--u)*3) calc(var(--u)*2) calc(var(--u)*1); }
.empty-library .cover-hover, .empty-library .cover-code, .empty-library .cover-tag, .empty-library .difficulty-score, .empty-library .song-meta { visibility: hidden; }
.empty-library .play-button { opacity: .25; }
.pause-button { left: max(2.4%, env(safe-area-inset-left)); }
@media (orientation: portrait) {
  #app { --u: 1cqw; }
  .empty-state { gap: 4vw; }
  .empty-state strong { font-size: 4.5vw; }
  .empty-state>span { font-size: 2.6vw; }
  .empty-list-caption { font-size: 4vw; padding: 4vw; }
  .selection-footer { max-width: 73%; gap: 3.4vw; }
  .selection-footer .footer-button { min-height: 8vw; }
  .selection-footer .footer-button svg { width: 4vw; height: 4vw; }
  /* A suggestion, never an opaque layer hiding the chart. */
  .rotate-hint { display: block; inset: auto 12% 9%; background: #142330aa; border: 1px solid #ffffff20; padding: 2vw; font-size: 2.8vw; border-radius: 0; opacity: .65; }
}

.pause-button { width: clamp(44px, 6cqh, 64px); height: clamp(44px, 6cqh, 64px); aspect-ratio: 1; padding: 8px; display: grid; place-items: center; font-size: inherit; }
.pause-button .pause-glyph { width: 100%; height: 100%; fill: currentColor; stroke: none; }

/* Shear the scrolling viewport, then undo the shear on its contents.
   All orientations follow the diagonal as they scroll; text stays upright. */
.song-list { transform: skewX(-15deg); transform-origin: center; touch-action: pan-y; overscroll-behavior-y: contain; }
.song-row, .song-list-import, .empty-list-caption { transform: skewX(15deg); }
.song-row.active { transform: skewX(15deg) translateX(calc(var(--u)*-.7)); }

.pause-actions { flex-direction: row; gap: clamp(24px, 5cqw, 80px); }
.pause-actions button { display: flex; flex-direction: column; align-items: center; gap: 14px; width: clamp(72px, 12cqw, 160px); min-width: 0; padding: 12px 0; background: transparent; color: #fff; transform: none; font-size: clamp(14px, 1.5cqw, 22px); }
.pause-actions button img { width: clamp(56px, 7cqw, 96px); height: clamp(56px, 7cqw, 96px); object-fit: contain; }
.pause-actions button span { transform: none; }
.pause-actions button small { font-size: clamp(9px, .7cqw, 12px); letter-spacing: .18em; margin-top: 6px; opacity: .6; }
@media (orientation: portrait) {
  .pause-actions { flex-direction: row; gap: 4vw; }
  .pause-actions button { width: 22vw; }
}