/* The Stage menu — menu-2026-08 arms B and C (js/menu-theme.js).
   EVERY rule is scoped to html[data-menu="stage"]: with the attribute absent
   (arm A) this file changes nothing. Three screens wear it: the main menu,
   the PLAY chooser and the piece page. Type is Barlow / Barlow Condensed,
   self-hosted in web/fonts (the iOS shell and offline play never wait on
   Google Fonts). */

@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Barlow-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/BarlowCondensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/BarlowCondensed-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/BarlowCondensed-800.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:800;font-display:swap;src:url(fonts/BarlowCondensed-800i.woff2) format('woff2')}

html[data-menu="stage"] {
  --st-cyan: #34d3ff; --st-cyan2: #9beaff; --st-cyan-deep: #0e7fa8;
  --st-white: #f4f7fb; --st-dim: #8a93a3; --st-line: rgba(255,255,255,.12);
  --st-glass: rgba(10, 13, 20, .72); --st-glass2: rgba(255,255,255,.08);
  --st-gold: #ffd75e; --st-green: #5ce38f;
  --st-cond: "Barlow Condensed", "Arial Narrow", "Avenir Next Condensed", sans-serif;
  --st-sans: "Barlow", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

/* ------------------------------------------------------------ the menu */
html[data-menu="stage"] #menu {
  background: #07080c;
  backdrop-filter: none;
  font-family: var(--st-sans);
}
/* the footage: fixed inside the fixed overlay (its backdrop-filter is gone,
   so `fixed` means the viewport again), under everything else in the menu */
html[data-menu="stage"] #menu .menu-backdrop {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: #07080c center / cover no-repeat;
}
html[data-menu="stage"] #menu .menu-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55;
}
html[data-menu="stage"] #menu .menu-scrim {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100%/9 - 1px), rgba(255,255,255,.035) calc(100%/9 - 1px) calc(100%/9)),
    linear-gradient(180deg, rgba(7,8,12,.55), rgba(7,8,12,.62) 55%, rgba(7,8,12,.9));
}
html[data-menu="stage"] #menu .panel.menu-panel {
  position: relative; z-index: 1;
  max-width: 1320px; width: min(96vw, 1320px);
  padding: 26px 40px 34px; text-align: left;
}

/* wordmark + hit line */
html[data-menu="stage"] #menu .title {
  font-family: var(--st-cond); font-weight: 800; font-style: italic;
  font-size: clamp(46px, 6.4vw, 92px); line-height: .86; letter-spacing: .01em;
  text-transform: uppercase; text-align: left;
  background: none; -webkit-text-fill-color: var(--st-white); color: var(--st-white);
  filter: none; text-shadow: 0 0 30px rgba(52,211,255,.35);
  padding-bottom: 16px; position: relative;
}
html[data-menu="stage"] #menu .title b { -webkit-text-fill-color: var(--st-cyan); color: var(--st-cyan); }
html[data-menu="stage"] #menu .title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--st-cyan) 12%, var(--st-cyan) 88%, transparent);
  box-shadow: 0 0 18px rgba(52,211,255,.7), 0 0 40px rgba(52,211,255,.3);
}

/* the grid: portrait plate | midi + PLAY | setlist, the keybed under all
   three, the small links last. .menu-right dissolves so its children are the
   grid items; the wrappers come from menu-theme.js */
html[data-menu="stage"] #menu .menu-cols {
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 380px;
  grid-template-areas:
    "left mid set"
    "left play set"
    "left gap set"
    "keys keys keys"
    "foot foot foot";
  gap: 16px 26px; margin-top: 26px; align-items: start;
}
html[data-menu="stage"] #menu .menu-right { display: contents; }
/* a guest has no pianist card yet: the plate's column folds away */
html[data-menu="stage"] #menu .menu-cols:not(:has(.menu-leftcol > :not(.hidden))) {
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas: "mid set" "play set" "gap set" "keys keys" "foot foot";
}
html[data-menu="stage"] #menu .menu-cols:not(:has(.menu-leftcol > :not(.hidden))) .menu-leftcol { display: none; }
html[data-menu="stage"] #menu .menu-leftcol { grid-area: left; justify-content: flex-start; }
html[data-menu="stage"] #menu .menu-mid { grid-area: mid; }
html[data-menu="stage"] #menu #play-btn { grid-area: play; }
/* the right-hand column: 🎙 the voice room over tonight's setlist. The
   wrapper is the grid item (menu-theme.js regroupMenu); the two cards inside
   it stack and each hides on its own, so an empty column collapses. */
html[data-menu="stage"] #menu .menu-side {
  grid-area: set; display: flex; flex-direction: column; gap: 16px; min-width: 0; align-self: start;
}
/* the doors under PLAY take the row the grid already left for them; four of
   them wrap to two lines, which the auto-sized grid row absorbs */
html[data-menu="stage"] #menu .menu-under { grid-area: gap; width: 100%; margin: 0; }
html[data-menu="stage"] #menu .menu-stack { grid-area: keys; }
html[data-menu="stage"] #menu .menu-foot { grid-area: foot; }
html[data-menu="stage"] #menu .menu-mid > *, html[data-menu="stage"] #menu .menu-set > *,
html[data-menu="stage"] #menu .menu-side > * { width: 100%; box-sizing: border-box; }

/* label */
html[data-menu="stage"] .st-label, html[data-menu="stage"] #menu .pc-mode {
  font-family: var(--st-cond); font-weight: 700; font-size: 13px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--st-cyan); background: none; border: none;
  padding: 0; margin: 0 0 6px; border-radius: 0; text-align: left;
}
html[data-menu="stage"] #menu .pc-mode.vienna { color: var(--st-cyan); background: none; border: none; }

/* the player plate */
html[data-menu="stage"] #menu #player-card.menu-left {
  position: relative; overflow: hidden; align-items: stretch;
  padding: 18px; border-radius: 10px; min-width: 0;
  background: var(--st-glass); border: 1px solid var(--st-line);
  backdrop-filter: blur(6px);
}
html[data-menu="stage"] #menu #player-card.menu-left:hover { border-color: rgba(52,211,255,.6); background: var(--st-glass); }
html[data-menu="stage"] #menu .pc-avatar-big {
  width: 170px; height: 170px; margin: 4px auto 0; border-radius: 12px;
  background: linear-gradient(180deg, #151a26, #0a0d14); border: 1px solid var(--st-line);
  position: relative; overflow: hidden; font-size: 90px; line-height: 170px; text-align: center;
}
html[data-menu="stage"] #menu .pc-avatar-big::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--st-cyan); box-shadow: 0 0 10px var(--st-cyan);
}
html[data-menu="stage"] #menu .pc-avatar-big .pc-portrait,
html[data-menu="stage"] #menu .pc-avatar-big img { width: 100%; height: 100%; object-fit: contain; display: block; }
html[data-menu="stage"] #menu .pc-avatar-big .fp-av { margin: 0 auto; }
html[data-menu="stage"] #menu .menu-left .pc-name {
  font-family: var(--st-cond); font-weight: 800; font-size: 32px; line-height: 1;
  text-transform: uppercase; text-align: center; margin-top: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-menu="stage"] #menu .menu-left .pc-level,
html[data-menu="stage"] #menu .menu-left .pc-elo {
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-align: center; color: var(--st-white);
}
html[data-menu="stage"] #menu .menu-left .pc-level { margin-top: 8px; color: var(--st-cyan2); }
html[data-menu="stage"] #menu .menu-left .pc-xpbar {
  width: 100%; height: 6px; margin: 12px 0 2px; border-radius: 3px;
  background: #0c1018; border: 1px solid var(--st-line);
}
html[data-menu="stage"] #menu #pc-xpfill { background: var(--st-cyan); box-shadow: 0 0 10px var(--st-cyan); }
html[data-menu="stage"] #menu .menu-left .pc-coins {
  font-family: var(--st-cond); font-weight: 800; font-size: 28px; color: var(--st-gold);
  text-align: center; margin-top: 10px;
}
html[data-menu="stage"] #menu .pc-edit {
  align-self: center; margin-top: 8px; background: none; border: none; padding: 0;
  font-family: var(--st-cond); font-weight: 700; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--st-dim);
}
html[data-menu="stage"] #menu .menu-left:hover .pc-edit { color: var(--st-cyan); border: none; }
html[data-menu="stage"] #menu .menu-signout,
html[data-menu="stage"] #menu .menu-door {
  background: none; border: 1px solid var(--st-line); border-radius: 8px;
  font-family: var(--st-cond); font-weight: 700; font-size: 13px; letter-spacing: .15em; text-transform: uppercase;
}

/* midi pill */
html[data-menu="stage"] #menu .menu-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
html[data-menu="stage"] #menu .midi-row { margin: 4px 0 0; }
html[data-menu="stage"] #menu .midi-status {
  background: none; border: none; padding: 4px 0; margin: 0;
  font-family: var(--st-cond); font-weight: 700; font-size: 14px; letter-spacing: .12em;
  text-transform: uppercase; color: #ff9aa9;
}
html[data-menu="stage"] #menu .midi-status.ok { color: var(--st-white); background: none; border: none; }
html[data-menu="stage"] #menu .midi-status::before {
  content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 10px; vertical-align: 1px; background: #ff5c78; box-shadow: 0 0 10px #ff5c78;
}
html[data-menu="stage"] #menu .midi-status.ok::before { background: var(--st-green); box-shadow: 0 0 10px var(--st-green); }
html[data-menu="stage"] #menu .midi-edit {
  background: none; border: 1px solid var(--st-line); color: var(--st-cyan); border-radius: 6px;
}
html[data-menu="stage"] #menu .midi-picker, html[data-menu="stage"] #menu .conn-advice {
  background: var(--st-glass); border: 1px solid var(--st-line); border-radius: 10px; padding: 12px 14px;
}

/* PLAY: one giant note-bar */
html[data-menu="stage"] #menu #play-btn.big-btn {
  position: relative; overflow: hidden; margin: 0; width: 100%; min-height: 260px;
  padding: 0 0 0 14px; border-radius: 12px; border: none;
  background: var(--st-cyan); color: #021018;
  font-family: var(--st-cond); font-weight: 800; font-style: italic;
  font-size: clamp(72px, 8.5vw, 128px); letter-spacing: .02em; line-height: 1; text-transform: uppercase;
  box-shadow: 0 0 60px rgba(52,211,255,.45), 0 10px 0 var(--st-cyan-deep);
  transition: transform .12s, box-shadow .12s;
}
html[data-menu="stage"] #menu #play-btn.big-btn::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-55deg, transparent 0 22px, rgba(0,0,0,.06) 22px 44px);
}
html[data-menu="stage"] #menu #play-btn.big-btn::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  background: #021018; opacity: .85; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
html[data-menu="stage"] #menu #play-btn.big-btn:hover {
  transform: translateY(-3px) scale(1); box-shadow: 0 0 80px rgba(52,211,255,.6), 0 13px 0 var(--st-cyan-deep);
}
html[data-menu="stage"] #menu #play-btn.big-btn:active { transform: translateY(4px); box-shadow: 0 0 40px rgba(52,211,255,.4), 0 4px 0 var(--st-cyan-deep); }

/* the five doors: black-glass bars under the note-bar, not keys — the keybed
   below is one octave and stays seven. The six-column grid comes from
   style.css; here the three ordinary doors take a THIRD of the row each
   (span 2), because this column is wide enough for three labels. */
html[data-menu="stage"] #menu .menu-under .mode-btn {
  grid-column: span 2;
  height: 46px; padding: 0 10px; border-radius: 8px;
  background: var(--st-glass); border: 1px solid var(--st-line); color: var(--st-white);
  font-family: var(--st-cond); font-weight: 700; font-size: 17px; letter-spacing: .12em;
  text-transform: uppercase; backdrop-filter: blur(6px);
  transition: border-color .12s, color .12s, background .12s;
}
html[data-menu="stage"] #menu .menu-under .mode-btn:hover:not(:disabled) {
  transform: none; border-color: var(--st-cyan); color: var(--st-cyan); background: var(--st-glass2);
}
/* While Atlantis is hidden (js/flags.js ATLANTIS_MODE, 2026-09-17) the row
   holds two ordinary doors, so each takes half of it rather than leaving a
   third of the row empty. */
html[data-menu="stage"] #menu .menu-under:has(> #atlantis-btn.hidden) > .mode-btn:not(.hero):not(.adv) {
  grid-column: span 3;
}
/* Free Play and Excalibur, half a row each above the other three (Lionel,
   2026-09-09): twice the height and half again the type, and lit — a hairline
   of the accent and the brighter glass — so the pair reads as a step between
   the PLAY bar and the doors, never as a second PLAY. */
html[data-menu="stage"] #menu .menu-under .mode-btn.hero {
  grid-column: span 3; height: 88px; padding: 0 18px; border-radius: 10px;
  background: var(--st-glass2); border-color: rgba(52,211,255,.42);
  font-size: 27px; letter-spacing: .06em;
  box-shadow: 0 0 24px rgba(52,211,255,.12), 0 4px 0 rgba(9,24,34,.55);
}
/* 🗺 ADVENTURE, THE SECOND BIG BUTTON (Lionel, 2026-09-14). This grid is the
   row the layout already leaves directly under the PLAY bar, so the world's
   door only has to lead it and take the whole width — no DOM move, no grid
   area of its own, and the free tier goes on hiding the block entire. It is
   the note-bar again at a third of the height, in gold: FILLED like PLAY and
   unlike every door under it, so the menu reads big → big → doors, and the
   colour says at a glance that it is not a second PLAY. */
html[data-menu="stage"] #menu .menu-under .mode-btn.adv {
  position: relative; overflow: hidden; grid-column: span 6;
  height: 92px; padding: 0 0 0 12px; margin: 0 0 2px; border-radius: 10px; border: none;
  background: var(--st-gold); color: #241800;
  font-family: var(--st-cond); font-weight: 800; font-style: italic;
  font-size: clamp(34px, 3.4vw, 50px); letter-spacing: .02em; line-height: 1; text-transform: uppercase;
  backdrop-filter: none;
  box-shadow: 0 0 34px rgba(255,215,94,.28), 0 6px 0 #a8801a;
  transition: transform .12s, box-shadow .12s;
}
/* the note-bar's own hatching and arrow, so the two big buttons are one
   family; both are decoration and neither takes a pointer */
html[data-menu="stage"] #menu .menu-under .mode-btn.adv::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-55deg, transparent 0 22px, rgba(0,0,0,.06) 22px 44px);
}
html[data-menu="stage"] #menu .menu-under .mode-btn.adv::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
  background: #241800; opacity: .8; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
html[data-menu="stage"] #menu .menu-under .mode-btn.adv:hover:not(:disabled) {
  transform: translateY(-2px); border-color: transparent; color: #241800; background: var(--st-gold);
  box-shadow: 0 0 46px rgba(255,215,94,.42), 0 8px 0 #a8801a;
}
html[data-menu="stage"] #menu .menu-under .mode-btn.adv:active {
  transform: translateY(3px); box-shadow: 0 0 24px rgba(255,215,94,.25), 0 2px 0 #a8801a;
}

html[data-menu="stage"] #menu .menu-under .mode-btn.hero:hover:not(:disabled) {
  box-shadow: 0 0 34px rgba(52,211,255,.3), 0 4px 0 var(--st-cyan-deep);
}
html[data-menu="stage"] #menu .menu-under .mode-btn.hero:active {
  transform: translateY(3px); box-shadow: 0 0 20px rgba(52,211,255,.2), 0 1px 0 var(--st-cyan-deep);
}

/* the chat at the top of that column (js/social.js menuChatHost): the
   setlist's own glass, so the two read as one column rather than a floating
   bar that happens to be there */
html[data-menu="stage"] #menu .menu-side > #vienna-chat .vc-log {
  background: var(--st-glass); border: 1px solid var(--st-line); border-bottom: 0;
  border-left: 3px solid var(--st-cyan); border-radius: 10px 10px 0 0; backdrop-filter: blur(6px);
}
html[data-menu="stage"] #menu .menu-side > #vienna-chat .vc-form {
  border: 1px solid var(--st-line); border-left: 3px solid var(--st-cyan); border-top: 0; border-radius: 0 0 10px 10px;
}
html[data-menu="stage"] #menu .menu-side > #vienna-chat.vc-collapsed .vc-form {
  border-top: 1px solid var(--st-line); border-radius: 10px;
}

/* tonight's setlist: the two daily cards */
html[data-menu="stage"] #menu .menu-set {
  background: var(--st-glass); border: 1px solid var(--st-line); border-left: 3px solid var(--st-cyan);
  border-radius: 10px; padding: 14px 18px 6px; backdrop-filter: blur(6px);
}
html[data-menu="stage"] #menu .menu-set:not(:has(.bounty-card:not(.hidden))) { display: none; }
html[data-menu="stage"] #menu .menu-set .bounty-card {
  margin: 0; padding: 14px 0; border: none; border-bottom: 1px solid var(--st-line); border-radius: 0;
  background: none; gap: 14px; align-items: center;
}
html[data-menu="stage"] #menu .menu-set .bounty-card:last-child { border-bottom: none; }
html[data-menu="stage"] #menu .menu-set .bounty-card:hover { background: none; border-color: var(--st-line); }
html[data-menu="stage"] #menu .menu-set .db-ico {
  flex: none; width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center;
  background: var(--st-glass2); font-size: 22px;
}
html[data-menu="stage"] #menu .menu-set .db-body b {
  font-family: var(--st-cond); font-weight: 700; font-size: 21px; letter-spacing: .02em; line-height: 1;
  text-transform: uppercase; color: var(--st-white); margin-bottom: 4px;
}
html[data-menu="stage"] #menu .menu-set .db-body small { font-size: 13px; color: var(--st-dim); font-weight: 500; line-height: 1.4; }
html[data-menu="stage"] #menu .menu-set .bounty-card.claimed .db-body b { color: var(--st-dim); }
html[data-menu="stage"] #menu .menu-set .bounty-card.claimed .db-ico { color: var(--st-green); }
html[data-menu="stage"] #menu .menu-set .chest-card .db-body b { color: var(--st-white); }
html[data-menu="stage"] #menu .menu-set .chest-card.claimed .db-body b { color: var(--st-dim); }

/* the keybed: seven white keys, one octave, five decorative black keys */
html[data-menu="stage"] #menu .menu-stack {
  position: relative; display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; width: 100%; margin: 8px 0 0; padding-top: 22px;
}
html[data-menu="stage"] #menu .menu-stack::before {
  content: "Menu"; position: absolute; top: 0; left: 0; right: 0; text-align: center;
  font-family: var(--st-cond); font-weight: 700; font-size: 12px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--st-dim);
}
html[data-menu="stage"] #menu .menu-stack .mode-btn {
  position: relative; height: 112px; width: 100%; margin: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 0 4px 12px; border: none; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #e9edf3, #c9d0da); color: #1a2230;
  font-family: var(--st-cond); font-weight: 700; font-size: 15px; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 6px 0 #8d96a5, inset 0 -10px 20px rgba(0,0,0,.08);
  transition: background .1s, box-shadow .1s, transform .1s;
}
html[data-menu="stage"] #menu .menu-stack .mode-btn:hover:not(:disabled) {
  transform: none; background: linear-gradient(180deg, var(--st-cyan2), var(--st-cyan));
  border: none; box-shadow: 0 6px 0 var(--st-cyan-deep), 0 0 30px rgba(52,211,255,.5);
}
html[data-menu="stage"] #menu .menu-stack .mode-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--st-cyan-deep); }
html[data-menu="stage"] #menu .menu-stack .bk {
  position: absolute; top: 22px; width: calc(100%/7*.6); height: 62px; z-index: 2;
  background: linear-gradient(180deg, #232936, #0d1017); border-radius: 0 0 5px 5px;
  box-shadow: 0 4px 0 #000; pointer-events: none;
}
html[data-menu="stage"] #menu .menu-stack .bk.b1 { left: calc(100%/7*1 - 100%/7*.3); }
html[data-menu="stage"] #menu .menu-stack .bk.b2 { left: calc(100%/7*2 - 100%/7*.3); }
html[data-menu="stage"] #menu .menu-stack .bk.b4 { left: calc(100%/7*4 - 100%/7*.3); }
html[data-menu="stage"] #menu .menu-stack .bk.b5 { left: calc(100%/7*5 - 100%/7*.3); }
html[data-menu="stage"] #menu .menu-stack .bk.b6 { left: calc(100%/7*6 - 100%/7*.3); }
/* the admin door is not a key: a strip under the octave */
html[data-menu="stage"] #menu .menu-stack #admin-btn {
  grid-column: 1 / -1; height: auto; flex-direction: row; padding: 10px; margin-top: 10px;
  border-radius: 8px; border: 1px solid var(--st-line); background: var(--st-glass2); color: var(--st-white);
  box-shadow: none;
}
html[data-menu="stage"] #menu .menu-stack #admin-note { grid-column: 1 / -1; font-family: var(--st-sans); }
html[data-menu="stage"] #menu .menu-badge { top: 8px; right: 8px; }

/* small links */
html[data-menu="stage"] #menu .menu-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
html[data-menu="stage"] #menu .menu-foot .small-row { margin: 0; }
html[data-menu="stage"] #menu .menu-foot .help-row { margin: 0; gap: 4px; justify-content: flex-end; }
html[data-menu="stage"] #menu .menu-foot .small-btn {
  margin: 0; background: none; border: 1px solid var(--st-line); border-radius: 6px;
  font-family: var(--st-cond); font-weight: 700; font-size: 13px; letter-spacing: .15em; text-transform: uppercase; color: var(--st-dim);
}
html[data-menu="stage"] #menu .menu-foot .small-btn:hover { color: var(--st-cyan); border-color: var(--st-cyan); background: none; }
html[data-menu="stage"] #menu .menu-foot .bug-link { border: none; }
html[data-menu="stage"] #menu .panel > .hint {
  margin-top: 14px; font-family: var(--st-cond); font-weight: 600; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--st-dim); opacity: 1; text-align: center;
}

/* phone: one column, the keys still an octave */
@media (max-width: 1080px) {
  html[data-menu="stage"] #menu .panel.menu-panel { padding: 18px 14px 28px; }
  html[data-menu="stage"] #menu .menu-cols {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "left" "mid" "play" "gap" "set" "keys" "foot";
    gap: 14px; margin-top: 18px;
  }
  html[data-menu="stage"] #menu .menu-cols:not(:has(.menu-leftcol > :not(.hidden))) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "mid" "play" "gap" "set" "keys" "foot";
  }
  html[data-menu="stage"] #menu .menu-leftcol, html[data-menu="stage"] #menu .menu-right { width: 100%; }
  html[data-menu="stage"] #menu #play-btn.big-btn { min-height: 170px; font-size: 72px; }
  html[data-menu="stage"] #menu .menu-stack .mode-btn {
    height: 92px; font-size: 9.5px; letter-spacing: 0; padding: 0 2px 8px;
    white-space: normal; line-height: 1.15; text-align: center; word-break: break-word;
  }
  html[data-menu="stage"] #menu .menu-stack .bk { height: 48px; }
  html[data-menu="stage"] #menu .menu-under .mode-btn { height: 46px; font-size: 13px; letter-spacing: .06em; }
  html[data-menu="stage"] #menu .menu-under .mode-btn.hero { height: 68px; font-size: 20px; padding: 0 12px; }
  html[data-menu="stage"] #menu .menu-under .mode-btn.adv { height: 72px; font-size: 32px; padding: 0 0 0 10px; }
  html[data-menu="stage"] #menu .menu-foot { justify-content: center; }
  html[data-menu="stage"] #menu .menu-foot .help-row { width: 100%; flex-wrap: wrap; justify-content: center; row-gap: 2px; }
  html[data-menu="stage"] #menu .menu-foot .help-row .small-btn { flex: 0 1 auto; font-size: 11px; letter-spacing: .04em; white-space: nowrap; padding: 6px 4px; }
}

/* ------------------------------------------------------- the piece page */
html[data-menu="stage"] #piece-page { font-family: var(--st-sans); background: rgba(7,8,12,.96); }
html[data-menu="stage"] #piece-page .pp-panel { width: min(94vw, 640px); max-width: 640px; }
html[data-menu="stage"] #piece-page .cs-title {
  font-family: var(--st-cond); font-weight: 800; font-size: 40px; line-height: .95; text-transform: uppercase;
}
html[data-menu="stage"] #piece-page .cs-by {
  font-family: var(--st-cond); font-weight: 600; font-size: 18px; letter-spacing: .1em; text-transform: uppercase; color: var(--st-cyan);
}
html[data-menu="stage"] #piece-page .pp-speed-btn,
html[data-menu="stage"] #piece-page .pp-mode-grid .mode-btn,
html[data-menu="stage"] #piece-page .small-btn {
  font-family: var(--st-cond); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: var(--st-glass2); border: 1px solid var(--st-line); border-radius: 8px; color: var(--st-white);
}
html[data-menu="stage"] #piece-page .pp-speed-btn.on { background: var(--st-cyan); color: #021018; border-color: transparent; }
html[data-menu="stage"] #piece-page .pp-mode-grid .mode-btn { font-size: 15px; }
html[data-menu="stage"] #piece-page .pp-mode-grid .mode-btn:hover:not(:disabled) { border-color: var(--st-cyan); color: var(--st-cyan); background: var(--st-glass2); transform: none; }
html[data-menu="stage"] #piece-page #song-play-btn.big-btn {
  position: relative; overflow: hidden; border-radius: 10px;
  background: var(--st-cyan); color: #021018;
  font-family: var(--st-cond); font-weight: 800; font-style: italic; font-size: 40px; letter-spacing: .03em; text-transform: uppercase;
  box-shadow: 0 0 50px rgba(52,211,255,.4), 0 8px 0 var(--st-cyan-deep);
}
html[data-menu="stage"] #piece-page #song-play-btn.big-btn::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-55deg, transparent 0 22px, rgba(0,0,0,.06) 22px 44px);
}
html[data-menu="stage"] #piece-page #song-play-btn.big-btn:hover { transform: translateY(-2px); box-shadow: 0 0 70px rgba(52,211,255,.55), 0 10px 0 var(--st-cyan-deep); }
html[data-menu="stage"] #piece-page .float-back {
  font-family: var(--st-cond); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--st-cyan);
  background: none; border: none;
}
html[data-menu="stage"] #piece-page .pp-sections, html[data-menu="stage"] #piece-page .fp-board {
  background: var(--st-glass); border: 1px solid var(--st-line); border-radius: 10px;
}