/* screens/pause.css: the Paused card (WP9; SPEC 3.11). The stage is frozen, never dimmed: the dock slides out right
   (base.css) and this card takes its place, right 1.5vw / bottom 1.5vh / top 55vh, the dock's width. The rest of the
   HUD stays at 60 %. Content: red band "Paused" with a pause glyph, the song ticket (title, difficulty, time, score)
   with the rope, then the three stacked buttons at the bottom. */

#pause .pause-sheet {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; gap: .65rem;
  padding: 0 0 1rem; overflow: hidden auto; scrollbar-gutter: auto;
  --anim: ff-slide-r 300ms var(--spring-soft) 50ms backwards; --slide: 112%;
  animation: var(--anim, none);
}
#pause .pause-sheet > :not(.band) { margin-inline: 1rem; }

/* band: red seigaiha strip, scalloped edge (components), the title, and a two-bar pause glyph on the right */
#pause .pause-sheet .band { margin-bottom: .55rem; padding-right: 3.6rem; border-radius: calc(var(--r-l) - var(--ow-l)) calc(var(--r-l) - var(--ow-l)) 0 0; }
#pause .pause-sheet .band h2 { margin: 0; font-size: var(--fs-h1); }
#pause .pause-sheet .band::before {
  content: ''; position: absolute; right: 1.1rem; top: 50%; width: 1.75rem; height: 1.9rem; translate: 0 -50%; rotate: 4deg; pointer-events: none;
  border-radius: .2rem;
  background:
    linear-gradient(var(--ivory), var(--ivory)) .2rem .2rem / .42rem calc(100% - .4rem) no-repeat,
    linear-gradient(var(--ivory), var(--ivory)) calc(100% - .2rem) .2rem / .42rem calc(100% - .4rem) no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 0 / .82rem 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / .82rem 100% no-repeat;
}

/* the song ticket: title on one line, then difficulty · time · score, the rope underneath */
#pause #pause-song {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: .6rem; row-gap: .1rem; margin: 0 1rem; padding: .5rem .75rem .55rem;
  border: .16rem dashed rgb(44 15 21 / .35); border-radius: var(--r-s);
  background: rgb(234 223 201 / .55);
}
#pause .pause-song__title {
  grid-column: 1 / -1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; unicode-bidi: isolate;
  font: 700 var(--fs-h3)/1.1 var(--font-display); font-stretch: 75%; color: var(--ink);
}
#pause .pause-song__meta {
  grid-column: 1 / -1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 900 var(--fs-small)/1.25 var(--font-body); letter-spacing: .04em; color: var(--ink-2);
}
#pause .pause-song__score { grid-column: 1 / -1; white-space: nowrap; font: 700 var(--fs-small)/1.25 var(--font-num); color: var(--ink); }
#pause .pause-progress { margin-top: -.25rem; margin-inline: 1.75rem; }

/* the menu sits at the bottom of the card */
#pause .menu { align-self: end; gap: .5rem; }
#pause .menu button { min-height: 2.8rem; }
#pause .menu button > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

@container (max-width: 16rem) { #pause .menu button { padding-inline: .7rem; } }