: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;
    }

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

    html {
      overscroll-behavior: none;
      overscroll-behavior-x: none;
      touch-action: manipulation;
    }

    #app {
      width: 480px;
      height: 720px;
      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;
    }



    .screen {
      display: none;
      flex-direction: column;
      width: 100%;
      height: 100%;
    }

    .screen.active {
      display: flex;
    }

    /* タイトル画面 */
    #title-screen {
      animation: bgPulse 10s ease-in-out infinite alternate;
    }

    @keyframes bgPulse {
      0% {
        background: radial-gradient(circle at center, rgba(13, 13, 46, 0.8) 0%, rgba(0, 0, 0, 0.95) 100%);
      }

      100% {
        background: radial-gradient(circle at center, rgba(30, 10, 60, 0.85) 0%, rgba(0, 0, 0, 0.95) 100%);
      }
    }

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

    .game-subtitle {
      text-align: center;
      font-size: 15px;
      color: rgba(255, 255, 255, 0.55);
      margin-bottom: 8px;
      letter-spacing: 4px;
      font-weight: bold;
      text-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
    }

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

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

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

    .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-back-to-title,
    #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-back-to-title:hover,
    #btn-ranking-back:hover {
      box-shadow: 0 12px 25px rgba(113, 128, 147, 0.6);
    }

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

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

    .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 0 6px;
      color: var(--accent);
      font-size: 20px;
      letter-spacing: 1px;
      line-height: 1.2;
    }

    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: 8px 14px 8px 16px;
      min-height: 0;
    }

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

    .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: #ccc;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
      text-align: left;
    }

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

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

    .scrollable-list {
      flex: 1;
      overflow-y: auto;
      padding: 5px 20px 20px 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: rgba(0, 240, 255, 0.05);
      border: 1px solid rgba(0, 240, 255, 0.2);
      border-radius: 12px;
      padding: 10px 12px;
      cursor: pointer;
      transition: all 0.15s;
      text-align: left;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;
      position: relative;
      flex-shrink: 0;
      min-height: 90px;
      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: 4px;
    }

    .card:hover {
      background: rgba(0, 240, 255, 0.15);
      border-color: rgba(0, 240, 255, 0.6);
      box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
      transform: translateY(-2px);
    }

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

    /* 難易度に応じたさりげない色味（★1〜6） */
    .card.diff-1 {
      background: rgba(84, 160, 255, 0.07);
      border-color: rgba(84, 160, 255, 0.22);
    }

    .card.diff-1:hover {
      background: rgba(84, 160, 255, 0.14);
      border-color: rgba(84, 160, 255, 0.45);
      box-shadow: 0 0 16px rgba(84, 160, 255, 0.18);
    }

    .card.diff-2 {
      background: rgba(29, 209, 161, 0.07);
      border-color: rgba(29, 209, 161, 0.22);
    }

    .card.diff-2:hover {
      background: rgba(29, 209, 161, 0.14);
      border-color: rgba(29, 209, 161, 0.45);
      box-shadow: 0 0 16px rgba(29, 209, 161, 0.18);
    }

    .card.diff-3 {
      background: rgba(255, 211, 42, 0.07);
      border-color: rgba(255, 211, 42, 0.22);
    }

    .card.diff-3:hover {
      background: rgba(255, 211, 42, 0.14);
      border-color: rgba(255, 211, 42, 0.45);
      box-shadow: 0 0 16px rgba(255, 211, 42, 0.16);
    }

    .card.diff-4 {
      background: rgba(255, 159, 67, 0.08);
      border-color: rgba(255, 159, 67, 0.24);
    }

    .card.diff-4:hover {
      background: rgba(255, 159, 67, 0.15);
      border-color: rgba(255, 159, 67, 0.48);
      box-shadow: 0 0 16px rgba(255, 159, 67, 0.18);
    }

    .card.diff-5 {
      background: rgba(255, 107, 107, 0.08);
      border-color: rgba(255, 107, 107, 0.24);
    }

    .card.diff-5:hover {
      background: rgba(255, 107, 107, 0.15);
      border-color: rgba(255, 107, 107, 0.48);
      box-shadow: 0 0 16px rgba(255, 107, 107, 0.18);
    }

    .card.diff-6 {
      background: rgba(0, 0, 0, 0.28);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .card.diff-6:hover {
      background: rgba(0, 0, 0, 0.4);
      border-color: rgba(255, 255, 255, 0.2);
      box-shadow: 0 0 14px rgba(0, 0, 0, 0.45);
    }

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

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

    /* 暗転はカード本体だけ。文言オーバーレイは明るく目立たせる */
    .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-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #aaa;
    }

    .card-meta-plays {
      flex: 1 1 auto;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .card-best {
      flex: 0 0 auto;
      color: #ff9f43;
      font-weight: 800;
      font-size: 12px;
      white-space: nowrap;
    }

    .card-best-empty {
      color: #666;
      font-weight: 600;
    }

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

    .card-title {
      font-size: 21px;
      font-weight: 900;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .song-badge {
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(-50%, -50%);
      z-index: 1;
      display: inline-block;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.06em;
      line-height: 1;
      padding: 3px 5px;
      border-radius: 3px;
      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: #ff9f43;
      color: #2a1400;
    }

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

    .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: 2;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 8px 8px 0;
      pointer-events: none;
    }

    #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 {
      color: var(--c1);
      font-weight: 900;
    }

    #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・CSS height のみ／キャンバス非使用） */
    #perfect-meter,
    #perfect-meter-r {
      position: absolute;
      bottom: 0;
      width: 6px;
      height: 0%;
      z-index: 4;
      pointer-events: none;
      background: rgba(0, 240, 255, 0.5);
      opacity: 0.65;
      transition: height 0.08s linear, opacity 0.06s linear, background-color 0.06s linear;
      will-change: height, opacity;
      box-shadow: none;
    }

    #perfect-meter {
      left: 0;
    }

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

    /* 拍に合わせたメーター点滅 */
    #perfect-meter.meter-beat-flash,
    #perfect-meter-r.meter-beat-flash {
      opacity: 1;
      background: rgba(180, 250, 255, 0.95);
    }

    /* テンション危険（10%未満）：赤点滅 */
    #perfect-meter.meter-danger,
    #perfect-meter-r.meter-danger {
      background: rgba(255, 68, 68, 0.85);
      opacity: 1;
      animation: meter-danger-blink 0.55s ease-in-out infinite;
    }

    @keyframes meter-danger-blink {
      0%,
      100% {
        opacity: 0.35;
        background: rgba(255, 68, 68, 0.55);
      }
      50% {
        opacity: 1;
        background: rgba(255, 90, 90, 1);
      }
    }

    /* 背景は静的レイヤー、ノーツは透明レイヤー（毎フレーム全面 blit を避ける） */
    #bg-canvas,
    #game-canvas {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

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

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

    #lanes {
      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;
    }

    @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;
      /* 旧: padding 14px + 文字18px ≒ 50px → 約+30% の固定高 */
      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: hidden;
    }

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

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

    .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;
      width: 80%;
      font: 700 26px Outfit, sans-serif;
      color: #fff;
      line-height: 1.35;
    }

    #judge-overlay {
      /* top は JS が判定バー位置に合わせて設定（バーの直上） */
      bottom: auto;
      top: 72%;
      transform: translate(-50%, -100%);
      font: 700 30px Outfit, sans-serif;
      z-index: 6;
      max-width: 90%;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.55);
    }

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

    /* ビートガイド用（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-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 {
      color: var(--accent);
      font-weight: 700;
    }

    /* クリア瞬間バナー（ゲーム画面・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;
    }

    #result-screen.is-clear .result-box {
      background: rgba(255, 211, 42, 0.08);
      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: rgba(0, 240, 255, 0.05);
      border: 1px solid rgba(0, 240, 255, 0.2);
      border-radius: 12px;
      padding: 16px;
      margin: 8px 12px 0;
      text-align: center;
      position: relative;
      z-index: 2;
    }

    .result-clear-label {
      margin: 0 0 6px;
      font-size: 34px;
      font-weight: 900;
      letter-spacing: 0.14em;
      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-stars-gain {
      margin: 0 0 8px;
      font-size: 15px;
      font-weight: 800;
      color: #ffd32a;
      letter-spacing: 0.04em;
    }

    .result-stars-gain[hidden] {
      display: none !important;
    }

    /* 紙吹雪（少数・CSS transformのみ＝軽い） */
    .result-clear-fx {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      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 {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      flex-shrink: 0;
      position: relative;
      z-index: 2;
    }

    /* 「もう一度」「曲選択へ」を1行に並べて縦スペースを節約 */
    #result-screen .result-actions {
      flex-direction: row;
      justify-content: center;
      align-items: stretch;
      gap: 10px;
      padding: 0 14px;
      margin-bottom: 12px;
      box-sizing: border-box;
    }

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

    /* GAME OVER時：倒れキャラ（「もう一度」の直上・中央） */
    .result-gameover-char {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 0 0 10px;
      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 0 10px;
      line-height: 0;
      animation: clear-char-bounce 0.7s ease-out 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-screen.is-clear .result-score {
      animation: score-shine 0.6s ease-out both;
    }

    @keyframes score-shine {
      0% { transform: scale(0.7); filter: brightness(1.4); }
      100% { transform: scale(1); filter: brightness(1); }
    }

    .result-score {
      font-size: 48px;
      font-weight: 900;
      background: linear-gradient(135deg, #ffd32a, #ff6b6b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

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

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

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


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

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