/* nextpiece.css — the next piece after a run (js/nextpiece.js, 2026-09-05):
   1 the UP NEXT shelf on the results panel, 2 the one-time Open Repertoire
   sheet, 3 the programme in the Stage menu's setlist column, 4 Free Play's
   ⭐ For you dress and the beta banner, 5 Frau Adler's assignment on the
   academy's coach card. Loads last, after stage.css and academy.css, because
   it extends both. Design Gallery ui/next-piece · next-piece-guides-r1. */

/* ------------------------------------------- 1 · Encore (results panel) */
.np-shelf {
  margin: 8px auto 4px; width: 100%; max-width: 512px; text-align: left;
  background: rgba(255,215,94,.06); border: 1px solid rgba(255,215,94,.35);
  border-radius: 14px; padding: 12px 12px 10px;
}
.np-head { display: flex; align-items: baseline; gap: 10px; margin: 0 4px 10px; }
.np-head b { font-size: 12px; letter-spacing: 2.5px; color: var(--gold); font-weight: 900; }
.np-head span { font-size: 11.5px; color: #b9b4c6; }
.np-head .np-all { margin-left: auto; font-size: 11.5px; color: var(--cyan); font-weight: 700; text-decoration: none; white-space: nowrap; }
.np-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.np-card, .np-tile {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px 9px;
  border-radius: 11px; cursor: pointer; text-align: center; font: inherit; color: #eee; position: relative;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  transition: transform .12s, border-color .12s, background .12s;
}
.np-card:hover, .np-tile:hover { transform: translateY(-3px); border-color: var(--gold); background: rgba(255,215,94,.1); }
.np-card .fp-av, .np-tile .fp-av { margin-bottom: 2px; }
.np-card .t, .np-tile .t { font-size: 12.5px; font-weight: 800; line-height: 1.2; }
.np-card .c, .np-tile .c { font-size: 10.5px; color: #b9b4c6; }
.np-card .bl, .np-tile .bl, .np-piece .c { white-space: nowrap; }
.np-lv { font-size: 10px; font-weight: 800; color: #b9b4c6; letter-spacing: .5px; margin-left: 6px; }
.np-card .m, .np-tile .m { font-size: 10px; color: #8f8a9e; margin-top: 1px; }
.np-card .go { position: absolute; top: 6px; right: 6px; font-size: 10px; color: var(--cyan); opacity: 0; transition: opacity .12s; font-weight: 900; }
.np-card:hover .go { opacity: 1; }
/* a fight in the world has its own way out: the road (results.css .vres-on) */
.panel.vres-on #next-shelf, .panel.vres-on #results-fp-btn { display: none; }
@media (max-width: 600px) {
  .np-row { display: flex; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .np-card { flex: 0 0 132px; }
}

/* ----------------------------------- 2 · The Open Repertoire (one-time) */
.np-sheet { z-index: 12; }
.np-sheet-card {
  width: min(640px, 94vw); background: linear-gradient(180deg, #171a2c, #0e1020);
  border: 1px solid rgba(255,215,94,.5); border-radius: 18px; padding: 24px 26px 20px; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(255,215,94,.12);
}
.np-kick { font-size: 11px; font-weight: 900; letter-spacing: 3.5px; color: var(--gold); }
.np-sheet-card h3 {
  margin: 6px 0 4px; font-size: 27px; font-weight: 900; font-style: italic; letter-spacing: .5px;
  background: linear-gradient(180deg, #fff8d0, var(--gold) 60%, #c8860a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.np-sheet-card p { margin: 0 auto 14px; max-width: 480px; font-size: 14px; line-height: 1.5; color: #d7dbe8; }
.np-sheet-card p b { color: #fff; }
.np-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.np-tile { padding: 14px 8px 12px; border-radius: 14px; border-width: 2px; gap: 6px; }
.np-tile:hover { box-shadow: 0 8px 26px rgba(255,215,94,.25); }
.np-tile .t { font-size: 13.5px; font-weight: 900; }
.np-tile .c { font-size: 11px; }
.np-tile .m { font-size: 10.5px; }
.np-tile .go {
  position: static; opacity: 1; margin-top: 4px; font-size: 11px; letter-spacing: 1.5px; color: #002;
  background: linear-gradient(180deg, #7be2ff, var(--cyan)); border-radius: 20px; padding: 4px 12px;
}
.np-foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.np-foot .small-btn { margin: 0; }
.np-foot .np-browse { color: #002; background: linear-gradient(180deg, #ffe9a3, var(--gold)); border: none; font-weight: 900; box-shadow: 0 3px 0 #b8922c; }
.np-once { margin-top: 10px; font-size: 11px; color: #6f6a80; }
@media (max-width: 600px) {
  .np-sheet-card { padding: 18px 14px 16px; }
  .np-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------ 3 · Tonight's Setlist (the menu) */
/* arm A's plain dress: the card the bounty and the chest wear */
.np-prog {
  width: 100%; margin: 8px 0 2px; padding: 10px 12px; border-radius: 12px; text-align: left;
  border: 1px solid rgba(52,211,255,.35); background: rgba(52,211,255,.06); color: #fff;
}
.np-label { font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); margin-bottom: 4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.np-label i { font-style: normal; font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 600; color: #8a93a3; }
.np-row-p { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.12); cursor: pointer; }
.np-row-p:last-of-type { border-bottom: none; }
.np-row-p.done { cursor: default; }
.np-row-p .n {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; border: 1px solid rgba(255,255,255,.18); color: #8a93a3;
}
.np-row-p.done .n { border-color: #5ce38f; color: #5ce38f; }
.np-row-p.next .n { background: var(--cyan); color: #021018; border-color: var(--cyan); box-shadow: 0 0 14px rgba(52,211,255,.6); }
.np-row-p .body { flex: 1; min-width: 0; }
.np-row-p b { display: block; font-size: 14px; font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-row-p.done b { color: #8a93a3; text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }
.np-row-p small { display: block; font-size: 11.5px; color: #8a93a3; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-row-p small .sc-grade { font-size: 8.5px; padding: 0 5px; }
.np-row-p .go { flex: none; font-weight: 800; font-size: 11px; letter-spacing: .1em; color: var(--cyan); opacity: 0; }
.np-row-p.next .go, .np-row-p:hover .go { opacity: 1; }
.np-row-p.done .go { opacity: 1; color: #5ce38f; }
.np-foot-p { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a93a3; padding: 10px 0 2px; }
.np-foot-p a { color: var(--cyan); text-decoration: none; }
/* the Stage: the programme is a section of the setlist column, in its type */
html[data-menu="stage"] #menu .menu-set:has(.np-prog:not(.hidden)) { display: block; }
html[data-menu="stage"] #menu .np-prog {
  margin: 12px 0 0; padding: 0; border: none; border-top: 1px solid var(--st-line); border-radius: 0;
  background: none; padding-top: 12px;
}
html[data-menu="stage"] #menu .np-label {
  font-family: var(--st-cond); font-weight: 700; font-size: 13px; letter-spacing: .3em; color: var(--st-cyan); margin-bottom: 6px;
}
html[data-menu="stage"] #menu .np-label i { font-family: var(--st-sans); color: var(--st-dim); }
html[data-menu="stage"] #menu .np-row-p { border-color: var(--st-line); padding: 9px 0; }
html[data-menu="stage"] #menu .np-row-p .n { font-family: var(--st-cond); font-size: 15px; border-color: var(--st-line); color: var(--st-dim); }
html[data-menu="stage"] #menu .np-row-p.done .n { border-color: var(--st-green); color: var(--st-green); }
html[data-menu="stage"] #menu .np-row-p.next .n { background: var(--st-cyan); color: #021018; border-color: var(--st-cyan); }
html[data-menu="stage"] #menu .np-row-p b {
  font-family: var(--st-cond); font-weight: 700; font-size: 18px; text-transform: uppercase; color: var(--st-white); line-height: 1;
}
html[data-menu="stage"] #menu .np-row-p.done b { color: var(--st-dim); }
html[data-menu="stage"] #menu .np-row-p small { font-size: 12px; color: var(--st-dim); }
html[data-menu="stage"] #menu .np-row-p .go { font-family: var(--st-cond); font-size: 13px; }
html[data-menu="stage"] #menu .np-row-p.done .go { color: var(--st-green); }
html[data-menu="stage"] #menu .np-foot-p { font-family: var(--st-cond); font-size: 12px; color: var(--st-dim); }
html[data-menu="stage"] #menu .np-foot-p a { color: var(--st-cyan); }

/* --------------------------------------------- 4 · Free Play's dress */
.fp-beta {
  display: flex; align-items: center; gap: 12px; margin: 10px 0 2px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid rgba(125,255,178,.45); background: linear-gradient(90deg, rgba(125,255,178,.12), rgba(255,255,255,.03));
}
.fp-beta .ico { font-size: 22px; }
.fp-beta b { display: block; font-size: 12.5px; letter-spacing: .6px; color: #7dffb2; }
.fp-beta small { font-size: 12px; color: #d7e0ea; font-weight: 600; }
.fp-shelf-h { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 2px; font-size: 12px; letter-spacing: 2.5px; font-weight: 900; color: var(--gold); text-transform: uppercase; }
.fp-shelf-h span { font-size: 11.5px; letter-spacing: 0; text-transform: none; font-weight: 600; color: #b9b4c6; }
.fp-shelf-h.all { color: #cfc9dd; }
.song-card.you { border-color: rgba(255,215,94,.55); background: rgba(255,215,94,.07); }
.song-card.you:hover { border-color: var(--gold); }
.sc-custom.sc-you { color: var(--gold); border-color: rgba(255,215,94,.55); }
.sc-why { display: block; font-size: 11px; color: var(--cyan); font-weight: 800; margin-top: 4px; }
.fp-view.you.on { border-color: var(--gold); background: rgba(255,215,94,.14); }

/* --------------------------- 5 · Frau Adler on the academy's coach card */
#ac-coach.np { background: rgba(4,6,14,.55); }
#ac-coach.np #ac-ring { display: none; }
#ac-coach.np #ac-card {
  left: auto; right: 26px; bottom: 26px; top: auto; transform: none;
  width: min(520px, calc(100vw - 24px)); box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 3px rgba(255,215,94,.12);
}
#ac-coach.np .ac-face { width: 84px; height: 88px; }
.np-piece {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: rgba(255,215,94,.08); border: 1px solid rgba(255,215,94,.3);
}
.np-piece:hover { border-color: var(--gold); }
.np-piece .t { font-size: 14px; font-weight: 800; }
.np-piece .c { font-size: 11.5px; color: #b9b4c6; }
.np-piece .m { margin-left: auto; font-size: 11px; color: #8f8a9e; white-space: nowrap; }
.np-others { margin-top: 8px; display: none; flex-direction: column; gap: 4px; }
.np-others.open { display: flex; }
.np-others button {
  text-align: left; font: inherit; font-size: 12.5px; font-weight: 700; color: #e6ecf5; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 7px 10px;
  display: flex; gap: 8px; align-items: center;
}
.np-others button:hover { border-color: var(--gold); }
.np-others button i { font-style: normal; margin-left: auto; font-size: 10.5px; color: #8f8a9e; }
@media (max-width: 600px) {
  #ac-coach.np #ac-card { right: 8px; left: 8px; bottom: 8px; width: auto; }
}
/* the keyboard filter's line (js/keysize.js): what is hidden, and Show all */
.fp-keyfit { border-color: rgba(52,211,255,.45); background: linear-gradient(90deg, rgba(52,211,255,.12), rgba(255,255,255,.03)); }
.fp-keyfit b { color: var(--cyan); }
.fp-keyfit .small-btn { margin: 0 0 0 auto; white-space: nowrap; }

/* ---------------- YOUR NEXT PIECE, on the Free Play shelf (2026-09-09) ----
   The saloon's shape: one piece, one button. It is deliberately the only
   thing on the shelf with a filled primary button, because the point is that
   there is nothing to decide. */
.fp-next {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin: 0 0 10px;
  background: var(--panel, #1b1b22);
  border: 1px solid var(--line, #33333d);
  border-left: 3px solid var(--gold, #d8a43a);
  border-radius: 8px;
}
.fp-next .fpn-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fp-next .fpn-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--gold, #d8a43a); text-transform: uppercase;
}
.fp-next .fpn-t {
  font-size: 18px; font-weight: 600; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp-next .fpn-c { font-size: 12.5px; opacity: .68; }
.fp-next .fpn-w { font-size: 12.5px; opacity: .85; margin-top: 3px; }
.fp-next .fpn-w b { color: var(--gold, #d8a43a); font-weight: 700; }
.fp-next .fpn-go {
  flex: 0 0 auto; padding: 11px 20px; border-radius: 6px; border: 0;
  background: var(--gold, #d8a43a); color: #17140c;
  font-weight: 800; font-size: 14px; letter-spacing: .04em; cursor: pointer;
}
.fp-next .fpn-go:hover { filter: brightness(1.08); }
.fp-next .fpn-more {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  font-size: 12px; opacity: .6; text-decoration: underline; color: inherit;
}
.fp-next .fpn-more:hover { opacity: .95; }
@media (max-width: 620px) {
  .fp-next { flex-wrap: wrap; }
  .fp-next .fpn-go { width: 100%; order: 3; }
  .fp-next .fpn-more { order: 4; }
}

/* how many people get to the end of this one, on the Free Play row */
.sc-fin { font-size: 11.5px; font-weight: 600; opacity: .85; white-space: nowrap; }
.sc-fin.hi  { color: #6fbf8a; }
.sc-fin.mid { color: #cbb26a; }
.sc-fin.lo  { color: #d08670; }

/* -------- THE DRILL DOOR on the results panel (2026-09-09) ---------------
   Excalibur retains better than anything else in the game and twelve people
   have found it. This is the door, placed where the need is obvious. */
.next-drill {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; margin: 10px 0 0;
  background: var(--panel, #1b1b22);
  border: 1px solid var(--line, #33333d);
  border-left: 3px solid #7f6ad6;
  border-radius: 8px; text-align: left;
}
.next-drill .nd-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  color: #a394e8; text-transform: uppercase;
}
.next-drill .nd-t { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.next-drill .nd-w { font-size: 12.5px; opacity: .75; line-height: 1.45; }
.next-drill .nd-go {
  align-self: flex-start; margin-top: 8px;
  padding: 9px 16px; border-radius: 6px; border: 1px solid #7f6ad6;
  background: rgba(127, 106, 214, .16); color: #c3b8f5;
  font-weight: 700; font-size: 13px; letter-spacing: .04em; cursor: pointer;
}
.next-drill .nd-go:hover { background: rgba(127, 106, 214, .28); }

/* the piece page's finish line (main.js, 2026-09-10): the list's chip, said in words */
.cs-finish { display: block; font-size: 12px; margin-top: 4px; opacity: .9; }
.cs-finish.hi  { color: #6fbf8a; }
.cs-finish.mid { color: #cbb26a; }
.cs-finish.lo  { color: #e0907e; }

/* ---- the shelf's frames fold, and stay folded (2026-09-15) ----------------
   Lionel, from a screenshot of Free Play with the beta banner, the Daily
   Bounty and YOUR NEXT PIECE stacked above the list: "these frames need to be
   collapsible and if the user collapses them then they stay collapsed for
   repeated logins". A shut frame keeps its LABEL, so it still says what it is
   and what it would say more about — collapsing is not dismissing, and one
   click brings it back. The state is fold.js's own store (up-fold, one entry
   per element id), per browser like the rail's blocks.

   Scoped to .ss-left because .bounty-card is also the Stage menu's chest and
   bounty cards, whose base rules live in results.css and stage.css. */
.ss-left .fp-fold {
  /* stretched, so the whole right edge of the frame is the handle: at 13px the
     caret alone is a poor target, and on a phone the shut row is all there is */
  flex: 0 0 auto; margin-left: auto; align-self: stretch;
  min-width: 30px; display: grid; place-items: center;
  background: none; border: 0; padding: 0 4px; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1; color: inherit; opacity: .6;
}
.ss-left .fp-fold:hover { opacity: 1; }
.ss-left .fp-fold:focus-visible { outline: 2px solid var(--gold, #d8a43a); outline-offset: 2px; border-radius: 4px; }

/* the beta banner and the keyboard filter */
.ss-left .fp-beta.shut { padding-top: 6px; padding-bottom: 6px; }
.ss-left .fp-beta.shut .ico { font-size: 17px; }
.ss-left .fp-beta.shut small { display: none; }
/* the keyboard filter is the way out of a filter that is hiding pieces right
   now, so Show all rides the shut row; the caret then sits after it */
.ss-left .fp-keyfit .fp-fold { margin-left: 8px; }

/* the Daily Bounty */
.ss-left .bounty-card.shut { padding-top: 6px; padding-bottom: 6px; }
.ss-left .bounty-card.shut .db-ico { font-size: 18px; }
.ss-left .bounty-card.shut .db-body small { display: none; }

/* YOUR NEXT PIECE: shut, the label and the title share one line — a folded
   card that said only "YOUR NEXT PIECE" would hide the one thing worth
   knowing before deciding whether to open it again */
.ss-left .fp-next.shut { padding-top: 8px; padding-bottom: 8px; }
.ss-left .fp-next.shut .fpn-l { flex-direction: row; align-items: baseline; gap: 9px; }
.ss-left .fp-next.shut .fpn-t { font-size: 14px; }
.ss-left .fp-next.shut .fpn-c,
.ss-left .fp-next.shut .fpn-w,
.ss-left .fp-next.shut .fpn-go,
.ss-left .fp-next.shut .fpn-more { display: none; }

/* the free tier's banner (2026-09-17): the runs left and a small way to more */
.fp-beta .fp-go-premium { display: inline-block; width: auto; margin: 0 0 0 8px; padding: 2px 10px; font-size: 12px; vertical-align: baseline; }