:root {
  --page-bg: #f4f1ec;
  --panel-bg: #ffffff;
  --text: #2a251f;
  --muted: #7d7469;
  --line: #e2ddd4;
  --accent: #b4530f;

  --wood-top: #7a5333;
  --wood-mid: #5c3b24;
  --wood-bottom: #462e1c;
  --nut: #ece4d3;
  --nut-area: #e6dece;
  --fret-wire: #b9b3a5;
  --string: #ddd8cc;

  --correct: #2e7d32;
  --wrong: #c62828;
  --root: #1565c0;

  --label-w: 52px;
  --open-w: 60px;
  /* 弦の間隔。1弦の上・6弦の下の余白はこの半分になる */
  --row-h: 26px;
  --number-h: 30px;
  /* 1弦の上・6弦の下にも板がはみ出す分 */
  --board-pad: 4px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  /* ダブルタップズームによるタップ反応の遅延を防ぐ */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

.app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

/* ---------- ヘッダー ---------- */

.header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.title {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.stats {
  display: flex;
  gap: 20px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.stat {
  font-weight: 600;
}

/* ---------- 出題エリア ---------- */

.main {
  padding: 28px 0 8px;
}

.prompt {
  text-align: center;
  min-height: 128px;
}

.prompt-question {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}

.prompt-note {
  font-size: 56px;
  line-height: 1.1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.prompt-note:empty {
  display: none;
}

.prompt-lead {
  font-size: 18px;
  font-weight: 600;
}

.prompt-remaining {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- 出題設定（スタート前のみ表示） ---------- */

.settings {
  display: none;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 20px 18px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.app[data-state='idle'] .settings {
  display: block;
}

/* 設定画面では出題文が空になるため、その分の高さを詰める */
.app[data-state='idle'] .prompt {
  min-height: 0;
  margin-bottom: 18px;
}

.settings-title {
  margin: 0 0 12px;
  font-size: 14px;
  text-align: center;
}

.setting-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
}

/*
 * display を指定した要素では hidden 属性が効かなくなるため、明示的に打ち消す。
 * （hidden は display: none 相当だが、後から書いた display: flex に負ける）
 */
.setting-row[hidden] {
  display: none;
}

.setting-label {
  flex: none;
  width: 72px;
  font-size: 12px;
  color: var(--muted);
}

.setting-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.range-field select {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.range-sep {
  color: var(--muted);
  font-size: 13px;
}

.option {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.option input:disabled,
.option input:disabled + * {
  cursor: default;
}

.option:has(input:disabled) {
  color: var(--muted);
  cursor: default;
}

/* 変則チューニングは使う人が限られるため、既定では畳んでおく */
.tuning {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/*
 * display を指定すると summary の既定マーカーが消えるため、自前で三角を描く。
 * 畳めることが見た目で分からないと気づかれないため。
 */
.tuning-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.tuning-summary::-webkit-details-marker {
  display: none;
}

.tuning-summary::before {
  content: '';
  flex: none;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 150ms ease;
}

.tuning[open] .tuning-summary::before {
  transform: rotate(90deg);
}

.tuning-current {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.tuning-strings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 4px 0 2px;
}

.tuning-field {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tuning-field-label {
  font-size: 12px;
  color: var(--muted);
}

.tuning-field select {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.settings-summary {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.settings-summary.is-warning {
  color: var(--wrong);
  font-weight: 600;
}

/* ---------- リザルト ---------- */

.result {
  display: none;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 24px 24px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.app[data-state='result'] .prompt {
  display: none;
}

.app[data-state='result'] .result {
  display: block;
}

/* 結果画面ではスコアに集中させるため指板を出さない */
.app[data-state='result'] .board-area {
  display: none;
}

.result-title {
  margin: 0 0 16px;
  font-size: 16px;
  text-align: center;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 0;
}

.result-item {
  text-align: center;
  padding: 12px 8px;
  background: var(--page-bg);
  border-radius: 8px;
}

.result-item.is-primary {
  background: #fdf1e6;
}

.result-item dt {
  font-size: 12px;
  color: var(--muted);
}

.result-item dd {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.result-item.is-primary dd {
  color: var(--accent);
}

/* タイムアタックの主役は正答率ではなくクリア数なので、強調を入れ替える */
.app[data-mode='timeattack'] #result-count-item {
  background: #fdf1e6;
}

.app[data-mode='timeattack'] #result-count-item dd {
  color: var(--accent);
}

.app[data-mode='timeattack'] #result-main-item {
  background: var(--page-bg);
}

.app[data-mode='timeattack'] #result-main-item dd {
  color: var(--text);
}

.result-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.share-title {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted);
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/*
 * 各サービスのロゴは公式配布物をそのまま載せる（出所は assets/README.md）。
 * ブランド色で塗らず白地に統一するのは、公式ボタンとの誤認を避けるため。
 * padding がロゴ周囲の余白を兼ねる。
 */
.share-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 92px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.share-chip[hidden] {
  display: none;
}

.option[hidden] {
  display: none;
}

.share-icon {
  display: block;
  flex: none;
}

@media (hover: hover) {
  .share-chip:hover {
    background: var(--page-bg);
  }
}

.share-chip:active {
  background: #e9e4db;
}

.share-note {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--muted);
}

.share-note:empty {
  display: none;
}

/* ---------- 指板 ---------- */

.board-area {
  margin-top: 28px;
}

.fretboard {
  position: relative;
  display: grid;
  /* 列は JS で組み立てる（弦ラベル / 開放弦 / 各フレット） */
  /* 行数は弦の本数に応じて JS で設定する */
  grid-template-rows: repeat(6, var(--row-h)) var(--number-h);
  width: 100%;
  /* 大画面で間延びさせないための上限 */
  max-width: 700px;
  margin: 0 auto;
}

.board-bg,
.nut-bg {
  position: absolute;
  top: calc(var(--board-pad) * -1);
  bottom: calc(var(--number-h) - var(--board-pad));
  left: var(--label-w);
}

/* 左利きは弦ラベルが右端に来るので、下地も左右を入れ替える */
.fretboard.is-lefty .board-bg,
.fretboard.is-lefty .nut-bg {
  left: 0;
  right: var(--label-w);
}

.board-bg {
  right: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--wood-top), var(--wood-mid) 55%, var(--wood-bottom));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}

.nut-bg {
  width: var(--open-w);
  border-right: 6px solid var(--nut);
  border-radius: 5px 0 0 5px;
  background: var(--nut-area);
}

.fretboard.is-lefty .nut-bg {
  left: auto;
  border-right: 0;
  border-left: 6px solid var(--nut);
  border-radius: 0 5px 5px 0;
}

/* フレットワイヤーとナットは、低音フレット側（左利きでは右）に引く */
.fretboard.is-lefty .cell {
  border-right: 0;
  border-left: 2px solid var(--fret-wire);
}

.fretboard.is-lefty .cell.is-open {
  border-left: 6px solid var(--nut);
}

.fretboard.is-lefty .string-label {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 10px;
}

.string-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  font-size: 12px;
  color: var(--muted);
}

.cell {
  position: relative;
  z-index: 1;
  appearance: none;
  padding: 0;
  border: 0;
  border-right: 2px solid var(--fret-wire);
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
  /* 列が狭いとき、音名が隣のマスへはみ出さないようにする */
  overflow: hidden;
}

/* 弦 */
.cell::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: var(--string-w, 2px);
  transform: translateY(-50%);
  /* 弦はセルの背景より上・音名ラベルより下に描く */
  z-index: -1;
  background: var(--string);
  opacity: 0.7;
  pointer-events: none;
}

/* ナット側は下地が明るいため、弦を暗い色で描く */
.cell.is-open::before {
  background: #a89e8b;
}

.cell.s1 { --string-w: 1px; }
.cell.s2 { --string-w: 1.5px; }
.cell.s3 { --string-w: 2px; }
.cell.s4 { --string-w: 2.5px; }
.cell.s5 { --string-w: 3px; }
.cell.s6 { --string-w: 3.5px; }
.cell.s7 { --string-w: 4px; }

/* ポジションマーク。セルより下に敷き、正解・誤答の色で隠れるようにする */
.inlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.inlay::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

/* 開放弦（ナットの左側） */
.cell.is-open {
  background: var(--nut-area);
  border-right: 6px solid var(--nut);
  color: var(--text);
}

/*
 * ホバー効果はマウスがある環境に限定する。
 * タッチ端末では :hover がタップ後に残り、判定済みでないセルが選択中に見えてしまうため。
 * 判定済みのセルは、ホバーで正誤の色が戻らないよう除外する。
 */
@media (hover: hover) {
  .cell:not(:disabled):not(.is-correct):not(.is-wrong):not(.is-root):hover {
    background-color: rgba(255, 255, 255, 0.16);
  }

  .cell.is-open:not(:disabled):not(.is-correct):not(.is-wrong):not(.is-root):hover {
    background-color: #d9d0bd;
  }
}

/* タッチ端末でも押した瞬間の手応えが出るようにする */
.cell:not(:disabled):not(.is-correct):not(.is-wrong):not(.is-root):active {
  background-color: rgba(255, 255, 255, 0.3);
}

.cell.is-open:not(:disabled):not(.is-correct):not(.is-wrong):not(.is-root):active {
  background-color: #cec3ac;
}

.cell:focus-visible {
  outline: 3px solid #1e88e5;
  outline-offset: -3px;
}

.cell.is-correct,
.cell.is-correct.is-open {
  background-color: var(--correct);
  color: #fff;
}

.cell.is-wrong,
.cell.is-wrong.is-open {
  background-color: var(--wrong);
  color: #fff;
}

/* 相対音モードで基準として示すルート音。正誤とは別物と分かる色にする */
.cell.is-root,
.cell.is-root.is-open {
  background-color: var(--root);
  color: #fff;
}

.fretboard.is-locked .cell {
  cursor: default;
}

/*
 * 出題対象外の弦。opacity で薄くすると板が透けて明るくなり「無効」に見えないため、
 * 暗いベールを重ねて沈める。
 */
.cell.is-muted::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(18, 12, 6, 0.55);
  pointer-events: none;
}

.string-label.is-muted {
  opacity: 0.4;
}

/*
 * クリア後・リザルトでは回答結果を見せる場面なので彩度は落とさない。
 * グレーアウトはプレイ開始前だけに限定する。
 */
.app[data-state='idle'] .fretboard {
  filter: grayscale(0.85);
  opacity: 0.55;
}

.fret-number {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 列が多いときは 1 マスが狭くなるため、はみ出さないよう文字を詰める */
.fretboard.is-dense .cell {
  font-size: 10px;
}

.fretboard.is-dense .fret-number {
  font-size: 10px;
}

/* ---------- フッター ---------- */

/*
 * 設定パネルと指板で縦に長くなり、端末によってはボタンが画面外に出るため
 * 画面下端に貼り付ける。最下部まで送ると通常の位置に戻り、著作者表示が出る。
 */
.footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding: 10px 0;
  background: var(--page-bg);
}

/* 「設定を変える」は結果画面だけに出す */
.secondary-button {
  display: none;
  padding: 13px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.app[data-state='result'] .secondary-button {
  display: block;
}

@media (hover: hover) {
  .secondary-button:hover {
    background: var(--page-bg);
  }
}

.primary-button {
  min-width: 180px;
  padding: 13px 24px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms ease;
}

@media (hover: hover) {
  .primary-button:not(:disabled):hover {
    background: #9c4409;
  }
}

.primary-button:not(:disabled):active {
  background: #8c3d08;
}

.primary-button:disabled {
  background: #ded9d1;
  color: #948b7f;
  cursor: default;
}

/* ---------- スマートフォン ---------- */

/*
 * 指板を 0〜7 フレットに絞ってあるため、横向きのまま画面幅に収まる。
 * 弦ラベルと開放弦列を詰めてフレット列の幅を稼ぎ、行の高さでタップ領域を確保する。
 * 375px 幅で 1 マスあたり約 42 × 48px。
 */
@media (max-width: 600px) {
  :root {
    --label-w: 30px;
    --open-w: 34px;
    --row-h: 32px;
    --number-h: 26px;
    --board-pad: 3px;
  }

  .app {
    padding: 14px 10px 24px;
  }

  .title {
    font-size: 15px;
  }

  .stats {
    gap: 12px;
    font-size: 12px;
  }

  .main {
    padding: 18px 0 4px;
  }

  .prompt {
    min-height: 96px;
  }

  .prompt-question {
    gap: 8px;
  }

  .prompt-note {
    font-size: 40px;
  }

  .prompt-lead {
    font-size: 15px;
  }

  .prompt-remaining {
    margin-top: 8px;
    font-size: 13px;
  }

  .result {
    padding: 16px 14px 18px;
  }

  .result-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* 5 項目だと 2 列で 1 つ余るため、正答率を全幅にして締める */
  .result-item.is-primary {
    grid-column: span 2;
  }

  .result-item dd {
    font-size: 20px;
  }

  .board-area {
    margin-top: 18px;
  }

  .string-label {
    padding-right: 5px;
    font-size: 10px;
  }

  .fret-number {
    font-size: 10px;
  }

  .cell {
    border-right-width: 1px;
    font-size: 12px;
  }

  .cell.is-open,
  .nut-bg {
    border-right-width: 4px;
  }

  .footer {
    margin-top: 20px;
  }

  .primary-button {
    /* 「設定を変える」と並ぶ場合も破綻しないよう、幅ではなく flex で伸ばす */
    flex: 1;
    padding: 15px 24px;
    font-size: 16px;
  }

  .secondary-button {
    flex: none;
    padding: 15px 16px;
  }

  .settings {
    padding: 14px 14px 16px;
  }

  /* ラベルと選択肢を縦に積み、選択肢の折り返しを減らす */
  .setting-row {
    flex-direction: column;
    gap: 6px;
  }

  .setting-label {
    width: auto;
  }
}

/* ---------- 著作者表示 ---------- */

.site-footer {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.credit {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.credit-sep {
  margin: 0 8px;
  opacity: 0.5;
}

.credit-link {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .credit-link:hover {
    color: var(--accent);
  }
}

/* ---------- ユーティリティ ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}