/* Fonts are bundled (portals require self-contained packages). OFL licences in /fonts. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./anton-latin-400-normal-Byf51wtH.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./anton-latin-ext-400-normal-SyiqE2Jt.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./chakra-petch-latin-500-normal-BR1ody1F.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./chakra-petch-latin-600-normal-DVQm9bgb.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./chakra-petch-latin-700-normal-CnDBPjkL.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./chakra-petch-latin-ext-500-normal-gA6791b0.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./chakra-petch-latin-ext-600-normal-CdGvbdDU.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./chakra-petch-latin-ext-700-normal-DAkvJhej.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./bungee-latin-400-normal-Dfnurram.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./bungee-latin-ext-400-normal-DWzJMwsA.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./teko-latin-500-normal-CnS-PWFz.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./teko-latin-600-normal-Cj5MAY47.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./teko-latin-700-normal-D19WDQ7P.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./teko-latin-ext-500-normal-Dt5H6HwT.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./teko-latin-ext-600-normal-DsmVd8W9.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./teko-latin-ext-700-normal-C-gilgl0.woff2) format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* =====================================================================================================
   RIFFVOLT UI — "liquid glass" over a neon void.
   Frosted panels on a deep navy/indigo gradient, cyan for navigation and selection, magenta → violet for the
   one primary action on each screen, the song's own colour (--c) for its art and ambient glow.
   Display: Teko (condensed, slanted, uppercase) · UI text: Chakra Petch.
   ===================================================================================================== */
:root {
  --void: #04050d;
  --navy: #0a0f2c;
  --indigo: #1a1652;
  --cyan: #2bd9ff;
  --cyan-2: #0a8cff;
  --magenta: #ff2e93;
  --violet: #8b5cff;
  --ink: #eef2ff;
  --mute: rgba(226, 232, 255, 0.7);
  --faint: rgba(226, 232, 255, 0.46);
  --line: rgba(255, 255, 255, 0.14);
  --line-2: rgba(255, 255, 255, 0.26);
  --volt: #ffb627;
  --hot: #ff3d6e;
  --lime: #7cff4f;
  --c: var(--cyan);
  --c2: var(--magenta);
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --display: Teko, 'Chakra Petch', Impact, sans-serif;
  --ui: 'Chakra Petch', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  --glass-fill: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.13),
    rgba(255, 255, 255, 0.05) 38%,
    rgba(255, 255, 255, 0.025) 72%,
    rgba(255, 255, 255, 0.06)
  );
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 30px 70px -28px rgba(0, 0, 0, 0.8);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --ease-out: cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-pop: cubic-bezier(0.2, 1.5, 0.4, 1);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  height: 100%;
  background: var(--void);
  color: var(--ink);
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  font-family: var(--ui);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
#game {
  position: fixed;
  left: 0;
  top: 0;
  display: block;
  touch-action: none;
}
#ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
#ui > * {
  pointer-events: auto;
}
button {
  font: inherit;
  color: inherit;
}
[hidden] {
  display: none !important;
}
svg use {
  pointer-events: none;
}
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 7px;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  background: rgba(255, 255, 255, 0.08);
  font: 600 12px/1 var(--ui);
  color: var(--ink);
  font-style: normal;
  letter-spacing: 0;
}

/* ---------- shared materials ---------- */
.glass {
  position: relative;
  background: var(--glass-fill);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 70% at 12% -20%, rgba(255, 255, 255, 0.16), transparent 55%);
}
.glass > * {
  position: relative;
}
.glass-pill {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 10px 30px -12px rgba(0, 0, 0, 0.7);
}
/* weak machines: no blur, same look */
body.lowfx .glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: linear-gradient(155deg, rgba(36, 42, 92, 0.92), rgba(14, 18, 46, 0.94));
}
body.lowfx :is(.go-panel, .rk-panel) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: linear-gradient(155deg, rgba(36, 42, 92, 0.94), rgba(14, 18, 46, 0.96));
}

/* slanted banner, like a stage marquee strip */
.ribbon {
  --r1: var(--cyan-2);
  --r2: var(--cyan);
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 40px;
  margin: 0;
  padding: 4px 30px 0 22px;
  font: 600 28px/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, var(--r1), var(--r2));
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  transform: skewX(-4deg);
}
.ribbon > span {
  display: inline-block;
  transform: skewX(4deg);
}
.ribbon.cyan {
  --r1: #0a7dff;
  --r2: #34e0ff;
  filter: drop-shadow(0 6px 18px rgba(43, 217, 255, 0.45));
}
.ribbon.pink {
  --r1: #ff2e93;
  --r2: #a14dff;
  filter: drop-shadow(0 6px 18px rgba(255, 46, 147, 0.45));
}

/* ---------- backdrop (all screens except gameplay) ---------- */
#bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: none;
  background: radial-gradient(120% 90% at 50% -10%, #1f1c66 0%, #0c1238 40%, #05060f 78%);
}
body[data-scene='ui'] #bg {
  display: block;
}
#bg .bg-img {
  position: absolute;
  inset: -2%;
  background: var(--bg-url, none) center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.7s ease;
}
#bg.has-img .bg-img {
  opacity: 0.5;
}
#bg .glow {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
#bg .g1 {
  width: 75vmax;
  height: 75vmax;
  left: -32vmax;
  top: -8vmax;
  background: radial-gradient(
    circle,
    rgba(43, 217, 255, 0.34),
    rgba(43, 217, 255, 0.08) 38%,
    transparent 62%
  );
  animation: drift1 28s ease-in-out infinite alternate;
}
#bg .g2 {
  width: 80vmax;
  height: 80vmax;
  right: -34vmax;
  top: -22vmax;
  background: radial-gradient(
    circle,
    rgba(255, 46, 147, 0.32),
    rgba(255, 46, 147, 0.07) 40%,
    transparent 62%
  );
  animation: drift2 34s ease-in-out infinite alternate;
}
#bg .g3 {
  width: 60vmax;
  height: 60vmax;
  left: 50%;
  top: 45%;
  margin: -30vmax 0 0 -30vmax;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--c) 22%, transparent),
    transparent 60%
  );
  transition: background 0.8s;
}
#bg .floor {
  position: absolute;
  left: -60%;
  right: -60%;
  bottom: -12%;
  height: 58%;
  background-image:
    linear-gradient(rgba(110, 140, 255, 0.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 140, 255, 0.26) 1px, transparent 1px);
  background-size: 86px 86px;
  transform: perspective(720px) rotateX(70deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 78%);
  mask-image: linear-gradient(to top, #000 8%, transparent 78%);
}
#bg .vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 85% 75% at 50% 45%,
    transparent 45%,
    rgba(2, 3, 10, 0.78) 100%
  );
}
@keyframes drift1 {
  to {
    transform: translate(14vmax, 10vmax) scale(1.08);
  }
}
@keyframes drift2 {
  to {
    transform: translate(-12vmax, 12vmax) scale(1.1);
  }
}

/* ---------- wordmark (neon) ---------- */
.wordmark {
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font: 700 clamp(84px, 17vw, 190px) / 0.78 var(--display);
  font-style: italic;
  letter-spacing: 0.01em;
}
.wordmark .wm-a {
  color: #ffe3f0;
  text-shadow:
    0 0 1px #fff,
    0 0 8px #ff2e93,
    0 0 22px #ff2e93,
    0 0 46px rgba(255, 46, 147, 0.7),
    0 0 90px rgba(255, 46, 147, 0.35);
}
.wordmark .wm-b {
  color: #e2fbff;
  text-shadow:
    0 0 1px #fff,
    0 0 8px #2bd9ff,
    0 0 22px #2bd9ff,
    0 0 46px rgba(43, 217, 255, 0.7),
    0 0 90px rgba(43, 217, 255, 0.35);
}
.wordmark .wm-v {
  height: 0.86em;
  width: 0.62em;
  margin: 0 0.02em 0.06em;
  fill: url(#vg);
  filter: drop-shadow(0 0 6px #2bd9ff) drop-shadow(0 0 18px rgba(43, 217, 255, 0.8));
  transform: skewX(-8deg);
}
.wordmark.small {
  font-size: 44px;
  justify-content: flex-start;
}
.wordmark.small .wm-a {
  text-shadow:
    0 0 6px #ff2e93,
    0 0 18px rgba(255, 46, 147, 0.6);
}
.wordmark.small .wm-b {
  text-shadow:
    0 0 6px #2bd9ff,
    0 0 18px rgba(43, 217, 255, 0.6);
}
.wordmark.small .wm-v {
  filter: drop-shadow(0 0 5px #2bd9ff);
}

/* ---------- screens & overlays ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
}
.screen.show {
  display: flex;
}
.overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(3, 4, 14, 0.6);
  padding: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b))
    calc(16px + var(--safe-l));
  z-index: 10;
}
.overlay.show {
  display: flex;
  animation: fade 0.18s ease-out;
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- splash ---------- */
#splash {
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.splash-inner {
  position: relative;
  text-align: center;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.splash-inner > *:not(#logo-fx) {
  position: relative;
  z-index: 1;
}
#logo-fx {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1000px, 120vw);
  height: 380px;
  transform: translate(-50%, -64%);
  pointer-events: none;
  z-index: 0;
}
.tagline {
  margin: 26px 0 0;
  font: 500 clamp(18px, 3vw, 26px) / 1 var(--display);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mute);
}
.tap {
  margin: 9vh 0 0;
  padding: 14px 34px 10px;
  font: 600 clamp(24px, 4.4vw, 34px) / 1 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.tap .tap-keys {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .tap .tap-keys {
    display: inline;
  }
  .tap .tap-touch {
    display: none;
  }
}
#splash.show .wordmark {
  animation: neonOn 1.3s steps(1, end) both;
}
#splash.show .tagline {
  animation: rise 0.6s 0.9s both;
}
#splash.show .tap {
  animation:
    rise 0.5s 1.1s both,
    breathe 2.2s 1.7s ease-in-out infinite;
}
@keyframes neonOn {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  16% {
    opacity: 0.15;
  }
  24% {
    opacity: 1;
  }
  30% {
    opacity: 0.4;
  }
  36%,
  100% {
    opacity: 1;
  }
}
@keyframes breathe {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 0 0 0 rgba(43, 217, 255, 0);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 0 34px 2px rgba(43, 217, 255, 0.35);
  }
}
#splash.leaving {
  animation: leave 0.42s ease-in forwards;
}
@keyframes leave {
  to {
    opacity: 0;
    transform: scale(1.05);
  }
}
.lang-chip {
  position: absolute;
  right: calc(16px + var(--safe-r));
  bottom: calc(16px + var(--safe-b));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.lang-chip svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    transform 0.1s,
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.2s,
    filter 0.15s;
}
.btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: none;
}
.btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
  border-color: var(--line-2);
}
.btn:active {
  transform: scale(0.97);
}
.btn.primary {
  border: none;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(90deg, #ff2e93, #b14dff 60%, #7a5cff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15),
    0 14px 36px -12px rgba(255, 46, 147, 0.9);
  font: 600 26px/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 14px;
}
.btn.primary:hover {
  filter: brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 18px 46px -10px rgba(255, 46, 147, 1);
}
.btn.primary::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  left: -40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn.primary:hover::after,
.btn.primary:focus-visible::after {
  animation: shine 0.9s ease-out;
}
@keyframes shine {
  from {
    left: -40%;
  }
  to {
    left: 130%;
  }
}
.btn.primary svg {
  width: 20px;
  height: 20px;
  margin-top: -4px;
}
.btn.ghost {
  background: transparent;
  box-shadow: none;
  color: var(--mute);
}
.btn.ghost:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}
.btn.sm {
  min-height: 38px;
  padding: 6px 15px;
  font-size: 13px;
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.icon-btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.1s;
}
.icon-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.icon-btn:hover {
  border-color: var(--cyan);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 18px -2px rgba(43, 217, 255, 0.6);
}
.icon-btn:active {
  transform: scale(0.94);
}
:is(
  .btn,
  .icon-btn,
  .diff,
  .tabs button,
  .seg button,
  .toggle,
  .keys button,
  .lang-chip,
  .lang-grid button
):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.song:focus,
.menu-item:focus {
  outline: none;
}
.song:focus-visible {
  box-shadow: 0 0 0 2px var(--cyan);
}
.menu-item:focus-visible {
  box-shadow: 0 0 0 2px var(--cyan);
}

/* ---------- setlist screen ---------- */
#menu {
  flex-direction: column;
  padding: calc(16px + var(--safe-t)) calc(26px + var(--safe-r)) calc(14px + var(--safe-b))
    calc(26px + var(--safe-l));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.topbar {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.picks {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 2px 16px 0;
  font: 600 24px/1 var(--display);
  color: #ffe1a0;
  font-variant-numeric: tabular-nums;
}
.picks svg {
  width: 17px;
  height: 17px;
  fill: var(--volt);
  margin-top: -3px;
  filter: drop-shadow(0 0 6px rgba(255, 182, 39, 0.8));
}

.stagefront {
  width: 100%;
  max-width: 1320px;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
  padding: 20px 0;
}
.setlist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.list-panel {
  padding: 8px;
}
.songs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.song {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 8px 16px 8px 8px;
  border-radius: 14px;
  cursor: pointer;
  transition:
    background 0.2s,
    box-shadow 0.25s,
    transform 0.2s var(--ease-out);
}
.song .thumb {
  grid-row: span 2;
  width: 58px;
  height: 58px;
  border-radius: 10px;
  overflow: hidden;
  background: #0b0d20;
  box-shadow:
    0 8px 18px -6px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.14);
}
.song .thumb canvas,
.song .thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.song .t {
  align-self: end;
  font: 600 28px/0.86 var(--display);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding: 6px 0.18em 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song .s {
  align-self: start;
  grid-column: 2;
  font-size: 13px;
  color: var(--mute);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song .r {
  grid-row: 1 / span 2;
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.song .len {
  font: 600 26px/0.9 var(--display);
  font-style: italic;
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.song .bpm {
  font-size: 11px;
  font-weight: 700;
  color: var(--faint);
  letter-spacing: 0.06em;
}
.song .pb {
  font: 600 18px/1 var(--display);
  color: var(--cyan);
}
.song:hover {
  background: rgba(255, 255, 255, 0.07);
}
.song.sel {
  background: linear-gradient(
    90deg,
    rgba(43, 217, 255, 0.9),
    rgba(10, 125, 255, 0.62) 55%,
    rgba(10, 125, 255, 0.18)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 10px 34px -10px rgba(43, 217, 255, 0.85);
}
.song.sel .s,
.song.sel .bpm {
  color: rgba(255, 255, 255, 0.88);
}
.song.sel .pb {
  color: #fff;
}
.song .eqm {
  display: none;
}
.song.playing .eqm {
  display: inline-flex;
  margin-left: 8px;
  vertical-align: -1px;
}
.song.playing .eqm i {
  background: #fff;
}
.setlist-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* the selected song: cover, a CD that slides out and spins while the preview plays, details on glass */
.marquee {
  --h: clamp(170px, 25vh, 300px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.cover-stage {
  position: relative;
  height: var(--h);
  width: calc(var(--h) * 1.78);
  max-width: 100%;
}
.cover {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: #0b0d20;
  box-shadow:
    0 34px 60px -24px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 70px -12px color-mix(in srgb, var(--c) 75%, transparent);
}
.cover canvas,
.cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.26), transparent 38%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.25), transparent 30%);
  pointer-events: none;
}
/* the CD: tilted in perspective with a visible edge (thickness), a soft contact shadow, and a fixed specular
   highlight that stays put while the printed face spins underneath it */
.disc {
  position: absolute;
  z-index: 1;
  top: 4%;
  left: calc(var(--h) * 0.06);
  width: calc(var(--h) * 0.92);
  height: calc(var(--h) * 0.92);
  transition: transform 0.75s var(--ease-out);
  perspective: 900px;
}
.disc::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 2%;
  bottom: -7%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent);
  filter: blur(4px);
}
.disc-3d {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: rotateY(-24deg) rotateX(9deg);
  transform-style: preserve-3d;
  box-shadow:
    1px 0 0 #dfe6f5,
    2px 1px 0 #c3cbe0,
    3px 1px 0 #a6afc7,
    4px 2px 0 #8a93ad,
    5px 2px 0 #6f7892,
    6px 3px 0 #575f78,
    10px 10px 24px rgba(0, 0, 0, 0.55);
}
.disc-3d canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
.disc-gloss {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    linear-gradient(
      118deg,
      transparent 28%,
      rgba(255, 255, 255, 0.34) 44%,
      rgba(255, 255, 255, 0.08) 52%,
      transparent 62%
    ),
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.3), transparent 32%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset -6px -8px 16px rgba(0, 0, 0, 0.25);
}
.cover-stage.out .disc {
  transform: translateX(calc(var(--h) * 0.72));
}
.cover-stage.spinning .disc canvas {
  animation: spin 3.4s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.mq-now {
  position: absolute;
  z-index: 3;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(4, 6, 20, 0.7);
  border: 1px solid rgba(43, 217, 255, 0.6);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.eq i {
  width: 3px;
  height: 12px;
  background: var(--cyan);
  border-radius: 1px;
  transform-origin: bottom;
  animation: eq 0.9s ease-in-out infinite;
}
.eq i:nth-child(2) {
  animation-delay: -0.3s;
}
.eq i:nth-child(3) {
  animation-delay: -0.6s;
}
.eq i:nth-child(4) {
  animation-delay: -0.15s;
}
.eq i:nth-child(5) {
  animation-delay: -0.45s;
}
@keyframes eq {
  0%,
  100% {
    transform: scaleY(0.25);
  }
  50% {
    transform: scaleY(1);
  }
}

.detail-panel {
  padding: clamp(16px, 2vw, 26px) clamp(20px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mq-title {
  margin: 0;
  font: 600 clamp(48px, 5.8vw, 86px) / 0.8 var(--display);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  padding: 0.1em 0.15em 0 0;
  background: linear-gradient(180deg, #ffffff 30%, color-mix(in srgb, var(--c) 55%, white) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 22px color-mix(in srgb, var(--c) 45%, transparent));
}
.mq-title.swap {
  animation: titleIn 0.42s var(--ease-out);
}
@keyframes titleIn {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.mq-stats {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mq-stats div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
}
.mq-stats dt {
  font-size: 11px;
  color: var(--faint);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mq-stats dd {
  margin: 0;
  font: 600 22px/1 var(--display);
  font-variant-numeric: tabular-nums;
}

.diffs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.diff {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.2s;
}
.diff:hover {
  border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.08);
}
.diff[aria-checked='true'] {
  border-color: rgba(43, 217, 255, 0.9);
  background: linear-gradient(135deg, rgba(43, 217, 255, 0.28), rgba(10, 125, 255, 0.12));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 24px -6px rgba(43, 217, 255, 0.7);
}
.diff .dn {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.diff .dn > span {
  font: 600 26px/0.9 var(--display);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: 3px;
}
.diff .dn small {
  font-size: 12px;
  color: var(--faint);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.meter {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
}
.meter i {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
}
.meter i.on {
  background: rgba(255, 255, 255, 0.5);
}
.diff[aria-checked='true'] .meter i.on {
  background: linear-gradient(90deg, #8ff0ff, var(--cyan));
  box-shadow: 0 0 8px rgba(43, 217, 255, 0.8);
}

.mq-best {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  font-size: 14px;
  color: var(--mute);
}
.mq-best .g {
  font: 600 54px/0.8 var(--display);
  font-style: italic;
  padding-top: 6px;
  color: #fff;
  text-shadow: 0 0 18px color-mix(in srgb, var(--c) 80%, transparent);
}
.mq-best .k {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mq-best .k b {
  color: var(--ink);
  font: 600 26px/0.9 var(--display);
  font-variant-numeric: tabular-nums;
}
.mq-best .k small {
  font-size: 12px;
  color: var(--faint);
  font-weight: 600;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lime);
  border: 1px solid rgba(124, 255, 79, 0.45);
  background: rgba(124, 255, 79, 0.1);
}
.chip.ap {
  color: #ffd27a;
  border-color: rgba(255, 210, 122, 0.5);
  background: rgba(255, 210, 122, 0.12);
}
.play-cta {
  min-height: 68px;
  width: 100%;
  font-size: 38px;
}
.play-cta svg {
  width: 24px;
  height: 24px;
}
.play-cta kbd {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
}
.first-run {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, rgba(43, 217, 255, 0.16), rgba(43, 217, 255, 0.04));
  border: 1px solid rgba(43, 217, 255, 0.4);
  font-weight: 600;
  font-size: 14px;
}
.first-run span {
  flex: 1 1 200px;
}
.first-run svg {
  width: 18px;
  height: 18px;
  fill: var(--cyan);
  flex: none;
}

.hints {
  flex: none;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  gap: 22px;
  color: var(--faint);
  font-size: 13px;
  font-weight: 600;
}
.hints > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* entrance: one orchestrated moment when the setlist appears */
#menu.enter .song {
  animation: rowIn 0.45s var(--ease-out) backwards;
  animation-delay: calc(var(--i) * 70ms + 80ms);
}
#menu.enter .marquee {
  animation: mqIn 0.6s var(--ease-out) backwards 0.05s;
}
#menu.enter .ribbon {
  animation: ribbonIn 0.5s var(--ease-out) backwards;
}
@keyframes rowIn {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
}
@keyframes mqIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
}
@keyframes ribbonIn {
  from {
    opacity: 0;
    transform: skewX(-4deg) translateX(-30px);
  }
}

/* ---------- song intro (loading) ---------- */
.overlay.intro {
  background: var(--void);
  padding: 0;
}
.intro-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.intro-bg canvas,
.intro-bg img {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  display: block;
  opacity: 0.6;
}
.intro-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(4, 5, 13, 0.9) 0%,
      rgba(4, 5, 13, 0.5) 50%,
      rgba(4, 5, 13, 0.82) 100%
    ),
    radial-gradient(
      ellipse at 30% 50%,
      color-mix(in srgb, var(--c) 18%, transparent),
      transparent 60%
    );
}
.overlay.intro.show .intro-bg canvas,
.overlay.intro.show .intro-bg img {
  animation: kenburns 9s ease-out both;
}
@keyframes kenburns {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}
.intro-card {
  position: relative;
  width: min(1180px, calc(100% - 48px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.intro-cover {
  --h: clamp(220px, 40vh, 400px);
}
.overlay.intro.show .intro-cover .cover {
  animation: coverIn 0.6s var(--ease-out) both;
}
.overlay.intro.show .intro-cover .disc {
  animation: discOut 0.9s 0.25s var(--ease-out) both;
}
@keyframes coverIn {
  from {
    opacity: 0;
    transform: translateX(-40px) scale(0.96);
  }
}
@keyframes discOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--h) * 0.72));
  }
}
.intro-text {
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.overlay.intro.show .intro-text {
  animation: rise 0.5s 0.1s var(--ease-out) both;
}
.load-title {
  font: 600 clamp(56px, 7.2vw, 112px) / 0.8 var(--display);
  font-style: italic;
  text-transform: uppercase;
  padding-top: 0.1em;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}
.intro-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.intro-meta > span:not(:empty) {
  padding: 6px 13px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  font: 600 20px/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.intro-meta .intro-diff {
  background: linear-gradient(90deg, rgba(43, 217, 255, 0.35), rgba(10, 125, 255, 0.2)) !important;
  border-color: rgba(43, 217, 255, 0.7) !important;
}
.loadbar {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-top: 6px;
}
.loadbar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan-2), var(--cyan) 50%, var(--magenta));
  box-shadow: 0 0 18px rgba(43, 217, 255, 0.8);
  transition: width 0.25s var(--ease-out);
}
.loadbar i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  background-size: 220% 100%;
  animation: sheen 1.1s linear infinite;
}
@keyframes sheen {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}
.load-status {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-weight: 600;
  font-size: 14px;
  color: var(--mute);
}
.load-status #load-pct {
  font: 600 26px/1 var(--display);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.intro-tip {
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--cyan);
  color: var(--mute);
  font-size: 15px;
  line-height: 1.45;
}
.err {
  color: #ff8db5;
  margin: 0;
  font-weight: 600;
}
.intro .row {
  justify-content: flex-start;
  margin-top: 2px;
}

/* ---------- HUD ---------- */
.hud-btn {
  position: absolute;
  top: calc(12px + var(--safe-t));
  right: calc(12px + var(--safe-r));
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 8px 20px -8px rgba(0, 0, 0, 0.8);
  display: none;
  place-items: center;
  cursor: pointer;
  z-index: 5;
}
.hud-btn.show {
  display: grid;
}
.hud-btn svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}

/* ---------- pause ---------- */
#pause {
  background: linear-gradient(
    90deg,
    rgba(3, 4, 14, 0.88),
    rgba(3, 4, 14, 0.55) 60%,
    rgba(3, 4, 14, 0.35)
  );
  justify-content: flex-start;
  padding-left: calc(clamp(24px, 8vw, 130px) + var(--safe-l));
}
.pause-wrap {
  width: min(440px, 100%);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#pause.show .pause-wrap {
  animation: slideIn 0.34s var(--ease-out) both;
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
}
.pause-h {
  height: 48px;
  font-size: 36px;
  margin-left: -6px;
}
.pause-song {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: 4px;
}
.pause-song span:first-child {
  font: 600 34px/0.85 var(--display);
  font-style: italic;
  text-transform: uppercase;
  padding-top: 4px;
}
.pause-song span:last-child {
  color: var(--cyan);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pause-prog {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.pause-prog i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan-2), var(--cyan));
  box-shadow: 0 0 10px var(--cyan);
}
.pause-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 4px 18px 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font: 600 26px/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.15s var(--ease-out);
}
.menu-item svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  opacity: 0.85;
  margin-top: -4px;
}
.menu-item kbd,
.menu-item .pg {
  margin-left: auto;
  margin-top: -4px;
}
.menu-item:hover,
.menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--line);
  transform: translateX(4px);
}
.menu-item.primary {
  background: linear-gradient(90deg, rgba(43, 217, 255, 0.85), rgba(10, 125, 255, 0.5));
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 26px -10px rgba(43, 217, 255, 0.8);
}
.menu-item.primary:hover {
  filter: brightness(1.1);
}

/* ---------- results ---------- */
#results {
  align-items: flex-start;
  justify-content: center;
  padding: calc(18px + var(--safe-t)) calc(22px + var(--safe-r)) calc(18px + var(--safe-b))
    calc(22px + var(--safe-l));
  overflow-y: auto;
}
#res-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.res-wrap {
  position: relative;
  width: min(1000px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.res-head {
  display: flex;
  align-items: center;
  gap: 20px;
}
.res-cover {
  position: relative;
  flex: none;
  width: clamp(84px, 11vw, 120px);
  height: auto;
  aspect-ratio: 1;
}
.res-titles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.res-song {
  margin: 0;
  font: 600 clamp(44px, 6vw, 76px) / 0.82 var(--display);
  font-style: italic;
  text-transform: uppercase;
  padding: 0.08em 0.2em 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.res-diff {
  align-self: flex-start;
  padding: 5px 12px 3px;
  border-radius: 999px;
  border: 1px solid rgba(43, 217, 255, 0.7);
  background: rgba(43, 217, 255, 0.15);
  color: #bff3ff;
  font: 600 18px/1 var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.res-hero {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  padding: 20px clamp(20px, 3vw, 36px);
}
.grade-plate {
  position: relative;
  flex: none;
  width: clamp(150px, 20vw, 200px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 40%,
    color-mix(in srgb, var(--c) 30%, rgba(10, 14, 40, 0.9)),
    rgba(6, 8, 24, 0.95) 70%
  );
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent),
    0 0 50px -6px color-mix(in srgb, var(--c) 70%, transparent);
}
.grade {
  font: 700 clamp(120px, 16vw, 170px) / 0.8 var(--display);
  font-style: italic;
  padding-top: 0.12em;
  color: #fff;
  text-shadow:
    0 0 2px #fff,
    0 0 18px var(--c),
    0 0 44px var(--c);
  transform: scale(0.3);
  opacity: 0;
}
.grade.reveal {
  animation: gradeIn 0.6s var(--ease-pop) forwards;
}
@keyframes gradeIn {
  0% {
    transform: scale(2.6) rotate(-10deg);
    opacity: 0;
  }
  60% {
    transform: scale(0.92) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
.res-nums {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.res-acc {
  font: 600 clamp(72px, 10vw, 120px) / 0.82 var(--display);
  font-variant-numeric: tabular-nums;
  padding-top: 0.1em;
}
.res-acc-l {
  color: var(--faint);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.res-kv {
  margin: 10px 0 0;
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
}
.res-kv div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.res-kv dt {
  font-size: 12px;
  color: var(--faint);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.res-kv dd {
  margin: 0;
  font: 600 38px/0.9 var(--display);
  font-variant-numeric: tabular-nums;
}
.res-flags {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  min-height: 30px;
  margin-top: 8px;
}
.res-best {
  font-weight: 700;
  font-size: 14px;
  color: var(--mute);
}
.res-best.new {
  padding: 6px 14px 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7cff4f, #2bd9ff);
  color: #04140a;
  font: 600 20px/1 var(--display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  animation: ribbonPop 0.5s 0.9s var(--ease-pop) both;
}
@keyframes ribbonPop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.badges {
  display: flex;
  gap: 6px;
}
.badges .chip {
  animation: ribbonPop 0.45s 1.05s both;
}
.res-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.res-detail section {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.res-detail h3 {
  margin: 0;
  font: 600 24px/1 var(--display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);
}
.jbars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jbars li {
  display: grid;
  grid-template-columns: 80px 1fr 56px;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
}
.jbars i {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.jbars b {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width 0.9s var(--ease-out);
}
.jbars em {
  font-style: normal;
  text-align: right;
  font: 600 26px/1 var(--display);
  font-variant-numeric: tabular-nums;
}
.j-perfect b {
  background: linear-gradient(90deg, #ffd36b, #fff3c4);
}
.j-perfect span {
  color: #ffd36b;
}
.j-great b {
  background: #5ff2ff;
}
.j-great span {
  color: #5ff2ff;
}
.j-good b {
  background: #9dff6a;
}
.j-good span {
  color: #9dff6a;
}
.j-miss b {
  background: #ff3d6e;
}
.j-miss span {
  color: #ff6f8f;
}
.res-small {
  margin: 2px 0 0;
  color: var(--faint);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
}
.res-small b {
  color: var(--ink);
}
.res-small .sep {
  width: 12px;
}
#res-hist {
  width: 100%;
  height: 84px;
  display: block;
}
.hist-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--faint);
  font-weight: 600;
  margin-top: -4px;
}
.res-timing-msg {
  margin: 0;
  font-size: 14px;
  color: var(--mute);
  line-height: 1.4;
  min-height: 1.4em;
}
.res-timing-msg b {
  color: var(--ink);
}
.res-timing .btn {
  align-self: flex-start;
}
.res-picks {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: #ffe1a0;
  min-height: 36px;
}
.res-picks .p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 26px/1 var(--display);
}
.res-picks svg {
  width: 18px;
  height: 18px;
  fill: var(--volt);
}
.res-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.res-actions .btn {
  min-width: 160px;
}
.res-actions .btn.primary {
  font-size: 28px;
}
#results.show .res-head {
  animation: rise 0.4s both;
}
#results.show .res-hero {
  animation: rise 0.45s 0.1s var(--ease-out) both;
}
#results.show .res-detail section {
  animation: rise 0.45s var(--ease-out) both;
}
#results.show .res-detail section:nth-child(1) {
  animation-delay: 0.55s;
}
#results.show .res-detail section:nth-child(2) {
  animation-delay: 0.65s;
}
#results.show .res-actions,
#results.show .res-picks {
  animation: rise 0.4s 0.95s both;
}

/* ---------- panels (settings, gear, calibration, language) ---------- */
.panel {
  width: min(580px, 100%);
  max-height: 100%;
  padding: 24px 26px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.overlay.modal {
  background: rgba(3, 4, 14, 0.55);
}
.overlay.show .panel {
  animation: pop 0.28s var(--ease-pop) both;
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
}
.panel.center {
  text-align: center;
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.panel-head .panel-title {
  margin: 0;
  flex: 1;
}
.panel-title {
  margin: 0 0 12px;
  font: 600 44px/0.85 var(--display);
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-top: 0.1em;
}
.panel h3 {
  margin: 18px 0 10px;
  font: 600 22px/1 var(--display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);
}
.row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}
.help {
  color: var(--faint);
  font-size: 13px;
  line-height: 1.45;
  margin: 6px 0 0;
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs button {
  flex: 1;
  padding: 9px 14px 6px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--mute);
  font: 600 21px/1 var(--display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.2s,
    color 0.2s;
}
.tabs button[aria-selected='true'] {
  color: #fff;
  background: linear-gradient(90deg, rgba(43, 217, 255, 0.85), rgba(10, 125, 255, 0.6));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 16px -6px rgba(43, 217, 255, 0.8);
}
.tab-page {
  display: none;
}
.tab-page.on {
  display: block;
  animation: fade 0.18s;
}
.settings-panel {
  width: min(620px, 100%);
  min-height: min(560px, 100%);
}

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.set-row:last-child {
  border-bottom: none;
}
.set-row.col {
  flex-direction: column;
  align-items: stretch;
}
.set-row .row-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.set-row label {
  font-weight: 600;
}
.set-row select {
  background: rgba(10, 14, 40, 0.9);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
}
.slider {
  display: flex;
  align-items: center;
  gap: 10px;
}
.slider input[type='range'] {
  width: min(220px, 44vw);
  accent-color: var(--cyan);
}
.slider output,
.val {
  min-width: 48px;
  text-align: right;
  font: 600 22px/1 var(--display);
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.val.big {
  font-size: 28px;
  min-width: 90px;
  text-align: center;
}
.offset {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.toggle {
  flex: none;
  width: 54px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.08);
  position: relative;
  cursor: pointer;
}
.toggle::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #aab1cc;
  transition:
    transform 0.18s var(--ease-out),
    background 0.15s;
}
.toggle.on {
  background: linear-gradient(90deg, rgba(43, 217, 255, 0.7), rgba(10, 125, 255, 0.6));
  border-color: var(--cyan);
  box-shadow: 0 0 14px -2px rgba(43, 217, 255, 0.7);
}
.toggle.on::after {
  transform: translateX(24px);
  background: #fff;
}
.seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  flex: none;
}
.seg button {
  border: none;
  border-radius: 999px;
  background: transparent;
  padding: 7px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: var(--mute);
}
.seg button.on {
  background: linear-gradient(90deg, rgba(43, 217, 255, 0.85), rgba(10, 125, 255, 0.6));
  color: #fff;
}
.keys {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.keys button {
  flex: 1;
  min-height: 62px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  border-bottom-width: 4px;
  background: rgba(255, 255, 255, 0.07);
  font: 600 34px/1 var(--display);
  padding-top: 6px;
  cursor: pointer;
}
.keys button.wait {
  border-color: var(--cyan);
  animation: pulse 0.8s infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
.preview-dot {
  height: 26px;
  position: relative;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  display: none;
}
.preview-dot.show {
  display: block;
}
.preview-dot i {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.15;
  box-shadow: 0 0 18px var(--cyan);
}
.preview-dot i.flash {
  opacity: 1;
}
.lang-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.lang-grid button {
  padding: 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  font-weight: 600;
}
.lang-grid button.on {
  border-color: var(--cyan);
  color: #fff;
  background: rgba(43, 217, 255, 0.2);
}

.calib-pad {
  position: relative;
  height: 160px;
  display: grid;
  place-items: center;
  margin: 12px 0;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed var(--line-2);
  touch-action: none;
  cursor: pointer;
}
.calib-ring {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid var(--cyan);
  opacity: 0.4;
  box-shadow: 0 0 20px rgba(43, 217, 255, 0.5);
}
.calib-ring.hit {
  animation: ring 0.25s ease-out;
}
@keyframes ring {
  from {
    transform: scale(0.85);
    opacity: 1;
  }
  to {
    transform: scale(1.15);
    opacity: 0.4;
  }
}
.calib-count {
  position: absolute;
  font: 600 44px/1 var(--display);
}
.calib-line {
  position: relative;
  height: 24px;
  margin: 6px 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.calib-line i {
  position: absolute;
  top: 4px;
  width: 4px;
  height: 16px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--cyan);
}
.calib-line i.zero {
  left: 50%;
  background: rgba(255, 255, 255, 0.45);
}
.calib-result {
  min-height: 24px;
  font: 600 26px/1 var(--display);
}

.gear-panel {
  width: min(700px, 100%);
}
.shop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.item {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.item canvas {
  width: 100%;
  height: 78px;
  border-radius: 10px;
  background: #070a1c;
}
.item .nm {
  font-weight: 700;
  font-size: 14px;
}
.item.is-eq {
  border-color: var(--cyan);
  box-shadow: 0 0 18px -6px rgba(43, 217, 255, 0.8);
}
.item.is-eq::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}
.item.locked canvas {
  filter: grayscale(0.7) brightness(0.7);
}
.item .btn {
  width: 100%;
}
.item .btn.primary {
  font-size: 20px;
  min-height: 40px;
  padding-top: 10px;
}
.item .btn svg {
  width: 14px;
  height: 14px;
}

/* ---------- screen transition: a neon light sweep ---------- */
#wipe {
  position: fixed;
  inset: -10% -30%;
  z-index: 40;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #070a1e 16%,
    #0b1036 50%,
    #070a1e 84%,
    transparent 100%
  );
  transform: translateX(-130%) skewX(-14deg);
  opacity: 0;
}
#wipe::before,
#wipe::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
}
#wipe::before {
  left: 16%;
  background: var(--cyan);
  box-shadow: 0 0 26px 6px var(--cyan);
}
#wipe::after {
  right: 16%;
  background: var(--magenta);
  box-shadow: 0 0 26px 6px var(--magenta);
}
#wipe.go {
  animation: wipe 0.62s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
@keyframes wipe {
  0% {
    opacity: 1;
    transform: translateX(-130%) skewX(-14deg);
  }
  100% {
    opacity: 1;
    transform: translateX(130%) skewX(-14deg);
  }
}

/* ---------- fake ad, toast ---------- */
#adcover {
  z-index: 50;
  background: rgba(0, 0, 0, 0.92);
}
.fake-ad .big-num {
  font: 600 90px/1 var(--display);
}
.spinner {
  width: 40px;
  height: 40px;
  margin: 16px auto;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--cyan);
  animation: spin 0.8s linear infinite;
}
#toast {
  position: absolute;
  left: 50%;
  bottom: calc(26px + var(--safe-b));
  transform: translateX(-50%) translateY(20px);
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(40, 46, 100, 0.96), rgba(16, 20, 52, 0.96));
  border: 1px solid var(--line-2);
  box-shadow:
    0 12px 30px -10px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(43, 217, 255, 0.25);
  font-weight: 600;
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
  pointer-events: none;
  z-index: 60;
  max-width: calc(100vw - 32px);
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- responsive ---------- */
/* ---------- controllers: keyboard / gamepad glyphs, Controls tab ---------- */
body:not(.pad) .pad-only {
  display: none !important;
}
body.pad .kb-only {
  display: none !important;
}
body.pad :is(button, select, input, [tabindex]):focus {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  box-shadow:
    0 0 0 5px rgba(43, 217, 255, 0.18),
    0 0 22px -4px rgba(43, 217, 255, 0.8);
}
body.pad .song:focus {
  outline: none;
}
/* face-button glyph: letter or symbol in the family's colours (set by data-fam on <body>) */
.pg {
  --pg: #9aa3c7;
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pg) 26%, rgba(8, 10, 30, 0.9));
  border: 1.5px solid var(--pg);
  color: #fff;
  font: 600 15px/1 var(--display);
  font-style: normal;
  padding-top: 2px;
}
.pg.dpad {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px 0 3px;
  border-radius: 7px;
  --pg: rgba(255, 255, 255, 0.4);
  font: 600 13px/1 var(--ui);
  padding-top: 0;
}
.pg.dpad svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
body[data-fam='xbox'] .pg[data-pb='0'] {
  --pg: #4cc35a;
}
body[data-fam='xbox'] .pg[data-pb='1'] {
  --pg: #ff5b5b;
}
body[data-fam='xbox'] .pg[data-pb='2'] {
  --pg: #3f8cff;
}
body[data-fam='xbox'] .pg[data-pb='3'] {
  --pg: #ffc533;
}
body[data-fam='ps'] .pg[data-pb='0'] {
  --pg: #7ea2ff;
}
body[data-fam='ps'] .pg[data-pb='1'] {
  --pg: #ff6a7d;
}
body[data-fam='ps'] .pg[data-pb='2'] {
  --pg: #f08ad8;
}
body[data-fam='ps'] .pg[data-pb='3'] {
  --pg: #39d9b5;
}
.play-cta .pg {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 28px;
  height: 28px;
  font-size: 19px;
}
@media (hover: none) {
  body:not(.pad) .hints {
    display: none;
  }
}

.ctl-switch {
  width: 100%;
  margin: 6px 0 4px;
}
.ctl-switch button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 14px;
}
.ctl-switch svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.ctl-page {
  display: none;
}
.ctl-page.on {
  display: block;
  animation: fade 0.18s;
}
.ctl-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 2px;
}

.kbg {
  position: relative;
  margin: 12px 0 0;
  aspect-ratio: 12 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0a0c22;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
}
.kbg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 64%;
}
.kbg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(4, 5, 18, 0.88));
  pointer-events: none;
}
.kbg figcaption {
  position: absolute;
  left: 16px;
  right: 14px;
  bottom: 11px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.kbg strong {
  font: 600 28px/0.85 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 0.1em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.fkeys {
  display: flex;
  gap: 5px;
}
.fkeys kbd {
  min-width: 30px;
  height: 26px;
  font-size: 12px;
  color: #fff;
  border-color: currentColor;
}
.fkeys kbd:nth-child(1) {
  color: #ff3d6e;
}
.fkeys kbd:nth-child(2) {
  color: #ffb627;
}
.fkeys kbd:nth-child(3) {
  color: #2ee6ff;
}
.fkeys kbd:nth-child(4) {
  color: #7cff4f;
}
.fkeys kbd {
  background: color-mix(in srgb, currentColor 18%, rgba(6, 8, 24, 0.85));
}
.kbg-text {
  margin: 10px 2px 0;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.45;
  max-width: 62ch;
}

.pad-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 2px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--mute);
}
.pad-status .dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: pulse 1.6s infinite;
}
.pad-status.on {
  color: var(--ink);
}
.pad-status.on .dot {
  background: #4cff8a;
  box-shadow: 0 0 10px #4cff8a;
  animation: none;
}
.pad-art {
  display: flex;
  justify-content: center;
  margin: 4px 0 0;
}
.pad-art svg {
  width: min(100%, 380px);
  height: auto;
  overflow: visible;
}
.pa-body {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1.5;
}
.pa-cap {
  fill: rgba(8, 10, 30, 0.9);
  stroke: rgba(255, 255, 255, 0.18);
}
.pa-btn {
  fill: rgba(255, 255, 255, 0.07);
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 1.2;
  transition:
    fill 0.15s,
    stroke 0.15s;
}
.pa-btn.on {
  fill: var(--lc);
  stroke: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 0 7px var(--lc));
}
.pa-btn.live {
  fill: #fff;
  stroke: #fff;
}
.pa-t {
  font: 600 15px/1 var(--display);
  fill: var(--mute);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.pa-t.sm {
  font-size: 12px;
}
.pa-t.on {
  fill: #0a0b1a;
}
.keys button.pad-key {
  font-size: 30px;
}

/* ---------- home: choose how to play ---------- */
.tb-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
#home,
#tour {
  flex-direction: column;
  padding: calc(16px + var(--safe-t)) calc(26px + var(--safe-r)) calc(14px + var(--safe-b))
    calc(26px + var(--safe-l));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modes {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 310px));
  gap: clamp(16px, 2.4vw, 30px);
  padding: 24px 0;
}
.mode-card {
  --mc: var(--magenta);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0a0c22;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s,
    border-color 0.2s;
}
#mode-free {
  --mc: var(--cyan);
}
.mode-card .mc-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(
    120% 80% at 50% 20%,
    color-mix(in srgb, var(--mc) 45%, #12123a),
    #070818 70%
  );
}
.mode-card .mc-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.mode-card .mc-art.has-img .mc-icon {
  display: none;
}
.mode-card .mc-icon {
  width: 46%;
  height: 46%;
  margin-bottom: 30%;
  fill: color-mix(in srgb, var(--mc) 70%, white);
  opacity: 0.85;
  filter: drop-shadow(0 0 24px var(--mc));
}
.mode-card .mc-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(4, 5, 16, 0.92) 78%);
}
.mode-card .mc-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px 22px;
}
.mc-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--mc) 60%, white);
  min-height: 15px;
}
.mc-title {
  font: 600 clamp(40px, 4.2vw, 58px) / 0.82 var(--display);
  font-style: italic;
  text-transform: uppercase;
  padding: 0.12em 0.15em 0 0;
  color: #fff;
  text-shadow: 0 4px 24px color-mix(in srgb, var(--mc) 70%, transparent);
}
.mc-sub {
  font-size: 14px;
  line-height: 1.4;
  color: var(--mute);
  font-weight: 600;
}
.mode-card:hover,
.mode-card:focus-visible,
body.pad .mode-card:focus {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--mc) 80%, white);
  box-shadow:
    0 0 0 1px var(--mc),
    0 30px 70px -24px color-mix(in srgb, var(--mc) 70%, transparent);
  outline: none;
}
.mode-card:hover .mc-art img,
.mode-card:focus .mc-art img {
  transform: scale(1.04);
}
.mode-card.soon {
  cursor: default;
}
.mode-card.soon .mc-art {
  filter: grayscale(0.7) brightness(0.7);
}
.mode-card.soon:hover {
  transform: none;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  border-color: var(--line-2);
}
#home.show .mode-card {
  animation: rise 0.5s calc(var(--i) * 0.08s) var(--ease-out) both;
}

/* ---------- campaign: the tour ---------- */
.tour-stars svg {
  fill: #ffd36b;
  filter: drop-shadow(0 0 6px rgba(255, 211, 107, 0.8));
}
.tour-road {
  width: 100%;
  max-width: 1320px;
  margin: auto auto 0;
  padding: 34px 0 6px;
}
.venues {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
}
/* the road between the venues */
.venues::before {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 211, 107, 0.75) 0 18px,
    transparent 18px 32px
  );
  opacity: 0.55;
  filter: drop-shadow(0 0 6px rgba(255, 182, 39, 0.6));
}
.venue {
  position: relative;
}
.venue > button {
  --c: var(--cyan);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  overflow: hidden;
  background: #0a0c22;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.9);
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s,
    border-color 0.2s,
    filter 0.2s;
}
.venue .v-art {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 30% 10%,
    color-mix(in srgb, var(--c) 50%, #14123c),
    #06071a 72%
  );
}
.venue .v-art img,
.venue .v-art canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.venue .v-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 5, 16, 0.1) 30%, rgba(4, 5, 16, 0.9));
}
.venue .v-body {
  position: absolute;
  left: 14px;
  right: 12px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v-n {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 60%, white);
}
.v-name {
  font: 600 clamp(26px, 2.6vw, 38px) / 0.84 var(--display);
  font-style: italic;
  text-transform: uppercase;
  color: #fff;
  padding: 0.1em 0.15em 0 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}
.v-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 18px/1 var(--display);
  color: #ffe1a0;
  font-variant-numeric: tabular-nums;
}
.v-meta svg {
  width: 13px;
  height: 13px;
  fill: #ffd36b;
  margin-top: -2px;
}
.v-meta .done {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  font: 700 11px/1 var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lime);
}
.v-meta .done svg {
  fill: var(--lime);
  width: 14px;
  height: 14px;
}
.venue .v-lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(4, 5, 16, 0.45);
}
.venue .v-lock svg {
  width: 34px;
  height: 34px;
  fill: rgba(255, 255, 255, 0.75);
}
.venue.locked > button {
  filter: grayscale(0.85) brightness(0.75);
}
.venue > button:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.4);
}
.venue.sel > button {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c) 85%, white);
  box-shadow:
    0 0 0 1px var(--c),
    0 26px 60px -20px color-mix(in srgb, var(--c) 75%, transparent);
}
.venue.locked.sel > button {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
}
/* the van parks above the furthest open venue */
.venue .van {
  position: absolute;
  left: 50%;
  top: -30px;
  width: 40px;
  height: 26px;
  margin-left: -20px;
  fill: #b07bff;
  filter: drop-shadow(0 0 8px rgba(176, 123, 255, 0.8));
  animation: vanBob 2.4s ease-in-out infinite;
}
@keyframes vanBob {
  50% {
    transform: translateY(-3px);
  }
}
#tour.show .venue {
  animation: rise 0.45s calc(var(--i) * 0.07s) var(--ease-out) both;
}

.venue-detail {
  width: 100%;
  max-width: 1320px;
  margin: 22px auto auto;
  padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2.2vw, 26px);
}
.vd-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.vd-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vd-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 60%, white);
}
.vd-name {
  margin: 0;
  font: 600 clamp(40px, 4vw, 58px) / 0.82 var(--display);
  font-style: italic;
  text-transform: uppercase;
  padding: 0.12em 0.15em 0 0;
}
.vd-stars {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 26px/1 var(--display);
  color: #ffe1a0;
  font-variant-numeric: tabular-nums;
}
.vd-stars svg {
  width: 18px;
  height: 18px;
  fill: #ffd36b;
  margin-top: -3px;
}
.vd-songs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.vs {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  row-gap: 3px;
  align-items: center;
  width: 100%;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  text-align: left;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.2s var(--ease-out),
    box-shadow 0.2s;
}
.vs .thumb {
  grid-row: 1 / span 3;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: #0b0d20;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.vs .thumb canvas,
.vs .thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.vs .role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.vs .role.encore {
  color: #ffd36b;
}
.vs .role.final {
  color: var(--magenta);
}
.vs .t {
  font: 600 26px/0.86 var(--display);
  font-style: italic;
  text-transform: uppercase;
  padding: 4px 0.18em 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vs .st {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 18px;
}
.vs .st svg {
  width: 15px;
  height: 15px;
  fill: rgba(255, 255, 255, 0.16);
}
.vs .st svg.on {
  fill: #ffd36b;
  filter: drop-shadow(0 0 4px rgba(255, 211, 107, 0.7));
}
.vs.gold .st svg.on {
  fill: #fff3b0;
  filter: drop-shadow(0 0 6px #ffd36b);
}
.vs .why {
  font-size: 12px;
  font-weight: 600;
  color: var(--mute);
  line-height: 1.3;
}
.vs .why svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  vertical-align: -2px;
  margin-right: 3px;
}
.vs:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--line-2);
}
.vs.ok:hover,
.vs.ok:focus,
body.pad .vs.ok:focus {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--c) 80%, white);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--c) 26%, transparent),
    rgba(255, 255, 255, 0.04)
  );
  box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--c) 80%, transparent);
  outline: none;
}
.vs.lock {
  cursor: default;
}
.vs.lock .thumb {
  filter: grayscale(1) brightness(0.6);
}
.vs.lock .t {
  color: var(--mute);
}
.vs.soon {
  cursor: default;
  border-style: dashed;
  background: transparent;
}
.vs.soon .thumb {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.vs.soon .thumb svg {
  width: 26px;
  height: 26px;
  fill: var(--faint);
}
.vs.soon .t {
  color: var(--faint);
}
.vd-note {
  margin: 12px 2px 0;
  min-height: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mute);
}
.vd-note b {
  color: #ffe1a0;
}

/* ---------- campaign: story scene ---------- */
.overlay.story {
  padding: 0;
  background: #03040c;
  z-index: 20;
  align-items: flex-end;
  justify-content: flex-start;
}
.story-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.story-art canvas,
.story-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.overlay.story.show .story-art img,
.overlay.story.show .story-art canvas {
  animation: storyZoom 14s ease-out both;
}
@keyframes storyZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}
.story-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 4, 12, 0.15) 40%, rgba(3, 4, 12, 0.92) 92%);
}
.story-card {
  position: relative;
  width: min(760px, 100%);
  margin: 0 0 calc(34px + var(--safe-b)) calc(40px + var(--safe-l));
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.story-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd36b;
}
.story-line {
  margin: 0;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.45;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8);
  max-width: 52ch;
}
.overlay.story.show .story-card > * {
  animation: rise 0.6s var(--ease-out) both;
}
.overlay.story.show .story-line {
  animation-delay: 0.25s;
}
.overlay.story.show .story-card .btn {
  animation-delay: 0.6s;
  margin-top: 6px;
}
.story-card .btn kbd,
.story-card .btn .pg {
  margin-left: 6px;
}

/* ---------- campaign: booed off ---------- */

/* ---------- campaign: stars on the results screen ---------- */
.res-camp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
}
.res-stars {
  display: flex;
  gap: 6px;
}
.res-stars svg {
  width: 34px;
  height: 34px;
  fill: rgba(255, 255, 255, 0.12);
}
.res-stars svg.on {
  fill: #ffd36b;
  filter: drop-shadow(0 0 10px rgba(255, 211, 107, 0.85));
  animation: starPop 0.45s calc(0.9s + var(--k) * 0.14s) var(--ease-pop) both;
}
.res-stars.gold svg.on {
  fill: #fff3b0;
  filter: drop-shadow(0 0 14px #ffd36b);
}
@keyframes starPop {
  from {
    transform: scale(0);
    opacity: 0;
  }
}
.res-unlocks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.res-unlocks .chip {
  font-size: 12px;
  padding: 6px 12px;
  animation: rise 0.4s 1.6s both;
}
.res-unlocks .chip.gold {
  color: #ffd27a;
  border-color: rgba(255, 210, 122, 0.5);
  background: rgba(255, 210, 122, 0.12);
}

@media (hover: none) {
  .desktop-only {
    display: none !important;
  }
}
@media (max-width: 960px), (orientation: portrait) {
  #menu,
  #home,
  #tour {
    padding-left: calc(14px + var(--safe-l));
    padding-right: calc(14px + var(--safe-r));
  }
  .modes {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 560px;
    gap: 12px;
  }
  .mode-card {
    aspect-ratio: auto;
    min-height: 150px;
  }
  .mode-card .mc-art::after {
    background: linear-gradient(90deg, rgba(4, 5, 16, 0.92) 30%, rgba(4, 5, 16, 0.2));
  }
  .mode-card .mc-icon {
    width: 90px;
    height: 90px;
    margin: 0 0 0 auto;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
  .mode-card .mc-body {
    max-width: 74%;
  }
  .mc-title {
    font-size: 44px;
  }
  .tour-road {
    margin-top: 8px;
    padding-top: 34px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .venues {
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    padding: 0 2px 8px;
  }
  .vd-songs {
    grid-template-columns: 1fr;
  }
  .venue-detail {
    margin-top: 12px;
  }
  .vd-name {
    font-size: 40px;
  }
  .story-card {
    margin-left: calc(18px + var(--safe-l));
    margin-bottom: calc(22px + var(--safe-b));
  }
  #tour .tb-left .ribbon {
    display: none;
  }
  .wordmark.small {
    font-size: 36px;
  }
  .stagefront {
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 12px auto 0;
    align-items: start;
    max-width: 620px;
  }
  .marquee {
    order: -1;
    --h: clamp(150px, 24vh, 230px);
  }
  .mq-title {
    font-size: clamp(44px, 12vw, 72px);
  }
  .song .t {
    font-size: 24px;
  }
  .hints {
    display: none;
  }
  .intro-card {
    grid-template-columns: 1fr;
    justify-items: start;
    max-width: 560px;
    gap: 22px;
  }
  .intro-cover {
    --h: clamp(150px, 26vh, 240px);
  }
  .res-head {
    gap: 14px;
  }
  .res-hero {
    gap: 18px;
  }
  .res-detail {
    grid-template-columns: 1fr;
  }
  .res-actions .btn {
    flex: 1 1 140px;
    min-width: 0;
  }
  #pause {
    padding-left: calc(16px + var(--safe-l));
    justify-content: center;
    background: rgba(3, 4, 14, 0.82);
  }
}
@media (max-width: 440px) {
  .picks {
    padding: 2px 12px 0;
  }
  .icon-btn {
    width: 42px;
    height: 42px;
  }
  .diff {
    padding: 10px 12px;
  }
  .grade-plate {
    width: 120px;
  }
  .grade {
    font-size: 100px;
  }
  .res-acc {
    font-size: 64px;
  }
  .res-kv dd {
    font-size: 30px;
  }
  .jbars li {
    grid-template-columns: 66px 1fr 48px;
  }
  .panel {
    padding: 18px 16px;
  }
  .tabs button {
    padding: 8px 10px 5px;
    font-size: 18px;
  }
  .play-cta {
    min-height: 64px;
    font-size: 34px;
  }
}
@media (max-height: 560px) and (orientation: landscape) {
  #menu {
    padding-top: calc(8px + var(--safe-t));
    padding-bottom: calc(8px + var(--safe-b));
  }
  .wordmark.small {
    font-size: 32px;
  }
  .stagefront {
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
    max-width: none;
    gap: 16px;
    padding: 8px 0;
    margin: auto;
  }
  .marquee {
    order: 0;
    --h: 96px;
    gap: 10px;
  }
  .detail-panel {
    gap: 9px;
    padding: 14px 16px;
  }
  .mq-title {
    font-size: 44px;
  }
  .mq-stats dd {
    font-size: 18px;
  }
  .diff {
    padding: 8px 10px;
    gap: 6px;
  }
  .play-cta {
    min-height: 52px;
    font-size: 30px;
  }
  .song {
    padding: 5px 10px 5px 5px;
  }
  .song .thumb {
    width: 44px;
    height: 44px;
  }
  .song {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }
  .song .t {
    font-size: 21px;
  }
  .hints {
    display: none;
  }
  .first-run {
    display: none !important;
  }
  .intro-card {
    grid-template-columns: auto 1fr;
  }
  .intro-cover {
    --h: 150px;
  }
  .load-title {
    font-size: 52px;
  }
  .res-hero .grade-plate {
    width: 110px;
  }
  .grade {
    font-size: 90px;
  }
  .res-acc {
    font-size: 60px;
  }
  .res-detail section {
    padding: 10px 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tap,
  .eq i,
  #bg .glow,
  .cover-stage.spinning .disc canvas,
  .loadbar i::after {
    animation: none !important;
  }
  #menu.enter *,
  #splash.show *,
  .grade.reveal,
  .res-best.new,
  .badges .chip,
  #results.show *,
  .overlay.show *,
  #pause.show * {
    animation: none !important;
    opacity: 1 !important;
  }
  .grade {
    transform: none;
    opacity: 1;
  }
  #wipe {
    display: none;
  }
}

/* campaign: the tutorial offer for a new player, above the venue */
.tour-first {
  width: 100%;
  max-width: 1320px;
  margin: 16px auto 0;
}

/* ================================================================== online ranking */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
:root {
  --gold: #ffd36b;
  --silver: #dfe5ff;
  --bronze: #ffb38a;
}

/* difficulty buttons: four in one row (2x2 on narrow screens); Rock God stays dimmed until the tour is finished */
.diffs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.diff {
  padding: 10px 12px;
  gap: 7px;
}
.diff .dn {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.diff .dn > span {
  font-size: 23px;
  white-space: nowrap;
}
.diff .dn small {
  min-height: 14px;
  font-size: 11px;
  white-space: nowrap;
}
@media (max-width: 1180px) {
  .diffs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.diff .dn small svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
  vertical-align: -1px;
  margin-right: 4px;
}
.diff.locked {
  cursor: default;
  border-style: dashed;
}
.diff.locked .dn > span,
.diff.locked .meter {
  opacity: 0.45;
}
.diff.d-expert:not(.locked) .dn > span {
  color: #ffd36b;
  text-shadow: 0 0 14px rgba(255, 182, 39, 0.55);
}

.seg button.locked {
  opacity: 0.4;
}

/* home: the ranking card (fourth mode card) with this week's podium */
@media (min-width: 961px) and (orientation: landscape) {
  .modes {
    grid-template-columns: repeat(4, minmax(0, 290px));
  }
}
.mode-card.mode-rank {
  --mc: #ffb627;
}
.mode-rank .mc-art {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding: 18px 18px 0;
  background:
    radial-gradient(90% 60% at 50% 18%, rgba(255, 182, 39, 0.5), transparent 70%),
    radial-gradient(120% 90% at 80% 100%, rgba(255, 46, 147, 0.32), transparent 65%),
    linear-gradient(180deg, #2a1640, #0a0a22 75%);
}
.mode-rank .mc-art::after {
  background: linear-gradient(180deg, transparent 55%, rgba(4, 5, 16, 0.92) 85%);
}
.mode-rank .mc-icon {
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  margin: 2px auto 0;
  fill: #ffd36b;
  opacity: 1;
  filter: drop-shadow(0 0 22px rgba(255, 182, 39, 0.9));
}
.mc-podium {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-podium li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 5px 10px 4px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.mc-podium .n {
  font: 600 21px/0.8 var(--display);
  font-style: italic;
  color: var(--gold);
  padding-top: 3px;
}
.mc-podium li:nth-child(2) .n {
  color: var(--silver);
}
.mc-podium li:nth-child(3) .n {
  color: var(--bronze);
}
.mc-podium .nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.mc-podium .sc {
  font: 600 17px/1 var(--display);
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}
.mc-podium .empty {
  display: block;
  padding: 8px 6px;
  background: none;
  border: none;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.mode-rank .mc-kicker {
  color: #ffd36b;
}
@media (max-width: 960px), (orientation: portrait) {
  .mode-rank .mc-art {
    padding: 0;
  }
  .mode-rank .mc-podium {
    display: none;
  }
  .mode-rank .mc-icon {
    width: 90px;
    height: 90px;
    margin: 0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* setlist: this song's leader and my place */
/* the setlist fits the screen on desktop: the song list scrolls inside its panel */
@media (min-width: 961px) and (orientation: landscape) {
  #menu {
    overflow: hidden;
  }
  .stagefront {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    margin: 0 auto;
  }
  .setlist {
    min-height: 0;
    justify-content: center;
  }
  .list-panel {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  }
  .marquee {
    min-height: 0;
    justify-content: center;
  }
}
@media (min-width: 961px) and (max-height: 860px) and (orientation: landscape) {
  .marquee {
    --h: clamp(110px, 18vh, 190px);
    gap: 14px;
  }
  .detail-panel {
    gap: 11px;
    padding-top: 14px;
    padding-bottom: 16px;
  }
  .mq-title {
    font-size: clamp(40px, 4.6vw, 66px);
  }
  .play-cta {
    min-height: 58px;
    font-size: 32px;
  }
  .stagefront {
    padding: 10px 0;
  }
}
.mq-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mq-row .mq-best {
  flex: 1 1 auto;
  min-width: 0;
}
.mq-row .mq-rank {
  flex: 0 1 auto;
  width: auto;
  max-width: 58%;
}
.mq-rank {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.mq-rank svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: var(--gold);
}
.mq-rank .mr-top {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mute);
}
.mq-rank .mr-top b {
  color: var(--ink);
  font: 600 19px/1 var(--display);
  font-variant-numeric: tabular-nums;
}
.mq-rank .mr-top em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}
.mq-rank .mr-me {
  flex: none;
  font-weight: 700;
  color: var(--cyan);
}
.mq-rank:hover,
.mq-rank:focus-visible {
  outline: none;
  border-color: rgba(255, 211, 107, 0.7);
  background: rgba(255, 211, 107, 0.06);
}

/* results: where this run landed */
.res-rank {
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rr-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
}
.rr-head h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 24px/1 var(--display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);
}
.rr-head h3 svg {
  width: 20px;
  height: 20px;
  fill: var(--gold);
}
.rr-status {
  flex: 1;
  font-size: 13px;
  color: var(--mute);
}
.rr-periods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.rr-periods li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
}
.rr-periods .pl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.rr-periods .pr {
  font: 600 40px/0.85 var(--display);
  font-style: italic;
  padding-top: 5px;
  font-variant-numeric: tabular-nums;
}
.rr-periods .pr small {
  font-size: 0.5em;
  font-style: normal;
  color: var(--mute);
  margin-left: 4px;
}
.rr-periods .pt {
  font-size: 12px;
  color: var(--mute);
}
.rr-periods .up {
  color: #9dff6a;
  font-weight: 700;
}
.rr-periods li.best {
  border-color: rgba(255, 211, 107, 0.8);
  background: linear-gradient(160deg, rgba(255, 211, 107, 0.16), rgba(255, 255, 255, 0.03));
}
.rr-periods li.best .pt {
  color: var(--gold);
  font-weight: 700;
}
.rr-periods li.p1 .pr {
  color: var(--gold);
  text-shadow: 0 0 18px rgba(255, 211, 107, 0.65);
}
.rr-periods li.wait .pr {
  color: var(--faint);
}
.rr-line {
  margin: 0;
  font-size: 14px;
  color: var(--mute);
  line-height: 1.4;
}
.rr-line b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rr-next b.who {
  color: #ff9ec7;
}
.rr-name {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px dashed rgba(255, 211, 107, 0.55);
  background: rgba(255, 211, 107, 0.06);
}
.rr-name label {
  font-size: 14px;
  font-weight: 700;
}
.rr-name-row {
  display: flex;
  gap: 8px;
}
.rr-name input,
.namebox input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 2px 14px 0;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font: 600 24px/1 var(--display);
  letter-spacing: 0.03em;
}
.rr-name input:focus,
.namebox input:focus {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}
#results.show .res-rank {
  animation: rise 0.45s 0.75s var(--ease-out) both;
}

/* ranking: a liquid-glass panel over whatever screen opened it */
.rk-overlay {
  background: radial-gradient(120% 90% at 50% 0%, rgba(30, 22, 70, 0.35), rgba(3, 4, 14, 0.62));
  -webkit-backdrop-filter: blur(6px) saturate(130%);
  backdrop-filter: blur(6px) saturate(130%);
}
.rk-panel {
  position: relative;
  width: min(1240px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(16px, 2vw, 26px);
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.17),
    rgba(255, 255, 255, 0.05) 38%,
    rgba(140, 120, 255, 0.07) 70%,
    rgba(255, 255, 255, 0.1)
  );
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 40px rgba(255, 255, 255, 0.05),
    0 50px 120px -30px rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  backdrop-filter: blur(34px) saturate(190%);
}
.rk-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(70% 45% at 18% -8%, rgba(255, 255, 255, 0.28), transparent 60%),
    radial-gradient(50% 35% at 100% 110%, rgba(255, 182, 39, 0.14), transparent 70%);
}
.rk-panel > * {
  position: relative;
}
.overlay.show .rk-panel {
  animation: pop 0.32s var(--ease-pop) both;
}
.rk-headbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rk-headbar .rk-h {
  flex: 1;
  min-width: 0;
}
.rk-h {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 clamp(36px, 4vw, 50px) / 0.85 var(--display);
  font-style: italic;
  text-transform: uppercase;
  padding-top: 0.1em;
}
.rk-h svg {
  width: 0.78em;
  height: 0.78em;
  fill: var(--gold);
  filter: drop-shadow(0 0 12px rgba(255, 211, 107, 0.7));
}
.rk-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  max-width: 46vw;
}
.rk-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rk-name svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: var(--cyan);
}
.rk-name:hover,
.rk-name:focus-visible {
  outline: none;
  border-color: var(--cyan);
}
.rk-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.rk-boards,
.rk-main {
  border-radius: 20px;
  background: rgba(6, 8, 30, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.rk-boards {
  padding: 10px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.rk-blist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rk-blist button {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.rk-blist .th {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #0b0d20;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.rk-blist .th canvas,
.rk-blist .th img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rk-blist .th svg {
  width: 24px;
  height: 24px;
  fill: var(--gold);
}
.rk-blist .nm {
  font: 600 21px/0.9 var(--display);
  font-style: italic;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 3px;
}
.rk-blist button:hover,
.rk-blist button:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.07);
}
.rk-blist button.on {
  border-color: color-mix(in srgb, var(--c, #ffd36b) 75%, white);
  background: color-mix(in srgb, var(--c, #ffd36b) 18%, transparent);
}
.rk-blist li.all {
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.rk-main {
  padding: clamp(16px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.rk-panel {
  height: min(860px, 100%);
}
.rk-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.rk-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rk-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.rk-title {
  margin: 0;
  font: 600 clamp(40px, 4.8vw, 66px) / 0.8 var(--display);
  font-style: italic;
  text-transform: uppercase;
  padding: 0.1em 0.15em 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--c, #ffd36b) 55%, white));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rk-diffs button {
  font-size: 12px;
  padding: 7px 12px;
}
.rk-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.rk-bar .tabs {
  margin: 0;
  flex: 1 1 380px;
}
.rk-reset {
  font-size: 13px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.rk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rk-list li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 18px 6px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}
.rk-list .rk {
  font: 600 36px/0.8 var(--display);
  font-style: italic;
  padding-top: 6px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.rk-list .nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 700;
}
.rk-list .sc {
  font: 600 32px/0.85 var(--display);
  padding-top: 5px;
  font-variant-numeric: tabular-nums;
}
.rk-list li.p1 {
  background: linear-gradient(90deg, rgba(255, 211, 107, 0.2), rgba(255, 255, 255, 0.03) 65%);
  border-color: rgba(255, 211, 107, 0.45);
}
.rk-list li.p1 .rk {
  color: var(--gold);
  text-shadow: 0 0 16px rgba(255, 211, 107, 0.7);
}
.rk-list li.p2 .rk {
  color: var(--silver);
}
.rk-list li.p3 .rk {
  color: var(--bronze);
}
.rk-list li.p1 .sc {
  color: #fff3cf;
}
.rk-list li.me {
  border-color: var(--cyan);
  background: linear-gradient(90deg, rgba(43, 217, 255, 0.2), rgba(43, 217, 255, 0.04));
  box-shadow: 0 0 26px -10px rgba(43, 217, 255, 0.9);
}
.rk-list li.me .you {
  margin-left: 8px;
  padding: 3px 8px 2px;
  border-radius: 999px;
  background: var(--cyan);
  color: #00131c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.rk-list li.gap {
  min-height: 0;
  padding: 0;
  background: none;
  justify-content: center;
  grid-template-columns: 1fr;
  color: var(--faint);
  text-align: center;
  letter-spacing: 0.3em;
}
.rk-list .rk-empty {
  display: block;
  padding: 46px 10px;
  background: none;
  text-align: center;
  color: var(--mute);
  font-size: 15px;
}
.rk-me {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 22px;
  font-size: 14px;
  color: var(--mute);
}
.rk-me:empty {
  display: none;
}
.rk-me b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rk-me b.who {
  color: #ff9ec7;
}
.rk-play {
  align-self: flex-start;
}
#ranking.show .rk-list li {
  animation: rise 0.35s calc(var(--i, 0) * 0.025s) var(--ease-out) both;
}
.rk-close {
  flex: none;
}

/* nickname dialog */
.namebox {
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.namebox .panel-title {
  margin: 0;
}
.nb-sub {
  margin: 0;
  font-size: 14px;
  color: var(--mute);
}
.nb-msg {
  margin: 0;
  min-height: 1.3em;
  font-size: 13px;
  color: var(--bronze);
}
.nb-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 1220px) and (min-width: 961px) and (orientation: landscape) {
  .modes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }
}
@media (max-width: 900px) {
  .rk-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
  }
  .rk-boards {
    max-height: none;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .rk-blist {
    flex-direction: row;
  }
  .rk-blist li.all {
    padding: 0 6px 0 0;
    margin: 0 4px 0 0;
    border-bottom: none;
    border-right: 1px solid var(--line);
  }
  .rk-blist button {
    width: auto;
    grid-template-columns: 36px auto;
    gap: 8px;
  }
  .rk-blist .th {
    width: 36px;
    height: 36px;
  }
  .rk-blist .nm {
    max-width: 16ch;
    font-size: 18px;
  }
  .rk-main {
    min-height: 0;
  }
}
@media (max-width: 760px) {
  .rk-panel {
    border-radius: 22px;
    height: 100%;
  }
  .rk-h {
    font-size: 32px;
  }
  .rk-h svg {
    display: none;
  }
  .rk-headbar .rk-h {
    overflow: hidden;
    white-space: nowrap;
  }
  .rr-periods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rk-list li {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    padding: 6px 12px 6px 10px;
  }
  .rk-list .rk {
    font-size: 30px;
  }
  .rk-list .sc {
    font-size: 26px;
  }
  .rk-name {
    max-width: 40vw;
    padding: 0 12px;
  }
}

/* ---------- game over: the stage freezes into a black-and-white photo; a glass card offers the way back ---------- */
.go-overlay {
  z-index: 12;
  background: radial-gradient(90% 75% at 50% 45%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.72));
  overflow-y: auto;
}
.go-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px clamp(18px, 3vw, 30px) 22px;
  border-radius: 28px;
  text-align: center;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 61, 110, 0.07) 75%,
    rgba(255, 255, 255, 0.09)
  );
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 40px rgba(255, 255, 255, 0.04),
    0 50px 120px -30px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
}
.go-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(70% 40% at 15% -6%, rgba(255, 255, 255, 0.26), transparent 60%),
    radial-gradient(60% 40% at 100% 108%, rgba(255, 46, 147, 0.2), transparent 70%);
}
.go-panel > * {
  position: relative;
}
.overlay.show .go-panel {
  animation: pop 0.34s var(--ease-pop) both;
}
.go-h {
  margin: 2px 0 0;
  font: 600 clamp(64px, 12vw, 116px) / 0.8 var(--display);
  font-style: italic;
  letter-spacing: 0.01em;
  padding-top: 0.12em;
  color: #fff;
  text-shadow:
    -3px 0 rgba(255, 46, 147, 0.85),
    3px 0 rgba(43, 217, 255, 0.7),
    0 0 44px rgba(255, 61, 90, 0.55);
}
.go-h span {
  display: inline-block;
}
.overlay.show .go-h span {
  animation: goGlitch 0.62s steps(1, end) 0.12s both;
}
@keyframes goGlitch {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
    clip-path: inset(0 0 62% 0);
    transform: translate(-10px, 0) skewX(-8deg);
  }
  24% {
    clip-path: inset(48% 0 0 0);
    transform: translate(8px, 0);
  }
  36% {
    clip-path: inset(18% 0 40% 0);
    transform: translate(-4px, 0) skewX(6deg);
  }
  52% {
    clip-path: inset(0 0 0 0);
    transform: translate(3px, 0);
  }
  68% {
    clip-path: inset(70% 0 0 0);
    transform: translate(-2px, 0);
  }
  80%,
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}
.go-sub {
  margin: -4px 0 0;
  color: var(--mute);
  font-size: 16px;
}
.go-run {
  display: grid;
  gap: 10px;
  padding: 14px 16px 12px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.09);
  text-align: left;
}
.go-song {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.go-song b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 27px/0.9 var(--display);
  font-style: italic;
  text-transform: uppercase;
  padding-top: 0.1em;
}
.go-song span {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--faint);
}
.go-track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
}
.go-track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 46, 147, 0.55), #ff3d5a);
  box-shadow: 0 0 12px rgba(255, 46, 147, 0.7);
  transition: width 0.9s var(--ease-out);
}
.go-track b {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 4px rgba(255, 61, 90, 0.35),
    0 0 16px rgba(255, 61, 90, 0.9);
  transition: left 0.9s var(--ease-out);
}
.go-where {
  margin: 0;
  font-size: 14px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.go-chance {
  display: grid;
  gap: 8px;
}
.go-cta {
  width: 100%;
  min-height: 64px;
  font-size: 31px;
}
.go-cta svg {
  width: 24px;
  height: 24px;
  margin-top: -4px;
}
.overlay.show .go-cta svg {
  animation: goBeat 1.1s ease-in-out 0.6s infinite;
}
@keyframes goBeat {
  0%,
  100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.22);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.14);
  }
  60% {
    transform: scale(1);
  }
}
.go-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--faint);
}
.go-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.go-actions .btn {
  min-width: 0;
}
.go-actions .btn.primary {
  font-size: 24px;
}
.go-diffs-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}
.go-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--faint);
}
.go-diffs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.go-diff {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--mute);
  font: 700 13px var(--ui);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.go-diff:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}
.go-diff.on {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.14);
}
.go-diff.locked {
  opacity: 0.5;
}
.go-diff svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.go-diff:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.go-diff:disabled {
  opacity: 0.4;
  cursor: default;
}
.go-note {
  margin: -2px 0 0;
  font-size: 12.5px;
  color: var(--faint);
}
@media (max-height: 560px) {
  .go-panel {
    gap: 9px;
    padding: 16px 20px 14px;
  }
  .go-h {
    font-size: 60px;
  }
  .go-sub {
    display: none;
  }
  .go-run {
    padding: 10px 14px;
    gap: 8px;
  }
  .go-cta {
    min-height: 52px;
    font-size: 26px;
  }
  .go-hint {
    font-size: 12px;
  }
}
@media (max-width: 420px) {
  .go-actions {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .overlay.show .go-h span,
  .overlay.show .go-cta svg {
    animation: none;
  }
}

/* pause menu: the highlighted bar follows the focus (keyboard arrows and the controller), so the cyan look moves */
.pause-menu:has(.menu-item:focus) .menu-item.primary:not(:focus) {
  background: rgba(255, 255, 255, 0.04);
  border-color: transparent;
  box-shadow: none;
}
.pause-menu .menu-item:focus {
  background: linear-gradient(90deg, rgba(43, 217, 255, 0.85), rgba(10, 125, 255, 0.5));
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 26px -10px rgba(43, 217, 255, 0.8);
  transform: translateX(4px);
}

/* tour: a locked song can be focused too (to read why); choosing a stage pulses its song panel once */
.vs.lock:focus {
  outline: 2px dashed rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}
.venue-detail.cue {
  animation: vdCue 0.7s var(--ease-out);
}
@keyframes vdCue {
  0% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent),
      var(--glass-shadow);
  }
  40% {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--c) 55%, transparent),
      var(--glass-shadow);
  }
  100% {
    box-shadow:
      0 0 0 0 transparent,
      var(--glass-shadow);
  }
}
@media (prefers-reduced-motion: reduce) {
  .venue-detail.cue {
    animation: none;
  }
}

/* ranking card with its painting: the top three float on frosted chips over the art */
.mode-rank .mc-art.has-img {
  background: #070818;
}
.mode-rank .mc-art.has-img::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 48%;
  background: linear-gradient(180deg, rgba(4, 5, 16, 0.7), transparent);
  pointer-events: none;
}
.mode-rank .mc-art.has-img .mc-podium li {
  background: rgba(8, 8, 22, 0.58);
  border-color: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mode-rank .mc-art.has-img .mc-podium .empty {
  background: rgba(8, 8, 22, 0.5);
  border-radius: 9px;
}

/* ---------- tour: why things are locked, what the next star takes, and the reveal after a song ---------- */
.venue .v-why {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 12px/1.25 var(--ui);
  color: rgba(255, 255, 255, 0.78);
}
.venue .v-why svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  flex: none;
}
.venue.locked .v-lock svg {
  width: 30px;
  height: 30px;
}
.vs .st {
  flex-wrap: wrap;
}
.vs .st .nx {
  margin-left: 8px;
  font: 700 11.5px/1 var(--ui);
  font-style: normal;
  color: var(--mute);
  white-space: nowrap;
}
.vs .why.enc {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vs .enc-t {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ffe1a0;
}
.vs .enc-bar {
  display: block;
  width: min(180px, 100%);
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.vs .enc-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb627, #ffd36b);
  box-shadow: 0 0 10px rgba(255, 211, 107, 0.7);
  transition: width 0.7s var(--ease-out);
}
.vs .st svg.pop {
  animation: starPop 0.5s var(--ease-pop);
}
@keyframes starPop {
  0% {
    transform: scale(0.2) rotate(-40deg);
  }
  60% {
    transform: scale(1.7) rotate(8deg);
  }
  100% {
    transform: none;
  }
}
.vs.unlocking {
  animation: unlockShake 0.5s ease-in-out;
  border-color: #ffd36b;
}
.vs.unlocking .why svg {
  animation: lockFly 0.5s ease-in forwards;
}
@keyframes unlockShake {
  0%,
  100% {
    transform: none;
  }
  20% {
    transform: translateX(-4px) rotate(-1deg);
  }
  40% {
    transform: translateX(4px) rotate(1deg);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
}
@keyframes lockFly {
  to {
    transform: translateY(-26px) scale(1.6) rotate(25deg);
    opacity: 0;
  }
}
.vs.unlocked-now {
  animation: openGlow 1.2s var(--ease-out);
}
@keyframes openGlow {
  0% {
    box-shadow:
      0 0 0 0 rgba(255, 211, 107, 0.9),
      0 0 40px rgba(255, 211, 107, 0.7);
    border-color: #ffd36b;
  }
  100% {
    box-shadow:
      0 0 0 14px rgba(255, 211, 107, 0),
      0 0 0 transparent;
  }
}
.venue.unlocking > button {
  animation: unlockShake 0.55s ease-in-out;
}
.venue.unlocking .v-lock svg {
  animation: lockFly 0.6s ease-in forwards;
}
.venue.opened-now > button {
  animation: stageOpen 1.3s var(--ease-out);
}
@keyframes stageOpen {
  0% {
    filter: grayscale(1) brightness(0.6);
    box-shadow: 0 0 0 0 rgba(255, 211, 107, 0.9);
  }
  35% {
    filter: brightness(1.5);
    box-shadow:
      0 0 0 4px rgba(255, 211, 107, 0.9),
      0 0 60px rgba(255, 211, 107, 0.7);
  }
  100% {
    filter: none;
  }
}
.venue.opened-now .van {
  animation:
    vanDrive 1.1s var(--ease-out),
    vanBob 2.4s 1.1s ease-in-out infinite;
}
@keyframes vanDrive {
  from {
    transform: translateX(-120%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.tour-flash {
  position: absolute;
  left: 0;
  right: 0;
  top: 31%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.22em 4vw 0.08em;
  font: 600 clamp(30px, 4.2vw, 60px) / 0.95 var(--display);
  font-style: italic;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 30px rgba(255, 182, 39, 0.8),
    0 3px 0 rgba(0, 0, 0, 0.5);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(6, 6, 16, 0.78) 18%,
    rgba(6, 6, 16, 0.78) 82%,
    transparent
  );
  border-block: 1px solid rgba(255, 211, 107, 0.45);
}
.tour-flash.open {
  border-color: rgba(124, 255, 79, 0.5);
  color: #fff6d6;
  text-shadow:
    0 0 34px rgba(124, 255, 79, 0.65),
    0 0 18px rgba(255, 211, 107, 0.9),
    0 4px 0 rgba(0, 0, 0, 0.5);
}
.tour-flash.go {
  animation: flashIn 1.7s var(--ease-out) both;
}
@keyframes flashIn {
  0% {
    opacity: 0;
    transform: scaleY(0.2);
    letter-spacing: 0.3em;
  }
  12% {
    opacity: 1;
    transform: none;
    letter-spacing: 0.02em;
  }
  80% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-14px);
  }
}
.burst {
  position: fixed;
  z-index: 60;
  width: 0;
  height: 0;
  pointer-events: none;
}
.burst i {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  background: rgb(var(--rgb));
  clip-path: polygon(
    50% 0,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  filter: drop-shadow(0 0 6px rgba(var(--rgb), 0.9));
  animation: burstFly 0.85s var(--ease-out) forwards;
}
@keyframes burstFly {
  from {
    transform: translate(0, 0) scale(var(--s));
    opacity: 1;
  }
  to {
    transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(160deg);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tour-flash.go {
    animation-duration: 0.01s;
  }
  .vs .st svg.pop,
  .vs.unlocking,
  .venue.unlocking > button,
  .venue.opened-now > button,
  .venue.opened-now .van {
    animation: none;
  }
}

/* tour on a phone: the four difficulties get their own row under the back button, stars and settings */
@media (max-width: 640px) {
  #tour .topbar {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  #tour .top-actions {
    display: contents;
  }
  #tour .tour-stars {
    margin-left: auto;
  }
  #tour #tour-diff {
    order: 5;
    flex: 1 1 100%;
    justify-content: space-between;
  }
  #tour #tour-diff button {
    flex: 1;
    padding: 8px 6px;
    white-space: nowrap;
  }
  #tour .tour-road {
    padding-top: 30px;
  }
}

/* ---------- online rooms: entry, room (lobby) and final standings, on the same liquid glass as the ranking ---------- */
.mode-card.mode-online {
  --mc: #7cff4f;
}
#mode-online .mc-art img {
  object-position: 50% 34%;
}
.on-panel {
  width: min(900px, 100%);
  height: auto;
  max-height: 100%;
  overflow-y: auto;
}
.on-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.on-lead {
  margin: -4px 0 0;
  color: var(--mute);
  font-size: 15px;
  max-width: 60ch;
}
.on-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.on-choice {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.15s var(--ease-out),
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.2s;
}
.on-choice svg {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  fill: currentColor;
  opacity: 0.9;
}
.on-choice .t {
  font: 600 30px/0.9 var(--display);
  font-style: italic;
  text-transform: uppercase;
  padding-top: 0.12em;
}
.on-choice .s {
  font-size: 13px;
  color: var(--mute);
}
.on-choice:hover,
.on-choice:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}
.on-choice:focus-visible {
  box-shadow: 0 0 0 2px var(--cyan);
}
.on-choice.hot {
  border-color: rgba(124, 255, 79, 0.5);
  background: linear-gradient(
    135deg,
    rgba(124, 255, 79, 0.18),
    rgba(43, 217, 255, 0.08) 60%,
    rgba(255, 255, 255, 0.04)
  );
}
.on-choice.hot svg {
  fill: #b6ff8f;
  filter: drop-shadow(0 0 10px rgba(124, 255, 79, 0.8));
}
.on-choice:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}
.on-code {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.on-code label {
  font-weight: 700;
  color: var(--mute);
}
.on-code input {
  width: 9ch;
  height: 46px;
  padding: 6px 12px 0;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font: 600 28px/1 var(--display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
}
.on-code input:focus {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.on-msg {
  margin: 0;
  min-height: 20px;
  font-size: 14px;
  font-weight: 600;
  color: #ffb3c2;
}
.on-roombar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.on-roomcode {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.on-roomcode span {
  font-size: 12px;
  font-weight: 700;
  color: var(--faint);
}
.on-roomcode b {
  font: 600 44px/0.8 var(--display);
  letter-spacing: 0.16em;
  padding-top: 0.1em;
  color: #ffe1a0;
  text-shadow: 0 0 18px rgba(255, 182, 39, 0.5);
}
.on-privacy {
  margin-left: auto;
  font-size: 13px;
  color: var(--mute);
}
.on-players {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.on-players li {
  --pc: var(--cyan);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 132px;
  padding: 14px 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
}
.on-players li.me {
  border-color: color-mix(in srgb, var(--pc) 70%, white);
  box-shadow:
    0 0 0 1px var(--pc),
    0 10px 30px -14px var(--pc);
}
.on-players .av {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    color-mix(in srgb, var(--pc) 80%, white),
    var(--pc) 55%,
    color-mix(in srgb, var(--pc) 40%, black)
  );
  color: #0a0a18;
  font: 600 30px/1 var(--display);
  padding-top: 4px;
  box-shadow: 0 0 20px -4px var(--pc);
}
.on-players .nm {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 15px;
}
.on-players .tg {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 20px;
}
.on-players .tg i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--mute);
}
.on-players .tg i.host {
  background: rgba(255, 211, 107, 0.18);
  color: #ffe1a0;
}
.on-players .tg i.off {
  background: rgba(255, 61, 110, 0.18);
  color: #ffb3c2;
}
.on-players li.empty {
  border-style: dashed;
  justify-content: center;
  color: var(--faint);
  font-size: 13px;
  background: transparent;
}
.on-players li.empty .av {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  color: var(--faint);
}
.on-song {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.on-song h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--faint);
}
.on-songs {
  list-style: none;
  margin: 0;
  padding: 2px 2px 6px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.on-songs button {
  --c: var(--cyan);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 112px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.on-songs .cv {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #0b0d20;
}
.on-songs .cv canvas,
.on-songs .cv img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.on-songs .tt {
  font: 600 17px/0.95 var(--display);
  font-style: italic;
  text-transform: uppercase;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding-top: 0.1em;
}
.on-songs button.on {
  border-color: color-mix(in srgb, var(--c) 85%, white);
  background: color-mix(in srgb, var(--c) 18%, transparent);
  box-shadow: 0 0 0 1px var(--c);
}
.on-songs button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.on-chosen {
  display: flex;
  align-items: center;
  gap: 14px;
}
.on-chosen .cv {
  position: relative;
  width: 76px;
  height: 76px;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
  background: #0b0d20;
}
.on-chosen .cv canvas,
.on-chosen .cv img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.on-chosen .tt {
  font: 600 32px/0.9 var(--display);
  font-style: italic;
  text-transform: uppercase;
  padding-top: 0.1em;
}
.on-chosen .df {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
}
.on-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.on-wait {
  flex: 1;
  text-align: right;
  font-size: 14px;
  color: var(--mute);
}
.on-res-k {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--faint);
}
.on-res-h {
  margin: -8px 0 0;
  font: 600 clamp(40px, 6vw, 64px) / 0.85 var(--display);
  font-style: italic;
  text-transform: uppercase;
  padding-top: 0.1em;
}
.on-podium {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.on-podium li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 8px 18px 8px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}
.on-podium .ps {
  font: 600 44px/0.8 var(--display);
  font-style: italic;
  text-align: center;
  padding-top: 6px;
  color: var(--mute);
}
.on-podium li:nth-child(1) {
  min-height: 76px;
  border-color: rgba(255, 211, 107, 0.55);
  background: linear-gradient(90deg, rgba(255, 211, 107, 0.2), rgba(255, 255, 255, 0.04));
}
.on-podium li:nth-child(1) .ps {
  color: var(--gold);
  font-size: 56px;
  text-shadow: 0 0 18px rgba(255, 211, 107, 0.7);
}
.on-podium li:nth-child(2) .ps {
  color: var(--silver);
}
.on-podium li:nth-child(3) .ps {
  color: var(--bronze);
}
.on-podium li.me {
  box-shadow: 0 0 0 1px var(--cyan);
}
.on-podium .who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.on-podium .nm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
}
.on-podium .sub {
  font-size: 12.5px;
  color: var(--mute);
}
.on-podium .sc {
  font: 600 30px/1 var(--display);
  font-variant-numeric: tabular-nums;
}
.on-podium li.playing .sc {
  color: var(--mute);
}
.overlay.show .on-podium li {
  animation: rise 0.4s calc(var(--k) * 0.09s) var(--ease-out) both;
}
@media (max-width: 700px) {
  .on-choices {
    grid-template-columns: 1fr;
  }
  .on-players {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .on-players li {
    min-height: 112px;
  }
  .on-roomcode b {
    font-size: 38px;
  }
  .on-privacy {
    margin-left: 0;
    width: 100%;
  }
  .on-wait {
    text-align: left;
    flex-basis: 100%;
    order: -1;
  }
}
body.lowfx .on-panel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: linear-gradient(155deg, rgba(36, 42, 92, 0.94), rgba(14, 18, 46, 0.96));
}
.on-panel .rk-h svg {
  fill: #b6ff8f;
  filter: drop-shadow(0 0 12px rgba(124, 255, 79, 0.7));
}

/* ---------- results grade: upright and dead centre in its ring, with electricity around it ---------- */
.grade-plate {
  overflow: visible;
}
.grade {
  font-style: normal;
  line-height: 1;
  padding: 0;
  width: 100%;
  text-align: center;
  translate: 0 0.035em;
  position: relative;
  z-index: 1;
}
.grade-bolts {
  position: absolute;
  inset: -22%;
  width: 144%;
  height: 144%;
  pointer-events: none;
  z-index: 2;
}

/* ---------- phones: the song details open as a sheet over the setlist (no scrolling up and down) ---------- */
.mq-close {
  display: none;
}
#menu.sheet-mode .marquee {
  position: fixed;
  inset: 0;
  z-index: 9;
  order: 0;
  margin: 0;
  padding: calc(12px + var(--safe-t)) calc(14px + var(--safe-r)) calc(14px + var(--safe-b))
    calc(14px + var(--safe-l));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  --h: clamp(112px, 22vh, 200px);
  background: rgba(4, 5, 16, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.2s,
    transform 0.28s var(--ease-out),
    visibility 0s linear 0.28s;
}
#menu.sheet-mode.sheet-open .marquee {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 0.2s,
    transform 0.28s var(--ease-out);
}
#menu.sheet-mode .mq-close {
  display: grid;
  position: absolute;
  top: calc(12px + var(--safe-t));
  right: calc(14px + var(--safe-r));
  z-index: 3;
}
#menu.sheet-mode .mq-close svg {
  width: 20px;
  height: 20px;
}
#menu.sheet-mode .cover-stage {
  align-self: center;
  flex: none;
}
#menu.sheet-mode .detail-panel {
  gap: 10px;
  padding: 14px 16px 16px;
  width: 100%;
  max-width: 560px;
  align-self: center;
}
#menu.sheet-mode .mq-title {
  font-size: clamp(32px, 9.5vw, 54px);
}
#menu.sheet-mode .mq-stats {
  gap: 6px;
}
#menu.sheet-mode .mq-stats div {
  padding: 4px 10px 3px;
  gap: 6px;
}
#menu.sheet-mode .mq-stats dt {
  font-size: 10px;
}
#menu.sheet-mode .mq-stats dd {
  font-size: 18px;
}
#menu.sheet-mode .diffs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#menu.sheet-mode .diff {
  padding: 8px 12px;
  gap: 6px;
}
#menu.sheet-mode .diff .dn > span {
  font-size: 22px;
}
#menu.sheet-mode .mq-row {
  gap: 8px;
  font-size: 13px;
}
#menu.sheet-mode .first-run {
  display: none !important;
}
#menu.sheet-mode .play-cta {
  min-height: 56px;
  font-size: 30px;
}
@media (max-height: 640px) {
  #menu.sheet-mode .marquee {
    --h: clamp(96px, 18vh, 140px);
    gap: 8px;
  }
  #menu.sheet-mode .mq-stats {
    display: none;
  }
}

/* ---------- phones: results one step at a time ---------- */
.res-stepbar {
  display: none;
}
#results.stepped .res-wrap {
  min-height: 100%;
  justify-content: center;
}
#results.stepped [data-step]:not(.on) {
  display: none !important;
}
#results.stepped:not(.last-step) .res-actions {
  display: none;
}
#results.stepped .res-stepbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
#results.stepped.last-step #rs-next {
  display: none;
}
#results.stepped .res-picks:empty {
  display: none;
}
.rs-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.rs-dots i {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.22);
  transition:
    width 0.25s var(--ease-out),
    background 0.25s;
}
.rs-dots i.on {
  width: 24px;
  background: var(--c, #2ee6ff);
}
#rs-next {
  min-height: 58px;
  font-size: 28px;
  gap: 10px;
}
#rs-next svg {
  width: 20px;
  height: 20px;
}
#results.stepped .res-hero {
  flex-direction: column;
  text-align: center;
  gap: 14px;
  padding: 22px 18px;
}
#results.stepped .res-hero .grade-plate {
  width: clamp(130px, 38vw, 180px);
}
#results.stepped .res-hero .grade {
  font-size: clamp(96px, 28vw, 140px);
}
#results.stepped .res-nums {
  align-items: center;
}
#results.stepped .res-kv {
  justify-content: center;
}
#results.stepped .res-flags {
  justify-content: center;
}
#results.stepped .res-camp,
#results.stepped .res-unlocks {
  align-items: center;
  justify-content: center;
}
#results.stepped [data-step].on {
  animation: rise 0.35s var(--ease-out) both;
}
#results.stepped .res-actions {
  animation: rise 0.35s var(--ease-out) both;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#results.stepped .res-actions .btn {
  min-width: 0;
}
#results.stepped .res-actions #r-next {
  grid-column: 1 / -1;
  order: -1;
  min-height: 58px;
}
#results.stepped .res-actions #r-menu[hidden] + * {
  grid-column: auto;
}
#results.stepped .rr-head {
  flex-wrap: wrap;
  row-gap: 6px;
}
#results.stepped .rr-status {
  order: 3;
  flex-basis: 100%;
}
#results.stepped .rr-head #rr-open {
  margin-left: auto;
}

/* ---------- photosensitivity warning before "tap to start": calm, still, nothing flashes ---------- */
.photowarn {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: calc(24px + var(--safe-t)) calc(22px + var(--safe-r)) calc(24px + var(--safe-b))
    calc(22px + var(--safe-l));
  background: #05060f;
  color: #e9ecf6;
  opacity: 1;
  transition: opacity 0.45s ease;
  cursor: pointer;
}
.photowarn[hidden] {
  display: none;
}
.photowarn.gone {
  opacity: 0;
  pointer-events: none;
}
.pw-card {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.pw-icon {
  width: 46px;
  height: 46px;
  color: #ffc23d;
}
.pw-card h2 {
  margin: 0;
  font: 600 clamp(30px, 6.4vw, 44px) / 1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}
#pw-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#pw-body p {
  margin: 0;
  font-size: clamp(15px, 3.9vw, 17px);
  line-height: 1.5;
  color: rgba(233, 236, 246, 0.92);
}
.pw-tip {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(233, 236, 246, 0.62);
}
.pw-go {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(233, 236, 246, 0.7);
}
.pw-go .tap-keys {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .pw-go .tap-keys {
    display: inline;
  }
  .pw-go .tap-touch {
    display: none;
  }
}
.pw-timer {
  display: block;
  width: 120px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.pw-timer b {
  display: block;
  height: 100%;
  width: 100%;
  background: rgba(255, 194, 61, 0.8);
  transform-origin: left;
  transform: scaleX(1);
}
.photowarn.counting .pw-timer b {
  transform: scaleX(0);
  transition: transform var(--pw-ms, 8000ms) linear;
}

/* photosensitive mode: everything that pulses or flashes in the menus stands still */
body.photosafe .tap,
body.photosafe .eq i,
body.photosafe #bg .glow,
body.photosafe .cover-stage.spinning .disc canvas,
body.photosafe .loadbar i::after {
  animation: none !important;
}
body.photosafe .tour-flash {
  display: none !important;
}
body.photosafe .burst {
  display: none !important;
}
body.photosafe .grade.reveal {
  animation: none !important;
  transform: none;
  opacity: 1;
}
body.photosafe #wipe {
  display: none;
}

/* online: why an invite or a code did not work, and what to do next */
.on-notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 93, 126, 0.45);
  background: rgba(255, 61, 110, 0.12);
}
.on-notice[hidden] {
  display: none;
}
.on-notice > svg {
  width: 26px;
  height: 26px;
  color: #ff8aa4;
  fill: currentColor;
  margin-top: 2px;
}
.on-notice b {
  display: block;
  font: 600 24px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  padding-top: 3px;
}
.on-notice p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}
.on-notice .btn {
  grid-column: 2;
  justify-self: start;
}
#home-fs svg {
  width: 20px;
  height: 20px;
}

/* ---------- phones: the tour in two steps — the stages (2 x 2), then a stage's songs in a sheet over them ---------- */
.vd-close {
  display: none;
}
#tour.sheet-mode .tour-road {
  overflow: visible;
  padding-top: 30px;
  margin-bottom: 0;
}
#tour.sheet-mode .venues {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 12px;
}
#tour.sheet-mode .venue-detail {
  position: fixed;
  inset: 0;
  z-index: 9;
  margin: 0;
  max-width: none;
  border-radius: 0;
  border: 0;
  padding: calc(12px + var(--safe-t)) calc(14px + var(--safe-r)) calc(14px + var(--safe-b))
    calc(14px + var(--safe-l));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  background: rgba(4, 5, 16, 0.84);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.2s,
    transform 0.28s var(--ease-out),
    visibility 0s linear 0.28s;
}
#tour.sheet-mode.sheet-open .venue-detail {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 0.2s,
    transform 0.28s var(--ease-out);
}
#tour.sheet-mode .vd-head {
  align-items: center;
  gap: 12px;
}
#tour.sheet-mode .vd-close {
  display: grid;
  flex: none;
}
#tour.sheet-mode .vd-titles {
  flex: 1 1 auto;
  min-width: 0;
}
#tour.sheet-mode .vd-songs {
  grid-template-columns: 1fr;
}
#tour.sheet-mode .v-lock {
  place-items: start end;
  padding: 10px;
}
#tour.sheet-mode .v-lock svg {
  width: 18px;
  height: 18px;
}
.privacy-note {
  position: absolute;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 660px);
  z-index: 4;
  font: 12px/1.5 sans-serif;
  text-align: center;
  color: #b8bbcd;
}
.privacy-note summary {
  cursor: pointer;
}
.privacy-note[open] {
  padding: 12px;
  border-radius: 12px;
  background: #101223f5;
}