/* ========== カラートークン ========== */
:root {
  color-scheme: light;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eceff4;
  --text: #1c2230;
  --muted: #5d6676;
  --border: #dce0e7;
  --primary: #2f5bea;
  --primary-soft: rgba(47, 91, 234, 0.12);
  --downbeat: #e8590c;
  --silent: #98a2b3;
  --start: #18804a;
  --stop: #d9363e;
  --on-color: #ffffff;
  --ring: #dce0e7;
  --pulse: rgba(47, 91, 234, 0.28);
  --pulse-accent: rgba(232, 89, 12, 0.32);
  --step-on: #ff8a3d;
  --step-on-border: #e8590c;
  --step-off: #ffffff;
  --step-off-border: #d3d8e0;
  --step-glow: rgba(255, 138, 61, 0.38);
  --wood-light: #a8703c;
  --wood-dark: #6f4322;
  --wood-face: #f3e7d1;
  --wood-base: #57331a;
  --wood-tick: #9c7a52;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 16px rgba(16, 24, 40, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1218;
    --surface: #181c24;
    --surface-2: #232934;
    --text: #e8ebf1;
    --muted: #9ba4b3;
    --border: #2d3442;
    --primary: #7591ff;
    --primary-soft: rgba(117, 145, 255, 0.16);
    --downbeat: #ff9a4d;
    --silent: #6b7484;
    --start: #1f8f53;
    --stop: #d63c44;
    --ring: #2d3442;
    --pulse: rgba(117, 145, 255, 0.32);
    --pulse-accent: rgba(255, 154, 77, 0.34);
  --step-on: #ff9a4d;
  --step-on-border: #ff7a1a;
  --step-off: #2a303b;
  --step-off-border: #4a5363;
  --step-glow: rgba(255, 154, 77, 0.4);
  --wood-face: #ddcaa8;
  --wood-base: #3f2512;
    --shadow: none;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1218;
  --surface: #181c24;
  --surface-2: #232934;
  --text: #e8ebf1;
  --muted: #9ba4b3;
  --border: #2d3442;
  --primary: #7591ff;
  --primary-soft: rgba(117, 145, 255, 0.16);
  --downbeat: #ff9a4d;
  --silent: #6b7484;
  --start: #1f8f53;
  --stop: #d63c44;
  --ring: #2d3442;
  --pulse: rgba(117, 145, 255, 0.32);
  --pulse-accent: rgba(255, 154, 77, 0.34);
  --step-on: #ff9a4d;
  --step-on-border: #ff7a1a;
  --step-off: #2a303b;
  --step-off-border: #4a5363;
  --step-glow: rgba(255, 154, 77, 0.4);
  --wood-face: #ddcaa8;
  --wood-base: #3f2512;
  --shadow: none;
}

/* ========== ベース ========== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

button,
input { font: inherit; color: inherit; }

button {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.app {
  max-width: 1040px;
  margin: 0 auto;
  padding: calc(8px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 12px;
}

.topbar h1 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.theme-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  color: var(--muted);
  min-height: 36px;
}

.layout {
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
  }
  .main-panel {
    position: sticky;
    top: 16px;
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.settings {
  display: grid;
  gap: 16px;
}

.card h2 {
  margin: 0 0 8px;
  font-size: 1rem;
}

/* ========== メインパネル ========== */
.main-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.status-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  font-size: 0.95rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.measure-label { font-weight: 600; }

.phase-badge {
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--primary-soft);
  color: var(--primary);
}

.phase-badge.is-silent {
  background: var(--silent);
  color: var(--on-color);
}

/* BPM 表示 */
/* BPM の円と、そのまわりの分割の丸を入れる枠（分割数を変えても大きさは変えない） */
.dial {
  --dial: min(66vw, 250px);
  position: relative;
  align-self: center;
  width: var(--dial);
  height: var(--dial);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bpm-ring {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 6px solid var(--ring);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
}

.bpm-ring.pulse { animation: pulse 220ms ease-out; }
.bpm-ring.pulse-accent { animation: pulse-accent 260ms ease-out; }
.bpm-ring.pulse-silent { animation: pulse-silent 220ms ease-out; }

@keyframes pulse {
  from { border-color: var(--primary); box-shadow: 0 0 0 10px var(--pulse); }
  to { border-color: var(--ring); box-shadow: 0 0 0 0 transparent; }
}

@keyframes pulse-accent {
  from { border-color: var(--downbeat); box-shadow: 0 0 0 14px var(--pulse-accent); }
  to { border-color: var(--ring); box-shadow: 0 0 0 0 transparent; }
}

@keyframes pulse-silent {
  from { border-color: var(--silent); }
  to { border-color: var(--ring); }
}

.bpm-input {
  width: 80%;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: clamp(4rem, 21vw, 6rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  padding: 0;
  border-radius: 12px;
  caret-color: var(--primary);
}

.bpm-input:focus {
  outline: none;
  background: var(--primary-soft);
}

.bpm-unit {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.12em;
}

.tempo-term {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 4px;
  text-align: center;
  line-height: 1.3;
}

.auto-info {
  margin: -4px 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* スライダー */
.slider {
  --fill: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px;
  background: transparent;
  margin: 0;
  touch-action: pan-y;
}

.slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--primary) var(--fill), var(--surface-2) var(--fill));
}

.slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--primary) var(--fill), var(--surface-2) var(--fill));
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--primary);
}

/* ±ボタン */
.adjust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.adj-btn {
  height: 52px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.adj-btn:active { background: var(--primary-soft); }

/* スタート／ストップ */
.start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 76px;
  border: 0;
  border-radius: 18px;
  background: var(--start);
  color: var(--on-color);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.start-btn svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.start-btn .icon-stop { display: none; }
.start-btn.playing { background: var(--stop); }
.start-btn.playing .icon-play { display: none; }
.start-btn.playing .icon-stop { display: block; }
.start-btn:active { filter: brightness(0.92); }

/* タップテンポ */
.tap-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  border: 2px solid var(--primary);
  border-radius: 16px;
  background: transparent;
  color: var(--primary);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.tap-btn small {
  font-weight: 500;
  font-size: 0.75rem;
  opacity: 0.85;
}

.tap-btn.tapped { background: var(--primary-soft); }

.notice {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--text);
  font-size: 0.9rem;
  text-align: center;
}

/* ========== 設定 ========== */
.field { padding: 8px 0; }

.field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.field-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.field-value {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.hint {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 14px;
}

.seg button {
  height: 46px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--muted);
}

.seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.sound-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sound-grid button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 64px;
  padding: 8px 12px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  text-align: left;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}

.sound-grid small {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--muted);
}

.sound-grid button[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

/* スマホ：名前が折り返さないよう1列のリストにする */
@media (max-width: 480px) {
  .sound-grid { grid-template-columns: 1fr; gap: 6px; }
  .sound-grid button {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 50px;
  }
  .sound-grid small { text-align: right; }
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 4px 0;
}

.row-label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  min-width: 0;
}

.row-label small {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--muted);
}

.feature-title { font-size: 1rem; }

.feature-body {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 4px;
  transition: opacity 150ms;
}

.feature:not(.enabled) .feature-body { opacity: 0.55; }

.summary {
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 0.88rem;
  color: var(--muted);
}

.feature.enabled .summary {
  background: var(--primary-soft);
  color: var(--text);
}

/* スイッチ */
.switch {
  position: relative;
  flex: none;
  width: 56px;
  height: 32px;
}

.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--border);
  transition: background-color 150ms;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 150ms;
}

.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::after { transform: translateX(24px); }
.switch input:focus-visible + .switch-track {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* ステッパー */
.stepper {
  display: inline-flex;
  align-items: center;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
}

.stepper button {
  width: 46px;
  height: 44px;
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  font-weight: 700;
}

.stepper button:active { background: var(--primary-soft); }
.stepper button:disabled { opacity: 0.35; cursor: default; }

.stepper output {
  min-width: 84px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ヘルプ */
.help ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.88rem;
  color: var(--muted);
}

.help li + li { margin-top: 4px; }

kbd {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-2);
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--text);
  margin: 0 1px;
}

.pc-only { display: none; }

@media (hover: hover) and (pointer: fine) {
  .pc-only { display: list-item; }
}

/* 小さい画面（縦が短いスマホ）向け */
@media (max-height: 700px) and (max-width: 600px) {
  .dial { --dial: min(56vw, 210px); }
  .bpm-input { font-size: clamp(3.4rem, 18vw, 5rem); }
  .main-panel { gap: 10px; }
  .start-btn { height: 66px; }
}

@media (max-width: 360px) {
  .stepper output { min-width: 68px; }
  .stepper button { width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .step::after,
  .pd-step-dot { transition: none; }
  .step.current::after,
  .pd-step.current .pd-step-dot { transform: none; }
  .bpm-ring.pulse,
  .bpm-ring.pulse-accent,
  .bpm-ring.pulse-silent,
  .double-on .dial.pulse::before,
  .double-on .dial.pulse-accent::before,
  .double-on .dial.pulse-silent::before { animation-duration: 1ms; }
}

/* ========== 表示切り替え（拍の丸／振り子） ========== */
.view-toggle {
  align-self: center;
  grid-template-columns: repeat(2, auto);
  padding: 3px;
  border-radius: 12px;
}

.view-toggle button {
  height: 34px;
  padding: 0 18px;
  font-size: 0.9rem;
}

/* ========== 振り子式メトロノーム ========== */
.pendulum { display: none; }

.view-pendulum .pendulum { display: block; }

.pd-svg {
  display: block;
  width: min(58vw, 232px);
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.pd-wood-light { stop-color: var(--wood-light); }
.pd-wood-dark { stop-color: var(--wood-dark); }
.pd-brass-light { stop-color: #f1cf7a; }
.pd-brass-dark { stop-color: #a77b2c; }

.pd-body { fill: url(#pdWood); }
.pd-face { fill: var(--wood-face); }
.pd-base { fill: var(--wood-base); }

.pd-scale line {
  stroke: var(--wood-tick);
  stroke-width: 1.2;
}

.pd-scale line.major { stroke-width: 2; }

.pd-track {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
  opacity: 0.6;
}

.pd-end {
  fill: var(--surface-2);
  stroke: var(--border);
  stroke-width: 2;
  transition: fill 120ms ease-out, stroke 120ms ease-out;
}

.pd-end.on { fill: var(--primary); stroke: var(--primary); transition: none; }
.pd-end.on.accent { fill: var(--downbeat); stroke: var(--downbeat); }
.pd-end.on.silent { fill: var(--silent); stroke: var(--silent); }

.pd-rod {
  stroke: #c3c8d0;
  stroke-width: 4;
  stroke-linecap: round;
}

.pd-weight path {
  fill: url(#pdBrass);
  stroke: #8a6522;
  stroke-width: 1;
}

.pd-weight line {
  stroke: #8a6522;
  stroke-width: 1.5;
}

.pd-pivot {
  fill: url(#pdBrass);
  stroke: #8a6522;
  stroke-width: 1.5;
}

/* 振り子表示のときは、BPM を振り子の下に横並びで表示 */
.view-pendulum .dial {
  width: auto;
  height: auto;
}

.view-pendulum .bpm-ring {
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 8px;
  margin-top: -6px;
  animation: none !important;
}

.view-pendulum .bpm-input {
  width: calc(var(--digits, 3) * 0.62em + 0.15em);
  font-size: clamp(3rem, 14vw, 3.75rem);
}

.view-pendulum .tempo-term { margin-top: 0; }

/* ========== 分割（1拍の中のリズム） ========== */
/* 拍の丸モード：BPM の円を少し小さくして、外周に分割の丸を置く */
.step-dial {
  position: absolute;
  inset: 0;
}

.view-pendulum .step-dial { display: none; }
.main-panel:not(.view-pendulum) .bpm-ring { width: 70%; }
.main-panel:not(.view-pendulum) .bpm-input { font-size: clamp(2.6rem, 13vw, 4rem); }
.main-panel:not(.view-pendulum) .bpm-unit { font-size: 0.8rem; }


/* 見た目の丸は小さく、タップできる範囲は 36px 確保 */
.step {
  --a: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hit, 36px);
  height: var(--hit, 36px);
  margin: calc(var(--hit, 36px) / -2) 0 0 calc(var(--hit, 36px) / -2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: rotate(var(--a)) translateY(calc(var(--dial) * var(--dial-r, 0.43) * -1)) rotate(calc(var(--a) * -1));
}

.step::after {
  content: "";
  position: absolute;
  inset: calc(var(--hit, 36px) * (1 - var(--dotf, 0.612) * var(--dot-scale, 1)) / 2);
  border-radius: 50%;
  background: var(--step-off);
  border: 2px solid var(--step-off-border);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out, background-color 120ms, border-color 120ms;
}

.step.head::after { inset: calc(var(--hit, 36px) * (1 - var(--dotf-head, 0.722) * var(--dot-scale, 1)) / 2); } /* 拍頭（ステップ1）は少し大きく */

.step[aria-pressed="true"]::after {
  background: var(--step-on);
  border-color: var(--step-on-border);
}

/* 実際に鳴ったステップの丸：一瞬だけ拡大して光る（周回リングは枠線だけなので区別できる） */
.step.current::after {
  transform: scale(var(--fl-scale, 1.45));
  box-shadow: 0 0 0 var(--fl-ring, 4px) var(--step-glow), 0 0 calc(var(--fl-ring, 4px) * 3) var(--step-glow);
  transition: none;
}

/* 周回リング：塗りなしのオレンジ枠線。段階的に移る。分割の丸とは別レイヤーで、タップは丸に通す */
.playhead {
  --a: 0deg;
  --eff: var(--ph-op, 0.65);
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--ph-size, 30px) * var(--dscale, 1));
  height: calc(var(--ph-size, 30px) * var(--dscale, 1));
  margin: calc(var(--ph-size, 30px) * var(--dscale, 1) / -2) 0 0 calc(var(--ph-size, 30px) * var(--dscale, 1) / -2);
  box-sizing: border-box;
  border: var(--ph-bw, 2px) solid var(--step-on-border);
  border-radius: 50%;
  opacity: var(--eff);
  box-shadow: 0 0 var(--ph-glow, 2px) var(--step-on-border);
  pointer-events: none;
  transform: rotate(var(--a)) translateY(calc(var(--dial) * var(--dial-r, 0.43) * -1)) rotate(calc(var(--a) * -1));
}

.playhead.on { display: block; }
.view-pendulum .playhead { display: none; }

.silent-measure .playhead { --eff: calc(var(--ph-op, 0.65) * 0.5); }

/* 再生を始めて現れるとき、ふわっと濃くなる（0ms ならフェードなし） */
.playhead.on { animation: ph-in var(--ph-fade, 0ms) ease-out; }
@keyframes ph-in { from { opacity: 0; } to { opacity: var(--eff); } }
.playhead.ghost.on { animation: none; }

/* 停止したとき、すぐ消さずにふわっと薄くなって消える（0ms なら即座に消える） */
.playhead.on.out,
.playhead.ghost.on.out { animation: ph-out var(--ph-fadeout, 850ms) ease-in forwards; }
@keyframes ph-out { to { opacity: 0; } }

/* 振り子モード：木製メトロノームの下半分に重ねる、フラットな丸 */
.pd-step { cursor: pointer; outline: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.pd-step-hit {
  fill: transparent;
  pointer-events: all;
}

.pd-step-keyline {
  fill: var(--pd-off-fill, #fffaf3);
  opacity: 0.9;
  pointer-events: none;
}

.pd-step-dot {
  pointer-events: none;
  fill: var(--pd-off-fill, #fffaf3);
  stroke: var(--pd-off-stroke, #c9b9a3);
  stroke-width: var(--pd-stroke, 1.2);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 80ms ease-out;
}

.pd-step.on .pd-step-dot {
  fill: var(--pd-on-fill, #ff8a3d);
  stroke: var(--pd-on-stroke, #d9560b);
}

/* 鳴っている丸：拍の丸モードと同じ見せ方（拡大＋濃いオレンジの枠＋オレンジの光）。塗りはON/OFFのまま */
.pd-step.current .pd-step-dot {
  stroke: var(--pd-current, #e8590c);
  transform: scale(var(--fl-scale, 1.45));
  filter: drop-shadow(0 0 var(--fl-ring, 4px) var(--step-glow))
          drop-shadow(0 0 calc(var(--fl-ring, 4px) * 2) var(--step-glow));
  transition: none;
}

.pd-step:focus-visible .pd-step-dot {
  stroke: var(--primary);
  stroke-width: 2.5;
}

/* 無音小節の間は、分割の丸を少し薄くする（進行の表示は続ける） */
.silent-measure .step-dial,
.silent-measure .pd-steps { opacity: 0.55; }

/* 小節内の拍の位置とは別に、1拍の中のステップ位置を表示 */
.status-line { flex-wrap: wrap; row-gap: 2px; }

.step-hint {
  margin: -6px 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
}

/* 分割数のカスタマイズ */
.subdiv {
  display: grid;
  gap: 8px;
}

.subdiv-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.subdiv-label {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  line-height: 1.3;
}

.subdiv-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.subdiv-label small {
  font-size: 0.75rem;
  color: var(--muted);
}

/* 2〜11 の分割数：スマホでは5個×2段、広い画面では1段 */
.division-picker {
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.custom-on .division-picker { display: grid; }

/* 2〜12：スマホでは6個＋5個の2段、広い画面では1段 */
.division-picker { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (min-width: 520px) {
  .division-picker { grid-template-columns: repeat(11, minmax(0, 1fr)); }
}

/* 振り子モード：「分割数をカスタマイズ」と2〜12の選択は拍の丸モードと同じ。
   木製メトロノームの上の丸は、カスタマイズがONのときだけ表示する（初期状態は非表示） */
.view-pendulum .step-hint { display: none; }
.pd-steps { display: none; }
.pd-show .pd-steps { display: inline; }

.division-picker button {
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.division-picker button[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-color);
}

/* ========== 周回リング（振り子用） ========== */
.pd-ring { display: none; pointer-events: none; }
.view-pendulum.pd-show .pd-ring { display: inline; }
.pd-ring { filter: drop-shadow(0 0 var(--pd-ring-glow, 2px) var(--pd-ring-color, #e8590c)); }

.pd-ring-c {
  --pd-eff: var(--pd-ring-op, 0.65);
  display: none;
  fill: none;
  stroke: var(--pd-ring-color, #e8590c);
  stroke-width: var(--pd-ring-bw, 2);
  opacity: var(--pd-eff);
  pointer-events: none;
}

.pd-ring-c.on { display: inline; animation: pd-ring-in var(--pd-ring-fade, 0ms) ease-out; }
.pd-ring-c.ghost.on { animation: none; }
.pd-ring-c.on.out,
.pd-ring-c.ghost.on.out { animation: pd-ring-out var(--pd-ring-fadeout, 850ms) ease-in forwards; }
.silent-measure .pd-ring-c { --pd-eff: calc(var(--pd-ring-op, 0.65) * 0.5); }

@keyframes pd-ring-in { from { opacity: 0; } to { opacity: var(--pd-eff); } }
@keyframes pd-ring-out { to { opacity: 0; } }

/* 拍子の選択：なし・2/4・3/4・4/4・6/8 の5つ */
#timeSig { grid-template-columns: repeat(5, 1fr); }
#timeSig button { padding: 0 2px; }

/* ========== ダブルモード（左右の手で別のリズム） ========== */
.toggle-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
}

.view-pendulum .toggle-row { padding-right: 0; }

.dials {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}

.dial-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dial-col-b,
.hand-ctl,
.dial-hand,
.double-bpm { display: none; }

.dial-hand {
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  pointer-events: none;
}

.dial-hand b { font-size: 1.15rem; }
.dial-hand small { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.hand-ctl {
  align-items: center;
  gap: 8px;
  flex-direction: column;
}

.hand-name { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.hand-ctl .stepper output { min-width: 58px; }
.hand-ctl .stepper button { width: 38px; }

.select {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 1rem;
  font-weight: 600;
}

/* ダブルモードのとき */
.double-on .dial-col-b { display: flex; }
.double-on .hand-ctl { display: flex; }
.double-on .dial-hand { display: flex; }
.double-on .dial { --dial: min(calc((100vw - 82px) / 2), 200px); } /* スマホでも2つの円がパネル内に収まる幅 */ /* 丸・強調・周回リングの大きさは通常と同じ */
.double-on .subdiv { display: none; }

/* ダブルモードのBPM：左右共通なので、2つの円の下に横並びで表示する（振り子表示と同じ見せ方） */
.double-on .double-bpm { display: flex; justify-content: center; }
.main-panel.double-on .bpm-ring {
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 8px;
  margin-top: 0;
  animation: none !important;
}

.main-panel.double-on .bpm-input {
  width: calc(var(--digits, 3) * 0.62em + 0.15em);
  font-size: clamp(3rem, 14vw, 3.75rem);
}

.main-panel.double-on .tempo-term { margin-top: 0; }

/* ダブルモード：BPM表示を円の外へ移したので、各ダイヤルに円の線を引く（通常モードのBPMの円と同じ見た目） */
.double-on .dial::before {
  content: "";
  position: absolute;
  inset: 15%;
  border: 6px solid var(--ring);
  border-radius: 50%;
  pointer-events: none;
}

/* ダブルモード：円のすぐ下の音色選択（円と同じ幅に収める）。
   選び方は <body data-sound-ui="arrows|chips|sheet|select"> で1つだけ表示する */
.hand-sound {
  width: 100%;
  max-width: 154px;
}

.hand-sound > * { display: none; }
[data-sound-ui="arrows"] .hand-sound .snd-arrows,
[data-sound-ui="combo"] .hand-sound .snd-arrows { display: grid; }
[data-sound-ui="chips"] .hand-sound .snd-chips { display: flex; }
[data-sound-ui="sheet"] .hand-sound .snd-open { display: flex; }
[data-sound-ui="select"] .hand-sound .snd-select { display: block; }

.snd-select { height: 40px; padding: 0 8px; font-size: 0.85rem; }

/* 前後ボタン：‹ 音色名 › */
.snd-arrows {
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  overflow: hidden;
}

.snd-step {
  border: 0;
  background: transparent;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--muted);
}

.snd-step:active { background: var(--primary-soft); }

.snd-name {
  border: 0;
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

/* 横スクロール：音色のボタンを横に並べ、指で送って選ぶ */
.snd-chips {
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 2px 2px 4px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent);
}

.snd-chips::-webkit-scrollbar { display: none; }

.snd-chip {
  flex: none;
  scroll-snap-align: center;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.snd-chip[aria-pressed="true"] {
  background: var(--step-on);
  border-color: var(--step-on-border);
  color: #fff;
}

/* 一覧から選ぶ：音色名のボタン → 押すと一覧パネル */
.snd-open {
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}

.snd-open::after { content: "⌄"; color: var(--muted); font-size: 1.1rem; line-height: 1; margin-top: -6px; }

.snd-sheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}

.snd-sheet[hidden] { display: none; }

.snd-sheet-panel {
  width: 100%;
  max-width: 520px;
  max-height: 72vh;
  overflow-y: auto;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
}

@media (min-width: 700px) {
  .snd-sheet { align-items: center; }
  .snd-sheet-panel { border-radius: 20px; }
}

.snd-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.snd-sheet-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 1.2rem;
}

.snd-sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.snd-sheet-grid button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 56px;
  padding: 8px 12px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  text-align: left;
  font-weight: 700;
  font-size: 0.9rem;
}

.snd-sheet-grid small { font-weight: 400; font-size: 0.72rem; color: var(--muted); }

.snd-sheet-grid button[aria-pressed="true"] {
  border-color: var(--step-on-border);
  background: color-mix(in srgb, var(--step-on) 14%, var(--surface));
}

/* ========== ダイヤルの表示スタイル（<body data-dial-style="…"> で切り替え） ==========
   classic＝以前の見た目（何も上書きしない）。ほかは、円の線・点の形・色・光り方を上書きする。
   点の数・位置・タップ範囲は共通。 */

/* --- ソフト：やわらかい影つきの丸と、うすく色づいた円の帯 --- */
[data-dial-style="soft"] .bpm-ring,
[data-dial-style="soft"] .double-on .dial::before {
  border-color: color-mix(in srgb, var(--step-on) 16%, transparent);
}

[data-dial-style="soft"] .step::after {
  border: 0;
  background: var(--step-off);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 10%, transparent),
              0 1px 4px color-mix(in srgb, var(--text) 16%, transparent);
}

[data-dial-style="soft"] .step[aria-pressed="true"]::after {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--step-on) 55%, #fff), var(--step-on) 60%, var(--step-on-border));
  box-shadow: 0 2px 8px var(--step-glow);
}

[data-dial-style="soft"] .step.current::after {
  box-shadow: 0 0 0 var(--fl-ring, 4px) var(--step-glow), 0 4px 16px var(--step-glow);
}

/* --- ミニマル：円の線を消し、細い点だけ。ONは塗り、OFFは細い輪郭 --- */
[data-dial-style="minimal"] .step { --dotf: 0.42; --dotf-head: 0.5; }
[data-dial-style="minimal"] .bpm-ring { border-color: transparent; }
[data-dial-style="minimal"] .double-on .dial::before { border-color: transparent; } /* 線は消すが、パルスの光は通常と同じく出す */

[data-dial-style="minimal"] .step::after {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--text) 28%, transparent);
}

[data-dial-style="minimal"] .step[aria-pressed="true"]::after {
  background: var(--step-on);
  border-color: var(--step-on);
}

[data-dial-style="minimal"] .step.current::after {
  box-shadow: 0 0 0 3px var(--step-glow);
}

/* --- グロー：細い円の線と、光るON。夜の練習（ダークモード）で映える --- */
[data-dial-style="glow"] .step { --dotf: 0.5; --dotf-head: 0.6; }
[data-dial-style="glow"] .bpm-ring,
[data-dial-style="glow"] .double-on .dial::before {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--step-on) 38%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--step-on) 22%, transparent),
              inset 0 0 18px color-mix(in srgb, var(--step-on) 12%, transparent);
}

[data-dial-style="glow"] .double-on .bpm-ring { box-shadow: none; }

[data-dial-style="glow"] .step::after {
  border: 0;
  background: color-mix(in srgb, var(--text) 22%, transparent);
}

[data-dial-style="glow"] .step[aria-pressed="true"]::after {
  background: var(--step-on);
  box-shadow: 0 0 6px var(--step-on), 0 0 16px var(--step-glow);
}

[data-dial-style="glow"] .step.current::after {
  background: color-mix(in srgb, var(--step-on) 40%, #fff);
  box-shadow: 0 0 10px #fff, 0 0 22px var(--step-on), 0 0 34px var(--step-glow);
}

/* --- 目盛り：点ではなく、外向きの短い棒。ONは長いオレンジ、OFFは短いグレー（時計やメーターのような見た目） --- */
[data-dial-style="ticks"] .bpm-ring { border-color: transparent; }
[data-dial-style="ticks"] .double-on .dial::before { border-color: transparent; }

[data-dial-style="ticks"] .step {
  /* 棒は円の中心から外へ向くので、点のときの「傾きを打ち消す回転」は付けない */
  transform: rotate(var(--a)) translateY(calc(var(--dial) * var(--dial-r, 0.43) * -1));
}

[data-dial-style="ticks"] .step::after,
[data-dial-style="ticks"] .step.head::after {
  inset: auto;
  left: 50%;
  top: 50%;
  width: calc(var(--hit, 36px) * 0.16 * var(--dot-scale, 1));
  height: calc(var(--hit, 36px) * 0.42 * var(--dot-scale, 1));
  margin: calc(var(--hit, 36px) * -0.21 * var(--dot-scale, 1)) 0 0 calc(var(--hit, 36px) * -0.08 * var(--dot-scale, 1));
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 24%, transparent);
}

[data-dial-style="ticks"] .step.head::after { width: calc(var(--hit, 36px) * 0.2 * var(--dot-scale, 1)); margin-left: calc(var(--hit, 36px) * -0.1 * var(--dot-scale, 1)); }

[data-dial-style="ticks"] .step[aria-pressed="true"]::after {
  height: calc(var(--hit, 36px) * 0.7 * var(--dot-scale, 1));
  margin-top: calc(var(--hit, 36px) * -0.35 * var(--dot-scale, 1));
  background: linear-gradient(to bottom, color-mix(in srgb, var(--step-on) 70%, #fff), var(--step-on));
}

[data-dial-style="ticks"] .step.current::after {
  transform: scale(1.35, 1.12);
  box-shadow: 0 0 0 3px var(--step-glow), 0 0 12px var(--step-glow);
}

/* ダブルモードのパルス：通常モードのBPMの円と同じ光り方を、左右の円の線に */
.double-on .dial.pulse::before { animation: pulse 220ms ease-out; }
.double-on .dial.pulse-accent::before { animation: pulse-accent 260ms ease-out; }
.double-on .dial.pulse-silent::before { animation: pulse-silent 220ms ease-out; }

/* ダブルモードの周回リング：通常とは別の値（--ph2-*、調整パネルで変更）。無いときはここの値（調整後の値） */
.double-on .playhead {
  --ph-op: var(--ph2-op, 0.4);
  --ph-bw: var(--ph2-bw, 1.5px);
  --ph-size: var(--ph2-size, 30px);
  --ph-glow: var(--ph2-glow, 2px);
  --ph-fade: var(--ph2-fade, 0ms);
  --ph-fadeout: var(--ph2-fadeout, 850ms);
}

/* ダブルモードの「鳴った丸の強調」：通常とは別の値（--fl2-*、調整パネルで変更）。無いときはここの値（調整後の値） */
.double-on .step {
  --fl-scale: var(--fl2-scale, 1.3);
  --fl-ring: var(--fl2-ring, 2px);
}

/* ダブルモード：音色の下の、左右それぞれの音量 */
.hand-vol {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 3.2em;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 154px;
}

.hand-vol-icon { font-size: 0.9rem; line-height: 1; }
.hand-vol .slider { height: 28px; }
.hand-vol output { font-size: 0.78rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* 表示モードのタブ（通常／振り子／ダブル）：1列の3つ。選択中は白地に青文字で浮き上がる */
.mode-tabs {
  align-self: center;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 右上の歯車ボタン（振り子の調整）と重ならないよう、両側を空けて中央に置く */
  width: min(calc(100% - 96px), 330px);
  padding: 4px;
  border-radius: 14px;
}

.mode-tabs button {
  height: 40px;
  font-size: 0.98rem;
}

.mode-tabs button[aria-pressed="true"] { font-weight: 800; }

/* 音と表示の同期調整 */
.sync-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.sync-foot small { color: var(--muted); font-size: 0.75rem; line-height: 1.4; }

.mini-btn {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 0.85rem;
  font-weight: 600;
}

/* 前後ボタン＋一覧パネル：名前の部分を押すと一覧が開くので、小さな ⌄ を添えて押せると分かるようにする */
[data-sound-ui="combo"] .snd-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

[data-sound-ui="combo"] .snd-name::after {
  content: "⌄";
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  margin-top: -5px;
}

.snd-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-sound-ui="combo"] .snd-name::after { flex: none; }