/* =============================================
   iPod Classic - スタイルシート
   ライトモード / ダークモード対応
   ============================================= */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ================================================
   CSS Custom Properties (テーマカラー)
   ================================================ */

:root {
  /* ── ライトモード (シルバー iPod) ── */
  --ipod-body-top: #e4e4e4;
  --ipod-body-bottom: #c8c8c8;
  --ipod-body-edge: #b0b0b0;
  --ipod-body-highlight: rgba(255, 255, 255, 0.55);
  --ipod-body-shadow: rgba(0, 0, 0, 0.08);
  --ipod-border-outer: rgba(0, 0, 0, 0.18);

  --bezel-bg: #3a3a3c;
  --bezel-inner: #2c2c2e;

  --screen-bg: #ffffff;
  --screen-text: #1a1a1a;
  --screen-header-top: #feffff;
  --screen-header-bottom: #b1b6b9;
  --screen-header-border: #000000;   /* 上部バーの境界線を黒に (ユーザー指定) */
  --screen-separator: rgba(0, 0, 0, 0.08);

  --highlight-top: hsl(202, 100%, 72%);   /* #3cb8ff と同色相・同彩度のまま明度だけ上げて薄く */
  --highlight-bottom: hsl(207, 55%, 37%);   /* #347ab5 と同色相・同彩度のまま明度だけ下げて濃く */
  --highlight-text: #ffffff;

  --wheel-bg: #f2f2f2;
  --wheel-border: rgba(0, 0, 0, 0.08);
  --wheel-shadow-outer: rgba(0, 0, 0, 0.12);
  --wheel-shadow-inner: rgba(0, 0, 0, 0.06);
  --center-top: #dcdcdc;
  --center-bottom: #b8b8b8;
  --center-highlight: rgba(255, 255, 255, 0.45);
  --center-border: rgba(0, 0, 0, 0.12);
  --label-color: #5a5a5a;

  --scrollbar-track: rgba(0, 0, 0, 0.08);
  --scrollbar-thumb: rgba(0, 0, 0, 0.3);

  --np-progress-bg: rgba(0, 0, 0, 0.15);
  --np-progress-fill: #1a6fce;

  --page-bg-top: #2d2d3a;
  --page-bg-bottom: #0f0f15;
}

[data-theme="dark"] {
  /* ── ダークモード (ブラック iPod) ── */
  --ipod-body-top: #4e4e50;
  --ipod-body-bottom: #333335;
  --ipod-body-edge: #252527;
  --ipod-body-highlight: rgba(255, 255, 255, 0.12);
  --ipod-body-shadow: rgba(0, 0, 0, 0.2);
  --ipod-border-outer: rgba(0, 0, 0, 0.4);

  --bezel-bg: #1a1a1c;
  --bezel-inner: #111113;

  --screen-bg: #ffffff;
  --screen-text: #1a1a1a;
  --screen-header-top: #feffff;
  --screen-header-bottom: #b1b6b9;
  --screen-header-border: #000000;   /* 上部バーの境界線を黒に (ユーザー指定) */
  --screen-separator: rgba(0, 0, 0, 0.08);

  --highlight-top: hsl(202, 100%, 72%);   /* #3cb8ff と同色相・同彩度のまま明度だけ上げて薄く */
  --highlight-bottom: hsl(207, 55%, 37%);   /* #347ab5 と同色相・同彩度のまま明度だけ下げて濃く */
  --highlight-text: #ffffff;

  --wheel-bg: #2a2a2c;
  --wheel-border: rgba(0, 0, 0, 0.3);
  --wheel-shadow-outer: rgba(0, 0, 0, 0.35);
  --wheel-shadow-inner: rgba(0, 0, 0, 0.2);
  --center-top: #555558;
  --center-bottom: #3e3e40;
  --center-highlight: rgba(255, 255, 255, 0.08);
  --center-border: rgba(0, 0, 0, 0.3);
  --label-color: #c0c0c0;

  --scrollbar-track: rgba(0, 0, 0, 0.1);
  --scrollbar-thumb: rgba(0, 0, 0, 0.35);

  --np-progress-bg: rgba(0, 0, 0, 0.18);
  --np-progress-fill: #1a6fce;

  --page-bg-top: #1a1a24;
  --page-bg-bottom: #08080c;
}

/* ================================================
   ベース・リセット
   ================================================ */

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

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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 40%, var(--page-bg-top), var(--page-bg-bottom));
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
}

/* ================================================
   iPod 本体
   ================================================ */

.ipod-body {
  position: relative;
  /* 画面幅の縮小(240→230)に合わせて左右余白20pxずつを維持した値 (W/H≈0.603) */
  width: 270px;
  height: 448px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--ipod-body-top) 0%, var(--ipod-body-bottom) 100%);
  box-shadow:
    0 0 0 1px var(--ipod-border-outer),
    0 2px 4px rgba(0, 0, 0, 0.15),
    0 12px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 var(--ipod-body-highlight);
  transition: background 0.5s ease, box-shadow 0.5s ease, transform 0.3s ease;
  cursor: default;
  /* JS自動スケーリング用 */
  transform: scale(var(--ipod-scale, 1));
  transform-origin: center center;
}

/* アルマイト加工風の粒状テクスチャ (SVGフィルター参照) */
.ipod-body::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: white;
  filter: url(#grain-texture);
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
  /* 角丸の外側にはみ出さないようクリップ */
  clip-path: inset(0 round 24px);
}

/* エッジの光沢 */
.ipod-body::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 40%,
      transparent 60%,
      rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
  z-index: 2;
}

/* ================================================
   画面ベゼル
   ================================================ */

.screen-bezel {
  position: absolute;
  /* sozai/ipod-6th-classic-gen.png 実測準拠: 外形 85.0%×38.6%・上端 4.3%
     ※ ユーザー希望でベゼル(枠)をやや太めに調整 (padding 3px→6px) */
  top: 16px;          /* 上端は固定 */
  left: 50%;
  transform: translateX(-50%);
  width: 230px;       /* 画面の横幅を少し縮小 (240→230)。枠の太さ(padding)は不変 */
  height: 185px;      /* 下端だけ上げて高さを縮小 (195→185px・上端固定) */
  background: var(--bezel-bg);
  border-radius: 6px;
  padding: 5px;       /* ベゼル(枠)を1px太く (4→5px) */
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.6),
    0 1px 0 var(--ipod-body-highlight);
  z-index: 3;
  transition: background 0.5s ease;
}

/* ================================================
   画面 (LCD)
   ================================================ */

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--screen-bg);
  border-radius: 0;   /* 内側はカクカク (外枠 .screen-bezel の角丸はそのまま) */
  overflow: hidden;
  transition: background 0.5s ease;
}

/* LCDグロス反射 */
.screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 35%,
      transparent 55%);
  pointer-events: none;
  z-index: 50;
  border-radius: inherit;
}

/* ── ヘッダーバー ── */

.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  height: 14px;
  /* padding-top は付けない: 見えるグラデ帯(=border-bottomを除いた部分)の中央に
     中身を乗せるため。padding-top を入れると中身が約0.5px下にずれる。
     左は4px(=下のメニュー項目の左端と同じ)、右は2px(バッテリーを右端へ)。 */
  padding: 0 2px 0 4px;
  background: linear-gradient(180deg, var(--screen-header-top), var(--screen-header-bottom));
  border-bottom: 1px solid var(--screen-header-border);
  position: relative;
  z-index: 10;
  transition: background 0.5s ease;
}

/* ビュー全体を「ヘッダー + 本体」の縦並びにする (全幅メニュー/再生中など) */
.view-col {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.view-content {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

/* メニューリストとスクロールバーの基準枠 (ヘッダーの下) */
.list-area {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.header-title {
  font-size: 9px;   /* ヘッダーの "iPod"/各メニュー名 (小さめ) */
  line-height: 1;   /* 行ボックスを詰めてバー内の上下中央に正確に乗せる */
  font-weight: 600;
  color: var(--screen-text);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
  /* 行ボックスはバー中央だが、フォントの実インクは行ボックス中心より約0.5px上に
     描画される(ディセンダ無し/Yu Gothic系の上寄り描画)。0.5px下げて見た目を中央に。
     左右位置は変えない(縦方向のみの微調整)。 */
  position: relative;
  top: 0.5px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;   /* 再生/一時停止アイコンとバッテリーの間隔を広げる (was 4px) */
}

.play-indicator {
  font-size: 7px;
  display: none;
  letter-spacing: -1px;
  /* 色を青いグラデーションに (実機準拠のアクア青)。文字を背景グラデで塗る。 */
  background: linear-gradient(180deg, #7fd4f4 0%, #2b8fd8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* バッテリーアイコン (SVG描画 = 全デバイスで同じ見た目・光沢のある実機風) */
.battery-icon {
  display: inline-flex;
  align-items: center;
  /* 本体/バーはグラデで塗るので不透明のまま (currentColor 依存なし)。
     padding-top を外したので、flex の align-items:center だけでバー中央に乗る。 */
}

.battery-icon svg {
  display: block;
  /* viewBox を 30→33 に広げた分だけ幅も比例拡大(0.6px/unit を維持)。
     高さ・スケールは不変(約9px)、右端は据え置きで左端だけ伸びる。 */
  width: 19.8px;
  height: auto;
}

.battery-icon .batt-fill {
  transition: width 0.5s ease, fill 0.3s ease;
}

/* ── 画面ボディ ── */

.screen-body {
  position: relative;
  /* ヘッダーは各ビュー内に描画するため画面ボディは全高 */
  height: 100%;
  overflow: hidden;
}

/* ビューコンテナ */
.screen-view {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
}

.screen-view.active,
#current-view {
  display: block;
}

#current-view {
  position: absolute;
  inset: 0;
}

/* スライドアニメーション */
@keyframes slideOutLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

.slide-out-left {
  animation: slideOutLeft 0.2s ease-in-out forwards;
}

.slide-out-right {
  animation: slideOutRight 0.2s ease-in-out forwards;
}

.slide-in-right {
  animation: slideInRight 0.2s ease-in-out forwards;
}

.slide-in-left {
  animation: slideInLeft 0.2s ease-in-out forwards;
}

/* ── 観音開き(ぱかーん)遷移: ミュージックメニュー → Cover Flow ──
   中央の仕切り線を基点に、左ペインは左へ・右ペインは右へ開く。
   ease-in で「スッと割れて一気に開く」スナップ感を出す。 */
@keyframes door-open-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes door-open-right {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

/* z-index は付けない: ここで preview に z-index を与えると pane(z-index:1)より
   手前になり、pane の仕切り影がアニメ中だけ隠れてしまう。前後のレイヤー
   (Cover Flow)との重なりは #current-view / #transition-view 側で担保済み。 */
.door-open-left {
  animation: door-open-left 0.2s ease-in forwards;
}

.door-open-right {
  animation: door-open-right 0.2s ease-in forwards;
}

/* ── 逆再生(扉が閉じる)遷移: Cover Flow → ミュージックメニュー ──
   画面外(左/右)から左右ペインが中央線へ閉じてくる。観音開きの逆。
   ease-out で「スッと寄ってピタッと閉じる」収まり感を出す。 */
@keyframes door-close-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes door-close-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.door-close-left {
  animation: door-close-left 0.2s ease-out forwards;
}

.door-close-right {
  animation: door-close-right 0.2s ease-out forwards;
}

/* ── Cover Flow ヘッダーバーの登場/退場 ──
   ミュージック→Cover Flow: バーが上からスライドして降りてくる。
   Cover Flow→ミュージック: バーはその場で一瞬で消す(JSで visibility:hidden)。 */
@keyframes cf-header-drop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

.screen-header.cf-header-hidden {
  /* 開扉アニメ中はバーを画面上に隠しておく(まだ降りてこない) */
  transform: translateY(-100%);
}

.screen-header.cf-header-drop {
  animation: cf-header-drop 0.3s ease-out backwards;
}

/* ── スクロールバー ── */

.scrollbar {
  position: absolute;
  right: 1px;
  top: 2px;
  bottom: 2px;
  width: 2.5px;              /* 細め (ほんの少し細く) */
  background: transparent;   /* 透明なトラックは描かず、つまみだけ表示 */
  z-index: 20;
  /* 操作中だけ表示 (.show)。消えるときはじんわり長くフェード(0.75s) */
  opacity: 0;
  transition: opacity 0.75s ease;
  /* メニュービュー内に必要なときだけ描画される (メニューと一緒にスライドする) */
}

.scrollbar.show {
  opacity: 1;
  transition: opacity 0.1s ease;   /* 表示は素早くはっきり */
}

/* 2分割表示時は左ペイン(.menu-pane)の右端に置く */
.scrollbar-split {
  right: 1px;
}

.scrollbar-thumb {
  position: absolute;
  width: 100%;
  background: var(--scrollbar-thumb);
  border-radius: 3px;
  min-height: 10px;
  transition: top 0.12s ease, height 0.12s ease;
}

/* ================================================
   メニューリスト
   ================================================ */

.menu-list {
  height: 100%;
  overflow: hidden;
}

/* 全幅メニュー: リスト領域はヘッダー下の残り全部を埋める */
.view-col > .list-area > .menu-list {
  height: 100%;
}

.menu-item {
  display: flex;
  align-items: center;   /* ラベルを縦方向(上下)の中央に置く */
  justify-content: space-between;
  /* 全メニュー共通の行の高さ。トップの8項目が余白を残して収まる。
     box-sizing:border-box なので 1px の境界線込みで 18px。 */
  height: 18px;
  /* 文字を行の上下中央に乗せる。box-sizing:border-box なので height18px は
     padding(上下) + border-bottom1px を含む。上下paddingを 0 にして
     コンテンツ高=17px を align-items:center で中央化し、行全体の中心に揃える。
     左パディングは小さめ(4px)にして項目の文字を左へ寄せる。 */
  padding: 0 8px 0 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--screen-text);
  border-bottom: 1px solid var(--screen-separator);
  white-space: nowrap;
  overflow: hidden;
  cursor: default;   /* カーソルが変わるのはクリックホイール上だけにする */
  transition: none;
}

/* 選択ハイライトに微妙な光沢を加える (本家準拠) */
.menu-item.selected {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.menu-item.selected {
  background: linear-gradient(180deg, var(--highlight-top), var(--highlight-bottom));
  color: var(--highlight-text);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.menu-item-label {
  flex: 1;
  min-width: 0;
  /* 非選択: 省略記号(…)を出さず、行(.menu-item)の端まで全文を見せる。
     枠を超える分だけ .menu-item の overflow:hidden で切れる。 */
  overflow: visible;
  /* 行ボックス高=フォント実寸にして、align-items:center で行の上下中央に正確に乗せる。
     日本語フォント(Yu Gothic UI系)はグリフが行ボックス内で上寄りに描画されるため、
     インクの中心が行の中央に来るよう0.5px下げて微調整する。 */
  line-height: 1;
  position: relative;
  top: 0.5px;
}

/* ラベル内テキスト。選択時のマーキーで左へ流す対象。 */
.menu-item-label-in {
  display: inline-block;
  white-space: nowrap;
}

/* 連続マーキー時の 2コピー構成 (テキスト + 全角1文字分の隙間 + テキスト) */
.menu-item-label-in .mq-seg { display: inline-block; }
.menu-item-label-in .mq-gap { display: inline-block; width: 1em; } /* = 全角スペース1文字分(フォント非依存・トリム不可) */

/* 選択時はラベルをビューポート化(クリップ)し、はみ出す長い項目だけ
   戻らず右→左に流し続ける(連続ループ)。矢印は flex 兄弟なので常に右端に残る。 */
.menu-item.selected .menu-item-label {
  overflow: hidden;
}
.menu-item.selected .menu-item-label.is-marquee .menu-item-label-in {
  animation: menu-marquee var(--marquee-dur, 4s) linear infinite;
}
@keyframes menu-marquee {
  0%, 8% { transform: translateX(0); }                       /* 先頭で少し止める(頭が読める) */
  100%   { transform: translateX(var(--marquee-shift, 0)); } /* 1ユニット分だけ左へ。戻らない */
}

/* インライン設定値 (クリック音の オン/オフ)。次画面に行く矢印の代わりに、
   現在値を右側へ青文字で表示する (本物のiPodのトグル設定と同じ見せ方)。 */
.menu-item-value {
  margin-left: 4px;
  flex-shrink: 0;
  color: var(--np-progress-fill);   /* iPod設定値の青 (#1a6fce) */
  font-size: 8px;                    /* メニュー項目(12px)より小さく */
  line-height: 1;
  position: relative;
  top: 1px;                          /* ほんの少しだけ下へ */
  right: -3px;                       /* 右端へ少し寄せる */
}

/* ハイライト行では青地に青文字で潰れないよう、白文字にして可読性を確保 */
.menu-item.selected .menu-item-value {
  color: var(--highlight-text);
}

/* 矢印は選択中の項目だけに表示する。SVG三角形を flex で確実に上下中央へ。 */
.menu-item-arrow {
  display: none;
  align-items: center;
  margin-left: 4px;
  flex-shrink: 0;
}

.menu-item.selected .menu-item-arrow {
  display: inline-flex;
}

.menu-item-arrow svg {
  display: block;
  width: 5px;
  height: 8px;
  fill: currentColor;
}

/* ================================================
   スプリットメニュー (左=リスト / 右=プレビュー)
   ================================================ */
.menu-split {
  display: flex;
  height: 100%;
}

.menu-pane {
  flex: 0 0 50%;   /* 画面のちょうど中央で分割 */
  height: 100%;
  /* ヘッダー(上のバー=左半分) + リスト領域 の縦並び */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 1;
  /* 左半分から右側へ落ちる影を濃いめに */
  border-right: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 5px 0 12px rgba(0, 0, 0, 0.55);
  background: var(--screen-bg);
}

.menu-preview {
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

/* 分割メニュー同士の遷移時、左ペイン内でリストをスライドさせるためのレイヤー */
.menu-list.pane-layer {
  position: absolute;
  inset: 0;
  /* トップ⇔サブメニューの切り替わりをゆっくりに (slide-* の 0.2s を上書き)。
     JSフォールバック(400ms)より十分短く保つ。 */
  animation-duration: 0.36s;
}

/* アルバムアートのモンタージュ (全面・ゆっくりズーム＋クロスフェード) */
.preview-music {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #141414;
}

/* 音楽が無いときの設定/エクストラ等の空プレビュー (ジャケットなし) */
.preview-empty {
  height: 100%;
  background: #ffffff;
}

.preview-art {
  position: absolute;
  /* 縦は上下フィット(切らない)・横だけ広げてゆっくり左右パン(拡大縮小はしない) */
  top: 0;
  bottom: 0;
  left: -20%;
  right: -20%;
  opacity: 0;
  transition: opacity 1.6s ease;
  animation: preview-pan 32s ease-in-out infinite alternate;
}

.preview-art.active {
  opacity: 1;
}

@keyframes preview-pan {
  from { transform: translateX(-8%); }
  to   { transform: translateX(8%); }
}

/* 「○○はありません」/ 再生していません などのプレビュー */
.preview-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
}

.preview-gray {
  background: linear-gradient(180deg, #b1b5c0 0%, #686e7a 100%);
  color: #ffffff;
}

.preview-panel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.preview-panel-text {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

/* ── 「ミュージックがありません」プレビュー (sozai/5.JPG 準拠) ──
   白い音符 + 文字が常に上スクロールで「ミュージックが」→「ありません」→… */
.preview-nomusic {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* 5.JPG: 淡いアクア → 下に行くほど濃いティール/ブルー (全体をもう少し濃いめに) */
  background: linear-gradient(180deg, #a6d2ce 0%, #77a8af 32%, #528799 62%, #386175 100%);
}

.nm-note {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.94);    /* 白い音符 */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

.nm-note svg {
  width: 56px;
  height: auto;          /* viewBox 54x60 の比率を保つ(歪ませない) */
}

/* 1行だけ見える窓。トラックを上へずらして文字を切り替える */
.nm-text {
  height: 19px;
  overflow: hidden;
}

.nm-text-track {
  display: flex;
  flex-direction: column;
  /* 各文字を短めに表示・スクロールは少し速め・常に上方向ループ (6秒/周) */
  animation: nm-scroll 6s ease-in-out infinite;
}

.nm-text-track.nm-static {
  animation: none;           /* 英語など1行で収まる場合はスクロールしない */
}

.nm-text-line {
  height: 19px;
  line-height: 19px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  text-align: center;
  white-space: nowrap;
  padding: 0 6px;
}

/* 3行 [A,B,A] を上へ流す。各文字を約2.0秒ホールド、スクロールは約1.0秒。
   最後(=A,-38px)で先頭(=A,0)へ瞬時に戻すので常に上方向に流れて見える。 */
@keyframes nm-scroll {
  0%, 33%   { transform: translateY(0); }       /* 「ミュージックが」を表示(短め) */
  50%, 83%  { transform: translateY(-19px); }   /* 上へスクロールして「ありません」 */
  100%      { transform: translateY(-38px); }    /* さらに上へ(=「ミュージックが」)→先頭へ継ぎ目なく戻る */
}

/* 再生中プレビュー (現在のアルバムアートを傾けて反射付きで表示) */
.preview-np {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #c9cdd6 0%, #6f7480 100%);
  perspective: 500px;
}

.preview-np-art {
  width: 82px;
  height: 82px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid #f3f3f3;
  box-shadow: -3px 3px 9px rgba(0, 0, 0, 0.4);
  transform: rotateY(22deg);
  -webkit-box-reflect: below 1px linear-gradient(transparent 58%, rgba(255, 255, 255, 0.22));
}

/* ================================================
   Now Playing (1.png 準拠 - 横並びレイアウト)
   ================================================ */

.now-playing {
  height: 100%;
  padding: 2px 6px 4px;
  display: flex;
  flex-direction: column;
}

/* シャッフル/リピート アイコン (右上) */
.np-icons-row {
  display: flex;
  justify-content: flex-end;
  gap: 3px;
  height: 12px;
  margin-bottom: 1px;
}

.np-shuffle,
.np-repeat {
  display: inline-flex;
  align-items: center;
  color: var(--screen-text);
  opacity: 0.2;
}

.np-shuffle svg,
.np-repeat svg {
  display: block;
  width: 11px;
  height: 11px;
}

.np-shuffle.active,
.np-repeat.active {
  opacity: 0.65;
}

/* メインコンテンツ (左: アート / 右: 情報) */
.np-content {
  display: flex;
  gap: 6px;
  flex: 1;
  min-height: 0;
  align-items: center;
}

.np-art-container {
  perspective: 600px;
  flex-shrink: 0;
  margin-left: 4px;
}

.np-album-art {
  width: 84px;
  height: 84px;
  border-radius: 1px;
  overflow: hidden;
  border: 1px solid #f3f3f3;
  /* 本家準拠: 強めの3D回転 + 下方向の反射 */
  transform: rotateY(33deg);
  box-shadow: -4px 3px 9px rgba(0, 0, 0, 0.32);
  -webkit-box-reflect: below 0px linear-gradient(transparent 62%, rgba(255, 255, 255, 0.22));
}

/* SVGジャケットをコンテナいっぱいに表示 */
.np-album-art svg,
.cf-album svg,
.preview-art svg,
.preview-np-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.np-art-icon {
  font-size: 24px;
  opacity: 0.4;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 曲情報 (右側) */
.np-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
}

.np-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--screen-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.np-artist {
  font-size: 11px;
  font-weight: 400;
  color: rgb(99, 101, 103);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.np-album-label {
  font-size: 11px;
  color: rgb(99, 101, 103);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.np-track-num {
  font-size: 10px;
  color: rgb(120, 122, 124);
  line-height: 1.5;
}

/* プログレスバー */
.np-progress-container {
  width: 100%;
  margin-top: auto;
  padding-top: 2px;
}

.np-progress-bar {
  position: relative;
  height: 8px;
  background: linear-gradient(180deg, #c6c6c6 0%, #ededed 55%, #fbfbfb 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.np-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  /* 光沢のある青いゲージ (本家準拠) */
  background: linear-gradient(180deg, #b6e2ff 0%, #5aa9ed 45%, #2f81d6 55%, #2a78cc 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55);
  transition: width 0.3s linear;
}

.np-progress-diamond {
  display: none;
}

.np-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 2px;
}

.np-time {
  font-size: 10px;
  color: var(--screen-text);
  opacity: 0.6;
  min-width: 30px;
}

.np-time-left {
  text-align: left;
}

.np-time-right {
  text-align: right;
}

/* 音量バー (Now Playing) — ホイール操作中だけ進捗バーと入れ替えで表示 */
.np-volume-container {
  display: none;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: auto;
  padding-top: 2px;
}

.now-playing.show-volume .np-progress-container {
  display: none;
}

.now-playing.show-volume .np-volume-container {
  display: flex;
}

.np-vol-icon {
  display: inline-flex;
  align-items: center;
  color: var(--screen-text);
  flex-shrink: 0;
  opacity: 0.8;
}

.np-vol-icon svg {
  display: block;
  width: 13px;
  height: 13px;
}

.np-volume-bar {
  flex: 1;
  height: 8px;
  border-radius: 5px;
  background: linear-gradient(180deg, #c6c6c6 0%, #ededed 55%, #fbfbfb 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.np-volume-fill {
  height: 100%;
  background: linear-gradient(180deg, #b6e2ff 0%, #5aa9ed 45%, #2f81d6 55%, #2a78cc 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55);
  transition: width 0.12s ease;
}

.np-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 11px;
  color: var(--screen-text);
  opacity: 0.5;
}

/* ================================================
   Cover Flow (2.png 準拠 - 3Dカルーセル)
   ================================================ */

.cover-flow {
  height: 100%;
  /* 白背景の Cover Flow */
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 55%, #ececec 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.cf-stage {
  flex: 1;
  position: relative;
  /* 斜め(3D)効果のための遠近。手前側の辺が伸びる分は、斜めアルバム側を
     scale(0.915) で少し縮めて上辺・下辺を中央アルバム(=赤線)に収める。 */
  perspective: 500px;
  overflow: hidden;
}

.cf-album {
  position: absolute;
  top: 40%;          /* ジャケットを少し下へ (was 36%) */
  left: 50%;
  width: 92px;       /* ジャケットをほんの少し大きく (was 88px) */
  height: 92px;      /* ジャケットをほんの少し大きく (was 88px) */
  border-radius: 0;  /* 角は丸めず尖らせる (実機 Cover Flow 準拠) */
  /* overflow:hidden は付けない (下にはみ出す反射ブロック .cf-reflect を描くため) */
  backface-visibility: hidden;
  will-change: transform;
  /* 端でフェードしない: どの位置クラスも opacity を変えず、退場は画面外への
     スライド+クリップで行う。opacity の遷移指定は再生画面からの逆モーフで
     カバー群をフェードインさせるためのもの (通常スクロールでは値が変わらない)。 */
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.4s ease;
}

/* ジャケット下の鏡面反射 (DOM複製方式)。
   以前の -webkit-box-reflect は反射自体が半透明のため、奥のアルバムの反射が
   手前の反射と重なって透けて見えていた。床色で不透明に塗ったブロックの上に
   鏡像を描き、下へ行くほど床色で塗り潰してフェードさせることで、
   手前の反射が奥の反射を実機同様に隠す。
   3D回転は親 (.cf-album) ごと掛かるので反射も一緒に傾く。
   .cf-flip-reflect (反転カード表面の反射) も同じ描画を共有する。 */
.cf-reflect,
.cf-flip-reflect {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  /* ステージ背景の同じ高さ帯の色に合わせた不透明ベース (透けさせない) */
  background: linear-gradient(180deg, #f7f7f7 0%, #ececec 57%, #ececec 100%);
}

.cf-reflect svg,
.cf-flip-reflect svg {
  transform: scaleY(-1);   /* 上下反転の鏡像 */
  opacity: 0.6;
}

/* 鏡像の減衰。半透明で背景を透かすのではなく床色を上に重ねて塗り潰す */
.cf-reflect::after,
.cf-flip-reflect::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(247, 247, 247, 0.35) 0%,
      rgba(244, 244, 244, 0.75) 18%,
      rgba(240, 240, 240, 0.95) 32%,
      #ececec 42%,
      #ececec 100%);
}

.cf-art-icon {
  font-size: 26px;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 中央アルバム (正面・最前面) */
.cf-album.cf-center {
  transform: translate(-50%, -52%);
  z-index: 10;
}

/* 斜めのアルバム(待機列)は左右3枚ずつ。3D(遠近)で斜めにしつつ、scale(0.915)で
   少し縮めて手前側の辺を中央に収め、上辺・下辺を中央アルバム(=赤線)に揃える。
   角度は 80deg、左右で同一。translate-Y は -50% で上下中央を中央アルバムに合わせる。 */

/* 待機列は3枚目(最外)が画面端に届く位置を固定し、1・2枚目の translateX は
   「画面上で見えている帯の幅」が3枚とも均等(各≈27px)になる値にしている。
   ※ 遠近投影のため translateX を等間隔にしても画面上は不均等になる。
      この値は実測ソルバーで求めた投影後等間隔の解 (左右対称)。 */

/* 左 -1 */
.cf-album.cf-left-1 {
  transform: translate(-109.2%, -50%) rotateY(80deg) scale(0.915);
  z-index: 5;
}

/* 左 -2 */
.cf-album.cf-left-2 {
  transform: translate(-130.5%, -50%) rotateY(80deg) scale(0.915);
  z-index: 3;
}

/* 左 -3 */
.cf-album.cf-left-3 {
  transform: translate(-151.8%, -50%) rotateY(80deg) scale(0.915);
  z-index: 1;
}

/* 右 +1 */
.cf-album.cf-right-1 {
  transform: translate(9.2%, -50%) rotateY(-80deg) scale(0.915);
  z-index: 5;
}

/* 右 +2 */
.cf-album.cf-right-2 {
  transform: translate(30.5%, -50%) rotateY(-80deg) scale(0.915);
  z-index: 3;
}

/* 右 +3 */
.cf-album.cf-right-3 {
  transform: translate(51.8%, -50%) rotateY(-80deg) scale(0.915);
  z-index: 1;
}

/* 場外 (±4枚目)。待機列のさらに外側、ステージ(overflow:hidden)の外へ完全に出す。
   新規に入場するアルバムはここで生成してから目的位置へ遷移し、
   窓から出たアルバムはここへ退場してから削除する。
   これにより高速スクロール時も端でポップイン/ポップアウトしない。
   ★ opacity では消さず「画面外へ出してクリップで消す」ので端でフェードしない。
     translateX は場外の右端(左)/左端(右)が画面外になる実測値 (±11px 余裕)。 */
.cf-album.cf-off-left {
  transform: translate(-205%, -50%) rotateY(80deg) scale(0.915);
  z-index: 0;
  pointer-events: none;
}

.cf-album.cf-off-right {
  transform: translate(105%, -50%) rotateY(-80deg) scale(0.915);
  z-index: 0;
  pointer-events: none;
}

/* ================================================
   Cover Flow 反転カード (決定ボタン → 裏面=曲リスト)
   ================================================ */

/* カード本体。開始状態は中央アルバムと同じ位置・大きさ (92px・中心y≈38.9%)。
   開くと画面中央へ移動しつつパネルサイズへ拡大する。 */
.cf-flip {
  position: absolute;
  left: 50%;
  top: 38.9%;
  width: 92px;
  height: 92px;
  transform: translate(-50%, -50%);
  z-index: 30;
  perspective: 700px;
  transition: width 0.5s ease, height 0.5s ease, top 0.5s ease;
}

.cf-flip.cf-flip-open {
  width: 198px;
  /* ヘッダー29px + 曲行15px×8 = 149px。下端がステージ(画面)下端に揃う位置に
     置くことで、パネル下の空き空間を曲リストで埋める */
  height: 149px;
  top: 53.73%;   /* 中心y = ステージ高161px - 149/2 = 86.5px */
}

.cf-flip-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  transform: rotateY(0deg);
}

/* 開くと上から見て時計回り (rotateY 負方向) に半回転して裏面を見せる */
.cf-flip.cf-flip-open .cf-flip-inner {
  transform: rotateY(-180deg);
}

/* 復元表示用 (Now Playingから戻ったときなど): アニメーションなしで反転済みに */
.cf-flip.cf-flip-instant,
.cf-flip.cf-flip-instant .cf-flip-inner {
  transition: none;
}

.cf-flip-front,
.cf-flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
}

.cf-flip-front svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 反転カード表面の鏡面反射。反転アニメーション中も中央アルバムの反射が
   消えないようにする。.cf-flip-inner の preserve-3d でカードと一緒に回転し、
   90°を超えて裏面(曲リスト)が見えたら backface-visibility で一緒に隠れる */
.cf-flip-reflect {
  backface-visibility: hidden;
}

.cf-flip-reflect svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 裏面: アルバム名ヘッダー + 曲リスト (実機の反転パネル風) */
.cf-flip-back {
  transform: rotateY(180deg);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.35);
}

.cf-flip-head {
  flex: 0 0 29px;   /* 曲行(15px)が8行ちょうど収まるようヘッダー高を固定 */
  padding: 3px 8px 0;
  /* アルバム名は青いグラデーションの帯に白文字で表示 */
  background: linear-gradient(180deg, var(--highlight-top), var(--highlight-bottom));
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.cf-flip-album {
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cf-flip-artist {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cf-flip-list {
  flex: 1 1 auto;
  overflow: hidden;   /* スクロールはホイール操作(選択追従)で行う */
  /* 曲行の offsetTop をこのリスト基準にする (選択追従スクロールの計算基準) */
  position: relative;
}

.cf-track {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 15px;
  padding: 0 8px;
  font-size: 9px;
  color: #1c1c22;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.cf-track.selected {
  background: linear-gradient(180deg, var(--highlight-top), var(--highlight-bottom));
  color: var(--highlight-text);
}

/* 裏面リストのスクロールバー。メニューと同じ .scrollbar (操作中だけ表示・
   じんわりフェードアウト) を流用し、位置だけヘッダーの下に合わせる */
.cf-flip-scrollbar {
  top: 31px;
}

/* 再生画面への回転モーフ遷移中: 背後のカバー群をフェードアウトさせ、
   回転しながら着地するカードだけを残す */
.cover-flow.cf-npmorph .cf-album {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cf-track-title {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cf-track-time {
  flex: 0 0 auto;
  opacity: 0.65;
}

/* 反転中: カードと入れ替わる中央アルバム本体を隠し、下部テキストも消す。
   背後のサイドアルバムはクリック不可にする (誤操作防止) */
.cover-flow.cf-flipped .cf-album.cf-center {
  visibility: hidden;
}

.cover-flow.cf-flipped .cf-album {
  pointer-events: none;
}

.cover-flow.cf-flipped .cf-info {
  opacity: 0;
}

.cf-info {
  transition: opacity 0.3s ease;
}

.cf-info {
  position: absolute;
  bottom: 12px;   /* アルバム名/アーティスト名の文字全体を少し上へ */
  left: 0;
  right: 0;
  text-align: center;
  z-index: 20;
}

.cf-album-name {
  font-size: 12px;
  font-weight: 600;
  color: #222222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
  line-height: 1;        /* 2行(アルバム名/アーティスト名)の間隔を詰める */
}

.cf-artist-name {
  font-size: 12px;       /* アルバム名と同じ大きさ */
  font-weight: 600;      /* アルバム名と同じ太さ */
  color: #222222;        /* アルバム名と同じ色 */
  padding: 0 10px;
  line-height: 1;        /* 2行(アルバム名/アーティスト名)の間隔を詰める */
}

/* ================================================
   歌詞表示
   ================================================ */

.lyrics-display {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

.lyrics-text {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.7;
  color: var(--screen-text);
  text-align: center;
  padding: 6px 10px;
}

.lyrics-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  font-size: 11px;
  color: var(--screen-text);
  opacity: 0.5;
}

/* ================================================
   時計・メッセージ
   ================================================ */

.clock-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 4px;
}

.clock-time {
  font-size: 36px;
  font-weight: 700;
  color: var(--screen-text);
  letter-spacing: 1px;
}

.clock-seconds {
  font-size: 20px;
  font-weight: 400;
  opacity: 0.5;
}

.clock-date {
  font-size: 11px;
  color: var(--screen-text);
  opacity: 0.6;
}

.message-display {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 11px;
  color: var(--screen-text);
  text-align: center;
  padding: 12px;
  line-height: 1.6;
  opacity: 0.8;
}

/* ================================================
   クリックホイール
   ================================================ */

.click-wheel-container {
  position: absolute;
  /* 画面縮小に合わせて再センタリング。画面下の本体領域(下端201px〜448px)の中心。
     領域中心324.5px → bottom = 448 - 324.5 - 89 ≒ 35px */
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.click-wheel {
  position: relative;
  width: 178px;
  height: 178px;
  border-radius: 50%;
  background: var(--wheel-bg);
  box-shadow:
    0 0 0 1px var(--wheel-border),
    0 2px 8px var(--wheel-shadow-outer),
    inset 0 1px 2px var(--wheel-shadow-inner);
  /* ホイール全体(決定ボタン・ラベル込み)を一括縮小。中心基準でレイアウトボックスは
     178pxのまま → コンテナの下端中心配置(bottom:35px)はそのままで中心が保たれる。
     当たり判定は clickwheel.js が getBoundingClientRect で実寸を見るので自動追従。
     既定=普通(0.92倍)。設定の「ホイールサイズ」で data-wheel-size を切り替えて変更。 */
  transform: scale(0.92);
  /* マウスを乗せると「手」、操作中は「掴んだ手」 */
  cursor: grab;
  touch-action: none;
  transition: background 0.5s ease, box-shadow 0.5s ease, transform 0.3s ease;
}

/* 設定「ホイールサイズ: 大」= 100% (元のサイズ) */
.ipod-body[data-wheel-size="large"] .click-wheel {
  transform: scale(1);
}

/* 操作中(ドラッグ中)は掴んだ手のカーソル。ホイール外に出ても維持する */
.click-wheel.grabbing {
  cursor: grabbing;
}

body.wheel-grabbing,
body.wheel-grabbing * {
  cursor: grabbing !important;
}

/* 決定(センター)ボタンの上では常に通常カーソル */
.center-button,
body.wheel-grabbing .center-button {
  cursor: default !important;
}

/* ホイールの微妙なテクスチャ */
.click-wheel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 60%);
  pointer-events: none;
}

/* センターボタン */
.center-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--center-top), var(--center-bottom));
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.18),
    0 0 0 1px var(--center-border),
    inset 0 1px 0 var(--center-highlight);
  cursor: default;
  z-index: 10;
  transition: background 0.5s ease, box-shadow 0.5s ease;
  overflow: hidden;
}

/* センターボタンの粒状テクスチャ */
.center-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: white;
  filter: url(#grain-texture);
  opacity: 0.08;
  pointer-events: none;
  clip-path: inset(0 round 50%);
}

.center-button.pressed {
  filter: brightness(0.92);
  box-shadow:
    0 0 2px rgba(0, 0, 0, 0.2),
    0 0 0 1px var(--center-border),
    inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ── ホイールラベル ── */

.wheel-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.wheel-label {
  position: absolute;
  font-size: 9px;
  font-weight: 600;
  color: var(--label-color);
  letter-spacing: 0.8px;
  transition: color 0.5s ease;
}

.wheel-label.top {
  top: 8px;          /* 外側の端へ寄せる */
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  text-transform: uppercase;
}

.wheel-label.bottom {
  bottom: 8px;       /* 外側の端へ寄せる */
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 1px;
}

.wheel-label.left {
  left: 10px;        /* 外側の端へ寄せる (横向きは曲面分2px控えめ) */
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
}

.wheel-label.right {
  right: 10px;       /* 外側の端へ寄せる (横向きは曲面分2px控えめ) */
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
}

/* ── ゾーン押下フィードバック ── */

.click-wheel[data-pressed-zone="menu"] .wheel-label.top,
.click-wheel[data-pressed-zone="play"] .wheel-label.bottom,
.click-wheel[data-pressed-zone="prev"] .wheel-label.left,
.click-wheel[data-pressed-zone="next"] .wheel-label.right {
  opacity: 0.5;
}

/* ================================================
   フォーカスリセット
   ================================================ */

*:focus {
  outline: none;
}