/* ============================================================
   相対音感 — 譜面ミニマル
   生成り #F7F6F2 / 墨 #1A1A18 / 朱 #C9432F / 五線 #C9C4B8
   ============================================================ */
:root{
  --paper:#F7F6F2;
  --ink:#1A1A18;
  --ink-soft:#6B675E;
  --vermilion:#C9432F;
  --staff:#C9C4B8;
  --line:#DDD8CC;
  /* 手書き（シャープペン風）フォント。読み込み前はゴシックで表示 */
  --serif:"Zen Kurenaido","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
}

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

body{
  background:var(--paper) url("../img/paper.jpg");
  background-size:720px;
  color:var(--ink);
  font-family:var(--serif);
  font-size:15px;
  line-height:1.8;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

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

/* 画像の長押し保存・右クリック保存・ドラッグを防ぐ（すべて装飾用のため） */
img{
  pointer-events:none;
  -webkit-touch-callout:none;
  user-select:none;
  -webkit-user-select:none;
}

button{
  font-family:inherit;
  letter-spacing:inherit;
  color:inherit;
  background:none;
  border:none;
  cursor:pointer;
  touch-action:manipulation;           /* ダブルタップでの拡大を防ぐ */
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
button:focus-visible{outline:2px solid var(--vermilion); outline-offset:3px}

.screen{display:none}
.screen.active{display:block; animation:fadein .5s ease}
@keyframes fadein{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

.container{max-width:680px; margin:0 auto; padding:0 24px 80px}
.container.narrow{max-width:480px; padding-top:24px}
.container.center{text-align:center}

/* ---------- ホーム：ヒーロー ---------- */
.hero{position:relative; max-height:340px; overflow:hidden; margin-bottom:36px}
.hero img{width:100%; display:block; object-fit:cover; max-height:340px}
/* 文字の載る左上を生成りに戻すグラデーション（朝もや） */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom right,
    rgba(247,246,242,.95) 0%,
    rgba(247,246,242,.62) 30%,
    rgba(247,246,242,0) 62%);
  pointer-events:none;
}
.hero-title{
  position:absolute; top:16%; left:8%; z-index:2;
  color:var(--ink);
}
.hero-title h1{
  font-size:clamp(30px,6vw,44px);
  font-weight:600;
  letter-spacing:.3em;
  /* 紙ににじむ発光で輪郭を確保 */
  text-shadow:
    0 0 6px var(--paper),
    0 0 14px var(--paper),
    0 0 26px var(--paper);
}
.hero-title p{
  font-size:12px;
  letter-spacing:.32em;
  color:var(--ink-soft);
  margin-top:6px;
  text-shadow:
    0 0 6px var(--paper),
    0 0 12px var(--paper);
}

/* ---------- ゲーム画面（幕・ステージ・客席の1画面ホーム／スクロールなし） ---------- */
.game-screen{
  height:100dvh;
  overflow:hidden;
  display:flex; flex-direction:column;
  padding:calc(14px + env(safe-area-inset-top)) 20px 0;
  position:relative;
}
/* 「他の何か」を置く左上の自由スペース（いまはタイトルを仮置き） */
.free-space{
  flex:3; min-height:60px;
  display:flex; align-items:center; justify-content:center;
  margin-top:60px; /* 画面固定になった gs-top の高さぶん、場所を空けておく */
}
/* 下部の空白 */
/* 舞台の前面（縁の板の厚み）。ここから下は一段低い床、という段差を示す */
.stage-edge{
  margin:0 -20px;
  height:9px;
  border-top:2px solid #4A4742;
  border-bottom:1.5px solid #4A4742;
  background:repeating-linear-gradient(90deg,
    rgba(74,71,66,.18) 0 1.5px, transparent 1.5px 10px);
  position:relative; z-index:1;
}
.blank-space{
  flex:2; min-height:30px; display:flex; align-items:flex-end;
  position:relative;
}
/* 段差の影: 舞台の縁のすぐ下が濃く、下にいくほど透明になるグラデーション */
.blank-space::before{
  content:"";
  position:absolute; top:0; left:-20px; right:-20px; height:38px;
  background:linear-gradient(to bottom, rgba(74,71,66,.13), rgba(74,71,66,0));
  pointer-events:none;
}
.props{width:100%; height:auto; display:block; max-height:100%; position:relative}
#prop-box{cursor:pointer}
#prop-box.peek{
  transform-box:fill-box;
  transform-origin:50% 100%;
  animation:box-peek 1.4s ease-in-out;
}
@keyframes box-peek{
  0%{transform:scaleY(1)}
  15%{transform:scaleY(.25)}
  30%,55%{transform:scaleY(.15)}
  75%{transform:scaleY(1.08)}
  90%{transform:scaleY(.96)}
  100%{transform:scaleY(1)}
}
@media (prefers-reduced-motion: reduce){
  #prop-box.peek{animation:none}
}
.stage{
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px;
  position:relative; z-index:1;
}
.podium{
  width:100%; height:auto; display:block;
  transition:transform .1s;
  overflow:visible;   /* ヘリは舞台の上空（viewBox外）を飛ぶ */
}
/* 開演アニメのスプライト */
#heli-sprite, #rope-sprite{
  transform-box:fill-box;
  will-change:transform;
}
#heli-sprite{transition:transform 1.9s cubic-bezier(.25,.7,.35,1)}
#heli-sprite.offL{transform:translate(-460px, 50px)}
#heli-sprite.offR{
  transition:transform 1.7s cubic-bezier(.55,.05,.9,.4);
  transform:translate(480px, -70px);
}
#heli-sprite.hover{animation:heli-bob 1.5s ease-in-out infinite}
@keyframes heli-bob{
  0%, 100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
#rope-sprite{transition:transform 1.6s cubic-bezier(.3,.6,.4,1)}
#rope-sprite.drop{transform:translateY(163px)}
.gs-main{margin:0 -20px; padding:0; position:relative; z-index:8}
.gs-main:active .podium{transform:scale(.985)}
.conductor-group{
  cursor:pointer;
  transform-box:fill-box; transform-origin:50% 100%;
  transition:transform .12s;
}
.conductor-group:active{transform:scale(.94)}

/* 画面（ビューポート）基準で固定。free-space側にその高さぶんのmargin-topを確保してある */
.gs-top{
  position:fixed;
  top:calc(14px + env(safe-area-inset-top));
  left:20px; right:20px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  z-index:10;
}
.lv-badge{
  border:1px solid var(--ink); border-radius:999px;
  padding:7px 16px;
  background:rgba(255,255,255,.6);
  font-family:var(--serif);
  font-size:13px; letter-spacing:.1em; font-weight:600;
  transition:background .2s, color .2s;
}
.lv-badge:active{background:var(--ink); color:var(--paper)}
.gs-icons{display:flex; gap:12px}
.gs-icon{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:0;
}
.gs-icon .ic{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .1s;
}
.gs-icon .ic img{
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 2px 3px rgba(74,71,66,.2));
}
.gs-icon:active .ic{transform:scale(.87)}
.gs-icon small{
  font-size:9px; letter-spacing:.12em; color:var(--ink-soft);
}

.help-block p{margin:0 0 14px; font-size:14px}
.help-block b{font-weight:600; color:var(--vermilion)}
.gs-title{
  text-align:center;
  font-family:var(--serif);
  font-size:24px; font-weight:600; letter-spacing:.4em;
  margin:0;
  color:var(--ink);
}
.gs-title-img{
  height:min(24vh, 190px);
  width:auto;
  display:block;
  pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(74,71,66,.15));
  transform:rotate(-90deg);
}
.gs-main{background:transparent; padding:4px}
.settings-now{margin:-6px 0 8px; text-align:center}
.help-note{font-size:12.5px; color:var(--ink-soft); margin-top:6px}

/* ---------- クイックスタート（段差の壁に掲げたプレート／画面基準で固定） ---------- */
.btn-quickstart{
  position:fixed;
  right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:10;
  display:flex; align-items:baseline; gap:8px;
  white-space:nowrap;
  background:rgba(247,246,242,.94);
  border:1.5px solid var(--vermilion);
  border-radius:6px;
  padding:8px 16px;
  box-shadow:0 2px 5px rgba(74,71,66,.18);
  transition:background .15s, transform .1s;
}
.btn-quickstart .qs-label{
  font-size:11px; font-weight:600; letter-spacing:.14em;
  color:var(--vermilion);
}
.btn-quickstart .qs-desc{
  font-size:10px; letter-spacing:.06em;
  color:var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; max-width:38vw;
}
.btn-quickstart:active{background:var(--vermilion); transform:scale(.96)}
.btn-quickstart:active .qs-label,
.btn-quickstart:active .qs-desc{color:var(--paper)}
.btn-quickstart[hidden]{display:none}

/* ---------- 数字サマリー ---------- */
.home-stats{
  display:flex; justify-content:center; align-items:center;
  gap:28px; margin:8px 0 36px;
}
.hs-item{display:flex; flex-direction:column; align-items:center; min-width:72px}
.hs-num{
  font-size:30px; font-weight:600;
  font-variant-numeric:tabular-nums;
  line-height:1.3;
}
.hs-label{font-size:11px; letter-spacing:.24em; color:var(--ink-soft)}
.hs-divider{width:1px; height:36px; background:var(--line)}

/* ---------- 五線の区切り（ホームの舞台の床と同トーンの鉛筆グレー） ---------- */
.staff-divider{
  height:25px; margin:40px 0;
  background:repeating-linear-gradient(to bottom,
    rgba(107,103,94,.4) 0, rgba(107,103,94,.4) 1px, transparent 1px, transparent 6px);
}

.section-title{
  font-size:20px; font-weight:600; letter-spacing:.2em;
  text-align:center; margin-bottom:28px;
}
.sub-title{
  font-size:14px; font-weight:600; letter-spacing:.2em;
  margin:36px 0 16px; color:var(--ink-soft);
}

/* ---------- モードカード ---------- */
.mode-card{
  border:1px solid var(--ink);
  padding:26px 28px;
  margin-bottom:20px;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  background:rgba(255,255,255,.35);
}
.mode-card-text h3{font-size:19px; font-weight:600; letter-spacing:.18em; margin-bottom:6px}
.mode-card-text p{font-size:13px; color:var(--ink-soft)}

.btn-start{
  border:1px solid var(--ink);
  padding:12px 26px;
  font-size:14px; letter-spacing:.24em;
  white-space:nowrap;
  transition:background .2s, color .2s;
}
.btn-start:hover{background:var(--ink); color:var(--paper)}
.btn-start:active{background:var(--vermilion); border-color:var(--vermilion); color:var(--paper)}

.mode-card-dragon{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
.mode-card-dragon .mode-card-text p{color:rgba(247,246,242,.62)}
.mode-card-dragon .btn-start{
  border-color:var(--paper);
  color:var(--paper);
}
.mode-card-dragon .btn-start:hover{background:var(--paper); color:var(--ink)}
.mode-card-dragon .btn-start:active{background:var(--vermilion); border-color:var(--vermilion); color:var(--paper)}

/* 折りたたみ設定 */
.settings{margin-top:12px}
.settings summary{
  list-style:none; cursor:pointer;
  display:inline-block;
  font-size:12.5px; letter-spacing:.12em;
  color:var(--ink-soft);
  border-bottom:1px solid var(--staff);
  padding-bottom:2px;
  user-select:none; -webkit-user-select:none;
}
.settings summary::-webkit-details-marker{display:none}
.settings summary::before{content:"▸ "}
.settings[open] summary::before{content:"▾ "}

.level-select{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; align-items:center}
.opt-row{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
.opt-row .toggle-btn{margin-top:0}
.opt-label{
  font-size:11px; letter-spacing:.2em; color:var(--ink-soft);
  min-width:2.6em;
}
.threshold-line{
  margin-top:12px;
  font-size:13px; letter-spacing:.08em;
  color:var(--ink);
}
.threshold-line span{color:var(--vermilion); font-weight:600; font-variant-numeric:tabular-nums}
.threshold-note{font-size:10.5px; color:var(--ink-soft) !important; font-weight:400 !important; margin-left:6px}
.stats-threshold{text-align:center; margin-top:24px}
.level-btn{
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:5px 14px;
  font-size:12.5px; letter-spacing:.1em;
  color:var(--ink-soft);
  transition:all .2s;
}
.level-btn small{font-size:10px; margin-left:4px}
.level-btn.selected{
  border-color:var(--vermilion);
  color:var(--vermilion);
}
.level-btn:active{transform:scale(.95)}

.toggle-btn{
  display:inline-block;
  margin-top:10px;
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:5px 14px;
  font-size:12.5px; letter-spacing:.1em;
  color:var(--ink-soft);
  transition:all .2s;
}
.toggle-btn:active{transform:scale(.95)}
.toggle-btn small{font-size:10px; margin-left:4px}
.toggle-btn.selected{border-color:var(--vermilion); color:var(--vermilion)}

.btn-text{
  display:block; margin:0 auto;
  font-size:13px; letter-spacing:.18em;
  color:var(--ink-soft);
  border-bottom:1px solid var(--staff);
  padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.btn-text:hover{color:var(--vermilion); border-color:var(--vermilion)}
.btn-text.small{display:inline; margin:0}
#btn-reload{margin-top:22px}
#btn-onboard-replay{margin:18px auto 4px}

/* ---------- 稽古画面 ---------- */
.training-top{
  position:sticky; top:0; z-index:15;
  background:var(--paper) url("../img/paper.jpg");
  background-size:720px;
  margin:-24px -24px 20px;
  padding:20px 24px 10px;
}
.training-top .training-head{margin-bottom:14px}
.training-top .dots{margin:0}

.training-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:36px;
}
.training-progress{
  font-size:12px; letter-spacing:.28em; color:var(--ink-soft);
}

.dots{
  display:flex; justify-content:center; gap:11px;
  margin:-10px 0 22px;
  font-size:13px; line-height:1;
}
.dots span{color:var(--staff)}
.dots .ok{color:var(--vermilion)}
.dots .ng{color:var(--ink)}

.staff-area{padding:20px 12px 8px}
.staff{
  position:relative;
  height:49px; /* 5本線: 0,12,24,36,48 */
  /* 鉛筆で引いたような薄いグレー（ホームの舞台の床の線と同トーン） */
  background:repeating-linear-gradient(to bottom,
    rgba(107,103,94,.55) 0, rgba(107,103,94,.55) 1px, transparent 1px, transparent 12px);
}
.staff-note{
  position:absolute; left:50%;
  width:16px; height:11px;
  margin-left:-8px; margin-top:-5px;
  border-radius:50%;
  background:var(--ink);
  transform:rotate(-16deg);
}
.staff-note::after{
  content:""; position:absolute;
  right:0; bottom:4px;
  width:1.5px; height:32px;
  background:var(--ink);
}
.staff-note.sharp::before{
  content:"♯"; position:absolute;
  left:-16px; top:-4px;
  font-size:15px;
  transform:rotate(16deg);
}
.staff-ledger{
  position:absolute; left:50%;
  width:28px; height:1px;
  margin-left:-14px;
  background:rgba(107,103,94,.55);
}

.question-text{
  text-align:center;
  font-size:14px; letter-spacing:.16em;
  color:var(--ink-soft);
  margin:24px 0 28px;
}

.play-row{text-align:center; margin-bottom:32px}
.btn-play{
  width:68px; height:68px; border-radius:50%;
  background:var(--ink); color:var(--paper);
  font-size:20px;
  transition:opacity .2s, transform .1s;
}
.btn-play:hover{opacity:.85}
.btn-play:active{transform:scale(.95)}
.play-hint{
  display:block; margin-top:10px;
  font-size:11px; letter-spacing:.24em; color:var(--ink-soft);
}
.silent-hint{
  display:none;
  margin-top:8px;
  font-size:10.5px; letter-spacing:.08em; color:var(--staff);
}
/* タッチ端末でのみ表示（iPhoneのマナーモード対策） */
@media (hover:none) and (pointer:coarse){
  .silent-hint{display:block}
}

/* ---------- 回答ボタン（鉛筆画タッチ: 独立した角丸カードを並べる） ---------- */
.btn-replay-bar{display:none}

.answers{
  display:grid;
  gap:7px;
}
.answers.cols-2{grid-template-columns:repeat(2,1fr)}
.answers.cols-3{grid-template-columns:repeat(3,1fr)}
.answers.cols-4{grid-template-columns:repeat(4,1fr)}
.answers.cols-5{grid-template-columns:repeat(5,1fr)}
.answers.cols-7{grid-template-columns:repeat(7,1fr)}
.answers.cols-6{grid-template-columns:repeat(6,1fr)}
.answer-btn{
  padding:17px 0 15px;
  font-size:15px;
  border:1.5px solid var(--ink-soft);
  border-radius:9px;
  transition:background .15s, color .15s, transform .08s, border-color .15s;
  position:relative;
}
.answers.cols-6 .answer-btn{padding:14px 0 12px}
.answer-btn small{display:block; font-size:9.5px; color:var(--ink-soft); letter-spacing:.05em}
.answer-btn:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.answer-btn:hover small{color:var(--paper)}
.answer-btn:active{transform:scale(.95)}
.answer-btn:disabled{cursor:default; opacity:.45}
.answer-btn:disabled:hover{background:transparent; color:var(--ink); border-color:var(--ink-soft)}
.answer-btn.chosen-correct{background:var(--vermilion); color:var(--paper); opacity:1; border-color:var(--vermilion)}
.answer-btn.chosen-correct small{color:var(--paper)}
.answer-btn.chosen-wrong{background:var(--ink); color:var(--paper); opacity:1; border-color:var(--ink)}
.answer-btn.chosen-wrong small{color:var(--paper)}
.answer-btn.reveal{color:var(--vermilion); opacity:1; font-weight:600; border-color:var(--vermilion)}

/* 十二音: ピアノ配列（上段=黒鍵、下段=白鍵）。実物の鍵盤に寄せ角丸なし・隙間なし */
.answers.piano{
  grid-template-columns:repeat(14,1fr);
  grid-template-rows:auto auto;
  gap:5px;
}
.answers.piano .answer-btn{
  border:1px solid var(--ink);
  border-radius:3px;
  padding:15px 0 13px;
  font-size:12.5px;
}
.answers.piano .key-black{
  background:var(--ink); color:var(--paper);
}
.answers.piano .key-black:hover{background:var(--vermilion); border-color:var(--vermilion)}
.answers.piano .key-black:disabled:hover{background:var(--ink); color:var(--paper)}
.answers.piano .key-black.chosen-correct{background:var(--vermilion); border-color:var(--vermilion)}
.answers.piano .key-black.reveal{color:var(--paper); background:var(--vermilion); border-color:var(--vermilion)}
.answers.piano .key-white:disabled:hover{background:transparent}

/* ---------- 判定 ---------- */
.feedback{
  display:flex; justify-content:center; align-items:center; gap:10px;
  min-height:92px; margin-top:28px;
}
.feedback-face{
  width:82px; height:auto;
  pointer-events:none;
  filter:drop-shadow(0 3px 4px rgba(74,71,66,.15));
}
.feedback-face[hidden]{display:none}
.feedback-mark{
  font-size:40px; line-height:1;
  font-weight:600;
}
.feedback-mark.correct{color:var(--vermilion)}
.feedback-mark.wrong{color:var(--ink)}
.feedback-text{font-size:14px; letter-spacing:.12em; color:var(--ink-soft)}
.feedback-hint{
  text-align:center;
  font-size:12.5px; letter-spacing:.08em;
  color:var(--vermilion);
  margin-top:2px;
}

/* 声の稽古 */
.sing-display{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin:4px 0 24px;
}
.sing-display[hidden]{display:none}
.sing-label{font-size:11px; letter-spacing:.24em; color:var(--ink-soft)}
.sing-note{
  font-size:30px; font-weight:600; letter-spacing:.1em;
  min-height:1.4em;
  font-variant-numeric:tabular-nums;
}

/* ---------- カーテンコール（指揮者のお辞儀） ---------- */
.curtain-call{display:flex; justify-content:center; margin:8px 0 -6px}
.bow-figure{
  width:52px; height:auto; display:block;
  transform-box:fill-box;
  transform-origin:50% 92%;
}
.bow-figure.bow-anim{animation:conductor-bow 1.3s ease-in-out}
@keyframes conductor-bow{
  0%{transform:rotate(0)}
  32%,55%{transform:rotate(26deg)}
  100%{transform:rotate(0)}
}
@media (prefers-reduced-motion: reduce){
  .bow-figure.bow-anim{animation:none}
}

/* ---------- 結果 ---------- */
.result-img{margin:36px auto 32px; max-width:420px}
.result-img img{width:100%; display:block}
.result-title{
  font-size:22px; font-weight:600; letter-spacing:.26em;
  margin-bottom:16px;
}
.result-score{
  font-size:15px; letter-spacing:.2em; color:var(--ink-soft);
  margin-bottom:8px;
}
.result-score b{
  color:var(--vermilion); font-weight:600; font-size:22px;
  font-variant-numeric:tabular-nums;
}
.result-milestone{
  font-size:14px; letter-spacing:.14em;
  color:var(--vermilion);
  margin-top:12px;
}
.result-promote{
  margin-top:32px;
  padding:22px 20px;
  border:1px solid var(--vermilion);
}
.result-promote p{
  font-size:14px; letter-spacing:.14em; color:var(--vermilion);
  margin-bottom:16px;
}
.result-promote .btn-primary{padding:12px 40px; font-size:14px}

.result-tendency{
  margin-top:28px;
  padding:18px 20px;
  border:1px solid var(--line);
  text-align:left;
}
.tendency-head{
  font-size:12px; letter-spacing:.28em; color:var(--ink-soft);
  margin-bottom:8px;
}
.tendency-text{
  font-size:14px; letter-spacing:.1em; color:var(--ink);
  margin-bottom:6px;
}
.tendency-text b{color:var(--vermilion); font-weight:600}
.tendency-advice{
  font-size:12.5px; letter-spacing:.08em; color:var(--ink-soft);
}

.result-review{
  margin-top:36px;
  text-align:left;
}
#btn-review-mistakes{
  display:block;
  margin:22px auto 0;
  padding:12px 40px;
  font-size:14px; letter-spacing:.2em;
}
#btn-weak-focus{
  display:block;
  margin:28px auto 0;
  padding:12px 40px;
  font-size:14px; letter-spacing:.2em;
}
#btn-pair-focus{
  display:block;
  margin:14px auto 0;
  padding:12px 40px;
  font-size:14px; letter-spacing:.2em;
}
.review-head{
  font-size:12px; letter-spacing:.28em; color:var(--ink-soft);
  text-align:center; margin-bottom:6px;
}
.review-perfect{
  font-size:14px; letter-spacing:.2em; color:var(--vermilion);
  text-align:center;
}
.review-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:13px 4px;
  border-bottom:1px solid var(--line);
  font-size:13.5px;
}
.review-row:first-of-type{border-top:1px solid var(--line)}
.review-row b{color:var(--vermilion); font-weight:600}
.btn-replay{
  border:1.5px solid var(--ink-soft);
  border-radius:8px;
  padding:6px 16px;
  font-size:12px; letter-spacing:.14em;
  white-space:nowrap;
  transition:background .2s, color .2s, transform .08s;
}
.btn-replay:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn-replay:active{transform:scale(.94)}

.result-actions{
  margin-top:40px;
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.btn-primary{
  border:1.5px solid var(--ink);
  border-radius:10px;
  padding:14px 60px;
  font-size:15px; letter-spacing:.3em;
  transition:background .2s, color .2s, transform .08s;
}
.btn-primary:hover{background:var(--ink); color:var(--paper)}
.btn-primary:active{transform:scale(.97)}

/* ---------- 記録 ---------- */
.day-chart{
  display:flex; align-items:flex-end; gap:6px;
  height:110px;
  border-bottom:1px solid var(--ink);
  padding:0 4px;
}
.day-col{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  height:100%;
  gap:4px;
}
.day-bar{
  width:100%; max-width:22px;
  background:var(--ink);
  border-radius:3px 3px 0 0;
  min-height:2px;
}
.day-bar.today{background:var(--vermilion)}
.day-bar.empty{background:var(--line); height:2px}
.day-label{font-size:9px; color:var(--ink-soft); letter-spacing:.05em}

.note-stats{display:flex; flex-direction:column; gap:10px}
.note-row{display:flex; align-items:center; gap:14px}
.note-name{width:44px; font-size:14px; text-align:right; white-space:nowrap}
.note-bar-track{flex:1; height:8px; background:rgba(0,0,0,.06); border-radius:4px; overflow:hidden}
.note-bar{height:100%; background:var(--ink); border-radius:4px}
.note-bar.weak{background:var(--vermilion)}
.note-rate{
  width:52px; font-size:12px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.note-empty{font-size:13px; color:var(--ink-soft)}

.confusion-stats{display:flex; flex-direction:column}
.confusion-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:11px 2px;
  border-bottom:1px solid var(--line);
  font-size:13.5px;
}
.confusion-row:first-of-type{border-top:1px solid var(--line)}
.confusion-pair b{color:var(--vermilion); font-weight:600}
.confusion-count{
  color:var(--ink-soft); font-size:12px; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.confusion-empty{font-size:13px; color:var(--ink-soft)}

/* ---------- 稽古の扇形ランチャー ---------- */
.keiko-fan{
  position:fixed;
  left:20px;
  bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:40;
}
.fan-backdrop{
  position:fixed; inset:0; z-index:-1;
  background:rgba(247,246,242,.78);
  opacity:0; pointer-events:none;
  transition:opacity .25s;
}
.keiko-fan.open .fan-backdrop{opacity:1; pointer-events:auto}
/* マスコットがそのまま立っているボタン */
.fan-fab{
  position:relative;
  padding:6px;               /* 見た目より少し広いタップ領域 */
  background:transparent;
  animation:mascot-bob 3.2s ease-in-out infinite;
}
.mascot-stand{
  display:block;
  height:112px; width:auto;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.22));
  transition:transform .2s;
  pointer-events:auto;       /* 画像の保存防止(pointer-events:none)より優先してタップ可能に */
  -webkit-touch-callout:none;
  user-select:none; -webkit-user-select:none;
  transform-origin:50% 90%;
}
.fan-fab:active .mascot-stand{transform:scale(.94)}
.keiko-fan.open .fan-fab{animation:none}
.keiko-fan.open .mascot-stand{transform:rotate(-7deg)}
@keyframes mascot-bob{
  0%, 100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.fan-item{
  position:absolute; left:12px; bottom:36px;  /* キャラの胴あたりから展開 */
  width:58px; height:58px;
  background:none; color:var(--ink); padding:0;
  font-size:11px; line-height:1.25; letter-spacing:.04em;
  font-family:var(--serif);
  display:flex; align-items:center; justify-content:center; text-align:center;
  transform:translate(0,0) scale(.3);
  opacity:0; pointer-events:none;
  transition:transform .3s cubic-bezier(.2,.8,.3,1.15), opacity .18s;
  transition-delay:calc(var(--i) * .035s);
}
.keiko-fan.open .fan-item{
  opacity:1; pointer-events:auto;
  transform:translate(var(--tx), var(--ty)) scale(1);
}
/* 描いてもらった手描きの輪郭を背景に。ボタンの塗りつぶし演出はフィルターで表現 */
.fan-ring{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 3px 5px rgba(74,71,66,.2));
  transition:filter .15s;
}
.fan-label{position:relative; z-index:1}
.fan-item:active .fan-ring{filter:brightness(0) saturate(100%)}
.fan-item:active .fan-label{color:var(--paper)}
.fan-item-dragon .fan-label{color:var(--vermilion); font-weight:600}
.fan-item-dragon:active .fan-label{color:var(--paper)}

/* ---------- 初回案内 ---------- */
.onboard{position:fixed; inset:0; z-index:200}
.onboard-veil{position:absolute; inset:0; background:rgba(26,26,24,.46)}
.onboard-stage{
  position:absolute; inset:0;
  padding:
    calc(16px + env(safe-area-inset-top))
    calc(16px + env(safe-area-inset-right))
    calc(16px + env(safe-area-inset-bottom))
    calc(16px + env(safe-area-inset-left));
}
.onboard-spot{
  position:absolute;
  border:2px solid var(--vermilion);
  border-radius:16px;
  box-shadow:0 0 0 4px rgba(201,67,47,.18), 0 0 18px rgba(201,67,47,.35);
  pointer-events:none;
  transition:top .25s ease, left .25s ease, width .25s ease, height .25s ease;
  animation:onboard-pulse 2.2s ease-in-out infinite;
}
@keyframes onboard-pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(201,67,47,.18), 0 0 18px rgba(201,67,47,.35)}
  50%{box-shadow:0 0 0 8px rgba(201,67,47,.10), 0 0 26px rgba(201,67,47,.45)}
}
.onboard-tip{
  position:absolute;
  width:max-content;
  min-width:200px;
  max-width:min(280px, 100%);
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:12px;
  padding:16px 18px;
  box-shadow:0 8px 26px rgba(0,0,0,.28);
}
.onboard-step{
  font-size:11px; letter-spacing:.28em; color:var(--ink-soft);
  margin-bottom:6px;
}
.onboard-msg{font-size:15px; letter-spacing:.05em; line-height:1.7}
.onboard-sub{font-size:12.5px; letter-spacing:.04em; color:var(--vermilion); margin-top:6px}
.onboard-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:16px}
.onboard-btn{
  border-radius:999px; padding:11px 20px; min-height:42px;
  font-size:13.5px; letter-spacing:.12em;
  transition:background .2s, color .2s, transform .08s, border-color .2s;
}
.onboard-btn.ghost{border:1.5px solid var(--line); color:var(--ink-soft)}
.onboard-btn.ghost:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.onboard-btn.primary{border:1.5px solid var(--ink); background:var(--ink); color:var(--paper)}
.onboard-btn.primary:hover{opacity:.85}
.onboard-btn:active{transform:scale(.95)}

.credit{
  margin-top:56px;
  text-align:center;
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--staff);
}

/* ---------- レスポンシブ（スマホ） ---------- */
@media (max-width:600px){
  /* ホーム上部: アイコンが4つになったぶん、狭い画面では詰めて収める */
  .gs-icons{gap:7px}
  .gs-icon .ic{width:36px; height:36px}
  .gs-icon small{font-size:8px}
  .lv-badge{padding:6px 12px; font-size:12px}

  /* ホーム: ヒーローを低く、数字は2×2 */
  .hero{max-height:190px; margin-bottom:28px}
  .hero img{max-height:190px}
  .hero-title{top:12%}
  .hero-title h1{letter-spacing:.2em}
  .home-stats{
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:20px 8px; justify-items:center;
  }
  .hs-divider{display:none}
  .mode-card{flex-direction:column; align-items:stretch; text-align:left}
  .btn-start{align-self:flex-end; padding:13px 30px}

  /* 稽古画面: 回答パネル（再生バー＋回答ボタン）を画面下端に固定 */
  #screen-training .container{padding-bottom:250px}
  #screen-training .answer-area{
    position:fixed; left:0; right:0; bottom:0; z-index:20;
    padding:10px 12px calc(12px + env(safe-area-inset-bottom));
    background:var(--paper) url("../img/paper.jpg");
    background-size:720px;
    border-top:1px solid var(--ink);
    display:flex; flex-direction:column; gap:8px;
  }
  #screen-training .answers{
    gap:6px;
  }
  .btn-replay-bar{
    display:block;
    border:1.5px solid var(--ink-soft);
    border-radius:8px;
    padding:9px 0;
    font-size:12px; letter-spacing:.22em;
    color:var(--ink-soft);
  }
  .btn-replay-bar:active{background:var(--ink); color:var(--paper); border-color:var(--ink)}
  /* 固定パネル内は1ボタンずつ枠を持たせる */
  .answers:not(.piano) .answer-btn{
    border:1.5px solid var(--ink-soft);
    border-radius:9px;
    padding:19px 0 17px;
    font-size:15px;
  }
  .answers.cols-7 .answer-btn{padding:17px 0 15px; font-size:13px}
  .answers.piano .answer-btn{padding:15px 0 13px; font-size:12px}

  .staff-area{padding-top:8px}
  .question-text{margin:18px 0 22px}
}