/* TEST PRESSING のスタイル */

/* ===== 色と大きさの変数 ===== */
/* 色はここでまとめて決め、ほかの場所では var(--名前) で使う */
:root {
  --color-bg: #1e1f22;          /* 背景（チャコールグレー） */
  --color-surface: #2a2c31;     /* パネルやボタンの面 */
  --color-plinth: #34363c;      /* レコードの下に敷く台座 */
  --color-border: #767a83;      /* 枠線・フェーダーの溝（パネルとの差 3:1 以上） */
  --color-text: #ececec;        /* 本文 */
  --color-text-muted: #a8a8ad;  /* 補足の文字 */
  --color-accent: #d04431;      /* ボタンの赤（面に使う。白い文字と 4.5:1 以上、パネルと 3:1 以上） */
  --color-label-paper: #efe7d2; /* レコードのラベル（少し黄みがかった、生成りの紙の色） */
  --color-label-ink: #2e2d2b;   /* ラベルのスタンプのインク（グレーがかった黒。紙との差は約 12:1） */
  --color-accent-light: #ff6b57; /* 暗い背景の上に置く差し色（文字にも使える明るさ） */
  --color-focus: #ffd166;       /* キーボード操作中のフォーカス枠 */

  --gap: 24px;                  /* 部品どうしの間隔 */
  --top-bar-height: 64px;       /* 上部バーの高さ（PCでレコードの大きさを計算するのに使う） */
  --note-height: 40px;          /* 下の注記の高さ（同上） */

  /* デッキ（台座＋トーンアームの置き場）の横幅は、台座の直径の何倍か */
  --deck-ratio: 1.3;

  /* 台座の直径（スマホ：デッキが画面の幅いっぱいになる大きさ。ただし大きくなりすぎないよう 420px まで） */
  --plinth-size: min(calc((100vw - 32px) / var(--deck-ratio)), 420px);

  color-scheme: dark;           /* ブラウザ標準の部品（スクロールバーなど）も暗い配色にする */
}

/* ===== 全体 ===== */
* {
  box-sizing: border-box;       /* 幅に枠線と余白を含めて計算する */
}

body {
  margin: 0;
  min-height: 100vh;            /* dvh に対応していないブラウザ用 */
  min-height: 100dvh;           /* スマホのアドレスバーの出し入れも考えた画面の高さ */
  display: grid;
  grid-template-rows: auto 1fr auto; /* 上部バー／中央／注記 の3段 */
  /* 列の幅を画面の幅までに抑える（長い曲名などで、ページが横に広がらないようにする） */
  grid-template-columns: minmax(0, 1fr);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.5;
}

/* 見た目からは消すが、スクリーンリーダーとキーボード操作には残すためのクラス */
/* （display:none だと読み上げもフォーカスもできなくなるので使わない） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* キーボードで操作しているときのフォーカス枠（マウスで押したときは出ない） */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ===== 上部バー ===== */
.top-bar {
  display: flex;
  flex-wrap: wrap;              /* スマホで入りきらないときは折り返す */
  align-items: center;
  gap: 12px 20px;
  padding: 12px 16px;
}

.title {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 0.15em;
}

.file-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;                 /* 曲名が長いときに、はみ出さず省略されるようにする */
  flex: 1 1 240px;              /* 240px 取れないときは、タイトルの下の行に回る */
}

/* 「ファイルを選ぶ」（見た目はボタンだが、中身は input に結び付いた label） */
.file-button {
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  cursor: pointer;
  transition: background-color 0.15s;
}

.file-button:hover {
  background: var(--color-plinth);
}

/* 隠した input にフォーカスが来たら、すぐ後ろの label に枠を出す */
#file-input:focus-visible + .file-button {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.file-name {
  margin: 0;
  min-width: 0;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;      /* 長い曲名は「…」で省略する */
  white-space: nowrap;
}

/* ===== 中央（レコードと操作パネル） ===== */
/* スマホ：縦に並べる */
.deck {
  display: grid;
  justify-items: center;
  align-content: start;         /* 上から詰めて並べる */
  gap: var(--gap);
  padding: 8px 16px var(--gap);
}

/* デッキ：左に台座、右にトーンアームの置き場 */
.deck-area {
  position: relative;           /* トーンアームの SVG を、この箱を基準に重ねる */
  width: calc(var(--plinth-size) * var(--deck-ratio));
  height: var(--plinth-size);
}

/* トーンアーム（デッキ全体に重ねる SVG） */
.tonearm {
  position: absolute;
  inset: 0;                     /* デッキと同じ位置・大きさにする */
  width: 100%;
  height: 100%;
  pointer-events: none;         /* クリックをレコードへ素通りさせる */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); /* 影を付けて、レコードから浮いて見せる */
}

.tonearm-base   { fill: var(--color-plinth); stroke: var(--color-border); stroke-width: 0.6; }
.tonearm-weight { fill: #8a8e96; }
.tonearm-rod    { fill: #d4d6da; }
.tonearm-lift   { stroke: #d4d6da; stroke-width: 1; stroke-linecap: round; } /* 棒（幅 1.6）より細くして控えめに */
.tonearm-head   { fill: #3a3c42; stroke: #d4d6da; stroke-width: 0.5; }
.tonearm-pivot  { fill: #d4d6da; }

/* 台座：レコードの下に敷く、少し明るい円 */
.turntable {
  width: var(--plinth-size);
  aspect-ratio: 1;              /* 縦横を同じ長さにする */
  border-radius: 50%;           /* 正方形を円にする */
  background: var(--color-plinth);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;          /* レコードを中央に置く */
}

/* 曲を読み込んだあとは、レコードをクリックして再生位置を変えられる（ニードルドロップ） */
.turntable.is-ready {
  cursor: pointer;
}

/* レコード（回転は JS で transform: rotate() を書き換えて行う） */
.record {
  width: 92%;                   /* 台座より一回り小さくして、縁に台座が見えるようにする */
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    /* ランアウト：中心から半径 22 までを、溝のない平らな黒で塗る（ラベルはこの上に乗る） */
    /* closest-side で 100% ＝ レコードの半径 46（台座の直径 = 100 の座標）になるので、22 は 100% * 22 / 46 */
    radial-gradient(circle closest-side, #1c1c1c calc(100% * 22 / 46), transparent 0),
    /* リードイン：半径 44 からレコードの外周（46）までを、同じ平らな黒で塗る */
    radial-gradient(circle closest-side, transparent calc(100% * 44 / 46), #1c1c1c 0),
    /* 同心円の模様をくり返して、レコードの溝に見せる */
    repeating-radial-gradient(circle, #111 0 2px, #222 2px 4px);
  display: grid;
  place-items: center;          /* ラベルを中央に置く */
  will-change: transform;       /* 回転を滑らかにするための、ブラウザへのヒント */
}

/* 中央のラベル */
.record-label {
  position: relative;
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-label-paper);
}

/* ラベルの文字を描く SVG（ラベルいっぱいに広げる） */
.label-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* スタンプの文字（上寄せにして、回っていることが目で分かるようにする） */
/* 大きさなどの数値は viewBox の座標（ラベルの直径 = 100）なので、ラベルと一緒に伸び縮みする */
.label-stamp {
  fill: var(--color-label-ink);
  font-family: Helvetica, Arial, sans-serif; /* 端末に入っている、飾り気のない書体（太字で使う） */
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.6px;
  text-anchor: middle;          /* x の位置を文字の中央にそろえる */
  /* スマホでは文字が小さいので、かすれのない弱いフィルターにする（PC 用は下のメディアクエリ） */
  /* フィルターは回転する .record ではなく、この文字だけにかける（重さ対策） */
  filter: url(#stamp-soft);
}

/* ラベル中央の穴（穴から見える、ターンテーブルの銀色の軸） */
.record-label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #c3c6cb;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); /* 暗い輪を付けて、明るいラベルの上でも見えるようにする */
  transform: translate(-50%, -50%);
}

/* ===== 操作パネル ===== */
/* 上から：速度／回転数／ピッチ／メッセージ／再生ボタン の縦並び */
.panel {
  width: 100%;
  max-width: 420px;
  padding: var(--gap);
  border-radius: 12px;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 「速度」「回転数」「ピッチ」の小さな見出し */
.control-title {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

/* --- 速度 --- */
.speed {
  margin: 0;
}

.speed-value {
  display: block;
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: bold;
  /* 行の高さに余裕を持たせる（詰めすぎると、フォントによっては数字の上が上の行にはみ出す） */
  line-height: 1.3;
  font-variant-numeric: tabular-nums; /* 数字の幅をそろえ、値が変わっても表示が左右にぶれないようにする */
}

/* --- 回転数（ボタン型のラジオ） --- */
.mode {
  margin: 0;
  padding: 0;
  border: 0;
}

.mode-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3つを同じ幅で横に並べる */
  gap: 8px;
}

/* 見た目のボタンは、ラジオのすぐ後ろの span で作る */
.mode-option span {
  display: block;
  padding: 10px 4px;
  /* 幅の狭いスマホでは文字を少し小さくして、「スクリュー」が折り返さないようにする
     （画面の幅の 4%。ただし 0.8rem〜1rem の範囲） */
  font-size: clamp(0.8rem, 4vw, 1rem);
  white-space: nowrap;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-plinth);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s;
}

.mode-option span:hover {
  border-color: var(--color-text-muted);
}

/* 選ばれているボタン：ラベルの赤に白い文字 */
.mode-option input:checked + span {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
  font-weight: bold;
}

/* 隠したラジオにフォーカスが来たら、見た目のボタンに枠を出す */
.mode-option input:focus-visible + span {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* --- ピッチ（縦フェーダー） --- */
.pitch {
  /* PC では、パネルの残りの高さをすべてピッチに使う */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.pitch-body {
  height: 240px;                /* スマホ：フェーダーの長さを決める（決めないと縦に伸び続ける） */
  display: flex;
  align-items: stretch;
  gap: 24px;
}

.fader {
  display: flex;
  gap: 8px;
}

/* 目盛り（−8／0／+8）。つまみの中心の高さに合わせて置く */
.fader-scale {
  position: relative;
  width: 2em;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fader-scale span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);  /* 文字の中心を、指定した高さに合わせる */
}

/* つまみの高さ（20px）の半分だけ内側が、−8 と +8 の位置になる */
.fader-scale-top    { top: 10px; }
.fader-scale-zero   { top: 50%; }
.fader-scale-bottom { top: calc(100% - 10px); }

/* フェーダー本体
   writing-mode: vertical-lr（縦書き）にすると、スライダーが縦向きになり、最小値（−8）が上に来る */
.fader-input {
  writing-mode: vertical-lr;
  -webkit-appearance: none;     /* ブラウザ標準の見た目を消して、自分で描く */
  appearance: none;
  width: 40px;
  height: 100%;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

/* 溝（Chrome・Safari 用） */
.fader-input::-webkit-slider-runnable-track {
  width: 6px;
  border-radius: 3px;
  background: var(--color-border);
}

/* つまみ（Chrome・Safari 用）：フェーダーキャップに見えるよう、横長の四角に中央線 */
.fader-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 40px;
  height: 20px;
  margin-left: -17px;           /* 溝（6px）の中央に置く：(6 − 40) ÷ 2 */
  border-radius: 3px;
  background: linear-gradient(#e0e0e0 0 45%, #333 45% 55%, #e0e0e0 55%);
}

/* 溝（Firefox 用） */
.fader-input::-moz-range-track {
  width: 6px;
  border-radius: 3px;
  background: var(--color-border);
}

/* つまみ（Firefox 用） */
.fader-input::-moz-range-thumb {
  width: 40px;
  height: 20px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(#e0e0e0 0 45%, #333 45% 55%, #e0e0e0 55%);
}

/* ピッチの値と「0に戻す」 */
.pitch-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}

.pitch-value {
  font-size: 1.5rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.pitch-reset {
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-plinth);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s;
}

.pitch-reset:hover {
  border-color: var(--color-text-muted);
}

/* --- 再生位置（シークバー） --- */
.seek-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.seek-time {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.seek-bar {
  -webkit-appearance: none;     /* ブラウザ標準の見た目を消して、自分で描く */
  appearance: none;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.seek-bar:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 溝（Chrome・Safari 用） */
.seek-bar::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--color-border);
}

/* つまみ（Chrome・Safari 用） */
.seek-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;             /* 溝（6px）の中央に置く：(6 − 18) ÷ 2 */
  border-radius: 50%;
  background: #e0e0e0;
}

/* 溝（Firefox 用） */
.seek-bar::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--color-border);
}

/* つまみ（Firefox 用） */
.seek-bar::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: #e0e0e0;
}

/* --- エラーメッセージ --- */
.message {
  margin: 0;
  color: var(--color-accent-light);
}

/* 空のときは場所を取らない */
.message:empty {
  display: none;
}

/* --- 再生／停止（パネルで一番目立たせる） --- */
.play-button {
  width: 100%;
  padding: 18px;
  border: 0;
  border-radius: 10px;
  background: var(--color-accent);
  color: #fff;
  font: inherit;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: background-color 0.15s;
}

.play-button:hover:not(:disabled) {
  background: #b23826;          /* 少し暗い赤 */
}

/* ファイルを読み込む前など、押せないとき */
.play-button:disabled {
  background: var(--color-plinth);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* ===== 下の注記 ===== */
.note {
  padding: 0 16px 12px;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-align: center;
}

.note p {
  margin: 0;
}

/* 注記の各まとまり。inline-block にすると途中では改行されず、まとまりの間（読点の後ろ）で改行される */
.note-line {
  display: inline-block;
}

/* ===== PC：左にレコード、右に操作パネル ===== */
@media (min-width: 820px) {
  :root {
    /* 台座の直径は、次のうち小さいほう
       ・画面の高さから、上部バー・注記・上下の余白を引いた長さ（1画面に収める）
       ・画面の幅から、操作パネルのぶん（360px）と余白を引き、デッキの倍率で割った長さ
         （トーンアームの置き場まで含めて、横にはみ出さない） */
    --plinth-size: min(
      calc(100dvh - var(--top-bar-height) - var(--note-height) - var(--gap) * 2),
      calc((100vw - 360px - var(--gap) * 3) / var(--deck-ratio))
    );
  }

  .top-bar {
    flex-wrap: nowrap;
    height: var(--top-bar-height);
    padding: 0 var(--gap);
  }

  .deck {
    grid-template-columns: auto 360px; /* 左：レコード（台座の大きさ）、右：パネル */
    justify-content: center;
    align-content: center;      /* 画面の高さの中央に置く */
    align-items: center;
    padding: var(--gap);
    padding-top: 0;
  }

  /* PC ではラベルが大きいので、かすれまで入れたフィルターにする */
  .label-stamp {
    filter: url(#stamp);
  }

  /* 操作パネルの高さを台座にそろえる
     ただし台座が小さいときは、中身が収まる高さ（--panel-min-height）を下回らないようにする
     （高さを決めておかないと、縦フェーダーの長さが決まらず伸び続けてしまう） */
  .panel {
    --panel-min-height: 600px;
    height: max(var(--plinth-size), var(--panel-min-height));
  }

  /* フェーダーは、パネルの残りの高さいっぱいに伸ばす */
  .pitch-body {
    flex: 1;
    height: auto;
    min-height: 140px;          /* 画面が低いときでも、最低限の長さを確保する */
  }
}

/* PC で画面の高さが低いとき（ノートPCなど）は、パネルの余白と間隔を詰めて1画面に収める */
@media (min-width: 820px) and (max-height: 760px) {
  .panel {
    --panel-min-height: 530px;
    gap: 14px;
    padding: 20px;
  }

  .play-button {
    padding: 12px;
  }

  .note {
    height: var(--note-height);
    padding: 0 var(--gap);
  }
}

/* ===== ドラッグ中に画面全体に出す表示 ===== */
.drop-overlay {
  display: none;                /* ふだんは出さない */
  position: fixed;
  inset: 12px;                  /* 画面の端から少し内側に */
  border: 3px dashed var(--color-accent-light);
  border-radius: 16px;
  background: rgba(30, 31, 34, 0.85);
  place-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  pointer-events: none;         /* マウスの操作を素通りさせ、ドロップの邪魔をしない */
  z-index: 10;
}

/* JS がドラッグ中に body に付けるクラス */
.is-dragging .drop-overlay {
  display: grid;
}

/* ===== 動きを減らす設定のとき ===== */
/* 色が変わるときのアニメーション（transition）を止める */
/* （レコードの回転は JS 側で止めている） */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}