:root {
      --bg: #05050e;
      --panel: #0d0d1f;
      --line: #1e1e3a;
      --text: #e8e8f8;
      --accent: #00f0ff;
      --c0: #1dd1a1;
      --c1: #ffd32a;
      --c2: #54a0ff;
      --c3: #ff6b6b;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    body {
      background: radial-gradient(ellipse at 50% 0%, #0d0d2e 0%, #000 70%);
      color: var(--text);
      font-family: 'Outfit', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      overscroll-behavior: none;
      overscroll-behavior-x: none;
      /* スクロール境界のバウンス効果を禁止 */
      -webkit-tap-highlight-color: transparent;
    }

    #app {
      width: 480px;
      height: 720px;
      min-width: 480px;
      min-height: 720px;
      max-width: 480px;
      max-height: 720px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      padding: 14px;
      gap: 10px;
      background: linear-gradient(180deg, #0a0a1e 0%, #06060f 100%);
      border: 1px solid rgba(0, 240, 255, 0.15);
      border-radius: 16px;
      position: relative;
      transform-origin: center center;
      user-select: none;
      -webkit-user-select: none;
      overflow: hidden;
      box-sizing: border-box;
    }

    #app:has(#result-screen.active) {
      padding: 4px 12px 6px;
      gap: 0;
    }

    #app.menu-bg {
      background-image: url(images/backimage.webp);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }



    .screen {
      display: none;
      flex-direction: column;
      width: 100%;
      height: 100%;
      max-height: 100%;
      overflow: hidden;
      box-sizing: border-box;
      min-height: 0;
      position: relative;
    }

    .screen.active {
      display: flex;
    }

    /* タイトル画面：ロゴは上、★・文言・ボタンは下詰め */
    #title-screen {
      justify-content: flex-start;
      align-items: center;
      padding: 4px 0;
    }

    .title-bottom {
      margin-top: auto;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
    }

    .title-credit {
      margin: 0;
      padding: 16px 0 8px;
      text-align: center;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      letter-spacing: 1px;
      font-weight: bold;
    }

    .game-logo-wrap {
      position: relative;
      width: min(360px, 88%);
      margin: 4px auto 2px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
    }

    .game-title {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 0 18px rgba(255, 100, 160, 0.35));
    }

    .game-title-overlay {
      position: absolute;
      bottom: 4px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 22px;
      font-weight: 900;
      color: #ffffff;
      letter-spacing: 6px;
      white-space: nowrap;
      text-shadow:
        0 0 10px rgba(0, 240, 255, 0.9),
        0 0 20px rgba(255, 107, 107, 0.6),
        2px 2px 4px rgba(0, 0, 0, 0.9),
        -2px -2px 4px rgba(0, 0, 0, 0.9);
      pointer-events: none;
    }

    .owned-stars-line {
      text-align: center;
      margin: 0 0 2px;
      font-size: 24px;
      font-weight: 900;
      color: #ffd32a;
      letter-spacing: 0.08em;
      text-shadow: 0 0 16px rgba(255, 211, 42, 0.45);
      line-height: 1.2;
      flex-shrink: 0;
    }

    .owned-stars-line [data-owned-stars] {
      color: #fff;
      font-weight: 900;
      font-size: 30px;
      margin-left: 4px;
    }

    .title-promo {
      text-align: center;
      margin: 0 0 6px;
      font-size: 20px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.8);
      letter-spacing: 0.04em;
      line-height: 1.2;
      flex-shrink: 0;
    }

    .menu-buttons {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      width: 100%;
      flex-shrink: 0;
    }

    .btn {
      border: none;
      border-radius: 8px;
      padding: 7px 14px;
      font-weight: 800;
      cursor: pointer;
      font-size: 13px;
      font-family: 'Outfit', sans-serif;
      letter-spacing: 0.05em;
      transition: all 0.15s;
    }

    .btn-menu {
      width: 320px;
      height: 62px;
      font-size: 26px;
      /* 文字サイズを倍近くに拡大して高齢者にも見やすく */
      font-weight: 900;
      color: #fff;
      background: linear-gradient(135deg, #3a3b5c 0%, #1e1f3a 100%);
      /* デフォルト背景 */
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
      transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s, filter 0.2s;
    }

    /* 各ボタンの個性的なグラデーションと影（楽しさの演出） */
    #btn-goto-songs,
    #btn-retry {
      background: linear-gradient(135deg, #ff007f 0%, #ff5e62 100%);
      box-shadow: 0 4px 15px rgba(255, 0, 127, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }

    #btn-highscore {
      background: linear-gradient(135deg, #ffd32a 0%, #ff9f43 100%);
      box-shadow: 0 4px 15px rgba(255, 211, 42, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
      color: #0d0d1f;
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    }

    #btn-result-back {
      background: linear-gradient(135deg, #00f0ff 0%, #00abff 100%);
      box-shadow: 0 4px 15px rgba(0, 240, 255, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
      color: #0d0d1f;
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    }

    #btn-goto-data {
      background: linear-gradient(135deg, #1dd1a1 0%, #10ac84 100%);
      box-shadow: 0 4px 15px rgba(29, 209, 161, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
      color: #0d0d1f;
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    }

    #btn-howtoplay {
      background: linear-gradient(135deg, #a55eea 0%, #8854d0 100%);
      box-shadow: 0 4px 15px rgba(165, 94, 234, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }

    #btn-othergames {
      background: linear-gradient(135deg, #718093 0%, #2f3640 100%);
      box-shadow: 0 4px 15px rgba(113, 128, 147, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }

    #btn-ranking-back {
      background: linear-gradient(135deg, #718093 0%, #3d4652 100%);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.2);
    }

    .btn-menu:hover {
      transform: translateY(-4px) scale(1.04);
      filter: brightness(1.2);
    }

    #btn-goto-songs:hover,
    #btn-retry:hover {
      box-shadow: 0 12px 25px rgba(255, 0, 127, 0.6);
    }

    #btn-highscore:hover {
      box-shadow: 0 12px 25px rgba(255, 211, 42, 0.6);
    }

    #btn-result-back:hover {
      box-shadow: 0 12px 25px rgba(0, 240, 255, 0.6);
    }

    #btn-goto-data:hover {
      box-shadow: 0 12px 25px rgba(29, 209, 161, 0.6);
    }

    #btn-howtoplay:hover {
      box-shadow: 0 12px 25px rgba(165, 94, 234, 0.6);
    }

    #btn-othergames:hover {
      box-shadow: 0 12px 25px rgba(113, 128, 147, 0.5);
    }

    #btn-ranking-back:hover {
      box-shadow: 0 12px 25px rgba(113, 128, 147, 0.6);
    }

    /* タイトルのメニュー：現在色のアウトライン・黒半透明・白文字・少し拡大 */
    #title-screen .btn-menu {
      width: 348px;
      height: 76px;
      font-size: 28px;
      flex-direction: column;
      gap: 2px;
      line-height: 1.05;
      background: rgba(0, 0, 0, 0.30);
      color: #fff;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
      border: 3px solid rgba(255, 255, 255, 0.85);
      box-shadow: none;
    }

    #title-screen .btn-en {
      font-size: 36px;
      font-weight: 900;
      letter-spacing: 0.06em;
    }

    #title-screen .btn-ja {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.12em;
      opacity: 0.88;
    }

    #title-screen #btn-goto-songs {
      border-color: #ff007f;
    }

    #title-screen #btn-highscore {
      border-color: #ffd32a;
      color: #fff;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    }

    #title-screen #btn-goto-data {
      border-color: #1dd1a1;
      color: #fff;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    }

    #title-screen #btn-howtoplay {
      border-color: #a55eea;
    }

    #title-screen #btn-othergames {
      border-color: #718093;
    }

    #title-screen .btn-menu:hover {
      background: rgba(0, 0, 0, 0.7);
      filter: brightness(1.15);
    }

    #title-screen #btn-goto-songs:hover {
      box-shadow: 0 0 18px rgba(255, 0, 127, 0.55);
    }

    #title-screen #btn-highscore:hover {
      box-shadow: 0 0 18px rgba(255, 211, 42, 0.55);
    }

    #title-screen #btn-goto-data:hover {
      box-shadow: 0 0 18px rgba(29, 209, 161, 0.55);
    }

    #title-screen #btn-howtoplay:hover {
      box-shadow: 0 0 18px rgba(165, 94, 234, 0.55);
    }

    #title-screen #btn-othergames:hover {
      box-shadow: 0 0 18px rgba(113, 128, 147, 0.45);
    }

    /* ランキング: クリア印（点数の左） */
    .rank-clear-mark {
      display: inline-block;
      min-width: 0.9em;
      color: #00f0ff;
      font-weight: 900;
      font-size: 14px;
      letter-spacing: 0;
      text-shadow: 0 0 8px rgba(0, 240, 255, 0.45);
      flex-shrink: 0;
    }

    .rank-clear-mark.assist {
      color: #1dd1a1;
      font-family: sans-serif;
      text-shadow: 0 0 8px rgba(29, 209, 161, 0.45);
    }

    .rank-clear-mark.rank-clear-assist-clear {
      min-width: 1.7em;
      letter-spacing: 0;
    }

    .rank-clear-mark .rank-clear-star {
      color: #00f0ff;
      text-shadow: 0 0 8px rgba(0, 240, 255, 0.45);
    }

    .rank-clear-mark .rank-clear-assist {
      color: #1dd1a1;
      font-family: sans-serif;
      text-shadow: 0 0 8px rgba(29, 209, 161, 0.45);
    }

    .rank-clear-slot {
      display: inline-block;
      min-width: 0.9em;
      flex-shrink: 0;
    }

    /* 端末マーク（pc / m） */
    .device-mark {
      font-weight: 900;
      font-size: 14px;
      letter-spacing: 0;
      text-transform: lowercase;
    }

    .device-mark.device-m {
      color: #54a0ff;
    }

    .device-mark.device-pc {
      color: #1dd1a1;
    }

    .device-mark.device-unknown {
      color: #666;
    }

    /* ランキング: 曲ごとのフレーム */
    .ranking-song-block {
      background: #000;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 12px;
      padding: 8px 12px 8px;
      margin-bottom: 0;
      flex-shrink: 0;
      box-sizing: border-box;
    }

    .ranking-song-title {
      font-size: 18px;
      margin: 0 0 6px;
      padding-bottom: 5px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .ranking-song-entries {
      display: flex;
      flex-direction: column;
    }

    .ranking-entry {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(255, 255, 255, 0.06);
      padding: 3px 8px;
      border-radius: 6px;
      margin-bottom: 3px;
      gap: 6px;
    }

    .ranking-entry:last-child {
      margin-bottom: 0;
    }

    /* 1位を目立たせるスタイル（テキストのみ強調） */
    .ranking-entry.rank-1 .ranking-entry-name {
      font-size: 18px;
    }

    .ranking-entry.rank-1 .ranking-entry-player {
      font-weight: 900;
      color: #ffeaa7;
      text-shadow: 0 0 4px rgba(255, 215, 0, 0.4);
    }

    .ranking-entry.rank-1 .ranking-entry-rank {
      color: #ffd700;
      font-weight: 900;
    }

    .ranking-entry-name {
      font-weight: bold;
      color: #fff;
      font-size: 16px;
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
      gap: 2px;
    }

    .ranking-entry-rank {
      display: inline-block;
      width: 1.6em;
      color: var(--accent);
      flex-shrink: 0;
    }

    .ranking-entry-player {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
      min-width: 0;
    }

    .ranking-entry-device {
      flex-shrink: 0;
      width: 1.6em;
      text-align: center;
    }

    .ranking-entry-score {
      color: #ffd32a;
      font-weight: 900;
      font-size: 16px;
      flex-shrink: 0;
      text-align: right;
      display: flex;
      align-items: baseline;
      justify-content: flex-end;
      gap: 2px;
      min-width: 5.5em;
    }

    .ranking-entry-pts-unit {
      font-size: 12px;
      color: #aaa;
      font-weight: normal;
    }

    .ranking-empty {
      color: #888;
      text-align: center;
      padding: 8px;
      font-size: 14px;
    }

    .btn-menu:active {
      transform: translateY(1px) scale(0.98);
      filter: brightness(0.95);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }

    .btn-stop {
      background: #e84118;
      color: #fff;
      border: none;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.04em;
      padding: 12px 20px;
      min-width: 96px;
      min-height: 48px;
      border-radius: 10px;
      box-shadow: 0 4px 14px rgba(232, 65, 24, 0.45);
    }

    .btn-stop:active {
      filter: brightness(0.92);
      transform: scale(0.97);
    }

    /* 曲選択画面 */
    #song-screen h2.screen-title {
      text-align: left;
      margin: 0;
      color: var(--accent);
      font-size: 28px;
      letter-spacing: 1px;
      line-height: 1.05;
    }

    h2.screen-title {
      text-align: center;
      margin-top: 20px;
      margin-bottom: 20px;
      color: var(--accent);
      font-size: 28px;
      letter-spacing: 2px;
    }

    .song-timing-tip {
      flex-shrink: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 4px 14px 4px 16px;
      min-height: 0;
    }

    .song-timing-tip-text {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
    }

    .song-timing-tip-img {
      width: 150px;
      height: 150px;
      flex-shrink: 0;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid rgba(0, 240, 255, 0.22);
      display: block;
      margin-right: 20px;
      /* 右に余白を置き、画像を左へ寄せる */
    }

    .song-timing-tip-caption {
      margin: 0;
      color: #ffffff;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.15;
      text-align: left;
    }

    .song-owned-stars {
      margin: 0;
      font-size: 24px;
      font-weight: 900;
      color: #ffd32a;
      letter-spacing: 0.06em;
      text-shadow: 0 0 12px rgba(255, 211, 42, 0.4);
      line-height: 1.05;
    }

    .song-owned-stars [data-owned-stars] {
      color: #fff;
      font-size: 32px;
      margin-left: 4px;
    }

    /* 曲選択: A面 / B面 / SP */
    .song-side-tabs {
      flex-shrink: 0;
      display: flex;
      gap: 8px;
      padding: 0 16px 8px;
      position: relative;
      z-index: 20;
    }

    .song-side-tab {
      flex: 1;
      appearance: none;
      border: 2px solid rgba(0, 240, 255, 0.35);
      background: rgba(0, 0, 0, 0.35);
      color: #ffffff;
      font-family: inherit;
      font-size: 32px;
      font-weight: 600;
      letter-spacing: 0.06em;
      padding: 4px 4px;
      border-radius: 12px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
      position: relative;
    }

    .side-tab-bonus {
      position: absolute;
      top: -12px;
      right: -4px;
      font-size: 15px;
      font-weight: 900;
      color: #fff;
      background: linear-gradient(135deg, #ff9f43, #ff6b6b);
      padding: 2px 5px;
      border-radius: 6px;
      letter-spacing: 0.3px;
      line-height: 1.2;
      pointer-events: none;
      box-shadow: 0 1px 6px rgba(255, 107, 107, 0.5);
    }

    .song-side-tab:hover {
      color: #fff;
      border-color: rgba(0, 240, 255, 0.7);
    }

    .song-side-tab.active {
      color: #00f0ff;
      background: rgba(0, 240, 255, 0.16);
      border-color: #00f0ff;
      box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
    }

    /* 曲選択: 右下の丸い「戻」（data.html の fab-back と同型） */
    #song-screen .fab-back {
      position: absolute;
      right: 20px;
      bottom: 20px;
      z-index: 40;
      width: 84px;
      height: 84px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid rgba(255, 255, 255, 0.3);
      text-decoration: none;
      font-family: 'Outfit', 'Hiragino Sans', 'Yu Gothic', sans-serif;
      font-size: 40px;
      font-weight: 900;
      color: #fff;
      background: linear-gradient(135deg, #3c40c6, #575fcf);
      box-shadow: 0 6px 22px rgba(60, 64, 198, 0.65);
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    }

    #song-screen .fab-back:hover {
      transform: scale(1.08);
      box-shadow: 0 6px 22px rgba(60, 64, 198, 0.7);
      filter: brightness(1.08);
    }

    #song-screen .fab-back:active {
      transform: scale(0.96);
    }

    .scrollable-list {
      flex: 1;
      overflow-y: auto;
      padding: 5px 20px 110px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 0;
      position: relative;
      z-index: 20;
    }

    .scrollable-list::-webkit-scrollbar {
      width: 6px;
    }

    .scrollable-list::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 3px;
    }

    .scrollable-list::-webkit-scrollbar-thumb {
      background: rgba(0, 240, 255, 0.3);
      border-radius: 3px;
    }

    .card {
      background: #000;
      border: 3px solid rgba(0, 240, 255, 0.45);
      border-radius: 12px;
      padding: 5px 10px;
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
      text-align: left;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      position: relative;
      flex-shrink: 0;
      min-height: 72px;
      box-sizing: border-box;
    }

    .card-jacket-wrap {
      position: relative;
      width: 70px;
      height: 70px;
      flex-shrink: 0;
    }

    .card-jacket {
      width: 70px;
      height: 70px;
      border-radius: 8px;
      object-fit: cover;
      background: rgba(0, 0, 0, 0.35);
      border: 1px solid rgba(255, 255, 255, 0.12);
      display: block;
    }

    .card-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .card:hover {
      background: #000;
      border-color: rgba(0, 240, 255, 0.85);
      box-shadow: 0 0 16px rgba(0, 240, 255, 0.35);
      transform: translateY(-2px);
    }

    .card:active {
      transform: translateY(0px);
    }

    /* 難易度ランク別アウトライン（★1〜6／背景は不透明黒固定） */
    .card.diff-1 {
      border-color: #54a0ff;
    }

    .card.diff-1:hover {
      border-color: #7ab8ff;
      box-shadow: 0 0 16px rgba(84, 160, 255, 0.4);
    }

    .card.diff-2 {
      border-color: #1dd1a1;
    }

    .card.diff-2:hover {
      border-color: #3de0b5;
      box-shadow: 0 0 16px rgba(29, 209, 161, 0.4);
    }

    .card.diff-3 {
      border-color: #ffd32a;
    }

    .card.diff-3:hover {
      border-color: #ffe066;
      box-shadow: 0 0 16px rgba(255, 211, 42, 0.4);
    }

    .card.diff-4 {
      border-color: #ff9f43;
    }

    .card.diff-4:hover {
      border-color: #ffb56b;
      box-shadow: 0 0 16px rgba(255, 159, 67, 0.4);
    }

    .card.diff-5 {
      border-color: #ff6b6b;
    }

    .card.diff-5:hover {
      border-color: #ff8e8e;
      box-shadow: 0 0 16px rgba(255, 107, 107, 0.4);
    }

    .card.diff-6 {
      border-color: #c0c0c0;
    }

    .card.diff-6:hover {
      border-color: #e8e8e8;
      box-shadow: 0 0 16px rgba(192, 192, 192, 0.35);
    }

    .card.card-locked {
      cursor: not-allowed;
      pointer-events: auto;
      overflow: hidden;
    }

    .card.card-locked:hover {
      transform: none;
      box-shadow: none;
      background: #000;
    }

    /* 暗転はカード本体だけ。文言オーバーレイは明るく目立たせる */
    .card.card-locked>.card-jacket-wrap,
    .card.card-locked>.card-body {
      opacity: 0.32;
      filter: grayscale(0.7);
    }

    .card-lock-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 14px;
      border-radius: 12px;
      background: rgba(6, 8, 22, 0.62);
      pointer-events: none;
      box-sizing: border-box;
    }

    .card-lock-banner {
      display: block;
      width: 100%;
      text-align: center;
      color: #ffd32a;
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0.04em;
      line-height: 1.35;
      text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.85),
        0 0 14px rgba(255, 211, 42, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.9);
    }

    .card-clear-mark {
      color: #ffd32a;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.08em;
      line-height: 1;
      white-space: nowrap;
      text-shadow: 0 0 6px rgba(255, 211, 42, 0.4);
      margin: 0;
    }

    .card-title {
      margin: 0;
      font-size: 19px;
      font-weight: 900;
      color: #fff;
      line-height: 1.1;
    }

    .card-meta {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #aaa;
      flex-wrap: nowrap;
      min-width: 0;
      overflow: hidden;
    }

    .card-meta-stars {
      flex: 0 0 auto;
      color: #ffd32a;
      font-size: 13px;
      white-space: nowrap;
    }

    .card-meta-duration {
      flex: 0 0 auto;
      color: #94a3b8;
      font-size: 12px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .card-meta-stars-6 {
      color: #ff4757;
      font-weight: 900;
      letter-spacing: 0.5px;
      text-shadow: 0 0 8px rgba(255, 71, 87, 0.85);
      animation: star6-pulse 1.8s infinite alternate ease-in-out;
    }

    @keyframes star6-pulse {
      0% {
        color: #ff4757;
        text-shadow: 0 0 6px rgba(255, 71, 87, 0.6);
      }

      100% {
        color: #ff6b81;
        text-shadow: 0 0 14px rgba(255, 107, 129, 1), 0 0 4px #ffffff;
      }
    }

    .card-meta-stars-0 {
      color: #64748b;
      font-weight: 700;
      opacity: 0.75;
    }

    .card-meta-notes {
      flex: 0 0 auto;
      color: #cbd5e1;
      font-size: 12px;
      white-space: nowrap;
    }

    .card-meta-plays {
      flex: 0 0 auto;
      color: #94a3b8;
      font-size: 12px;
      white-space: nowrap;
    }

    /* 本日ランキング表示（today 1st, 2nd, 3rd） */
    .card-meta-today-rank {
      flex: 0 0 auto;
      white-space: nowrap;
      font-size: 11px;
      font-weight: 900;
      padding: 1px 7px;
      border-radius: 10px;
      line-height: 1.35;
      letter-spacing: 0.03em;
      text-transform: lowercase;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 2px;
    }

    .card-meta-today-rank.rank-1 {
      background: linear-gradient(135deg, #ffe066 0%, #ffb703 100%);
      color: #000;
      box-shadow: 0 0 8px rgba(255, 183, 3, 0.7);
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
      animation: rank1-glow 2s infinite alternate ease-in-out;
    }

    .card-meta-today-rank.rank-2 {
      background: linear-gradient(135deg, #e2e8f0 0%, #00f0ff 100%);
      color: #000;
      box-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .card-meta-today-rank.rank-3 {
      background: linear-gradient(135deg, #ff9f43 0%, #ff6b6b 100%);
      color: #fff;
      box-shadow: 0 0 8px rgba(255, 107, 107, 0.6);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    }

    @keyframes rank1-glow {
      0% {
        box-shadow: 0 0 6px rgba(255, 183, 3, 0.6);
      }

      100% {
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.9), 0 0 4px #ffffff;
      }
    }

    .song-badge {
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(-50%, -50%);
      z-index: 1;
      display: inline-block;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.06em;
      line-height: 1;
      padding: 5px 8px;
      border-radius: 5px;
      color: #1a1a1a;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
      pointer-events: none;
    }

    .song-badge-new {
      background: #ffd32a;
      color: #2a2200;
    }

    .song-badge-hot {
      background: #d30d0d;
      color: #ffdbdb;
    }

    .song-badge-hard {
      background: #ff4757;
      color: #fff;
    }

    .song-badge-re {
      background: #ffffff;
      color: #041428;
      letter-spacing: 0.02em;
    }

    .song-badge-star {
      background: #ddba0a;
      color: #fffebe;
      letter-spacing: 0;
      font-size: 16px;
      padding: 4px 7px;
    }

    .card-desc {
      font-size: 13px;
      color: #bbb;
      line-height: 1.5;
    }

    .card-no-notes {
      color: #ff6b6b;
      font-size: 12px;
    }

    /* 難易度カード */
    .diff-card {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    /* 統計グラフ */
    .accuracy-bar {
      display: flex;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      overflow: hidden;
      margin-top: 6px;
      background: rgba(255, 255, 255, 0.05);
    }

    .acc-segment {
      height: 100%;
    }

    .acc-perfect {
      background: #00f0ff;
    }

    .acc-good {
      background: #ffd32a;
    }

    .acc-bad {
      background: #ff9f43;
    }

    .acc-miss {
      background: #ff4444;
    }

    /* ゲーム画面 */
    #topbar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 40;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 8px 8px 0;
      pointer-events: none;
    }

    .game-top-title {
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 15px;
      font-weight: 900;
      color: #ffffff;
      letter-spacing: 2px;
      white-space: nowrap;
      pointer-events: none;
      z-index: 15;
      text-shadow:
        0 0 8px rgba(0, 240, 255, 0.9),
        0 0 16px rgba(255, 107, 107, 0.5),
        1px 1px 3px rgba(0, 0, 0, 0.9);
    }

    #topbar #stop-btn {
      pointer-events: auto;
      flex-shrink: 0;
      font-size: 18px;
      padding: 12px 22px;
      min-width: 100px;
      min-height: 50px;
    }

    #status {
      display: flex;
      flex: 1;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      background: transparent;
      border: none;
      padding: 6px 10px;
      border-radius: 6px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7);
    }

    #combo-display {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    #song-jacket {
      width: 70px;
      height: 70px;
      border-radius: 6px;
      object-fit: cover;
      flex-shrink: 0;
      border: 1px solid rgba(255, 255, 255, 0.35);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
      background: #0a0a18;
    }

    #phase {
      color: var(--accent);
      font-weight: 700;
      flex: 1;
      text-align: center;
    }

    #score {
      color: #ffd32a;
      font-weight: 800;
    }


    #canvas-wrap {
      position: relative;
      flex: 1;
      background: #080814;
      border: 1px solid rgba(0, 240, 255, 0.18);
      border-radius: 12px;
      overflow: hidden;
      min-height: 0;
      transition: border-color 0.12s ease, box-shadow 0.12s ease;
    }

    /* コンボ上昇時の枠のさりげない暖色（画面全体は光らせない） */
    #canvas-wrap.combo-heat-low {
      border-color: rgba(255, 160, 120, 0.32);
    }

    #canvas-wrap.combo-heat-mid {
      border-color: rgba(255, 100, 90, 0.42);
    }

    #canvas-wrap.combo-heat-high {
      border-color: rgba(255, 70, 70, 0.55);
    }

    /* テンションメーター（両端6px・scaleY で高さ表現＝レイアウト再計算を避ける） */
    #perfect-meter,
    #perfect-meter-r {
      position: absolute;
      bottom: 0;
      width: 6px;
      height: 100%;
      z-index: 4;
      pointer-events: none;
      background: #00f0ff;
      opacity: 1;
      transform: scaleY(0);
      transform-origin: bottom center;
      transition: transform 0.08s linear, background-color 0.06s linear;
      will-change: transform;
      box-shadow: none;
    }

    #perfect-meter {
      left: 0;
    }

    #perfect-meter-r {
      right: 0;
    }

    /* 拍に合わせたメーター点滅 */
    #perfect-meter.meter-beat-flash,
    #perfect-meter-r.meter-beat-flash {
      background: #b4faff;
    }

    /* テンション危険（10%未満）：赤点滅（不透明のまま色だけ切替） */
    #perfect-meter.meter-danger,
    #perfect-meter-r.meter-danger {
      background: #ff4444;
      animation: meter-danger-blink 0.55s ease-in-out infinite;
    }

    @keyframes meter-danger-blink {

      0%,
      100% {
        background: #c0392b;
      }

      50% {
        background: #ff5a5a;
      }
    }

    #bg-canvas,
    #game-canvas {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: block;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
      -ms-interpolation-mode: nearest-neighbor;
    }

    #bg-canvas {
      z-index: 0;
    }

    #game-canvas {
      z-index: 1;
      background: transparent;
    }

    #judge-bar {
      position: absolute;
      left: 0;
      right: 0;
      top: var(--judge-y, 75%);
      height: var(--judge-thick, 4px);
      margin-top: calc(var(--judge-thick, 4px) / -2);
      background: #00f0ff;
      pointer-events: none;
      z-index: 2;
    }

    .judge-bar-knob {
      display: none;
      position: absolute;
      top: 50%;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #00f0ff;
      border: 2px solid #fff;
      box-shadow: 0 0 10px rgba(0, 240, 255, 0.95), 0 1px 3px rgba(0, 0, 0, 0.65);
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .judge-bar-knob:nth-child(1) { left: 22%; }
    .judge-bar-knob:nth-child(2) { left: 50%; }
    .judge-bar-knob:nth-child(3) { left: 78%; }

    /* ポーズ中だけ掴める。▲▼と重ならないよう左を空ける */
    #canvas-wrap.is-paused #judge-bar {
      left: 56px;
      z-index: 34;
      height: 48px;
      margin-top: -24px;
      background: transparent;
      pointer-events: auto;
      cursor: ns-resize;
      touch-action: none;
    }

    #canvas-wrap.is-paused #judge-bar::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: var(--judge-thick, 4px);
      margin-top: calc(var(--judge-thick, 4px) / -2);
      background: #00f0ff;
      box-shadow: 0 0 8px rgba(0, 240, 255, 0.55);
      pointer-events: none;
    }

    #canvas-wrap.is-paused .judge-bar-knob {
      display: block;
      animation: judge-knob-pulse 1.35s ease-in-out infinite;
    }

    #judge-bar.is-dragging .judge-bar-knob {
      animation: none;
      transform: translate(-50%, -50%) scale(1.28);
    }

    @keyframes judge-knob-pulse {
      0%, 100% { transform: translate(-50%, -50%) scale(1); }
      50% { transform: translate(-50%, -50%) scale(1.18); }
    }

    #hit-flashes {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 3;
      overflow: hidden;
    }

    .hit-flash {
      position: absolute;
      display: none;
      height: 0;
      /* PERFECT連鎖ぶん横に伸ばして出し、ノーツ幅へ縮む（中心固定） */
      transform-origin: 50% 50%;
      border-top: var(--judge-thick, 4px) solid #ffffff;
      margin-top: calc(var(--judge-thick, 4px) / -2);
      pointer-events: none;
    }

    .hit-flash.is-on {
      display: block;
    }

    /* ダンスは game-screen 全体オーバーレイ（判定バー非連動・ボタンより前面・タッチ透過） */
    #dance-canvas {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: block;
      z-index: 25;
      background: transparent;
      pointer-events: none !important;
    }

    /* ポーズ中：ゲームキャンバスはノーツのまま。UIは DOM */
    #canvas-wrap.is-paused #game-canvas {
      z-index: 1;
    }

    #canvas-wrap.is-paused #perfect-meter,
    #canvas-wrap.is-paused #perfect-meter-r {
      z-index: 4;
    }

    #canvas-wrap.is-paused #topbar {
      z-index: 40;
    }

    #lanes {
      position: relative;
      z-index: 30;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }

    /* ミス時：ボタンを約0.5秒モノクロ（CSS filter のみ・再描画なし） */
    #lanes.miss-mono .lane-btn {
      filter: grayscale(1) brightness(0.85);
      transition: filter 0.08s linear;
    }

    /* ミス時：枠のシェイク（transform のみ・キャンバス負荷なし） */
    #canvas-wrap.miss-shake {
      animation: miss-shake-anim 0.22s ease-out;
    }

    /* BAD時：軽いシェイクのみ（グレー化なし） */
    #canvas-wrap.bad-shake {
      animation: bad-shake-anim 0.14s ease-out;
    }

    @keyframes bad-shake-anim {

      0%,
      100% {
        transform: translate(0, 0);
      }

      50% {
        transform: translate(-1px, 0);
      }
    }

    @keyframes miss-shake-anim {

      0%,
      100% {
        transform: translate(0, 0);
      }

      20% {
        transform: translate(-3px, 1px);
      }

      40% {
        transform: translate(3px, -1px);
      }

      60% {
        transform: translate(-2px, 0);
      }

      80% {
        transform: translate(1px, 0);
      }
    }

    /* 全端末共通の軽量ボタン（影・グラデ・transition なし） */
    .lane-btn {
      border: none;
      border-radius: 10px;
      padding: 0;
      /* 見た目の高さは 65px を維持 */
      height: 65px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 900;
      color: #000 !important;
      cursor: pointer;
      border-bottom: 3px solid rgba(0, 0, 0, 0.3);
      position: relative;
      overflow: visible;
    }

    /* 見た目はそのままでタッチ・ポインター反応領域だけ上方向に大幅拡張 */
    /* タイミングバーとの誤動作を防ぐ隙間を保ちつつ、上側に +50px の透明判定エリアを配置 */
    .lane-btn::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: -50px;
      bottom: 0;
      cursor: pointer;
      z-index: 1;
    }

    /* モバイル：ラベル文字なし（高さは .lane-btn の 65px を維持） */
    #lanes.lanes-mobile .lane-btn {
      color: transparent !important;
      -webkit-text-fill-color: transparent;
      touch-action: none;
    }

    .lane-btn.active {
      opacity: 0.85;
      /* 合成レイヤのみ（Canvas・判定には影響なし） */
      transform: translateY(-5px);
      border-bottom-width: 1px;
      filter: brightness(1.15);
    }

    /* アシスト未使用レーン（レーン0） */
    .lane-btn.assist-unused {
      opacity: 0.28;
      filter: grayscale(0.55);
    }

    .lane-btn.assist-unused.active {
      opacity: 0.45;
      filter: grayscale(0.35) brightness(1.05);
    }

    .a {
      background: #1dd1a1;
      color: #1dd1a1;
    }

    .b {
      background: #ffd32a;
      color: #ffd32a;
    }

    .c {
      background: #54a0ff;
      color: #54a0ff;
    }

    .d {
      background: #ff6b6b;
      color: #ff6b6b;
    }

    #lyric-overlay,
    #judge-overlay,
    #popup-overlay {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      pointer-events: none;
      z-index: 5;
      opacity: 0;
      white-space: pre-wrap;
      font-family: Outfit, sans-serif;
    }

    #lyric-overlay {
      top: 110px;
      left: 1em;
      right: 1em;
      width: auto;
      max-width: none;
      transform: none;
      font: 700 26px Outfit, sans-serif;
      color: #fff;
      line-height: 1.35;
    }

    #judge-overlay {
      /* 2行ブロックの中央が高さ基準点に来る */
      bottom: auto;
      top: 38%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      font: 900 47px Outfit, sans-serif;
      /* 36×1.3 */
      z-index: 8;
      max-width: none;
      white-space: nowrap;
      letter-spacing: 0.02em;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.55);
      line-height: 1;
      opacity: 0;
      transition: opacity 0.45s linear;
      contain: layout style;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #judge-overlay.is-shown {
      opacity: 1;
      transition: none;
    }

    #judge-overlay .judge-combo-block {
      position: relative;
      overflow: hidden;
      /* 固定枠でスロットを absolute のまま重ねる（position 切替によるリフロー回避） */
      /* サイズは中身の1.3倍。リールは % 移動のため枠と一緒にスケールしても崩れない */
      display: block;
      width: 364px;
      min-height: 99px;
      padding: 5px 16px;
      box-sizing: border-box;
      margin: 0 auto;
    }

    /* 両スロットとも常に absolute。動きは translate3d / opacity のみ */
    #judge-overlay .judge-slot {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -150%, 0);
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 8px;
      pointer-events: none;
      opacity: 0;
      backface-visibility: hidden;
    }

    /* 表示中（アニメ終了後） */
    #judge-overlay .judge-slot.is-active {
      transform: translate3d(-50%, -50%, 0);
      opacity: 1;
    }

    /* 登場・退場中だけ合成レイヤを要求 */
    #judge-overlay .judge-slot.reel-in,
    #judge-overlay .judge-slot.reel-out {
      will-change: transform, opacity;
    }

    #judge-overlay .judge-slot.reel-in {
      animation: reel-slot-in 0.13s cubic-bezier(0.15, 0.85, 0.35, 1.12) forwards;
    }

    #judge-overlay .judge-slot.reel-out {
      animation: reel-slot-out 0.13s cubic-bezier(0.4, 0, 1, 1) forwards;
    }

    @keyframes reel-slot-out {
      0% {
        transform: translate3d(-50%, -50%, 0);
        opacity: 1;
      }

      100% {
        transform: translate3d(-50%, 80%, 0);
        opacity: 0;
      }
    }

    @keyframes reel-slot-in {
      0% {
        transform: translate3d(-50%, -160%, 0);
        opacity: 0.6;
      }

      100% {
        transform: translate3d(-50%, -50%, 0);
        opacity: 1;
      }
    }

    #judge-overlay .judge-text-col {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      gap: 1px;
      line-height: 1.05;
      margin-right: 0;
    }

    #judge-overlay .judge-grade,
    #judge-overlay .judge-combo-caption {
      font-size: 22px;
      /* 17×1.3 */
      font-weight: 700;
      letter-spacing: 0.1em;
      line-height: 1.05;
    }

    #judge-overlay .judge-label-perfect {
      color: rgba(0, 240, 255, 0.85);
    }

    #judge-overlay .judge-label-good {
      color: rgba(255, 211, 42, 0.85);
    }

    #judge-overlay .judge-combo-caption {
      color: rgba(255, 255, 255, 0.65);
    }

    /* スライドバナー: タイミングバー直上・白固定・文字小／数値は倍 */
    #combo-break-overlay {
      position: absolute;
      /* top は JS が判定バー位置に合わせて設定 */
      top: 72%;
      bottom: auto;
      left: 50%;
      transform: translate3d(55vw, -100%, 0);
      z-index: 9;
      pointer-events: none;
      opacity: 0;
      white-space: nowrap;
      font: 700 16px Outfit, sans-serif;
      letter-spacing: 0.06em;
      color: #fff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.45);
      will-change: auto;
      contain: layout style;
    }

    #combo-break-overlay .combo-break-num {
      font-size: 32px;
      font-weight: 900;
      letter-spacing: 0.02em;
      color: #fff;
      vertical-align: -0.08em;
      margin: 0 0.06em;
    }

    #combo-break-overlay.is-show {
      will-change: transform, opacity;
      animation: combo-break-slide 1.05s cubic-bezier(0.22, 0.82, 0.25, 1) forwards;
    }

    /* 半拍連続 Perfect の誉め言葉バナー（通常の2倍・段階色）
       Nice! から既に色が分かるよう、クールシアン寄りから温かいゴールドへ */
    #combo-break-overlay.is-praise {
      font-size: 32px;
      letter-spacing: 0.04em;
      color: #9ee8f2;
      text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.88),
        0 0 10px rgba(0, 0, 0, 0.35);
    }

    #combo-break-overlay.is-praise[data-praise-tier="0"] {
      color: #9ee8f2;
    }

    /* Nice — ソフトシアン */
    #combo-break-overlay.is-praise[data-praise-tier="1"] {
      color: #8fe0e8;
    }

    /* Great */
    #combo-break-overlay.is-praise[data-praise-tier="2"] {
      color: #8eddd8;
    }

    /* Cool */
    #combo-break-overlay.is-praise[data-praise-tier="3"] {
      color: #95dbc8;
    }

    /* Excellent */
    #combo-break-overlay.is-praise[data-praise-tier="4"] {
      color: #a5dcb0;
    }

    /* Fantastic */
    #combo-break-overlay.is-praise[data-praise-tier="5"] {
      color: #bddb98;
    }

    /* Brilliant */
    #combo-break-overlay.is-praise[data-praise-tier="6"] {
      color: #d4d488;
    }

    /* Marvelous */
    #combo-break-overlay.is-praise[data-praise-tier="7"] {
      color: #e6ce78;
    }

    /* Perfect */
    #combo-break-overlay.is-praise[data-praise-tier="8"] {
      color: #f0c46c;
    }

    /* Incredible */
    #combo-break-overlay.is-praise[data-praise-tier="9"] {
      color: #f6ba62;
    }

    /* Outstanding */
    #combo-break-overlay.is-praise[data-praise-tier="10"] {
      color: #fab058;
    }

    /* Phenomenal */
    #combo-break-overlay.is-praise[data-praise-tier="11"] {
      color: #ffa84e;
    }

    /* Flawless — 暖色ゴールド */

    @keyframes combo-break-slide {
      0% {
        transform: translate3d(55vw, -100%, 0);
        opacity: 0;
      }

      18% {
        transform: translate3d(-50%, -100%, 0);
        opacity: 1;
      }

      62% {
        transform: translate3d(-50%, -100%, 0);
        opacity: 1;
      }

      100% {
        transform: translate3d(-120vw, -100%, 0);
        opacity: 0;
      }
    }

    #judge-overlay .judge-num {
      font-size: 90px;
      /* 69×1.3 */
      font-weight: 900;
      line-height: 1;
      text-align: left;
      font-variant-numeric: tabular-nums;
      margin: 0;
      padding: 0;
    }

    #judge-overlay .judge-num.is-combo {
      color: #ffd32a;
      text-shadow: 0 0 10px rgba(255, 211, 42, 0.45), 0 1px 3px rgba(0, 0, 0, 0.85);
    }

    #judge-overlay .judge-num.is-perfect {
      color: #00f0ff;
      text-shadow: 0 0 10px rgba(0, 240, 255, 0.45), 0 1px 3px rgba(0, 0, 0, 0.85);
    }

    #popup-overlay {
      top: 42%;
      font: 900 48px Outfit, sans-serif;
      z-index: 7;
    }

    /* タイミングオフセット表示（ダンスより前面・タッチ透過） */
    #timing-hud {
      position: absolute;
      right: 10px;
      top: 72%;
      transform: translateY(-100%);
      text-align: right;
      pointer-events: none;
      z-index: 28;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      font-family: Outfit, sans-serif;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.55);
    }

    #timing-hud-ms {
      font-size: 16px;
      font-weight: 800;
      color: #fff;
      line-height: 1.2;
    }

    #timing-hud-tip {
      font-size: 10px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.2;
      max-width: 160px;
    }

    #timing-hud-tip:empty {
      display: none;
    }

    /* READY / GO（Score と同じ DOM。ゲームキャンバスは 180 のまま） */
    #countdown-overlay {
      display: none;
      position: absolute;
      inset: 0;
      z-index: 20;
      pointer-events: none;
      align-items: center;
      justify-content: center;
    }

    #countdown-overlay.is-show {
      display: flex;
    }

    #canvas-wrap.is-paused #countdown-overlay {
      display: none;
    }

    .countdown-band {
      width: 100%;
      padding: 28px 12px 32px;
      background: none;
      text-align: center;
    }

    #countdown-text {
      font: 900 52px Outfit, sans-serif;
      letter-spacing: 0.04em;
      line-height: 1.1;
    }

    #countdown-overlay.is-ready #countdown-text {
      color: #00f0ff;
      text-shadow: 0 0 18px rgba(0, 240, 255, 0.85), 0 2px 6px rgba(0, 0, 0, 0.7);
    }

    #countdown-overlay.is-go #countdown-text {
      color: #1dd1a1;
      text-shadow: 0 0 18px rgba(29, 209, 161, 0.85), 0 2px 6px rgba(0, 0, 0, 0.7);
    }

    #countdown-text.is-pop {
      animation: countdown-pop 0.85s ease-out both;
    }

    #countdown-overlay.is-go #countdown-text.is-pop {
      animation-duration: 0.7s;
    }

    @keyframes countdown-pop {
      from {
        transform: scale(0.85);
        opacity: 0.45;
      }

      to {
        transform: scale(1.08);
        opacity: 1;
      }
    }

    #countdown-assist {
      font: 900 16px Outfit, sans-serif;
      color: #ff9999;
      text-shadow: 0 0 14px rgba(255, 77, 77, 0.8);
      margin-bottom: 8px;
    }

    #countdown-meta {
      margin-top: 10px;
      display: flex;
      justify-content: center;
      align-items: baseline;
      gap: 12px;
    }

    #countdown-overlay.is-go #countdown-meta {
      display: none;
    }

    #countdown-offset {
      font: 600 13px Outfit, sans-serif;
      color: rgba(255, 255, 255, 0.9);
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    }

    #countdown-fps {
      font: 700 13px Outfit, sans-serif;
      color: rgba(255, 255, 255, 0.72);
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    }

    #countdown-fps:empty {
      display: none;
    }

    /* ポーズ UI（Score / タイトルと同じ DOM） */
    #pause-overlay {
      display: none;
      position: absolute;
      inset: 0;
      z-index: 32;
      pointer-events: none;
    }

    #canvas-wrap.is-paused #pause-overlay {
      display: block;
    }

    .pause-dim {
      position: absolute;
      left: 0;
      right: 0;
      pointer-events: none;
    }

    .pause-dim-top {
      top: 0;
      height: calc(var(--judge-y, 75%) - 28px);
      background: rgba(0, 0, 0, 0.45);
    }

    .pause-dim-bot {
      top: calc(var(--judge-y, 75%) + 28px);
      bottom: 0;
      background: rgba(0, 0, 0, 0.35);
    }

    .pause-panel {
      position: absolute;
      left: 50%;
      top: 10%;
      transform: translateX(-50%);
      width: min(340px, calc(100% - 24px));
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      pointer-events: none;
    }

    .pause-title {
      font: 900 42px Outfit, sans-serif;
      color: #ffd32a;
      letter-spacing: 0.06em;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
      line-height: 1;
    }

    .pause-hint {
      margin: 0;
      font: 600 13px Outfit, sans-serif;
      color: rgba(255, 255, 255, 0.9);
      text-align: center;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    }

    .pause-actions {
      display: flex;
      gap: 12px;
      width: 100%;
      margin-top: 4px;
      pointer-events: auto;
    }

    .pause-btn {
      flex: 1;
      height: 44px;
      border: none;
      border-radius: 10px;
      color: #fff;
      font: 900 16px Outfit, sans-serif;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
      cursor: pointer;
      touch-action: manipulation;
    }

    .pause-btn-quit {
      background: linear-gradient(#243eed, #213fff);
    }

    .pause-btn-restart {
      background: linear-gradient(#f53838, #e32929);
    }

    .pause-btn:active {
      filter: brightness(0.92);
      transform: scale(0.97);
    }

    .pause-row {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 48px;
      padding: 0 12px;
      border: none;
      background: rgba(0, 12, 24, 0.72);
      border-radius: 10px;
      color: rgba(255, 255, 255, 0.88);
      font: 700 16px Outfit, sans-serif;
      pointer-events: auto;
      cursor: pointer;
      touch-action: manipulation;
      text-align: left;
      font-family: Outfit, sans-serif;
    }

    .pause-row-quality {
      cursor: default;
    }

    .pause-switch {
      margin-left: auto;
      width: 52px;
      height: 30px;
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.22);
      position: relative;
      flex-shrink: 0;
    }

    .pause-switch::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }

    .pause-switch.is-on {
      background: #00d5e0;
    }

    .pause-switch.is-on::after {
      left: auto;
      right: 3px;
    }

    .pause-quality {
      margin-left: auto;
      display: flex;
      gap: 5px;
    }

    .pause-quality button {
      min-width: 56px;
      height: 32px;
      border: none;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.14);
      color: rgba(255, 255, 255, 0.9);
      font: 800 13px Outfit, sans-serif;
      cursor: pointer;
      touch-action: manipulation;
    }

    .pause-quality button.is-on {
      background: #00d5e0;
      color: #081018;
    }

    .pause-timing-block {
      margin: 6px 0 0;
      width: 100%;
      text-align: center;
    }

    .pause-timing-head {
      margin: 0;
      font: 800 20px Outfit, sans-serif;
      color: #ffd32a;
      line-height: 1.3;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    }

    .pause-timing-hint {
      margin: 4px 0 0;
      font: 700 20px Outfit, sans-serif;
      color: #ffd32a;
      line-height: 1.35;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    }

    .pause-timing-hint.is-ok {
      color: #1dd1a1;
    }

    .pause-timing-hint.is-late {
      color: #ff9f43;
    }

    .pause-timing-hint.is-early {
      color: #00f0ff;
    }

    #pause-nudge {
      position: absolute;
      left: 10px;
      top: var(--judge-y, 75%);
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 20px;
      pointer-events: none;
      z-index: 35;
    }

    #pause-nudge button {
      pointer-events: auto;
      width: 38px;
      height: 38px;
      border-radius: 7px;
      border: 2px solid rgba(0, 240, 255, 0.95);
      background: rgba(0, 20, 30, 0.82);
      color: #00f0ff;
      font: 900 16px Outfit, sans-serif;
      cursor: pointer;
      touch-action: manipulation;
      padding: 0;
      line-height: 1;
    }

    #pause-zero-ms {
      position: absolute;
      left: 56px;
      top: var(--judge-y, 75%);
      transform: translateY(-120%);
      font: 600 12px Outfit, sans-serif;
      color: rgba(255, 255, 255, 0.7);
      pointer-events: none;
      z-index: 35;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    }

    /* ビートガイド用（DOM線は使わず、Canvas判定線の発光のみ） */

    #help {
      font-size: 10px;
      opacity: 0.45;
      text-align: center;
      letter-spacing: 0.04em;
    }

    /* ローディング */
    .loading-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 16px;
      z-index: 30;
      border-radius: 16px;
    }

    /* ロード画面のロゴ */
    .loading-logo-banner {
      position: absolute;
      top: 12px;
      left: 0;
      right: 0;
      text-align: center;
      z-index: 1;
    }

    .loading-logo-img {
      display: inline-block;
      max-width: 90%;
      height: auto;
    }

    .loading-overlay .spinner {
      width: 40px;
      height: 40px;
      border: 3px solid rgba(0, 240, 255, 0.2);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .loading-overlay p,
    .loading-overlay .loading-msg {
      color: var(--accent);
      font-weight: 700;
      text-align: center;
      line-height: 1.45;
      font-size: 15px;
      max-width: 90%;
    }

    .loading-overlay .loading-sub {
      display: block;
      margin-top: 6px;
      font-size: 12px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.75);
    }

    /* クリア瞬間バナー（ゲーム画面・CSSのみ） */
    .clear-banner {
      position: absolute;
      inset: 0;
      z-index: 40;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      background: radial-gradient(ellipse at center, rgba(255, 211, 42, 0.18) 0%, transparent 55%);
    }

    .clear-banner[hidden] {
      display: none !important;
    }

    .clear-banner-text {
      font-size: clamp(48px, 14vw, 72px);
      font-weight: 900;
      letter-spacing: 0.12em;
      color: #ffd32a;
      text-shadow: 0 0 24px rgba(255, 211, 42, 0.7), 0 4px 0 rgba(0, 0, 0, 0.35);
      animation: clear-pop 0.7s cubic-bezier(0.2, 1.4, 0.3, 1) both;
    }

    @keyframes clear-pop {
      0% {
        transform: scale(0.4);
        opacity: 0;
      }

      55% {
        transform: scale(1.12);
        opacity: 1;
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    /* リザルト画面 */
    #result-screen {
      position: relative;
      overflow: hidden;
      min-height: 0;
      gap: 0;
      justify-content: flex-start;
    }

    /* リザルトのロゴ：タイトルと同じ幅。上下余白だけゼロ */
    #result-screen .screen-logo-banner {
      flex: 0 0 auto;
      width: min(360px, 88%);
      margin: 0 auto;
      padding: 0;
      line-height: 0;
      text-align: center;
      z-index: 2;
      position: relative;
    }

    #result-screen .screen-logo-img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .screen-logo-banner {
      flex: 0 0 auto;
      text-align: center;
      padding: 6px 0 2px;
      z-index: 2;
      position: relative;
    }

    .screen-logo-img {
      display: inline-block;
      max-width: 90%;
      height: auto;
    }

    #result-screen.is-clear .result-box {
      background: #000;
      border-color: rgba(255, 211, 42, 0.35);
      box-shadow: 0 0 28px rgba(255, 211, 42, 0.12);
      animation: result-box-in 0.45s ease-out both;
    }

    @keyframes result-box-in {
      from {
        transform: translateY(12px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    #result-screen .result-box {
      background: #000;
      border: 1px solid rgba(0, 240, 255, 0.2);
      border-radius: 12px;
      padding: 6px 10px 8px;
      margin: 2px 10px 0;
      text-align: center;
      position: relative;
      z-index: 2;
      flex: 0 1 auto;
      min-height: 0;
    }

    .result-song-name {
      font-size: 15px;
      color: var(--accent);
      margin: 0 0 2px;
    }

    .result-clear-label {
      margin: 0 0 2px;
      font-size: 24px;
      font-weight: 900;
      letter-spacing: 0.12em;
      color: #ffd32a;
      text-shadow: 0 0 18px rgba(255, 211, 42, 0.55);
      animation: clear-pop 0.55s cubic-bezier(0.2, 1.4, 0.3, 1) both;
    }

    .result-clear-label[hidden] {
      display: none !important;
    }

    .result-gameover-label {
      margin: 0 0 4px;
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 2px;
      color: #ff6b6b;
    }

    /* 本日順位 / 得点 / 獲得★ を横並び */
    .result-summary {
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 8px;
      margin: 2px 0 2px;
    }

    .result-summary-cell {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 0;
    }

    .result-summary-cell.result-summary-score {
      flex: 1.3 1 0;
    }

    .result-summary-label {
      font-size: 14px;
      color: #aaa;
      letter-spacing: 0.04em;
    }

    .result-summary-sub {
      font-size: 13px;
      color: #888;
      min-height: 16px;
    }

    #result-tension-bonus {
      white-space: nowrap;
    }

    .result-today-rank-main {
      font-size: 28px;
      font-weight: 800;
      color: #fff;
      line-height: 1.15;
    }

    .result-today-rank-main.is-top {
      color: #ffd32a;
      text-shadow: 0 0 10px rgba(255, 211, 42, 0.45);
    }

    .result-stars-gain {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.15;
    }

    .result-stars-gain .sg-plus {
      font-size: 26px;
      font-weight: 900;
      color: #ffd32a;
      text-shadow: 0 0 10px rgba(255, 211, 42, 0.4);
    }

    .result-stars-gain .sg-own {
      font-size: 15px;
      font-weight: 700;
      color: #cfcfcf;
    }

    .result-stars-gain .sg-bonus {
      display: inline-block;
      font-size: 13px;
      font-weight: 800;
      color: #fff;
      background: linear-gradient(135deg, #ff9f43, #ff6b6b);
      padding: 1px 7px;
      border-radius: 8px;
      margin: 0 6px;
      letter-spacing: 0.5px;
      vertical-align: middle;
      animation: sg-bonus-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    }

    .result-stars-gain .sg-bonus-star {
      background: linear-gradient(135deg, #ffd32a, #f0c419);
      color: #2a2200;
    }

    @keyframes sg-bonus-pop {
      0% { transform: scale(0); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }

    /* 紙吹雪（少数・CSS transformのみ＝軽い／前面表示・操作は透過） */
    .result-clear-fx {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 10;
      overflow: hidden;
    }

    .result-clear-fx[hidden] {
      display: none !important;
    }

    .result-confetti {
      position: absolute;
      top: -12px;
      width: 8px;
      height: 12px;
      border-radius: 2px;
      opacity: 0.9;
      animation-name: confetti-fall;
      animation-timing-function: linear;
      animation-fill-mode: both;
      will-change: transform, opacity;
    }

    @keyframes confetti-fall {
      0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
      }

      100% {
        transform: translate3d(var(--dx, 0px), 110vh, 0) rotate(360deg);
        opacity: 0.15;
      }
    }

    /* リザルト下部：キャラ＋ボタンを下詰め */
    #result-screen .result-bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      flex: 0 0 auto;
      position: relative;
      z-index: 2;
      margin-top: auto;
      padding-top: 4px;
      padding-bottom: 2px;
    }

    #result-screen .result-actions {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding: 0 14px;
      margin-bottom: 0;
      box-sizing: border-box;
    }

    #result-screen .result-actions .result-actions-row {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: stretch;
      gap: 10px;
      width: 100%;
    }

    #result-screen .result-actions .btn-menu {
      width: auto;
      flex: 1 1 0;
      max-width: 200px;
      height: 52px;
      font-size: 21px;
      border-radius: 12px;
    }

    /* 「つぎの曲へ」ボタン (グリーン系) */
    .btn-next-song {
      width: 92%;
      max-width: 410px;
      height: 54px;
      font-size: 26px;
      font-weight: 900;
      color: #fff;
      background: linear-gradient(135deg, #00c853 0%, #00e676 50%, #69f0ae 100%);
      box-shadow: 0 4px 18px rgba(0, 200, 83, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 14px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s, filter 0.2s;
      letter-spacing: 0.06em;
    }

    .btn-next-song:hover {
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 6px 24px rgba(0, 200, 83, 0.55), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }

    .btn-next-song:active {
      transform: translateY(1px) scale(0.98);
      box-shadow: 0 2px 8px rgba(0, 200, 83, 0.3);
    }

    .btn-next-song[hidden] {
      display: none !important;
    }

    /* GAME OVER時：倒れキャラ（「もう一度」の直上・中央） */
    .result-gameover-char {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 0;
      line-height: 0;
    }

    .result-gameover-char[hidden] {
      display: none !important;
    }

    .result-gameover-char img {
      display: block;
      margin: 0 auto;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      object-fit: contain;
    }

    /* クリア時：元気キャラ */
    .result-clear-char {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 0;
      line-height: 0;
      animation: clear-char-bounce 0.7s cubic-bezier(0.18, 1.2, 0.32, 1) both;
    }

    .result-clear-char[hidden] {
      display: none !important;
    }

    .result-clear-char img {
      display: block;
      margin: 0 auto;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      object-fit: contain;
    }

    @keyframes clear-char-bounce {
      0% {
        transform: translateY(16px) scale(0.85);
        opacity: 0;
      }

      60% {
        transform: translateY(-6px) scale(1.05);
        opacity: 1;
      }

      100% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }

    .result-score {
      font-size: 52px;
      font-weight: 900;
      line-height: 1.02;
      background: linear-gradient(135deg, #ffd32a, #ff6b6b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      transform-origin: center center;
    }

    .result-score.is-pop {
      animation: result-score-pop 420ms cubic-bezier(0.2, 1.4, 0.3, 1) both;
    }

    @keyframes result-score-pop {
      0% { transform: scale(1); }
      45% { transform: scale(1.14); }
      100% { transform: scale(1); }
    }

    .result-detail {
      display: flex;
      justify-content: space-around;
      margin-top: 4px;
      font-size: 14px;
      font-weight: 700;
    }

    .result-detail .item {
      text-align: center;
    }

    .result-detail .item .num {
      font-size: 30px;
      font-weight: 900;
    }

    .result-sub-line {
      margin: 6px 0 0;
      font-size: 18px;
      color: #aaa;
    }

    .result-combo-num {
      font-size: 24px;
      font-weight: 900;
    }

    .result-timing-advice {
      display: block;
      margin-top: 4px;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.02em;
      color: #9aa4b2;
    }

    .result-timing-advice.is-good {
      color: #1dd1a1;
    }

    .result-timing-advice.is-warn {
      color: #ffd32a;
    }

    .result-timing-advice.is-bad {
      color: #ff8a8a;
    }

    /* ランキング登録UI */
    .ranking-register-box {
      margin-top: 4px;
      padding: 4px;
      background: #000;
      border-radius: 8px;
      border: 1px solid rgba(0, 240, 255, 0.25);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
    }

    .result-char-nudge {
      margin: 0 0 2px;
      font: 700 18px Outfit, sans-serif;
      color: #fff;
      text-align: center;
      letter-spacing: 0.06em;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
      line-height: 1.2;
    }

    .result-char-nudge[hidden] {
      display: none !important;
    }

    .ranking-register-box #ranking-name-input {
      padding: 8px;
      width: 140px;
      max-width: 45%;
      border-radius: 4px;
      border: none;
      outline: none;
      font-weight: bold;
      text-align: center;
    }

    .ranking-register-box #btn-ranking-register {
      background: var(--accent);
      color: #000;
      padding: 8px 16px;
      white-space: nowrap;
    }


    /* トースト通知 */
    .app-toast {
      position: absolute;
      left: 50%;
      bottom: 96px;
      transform: translate(-50%, 12px);
      background: rgba(0, 0, 0, 0.9);
      color: #fff;
      border: 1px solid rgba(0, 240, 255, 0.5);
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
      padding: 10px 18px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.02em;
      z-index: 50;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
      white-space: nowrap;
    }

    .app-toast[hidden] {
      display: none;
    }

    .app-toast.is-show {
      opacity: 1;
      transform: translate(-50%, 0);
    }


    /* ゲーム画面および操作ボタン上でのスワイプ・ピンチ・長押しを禁止 */
    #game-screen,
    #game-canvas,
    #dance-canvas,
    #bg-canvas,
    #canvas-wrap,
    #lanes,
    .lane-btn {
      touch-action: none;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      -webkit-user-drag: none;
      -webkit-tap-highlight-color: transparent;
    }

    #game-screen.active,
    #game-screen.active * {
      touch-action: none !important;
      -webkit-user-select: none !important;
      user-select: none !important;
      -webkit-touch-callout: none !important;
      -webkit-user-drag: none !important;
      -webkit-tap-highlight-color: transparent;
    }

    #game-screen.active img,
    #game-screen.active canvas,
    #game-screen.active button {
      -webkit-touch-callout: none !important;
      -webkit-user-drag: none !important;
    }

    /* ボタン非活性（ローディング中）表示 */
    .btn:disabled,
    .btn[disabled] {
      opacity: 0.55;
      cursor: not-allowed;
      pointer-events: none;
      filter: grayscale(0.4);
      border-color: rgba(255, 255, 255, 0.2) !important;
      box-shadow: none !important;
      animation: btn-loading-pulse 1.5s ease-in-out infinite alternate;
    }

    @keyframes btn-loading-pulse {
      0% {
        opacity: 0.45;
      }

      100% {
        opacity: 0.75;
      }
    }

    .btn-inline-spinner {
      display: inline-block;
      width: 14px;
      height: 14px;
      margin-right: 8px;
      vertical-align: middle;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    /* ランキング読み込み中スタイル */
    .ranking-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      gap: 14px;
      color: var(--accent);
      font-weight: bold;
    }

    .ranking-loading .spinner {
      width: 36px;
      height: 36px;
      border: 3px solid rgba(0, 240, 255, 0.2);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    /* 曲選択画面のクリア率・難易度スタッツ表示 */
    .song-stat-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 0;
      font-size: 11px;
      color: #cbd5e1;
      flex-wrap: nowrap;
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
    }

    .clear-rate-bar-wrap {
      width: 64px;
      height: 6px;
      background: rgba(255, 255, 255, 0.12);
      border-radius: 3px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .clear-rate-bar {
      height: 100%;
      border-radius: 3px;
      transition: width 0.3s ease;
    }

    /* アシストモード設定UI (曲選択右上 - 全体ボタン化) */
    button.assist-mode-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: rgba(15, 23, 42, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 12px;
      padding: 8px 12px;
      min-width: 130px;
      backdrop-filter: blur(8px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
      flex-shrink: 0;
      cursor: pointer;
      user-select: none;
      outline: none;
      font-family: inherit;
      transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    button.assist-mode-box:hover {
      transform: scale(1.03);
      filter: brightness(1.12);
    }

    button.assist-mode-box:active {
      transform: scale(0.97);
    }

    .assist-mode-sub {
      font-size: 14px;
      font-weight: 700;
      color: #ffd32a;
      margin-bottom: 1px;
      letter-spacing: 0.5px;
      pointer-events: none;
    }

    .assist-mode-title {
      font-size: 18px;
      font-weight: 900;
      color: #ffffff;
      margin-bottom: 3px;
      letter-spacing: 0.5px;
      pointer-events: none;
    }

    .assist-toggle-badge {
      background: #334155;
      color: #94a3b8;
      border: 2px solid #475569;
      border-radius: 20px;
      padding: 3px 18px;
      font-size: 13px;
      font-weight: 900;
      transition: all 0.2s ease;
      pointer-events: none;
    }

    .assist-mode-box.active .assist-toggle-badge {
      background: linear-gradient(135deg, #10b981, #059669);
      color: #ffffff;
      border-color: #34d399;
      box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
    }

    .assist-mode-desc {
      font-size: 9.5px;
      color: rgba(255, 255, 255, 0.75);
      margin-top: 5px;
      text-align: center;
      line-height: 1.25;
      pointer-events: none;
    }

    /* アシストモードON時のフレーム・背景発光（暗い赤系グロー） */
    button.assist-mode-box.active {
      background: linear-gradient(135deg, rgba(60, 10, 18, 0.88), rgba(35, 8, 12, 0.92));
      border-color: rgba(255, 75, 75, 0.95);
      box-shadow: 0 0 20px rgba(255, 40, 40, 0.65), inset 0 0 16px rgba(255, 50, 50, 0.4);
      animation: assist-box-pulse 2s infinite alternate ease-in-out;
    }

    @keyframes assist-box-pulse {
      0% {
        background: linear-gradient(135deg, rgba(50, 10, 15, 0.82), rgba(25, 5, 10, 0.88));
        border-color: rgba(255, 60, 60, 0.7);
        box-shadow: 0 0 12px rgba(255, 50, 50, 0.4), inset 0 0 10px rgba(255, 50, 50, 0.25);
      }

      100% {
        background: linear-gradient(135deg, rgba(85, 15, 22, 0.94), rgba(45, 10, 15, 0.96));
        border-color: rgba(255, 120, 120, 1);
        box-shadow: 0 0 26px rgba(255, 50, 50, 0.85), inset 0 0 22px rgba(255, 60, 60, 0.55);
      }
    }

    /* アセットロードエラー＆リトライUI用スタイル */
    .song-load-error-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 30px 20px;
      margin: 20px auto;
      background: rgba(26, 12, 18, 0.85);
      border: 1.5px solid rgba(255, 107, 107, 0.6);
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 0 12px rgba(255, 107, 107, 0.2);
      max-width: 420px;
      text-align: center;
      gap: 16px;
      animation: error-box-fade-in 0.3s ease-out;
    }

    .song-load-error-title {
      font-size: 18px;
      font-weight: bold;
      color: #ff6b6b;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .song-load-error-msg {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.5;
    }

    .asset-retry-btn-group {
      display: flex;
      gap: 12px;
      margin-top: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn-asset-retry {
      background: linear-gradient(135deg, #1dd1a1, #10ac84);
      color: #000;
      font-weight: bold;
      padding: 10px 20px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-size: 14px;
      box-shadow: 0 4px 12px rgba(29, 209, 161, 0.3);
      transition: all 0.2s ease;
    }

    .btn-asset-retry:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(29, 209, 161, 0.5);
    }

    .btn-asset-cancel {
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      font-weight: bold;
      padding: 10px 20px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s ease;
    }

    .btn-asset-cancel:hover {
      background: rgba(255, 255, 255, 0.25);
    }

    @keyframes error-box-fade-in {
      from {
        opacity: 0;
        transform: scale(0.95);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* チュートリアル・遊び方専用画面 */
    #tutorial-screen {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 36px 24px 16px;
      box-sizing: border-box;
      cursor: wait;
      z-index: 10;
    }

    #tutorial-screen.is-ready {
      cursor: pointer;
    }

    #tutorial-screen.active {
      display: flex !important;
    }

    #tutorial-screen.is-ready .tutorial-card {
      cursor: pointer;
    }

    #tutorial-screen:not(.is-ready) .tutorial-card {
      cursor: wait;
    }

    .tutorial-card {
      position: relative;
      width: 400px;
      height: min(92%, 680px);
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: visible;
      background: linear-gradient(180deg, #16162e 0%, #0a0a18 100%);
      border: 4px solid rgba(0, 240, 255, 0.85);
      border-radius: 18px;
      box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.55),
        0 18px 40px rgba(0, 0, 0, 0.7),
        0 0 28px rgba(0, 240, 255, 0.28);
      animation: tutorial-screen-pop 0.38s cubic-bezier(0.18, 1.35, 0.32, 1) both;
      cursor: pointer;
    }

    .tutorial-top {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      min-height: 0;
      padding: 14px 14px 4px;
      text-align: center;
    }

    .tutorial-caption {
      margin: 0;
      max-width: 100%;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.25;
      color: #e8e8f8;
      text-align: center;
    }

    .tutorial-bottom {
      flex: 0 0 360px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      overflow: hidden;
      border-radius: 0 0 14px 14px;
    }

    .tutorial-card img {
      display: block;
      width: 400px;
      height: 360px;
      max-width: none;
      flex-shrink: 0;
      background: #000;
    }

    .tutorial-kicker {
      position: absolute;
      top: -24px;
      left: 50%;
      transform: translateX(-50%);
      margin: 0;
      padding: 4px 20px;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 0.22em;
      color: #0a0a12;
      background: var(--accent, #00f0ff);
      border: 3px solid #fff;
      border-radius: 999px;
      white-space: nowrap;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
      z-index: 5;
    }

    .tutorial-close {
      position: absolute;
      top: -18px;
      right: -18px;
      z-index: 6;
      width: 64px;
      height: 64px;
      border: 4px solid #fff;
      border-radius: 50%;
      background: #ff3b4a;
      color: #fff;
      font-size: 44px;
      font-weight: 900;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
      text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
      transition: transform 0.15s, filter 0.15s;
    }

    .tutorial-close[hidden] {
      display: none !important;
    }

    .tutorial-close.is-pop {
      animation: tutorial-close-pop 0.35s cubic-bezier(0.18, 1.35, 0.32, 1) both;
    }

    .tutorial-load-badge {
      position: absolute;
      top: -18px;
      right: -18px;
      z-index: 6;
      width: 64px;
      height: 64px;
      border: 4px solid rgba(255, 255, 255, 0.85);
      border-radius: 50%;
      background: #1a1a32;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    }

    .tutorial-load-badge[hidden] {
      display: none !important;
    }

    .tutorial-load-badge .btn-inline-spinner {
      width: 26px;
      height: 26px;
      border-width: 3px;
      border-color: rgba(0, 240, 255, 0.25);
      border-top-color: var(--accent, #00f0ff);
    }

    .tutorial-load-hint {
      margin: 8px 12px 0;
      font-size: 14px;
      font-weight: 800;
      color: var(--accent, #00f0ff);
      text-align: center;
    }

    .tutorial-load-hint[hidden] {
      display: none !important;
    }

    .tutorial-retry {
      margin: 8px auto 0;
      padding: 8px 18px;
      border: none;
      border-radius: 10px;
      background: #ffd32a;
      color: #000;
      font-size: 15px;
      font-weight: 900;
      cursor: pointer;
    }

    .tutorial-retry[hidden] {
      display: none !important;
    }

    @keyframes tutorial-close-pop {
      0% {
        transform: scale(0.2);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .tutorial-close:hover,
    .tutorial-close:focus-visible {
      transform: scale(1.08);
      filter: brightness(1.08);
      outline: none;
    }

    .tutorial-close:active {
      transform: scale(0.94);
    }

    @keyframes tutorial-screen-pop {
      0% {
        opacity: 0;
        transform: scale(0.62) translateY(28px);
      }

      72% {
        opacity: 1;
        transform: scale(1.06) translateY(-6px);
      }

      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }