@font-face {
  font-family: 'SchoolSafetyStarrySky';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimByeolbichhaneulTTF-B.woff2')
    format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SchoolSafetyStarrySky';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimByeolbichhaneulTTF-B.woff2')
    format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'LotteMartDream';
  src:
    url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2')
      format('woff2'),
    url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff')
      format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LotteMartDream';
  src:
    url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2')
      format('woff2'),
    url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff')
      format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GlowSansSCCondensedHeavy';
  src: url('./assets/fonts/glow-sans-sc-condensed-heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GlowSansSCCondensedHeavy';
  src: url('./assets/fonts/glow-sans-sc-condensed-heavy.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GlowSansSCCondensedBook';
  src: url('./assets/fonts/glow-sans-sc-condensed-book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GlowSansSCCondensedBook';
  src: url('./assets/fonts/glow-sans-sc-condensed-book.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GlowSansTCCondensedHeavy';
  src: url('./assets/fonts/glow-sans-tc-condensed-heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GlowSansTCCondensedBook';
  src: url('./assets/fonts/glow-sans-tc-condensed-book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GlowSansTCCondensedBook';
  src: url('./assets/fonts/glow-sans-tc-condensed-book.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GlowSansJPCondensedBook';
  src: url('./assets/fonts/glow-sans-j-condensed-book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GlowSansJPCondensedBook';
  src: url('./assets/fonts/glow-sans-j-condensed-book.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GlowSansTCCondensedHeavy';
  src: url('./assets/fonts/glow-sans-tc-condensed-heavy.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg-deep: #060612;
  --bg-panel: #0d0d2b;
  --bg-surface: #1a1a44;
  --electric: #00d4ff;
  --electric-deep: #0055ff;
  --electric-bright: #66eeff;
  --white: #ffffff;
  --gold: #ffd700;
  /* Shared width of the song-card badge units: the difficulty badge and the
     PB+rank combo are kept identical off this. Text squishes to fit (see
     _fitRecordText), so this can go quite narrow without overflowing. */
  --badge-unit-w: 64px;
  --red: #ff2233;
  --green: #00ff66;
  --yellow: #ffee00;
  --border: #000000;
  --safe-top: 0px;
  --safe-right: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
  --app-left: 0px;
  --app-top: 0px;
  --app-right-gap: 0px;
  --app-bottom-gap: 0px;
  --app-main-font:
    'WDXL Lubrifont JP N', 'WDXL Lubrifont SC', 'LotteMartDream', 'Impact', 'Arial Black',
    sans-serif;
  --noto-ui-font:
    'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans', sans-serif;
  --level-number-font: 'Noto Sans', 'Arial Black', sans-serif;
  /* Outline thickness tracks font size (em), but above ~34px it grows at half
     rate so large text (result accuracy, callouts) keeps a readable fill. */
  --arcade-outline-thin-em: min(0.035em, calc(0.0175em + 0.6px));
  --arcade-outline-bold-em: min(0.055em, calc(0.0275em + 0.94px));
  --arcade-outline-thin-neg: max(-0.035em, calc(-0.0175em - 0.6px));
  --arcade-outline-bold-neg: max(-0.055em, calc(-0.0275em - 0.94px));
  --arcade-outline-thin:
    var(--arcade-outline-thin-em) 0 0 var(--border),
    var(--arcade-outline-thin-neg) 0 0 var(--border),
    0 var(--arcade-outline-thin-em) 0 var(--border),
    0 var(--arcade-outline-thin-neg) 0 var(--border),
    var(--arcade-outline-thin-em) var(--arcade-outline-thin-em) 0 var(--border),
    var(--arcade-outline-thin-neg) var(--arcade-outline-thin-em) 0 var(--border),
    var(--arcade-outline-thin-em) var(--arcade-outline-thin-neg) 0 var(--border),
    var(--arcade-outline-thin-neg) var(--arcade-outline-thin-neg) 0 var(--border);
  --arcade-outline-bold:
    var(--arcade-outline-thin), var(--arcade-outline-bold-em) 0 0 var(--border),
    var(--arcade-outline-bold-neg) 0 0 var(--border),
    0 var(--arcade-outline-bold-em) 0 var(--border),
    0 var(--arcade-outline-bold-neg) 0 var(--border),
    var(--arcade-outline-bold-em) var(--arcade-outline-thin-em) 0 var(--border),
    var(--arcade-outline-bold-neg) var(--arcade-outline-thin-em) 0 var(--border),
    var(--arcade-outline-bold-em) var(--arcade-outline-thin-neg) 0 var(--border),
    var(--arcade-outline-bold-neg) var(--arcade-outline-thin-neg) 0 var(--border),
    var(--arcade-outline-thin-em) var(--arcade-outline-bold-em) 0 var(--border),
    var(--arcade-outline-thin-neg) var(--arcade-outline-bold-em) 0 var(--border),
    var(--arcade-outline-thin-em) var(--arcade-outline-bold-neg) 0 var(--border),
    var(--arcade-outline-thin-neg) var(--arcade-outline-bold-neg) 0 var(--border);
}
:root[data-locale='zh'] {
  --noto-ui-font:
    'Noto Sans SC', 'Noto Sans CJK SC', 'Noto Sans', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC',
    sans-serif;
}
:root[data-locale='zh-tw'] {
  --noto-ui-font:
    'Noto Sans TC', 'Noto Sans CJK TC', 'Noto Sans', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC',
    sans-serif;
}
:root[data-locale='ja'] {
  --noto-ui-font:
    'Noto Sans JP', 'Noto Sans CJK JP', 'Noto Sans', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC',
    sans-serif;
}
:root[data-locale='ko'] {
  --noto-ui-font:
    'Noto Sans KR', 'Noto Sans CJK KR', 'Noto Sans', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans TC',
    sans-serif;
}
@supports (padding-top: constant(safe-area-inset-top)) {
  :root {
    --safe-top: constant(safe-area-inset-top);
    --safe-right: constant(safe-area-inset-right);
    --safe-bottom: constant(safe-area-inset-bottom);
    --safe-left: constant(safe-area-inset-left);
  }
}
@supports (padding-top: env(safe-area-inset-top)) {
  :root {
    --safe-top: env(safe-area-inset-top);
    --safe-right: env(safe-area-inset-right);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  min-height: -webkit-fill-available;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg-deep);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  color: var(--white);
  text-transform: var(--locale-text-transform, uppercase);
}
.song-title,
.song-meta,
.diff-select-title,
.diff-select-artist,
.result-song-title,
.result-song-artist,
.story-challenge-card-title,
.story-challenge-card-artist,
.story-challenge-next-title,
.story-challenge-next-artist,
.story-unlock-title,
.story-unlock-artist,
.song-order-song-title,
.song-order-artist,
.credits-name,
.credits-track-list > div > span:first-child,
.credits-artist-credit,
.credits-source-credit,
.credits-contributor-credit {
  font-family: var(--app-main-font);
}
#screen-credits,
#screen-credits *,
#screen-terms,
#screen-terms * {
  font-family: var(--noto-ui-font);
}
html,
body,
body * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Globally suppress double-tap/double-click to zoom. Elements that need a
     stricter value (gameplay surfaces use none, scroll lists use pan-y) set
     their own touch-action and still win on specificity. */
  touch-action: manipulation;
}
input:not([type]),
input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
textarea,
[contenteditable]:not([contenteditable='false']) {
  -webkit-user-select: text;
  user-select: text;
}
#screen-credits,
#screen-credits *,
#screen-terms,
#screen-terms *,
.story-reader-log,
.story-reader-log * {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}
img,
svg,
canvas {
  -webkit-user-drag: none;
  user-drag: none;
}
canvas {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  height: 100%;
  min-height: var(--app-height, 100dvh);
}

#game {
  position: fixed;
  left: var(--app-left, 0px);
  top: var(--app-top, 0px);
  width: var(--app-width, 100vw);
  height: var(--app-height, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html.gameplay-touch-locked,
html.gameplay-touch-locked body {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#canvas {
  position: absolute;
  inset: 0;
  width: var(--app-width, 100vw);
  height: var(--app-height, 100dvh);
  display: block;
}

/* ---- Arcade text outline: shadow-based so Android keeps the fill readable. ---- */
h1,
h2,
.btn,
.ed-btn,
.loading-text,
.pause-callout,
.result-callout,
#result-heading,
#result-accuracy,
#result-accuracy-label,
.result-accuracy-label,
.story-result-accuracy,
.autoplay-row label,
.screen .subtitle,
#screen-result td {
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: var(--arcade-outline-bold);
}

/* ---- Screens ---- */
.screen {
  position: fixed;
  top: var(--app-top, 0px);
  left: var(--app-left, 0px);
  width: var(--app-width, 100vw);
  height: var(--app-height, 100dvh);
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--white);
  z-index: 10;
  overflow: hidden;
}
.screen:not(#screen-editor)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, #c0d0f0 1px, transparent 1px),
    linear-gradient(to bottom, #c0d0f0 1px, transparent 1px);
  background-size: 36px 36px;
  animation: grid-drift 2s linear infinite;
  pointer-events: none;
}
.screen > * {
  position: relative;
  z-index: 1;
}
.screen.hidden {
  display: none !important;
}

/* ---- Typography ---- */
.screen h1 {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 8px;
  color: var(--white);
  margin-bottom: 4px;
}
.screen .subtitle {
  font-size: 12px;
  letter-spacing: 5px;
  color: var(--border);
  margin-bottom: 36px;
}
.screen h2 {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 6px;
  color: var(--white);
  margin-bottom: 10px;
}

/* ---- Logo ---- */
.logo-wrap {
  --logo-group-scale: 1;
  --logo-group-bottom-space: 0px;

  position: relative;
  display: block;
  margin: 0 auto calc(4px + var(--logo-group-bottom-space));
  overflow: visible;
  width: fit-content;
  perspective: 18vmin;
  transform: scale(var(--logo-group-scale));
  transform-origin: center;
}
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  overflow: visible;
  font-family: 'Noto Sans', var(--noto-ui-font), sans-serif;
  font-size: clamp(34px, 9.2vw, 84px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  min-height: 2.1em;
  perspective: 18vmin;
  transform-style: preserve-3d;
}
.logo-word {
  position: relative;
  z-index: 0;
  display: inline-block;
  color: var(--white);
  -webkit-text-fill-color: var(--white);
  transform-style: preserve-3d;
}
.logo-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--white);
  -webkit-text-fill-color: var(--white);
}
.logo-word-left {
  transform-origin: right center;
  transform: perspective(18vmin) rotateY(var(--title-logo-left-tilt, -8deg)) scale(2);
}
.logo-word-right {
  transform-origin: left center;
  transform: perspective(18vmin) rotateY(var(--title-logo-right-tilt, 8deg)) scale(2);
}
.sparkle {
  position: absolute;
  background: var(--white);
  clip-path: polygon(50% 0%, 54% 42%, 100% 50%, 54% 58%, 50% 100%, 46% 58%, 0% 50%, 46% 42%);
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  animation: sparkle-flash 0.2s steps(2) infinite;
}

/* ---- Buttons ---- */
.btn {
  padding: 14px 44px;
  font-size: 15px;
  font-weight: bold;
  border: 3px solid var(--border);
  background: var(--electric);
  color: var(--white);
  border-radius: 0;
  letter-spacing: 4px;
  cursor: pointer;
  text-transform: uppercase;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  box-shadow: 4px 4px 0 var(--border);
  transition:
    transform 0.08s,
    box-shadow 0.08s;
}
.btn:active {
  background: var(--border);
  color: var(--white);
  box-shadow: 1px 1px 0 var(--border);
  transform: translate(3px, 3px);
}
.btn:disabled {
  background: #8a8a99;
  color: var(--white);
  cursor: not-allowed;
  opacity: 0.72;
}
.btn:disabled:active {
  background: #8a8a99;
  box-shadow: 3px 3px 0 var(--border);
  transform: none;
}
.btn-ghost {
  background: var(--gold);
  border-color: var(--border);
  color: var(--white);
  font-size: 13px;
  padding: 12px 32px;
  box-shadow: 3px 3px 0 var(--border);
}
.btn-ghost:active {
  background: var(--border);
  color: var(--white);
  box-shadow: 1px 1px 0 var(--border);
  transform: translate(2px, 2px);
}
.btn-clear-data {
  width: 292px;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
}
.btn-clear-data.is-confirming {
  background: var(--red);
  color: var(--white);
}

/* ---- Title screen ---- */
/* The first screen: logo + START GAME, with the version pinned to the bottom. */
#screen-title {
  justify-content: center;
}
.title-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
.title-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(320px, calc(100vw - 64px));
}
.title-actions .btn {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
}
.title-version {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-bottom) + 14px);
  text-align: center;
  font-size: 11px;
  letter-spacing: 2px;
  color: #888;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  -webkit-text-stroke: 0;
}
.title-legal-entry {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-bottom) + 33px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}
.title-terms-button {
  border: 0;
  background: transparent;
  color: #555;
  cursor: pointer;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-size: 11px;
  letter-spacing: 2px;
  text-decoration: underline;
  text-transform: none;
  -webkit-text-stroke: 0;
}
.title-terms-button:active {
  color: var(--border);
}
#btn-credits {
  text-transform: none;
}
.title-content-warning {
  position: absolute;
  left: calc(var(--safe-left) + 20px);
  right: calc(var(--safe-right) + 20px);
  bottom: calc(var(--safe-bottom) + 58px);
  color: #777;
  font-size: 11px;
  letter-spacing: 0;
  line-height: 1.35;
  text-align: center;
  text-transform: none;
  -webkit-text-stroke: 0;
}
.title-wip-label {
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: none;
}
.title-content-note {
  margin-top: 8px;
}
@media (max-height: 640px) {
  .title-screen {
    gap: 18px;
    transform: translateY(-28px);
  }
  .logo-wrap {
    --logo-group-scale: 1.08;
    --logo-group-bottom-space: 10px;
  }
  .logo {
    font-size: clamp(30px, 8vw, 68px);
  }
  .title-actions {
    gap: 8px;
  }
  .title-actions .btn {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .title-content-warning {
    bottom: calc(var(--safe-bottom) + 48px);
    font-size: 10px;
    line-height: 1.2;
  }
  .title-content-note {
    margin-top: 4px;
  }
  .title-legal-entry {
    bottom: calc(var(--safe-bottom) + 26px);
  }
  .title-version {
    bottom: calc(var(--safe-bottom) + 7px);
  }
}
@media (max-height: 540px) {
  .title-screen {
    gap: 12px;
    transform: translateY(-34px);
  }
  .logo-wrap {
    --logo-group-scale: 1.04;
    --logo-group-bottom-space: 8px;
  }
  .logo {
    font-size: clamp(28px, 7.4vw, 60px);
  }
  .title-content-warning {
    bottom: calc(var(--safe-bottom) + 42px);
    font-size: 9px;
    line-height: 1.15;
  }
  .title-wip-label {
    font-size: 10px;
  }
}
@media (max-width: 700px) {
  .logo-wrap {
    --logo-group-scale: 1.08;
    --logo-group-bottom-space: 14px;
  }
}
/* Catalog load feedback (e.g. a failed fetch), shown under START GAME. Reserves
   its line height so the layout doesn't jump when a message appears. */
.title-status {
  min-height: 1em;
  margin-top: -16px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--red);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  -webkit-text-stroke: 0;
}

/* ---- Story mode ---- */
#screen-story,
#screen-story-reader,
#screen-story-challenge {
  justify-content: flex-start;
}
#screen-story-challenge.story-result-screen {
  background: var(--white);
}
#screen-story-challenge.story-result-screen::before {
  opacity: 1;
}
.title-actions .hidden {
  display: none;
}
.story-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(100%, 840px);
  height: 100%;
  padding: 18px 20px 24px;
}
.story-topbar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
#btn-story-back {
  justify-self: start;
  width: auto;
  min-width: 0;
}
.story-title-block {
  min-width: 0;
  text-align: center;
}
.story-kicker,
.story-chapter-status,
.story-challenge-song,
.story-challenge-summary,
.story-hp-label,
.story-chapter-card-state,
.story-tier-desc,
.story-reader-hint,
.story-reader-action,
.story-challenge-song-card,
.story-unlock-flyout {
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.story-kicker {
  color: var(--electric-deep);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
}
.story-active-title {
  color: var(--border);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-chapter-list,
.story-challenge-panel {
  background: var(--white);
  border: 4px solid var(--border);
  box-shadow: 6px 6px 0 var(--border);
}
.story-chapter-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}
.story-chapter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}
.story-chapter-row.challenge-ready {
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 10px;
}
.story-chapter-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 74px;
  padding: 12px;
  border: 3px solid var(--border);
  background: var(--white);
  color: var(--border);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: 3px 3px 0 var(--border);
}
.story-chapter-card:not(:disabled):hover,
.story-chapter-challenge:hover,
.story-tier-card:hover {
  filter: brightness(1.04);
}
.story-chapter-card:not(:disabled):active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--border);
}
.story-chapter-challenge:active {
  transform: translate(2px, 2px);
}
.story-tier-card:active {
  transform: scale(0.96);
}
.story-tier-card.active:active {
  transform: scale(1.02);
}
.story-chapter-card.active {
  background: var(--electric);
  color: var(--white);
  outline: 4px solid var(--gold);
  outline-offset: -7px;
}
.story-chapter-card.completed {
  border-color: #10a86a;
}
.story-chapter-card.locked {
  background: #d7d9e0;
  color: #777;
  cursor: not-allowed;
  opacity: 0.82;
}
.story-chapter-card:disabled {
  box-shadow: none;
}
.story-chapter-num {
  font-family: var(--level-number-font);
  font-size: 28px;
  font-weight: 900;
  grid-row: 1 / 3;
}
.story-chapter-card-title {
  min-width: 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-chapter-card-state {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}
.story-chapter-challenge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  padding: 0;
  border: 3px solid var(--border);
  background: var(--gold);
  color: var(--border);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: 4px 4px 0 var(--border);
  overflow: hidden;
}
.story-chapter-challenge-text {
  display: block;
  transform: rotate(90deg) scaleX(0.72);
  transform-origin: center center;
  white-space: nowrap;
  pointer-events: none;
}
.story-chapter-row.active .story-chapter-challenge {
  background: var(--gold);
  color: var(--border);
  outline: 0;
  box-shadow: 4px 4px 0 var(--border);
}
.story-chapter-status {
  margin-top: 4px;
  color: #555;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}
#story-sky-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
#story-scene-fade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 214, 161, 0.7), rgba(253, 154, 86, 0.88)),
    radial-gradient(circle at 50% 90%, rgba(255, 234, 180, 0.75), rgba(255, 164, 96, 0));
  opacity: 0;
  transform: translateY(100%);
}
#story-scene-fade.active {
  animation: story-scene-fade 560ms ease-in-out;
}
@keyframes story-scene-fade {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  42% {
    opacity: 0.86;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}
.story-reader-page {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(100%, 760px);
  height: 100%;
  padding: 18px 20px 24px;
  gap: 14px;
}
.story-reader-topbar {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 12px;
  padding-left: 0;
  flex-shrink: 0;
}
.story-reader-actions {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0;
  transform: translate(calc(-100% + 34px), -50%);
  transition: transform 0.18s ease;
}
.story-reader-actions.open {
  transform: translate(0, -50%);
}
.story-reader-actions-toggle {
  order: 2;
  width: 30px;
  height: 48px;
  border: 3px solid var(--border);
  border-left: 0;
  background: var(--gold);
  color: var(--border);
  cursor: pointer;
  font-family: inherit;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 3px 3px 0 var(--border);
}
.story-reader-actions-panel {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 82px;
  padding: 6px;
  border: 3px solid var(--border);
  border-left: 0;
  background: var(--white);
  box-shadow: 4px 4px 0 var(--border);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}
.story-reader-actions-panel[aria-hidden='true'] {
  pointer-events: none;
}
.story-reader-actions.open .story-reader-actions-panel {
  opacity: 1;
  pointer-events: auto;
}
.story-reader-action {
  min-height: 30px;
  min-width: 68px;
  border: 2px solid var(--border);
  background: var(--electric);
  color: var(--white);
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}
.story-reader-action.hidden {
  display: none;
}
.story-reader-action:active,
.story-reader-actions-toggle:active {
  transform: translateY(1px);
}
.story-reader-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 14px;
  border: 4px solid var(--border);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 6px 6px 0 var(--border);
  cursor: pointer;
}
.story-reader-stage:focus-visible,
#cal-canvas:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
.story-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 4px 12px;
}
.story-line {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.story-line-narration {
  grid-template-columns: minmax(0, 1fr);
  padding-left: 82px;
}
.story-avatar-wrap {
  --story-character-main: var(--gold);
  --story-character-sub: var(--electric);
  width: 70px;
  height: 70px;
  border: 3px solid var(--border);
  background: linear-gradient(135deg, var(--story-character-main), var(--story-character-sub));
  box-shadow: 3px 3px 0 var(--border);
  overflow: hidden;
}
.story-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story-avatar-silhouette .story-avatar {
  filter: brightness(0);
  opacity: 0.72;
}
.story-line-body {
  min-width: 0;
  background: var(--white);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 var(--border);
  padding: 10px 12px;
}
.story-line-narration .story-line-body {
  background: #f4f7ff;
  border-style: dashed;
}
.story-speaker {
  color: var(--electric-deep);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.story-line-text {
  color: var(--border);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.story-empty {
  color: #777;
  font-size: 14px;
  letter-spacing: 1px;
  text-align: center;
  padding: 40px 12px;
}
.story-reader-hint {
  flex-shrink: 0;
  color: var(--border);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-align: center;
  padding-top: 10px;
  border-top: 3px solid var(--border);
}
.story-tier-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 0 12px;
}
.story-tier-list.hidden,
.story-challenge-song-list-wrap.hidden {
  display: none;
}
.story-tier-card {
  min-height: 56px;
  padding: 8px;
  border: 2px solid var(--diff-color, var(--electric));
  background: var(--diff-color, var(--electric));
  color: var(--white);
  cursor: pointer;
  font-family: inherit;
  box-shadow: none;
  transform-origin: center center;
  transition:
    transform 0.06s ease,
    filter 0.12s ease;
}
.story-tier-card.active {
  z-index: 2;
  border-color: var(--diff-color, var(--electric));
  background-image: linear-gradient(
    110deg,
    var(--diff-a, var(--diff-color)) 0%,
    var(--diff-b, var(--diff-color)) 50%,
    var(--diff-a, var(--diff-color)) 100%
  );
  background-size: 200% 100%;
  color: var(--white);
  box-shadow:
    inset 0 0 0 2px var(--white),
    inset 0 0 14px 4px var(--diff-color),
    0 0 0 3px var(--white),
    0 0 18px 6px var(--diff-color);
  transform: scale(1.06);
  animation: diff-flow 1.8s linear infinite;
}
.story-tier-label,
.story-tier-desc {
  display: block;
}
.story-tier-label {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
}
.story-tier-desc {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
}
.story-challenge-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  position: fixed;
  left: var(--app-left, 0px);
  bottom: calc(var(--app-bottom-gap, 0px) + var(--safe-bottom) + 16px);
  z-index: 14;
  width: var(--app-width, 100vw);
  padding: 0 20px;
}
.story-challenge-buttons .hidden {
  display: none;
}
.story-challenge-buttons .btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 230px;
  padding: 12px 12px;
  letter-spacing: 2px;
  white-space: nowrap;
}
.story-challenge-buttons .btn-share {
  justify-content: center;
}
.story-challenge-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(100% - 40px, 520px);
  max-height: calc(100% - 134px);
  margin: 22px auto calc(var(--safe-bottom) + 92px);
  padding: 28px;
  color: var(--border);
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
  --result-outline-thin: var(--arcade-outline-thin);
  --result-outline-bold: var(--arcade-outline-bold);
}
.story-challenge-panel.showing-result {
  height: auto;
  min-height: 0;
  gap: 9px;
  padding: 20px 28px 28px;
}
.story-challenge-panel > * {
  flex-shrink: 0;
}
/* Keep the result panel a fixed size as the run's rows/HP/sub-rank reveal: while
   in result mode the not-yet-shown pieces reserve their space (visibility:hidden)
   instead of collapsing (display:none), so the panel never grows mid-sequence. */
.story-challenge-panel.showing-result .story-challenge-table.hidden {
  display: table;
  visibility: hidden;
}
.story-challenge-panel.showing-result .story-hp-wrap.hidden {
  display: flex;
  visibility: hidden;
}
.story-challenge-panel.showing-result #story-challenge-subrank.hidden {
  display: inline-block;
  visibility: hidden;
}
.story-challenge-panel.is-result {
  background: var(--white);
  color: var(--border);
  border-color: var(--border);
  box-shadow: 6px 6px 0 var(--border);
}
.story-challenge-panel.is-result .story-kicker,
.story-challenge-panel.is-result .story-challenge-song,
.story-challenge-panel.is-result .story-challenge-summary,
.story-challenge-panel.is-result .story-hp-label,
.story-challenge-panel.is-result .story-result-accuracy-label,
.story-challenge-panel.is-result .story-challenge-table,
.story-challenge-panel.is-result .story-challenge-table td {
  color: var(--border);
}
.story-challenge-panel h2 {
  margin: 0;
  color: var(--white);
  font-size: 30px;
  letter-spacing: 4px;
}
.story-challenge-panel.showing-result h2 {
  display: none;
}
.story-challenge-panel.showing-result .story-kicker {
  align-self: flex-start;
  max-width: 100%;
  color: var(--electric-deep);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1.35;
  text-align: left;
}
.story-challenge-panel.showing-result .story-result-zone {
  order: 4;
}
.story-challenge-panel.showing-result .story-challenge-table {
  order: 5;
}
.story-challenge-panel.showing-result .story-hp-wrap {
  order: 6;
}
.story-challenge-panel.showing-result .story-challenge-next-card {
  order: 7;
}
.story-challenge-panel.showing-result .story-challenge-summary {
  order: 8;
}
.story-challenge-panel.showing-final {
  height: auto;
  min-height: 0;
}
.story-challenge-panel.showing-final .story-challenge-summary {
  order: 4;
}
.story-challenge-panel.showing-final .story-challenge-final {
  order: 5;
}
.story-challenge-song {
  color: #555;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.story-challenge-panel.showing-result .story-challenge-song {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  color: var(--electric-deep);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.45;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-result-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.story-result-zone.hidden {
  display: none;
}
.story-result-accuracy-label {
  color: var(--border);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 4px;
}
.story-result-accuracy {
  color: var(--electric-deep);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1;
  text-shadow: none;
}
.story-result-gauge {
  width: min(380px, 78vw);
}
.story-result-callout-stack {
  gap: 0;
  /* Float over neighbours like the free-mode result callout (see
     .result-callout-stack): glow overflows instead of reserving a tall band. */
  position: relative;
  z-index: 3;
  margin-block: -4px -2px;
  padding-block: 6px 2px;
}
#story-challenge-subrank.hidden {
  display: none;
}
#story-challenge-subrank {
  color: var(--gold);
  font-size: 22px;
  text-shadow: var(--result-outline-thin);
}
.story-challenge-song-list-wrap {
  position: relative;
}
.story-challenge-song-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: -18px 0;
  padding: 18px 30px;
  scroll-padding-inline: 30px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.story-challenge-song-list::-webkit-scrollbar {
  display: none;
}
.story-challenge-song-list-wrap::before,
.story-challenge-song-list-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.story-challenge-song-list-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--white) 35%, rgba(255, 255, 255, 0));
}
.story-challenge-song-list-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--white) 35%, rgba(255, 255, 255, 0));
}
.story-challenge-song-list-wrap.can-left::before {
  opacity: 1;
}
.story-challenge-song-list-wrap.can-right::after {
  opacity: 1;
}
.story-challenge-scroll-cue {
  position: absolute;
  top: 50%;
  z-index: 4;
  pointer-events: none;
  color: var(--border);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  text-shadow:
    0 0 6px var(--white),
    0 0 10px var(--white);
  transform: translate(0, -50%);
  transition: opacity 0.2s ease;
}
.story-challenge-scroll-cue-left {
  left: 4px;
  --cue-shift: -4px;
}
.story-challenge-scroll-cue-right {
  right: 4px;
  --cue-shift: 4px;
}
.story-challenge-song-list-wrap.can-left .story-challenge-scroll-cue-left,
.story-challenge-song-list-wrap.can-right .story-challenge-scroll-cue-right {
  opacity: 1;
  animation: diff-cue-pulse 1s ease-in-out infinite;
}
.story-challenge-song-card {
  position: relative;
  flex: 0 0 170px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px;
  border: 3px solid var(--border);
  color: var(--border);
  background: var(--white);
  box-shadow: none;
}
.story-challenge-song-card.is-new-song {
  border-color: #111;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.82),
    0 0 14px 3px rgba(0, 212, 255, 0.8),
    0 0 22px 7px rgba(255, 211, 38, 0.58),
    0 0 34px 12px rgba(255, 60, 255, 0.46);
  animation: story-new-song-rainbow-glow 1.35s ease-in-out infinite alternate;
}
.story-challenge-song-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  background: var(--electric);
  color: var(--white);
  border: 2px solid var(--border);
  font-family: var(--level-number-font);
  font-weight: 900;
}
.story-challenge-cover-wrap {
  width: 100%;
  aspect-ratio: 1;
  border: 3px solid var(--border);
  overflow: hidden;
  background: #f4f7ff;
}
.story-challenge-cover {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.story-challenge-card-title,
.story-challenge-card-artist,
.story-challenge-card-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}
.story-challenge-card-title {
  font-size: 13px;
  font-weight: 900;
}
.story-challenge-card-artist {
  color: #555;
  font-size: 11px;
}
.story-challenge-card-meta {
  color: var(--electric-deep);
  font-size: 11px;
  font-weight: 900;
}
.story-hp-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.story-hp-wrap.hidden {
  display: none;
}
.story-hp-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--border);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}
.story-hp-body {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px;
  align-items: center;
  justify-content: start;
}
.story-heart-meter {
  display: grid;
  grid-template-columns: repeat(5, 15px);
  grid-auto-rows: 14px;
  gap: 1px 4px;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.story-hp-value {
  min-width: 68px;
  color: var(--border);
  font-family: var(--level-number-font);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: right;
  text-transform: none;
  -webkit-text-stroke: 0;
  text-shadow: none;
  white-space: nowrap;
}
.story-challenge-panel.is-result .story-hp-value {
  color: var(--border);
}
.story-heart-shell {
  position: relative;
  display: block;
  width: 15px;
  height: 14px;
  transform-origin: center center;
  overflow: visible;
}
.story-heart {
  display: block;
  width: 15px;
  height: 14px;
  overflow: visible;
}
.story-heart-bg {
  fill: rgba(255, 45, 85, 0.18);
}
.story-heart-piece {
  fill: #ff2d55;
  filter: drop-shadow(0 0 2px rgba(255, 45, 85, 0.62));
}
.story-heart-shell.is-gained {
  animation: story-heart-pop 0.62s cubic-bezier(0.2, 1.55, 0.45, 1) both;
}
.story-heart-shell.is-gained::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -55%;
  width: 55%;
  background: rgba(255, 255, 255, 0.9);
  transform: skewX(-18deg) translateX(-120%);
  animation: story-heart-swipe 0.58s ease-out 0.08s both;
  pointer-events: none;
}
.story-hp-wrap.is-healing .story-heart-meter {
  filter: drop-shadow(0 0 7px rgba(255, 45, 85, 0.32));
}
@keyframes story-heart-pop {
  0% {
    transform: scale(0.58);
    filter: brightness(1.8);
  }
  58% {
    transform: scale(1.26);
    filter: brightness(1.35);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}
@keyframes story-heart-swipe {
  from {
    transform: skewX(-18deg) translateX(-120%);
  }
  to {
    transform: skewX(-18deg) translateX(360%);
  }
}
@keyframes story-danger-glow {
  from {
    box-shadow:
      0 0 10px 2px rgba(155, 77, 255, 0.52),
      0 0 22px 6px rgba(216, 76, 255, 0.26);
  }
  to {
    box-shadow:
      0 0 18px 4px rgba(155, 77, 255, 0.78),
      0 0 36px 10px rgba(216, 76, 255, 0.44);
  }
}
@keyframes story-new-song-rainbow-glow {
  from {
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.82),
      0 0 12px 3px rgba(0, 212, 255, 0.74),
      0 0 20px 7px rgba(255, 211, 38, 0.5),
      0 0 30px 11px rgba(255, 60, 255, 0.38);
  }
  to {
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.92),
      0 0 18px 5px rgba(255, 23, 71, 0.76),
      0 0 28px 9px rgba(0, 255, 102, 0.52),
      0 0 42px 14px rgba(155, 77, 255, 0.5);
  }
}
.story-challenge-summary {
  color: var(--border);
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}
/* Per-letter wave on the hype lines ("Prepare for…", "Review your full challenge
   report."). setWaveText() splits the text into .summary-wave-char spans, each
   offset by --wave-i so the crest rolls left-to-right. */
.story-challenge-summary.summary-wave {
  font-weight: 900;
  letter-spacing: 0.5px;
}
.summary-wave-char {
  display: inline-block;
  white-space: pre;
  animation: summary-wave 1.5s ease-in-out infinite;
  animation-delay: calc(var(--wave-i) * 0.045s);
}
@keyframes summary-wave {
  0%,
  55%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
}
/* Compact "up next" preview card shown between songs of a challenge run. */
.story-challenge-next-card {
  display: flex;
  align-items: center;
  gap: 11px;
  align-self: center;
  width: min(360px, 100%);
  padding: 8px;
  border: 3px solid var(--border);
  background: var(--white);
  text-align: left;
}
.story-challenge-next-card.hidden {
  display: none;
}
.story-challenge-next-cover-wrap {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border: 2px solid var(--border);
  overflow: hidden;
  background: #f4f7ff;
}
.story-challenge-next-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.story-challenge-next-info > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}
.story-challenge-next-kicker {
  color: var(--electric-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
}
.story-challenge-next-title {
  color: var(--border);
  font-size: 14px;
  font-weight: 900;
}
.story-challenge-next-artist {
  color: #555;
  font-size: 11px;
}
.story-challenge-next-meta {
  align-self: flex-start;
  box-sizing: border-box;
  max-width: 100%;
  padding: 3px 7px 2px;
  border: 2px solid var(--border);
  background: var(--song-diff-color, #888);
  color: var(--white);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.story-challenge-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--border);
  font-size: 14px;
  table-layout: fixed;
}
.story-challenge-table tr {
  border-bottom: 2px solid #dbe5f6;
}
.story-challenge-table td {
  color: var(--border);
  padding: 5px 0 4px;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.story-challenge-table td[style] {
  text-shadow: none;
}
.story-challenge-table td:first-child {
  width: auto;
  text-align: left;
  letter-spacing: 1px;
}
.story-challenge-table td.result-table-gap {
  display: none;
}
.story-challenge-table td:last-child {
  width: auto;
  text-align: right;
  font-family: var(--level-number-font);
  font-weight: 900;
}
.story-challenge-table.hidden,
.story-challenge-final.hidden {
  display: none;
}
.story-challenge-final {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.story-challenge-stamp {
  align-self: center;
  padding: 10px 18px;
  border: 5px solid var(--red);
  color: var(--red);
  font-size: clamp(26px, 8vw, 42px);
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 0.92;
  text-align: center;
  transform: rotate(-7deg) scale(0.92);
  opacity: 0;
}
.story-challenge-panel.final-animate .story-challenge-stamp {
  animation: story-stamp-in 0.62s cubic-bezier(0.18, 1.42, 0.32, 1) both;
}
.story-challenge-stamp.is-fail {
  border-color: #8f1f30;
  color: #8f1f30;
}
.story-challenge-final-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.story-final-stage-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 3px solid var(--border);
  background: #f8fbff;
}
.story-final-stage-cover {
  width: 72px;
  height: 72px;
  border: 3px solid var(--border);
  overflow: hidden;
}
.story-final-stage-cover > * {
  width: 100%;
  height: 100%;
}
.story-final-stage-body {
  min-width: 0;
}
.story-final-stage-title,
.story-final-stage-meta,
.story-final-stage-final-hp {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-final-stage-title {
  font-size: 15px;
  font-weight: 900;
  text-transform: none;
}
.story-final-stage-meta,
.story-final-stage-final-hp {
  color: #555;
  font-size: 11px;
  text-transform: none;
}
.story-final-stage-stats {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0;
  color: var(--electric-deep);
  font-family: var(--level-number-font);
  font-size: 15px;
  font-weight: 900;
}
.story-final-stage-stats .is-positive {
  color: #219447;
}
.story-final-stage-stats .is-negative {
  color: var(--red);
}
.story-confetti {
  position: absolute;
  top: -18px;
  left: var(--confetti-x);
  z-index: 8;
  width: 8px;
  height: 13px;
  border: 2px solid rgba(0, 0, 0, 0.18);
  pointer-events: none;
  opacity: 0;
}
.story-challenge-panel.final-animate .story-confetti {
  /* Burst the instant the stamp lands (~0.45s wipe): base delay = stamp hold,
     plus the per-piece scatter offset. */
  animation: story-confetti-fall 1.4s cubic-bezier(0.2, 0.7, 0.3, 1)
    calc(0.42s + var(--confetti-delay)) both;
}
.result-panel .story-confetti {
  animation: story-confetti-fall 1.35s cubic-bezier(0.2, 0.7, 0.3, 1) var(--confetti-delay) both;
}
.credits-boss-layer .story-confetti {
  animation: story-confetti-fall 1.35s cubic-bezier(0.2, 0.7, 0.3, 1) var(--confetti-delay) both;
}
@keyframes story-stamp-in {
  0% {
    opacity: 0;
    transform: rotate(-17deg) scale(1.8);
  }
  62% {
    opacity: 1;
    transform: rotate(-5deg) scale(0.86);
  }
  100% {
    opacity: 1;
    transform: rotate(-7deg) scale(1);
  }
}
@keyframes story-confetti-fall {
  0% {
    opacity: 0;
    transform: translate(0, -34px) rotate(0deg) scale(0.5);
  }
  12% {
    opacity: 1;
    transform: translate(calc(var(--confetti-dx) * 0.25), 14px)
      rotate(calc(var(--confetti-rot) * 0.3)) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(var(--confetti-dx), 380px) rotate(var(--confetti-rot)) scale(1);
  }
}
.story-unlock-overlay.hidden {
  display: none;
}
.story-unlock-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.story-unlock-overlay.is-showing {
  animation: story-unlock-overlay-fade 2.2s ease both;
}
.story-unlock-flyout {
  position: relative;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 10px 18px;
  align-items: center;
  width: min(100% - 28px, 480px);
  padding: 16px;
  border: 3px solid var(--border);
  background: var(--white);
  color: var(--border);
  box-shadow: 6px 6px 0 var(--border);
  overflow: hidden;
  transform-origin: center;
}
.story-unlock-flyout:not(:has(.story-unlock-cover)) {
  grid-template-columns: 1fr;
}
.story-unlock-overlay.is-showing .story-unlock-flyout {
  animation: story-unlock-fly-in 2.05s cubic-bezier(0.18, 0.82, 0.24, 1) both;
}
.story-unlock-flyout::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--electric), var(--gold), #ff4db8);
  pointer-events: none;
}
.story-unlock-cover {
  grid-row: 1 / 4;
  width: 118px;
  height: 118px;
  object-fit: cover;
  border: 3px solid var(--border);
  background: var(--border);
}
.story-unlock-label {
  color: var(--electric-deep);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2.5px;
}
.story-unlock-title {
  color: var(--border);
  font-size: 27px;
  font-weight: 900;
  line-height: 1.05;
  text-transform: none;
}
.story-unlock-artist {
  color: #555;
  font-size: 14px;
  text-transform: none;
}
/* Wipe in (clip reveal from the top + small drop), hold, then wipe out the same
   way, matching the gameplay intro slogan reveal instead of sliding across. */
@keyframes story-unlock-fly-in {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-22px) scale(0.98);
  }
  24% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0) scale(1);
  }
  72% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(22px) scale(0.98);
  }
}
@keyframes story-unlock-overlay-fade {
  0%,
  100% {
    opacity: 0;
  }
  12%,
  78% {
    opacity: 1;
  }
}

@media (max-width: 720px) {
  .story-shell {
    padding: 12px 12px 18px;
  }
  .story-topbar {
    grid-template-columns: auto 1fr;
  }
  .story-title-block {
    grid-column: auto;
    grid-row: auto;
  }
  .story-chapter-list {
    padding: 8px;
  }
  .story-chapter-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .story-chapter-row.challenge-ready {
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 8px;
  }
  .story-chapter-challenge {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .story-challenge-panel {
    width: min(100% - 28px, 520px);
    max-height: calc(100% - 118px);
    margin: 14px auto calc(var(--safe-bottom) + 90px);
    padding: 20px;
    gap: 10px;
  }
  .story-challenge-panel.showing-result {
    height: auto;
    gap: 8px;
    padding: 18px 20px 20px;
  }
  .story-challenge-panel .story-kicker {
    font-size: 11px;
  }
  .story-result-zone {
    gap: 4px;
  }
  .story-result-accuracy {
    font-size: 34px;
  }
  .story-result-gauge {
    width: min(100%, 340px);
  }
  #story-challenge-heading {
    font-size: clamp(30px, 8.8vw, 40px);
    padding: 6px 16px;
  }
  .story-result-callout-stack {
    padding-block: 8px 6px;
  }
  .story-challenge-table {
    font-size: 12px;
  }
  .story-challenge-table td {
    padding: 3px 0 2px;
  }
  .story-hp-body {
    grid-template-columns: auto auto;
    gap: 7px;
  }
  .story-reader-page {
    padding: 12px;
  }
  .story-reader-topbar {
    grid-template-columns: 1fr;
  }
  .story-reader-stage {
    padding: 10px;
  }
  .story-line {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
  }
  .story-line-narration {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
  }
  .story-avatar-wrap {
    width: 52px;
    height: 52px;
  }
  .story-line-text {
    font-size: 15px;
  }
  .story-tier-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .story-challenge-song-list {
    padding-inline: 28px;
  }
  .story-challenge-song-card {
    flex-basis: min(170px, 62vw);
  }
  .story-challenge-buttons {
    width: var(--app-width, 100vw);
    bottom: calc(var(--app-bottom-gap, 0px) + var(--safe-bottom) + 14px);
    padding: 0 14px;
  }
  .story-challenge-buttons .btn {
    padding: 12px 8px;
    letter-spacing: 1.5px;
  }
  .story-challenge-panel.showing-final {
    height: auto;
    gap: 8px;
  }
  .story-final-stage-card {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 8px;
    padding: 7px;
  }
  .story-final-stage-cover {
    width: 56px;
    height: 56px;
  }
  .story-final-stage-title {
    font-size: 13px;
  }
  .story-final-stage-stats {
    font-size: 13px;
  }
  .story-unlock-flyout {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 8px 12px;
    padding: 12px;
  }
  .story-unlock-cover {
    width: 86px;
    height: 86px;
  }
  .story-unlock-label {
    font-size: 12px;
    letter-spacing: 2px;
  }
  .story-unlock-title {
    font-size: 20px;
  }
  .story-unlock-artist {
    font-size: 12px;
  }
}

/* ---- Song list (menu) ---- */
/* Two fixed toolbar rows (controls + filters) sit at the top; the song list is
   the only thing that scrolls. */
#screen-menu {
  justify-content: flex-start;
}
.menu-controls,
.menu-filters {
  flex-shrink: 0;
}
#song-list {
  width: 100%;
  max-width: 480px;
  overflow-y: auto;
  padding: 0 20px 32px;
  flex: 1;
  min-height: 0;
}
.menu-ambient-boss-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}
.menu-ambient-boss {
  --boss-main: #979797;
  --boss-sub: #e1e5ea;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--boss-control-size, clamp(92px, 24vw, 118px));
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  pointer-events: auto;
  touch-action: pan-y;
  user-select: none;
  transform-origin: 50% 72%;
  will-change: transform;
  backface-visibility: hidden;
  isolation: isolate;
  contain: layout style;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.menu-ambient-boss.hidden {
  display: none;
}
.menu-ambient-boss:focus-visible {
  outline: 3px solid var(--electric);
  outline-offset: 2px;
}
.song-menu-empty {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 138px;
  margin-bottom: 12px;
  padding: 22px 24px;
  overflow: hidden;
  border: 3px solid var(--border);
  background: var(--white);
  color: var(--border);
  box-shadow: 4px 4px 0 var(--border);
  text-align: center;
}
.song-menu-empty::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 10px;
  background: var(--electric);
  border-right: 3px solid var(--border);
}
.song-menu-empty-title,
.song-menu-empty-body,
.song-menu-empty-reset {
  position: relative;
  z-index: 1;
}
.song-menu-empty-title {
  color: var(--border);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1.05;
  -webkit-text-stroke: 0;
}
.song-menu-empty-body {
  max-width: 300px;
  color: #555;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.25;
  -webkit-text-stroke: 0;
}
.song-menu-empty-reset {
  margin-top: 3px;
  min-width: min(100%, 166px);
}
.song-local-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  max-width: 112px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid var(--border);
  background: #7b818c;
  color: var(--white);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  -webkit-text-stroke: 0;
}
.song-local-indexeddb {
  background: #7c4dff;
}
.song-local-opfs {
  background: #069676;
}
.song-story-lock-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  border: 2px solid var(--border);
  background: var(--red);
  color: var(--white);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  -webkit-text-stroke: 0;
  text-shadow: var(--arcade-outline-thin);
}
.song-card-locked {
  filter: grayscale(0.7);
}
.song-card-locked .song-jacket,
.song-card-locked .song-info {
  opacity: 0.48;
}
/* ---- Tutorial portal card + curriculum list ---- */
/* Pinned above the catalog; pink accent matches the in-game DEMO color. */
.tutorial-portal-card {
  height: auto;
  min-height: 88px;
  align-items: center;
  border-color: #e33b8c;
  box-shadow: 4px 4px 0 #e33b8c;
  background: linear-gradient(105deg, var(--white) 55%, #ffe3f1 100%);
}
.tutorial-portal-title {
  color: #d81b74;
  letter-spacing: 0.08em;
}
.tutorial-portal-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.tutorial-portal-progress {
  font-weight: 800;
  font-size: 12px;
  color: #d81b74;
  white-space: nowrap;
}
.tutorial-portal-chevron {
  font-size: 30px;
  font-weight: 900;
  color: #d81b74;
  line-height: 1;
}
.tutorial-list-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 14px;
}
.tutorial-list-title {
  font-weight: 900;
  letter-spacing: 0.1em;
  font-size: 18px;
}
/* The filter/sort strip only applies to the catalog, not the fixed curriculum. */
#screen-menu.tutorial-view .menu-filters {
  display: none;
}
.song-local-id {
  color: #8a929b;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0.72;
  -webkit-text-stroke: 0;
  text-transform: none;
}
.diff-select-title .song-local-id {
  font-size: 12px;
  align-self: baseline;
}

/* ---- Reusable fixed-width badge with auto-fitting text ----
   Put .fit-badge on a fixed-width box (overflow is clipped) and wrap its single
   line of text in a .fit-badge-text span. fitBadgeText() (fit-badge.js) compresses
   the span horizontally (scaleX) when the text is too wide. Text that fits stays
   centered at its natural size. The box centers its text and may have horizontal
   padding (the fitter accounts for it). Reuse this pair for any fixed-width badge. */
.fit-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
.fit-badge-text {
  display: inline-block;
  white-space: nowrap;
  transform-origin: center center;
}
.bouncable {
  --bouncable-duration: 440ms;
  --bouncable-origin: 50% 50%;
}
.bouncable-target {
  transform-origin: var(--bouncable-origin);
  will-change: transform;
  backface-visibility: hidden;
}
.bouncable.is-bouncing .bouncable-target {
  animation: bouncable-pop var(--bouncable-duration) both;
}
@keyframes bouncable-pop {
  0% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
  }
  18% {
    transform: scale(0.94);
    animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1);
  }
  42% {
    transform: scale(1.055);
    animation-timing-function: cubic-bezier(0.35, 0, 0.35, 1);
  }
  64% {
    transform: scale(0.988);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  82% {
    transform: scale(1.012);
    animation-timing-function: ease-out;
  }
  100% {
    transform: scale(1);
  }
}

/* ---- Official song ordering submenu (local dev server only) ---- */
#song-order-overlay {
  position: fixed;
  left: var(--app-left, 0px);
  top: var(--app-top, 0px);
  width: var(--app-width, 100vw);
  height: var(--app-height, 100dvh);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 18, 0.72);
  padding: 24px;
}
#song-order-overlay.hidden {
  display: none;
}
.song-order-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  background: var(--white);
  border: 4px solid var(--border);
  box-shadow: 6px 6px 0 var(--border);
  padding: 20px;
}
.song-order-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--border);
}
.song-order-status {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 1px;
  color: #888;
  text-transform: none;
}
.song-order-status.is-error {
  color: #c0303a;
}
.song-order-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 2px;
}
.song-order-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--white);
  border: 3px solid var(--border);
  cursor: grab;
  /* The card itself is the drag handle: keep the browser from scrolling or
     selecting text while a pointer drag is in progress. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.song-order-card.is-dragging {
  cursor: grabbing;
  background: #fff6d8;
  box-shadow: 3px 3px 0 var(--border);
}
.song-order-num {
  min-width: 26px;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--border);
}
.song-order-cover {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: cover;
  border: 2px solid var(--border);
  pointer-events: none;
}
.song-order-copy {
  flex: 1;
  min-width: 0;
}
.song-order-song-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--border);
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.song-order-artist {
  font-size: 11px;
  color: #777;
  margin-top: 2px;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.song-order-grip {
  font-size: 16px;
  color: #999;
}
.song-order-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

/* ---- Difficulty-select (secondary) menu ---- */
#diff-select-overlay {
  position: fixed;
  left: var(--app-left, 0px);
  top: var(--app-top, 0px);
  width: var(--app-width, 100vw);
  height: var(--app-height, 100dvh);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 18, 0.72);
  padding: 24px;
}
#diff-select-overlay.hidden {
  display: none;
}
.diff-select-panel {
  /* overflow-y on its own makes the computed overflow-x "auto", letting the
     absolutely positioned boss preview/glow overflow the panel sideways and
     turn it into a horizontal scroller. Pin overflow-x to hidden so only the
     intended vertical scroll remains. */
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow: hidden auto;
  background: var(--white);
  border: 4px solid var(--border);
  box-shadow: 6px 6px 0 var(--border);
  padding: 24px;
}
/* ---- Detail header: big square cover + song info ---- */
.diff-select-header {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 18px;
  min-height: 200px;
  isolation: isolate;
  z-index: 20;
}
.diff-select-cover {
  width: 200px;
  max-width: 42%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--white);
  border: 3px solid var(--border);
}
.diff-select-headtext {
  flex: 1;
  min-width: 0;
}
.diff-select-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--border);
  line-height: 1.1;
  text-transform: none;
}
.diff-select-title-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.diff-select-artist {
  font-size: 13px;
  letter-spacing: 1px;
  color: #555;
  margin-top: 4px;
  text-transform: none;
}
.diff-select-info {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--border);
  -webkit-text-stroke: 0;
}
.diff-select-info-row {
  display: flex;
  gap: 6px;
}
.diff-select-info-key {
  color: #888;
  font-weight: 900;
  min-width: 56px;
}
.diff-select-info-val {
  min-width: 0;
  font-weight: 900;
  overflow-wrap: anywhere;
  text-transform: none;
}
.diff-select-boss-preview {
  --boss-main: #979797;
  --boss-sub: #e1e5ea;
  --boss-control-size: clamp(92px, 24%, 118px);
  --bouncable-origin: 50% 72%;
  position: absolute;
  right: -2px;
  bottom: 2px;
  z-index: 40;
  width: var(--boss-control-size);
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  touch-action: none;
  user-select: none;
  transform-origin: 50% 72%;
  animation: boss-preview-float 2.6s ease-in-out infinite;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.diff-select-boss-preview.is-dragged {
  position: fixed;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  z-index: 1000;
  animation: none;
  transform: translate3d(var(--boss-left, 0px), var(--boss-top, 0px), 0);
  will-change: transform;
  backface-visibility: hidden;
  isolation: isolate;
  contain: layout style;
}
.diff-select-boss-preview.is-held {
  cursor: grabbing;
}
.diff-select-boss-preview.hidden {
  display: none;
}
.diff-select-boss-preview:focus-visible {
  outline: 3px solid var(--electric);
  outline-offset: 2px;
}
.diff-select-boss-name {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  width: 100%;
  max-width: 70px;
  transform: translateX(-50%);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-size: clamp(8px, 1.9vw, 10px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  pointer-events: none;
  -webkit-text-stroke: 0;
  text-shadow:
    1px 0 0 var(--white),
    -1px 0 0 var(--white),
    0 1px 0 var(--white),
    0 -1px 0 var(--white),
    0 0 8px currentColor;
}
.diff-select-boss-loader {
  display: none;
}
.diff-select-boss-target,
.diff-select-boss-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.diff-select-boss-target {
  overflow: visible;
}
.diff-select-boss-glow {
  position: absolute;
  left: -43px;
  top: -43px;
  width: calc(100% + 86px);
  height: calc(100% + 86px);
  pointer-events: none;
}
.diff-select-boss-svg {
  /* Boss art is drawn at 1.2x the reference frame, so it extends past the
     viewBox. Let it paint outside the box (matching the open-canvas gameplay
     look) instead of cropping larger sprites at the frame edge. */
  overflow: visible;
}
.diff-select-boss-stop-main {
  stop-color: var(--boss-main);
}
.diff-select-boss-stop-sub {
  stop-color: var(--boss-sub);
}
.diff-select-boss-layer {
  shape-rendering: geometricPrecision;
  transform-box: fill-box;
  transform-origin: center;
}
.diff-select-boss-layer-a {
  animation: boss-gradient-drift-a 1.55s linear infinite alternate;
}
.diff-select-boss-layer-b {
  opacity: 0.62;
  mix-blend-mode: screen;
  animation: boss-gradient-drift-b 2.05s linear infinite alternate;
}
.diff-select-boss-layer-c {
  opacity: 0.42;
  mix-blend-mode: multiply;
  animation: boss-gradient-drift-c 2.7s linear infinite alternate;
}
@keyframes boss-preview-float {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(0, -5px) rotate(-1.5deg);
  }
}
@keyframes boss-gradient-drift-a {
  from {
    transform: translate(-26%, -3%);
  }
  to {
    transform: translate(26%, 3%);
  }
}
@keyframes boss-gradient-drift-b {
  from {
    transform: translate(20%, -18%);
  }
  to {
    transform: translate(-20%, 18%);
  }
}
@keyframes boss-gradient-drift-c {
  from {
    transform: translate(-18%, 20%);
  }
  to {
    transform: translate(18%, -20%);
  }
}
.diff-select-divider {
  border: none;
  border-top: 4px solid var(--border);
  margin: 0 0 16px;
}

@media (max-width: 430px) {
  .diff-select-header {
    gap: 14px;
    min-height: 170px;
  }
  .diff-select-boss-preview {
    right: -6px;
    bottom: 0;
    --boss-control-size: 82px;
  }
  .menu-ambient-boss {
    width: 82px;
  }
}

/* ---- Difficulty cards (colored, selectable) ---- */
/* Cards keep a fixed 1/3 width so at most 3 fit per row; with 4+ the row scrolls
   horizontally instead of shrinking the buttons. flex 0 0 disables both grow and
   shrink so every card stays exactly the same size regardless of count.
   min-width floors the card at its size on a common ~390px-wide phone, card =
   (viewport − 120px) / 3 ≈ 90px. Narrower screens scroll rather than shrink
   the buttons (and the badge inside, which fills 100% of the card). */
.diff-select-list-wrap {
  position: relative;
  margin-bottom: 20px;
}
.diff-select-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin: -24px 0;
  padding: 24px 28px;
  scroll-padding-inline: 28px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.diff-select-list::-webkit-scrollbar {
  display: none;
}
/* Edge fades: the clipped card visibly fades into the panel on whichever side
   has more difficulties, hinting that the row scrolls. Toggled by JS via
   .can-left / .can-right (see _updateDiffScrollCues). */
.diff-select-list-wrap::before,
.diff-select-list-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.diff-select-list-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--white) 35%, rgba(255, 255, 255, 0));
}
.diff-select-list-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--white) 35%, rgba(255, 255, 255, 0));
}
.diff-select-list-wrap.can-left::before {
  opacity: 1;
}
.diff-select-list-wrap.can-right::after {
  opacity: 1;
}
/* Pulsing chevron over the fade for an unmistakable "more this way" glow. */
.diff-scroll-cue {
  position: absolute;
  top: 50%;
  z-index: 4;
  pointer-events: none;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  color: var(--border);
  opacity: 0;
  transform: translate(0, -50%);
  transition: opacity 0.2s ease;
  text-shadow:
    0 0 6px var(--white),
    0 0 10px var(--white);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
}
.diff-scroll-cue-left {
  left: 4px;
  --cue-shift: -4px;
}
.diff-scroll-cue-right {
  right: 4px;
  --cue-shift: 4px;
}
.diff-select-list-wrap.can-left .diff-scroll-cue-left,
.diff-select-list-wrap.can-right .diff-scroll-cue-right {
  opacity: 1;
  animation: diff-cue-pulse 1s ease-in-out infinite;
}
@keyframes diff-cue-pulse {
  0%,
  100% {
    transform: translate(0, -50%);
  }
  50% {
    transform: translate(var(--cue-shift, 4px), -50%);
  }
}
.diff-select-card {
  flex: 0 0 calc((100% - 24px) / 3);
  min-width: 90px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px 6px 7px;
  cursor: pointer;
  text-align: center;
  border: 2px solid var(--border);
  background: var(--diff-color, #888);
  background-image: linear-gradient(
    110deg,
    var(--diff-a, var(--diff-color)) 0%,
    var(--diff-b, var(--diff-color)) 50%,
    var(--diff-a, var(--diff-color)) 100%
  );
  background-size: 200% 100%;
  color: var(--white);
  transform-origin: center center;
  transition:
    transform 0.06s,
    box-shadow 0.12s ease;
  animation: diff-flow 1.8s linear infinite;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
}
/* A looping two-tone gradient (main + sub from config.js) flows across every
   difficulty button. The gradient is symmetric
   (A→B→A) and scrolls exactly one tile (0%→200% over a 200%-wide repeating
   image), so the loop is perfectly seamless. */
.diff-select-card.selected {
  border-color: var(--diff-color);
  z-index: 2;
  transform: scale(1.1);
  box-shadow:
    inset 0 0 0 2px var(--white),
    inset 0 0 14px 4px var(--diff-color),
    0 0 0 3px var(--white),
    0 0 18px 6px var(--diff-color);
}
.diff-select-card-cat,
.diff-select-card-level {
  text-shadow:
    0 0 4px var(--diff-color),
    0 0 8px var(--diff-color);
}
/* Pressed-down effect on tap/click. */
.diff-select-card:active,
.diff-select-card.selected:active {
  transform: scale(0.96);
}
.diff-select-card.selected:active {
  transform: scale(1.03);
}
.diff-select-card-cat {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
}
.diff-select-card-level-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  margin: 1px 0 5px;
  overflow: hidden;
}
.diff-select-card-level {
  position: relative;
  z-index: 1;
  /* The marquee track animates a transform (its own composited layer). When the
     selected card also composites (scale transform), that layer could paint over
     the level number despite the lower z-index. Promote the level to its own
     layer too so the compositor honors the z-index order. */
  transform: translateZ(0);
  font-family: var(--level-number-font);
  font-size: 34px;
  font-weight: 900;
  line-height: 0.95;
}
.diff-select-card-sp-marquee {
  position: absolute;
  inset: 7px -6px 7px;
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.58);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.58);
  text-shadow:
    0 0 2px rgba(224, 226, 232, 0.24),
    0 0 7px rgba(224, 226, 232, 0.2),
    0 0 14px rgba(224, 226, 232, 0.14);
  text-transform: uppercase;
  z-index: 0;
}
.diff-select-card-sp-marquee-track {
  display: inline-flex;
  width: max-content;
  animation: diff-sp-title-marquee var(--sp-title-marquee-duration, 11s) linear infinite;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.diff-select-card-sp-marquee-track.is-marquee-fallback {
  animation: none;
}
.diff-select-card-sp-marquee-item {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: max-content;
  min-width: 56px;
  padding: 0 22px;
  white-space: nowrap;
  text-align: center;
}
@keyframes diff-sp-title-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(var(--sp-title-marquee-distance, -50%), 0, 0);
  }
}
@keyframes diff-flow {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 200% 50%;
  }
}
/* The badge unit spans the card width; fixed height keeps every diff card the
   same regardless of whether the chart has a record. */
/* On the difficulty button the badge fills the button width, so it scales with
   the card (which is fixed by the screen. See .diff-select-card min-width), but
   caps at the song-card badge width (--badge-unit-w) so it never grows wider than there.
   margin auto keeps it bottom-aligned and centered once the cap kicks in. */
.diff-select-card .song-record {
  margin: auto auto 0;
  width: 100%;
  max-width: var(--badge-unit-w);
  height: 18px;
  gap: 4px;
}
.diff-select-card .record-slot {
  font-size: 9px;
}
.diff-select-card .record-slot.song-record-rank {
  border-color: var(--border);
}
.diff-select-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 30px;
}

/* ---- Card actions (dump / edit / delete) ---- */
.song-card-actions {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 4;
}
.song-card-gear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--border);
  background: var(--gold);
  color: var(--white);
  cursor: pointer;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-size: 16px;
  line-height: 1;
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: var(--arcade-outline-thin);
}
.song-card-gear:active {
  transform: translate(1px, 1px);
}
.song-card-action-menu {
  position: absolute;
  bottom: 34px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 88px;
  padding: 6px;
  border: 2px solid var(--border);
  background: var(--white);
  box-shadow: 3px 3px 0 var(--border);
}
.song-card-action-menu.hidden {
  display: none;
}
.song-del-action {
  background: var(--red);
  color: var(--white);
}
.song-edit-action,
.song-dump-action {
  background: var(--white) !important;
  color: var(--border) !important;
  white-space: normal;
  line-height: 1.05;
  letter-spacing: 0;
  text-align: center;
  border-style: dashed;
}

/* ---- Local songs: white field with a dashed frame, distinct from official.
   The dashed border + dashed jacket are what mark a chart as local. ---- */
.song-card.song-card-local {
  background: var(--white);
  border-style: dashed;
}
.diff-select-panel.diff-select-local {
  background: var(--white);
  border-style: dashed;
}

/* ---- Drag-drop import overlay ---- */
#drop-overlay {
  position: fixed;
  left: var(--app-left, 0px);
  top: var(--app-top, 0px);
  width: var(--app-width, 100vw);
  height: var(--app-height, 100dvh);
  z-index: 60;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 40, 80, 0.82);
  border: 8px dashed var(--electric);
  box-sizing: border-box;
}
#drop-overlay.hidden {
  display: none;
}
.drop-overlay-text {
  color: var(--white);
  font-size: 22px;
  letter-spacing: 4px;
  font-weight: 900;
  text-align: center;
  padding: 0 24px;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
}
.song-card {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 16px;
  /* Fixed height so every card matches and the jacket has a definite height to
     fill (height:100% resolves reliably, unlike percentage min-height). Sized to
     fit the full info column (title + meta + badge + PB) without clipping. */
  height: 138px;
  box-sizing: border-box;
  overflow: hidden;
  border: 3px solid var(--border);
  background: var(--white);
  border-radius: 0;
  padding: 12px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--border);
  transition:
    transform 0.08s,
    box-shadow 0.08s;
}
.song-level-number {
  position: absolute;
  right: 10px;
  bottom: -4px;
  z-index: 0;
  min-width: 150px;
  height: 112px;
  overflow: visible;
  pointer-events: none;
  color: var(--level-color, var(--electric));
  opacity: 0.72;
  font-size: 132px;
  font-weight: 900;
  font-style: normal;
  line-height: 0.82;
  letter-spacing: 0;
  text-align: right;
  font-family: var(--level-number-font);
  -webkit-text-stroke: 0;
}
.btn:active,
.btn.active {
  transform: translateY(2px);
  box-shadow: 2px 2px 0 var(--border);
}
.song-card:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--border);
}
.song-jacket {
  /* Square jacket filling the card's full height (the card has a definite
     height, so height:100% resolves). aspect-ratio derives the matching width. */
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  object-fit: cover;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  background: var(--white);
  border: 2px solid var(--border);
}
.song-info {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  align-self: center;
}
.song-title-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 5px;
}
.song-title-row .song-title {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}
.song-title {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1.1;
  height: 33px;
  color: var(--border);
  -webkit-text-stroke: 0;
  margin-bottom: 5px;
  overflow: hidden;
  text-transform: none;
}
.song-meta {
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 1.15;
  height: 12px;
  color: #555;
  overflow: hidden;
  -webkit-text-stroke: 0;
  text-transform: none;
}
.song-saved {
  margin-top: 3px;
  font-size: 9px;
  letter-spacing: 0;
  line-height: 1.15;
  height: 11px;
  color: #7a828a;
  overflow: hidden;
  -webkit-text-stroke: 0;
  text-transform: none;
}
.song-copy-text {
  display: block;
  width: 100%;
  transform-origin: left center;
}
.song-title .song-copy-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.song-meta .song-copy-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.song-saved .song-copy-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* PB + rank badges form one fixed-size, two-slot unit (see Menu._record): one
   row, each slot exactly half. Each slot is a .fit-badge (text squeezes only when
   needed), so long text fits rather than overflowing. */
.song-record {
  display: flex;
  gap: 4px;
  margin-top: 7px;
  width: var(--badge-unit-w);
  height: 20px;
}
.record-slot {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 3px;
  border: 2px solid var(--border);
  background: var(--gold);
  color: var(--border);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  -webkit-text-stroke: 0;
}
.song-record-rank {
  background-color: var(--accent, var(--electric)) !important;
  color: var(--white) !important;
}
/* Never played: a single inviting badge spanning the whole unit. */
.song-record-rank.rank-new {
  background: var(--gold) !important;
  color: var(--border) !important;
}
/* Failed played runs use F as their recorded rank. */
.song-record-rank.rank-f {
  background: #8a8a99 !important;
  color: var(--white) !important;
}
.song-record-rank.rank-c {
  background: linear-gradient(135deg, #3355ff, #22ccff) !important;
  color: var(--white) !important;
}
.song-record-rank.rank-b {
  background: linear-gradient(135deg, #00a6d6, #66f0ff) !important;
  color: var(--white) !important;
}
.song-record-rank.rank-a {
  background: linear-gradient(135deg, #18a058, #7cff9b) !important;
  color: var(--white) !important;
}
.song-record-rank.rank-s {
  background-image: linear-gradient(
    100deg,
    #ff5c00 0%,
    #ffc247 22%,
    #ff5c00 48%,
    #ffc247 72%,
    #ff5c00 100%
  ) !important;
  background-size: 220% 100% !important;
  color: var(--white) !important;
  animation: pb-gold-flow var(--rank-badge-flow-duration, 2.8s) linear infinite;
}
.song-record-rank.rank-s-plus {
  background-image: linear-gradient(
    100deg,
    #d8a000 0%,
    #f6ff70 22%,
    #d8a000 48%,
    #f6ff70 72%,
    #d8a000 100%
  ) !important;
  background-size: 220% 100% !important;
  color: var(--border) !important;
  animation: pb-gold-flow var(--rank-badge-flow-duration, 2.8s) linear infinite;
}
.song-record-rank.rank-ss {
  background-image: linear-gradient(
    100deg,
    #7a4dff 0%,
    #c06cff 22%,
    #7a4dff 48%,
    #c06cff 72%,
    #7a4dff 100%
  ) !important;
  background-size: 220% 100% !important;
  color: var(--white) !important;
  animation: pb-gold-flow var(--rank-badge-flow-duration, 2.8s) linear infinite;
}
.song-record-rank.rank-ss-plus {
  background-image: linear-gradient(
    100deg,
    #d72d8c 0%,
    #ff7aa6 22%,
    #d72d8c 48%,
    #ff7aa6 72%,
    #d72d8c 100%
  ) !important;
  background-size: 220% 100% !important;
  color: var(--white) !important;
  animation: pb-gold-flow var(--rank-badge-flow-duration, 2.8s) linear infinite;
}
.song-record-rank.rank-sss {
  background-image: linear-gradient(
    90deg,
    hsl(0, 60%, 75%),
    hsl(60, 60%, 75%),
    hsl(120, 60%, 75%),
    hsl(180, 60%, 75%),
    hsl(240, 60%, 75%),
    hsl(300, 60%, 75%),
    hsl(360, 60%, 75%)
  ) !important;
  background-size: 360% 100% !important;
  color: var(--border) !important;
  animation: rank-rainbow-scroll var(--rank-badge-flow-duration, 2.8s) linear infinite;
}
.song-record-rank.rank-sss-plus,
.song-record-rank.rank-u {
  background-image: linear-gradient(
    90deg,
    #ff003c,
    #ff7a00,
    #fff200,
    #00ff66,
    #00d5ff,
    #4b00ff,
    #ff00ea,
    #ff003c
  ) !important;
  background-size: 360% 100% !important;
  color: var(--white) !important;
  animation:
    rank-rainbow-scroll var(--rank-badge-flow-duration, 2.8s) linear infinite,
    rank-hue-cycle var(--rank-badge-flow-duration, 2.8s) linear infinite;
}
.song-record-rank.rank-u {
  animation-duration:
    var(--rank-badge-ultra-flow-duration, 2.4s), var(--rank-badge-ultra-flow-duration, 2.4s);
}

/* PB badge, full-combo state: a slow yellow→gold shimmer marks a chart the
   player has ever full-comboed. Plain --gold otherwise (the .record-slot default).
   The same .is-fc class drives the result-screen PB badge (#result-pb.is-fc). */
.song-record-pb.is-fc {
  background-image: linear-gradient(
    100deg,
    #fff6c2,
    #ffe27a 22%,
    #ffd000 48%,
    #ffb300 72%,
    #ffe27a 100%
  );
  background-size: 220% 100%;
  color: var(--border);
  animation: pb-gold-flow 2.4s linear infinite;
}
@keyframes pb-gold-flow {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 220% 50%;
  }
}

/* ---- Difficulty (level) colors for the 0-12 level scale.
   The `.diff-0`..`.diff-12` `--accent` values are injected at startup from
   LEVEL_COLORS in config.js (see applyLevelColors in main.js). Edit them there
   to recolor the song-card sidebar and the level filter chips. The fallback
   below keeps the scale readable if that script hasn't run yet. */
.diff-0,
.diff-1,
.diff-2,
.diff-3,
.diff-4,
.diff-5,
.diff-6,
.diff-7,
.diff-8,
.diff-9,
.diff-10,
.diff-11,
.diff-12 {
  --accent: var(--electric);
}

.loading-text {
  font-size: 20px;
  letter-spacing: 8px;
  color: var(--white);
  font-weight: bold;
  text-shadow:
    0 0 10px var(--electric),
    0 0 20px var(--electric),
    0 0 40px var(--electric);
  animation: electric-crackle 0.8s steps(4, end) infinite;
}

/* ---- Menu top controls ---- */
.btn-sm {
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 2px;
  box-shadow: 3px 3px 0 var(--border);
}
.menu-controls {
  display: flex;
  align-items: stretch;
  justify-content: safe center;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  /* One horizontally-scrollable row: extra controls (the dev-only buttons) scroll
     sideways instead of wrapping onto new rows, so the row keeps a fixed height.
     `safe center` keeps the buttons centered when they fit but falls back to the
     start (so the first button stays reachable) once they overflow. */
  padding: 14px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Lift above the filter row + song list. Each .screen > * is its own
     z-index:1 stacking context, so a high z-index here wins against later
     siblings. */
  position: relative;
  z-index: 30;
}
.menu-controls::-webkit-scrollbar {
  display: none;
}
.menu-controls > * {
  flex-shrink: 0;
}
/* Visible controls share one fixed height so they line up exactly. The
   vertical padding is zeroed and the height set explicitly (box-sizing is
   border-box globally), with text centered via inline-flex. */
.menu-controls > .btn-sm,
.debug-control > .btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}
.file-picker-btn {
  position: relative;
  overflow: hidden;
}
.file-picker-btn.is-busy {
  background: #8a8a99;
  cursor: wait;
  opacity: 0.72;
}
.native-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 100px;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}
.debug-control {
  position: relative;
  display: flex;
  height: 38px;
}
.debug-control > .btn-sm {
  width: 100%;
}
#autoplay-toggle.active {
  background: var(--red);
  color: var(--white);
}
#debug-toggle.active {
  background: var(--electric);
  color: var(--white);
}
/* Debug popover: a fixed sibling of the scrollable controls row, anchored under
   DEBUG by JS. Keeping it out of .menu-controls avoids mobile overflow clipping. */
.debug-popover {
  position: fixed;
  transform: translateX(-50%);
  z-index: 80;
  min-width: 200px;
  max-width: calc(100vw - 20px);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 3px solid var(--border);
  background: var(--white);
  color: var(--border);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  box-shadow: 3px 3px 0 var(--border);
}
.debug-popover.hidden {
  display: none;
}
.debug-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.debug-label {
  white-space: nowrap;
}
.debug-storage {
  max-width: 220px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  border-top: 2px solid var(--border);
  padding-top: 7px;
  font-size: 9px;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  -webkit-text-stroke: 0;
}
.debug-select {
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  padding: 4px 6px;
  cursor: pointer;
}
.debug-toggle-btn {
  font-size: 11px;
  padding: 4px 0;
  min-width: 56px;
  text-align: center;
}
.debug-toggle-btn.active {
  background: var(--red);
  color: var(--white);
}

/* ---- Menu filters ---- */
/* One fixed toolbar row: the concrete chips occupy a stable strip, while the
   FILTER button opens source/category/sort controls in a popover. */
.menu-filters {
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 8px;
  width: 100%;
  max-width: 480px;
  padding: 0 16px 12px;
  box-sizing: border-box;
  flex-wrap: nowrap;
}
.filter-strip {
  flex: 1 1 0;
  min-width: 0;
  max-width: 335px;
  overflow: visible;
}
.filter-group {
  display: flex;
  gap: 0;
  min-width: 0;
}
.filter-group.hidden {
  display: none;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  border: 3px solid var(--border);
  border-right-width: 0;
  background: var(--white);
  color: var(--border);
  cursor: pointer;
  text-align: center;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
}
.filter-strip .filter-group {
  width: 100%;
}
.filter-strip .filter-chip {
  flex: 1 1 0;
  height: 35px;
  box-sizing: border-box;
  padding-left: 2px;
  padding-right: 2px;
  white-space: nowrap;
}
.menu-filters > .filter-chip {
  height: 35px;
  box-sizing: border-box;
}
.filter-group .filter-chip:last-child {
  border-right-width: 3px;
}
.filter-chip.active {
  background: var(--electric);
  color: var(--white);
}
/* Difficulty filter chips wear the difficulty palette (set per-chip from
   DIFF_COLORS in main.js): colored text when idle, colored fill when active. */
#diff-filter .filter-chip {
  color: var(--chip-color, var(--border));
}
#diff-filter .filter-chip.active {
  background: var(--chip-color, var(--electric));
  color: var(--white);
}
.filter-menu-toggle {
  flex: 0 0 auto;
  border-right-width: 3px;
  min-width: 58px;
  padding-left: 6px;
  padding-right: 6px;
  text-align: center;
}
.filter-menu-toggle.active {
  background: var(--electric);
  color: var(--white);
}
/* Level chips: small, tinted with the per-level accent (.diff-0..12), echoing
   the difficulty-number side colors. */
#level-filter .filter-chip {
  padding: 7px 2px;
  text-align: center;
  color: var(--accent, var(--border));
}
#level-filter .filter-chip.active {
  background: var(--accent, var(--electric));
  color: var(--white);
}
#boss-filter .filter-chip {
  padding: 7px 1px;
  font-size: 10px;
  letter-spacing: 0;
  color: var(--chip-color, var(--border));
}
#boss-filter .filter-chip.active {
  background: var(--chip-color, var(--electric));
  color: var(--white);
}
.filter-popover {
  position: fixed;
  transform: translateX(-50%);
  z-index: 80;
  min-width: 250px;
  max-width: calc(100vw - 20px);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 3px solid var(--border);
  background: var(--white);
  color: var(--border);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  box-shadow: 3px 3px 0 var(--border);
}
.filter-popover.hidden {
  display: none;
}
.filter-popover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.filter-popover-row-stack {
  align-items: center;
}
.filter-popover-label {
  min-width: 72px;
  white-space: nowrap;
}
.filter-stepper-wrap {
  position: relative;
  width: 150px;
}
.filter-stepper {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  border: 2px solid var(--border);
  background: var(--white);
}
.filter-stepper-btn {
  height: 28px;
  border: 0;
  background: var(--white);
  color: var(--border);
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.filter-stepper-btn:active {
  background: var(--electric);
  color: var(--white);
}
.filter-stepper-value {
  min-width: 0;
  height: 28px;
  padding: 0 7px;
  border: 0;
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
}
.filter-stepper-value:active {
  background: var(--electric);
  color: var(--white);
}
.filter-choice-list {
  position: absolute;
  top: calc(100% + 5px);
  left: 28px;
  right: 28px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--border);
  background: var(--white);
  box-shadow: 3px 3px 0 var(--border);
}
.filter-choice-list.hidden {
  display: none;
}
.filter-choice-option {
  min-height: 28px;
  border: 0;
  border-bottom: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
}
.filter-choice-option:last-child {
  border-bottom: 0;
}
.filter-choice-option:active,
.filter-choice-option.active {
  background: var(--electric);
  color: var(--white);
}
.filter-popover #source-filter .filter-chip {
  flex: 1 1 0;
  padding: 6px 4px;
  border-width: 2px;
  border-right-width: 0;
}
.filter-popover #source-filter .filter-chip:last-child {
  border-right-width: 2px;
}
.filter-popover #source-filter {
  width: 150px;
}
.info-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--border);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  box-shadow: 2px 2px 0 var(--border);
  -webkit-text-stroke: 0;
}
.info-mark::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 20;
  width: 260px;
  max-width: min(260px, 80vw);
  padding: 10px 12px;
  border: 3px solid var(--border);
  background: var(--white);
  color: var(--border);
  font-size: 11px;
  font-weight: bold;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  white-space: pre-line;
  box-shadow: 3px 3px 0 var(--border);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}
.info-mark:hover::after,
.info-mark:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.result-info-mark {
  margin-left: 6px;
  vertical-align: middle;
}

/* ---- Result ---- */
#screen-result {
  justify-content: flex-start;
  overflow: hidden;
  padding-top: calc(var(--safe-top) + 24px);
  padding-bottom: var(--safe-bottom);
  --result-outline-thin: var(--arcade-outline-thin);
  --result-outline-bold: var(--arcade-outline-bold);
}
#screen-result .result-panel > * {
  flex-shrink: 0;
}
.result-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(100% - 40px, 520px);
  max-height: var(--result-panel-max-height, calc(100% - 166px));
  margin: 22px auto 0;
  padding: 20px 28px 26px;
  color: var(--border);
  background: var(--white);
  border: 4px solid var(--border);
  box-shadow: 6px 6px 0 var(--border);
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
}
.result-song-card {
  display: flex;
  align-items: center;
  gap: 11px;
  align-self: center;
  width: min(360px, 100%);
  padding: 8px;
  border: 3px solid var(--border);
  background: var(--white);
  text-align: left;
}
.result-song-cover-wrap {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border: 2px solid var(--border);
  overflow: hidden;
  background: #f4f7ff;
}
.result-song-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.result-song-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.result-song-info > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}
.result-song-title {
  color: var(--border);
  font-size: 14px;
  font-weight: 900;
}
.result-song-artist {
  color: #555;
  font-size: 11px;
}
.result-song-meta {
  align-self: flex-start;
  box-sizing: border-box;
  max-width: 100%;
  padding: 3px 7px 2px;
  border: 2px solid var(--border);
  background: var(--song-diff-color, #888);
  color: var(--white);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
#result-accuracy-label,
.result-accuracy-label,
#screen-result td {
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: none;
}
#result-accuracy,
.story-result-accuracy,
#screen-result .result-callout {
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: var(--result-outline-bold);
}
.story-result-accuracy {
  text-shadow: none;
}
#screen-result .info-mark,
#screen-result .info-mark::after {
  text-shadow: none;
}
#result-accuracy-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--border);
  margin-bottom: 0;
  text-transform: none;
}
#result-accuracy {
  color: var(--electric-deep);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1;
  margin-top: 0;
  text-shadow: none;
}
.result-gauge {
  width: min(420px, 78vw);
  height: 22px;
  min-height: 22px;
  flex: 0 0 22px;
  border: 3px solid var(--border);
  background: var(--white);
  position: relative;
  box-shadow: 4px 4px 0 var(--border);
  margin-bottom: 4px;
}
.result-gauge-fill,
#result-gauge-fill {
  height: 100%;
  width: 0%;
  background: var(--red);
}
/* Static rank tier overlays for the result gauge. The in-game boss bar
   keeps its animated canvas shimmer; the result panel stays still. */
.result-gauge-rank {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
.result-gauge-arrow,
#result-gauge-arrow {
  position: absolute;
  top: -14px;
  left: 0%;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid var(--border);
  transform: translateX(-7px);
}
.pause-callout,
.result-callout {
  position: relative;
  display: inline-block;
  font-size: clamp(32px, 8vw, 72px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 4px;
  color: var(--white);
  text-align: center;
}
.pause-callout.hidden,
.result-callout.hidden,
.result-detail.hidden {
  visibility: hidden;
}
#screen-result #result-table.hidden {
  display: table;
  visibility: hidden;
}
#screen-result #result-pb-row.hidden {
  display: grid;
  visibility: hidden;
}
/* Wrap result callouts so the glow is one layer behind the label. Story
   challenge can still stack a subrank inside the same wrapper. */
.result-callout-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* Float the rainbow callout above its neighbours: pull it up over the gauge
     and let the glow overflow onto the accuracy/table around it instead of
     reserving its own vertical band. Saves a lot of height on the panel. */
  position: relative;
  z-index: 3;
  margin-block: -6px -4px;
  padding-block: 4px;
  /* Glow lives here, not on the text. Rendered under the callout. Animated by
     result-glow-flash; failed runs settle it off (see below). */
  animation: result-glow-flash 0.7s steps(3, end) infinite;
}
.result-callout-stack:has(.failed-callout) {
  animation: none;
  filter: none;
}
.result-callout {
  padding: 6px 28px;
  color: var(--gold);
  /* Lift above neighbouring opaque elements so the glow isn't clipped by them. */
  z-index: 2;
}
.result-callout.play {
  animation:
    result-wipe-in 0.42s ease-out both,
    result-color-flash 0.7s steps(3, end) infinite;
}
.result-callout.settled {
  animation: result-color-flash 0.7s steps(3, end) infinite;
  clip-path: none;
  opacity: 1;
  transform: none;
}
.result-callout::before,
.result-callout::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background: var(--white);
  clip-path: polygon(50% 0%, 54% 42%, 100% 50%, 54% 58%, 50% 100%, 46% 58%, 0% 50%, 46% 42%);
  animation: sparkle-flash 0.18s steps(2) infinite;
}
.result-callout::before {
  left: 0;
  top: -16px;
}
.result-callout::after {
  right: 0;
  bottom: -14px;
  width: 18px;
  height: 18px;
  animation-delay: 0.08s;
}
.result-callout.failed-callout {
  color: var(--white);
  text-shadow: var(--result-outline-bold);
}
.result-callout.failed-callout.play {
  animation: result-failed-in 0.32s ease-out both;
}
.result-callout.failed-callout.settled {
  animation: none;
  clip-path: none;
  opacity: 1;
  transform: none;
}
.result-callout.failed-callout::before,
.result-callout.failed-callout::after {
  display: none;
}
#screen-result .result-callout-stack {
  animation: none;
  filter: none;
}
#screen-result .result-callout-stack:has(.result-rank-rainbow) {
  animation: result-glow-flash 0.7s steps(3, end) infinite;
}
#screen-result .result-callout {
  color: var(--white);
  text-shadow: var(--result-outline-bold);
}
#screen-result .result-callout.play {
  animation: result-failed-in 0.32s ease-out both;
}
#screen-result .result-callout.settled {
  animation: none;
}
#screen-result .result-callout::before,
#screen-result .result-callout::after {
  display: none;
}
#screen-result .result-callout.result-rank-flow {
  color: var(--result-rank-main);
  text-shadow: var(--result-outline-bold);
}
#screen-result .result-callout.result-rank-flow.play {
  animation:
    result-wipe-in 0.42s ease-out both,
    result-rank-color-flow var(--rank-badge-flow-duration, 2.8s) linear infinite;
}
#screen-result .result-callout.result-rank-flow.settled {
  animation: result-rank-color-flow var(--rank-badge-flow-duration, 2.8s) linear infinite;
}
#screen-result .result-callout.result-rank-rainbow.play {
  animation:
    result-wipe-in 0.42s ease-out both,
    result-color-flash 0.7s steps(3, end) infinite;
}
#screen-result .result-callout.result-rank-rainbow.settled {
  animation: result-color-flash 0.7s steps(3, end) infinite;
}
#screen-result .result-callout.result-rank-rainbow::before,
#screen-result .result-callout.result-rank-rainbow::after {
  display: block;
}
@media (max-width: 720px) {
  #screen-result {
    padding-top: calc(var(--safe-top) + 14px);
    padding-bottom: var(--safe-bottom);
  }
  .result-panel {
    width: min(100% - 28px, 520px);
    max-height: var(--result-panel-max-height, calc(100% - 160px));
    margin: 14px auto 0;
    padding: 16px 20px 22px;
    gap: 7px;
  }
  #result-accuracy {
    font-size: 34px;
  }
  .result-gauge {
    width: min(100%, 360px);
  }
  #screen-result .result-callout {
    font-size: clamp(34px, 10vw, 48px);
    padding: 8px 18px;
  }
  .result-buttons {
    width: var(--app-width, 100vw);
    bottom: calc(var(--app-bottom-gap, 0px) + var(--safe-bottom) + 14px);
    padding: 0 14px;
  }
  .result-buttons .btn {
    padding: 12px 8px;
    letter-spacing: 1.5px;
  }
}
#result-pb {
  position: relative;
  overflow: hidden;
  color: var(--border);
  background: var(--gold);
  border: 3px solid var(--border);
  box-shadow: 3px 3px 0 var(--border);
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  -webkit-text-stroke: 0;
}
/* Full-comboed PB: same shimmering yellow→gold flow as the menu PB badge. */
#result-pb.is-fc {
  background: var(--gold);
  background-image: linear-gradient(
    100deg,
    #fff6c2,
    #ffe27a 22%,
    #ffd000 48%,
    #ffb300 72%,
    #ffe27a 100%
  );
  background-size: 220% 100%;
  animation: pb-gold-flow 2.4s linear infinite;
}
/* The PB value rides above the diagonal wipe. */
#result-pb-text {
  position: relative;
  z-index: 1;
}
/* Arcade-hard diagonal white wipe used to mask the fill swap (normal → gold) and
   the rolling digits when a new PB lands. One-shot via the .wiping class; the JS
   swaps the fill at the wipe's midpoint (full cover), so the change is never seen. */
#result-pb-wipe {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -35%;
  width: 170%;
  z-index: 2;
  background: #fff;
  transform: skewX(-18deg) translateX(-130%);
  pointer-events: none;
  will-change: transform;
}
#result-pb.wiping #result-pb-wipe {
  animation: pb-wipe 0.6s ease-in-out;
}
@keyframes pb-wipe {
  from {
    transform: skewX(-18deg) translateX(-130%);
  }
  to {
    transform: skewX(-18deg) translateX(130%);
  }
}
/* Reveal pop for the PB badge + delta ("show the old PB and delta with a jump"). */
#result-pb.pb-pop,
#result-pb-delta.pb-pop {
  animation: pb-pop 0.42s cubic-bezier(0.2, 1.5, 0.5, 1) both;
}
@keyframes pb-pop {
  0% {
    transform: scale(0.55);
  }
  60% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}
/* The delta is in a grid cell that justifies start; keep its pop centered on itself. */
#result-pb-delta.pb-pop {
  transform-origin: left center;
}
#result-pb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  width: 100%;
}
#result-pb {
  grid-column: 2;
  justify-self: center;
}
#result-pb-delta {
  grid-column: 3;
  justify-self: start;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow:
    var(--result-outline-thin),
    0 var(--arcade-outline-bold-em) 0 var(--border);
}
#result-pb-delta:empty {
  display: none;
}
#result-pb-delta.delta-up {
  color: var(--electric-bright);
}
#result-pb-delta.delta-down {
  color: var(--red);
}
#screen-result table {
  border-collapse: collapse;
  margin-bottom: 12px;
  opacity: 1;
  table-layout: fixed;
  width: min(360px, 86vw);
}
#screen-result table tr {
  border-bottom: 2px solid #dbe5f6;
}
#screen-result td {
  color: var(--border);
  padding: 5px 0 4px;
  font-size: 14px;
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: none;
}
#screen-result td[style] {
  text-shadow: none;
}
#screen-result td:first-child {
  text-align: left;
  color: var(--border);
  letter-spacing: 1px;
  width: auto;
}
#screen-result td.result-table-gap {
  display: none;
}
#screen-result td:last-child {
  font-family: var(--level-number-font);
  font-weight: 900;
  color: var(--border);
  text-align: right;
  width: auto;
}
#result-accuracy,
.story-result-accuracy,
#screen-result .result-judge-max-combo td:first-child,
#screen-result .result-judge-punch td:first-child,
#screen-result .result-judge-fast td:first-child,
#screen-result .result-judge-late td:first-child,
.story-challenge-table .result-judge-max-combo td:first-child,
.story-challenge-table .result-judge-punch td:first-child,
.story-challenge-table .result-judge-fast td:first-child,
.story-challenge-table .result-judge-late td:first-child {
  font-family: var(--app-main-font);
}
.result-judge-row td {
  color: var(--border);
  text-shadow: none;
}
.result-judge-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 4px 9px 3px;
  color: var(--white);
  border: 0;
  font-size: 0.88em;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.24);
}
.result-judge-badge-perfect {
  background: #ffb900;
}
.result-judge-badge-great {
  background: #ff3b6d;
}
.result-judge-badge-good {
  background: #18c95c;
}
.result-judge-badge-miss {
  background: #7d8bff;
}
/* Full-combo MAX COMBO: rainbow fill that scrolls, with a per-digit jump wave.
   Same gradient as the editor's critical-note marker.

   Important layering rule:
   background-clip:text rainbow is painted as the element background, not as a
   normal glyph fill. Putting text-shadow/-webkit-text-stroke on that same text,
   or drawing an outlined duplicate behind it, can let the black outline/fill eat
   the rainbow. The durable order is:
   1. base text = black fallback + thin shadow outline
   2. ::after duplicate = rainbow background-clipped text above the outline
   Keep the scroll animation on ::after, and keep digit jump animation on the
   base span so the outline and rainbow move together. */
.result-fc-combo {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  flex-wrap: wrap;
}
.result-fc-digit,
.result-fc-label {
  position: relative;
  z-index: 0;
  display: inline-block;
  font-weight: 900;
  -webkit-text-stroke: 0;
  text-shadow: var(--result-outline-thin);
  background: none;
  color: var(--border);
  -webkit-text-fill-color: var(--border);
}
.result-fc-digit::after,
.result-fc-label::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  text-shadow: none;
  background: linear-gradient(135deg, #ff003c, #fff200, #00ff66, #00d5ff, #ff00ea, #ff003c);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  animation: result-fc-scroll 1.8s linear infinite;
}
.result-fc-digit {
  animation: result-fc-jump 0.9s ease-in-out infinite;
  animation-delay: var(--fc-delay, 0s);
}
.result-fc-digit::after {
  animation-delay: var(--fc-delay, 0s);
}
.result-fc-label {
  margin-left: 6px;
  font-size: 10px;
  letter-spacing: 1px;
  align-self: center;
}
@keyframes result-fc-scroll {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 300% 50%;
  }
}
@keyframes result-fc-jump {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-4px);
  }
}

.result-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: fixed;
  left: var(--app-left, 0px);
  bottom: calc(var(--app-bottom-gap, 0px) + var(--safe-bottom) + 16px);
  z-index: 14;
  width: var(--app-width, 100vw);
  padding: 0 20px;
}
.result-buttons-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
}
/* Transient hint shown after SHARE hands the result image to the clipboard or
   a download (desktop path). Floats above the button rows so nothing shifts. */
.result-share-note {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  max-width: min(100% - 28px, 420px);
  padding: 6px 12px;
  background: var(--white);
  border: 2px solid var(--border);
  box-shadow: 3px 3px 0 var(--border);
  color: var(--border);
  font-size: 11px;
  letter-spacing: 1px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.result-share-note.show {
  opacity: 1;
}
.result-buttons .hidden {
  display: none;
}
.result-buttons .btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 170px;
  padding: 12px 12px;
  letter-spacing: 2px;
  white-space: nowrap;
}
.result-buttons .btn-share {
  justify-content: center;
}
.btn-share {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-share-icon {
  width: 15px;
  height: 15px;
  fill: #000;
}

/* ---- Gameplay overlays ---- */
.game-button {
  position: fixed;
  z-index: 8;
  min-width: 44px;
  height: 38px;
  padding: 6px 12px;
}
#btn-game-pause {
  left: calc(var(--app-left, 0px) + var(--safe-left) + 14px);
  top: calc(var(--app-top, 0px) + var(--safe-top) + 14px);
}
#gameplay-controls {
  --gameplay-control-button-width: 52px;
  --gameplay-controls-gap: 4px;
  position: fixed;
  z-index: 8;
  right: calc(var(--app-right-gap, 0px) + var(--safe-right) + 14px);
  top: calc(var(--app-top, 0px) + var(--safe-top) + 14px);
  max-width: min(360px, calc(var(--app-width, 100vw) - 28px));
  color: var(--border);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-weight: 900;
  letter-spacing: 0;
  pointer-events: auto;
}
.gameplay-controls-drawer-toggle {
  display: none;
}
.gameplay-controls-title {
  margin-bottom: 5px;
  padding-right: 2px;
  color: rgba(10, 10, 18, 0.78);
  font-size: 11px;
  line-height: 1.1;
  text-align: right;
}
.gameplay-controls-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--gameplay-controls-gap);
}
.gameplay-controls-actions-pair {
  justify-content: flex-end;
}
.gameplay-controls-actions-secondary {
  margin-top: 4px;
}
.gameplay-controls-action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 var(--gameplay-control-button-width);
  min-width: var(--gameplay-control-button-width);
  max-width: var(--gameplay-control-button-width);
  gap: 2px;
}
.gameplay-controls-action button {
  width: 100%;
  min-height: 28px;
  padding: 4px 3px;
  border: 2px solid rgba(10, 10, 18, 0.85);
  background: rgba(255, 255, 255, 0.9);
  color: var(--border);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
  cursor: pointer;
  font: inherit;
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
}
.gameplay-controls-action button:active {
  background: var(--border);
  color: var(--white);
  transform: translate(1px, 1px);
  box-shadow: none;
}
.gameplay-controls-action button.active {
  background: var(--red);
  color: var(--white);
}
.gameplay-controls-action button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.gameplay-controls-action button:disabled:active {
  background: rgba(255, 255, 255, 0.9);
  color: var(--border);
  transform: none;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
}
.gameplay-controls-action span {
  color: rgba(10, 10, 18, 0.72);
  font-size: 9px;
  line-height: 1;
  text-align: center;
}
.gameplay-controls-status {
  margin-top: 3px;
  padding: 4px 6px;
  border: 2px solid rgba(10, 10, 18, 0.82);
  background: var(--white);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.16);
  color: var(--border);
  font-size: 9px;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
}
.gameplay-controls-music-fx {
  margin-top: 4px;
  padding: 4px 5px;
  border: 1px solid rgba(10, 10, 18, 0.42);
  background: var(--white);
  color: rgba(10, 10, 18, 0.78);
  font-size: 8px;
  line-height: 1.22;
  text-align: right;
  white-space: pre-wrap;
}
.gameplay-input-counters {
  margin-top: 5px;
  padding: 4px 5px;
  border: 1px solid rgba(10, 10, 18, 0.34);
  background: rgba(255, 255, 255, 0.7);
  color: rgba(10, 10, 18, 0.78);
  font-size: 8px;
  line-height: 1.22;
  text-align: right;
  white-space: pre-wrap;
}
@media (max-width: 520px) {
  #gameplay-controls {
    --gameplay-controls-tab-width: 34px;
    right: calc(var(--app-right-gap, 0px) + var(--safe-right) + 8px);
    top: calc(var(--app-top, 0px) + var(--safe-top) + 8px);
    width: min(180px, calc(var(--app-width, 100vw) - var(--safe-left) - var(--safe-right) - 54px));
    max-width: min(
      180px,
      calc(var(--app-width, 100vw) - var(--safe-left) - var(--safe-right) - 54px)
    );
    transition: transform 0.16s ease;
    will-change: transform;
  }
  #gameplay-controls.is-drawer-collapsed {
    transform: translateX(100%);
  }
  .gameplay-controls-drawer-toggle {
    position: absolute;
    left: calc(-1 * var(--gameplay-controls-tab-width));
    top: auto;
    bottom: 8px;
    display: block;
    width: var(--gameplay-controls-tab-width);
    min-height: 42px;
    padding: 5px 3px;
    border: 2px solid rgba(10, 10, 18, 0.85);
    background: rgba(255, 255, 255, 0.92);
    color: var(--border);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    line-height: 1;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }
  .gameplay-controls-drawer-toggle:active {
    background: var(--border);
    color: var(--white);
    transform: translate(1px, 1px);
    box-shadow: none;
  }
  .gameplay-controls-panel {
    padding: 6px;
    border: 2px solid rgba(10, 10, 18, 0.85);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18);
  }
  .gameplay-controls-title {
    margin-bottom: 6px;
  }
  .gameplay-controls-actions {
    flex-wrap: wrap;
    align-items: stretch;
  }
  .gameplay-controls-actions-secondary {
    margin-top: 4px;
  }
  .gameplay-controls-action button {
    min-height: 27px;
  }
  .gameplay-controls-action span {
    font-size: 8px;
  }
  .gameplay-controls-status {
    margin-top: 4px;
    padding: 3px 5px;
    font-size: 8px;
    white-space: normal;
  }
  .gameplay-controls-music-fx {
    font-size: 7.5px;
  }
  .gameplay-input-counters {
    max-height: 96px;
    overflow: auto;
  }
}
[data-touch-metrics-only].hidden {
  display: none !important;
}
#pause-overlay {
  position: fixed;
  top: var(--app-top, 0px);
  left: var(--app-left, 0px);
  width: var(--app-width, 100vw);
  height: var(--app-height, 100dvh);
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(255, 255, 255, 0.68);
}
#pause-overlay.hidden,
#btn-game-pause.hidden,
#gameplay-controls.hidden {
  display: none !important;
}
.pause-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
/* ---- Menu extras ---- */
[data-dev-only].hidden,
[data-tutorial-only].hidden {
  display: none !important;
}
/* Settings gear styling comes from .btn / .btn-sm / .menu-controls now; the old
   #btn-settings rule added a margin-top:8px that (as an ID) overrode the row's
   alignment and dropped the gear below the other controls. */
.new-chart-row {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.song-edit-btn {
  width: 76px;
  padding: 3px 7px;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
  border: 2px solid var(--border);
  background: var(--electric);
  color: var(--white);
  border-radius: 0;
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  -webkit-text-stroke: 0;
}
.song-edit-btn.song-edit-action,
.song-edit-btn.song-del-action {
  padding-left: 0;
  padding-right: 0;
}
.song-edit-btn.song-del-action {
  background: var(--red);
  color: var(--white);
}
.song-edit-btn:active {
  background: var(--border);
  color: var(--white);
  transform: translate(1px, 1px);
}

/* ---- Settings ---- */
#loading-progress {
  margin-top: 22px;
  width: 220px;
  max-width: 60vw;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  overflow: hidden;
}
#loading-progress-bar {
  width: 0%;
  height: 100%;
  background: var(--electric);
  box-shadow:
    0 0 8px var(--electric),
    0 0 16px var(--electric);
  border-radius: 3px;
  transition: width 0.25s ease-out;
}
#loading-status {
  margin-top: 18px;
  color: #666;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
#screen-settings {
  justify-content: flex-start;
}
.settings-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 480px;
  overflow-y: auto;
  padding: 32px 24px 40px;
}
.settings-title {
  margin-bottom: 24px;
  letter-spacing: 6px;
}
.settings-group {
  margin-bottom: 32px;
}
.settings-group-calibration {
  margin-bottom: 24px;
}
.settings-label {
  margin-bottom: 10px;
  color: var(--border);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.settings-label-tight {
  margin-bottom: 4px;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.settings-note-sound-row {
  flex-wrap: wrap;
  gap: 8px;
}
.note-sound-btn.active,
.playfield-readout-btn.active {
  background: var(--electric);
  color: var(--white);
}
.settings-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--border);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
}
.settings-check-row input[type='checkbox'] {
  width: 20px;
  height: 20px;
  accent-color: var(--electric);
}
.settings-text-input {
  width: 100%;
  padding: 8px 10px;
  border: 2px solid var(--border);
  border-radius: 0;
  background: var(--white);
  color: var(--border);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-size: 13px;
  font-weight: bold;
  text-transform: none;
}
.settings-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.settings-radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 10px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
}
.settings-radio-row input {
  width: 15px;
  height: 15px;
  accent-color: var(--electric);
}
.settings-range {
  flex: 1;
  height: 4px;
  accent-color: var(--electric);
  cursor: pointer;
}
.settings-value {
  color: var(--border);
  font-size: 13px;
  font-weight: bold;
  text-align: right;
}
.settings-value-volume {
  min-width: 36px;
}
.settings-value-speed {
  min-width: 42px;
}
.settings-speed-edge {
  color: #999;
  font-size: 10px;
  letter-spacing: 1px;
}
.settings-help {
  margin-bottom: 12px;
  color: #666;
  font-size: 11px;
  letter-spacing: 1px;
}
#cal-canvas {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto 12px;
  background: var(--bg-deep);
  border: 3px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  touch-action: none;
}
.cal-offset-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.cal-offset-button {
  padding: 10px 20px;
  font-size: 18px;
}
.cal-offset-display-wrap {
  min-width: 100px;
  text-align: center;
}
.cal-offset-label {
  margin-bottom: 2px;
  color: var(--border);
  font-size: 11px;
  letter-spacing: 2px;
}
#cal-offset-display {
  color: var(--gold);
  font-size: 20px;
  font-weight: bold;
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: var(--arcade-outline-bold);
}
.settings-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.settings-actions-secondary {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

/* ---- Credits ---- */
/* Mirrors the settings panel: a single centered, scrollable column. */
.credits-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  overflow-y: auto;
  padding: 32px 24px 40px;
  text-align: center;
  text-transform: none;
}
.credits-panel .settings-title,
.credits-panel .btn {
  text-transform: none;
}
.credits-actions {
  position: relative;
  z-index: 5;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.credits-boss-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}
.credits-boss-item {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  pointer-events: auto;
  text-transform: none;
  touch-action: none;
  user-select: none;
  will-change: transform;
  backface-visibility: hidden;
  isolation: isolate;
  contain: layout style;
}
.credits-boss-item.is-held {
  z-index: 3;
  cursor: grabbing;
}
.credits-boss-item.hidden {
  display: none;
}
.credits-boss-figure {
  position: relative;
  width: var(--boss-control-size, clamp(92px, 24vw, 118px));
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}
.credits-boss-name {
  max-width: 70px;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-size: clamp(8px, 1.9vw, 10px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  -webkit-text-stroke: 0;
  text-shadow:
    1px 0 0 var(--white),
    -1px 0 0 var(--white),
    0 1px 0 var(--white),
    0 -1px 0 var(--white),
    0 0 8px currentColor;
}
@media (max-width: 430px) {
  .credits-boss-figure {
    width: 82px;
  }
}
.credits-block {
  margin-bottom: 32px;
}
.credits-role {
  margin-bottom: 8px;
  color: var(--border);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: none;
}
.credits-name {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 2px;
  /* White fill on a white page is invisible, use the arcade black-outline
     treatment (matches the SETTINGS title and game logo). */
  color: var(--white);
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: var(--arcade-outline-bold);
}
.credits-icon-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.credits-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: var(--border);
  -webkit-text-stroke: 0;
  transition: color 0.12s;
}
.credits-link svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.credits-name .credits-link {
  margin-left: 10px;
}
.credits-name .credits-link svg {
  width: 19px;
  height: 19px;
}
.credits-link:hover {
  color: var(--electric);
}
.credits-note {
  margin-top: 8px;
  color: #888;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 1px;
}
.credits-note a {
  color: var(--electric);
  text-decoration: none;
}
.credits-note a:hover {
  text-decoration: underline;
}
.credits-note .credits-link {
  color: var(--border);
}
.credits-note .credits-link:hover {
  color: var(--electric);
  text-decoration: none;
}
.credits-charter-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 14px;
  align-items: center;
  text-align: center;
}
.credits-track-list {
  display: grid;
  gap: 6px;
  text-align: left;
}
.credits-track-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.8fr);
  gap: 12px;
  align-items: baseline;
}
.credits-track-list span {
  overflow-wrap: anywhere;
}
.credits-artist-credit {
  display: inline;
}
.credits-source-credit {
  display: block;
  margin-top: 2px;
  color: #aaa;
  font-size: 11px;
  line-height: 1.4;
}
.credits-contributor-credit {
  display: block;
  margin-top: 2px;
  color: inherit;
  font-size: 11px;
  line-height: 1.4;
}
.credits-contributor-role {
  color: #aaa;
  font-weight: bold;
  letter-spacing: 0.7px;
  margin-right: 5px;
  text-transform: none;
}
.credits-artist-links {
  display: inline-flex;
  gap: 4px;
  margin-left: 5px;
  transform: translateY(2px);
}
.credits-thanks {
  color: var(--electric);
  font-size: 14px;
  letter-spacing: 2px;
}

/* ---- Guidelines ---- */
.terms-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  overflow-y: auto;
  padding: 32px 24px 40px;
  text-align: center;
  text-transform: none;
}
.terms-panel .settings-title {
  text-align: center;
  text-transform: none;
}
.terms-panel .btn {
  text-transform: none;
}
.terms-copy {
  color: #888;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.6;
  text-transform: none;
  -webkit-text-stroke: 0;
}
.terms-copy p {
  margin: 8px 0 0;
}
.terms-copy > p:first-child {
  margin: 8px 0 32px;
}
.terms-copy ol {
  margin: 0 0 12px 22px;
  padding: 0;
}
.terms-copy li {
  margin-bottom: 8px;
}
.terms-section {
  margin-bottom: 32px;
}
.terms-section h3 {
  margin-bottom: 8px;
  color: var(--border);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: none;
  -webkit-text-stroke: 0;
}
.terms-meta {
  margin-top: 8px;
  color: var(--electric);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
}

/* ---- Editor ---- */
#screen-editor {
  align-items: stretch;
  justify-content: flex-start;
  background: var(--white);
}
#ed-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--white);
  border-bottom: 3px solid var(--border);
  flex-shrink: 0;
}
.ed-toolbar-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  overflow-x: auto;
  flex-shrink: 0;
}
.ed-toolbar-row + .ed-toolbar-row {
  border-top: 2px solid var(--border);
}
.ed-toolbar-selected {
  min-height: 38px;
  background: #f0f4f8;
}
.ed-toolbar-label {
  color: var(--border);
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  white-space: nowrap;
  -webkit-text-stroke: 0;
}
.ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 2px;
  border: 2px solid var(--border);
  background: var(--electric);
  color: var(--white);
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  box-shadow: 2px 2px 0 var(--border);
}
.ed-btn:hover {
  background: var(--electric-bright);
}
.ed-btn:active {
  background: var(--border);
  color: var(--white);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--border);
}
.ed-btn.ed-accent {
  border-color: var(--border);
  background: var(--gold);
  color: var(--white);
}
.ed-btn.ed-accent:hover {
  background: var(--gold);
  color: var(--white);
}
.ed-btn.ed-gear {
  margin-left: auto;
  min-width: 82px;
  padding-left: 12px;
  padding-right: 12px;
  background: var(--white);
  color: var(--border);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.ed-btn:disabled {
  background: #d6dce2;
  color: #9aa3aa;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  text-shadow: none;
}
.ed-btn:disabled:hover,
.ed-btn:disabled:active {
  background: #d6dce2;
  color: #9aa3aa;
  box-shadow: none;
  transform: none;
}
.ed-hidden-file-input {
  display: none;
}
.ed-sep {
  width: 3px;
  height: 24px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 4px;
}
#ed-toolbar select {
  padding: 6px 8px;
  font-size: 11px;
  background: var(--white);
  border: 2px solid var(--border);
  color: var(--border);
  border-radius: 0;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-weight: bold;
}
.ed-speed-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 32px;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--border);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  -webkit-text-stroke: 0;
  white-space: nowrap;
}
.ed-speed-control input[type='range'] {
  width: 100%;
  min-width: 0;
  height: 18px;
  margin: 0;
  background: transparent;
  accent-color: var(--electric);
  cursor: pointer;
  -webkit-appearance: none;
}
.ed-speed-control input[type='range']::-webkit-slider-runnable-track {
  height: 6px;
  border: 2px solid var(--border);
  background: var(--white);
}
.ed-speed-control input[type='range']::-webkit-slider-thumb {
  width: 12px;
  height: 18px;
  margin-top: -8px;
  border: 2px solid var(--border);
  background: var(--gold);
  cursor: pointer;
  -webkit-appearance: none;
}
.ed-speed-control input[type='range']::-moz-range-track {
  height: 6px;
  border: 2px solid var(--border);
  background: var(--white);
}
.ed-speed-control input[type='range']::-moz-range-thumb {
  width: 12px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 0;
  background: var(--gold);
  cursor: pointer;
}
.ed-speed-value {
  text-align: right;
}
.ed-btn#ed-metronome {
  background: var(--white);
  color: var(--white);
}
.ed-btn#ed-metronome.is-on {
  background: var(--gold);
  color: var(--white);
}
.ed-btn#ed-metronome:active {
  background: var(--border);
  color: var(--white);
}
#ed-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
#ed-panel {
  width: 200px;
  padding: 12px;
  overflow-y: auto;
  background: var(--white);
  border-right: 3px solid var(--border);
  flex-shrink: 0;
  transition:
    width 0.2s,
    padding 0.2s;
}
#ed-panel.collapsed {
  width: 0;
  padding: 0;
  overflow: hidden;
}
#ed-panel-toggle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 48px;
  background: var(--white);
  border: 2px solid var(--border);
  border-left: none;
  color: var(--electric);
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  border-radius: 0;
  transition: left 0.2s;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
}
#ed-panel-toggle:hover {
  background: var(--electric);
  color: var(--white);
}
/* ---- Editor difficulty tabs ---- */
#ed-diff-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
  position: relative;
}
.ed-diff-tab {
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  border: 2px solid var(--diff-color, var(--border));
  background: var(--white);
  color: var(--diff-color, var(--border));
  cursor: pointer;
  border-radius: 0;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
}
.ed-diff-tab.active {
  background-image: linear-gradient(
    110deg,
    var(--diff-color, var(--electric)) 0%,
    var(--diff-sub-color, var(--electric-bright)) 50%,
    var(--diff-color, var(--electric)) 100%
  );
  background-size: 200% 100%;
  animation: diff-flow 1.8s linear infinite;
  color: var(--white);
  box-shadow: none;
}
.ed-diff-tab.ed-diff-add {
  background: var(--gold);
  color: var(--white);
}
.ed-diff-tab.ed-diff-del {
  background: var(--red, #e23);
  color: var(--white);
  margin-left: auto;
}
#ed-add-diff-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--white);
  border: 2px solid var(--border);
  box-shadow: 3px 3px 0 var(--border);
  padding: 4px;
}
.ed-add-diff-option {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  border: none;
  background: var(--white);
  color: var(--diff-color, var(--border));
  cursor: pointer;
  text-align: left;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
}
.ed-add-diff-option:hover {
  background: var(--diff-color, var(--electric));
  color: var(--white);
}

/* ---- Editor field grouping: song-level vs chart-level ---- */
.ed-section {
  border: 2px solid var(--border);
  border-left-width: 5px;
  padding: 10px 10px 2px;
  margin-bottom: 14px;
  background: #fff;
}
.ed-section-song {
  border-left-color: var(--gold);
  background: #fffdf2;
}
.ed-section-chart {
  border-left-color: var(--ed-chart-color, var(--electric));
  background: color-mix(in srgb, var(--ed-chart-color, var(--electric)) 10%, var(--white));
}
.ed-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--border);
  margin-bottom: 10px;
  -webkit-text-stroke: 0;
}
.ed-section-tag {
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 900;
  padding: 1px 6px;
  border: 2px solid var(--border);
  color: var(--white);
}
.ed-section-song .ed-section-tag {
  background: var(--gold);
}
.ed-section-chart .ed-section-tag {
  background: var(--ed-chart-color, var(--electric));
}
.ed-section-chart #ed-category {
  border-color: var(--ed-chart-color, var(--electric));
  color: var(--diff-color, var(--border));
}

.ed-field {
  margin-bottom: 12px;
}
.ed-field.hidden {
  display: none;
}
.ed-field-grid {
  display: flex;
  gap: 8px;
}
.ed-field-half {
  flex: 1;
}
.ed-field label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: #666;
  margin-bottom: 4px;
  font-weight: bold;
  -webkit-text-stroke: 0;
}
.ed-field input[type='text'],
.ed-field input[type='number'],
.ed-field input[type='file'] {
  width: 100%;
  padding: 8px;
  font-size: 12px;
  background: var(--white);
  border: 2px solid var(--border);
  color: var(--border);
  border-radius: 0;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-weight: bold;
  text-transform: none;
}
.ed-check-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--border);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  -webkit-text-stroke: 0;
}
.ed-check-row input {
  width: 15px;
  height: 15px;
}
.ed-cover-name {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ed-field select {
  width: 100%;
  padding: 8px;
  font-size: 12px;
  background: var(--white);
  border: 2px solid var(--border);
  color: var(--border);
  border-radius: 0;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-weight: bold;
}
.ed-boss-desc {
  margin-top: 6px;
  padding: 7px 8px;
  border-left: 4px solid var(--ed-chart-color, var(--electric));
  background: rgba(255, 255, 255, 0.68);
  color: #4f5964;
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0;
  font-weight: 900;
  -webkit-text-stroke: 0;
}
.ed-field input:focus,
.ed-field select:focus {
  border-color: var(--electric);
  outline: none;
}
.ed-value {
  font-size: 12px;
  color: var(--border);
  font-weight: bold;
}
.ed-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 5px;
}
.ed-mini-btn {
  min-height: 26px;
  padding: 4px 8px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.16);
}
.ed-mini-btn:active {
  background: var(--border);
  color: var(--white);
  transform: translate(1px, 1px);
  box-shadow: none;
}
.ed-mini-btn.ed-mini-accent {
  background: #8a4dff;
  color: var(--white);
}
.ed-mini-btn.ed-mini-accent:active {
  background: #5d2fc7;
  color: var(--white);
}
.ed-transport-main-btn {
  min-height: 44px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1;
}
.ed-transport-icon {
  display: block;
  font-size: 14px;
  line-height: 1;
}
/* PLAY / STOP: prominent pink transport buttons. */
#ed-play-pause,
#ed-stop {
  background: #ff3c96;
  color: var(--white);
}
#ed-play-pause:active,
#ed-stop:active {
  background: var(--border);
  color: var(--white);
}
/* Navigator zoom controls: blue. */
.ed-zoom-actions .ed-mini-btn {
  background: var(--electric-deep);
  color: var(--white);
}
.ed-zoom-actions .ed-mini-btn:active {
  background: var(--border);
  color: var(--white);
}
.ed-hr {
  border: none;
  border-top: 3px solid #ddd;
  margin: 16px 0;
}
#ed-settings-popover {
  position: fixed;
  z-index: 70;
  width: 230px;
  padding: 10px;
  background: var(--white);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
  color: var(--border);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  -webkit-text-stroke: 0;
}
#ed-settings-popover.hidden {
  display: none;
}
.ed-popover-title {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ff3c96;
}
.ed-popover-field {
  display: block;
  margin-bottom: 8px;
  color: #666;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}
.ed-popover-field input {
  width: 100%;
  margin-top: 4px;
  padding: 6px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  font-family: inherit;
  font-weight: 900;
}
#ed-canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f4f8;
  overflow: hidden;
  position: relative;
  min-width: 0;
  /* The board around the court starts a box-select too, so it shows the same
     crosshair as the canvas. Panels, buttons, and the scrollbar set their own. */
  cursor: crosshair;
}
#ed-canvas {
  display: block;
  cursor: crosshair;
  flex: none;
}
#ed-selection-box {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 1;
  background: rgba(0, 224, 255, 0.12);
  border: 1.5px dashed rgba(0, 0, 0, 0.55);
}
.ed-side-panel {
  position: absolute;
  top: 12px;
  z-index: 2;
  width: clamp(180px, 20vw, 300px);
  padding: 34px 10px 10px;
  border: 3px solid var(--border);
  background: rgba(255, 255, 255, 0.78);
  color: var(--border);
  -webkit-text-stroke: 0;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  cursor: move;
  touch-action: none;
}
.ed-side-panel-left {
  left: 42px;
  width: clamp(146px, 15vw, 190px);
}
.ed-side-panel-right {
  right: 42px;
  width: clamp(146px, 15vw, 190px);
}
.ed-side-panel-legend {
  right: 42px;
  top: auto;
  bottom: 12px;
}
.ed-side-panel-stats {
  right: 42px;
  top: auto;
  bottom: 12px;
  width: clamp(180px, 18vw, 250px);
}
.ed-side-panel-bookmarks {
  left: 42px;
  top: auto;
  bottom: 12px;
  width: clamp(208px, 19vw, 248px);
}
.ed-side-panel-special {
  right: 42px;
  top: 170px;
  width: clamp(190px, 18vw, 250px);
}
.ed-side-panel-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 3px 7px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  cursor: pointer;
  font-family: inherit;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
}
.ed-side-panel.is-collapsed {
  width: auto;
  min-width: 46px;
  padding: 5px;
  cursor: move;
}
.ed-side-panel.is-collapsed .ed-side-panel-content {
  display: none;
}
.ed-side-panel.is-collapsed .ed-side-panel-toggle {
  position: static;
}
.ed-side-title {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--electric);
}
.ed-side-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.ed-side-field label {
  display: block;
  margin-bottom: 4px;
  color: #666;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
}
.ed-stepper {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  gap: 2px;
}
.ed-stepper input {
  min-width: 0;
  width: 100%;
  padding: 5px 2px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}
.ed-stepper button {
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
}
.ed-side-panel input,
.ed-side-panel button,
.ed-side-panel summary,
.ed-side-panel .ed-stepper button {
  touch-action: auto;
}
.ed-side-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}
.ed-side-readout span {
  color: #666;
}
.ed-side-readout strong {
  color: var(--border);
  font-size: 12px;
}
.ed-analysis-assets {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 2px solid rgba(0, 0, 0, 0.18);
}
.ed-analysis-subtitle {
  margin-bottom: 5px;
  color: var(--electric);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
}
.ed-side-readout.ed-asset-readout {
  align-items: flex-start;
}
.ed-side-readout.ed-asset-readout strong {
  max-width: 68%;
  text-align: right;
  line-height: 1.15;
  font-size: 10px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.ed-analysis {
  margin-top: 0;
  padding-top: 0;
}
.ed-unknown-note-warning {
  margin-bottom: 8px;
  padding: 8px;
  border: 2px solid var(--red, #e23);
  background: rgba(255, 35, 55, 0.12);
  color: var(--red, #e23);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.22);
}
.ed-unknown-note-warning-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}
.ed-unknown-note-warning-detail {
  margin-top: 4px;
  color: var(--border);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.ed-boss-special-list {
  display: grid;
  gap: 8px;
}
.ed-boss-special-world {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 2px solid var(--electric);
  background: var(--white);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
}
.ed-boss-special-world-label {
  display: grid;
  gap: 5px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #666;
}
.ed-boss-special-world-select {
  width: 100%;
  padding: 5px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}
.ed-boss-special-boss-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.ed-boss-special-boss-btn {
  min-width: 0;
  min-height: 26px;
  padding: 4px 3px;
  border: 2px solid var(--special-color, var(--electric));
  background: var(--white);
  color: var(--special-color, var(--electric));
  cursor: pointer;
  font-family: inherit;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.16);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ed-boss-special-boss-btn.active {
  background: var(--special-color, var(--electric));
  color: var(--white);
}
.ed-boss-special-group {
  display: grid;
  gap: 5px;
}
.ed-boss-special-heading {
  color: #666;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
}
.ed-boss-special-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.ed-boss-special-pager-btn {
  min-width: 28px;
  min-height: 22px;
  padding: 2px 6px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.16);
}
.ed-boss-special-pager-btn:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}
.ed-boss-special-pager-status {
  flex: 1;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #666;
}
.ed-boss-special-option {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 8px;
  border: 2px solid var(--special-color, var(--electric));
  background: var(--white);
  color: var(--border);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
}
.ed-boss-special-option.active {
  background: var(--special-color, var(--electric));
  color: var(--special-text, var(--white));
}
/* Zone/range tools get a double border so they read as a span, not a point note
   It mirrors the double-outlined zone bands drawn on the timeline. */
.ed-boss-special-option.is-zone {
  border-style: double;
  border-width: 4px;
  box-shadow:
    0 0 0 1px var(--special-color, var(--electric)),
    2px 2px 0 rgba(0, 0, 0, 0.18);
}
.ed-boss-special-option.is-event {
  border-style: dashed;
}
.ed-boss-special-option-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}
/* ZONE / NOTE tag at the start of the title. */
.ed-boss-special-kind {
  flex: none;
  padding: 1px 5px;
  font-size: 8px;
  letter-spacing: 1px;
  border: 1.5px solid var(--special-color, var(--electric));
  color: var(--special-color, var(--electric));
  background: var(--white);
}
.ed-boss-special-option.is-zone .ed-boss-special-kind {
  border-style: double;
  border-width: 3px;
}
.ed-boss-special-option.is-event .ed-boss-special-kind {
  border-style: dashed;
}
.ed-boss-special-option.active .ed-boss-special-kind {
  background: var(--white);
}
.ed-boss-special-option-text {
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
  color: #4f5964;
}
.ed-boss-special-option.active .ed-boss-special-option-text {
  color: var(--special-text, rgba(255, 255, 255, 0.9));
  opacity: 0.9;
}
.ed-analysis-title {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ff3c96;
}
.ed-stat-label {
  cursor: help;
}
.ed-zoom-actions {
  margin-bottom: 10px;
}
.ed-shortcuts-head {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}
.ed-shortcuts-head .ed-side-title {
  margin-bottom: 0;
}
.ed-shortcuts-pager {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 4px;
}
.ed-shortcuts-pager button {
  min-height: 22px;
  padding: 1px 0;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.18);
}
.ed-shortcuts-pager button:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}
.ed-shortcuts-pager span {
  min-width: 0;
  text-align: center;
  color: #4f5964;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
}
.ed-shortcuts-page.hidden {
  display: none;
}
.ed-shortcuts-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 4px 0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}
.ed-shortcuts-row span {
  margin-left: 3px;
  color: #4f5964;
}
.ed-shortcuts-row > span:last-child {
  flex: 1 1 42px;
  min-width: 0;
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.ed-shortcuts-row .ed-key-word {
  flex: 0 0 auto;
  margin: 0;
  min-width: 12px;
  color: var(--border);
  text-align: center;
}
.ed-shortcuts-row kbd {
  flex: 0 1 auto;
  min-width: 22px;
  max-width: 52px;
  padding: 2px 4px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  text-align: center;
  font-family: inherit;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}
.ed-shortcuts-row kbd .fit-badge-text {
  margin: 0;
  color: inherit;
}
.ed-legend-row {
  display: grid;
  grid-template-columns: 30px 70px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin: 5px 0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}
.ed-legend-row strong {
  color: var(--border);
}
.ed-legend-row span:last-child {
  color: #4f5964;
  line-height: 1.15;
}
.ed-note-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid var(--white);
  position: relative;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.28);
}
.ed-note-tap {
  background: var(--electric);
}
.ed-note-scatter {
  background: #00d4ff;
}
.ed-note-scatter::before,
.ed-note-cscatter::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  transform: rotate(45deg);
}
.ed-note-critical {
  background: linear-gradient(135deg, #ff003c, #fff200, #00ff66, #00d5ff, #ff00ea);
}
.ed-note-cscatter {
  background: linear-gradient(135deg, #ff003c, #fff200, #00ff66, #00d5ff, #ff00ea);
}
.ed-note-critical::after,
.ed-note-cscatter::after {
  content: 'C';
  position: absolute;
  inset: 0;
  color: var(--white);
  font-size: 8px;
  line-height: 14px;
  text-align: center;
}
.ed-note-boss {
  background: linear-gradient(135deg, #ff0022 0 58%, #f000ff 58% 100%);
}
.ed-note-boss::after {
  content: '+';
  position: absolute;
  inset: 0;
  color: var(--white);
  font-size: 14px;
  line-height: 13px;
  text-align: center;
}
.ed-note-slash {
  width: 28px;
  height: 12px;
  display: inline-block;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 5px,
      rgba(0, 0, 0, 0.42) 5px 7px,
      transparent 7px 12px
    ),
    #ff3c96;
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.28);
}
.ed-note-diamond {
  width: 15px;
  height: 15px;
  display: inline-block;
  background: #64c8ff;
  border: 2px solid var(--white);
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.28);
}
.ed-note-chain {
  width: 28px;
  height: 16px;
  display: inline-block;
  position: relative;
  background:
    radial-gradient(circle at 4px 8px, var(--white) 0 4px, #64c8ff 4px 5.5px, transparent 6px),
    radial-gradient(circle at 24px 8px, #145a96 0 4px, #64c8ff 4px 5.5px, transparent 6px),
    linear-gradient(to right, transparent 2px, rgba(20, 90, 150, 0.42) 2px 26px, transparent 26px);
  background-size:
    100% 100%,
    100% 100%,
    100% 3px;
  background-position: center, center, center;
  background-repeat: no-repeat;
}
.ed-note-chain::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 3px;
  width: 9px;
  height: 9px;
  background: #64c8ff;
  border: 1.5px solid var(--white);
  transform: rotate(45deg);
}
.ed-note-bpm {
  width: 28px;
  height: 0;
  display: inline-block;
  border-top: 3px dashed #069676;
}
.ed-bookmark-add {
  width: 100%;
  min-height: 28px;
  margin-bottom: 8px;
  padding: 5px 6px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}
.ed-bookmark-add:active {
  background: var(--border);
  color: var(--white);
  transform: translate(1px, 1px);
  box-shadow: none;
}
.ed-transport-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.18);
}
.ed-transport-row {
  display: flex;
  gap: 6px;
}
.ed-transport-row .ed-mini-btn {
  flex: 1;
  min-width: 0;
}
.ed-audio-solo-btn.is-on,
.ed-audio-solo-btn[aria-pressed='true'] {
  background: var(--gold);
  color: var(--white);
}
.ed-audio-solo-btn.is-on:active,
.ed-audio-solo-btn[aria-pressed='true']:active {
  background: var(--border);
  color: var(--white);
}
.ed-transport-more {
  padding-bottom: 0;
}
.ed-transport-more summary {
  min-height: 28px;
  padding: 5px 8px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.16);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  list-style: none;
  user-select: none;
}
.ed-transport-more summary::-webkit-details-marker {
  display: none;
}
.ed-transport-more summary::after {
  content: ' ▾';
}
.ed-transport-more[open] summary {
  margin-bottom: 10px;
  background: #eef3f7;
}
.ed-transport-more[open] summary::after {
  content: ' ▴';
}
.ed-loop-controls {
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.18);
}
.ed-loop-head {
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #666;
}
.ed-bookmark-title {
  margin-top: 0;
  color: #666;
}
.ed-bookmark-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: min(220px, 34vh);
  overflow-y: auto;
}
.ed-bookmark-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 4px;
}
.ed-bookmark-jump,
.ed-bookmark-delete {
  min-height: 26px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}
.ed-bookmark-jump {
  min-width: 0;
  padding: 4px 6px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ed-bookmark-delete {
  padding: 0;
  background: #ffe7ef;
  color: #b00038;
}
.ed-bookmark-empty {
  color: #667;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}
/* ---- Sanity-check results popover (anchored to the toolbar button) ---- */
#ed-sanity-popover {
  position: fixed;
  z-index: 60;
  min-width: 220px;
  max-width: 340px;
  padding: 10px 12px;
  background: var(--white);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 var(--border);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  -webkit-text-stroke: 0;
}
.ed-sanity-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--border);
  margin-bottom: 8px;
}
.ed-sanity-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}
.ed-sanity-mark {
  flex-shrink: 0;
  font-weight: 900;
}
.ed-sanity-row.ok .ed-sanity-mark {
  color: #0a9b5e;
}
.ed-sanity-row.warn .ed-sanity-mark,
.ed-sanity-row.warn .ed-sanity-text {
  color: #c88400;
}
.ed-sanity-row.bad .ed-sanity-mark,
.ed-sanity-row.bad .ed-sanity-text {
  color: var(--red, #e23);
}
.ed-sanity-text {
  color: var(--border);
}

#ed-import-drop-overlay {
  position: fixed;
  left: var(--app-left, 0px);
  top: var(--app-top, 0px);
  width: var(--app-width, 100vw);
  height: var(--app-height, 100dvh);
  z-index: 88;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 127, 255, 0.18);
  border: 8px solid rgba(0, 127, 255, 0.76);
  pointer-events: none;
  -webkit-text-stroke: 0;
}
.ed-import-drop-text {
  padding: 14px 20px;
  background: var(--white);
  color: var(--electric);
  border: 3px solid var(--border);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.32);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
}

#ed-import-conflict-overlay {
  position: fixed;
  left: var(--app-left, 0px);
  top: var(--app-top, 0px);
  width: var(--app-width, 100vw);
  height: var(--app-height, 100dvh);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(12, 18, 28, 0.42);
  -webkit-text-stroke: 0;
}
.ed-import-conflict-panel {
  width: min(420px, 100%);
  padding: 18px;
  background: var(--white);
  color: var(--border);
  border: 3px solid var(--border);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.34);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
}
.ed-import-conflict-title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  color: var(--electric);
  margin-bottom: 8px;
}
.ed-import-conflict-text {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.35;
}
.ed-import-conflict-hint {
  margin-top: 5px;
  color: #4f5964;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}
.ed-import-conflict-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.ed-import-conflict-btn {
  min-height: 34px;
  padding: 7px 10px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--electric);
  box-shadow: 2px 2px 0 var(--border);
  cursor: pointer;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}
.ed-import-conflict-btn.primary {
  background: var(--electric);
  color: var(--white);
}
.ed-import-conflict-btn.ghost {
  grid-column: 1 / -1;
  background: #f0f4f8;
  color: var(--border);
}
.ed-import-conflict-btn:hover {
  filter: brightness(1.08);
}
.ed-import-conflict-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--border);
}

#ed-chain-popover,
#ed-bpm-popover,
#ed-time-signature-popover,
#ed-branch-binding-popover {
  position: absolute;
  z-index: 8;
  min-width: 150px;
  padding: 10px;
  background: var(--white);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
  color: var(--border);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
}
#ed-chain-popover.hidden,
#ed-bpm-popover.hidden,
#ed-time-signature-popover.hidden,
#ed-branch-binding-popover.hidden {
  display: none;
}
#ed-chain-popover {
  box-sizing: border-box;
}
#ed-chain-popover label,
#ed-bpm-popover label,
#ed-time-signature-popover label,
#ed-branch-binding-popover label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  -webkit-text-stroke: 0;
  margin-top: 8px;
}
#ed-chain-popover select,
#ed-chain-popover input[type='number'],
#ed-chain-popover input[type='range'],
#ed-bpm-popover input,
#ed-time-signature-popover input,
#ed-time-signature-popover select,
#ed-branch-binding-popover select,
#ed-branch-binding-popover textarea {
  width: 100%;
  margin-top: 4px;
  padding: 6px;
  border: 2px solid var(--border);
  background: #f0f4f8;
  color: var(--border);
  font-family: inherit;
  font-weight: bold;
}
#ed-chain-popover select,
#ed-chain-popover input[type='number'],
#ed-chain-popover input[type='range'] {
  box-sizing: border-box;
}
#ed-branch-binding-popover .ed-branch-check {
  display: flex;
  align-items: center;
  gap: 7px;
}
#ed-branch-binding-popover .ed-branch-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #c88400;
}
#ed-chain-popover input[type='range'] {
  padding: 0;
  height: 22px;
  accent-color: var(--electric);
}
.ed-q-control {
  display: grid;
  gap: 5px;
}
.ed-q-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}
.ed-q-custom.hidden {
  display: none;
}
.ed-q-custom input {
  min-width: 0;
  text-align: center;
}
.ed-q-custom span {
  color: #666;
  font-size: 11px;
  font-weight: 900;
}
.ed-chain-value {
  float: right;
  display: inline-block;
  width: 4.5ch;
  text-align: right;
  color: var(--electric);
  font-variant-numeric: tabular-nums;
}
.ed-chain-title,
.ed-bpm-title,
.ed-time-signature-title {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: bold;
  color: var(--electric);
  -webkit-text-stroke: 0;
}
#ed-branch-binding-popover {
  top: 14px;
  right: 14px;
  min-width: 175px;
}
#ed-branch-binding-popover.has-dialogue {
  width: min(320px, calc(100% - 28px));
}
#ed-branch-binding-popover.dragging {
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
}
.ed-branch-binding-title {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: bold;
  color: #c88400;
  -webkit-text-stroke: 0;
  cursor: move;
  user-select: none;
  touch-action: none;
}
#ed-branch-binding-popover .hidden {
  display: none;
}
#ed-branch-mode-row {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  -webkit-text-stroke: 0;
  margin-top: 8px;
}
#ed-branch-mode-row.hidden {
  display: none;
}
#ed-scatter-lanes-row {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  -webkit-text-stroke: 0;
  margin-top: 8px;
}
#ed-scatter-lanes-row.hidden {
  display: none;
}
#ed-scatter-angle-row {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  -webkit-text-stroke: 0;
  margin-top: 8px;
}
#ed-scatter-angle-row.hidden {
  display: none;
}
#ed-darkness-glow-btns {
  align-items: stretch;
}
.ed-darkness-glow-btn {
  min-height: 52px;
  padding: 7px 3px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
}
.ed-darkness-glow-swatch {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow: 0 0 6px currentColor;
}
.ed-darkness-glow-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ed-darkness-glow-swatch.red {
  background: #ff243e;
  color: #ff243e;
}
.ed-darkness-glow-swatch.white {
  background: #f4f7ff;
  color: #dce8ff;
}
.ed-darkness-glow-swatch.green {
  background: #39ff8f;
  color: #39ff8f;
}
.ed-scatter-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 4px;
}
.ed-scatter-lane-btn {
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 0;
  border: 2px solid var(--border);
  background: #f0f4f8;
  color: var(--border);
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}
.ed-scatter-lane-btn.active {
  background: #5f8cff;
  border-color: #2859d6;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.ed-branch-mode-btns {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.ed-branch-mode-btn {
  flex: 1;
  padding: 6px 4px;
  border: 2px solid var(--border);
  background: #f0f4f8;
  color: var(--border);
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
}
.ed-branch-mode-btn:hover {
  background: var(--white);
}
.ed-branch-mode-btn.active {
  background: #c88400;
  color: var(--white);
  border-color: #c88400;
}
.ed-scatter-angle-btns .ed-branch-mode-btn {
  min-width: 0;
  padding: 6px 2px;
  font-size: 9px;
}
#ed-branch-seq-row {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  -webkit-text-stroke: 0;
  margin-top: 8px;
}
#ed-branch-seq-row.hidden {
  display: none;
}
.ed-branch-seq-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.ed-branch-seq-controls input[type='range'] {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  height: 22px;
  accent-color: #c88400;
}
#ed-branch-seq-len-value {
  min-width: 18px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  color: #c88400;
}
.ed-branch-seq-controls input[type='number'] {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 6px;
  border: 2px solid var(--border);
  background: #f0f4f8;
  color: var(--border);
  font-family: inherit;
  font-weight: bold;
}
#ed-branch-seq-row .ed-branch-check {
  margin-top: 6px;
}
#ed-dialogue-row {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  -webkit-text-stroke: 0;
}
#ed-dialogue-row.hidden {
  display: none;
}
.ed-dialogue-character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 6px;
  margin-top: 5px;
}
.ed-dialogue-character-btn {
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 0;
  border: 2px solid var(--border);
  background: #f0f4f8;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
}
.ed-dialogue-character-btn:hover {
  background: var(--white);
}
.ed-dialogue-character-btn.active {
  background: var(--dialogue-character-color, #c88400);
  border-color: var(--dialogue-character-color, #c88400);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.68),
    2px 2px 0 rgba(0, 0, 0, 0.18);
}
.ed-dialogue-character-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ed-dialogue-text-label {
  margin-top: 8px;
}
.ed-dialogue-locale-tabs {
  display: flex;
  gap: 5px;
  margin-top: 5px;
  overflow-x: auto;
  touch-action: auto;
}
.ed-dialogue-locale-btn {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 2px solid var(--border);
  background: #f0f4f8;
  color: var(--border);
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.ed-dialogue-locale-btn.active {
  background: #c88400;
  border-color: #c88400;
  color: var(--white);
}
#ed-dialogue-text {
  min-height: 94px;
  max-height: 220px;
  resize: vertical;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0;
  touch-action: auto;
}
#ed-slider-pos-row,
#ed-slider-dir-row,
#ed-darkness-glow-row,
#ed-cannon-count-row,
#ed-ends-dir-row {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  -webkit-text-stroke: 0;
  margin-top: 8px;
}
#ed-slider-pos-row.hidden,
#ed-slider-dir-row.hidden,
#ed-darkness-glow-row.hidden,
#ed-cannon-count-row.hidden,
#ed-ends-dir-row.hidden {
  display: none;
}
#ed-emerge-grid-row {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  -webkit-text-stroke: 0;
  margin-top: 8px;
}
#ed-emerge-grid-row.hidden {
  display: none;
}
.ed-emerge-grid {
  display: grid;
  grid-template-columns: repeat(var(--ed-emerge-cols, 3), 1fr);
  gap: 5px;
  margin-top: 4px;
  touch-action: none;
}
.ed-emerge-cell {
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid var(--border);
  background: #f0f4f8;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
  cursor: pointer;
  touch-action: none;
}
.ed-emerge-cell:hover {
  background: var(--white);
}
.ed-emerge-cell.active {
  background: #1f9e8f;
  border-color: #0c6c6d;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.5),
    2px 2px 0 rgba(0, 0, 0, 0.18);
}
#ed-chime-kind-row {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  -webkit-text-stroke: 0;
  margin-top: 8px;
}
#ed-chime-kind-row.hidden {
  display: none;
}
.ed-chain-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: move;
  user-select: none;
  touch-action: none;
}
.ed-chain-nav .ed-chain-title {
  flex: 1;
  text-align: center;
}
#ed-chain-popover.dragging {
  cursor: move;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
}
.ed-chain-nav-btn {
  width: 22px;
  height: 20px;
  flex: 0 0 auto;
  padding: 0;
  border: 2px solid var(--border);
  background: #f0f4f8;
  color: var(--border);
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}
.ed-chain-nav-btn:hover {
  background: var(--white);
}
.ed-chain-nav-btn.hidden {
  visibility: hidden;
}
.ed-bpm-title {
  color: #007f64;
}
.ed-time-signature-title {
  color: #7043a4;
}
.ed-bpm-actions,
.ed-time-signature-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.ed-bpm-actions button,
.ed-time-signature-actions button {
  flex: 1;
  padding: 6px 4px;
  border: 2px solid var(--border);
  background: #f0f4f8;
  color: var(--border);
  font-family: inherit;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
}
.ed-bpm-actions button:hover,
.ed-time-signature-actions button:hover {
  background: var(--white);
}
.ed-chain-check {
  display: flex !important;
  align-items: center;
  gap: 6px;
}
.ed-chain-check.disabled {
  opacity: 0.45;
}
.ed-chain-check input {
  width: 14px;
  height: 14px;
}
.ed-chain-q-mult-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.ed-chain-q-mult {
  flex: 1;
  justify-content: center;
  margin-top: 0 !important;
  padding: 5px 4px;
  border: 2px solid var(--border);
  background: #f0f4f8;
  cursor: pointer;
  user-select: none;
}
.ed-chain-q-mult input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ed-chain-q-mult.active {
  background: var(--electric);
  color: var(--white);
  border-color: var(--electric);
}
.ed-chain-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.ed-chain-actions button {
  flex: 1;
  padding: 6px 4px;
  border: 2px solid var(--border);
  background: var(--red);
  color: var(--white);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--border);
}
.ed-chain-actions button:hover {
  filter: brightness(1.1);
}
.ed-chain-actions button:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
#ed-chain-popover .hidden {
  display: none !important;
}
#ed-toolbox {
  width: 118px;
  height: 100%;
  min-height: 0;
  padding: 10px;
  overflow-y: auto;
  background: var(--white);
  border-left: 3px solid var(--border);
  flex-shrink: 0;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.ed-tool-section {
  margin-bottom: 16px;
}
.ed-tool-section-event {
  padding-top: 12px;
  border-top: 3px solid rgba(0, 0, 0, 0.18);
}
.ed-tool-section label,
.ed-tool-label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: #666;
  margin-bottom: 6px;
  font-weight: bold;
  -webkit-text-stroke: 0;
}
#ed-toolbox select {
  width: 100%;
  padding: 8px 6px;
  font-size: 12px;
  background: var(--white);
  border: 2px solid var(--border);
  color: var(--border);
  border-radius: 0;
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-weight: bold;
}
#ed-toolbox .ed-q-custom input {
  width: 100%;
  padding: 6px 3px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-size: 11px;
  font-weight: 900;
}
.ed-quantize-btn {
  width: 100%;
  margin-top: 2px;
}
.ed-tool-btn {
  width: 100%;
  min-height: 34px;
  margin-bottom: 6px;
  padding: 6px 4px;
  border: 2px solid var(--border);
  background: #f0f4f8;
  color: var(--border);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
}
.ed-tool-btn:hover {
  background: #ffffff;
}
.ed-tool-btn.active {
  background: var(--electric);
  color: var(--white);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.22);
}
.ed-autosave-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ed-autosave-options label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 4px 7px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
}
.ed-autosave-options input {
  width: 14px;
  height: 14px;
  accent-color: var(--electric);
}
.ed-settings-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 2px solid rgba(0, 0, 0, 0.16);
  color: var(--border);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
}
.ed-settings-check input {
  width: 14px;
  height: 14px;
  accent-color: var(--electric);
}
.ed-tooltip {
  position: fixed;
  z-index: 200;
  max-width: min(260px, calc(100vw - 16px));
  padding: 8px 10px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.24);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
  font-size: 10px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 1px;
  -webkit-text-stroke: 0;
  pointer-events: none;
}
.ed-tooltip.hidden {
  display: none;
}
#ed-scroll-track {
  position: absolute;
  right: 6px;
  top: 8px;
  bottom: 8px;
  width: 12px;
  background: #e8ecf0;
  border: 2px solid var(--border);
  cursor: pointer;
}
#ed-scroll-thumb {
  position: absolute;
  left: -2px;
  right: -2px;
  background: var(--electric);
  min-height: 20px;
  border: 2px solid var(--border);
}
#ed-scroll-thumb:hover {
  background: var(--electric-bright);
}

#screen-editor.editor-night {
  --ed-night-bg: #101116;
  --ed-night-panel: #181922;
  --ed-night-surface: #232532;
  --ed-night-surface-strong: #2c2f3d;
  --ed-night-border: #4a4e60;
  --ed-night-text: #f4f7fb;
  --ed-night-muted: #b9c3cf;
  --ed-night-shadow: #000000;
  --ed-night-selected-ring: rgba(244, 247, 251, 0.88);
  --ed-night-active-glow: rgba(0, 224, 255, 0.42);
  --ed-night-warm-glow: rgba(255, 194, 71, 0.42);
  background: var(--ed-night-bg);
  color: var(--ed-night-text);
}
#screen-editor.editor-night #ed-toolbar,
#screen-editor.editor-night #ed-panel,
#screen-editor.editor-night #ed-toolbox {
  background: var(--ed-night-panel);
  border-color: var(--ed-night-border);
}
#screen-editor.editor-night .ed-toolbar-row + .ed-toolbar-row,
#screen-editor.editor-night #ed-diff-tabs,
#screen-editor.editor-night .ed-tool-section-event {
  border-color: var(--ed-night-border);
}
#screen-editor.editor-night .ed-toolbar-selected,
#screen-editor.editor-night #ed-canvas-wrap {
  background: var(--ed-night-bg);
}
#screen-editor.editor-night .ed-sep {
  background: var(--ed-night-border);
}
#screen-editor.editor-night .ed-btn {
  box-shadow: 2px 2px 0 var(--ed-night-shadow);
}
#screen-editor.editor-night .ed-btn:active {
  box-shadow: 1px 1px 0 var(--ed-night-shadow);
}
#screen-editor.editor-night .ed-btn.ed-gear,
#screen-editor.editor-night .ed-btn#ed-metronome:not(.is-on),
#screen-editor.editor-night #ed-panel-toggle,
#screen-editor.editor-night #ed-toolbar select,
#screen-editor.editor-night .ed-field input[type='text'],
#screen-editor.editor-night .ed-field input[type='number'],
#screen-editor.editor-night .ed-field input[type='file'],
#screen-editor.editor-night .ed-field select,
#screen-editor.editor-night .ed-mini-btn,
#screen-editor.editor-night .ed-autosave-options label,
#screen-editor.editor-night .ed-stepper input,
#screen-editor.editor-night .ed-stepper button,
#screen-editor.editor-night .ed-shortcuts-pager button,
#screen-editor.editor-night .ed-bookmark-add,
#screen-editor.editor-night .ed-bookmark-jump,
#screen-editor.editor-night .ed-transport-more summary,
#screen-editor.editor-night #ed-toolbox select,
#screen-editor.editor-night #ed-toolbox .ed-q-custom input,
#screen-editor.editor-night .ed-tool-btn,
#screen-editor.editor-night .ed-dropdown-value,
#screen-editor.editor-night .ed-dropdown-list,
#screen-editor.editor-night .ed-world-label,
#screen-editor.editor-night .ed-world-del,
#screen-editor.editor-night #ed-settings-popover {
  background: var(--ed-night-surface);
  border-color: var(--ed-night-border);
  color: var(--ed-night-text);
}
#screen-editor.editor-night #ed-play-pause,
#screen-editor.editor-night #ed-stop {
  background: #ff3c96;
  color: var(--white);
}
#screen-editor.editor-night #ed-gameplay-preview {
  background: #8a4dff;
  color: var(--white);
}
#screen-editor.editor-night .ed-btn:disabled,
#screen-editor.editor-night .ed-btn:disabled:hover,
#screen-editor.editor-night .ed-btn:disabled:active {
  background: #2b2e38;
  color: #717a87;
  box-shadow: none;
}
#screen-editor.editor-night .ed-speed-control,
#screen-editor.editor-night .ed-toolbar-label,
#screen-editor.editor-night .ed-section-head,
#screen-editor.editor-night .ed-value,
#screen-editor.editor-night .ed-side-readout strong,
#screen-editor.editor-night .ed-legend-row strong,
#screen-editor.editor-night .ed-settings-check,
#screen-editor.editor-night .ed-shortcuts-row .ed-key-word {
  color: var(--ed-night-text);
}
#screen-editor.editor-night .ed-field label,
#screen-editor.editor-night .ed-popover-field,
#screen-editor.editor-night .ed-side-field label,
#screen-editor.editor-night .ed-side-readout span,
#screen-editor.editor-night .ed-analysis-subtitle,
#screen-editor.editor-night .ed-boss-special-heading,
#screen-editor.editor-night .ed-tool-section label,
#screen-editor.editor-night .ed-tool-label,
#screen-editor.editor-night .ed-shortcuts-row span,
#screen-editor.editor-night .ed-loop-head,
#screen-editor.editor-night .ed-bookmark-title,
#screen-editor.editor-night .ed-bookmark-empty,
#screen-editor.editor-night .ed-theme-picker-hint {
  color: var(--ed-night-muted);
}
#screen-editor.editor-night .ed-section,
#screen-editor.editor-night .ed-section-song,
#screen-editor.editor-night .ed-section-chart,
#screen-editor.editor-night .ed-boss-special-world,
#screen-editor.editor-night .ed-world-row,
#screen-editor.editor-night .ed-side-panel,
#screen-editor.editor-night #ed-chain-popover,
#screen-editor.editor-night #ed-bpm-popover,
#screen-editor.editor-night #ed-time-signature-popover,
#screen-editor.editor-night #ed-branch-binding-popover {
  background: var(--ed-night-panel);
  border-color: var(--ed-night-border);
  color: var(--ed-night-text);
}
#screen-editor.editor-night .ed-section-song {
  border-left-color: var(--gold);
}
#screen-editor.editor-night .ed-section-chart {
  border-left-color: var(--ed-chart-color, var(--electric));
}
#screen-editor.editor-night .ed-boss-desc,
#screen-editor.editor-night .ed-boss-special-option-text,
#screen-editor.editor-night .ed-shortcuts-pager span,
#screen-editor.editor-night .ed-legend-row span:last-child {
  color: #c5ced8;
}
#screen-editor.editor-night .ed-boss-desc {
  background: rgba(255, 255, 255, 0.06);
}
#screen-editor.editor-night .ed-boss-special-boss-btn:not(.active),
#screen-editor.editor-night .ed-boss-special-pager-btn,
#screen-editor.editor-night .ed-boss-special-option:not(.active) {
  background: var(--ed-night-surface);
  color: var(--ed-night-text);
  box-shadow: 2px 2px 0 var(--ed-night-shadow);
}
#screen-editor.editor-night .ed-boss-special-option:not(.active) {
  color: var(--white);
}
#screen-editor.editor-night .ed-boss-special-option:not(.active) .ed-boss-special-option-text {
  color: var(--white);
}
#screen-editor.editor-night .ed-boss-special-option.active .ed-boss-special-option-text {
  color: var(--special-text, rgba(255, 255, 255, 0.9));
}
#screen-editor.editor-night .ed-boss-special-boss-btn:not(.active) {
  color: var(--special-color, var(--electric-bright));
}
#screen-editor.editor-night .ed-boss-special-pager-btn:disabled {
  color: #7a8290;
  box-shadow: none;
}
#screen-editor.editor-night .ed-boss-special-option:not(.active) .ed-boss-special-kind {
  background: var(--ed-night-surface-strong);
}
#screen-editor.editor-night .ed-shortcuts-row kbd {
  background: var(--ed-night-surface);
  border-color: var(--ed-night-border);
  color: var(--ed-night-text);
  box-shadow: 1px 1px 0 var(--ed-night-shadow);
}
#screen-editor.editor-night .ed-side-panel-toggle {
  background: var(--ed-night-surface-strong);
  border-color: var(--ed-night-border);
  color: var(--ed-night-text);
}
#screen-editor.editor-night .ed-diff-tab,
#screen-editor.editor-night .ed-add-diff-option {
  background: var(--ed-night-surface);
}
#screen-editor.editor-night #ed-add-diff-menu {
  background: var(--ed-night-panel);
  border-color: var(--ed-night-border);
  box-shadow: 3px 3px 0 var(--ed-night-shadow);
}
#screen-editor.editor-night .ed-diff-tab.ed-diff-add,
#screen-editor.editor-night .ed-diff-tab.ed-diff-del,
#screen-editor.editor-night .ed-diff-tab.active,
#screen-editor.editor-night .ed-tool-btn.active {
  color: var(--white);
}
#screen-editor.editor-night .ed-diff-tab.active {
  background-image: linear-gradient(
    110deg,
    var(--diff-color, var(--electric)) 0%,
    var(--diff-sub-color, var(--electric-bright)) 50%,
    var(--diff-color, var(--electric)) 100%
  );
  background-size: 200% 100%;
  border-color: var(--diff-color, var(--electric-bright));
  box-shadow:
    inset 0 0 0 2px var(--ed-night-selected-ring),
    0 0 14px color-mix(in srgb, var(--diff-color, var(--electric-bright)) 64%, transparent);
  animation: diff-flow 1.8s linear infinite;
}
#screen-editor.editor-night .ed-diff-tab.ed-diff-add {
  background: var(--gold);
  border-color: var(--gold);
}
#screen-editor.editor-night .ed-diff-tab.ed-diff-del {
  background: var(--red, #e23);
  border-color: var(--red, #e23);
}
#screen-editor.editor-night .ed-tool-btn.active,
#screen-editor.editor-night .ed-chain-q-mult.active {
  background: var(--electric);
  border-color: var(--electric-bright);
  color: var(--white);
  box-shadow:
    inset 0 0 0 2px var(--ed-night-selected-ring),
    0 0 12px var(--ed-night-active-glow);
}
#screen-editor.editor-night .ed-btn#ed-metronome.is-on,
#screen-editor.editor-night .ed-audio-solo-btn.is-on,
#screen-editor.editor-night .ed-audio-solo-btn[aria-pressed='true'],
#screen-editor.editor-night .ed-autosave-options label:has(input:checked) {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
  box-shadow:
    inset 0 0 0 2px var(--ed-night-selected-ring),
    0 0 12px var(--ed-night-warm-glow);
}
#screen-editor.editor-night .ed-boss-special-boss-btn.active,
#screen-editor.editor-night .ed-boss-special-option.active {
  background: color-mix(in srgb, var(--special-color, var(--electric)) 86%, var(--ed-night-text));
  border-color: var(--special-color, var(--electric-bright));
  color: var(--special-text, var(--white));
  box-shadow:
    inset 0 0 0 2px var(--ed-night-selected-ring),
    0 0 14px color-mix(in srgb, var(--special-color, var(--electric-bright)) 64%, transparent);
}
#screen-editor.editor-night .ed-boss-special-option.active .ed-boss-special-kind {
  box-shadow: inset 0 0 0 1px var(--ed-night-selected-ring);
}
#screen-editor.editor-night .ed-scatter-lane-btn.active,
#screen-editor.editor-night .ed-branch-mode-btn.active,
#screen-editor.editor-night .ed-dialogue-locale-btn.active,
#screen-editor.editor-night .ed-dialogue-character-btn.active,
#screen-editor.editor-night .ed-emerge-cell.active {
  box-shadow:
    inset 0 0 0 2px var(--ed-night-selected-ring),
    0 0 12px var(--ed-night-active-glow);
}
#screen-editor.editor-night .ed-branch-mode-btn.active {
  border-color: #ffd66b;
}
#screen-editor.editor-night .ed-dialogue-character-btn.active {
  border-color: var(--dialogue-character-color, #ffd66b);
}
#screen-editor.editor-night .ed-darkness-glow-btn.active .ed-darkness-glow-swatch {
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 0 8px currentColor,
    0 0 0 2px rgba(255, 255, 255, 0.34);
}
#screen-editor.editor-night .ed-transport-more[open] summary,
#screen-editor.editor-night .ed-dropdown-value[aria-expanded='true'] {
  background: var(--ed-night-surface-strong);
  border-color: var(--electric-bright);
  color: var(--ed-night-text);
  box-shadow:
    inset 0 0 0 1px rgba(244, 247, 251, 0.32),
    0 0 10px var(--ed-night-active-glow);
}
#screen-editor.editor-night .ed-side-title,
#screen-editor.editor-night .ed-side-subtitle,
#screen-editor.editor-night .ed-analysis-title,
#screen-editor.editor-night .ed-chain-title,
#screen-editor.editor-night .ed-bpm-title,
#screen-editor.editor-night .ed-time-signature-title,
#screen-editor.editor-night .ed-theme-picker-title {
  color: var(--electric-bright);
}
#screen-editor.editor-night .ed-settings-check,
#screen-editor.editor-night .ed-transport-controls,
#screen-editor.editor-night .ed-loop-controls,
#screen-editor.editor-night .ed-nav-route-wrap,
#screen-editor.editor-night .ed-analysis-assets {
  border-color: var(--ed-night-border);
}
#screen-editor.editor-night .ed-unknown-note-warning {
  background: rgba(255, 61, 127, 0.18);
  border-color: #ff5f8f;
  color: #ff8fb0;
}
#screen-editor.editor-night .ed-unknown-note-warning-detail {
  color: var(--ed-night-text);
}
#screen-editor.editor-night .ed-transport-more[open] summary {
  background: var(--ed-night-surface-strong);
}
#screen-editor.editor-night .ed-speed-control input[type='range']::-webkit-slider-runnable-track,
#screen-editor.editor-night .ed-speed-control input[type='range']::-moz-range-track {
  background: var(--ed-night-surface);
  border-color: var(--ed-night-border);
}
#screen-editor.editor-night .ed-speed-control input[type='range']::-webkit-slider-thumb,
#screen-editor.editor-night .ed-speed-control input[type='range']::-moz-range-thumb {
  border-color: var(--ed-night-border);
}
#screen-editor.editor-night #ed-chain-popover select,
#screen-editor.editor-night #ed-chain-popover input[type='number'],
#screen-editor.editor-night #ed-chain-popover input[type='range'],
#screen-editor.editor-night #ed-bpm-popover input,
#screen-editor.editor-night #ed-time-signature-popover input,
#screen-editor.editor-night #ed-time-signature-popover select,
#screen-editor.editor-night #ed-branch-binding-popover select,
#screen-editor.editor-night #ed-branch-binding-popover textarea,
#screen-editor.editor-night .ed-chain-q-mult,
#screen-editor.editor-night .ed-dialogue-locale-btn,
#screen-editor.editor-night .ed-branch-jump-btn {
  background: var(--ed-night-surface);
  border-color: var(--ed-night-border);
  color: var(--ed-night-text);
}
#screen-editor.editor-night .ed-dialogue-locale-btn.active {
  background: #c88400;
  border-color: #ffd66b;
  color: var(--white);
}
#screen-editor.editor-night .ed-dropdown-option {
  background: var(--ed-night-panel);
  color: var(--ed-night-text);
}
#screen-editor.editor-night .ed-dropdown-option.active {
  background: var(--ed-night-surface-strong);
  border-left: 4px solid var(--electric-bright);
  color: var(--ed-night-text);
  box-shadow:
    inset 0 0 0 1px rgba(244, 247, 251, 0.26),
    0 0 10px var(--ed-night-active-glow);
}
#screen-editor.editor-night .ed-dropdown-option:hover {
  filter: brightness(1.18);
}
#screen-editor.editor-night .ed-nav-route-btn.active,
#screen-editor.editor-night .ed-world-row.active,
#screen-editor.editor-night .ed-theme-card.active {
  outline-color: var(--electric-bright);
  box-shadow:
    inset 0 0 0 2px rgba(244, 247, 251, 0.4),
    0 0 12px var(--ed-night-active-glow);
}
#screen-editor.editor-night .ed-world-row.active {
  background: color-mix(in srgb, var(--electric) 16%, var(--ed-night-panel));
}
#screen-editor.editor-night #ed-scroll-track {
  background: var(--ed-night-surface);
  border-color: var(--ed-night-border);
}
#screen-editor.editor-night #ed-scroll-thumb {
  border-color: var(--ed-night-border);
}
.ed-tooltip.editor-night {
  background: #232532;
  border-color: #4a4e60;
  color: #f4f7fb;
  box-shadow: 3px 3px 0 #000000;
}

/* ---- Animations ---- */
@keyframes electric-crackle {
  0% {
    text-shadow:
      0 0 7px #fff,
      0 0 10px var(--electric),
      0 0 21px var(--electric),
      0 0 42px var(--electric),
      0 0 82px var(--electric);
  }
  25% {
    text-shadow:
      0 0 4px #fff,
      0 0 8px var(--electric-bright),
      0 0 18px var(--electric),
      0 0 35px var(--electric),
      3px -2px 60px var(--electric);
  }
  50% {
    text-shadow:
      0 0 9px #fff,
      0 0 14px var(--electric),
      0 0 28px var(--electric),
      0 0 50px var(--electric),
      0 0 90px var(--electric);
  }
  75% {
    text-shadow:
      0 0 5px #fff,
      -2px 0 10px var(--electric-bright),
      2px 3px 20px var(--electric),
      0 0 40px var(--electric),
      -3px 2px 70px var(--electric);
  }
}

@keyframes sparkle-flash {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes grid-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 36px 36px;
  }
}
@keyframes wipe-sweep {
  from {
    transform: translateX(-100%) skewX(-15deg);
  }
  to {
    transform: translateX(100%) skewX(-15deg);
  }
}
@keyframes result-wipe-in {
  0% {
    transform: translateY(10px) scale(0.94);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@keyframes result-failed-in {
  0% {
    transform: translateY(4px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes result-color-flash {
  0% {
    color: var(--gold);
  }
  34% {
    color: var(--electric-bright);
  }
  67% {
    color: #ff44ff;
  }
  100% {
    color: var(--gold);
  }
}
/* The shared glow, color-cycled in sync with result-color-flash. Applied to the
   .result-callout-stack wrapper so the halo is drawn once, beneath both texts. */
@keyframes result-glow-flash {
  0%,
  100% {
    filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px var(--gold))
      drop-shadow(0 0 10px var(--red));
  }
  34% {
    filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px var(--electric))
      drop-shadow(0 0 11px var(--electric-deep));
  }
  67% {
    filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #ff44ff) drop-shadow(0 0 12px var(--gold));
  }
}
@keyframes result-rank-color-flow {
  0%,
  100% {
    color: var(--result-rank-main);
  }
  50% {
    color: var(--result-rank-sub);
  }
}
@keyframes rank-rainbow-scroll {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: -360% 50%;
  }
}
@keyframes rank-hue-cycle {
  from {
    filter: saturate(1.35) hue-rotate(0deg);
  }
  to {
    filter: saturate(1.35) hue-rotate(360deg);
  }
}

#wipe-overlay {
  position: fixed;
  top: var(--app-top, 0px);
  left: calc(var(--app-left, 0px) - 30vw);
  width: calc(var(--app-width, 100vw) + 60vw);
  height: var(--app-height, 100dvh);
  background: var(--gold);
  z-index: 100;
  transform: translateX(100%);
  pointer-events: none;
}

/* ---- Custom Dropdown ---- */
.ed-dropdown-container {
  position: relative;
  width: 100%;
}
.ed-dropdown-value {
  width: 100%;
  margin-top: 4px;
  padding: 6px;
  border: 2px solid var(--border);
  background: #f0f4f8;
  color: var(--border);
  font-family: inherit;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ed-dropdown-value::after {
  content: '▼';
  font-size: 8px;
  margin-left: 6px;
}
.ed-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--border);
  background: var(--white);
  box-shadow: 3px 3px 0 var(--border);
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}
.ed-dropdown-list.hidden {
  display: none;
}
.ed-dropdown-option {
  min-height: 28px;
  padding: 6px;
  border: 0;
  color: var(--border);
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ed-dropdown-option:hover {
  filter: brightness(0.9);
}
.ed-dropdown-option.active {
  border-left: 4px solid var(--white);
  padding-left: 2px;
}

/* ── Branch-binding jump buttons ── */
.ed-branch-target-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  -webkit-text-stroke: 0;
}
.ed-branch-row-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ed-branch-target-row .ed-dropdown-container {
  min-width: 0;
}
.ed-branch-target-row .ed-dropdown-value {
  margin-top: 0;
}
.ed-branch-jump-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  margin-top: 0;
  border: 2px solid var(--border);
  background: #f0f4f8;
  color: var(--border);
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
}
.ed-branch-jump-btn:hover {
  background: var(--electric);
  color: var(--white);
}
.ed-branch-jump-btn:active {
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.18);
  transform: translate(1px, 1px);
}

/* ── Navigator world switcher ── */
.ed-nav-route-wrap {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 2px solid rgba(0, 0, 0, 0.18);
}
.ed-nav-route-wrap.hidden {
  display: none;
}
.ed-side-subtitle {
  margin-bottom: 5px;
  color: var(--electric);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
}
.ed-nav-route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: start;
  gap: 5px;
}
.ed-nav-route-btn {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 5px 2px;
  border: 2px solid var(--border);
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}
.ed-nav-route-btn:hover {
  filter: brightness(1.08);
}
.ed-nav-route-btn.active {
  outline: 2px solid var(--white);
  outline-offset: -4px;
}

/* ── Chart worlds panel ── */
.ed-side-panel-worlds {
  left: 42px;
  top: 300px;
  width: clamp(146px, 15vw, 190px);
}
.ed-worlds-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ed-world-row {
  display: flex;
  align-items: stretch;
  gap: 5px;
  border: 2px solid var(--border);
  background: rgba(255, 255, 255, 0.6);
  padding: 4px;
}
.ed-world-row.active {
  outline: 2px solid var(--electric);
  outline-offset: -4px;
}
.ed-world-label {
  flex: 0 0 auto;
  min-width: 46px;
  padding: 4px 5px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
}
.ed-world-label:hover {
  background: var(--electric);
  color: var(--white);
}
.ed-world-swatch {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 6px;
  border: 2px solid var(--border);
  cursor: pointer;
  font-family: inherit;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.ed-world-swatch:hover {
  filter: brightness(1.08);
}
.ed-world-del {
  flex: 0 0 auto;
  width: 24px;
  padding: 0;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--red);
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.ed-world-del:hover {
  background: var(--red);
  color: var(--white);
}
.ed-worlds-add {
  width: 100%;
  margin-top: 8px;
}
.ed-worlds-add.hidden {
  display: none;
}
.ed-worlds-add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* ── Theme picker overlay ── */
.ed-theme-picker {
  position: fixed;
  left: var(--app-left, 0px);
  top: var(--app-top, 0px);
  width: var(--app-width, 100vw);
  height: var(--app-height, 100dvh);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 18, 0.82);
}
.ed-theme-picker.hidden {
  display: none;
}
.ed-theme-picker.previewing {
  background: transparent;
}
.ed-theme-preview-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.ed-theme-picker.previewing .ed-theme-preview-canvas {
  opacity: 1;
}
.ed-theme-picker-panel {
  position: relative;
  z-index: 1;
  width: min(560px, 88vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 3px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
  font-family: var(
    --locale-ui-font,
    'WDXL Lubrifont JP N',
    'WDXL Lubrifont SC',
    'LotteMartDream',
    'Impact',
    'Arial Black',
    sans-serif
  );
}
.ed-theme-picker.previewing .ed-theme-picker-panel {
  background: rgba(255, 255, 255, 0.78);
}
.ed-theme-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.ed-theme-picker-title {
  color: var(--electric);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 3px;
}
.ed-theme-picker-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--border);
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.ed-theme-picker-close:hover {
  background: var(--red);
  color: var(--white);
}
.ed-theme-picker-hint {
  margin-bottom: 10px;
  color: #555;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}
.ed-theme-scroll {
  overflow-y: auto;
  padding-right: 4px;
}
.ed-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  justify-content: start;
  align-content: start;
}
.ed-theme-more-toggle {
  display: block;
  width: 100%;
  margin: 10px 0 8px;
  padding: 6px 8px;
  border: 2px solid var(--border);
  background: var(--cream);
  color: #333;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
}
.ed-theme-more-toggle:hover {
  background: var(--white);
}
.ed-theme-grid-more.hidden {
  display: none;
}
.ed-theme-card {
  position: relative;
  height: 52px;
  padding: 6px;
  border: 2px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.08s ease;
}
.ed-theme-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
}
.ed-theme-card.active {
  outline: 3px solid var(--white);
  outline-offset: -5px;
}
.ed-theme-card-name {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.1;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.ed-theme-card-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 1px 4px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.song-local-badge,
.song-story-lock-badge,
.fit-badge,
.fit-badge-text,
.record-slot,
.filter-chip,
.story-tier-card,
.story-tier-label,
.story-tier-desc,
.story-challenge-stamp,
.diff-select-info-key,
.diff-select-info-val,
.diff-select-boss-name,
.diff-scroll-cue,
.diff-select-card,
.diff-select-card-cat,
.diff-select-card-sp-marquee,
.result-song-meta,
.result-callout,
#result-pb,
#result-pb-delta,
.result-judge-badge,
.result-fc-combo,
.result-fc-digit,
.result-fc-label,
.story-challenge-scroll-cue,
.story-challenge-song-num,
.story-challenge-card-meta,
.story-challenge-next-meta,
.story-final-stage-meta,
.ed-diff-tab,
.ed-add-diff-option,
#ed-sp-title,
.ed-theme-card-badge {
  font-family: var(--app-main-font);
}

#screen-credits .credits-boss-name {
  font-family: var(--app-main-font);
}