/* ソルフェ 意匠B「おんぷのともだち」
 *
 * 遊ぶのは小学生で、音楽の勉強を楽しく続けられる形にするのが狙いである。
 * 四分音符の形をしたキャラクター「ソルちゃん」が問いかけ、自分で当てたときに
 * 笑う。主役はソルちゃんと譜面のグリフで、ほかの部品は空の地に白い札を置く
 * だけの静かな組み方にする。
 *
 * ボタンは下の縁に厚みを持たせ、押すと沈む。厚みは場所を取らない box-shadow で
 * 描き、枠線は太さを残して色だけを透明や白にする。組み方の寸法（これまでの
 * 実測ではみ出しを0にしてきた調整）を、見た目の都合で動かさないためである。
 *
 * 色は4つを役割で分ける。
 *   ぶどう   構造と主な操作（おぼえる、番号、決める）
 *   トマト   れんしゅう、不正解、時間
 *   ひまわり 得点、2倍、選んだもの
 *   みどり   ずかん、正解
 * 以前の名前（--cobalt --vermilion --ochre --violet）は残し、値だけをこの4色に
 * 割り当て直してある。
 *
 * 書体は丸ゴシックと、数字に Arial Rounded。外部フォントは読み込まない（教室の
 * ネット環境で確実に動かすため）ので、端末にあるものを順に探す。
 */

:root {
  --paper:      var(--sky);   /* 地。空の色 */
  --paper-2:    #e9f4ff;   /* 一段沈めたいとき */
  --ink:        #2b2358;   /* 五線、記号、本文。夜の紫 */
  --ink-soft:   #5f5888;   /* 添えの文字。空の地で 4.5:1 を保つ濃さ */
  --cobalt:     var(--grape);   /* 構造と主要な動作 */
  --vermilion:  var(--tomato);   /* 連続正解、強調、不正解 */
  --ochre:      var(--sun);   /* 得点、2倍 */
  --violet:     var(--grape-d);   /* リズムの札の印 */

  --font-display: "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", system-ui, sans-serif;
  --font-ui: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", Meiryo, system-ui, sans-serif;

  /* 五線が下から順にこの色で灯る。音に色が付いていく */
  --tone-1: var(--tomato);
  --tone-2: var(--sun);
  --tone-3: var(--leaf);
  --tone-4: var(--grape);
  --tone-5: #3aa0ff;

  --gap: clamp(0.85rem, 3.2vw, 1.4rem);
  --edge: clamp(1rem, 4.5vw, 2.25rem);
  --radius: 18px;
  --sky: #d7ecff;
  --sky-2: #c3dcf3;
  --white: #ffffff;
  --grape: #7b5cff;
  --grape-d: #5b3fd9;
  --tomato: #ff6242;
  --tomato-d: #d9432a;
  --sun: #ffc833;
  --sun-d: #d99a00;
  --leaf: #2fb877;
  --leaf-d: #1f9660;
  --mute: #b9c3d6;
  --lip: 0 5px 0 var(--sky-2);
  --lip-down: 0 1px 0 var(--sky-2);
}

* { box-sizing: border-box; }

/* display を明示した要素には、ブラウザ既定の [hidden] が効かない。
 * hidden 属性で出し入れするものがあるので、ここで勝たせておく。 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: clamp(16px, 2.6vw, 18px);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

/* ── 連続正解の表示 ────────────────────────────────────────────
 * 連続正解が 1 つ増えるたびに、得点の横の小さな丸が1つずつ灯る。5 つそろうと
 * 得点が 2 倍になる。印は得点の横へ小さく置く。画面いっぱいに広げると選択肢の
 * カードに重なり、文字が読めなくなる。
 */
.combo-staff {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: auto;
  height: auto;
  flex: none;
  gap: 3px;
}

.cs-line {
  display: block;
  height: 0.7rem !important;
  background: var(--white);
  transition: background 200ms ease, height 200ms ease;
  width: 0.7rem;
  border-radius: 50%;
}

/* 灯る色。意匠B ではすべてひまわり色にそろえる（下の意匠B の節で上書き）。 */
.cs-line[data-line="1"].is-lit { background: var(--tone-1); }
.cs-line[data-line="2"].is-lit { background: var(--tone-2); }
.cs-line[data-line="3"].is-lit { background: var(--tone-3); }
.cs-line[data-line="4"].is-lit { background: var(--tone-4); }
.cs-line[data-line="5"].is-lit { background: var(--tone-5); }
.cs-line.is-lit { height: 2px; background: var(--sun); }

body.is-double .cs-line {
  height: 3px;
  animation: double-breathe 1.1s ease-in-out infinite alternate;
}
body.is-double .cs-line[data-line="4"] { animation-delay: 0.09s; }
body.is-double .cs-line[data-line="3"] { animation-delay: 0.18s; }
body.is-double .cs-line[data-line="2"] { animation-delay: 0.27s; }
body.is-double .cs-line[data-line="1"] { animation-delay: 0.36s; }

@keyframes double-breathe {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}

/* ── 画面の枠組み ──────────────────────────────────────────── */

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--edge) max(var(--edge), env(safe-area-inset-bottom));
  will-change: transform;
}

.topbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: max(0.7rem, env(safe-area-inset-top)) 0 0.7rem;
}

.brand {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  background: none;
  border: 0;
  padding: 0.25rem 0;
  cursor: pointer;
}
.brand-mark { color: var(--tomato); font-size: 1.15em; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--grape);
}
.brand:hover .brand-name, .brand:focus-visible .brand-name { color: var(--grape-d); }

.topbar-right { display: flex; align-items: center; gap: 0.6rem; }

.chip {
  line-height: 1.9;
  font-size: 0.82rem;
  padding: 0.22rem 0.62rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
  white-space: nowrap;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.28rem 0.68rem;
  white-space: nowrap;
  cursor: pointer;
  background: var(--white);
  color: var(--ink);
  transition: background 140ms, transform 120ms;
  border-color: transparent;
  box-shadow: var(--lip);
}
.icon-btn:hover, .icon-btn:focus-visible { background: var(--white); transform: none; }
.icon-btn .icon-btn-glyph { color: var(--tomato); }
.icon-btn[aria-pressed="false"] { color: var(--ink-soft); border-color: transparent; background: #eef3fa; }
.icon-btn[aria-pressed="false"] .icon-btn-glyph { color: #a9a296; text-decoration: line-through; }
.icon-btn-label { font-size: 1rem; line-height: 1.9; }

/* やめる。遊びの外へ出る口。押したときだけトマト色にする。 */
#btn-quit .icon-btn-glyph { color: var(--vermilion); font-size: 0.9em; }
#btn-quit:hover, #btn-quit:focus-visible { background: var(--tomato); color: var(--white); }
#btn-quit:hover .icon-btn-glyph, #btn-quit:focus-visible .icon-btn-glyph { color: #fff; }

.main { flex: 1; display: flex; }

/* 長い一覧を持つ画面（段の一覧・ずかん）のときだけ、枠を画面の高さに留めて
   中でスクロールさせる。
   min-height を 0 にすると flex の子は中身より小さくなれるが、そのぶん
   高さを取り合う。遊ぶ画面は中身の高さで組んであるので、常時これを掛けると
   五線紙も選択肢も潰れて重なる。必要な画面にだけ掛ける。 */
.stage.is-scroll { height: 100vh; height: 100dvh; }
.main.is-scroll { min-height: 0; }

.screen { display: none; flex: 1; flex-direction: column; width: 100%; }
.screen.is-active { display: flex; }

/* ── はじめの画面 ──────────────────────────────────────────── */

.title-hero { text-align: center; }

.title-card {
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(0.45rem, 2vw, 0.9rem) clamp(0.8rem, 3vw, 1.4rem);
  max-width: 34rem;
  margin: 0 auto clamp(0.6rem, 2.2vw, 1.4rem);
  display: none;
}
.title-score { display: block; width: 100%; height: clamp(70px, 19vw, 124px); }
/* 縦に短い携帯。文字を大きくしたぶん、入口と音の断りまでを画面に収めるため、
   飾りの楽譜を低くする。 */
@media (max-height: 700px) and (orientation: portrait) {
  .title-card { padding: 0.25rem 0.8rem; margin-bottom: 0.3rem; }
  .title-score { height: clamp(36px, 10vw, 60px); }
  .title-name { font-size: 1.95rem; }
  .screen-pick, .setup { gap: 0.55rem; }
  .pick { padding-top: 0.4rem; padding-bottom: 0.4rem; }
  .pick-title { line-height: 1.55; }
  .pick-note { line-height: 1.8; }
  .sound-note { padding-top: 0.3rem; padding-bottom: 0.3rem; line-height: 1.8; }
}
/* さらに短い画面では、飾りの楽譜を畳む（横に寝かせたときと同じ扱い）。 */
@media (max-height: 650px) and (orientation: portrait) {
  .title-card { display: none; }
}

.title-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 9.6vw, 4.2rem);
  letter-spacing: 0.2em;
  margin: 0 0 0.2rem;
  text-indent: 0.2em;
  line-height: 1.15;
  color: var(--ink);
  padding-bottom: 0.08em;
}
/* 題字は1字ずつ4色に塗り分ける。ruby.js は仮名に触れないので字の並びは変わらない。 */
.title-name { position: relative; display: inline-block; padding: 0 0.1em; font-family: var(--font-ui); letter-spacing: 0.04em; text-indent: 0; color: transparent; background: linear-gradient(90deg, var(--tomato) 0 25%, var(--sun-d) 25% 50%, var(--leaf) 50% 75%, var(--grape) 75% 100%); -webkit-background-clip: text; background-clip: text; }
.title-sub { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }

.setup {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 2.8vw, 1.6rem);
  max-width: 34rem;
  width: 100%;
  margin: 0 auto;
}

.setup-head {
  line-height: 1.9;
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 0.45rem;
  color: var(--ink);
}

.pick-row { display: grid; grid-template-columns: 1fr; gap: 0.55rem; }
@media (min-width: 560px) { .pick-row { grid-template-columns: repeat(3, 1fr); } }

.pick {
  text-align: left;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.7rem 0.95rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  transition: background 140ms, transform 120ms;
}
.pick:hover, .pick:focus-visible { transform: none; }
.pick:active { transform: translateY(4px); }
/* 入口の札。表紙と「何を練習する?」の札は全面をそれぞれの色で塗り、右端に
   記号を大きく白く透かす（::after。場所を取らない）。並んだときに何が違うのかが、
   読む前に色と形で分かる。左の余白は以前の色の帯の幅で、組み方を保つために残す。 */
.pick { position: relative; overflow: hidden; padding-left: 1.4rem; background: var(--white); border-color: transparent; border-radius: 22px; box-shadow: var(--lip); transition: transform 90ms ease, box-shadow 90ms ease; }
.pick::after {
  content: "";
  position: absolute;
  inset: auto 0.7rem auto auto;
  background: none;
  opacity: 1;
  transition: opacity 140ms;
  z-index: 0;
  top: 50%;
  width: auto;
  height: auto;
  transform: translateY(-38%);
  font-family: "SolfeMusic";
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.pick:hover::after, .pick:focus-visible::after { opacity: 0.1; }
#pick-mode .pick:nth-child(1) { --accent: var(--vermilion); background: var(--grape); box-shadow: 0 5px 0 var(--grape-d); }
#pick-mode .pick:nth-child(2) { --accent: var(--violet); background: var(--tomato); box-shadow: 0 5px 0 var(--tomato-d); }
#pick-mode .pick:nth-child(3) { --accent: var(--ochre); background: var(--leaf); box-shadow: 0 5px 0 var(--leaf-d); }

.pick:hover .pick-title { color: inherit; }

.pick-title { font-size: 1.3rem; line-height: 1.75; color: var(--ink); }
.pick-note { font-size: 1rem; color: var(--ink-soft); line-height: 1.9; }

.start-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  width: 100%;
  border: 0;
  border-radius: 22px;
  padding: 0.72rem 1rem;
  background: var(--tomato);
  color: #fff;
  cursor: pointer;
  transition: transform 90ms ease, box-shadow 90ms ease;
  box-shadow: 0 5px 0 var(--tomato-d);
}
.start-btn:hover { filter: none; }
.start-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--tomato-d); }
.start-btn-main { font-size: 1.35rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.7; }
.start-btn-sub { font-size: 0.98rem; opacity: 0.8; }

.ghost-btn {
  background: none;
  border: 2px solid var(--ink);
  border-radius: 22px;
  padding: 0.7rem 1rem;
  font-size: 1.15rem;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms, color 160ms;
  border-color: transparent;
  box-shadow: var(--lip);
}
.ghost-btn:hover { background: var(--white); }

/* ── 遊んでいる画面 ────────────────────────────────────────── */

.screen-play {
  gap: clamp(0.5rem, 2.2vw, 1.4rem);
  padding-bottom: 0.4rem;
  max-width: 44rem;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
}

.play-head { flex: none; }

.progress {
/* 進み具合は点ではなく、区画が埋まっていく帯。残りが量で見える。 */
  display: flex;
  gap: 0;
  justify-content: center;
  /* ふりがなは行の上へ張り出すので、問題文との間を広めに取る。 */
  margin-bottom: clamp(0.9rem, 2.6vw, 1.2rem);
  align-items: center;
}
.progress i {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  background: var(--white);
  transition: background 220ms;
  border-radius: 50%;
  margin: 0 0.32rem;
}
.progress i.is-hit { background: var(--leaf); }
.progress i.is-miss { background: var(--tomato); }
.progress i.is-now { background: var(--sun); box-shadow: 0 0 0 4px rgba(255, 200, 51, 0.35); }

.prompt {
  margin: 0 0 clamp(0.35rem, 1.4vw, 0.7rem);
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--ink);
}

.question {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.6rem;
}

/* 問題の紙。ここが画面でいちばん明るく、記号が主役になる。
 *
 * 高さは余ったぶんを受け取る形にしてある。固定の下限を置くと、ブラウザの
 * 上下のバーで見える高さが縮んだときに、下の選択肢が画面の外へ押し出される。
 * 縮むのは紙のほうで、選択肢は必ず見えていなければならない。
 */
.paper {
  background: var(--white);
  color: var(--ink);
  border-radius: 24px;
  width: 100%;
  padding: clamp(0.5rem, 2.4vw, 1.35rem) clamp(0.9rem, 4vw, 1.8rem);
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 4.5rem;
  max-height: 13rem;
  border-color: transparent;
}
.paper .score { display: block; width: 100%; height: 100%; min-height: 0; }
.paper .score-symbol { max-height: 100%; }
.paper.is-pop { animation: paper-pop 340ms cubic-bezier(0.18, 1.5, 0.4, 1); }
@keyframes paper-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
.paper.is-nudge { animation: paper-nudge 380ms ease; }
@keyframes paper-nudge {
  0%, 100% { transform: translateX(0); }
  18%  { transform: translateX(-7px); }
  38%  { transform: translateX(6px); }
  58%  { transform: translateX(-4px); }
  78%  { transform: translateX(2px); }
}

/* ── 四択 ──────────────────────────────────────────────────── */

.choices {
  flex: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 560px) {
  .choices { grid-template-columns: 1fr 1fr; }
}

.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 0.62rem 0.9rem 0.62rem 0;
  min-height: 3.2rem;
  cursor: pointer;
  color: var(--ink);
  overflow: hidden;
  transition: transform 90ms ease, box-shadow 90ms ease, background 150ms, color 150ms;
  border-color: transparent;
  box-shadow: var(--lip);
}
.choice:hover:not(:disabled) { transform: none; }
.choice:active:not(:disabled) { transform: translateY(4px); box-shadow: var(--lip-down); }
.choice:disabled { cursor: default; }

.choice-key {
/* 番号の面。意匠B では面を塗らず、中にぶどう色の丸を敷く（::before）。面の幅は組み方のために残す。 */
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  margin: -0.62rem 0.8rem -0.62rem 0;
  background: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--white);
  position: relative;
  z-index: 0;
}
.choice-body { flex: 1; min-width: 0; }
.choice-text { font-size: 1.2rem; line-height: 1.75; }

/* なまえと いみ を 1 枚に載せた四択。なまえを主、いみを従にして、
   目が先になまえへ行くようにする。 */
.choice-pair .choice-body { display: flex; flex-direction: column; gap: 0.05rem; }
.choice-name {
  font-size: 1.22rem;
  line-height: 1.75;
}
.choice-meaning {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-soft);
}
.choice-pair.is-correct .choice-meaning { color: rgba(255, 255, 255, 0.85); }
.choice-pair.is-wrong .choice-meaning { color: rgba(255, 255, 255, 0.85); }
.choice-say {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em 0.9em;
  font-size: clamp(1.2rem, 5vw, 1.45rem);
  letter-spacing: 0.06em;
  line-height: 1.35;
}
.say-g { white-space: nowrap; }

.choice.is-correct {
  background: var(--leaf);
  border-color: transparent;
  color: var(--white);
  animation: choice-hit 380ms cubic-bezier(0.2, 1.6, 0.4, 1);
  box-shadow: 0 5px 0 var(--leaf-d);
}
.choice.is-correct .choice-key { background: none; color: #fff; }
@keyframes choice-hit {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.choice.is-wrong {
  background: var(--tomato);
  border-color: transparent;
  color: var(--white);
  animation: choice-miss 400ms ease;
  box-shadow: 0 5px 0 var(--tomato-d);
}
.choice.is-wrong .choice-key { background: none; color: #fff; }
@keyframes choice-miss {
  0%, 100% { transform: translateX(0); }
  20%  { transform: translateX(-8px); }
  42%  { transform: translateX(7px); }
  64%  { transform: translateX(-4px); }
  84%  { transform: translateX(2px); }
}

.choice.is-dim { opacity: 0.45; }

/* 押すと鳴る選択肢。楽譜と聴き比べて、いちばん合うものを選ぶ。 */
.choices.is-play { grid-template-columns: 1fr 1fr; }
@media (min-width: 560px) { .choices.is-play { grid-template-columns: repeat(4, 1fr); } }

.choice-play {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.7rem 0.5rem;
  min-height: 4.4rem;
}
.choice-play .choice-key {
  width: auto;
  font-size: 1.05rem;
  opacity: 0.75;
}
.choice-play .play-mark {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tomato);
  transition: transform 140ms, color 140ms;
}
.choice-play .play-label {
  font-size: 1.05rem;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.3;
}

.choice-play.is-picked {
  background: var(--sun);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--sun-d);
}
.choice-play.is-picked .play-label { color: var(--ink); }
.choice-play.is-picked .play-mark { color: var(--ink); }
.choice-play.is-picked .choice-key { background: none; }
.choice-play.is-sounding .play-mark {
  color: var(--vermilion);
  animation: play-pulse 0.42s ease-in-out infinite alternate;
}
@keyframes play-pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.28); }
}
/* 答え合わせのあとは、読み方の文字に入れ替わる。 */
.choice-play.is-revealed .play-mark { display: none; }
.choice-play.is-revealed .play-label {
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: inherit;
}

.confirm-btn {
  flex: none;
  width: 100%;
  margin-top: 0.1rem;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--grape);
  color: #fff;
  padding: 0.62rem 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms, transform 110ms;
  border-color: transparent;
  box-shadow: 0 5px 0 var(--grape-d);
}
.confirm-btn:hover:not(:disabled) { filter: brightness(1.07); }
.confirm-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--grape-d); }
.confirm-btn:disabled {
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink-soft);
  border-color: transparent;
  cursor: default;
  box-shadow: none;
}

/* ── スコア表示 ────────────────────────────────────────────── */

/* ふりがな。
 *
 * <ruby> と <rt> は使わず、span で組んで読みを親字の上へ浮かせる。
 * Safari は <ruby> の中の <rt> に独自の組み方を強制し、position の指定を
 * 無視する。読みが箱の上端から下へ描かれて親字に重なったり（行の高さを
 * 詰めたとき）、親字の下へ回ったりする。span ならどのブラウザでも同じに
 * 組まれる。
 *
 * 浮かせるのは、読みのほうが親字より長いときに親字の側が引き伸ばされて
 * 「練習」が「練 習」のように割れるため。流れから外せば字送りは変わらない。
 * そのぶん、文字の出るところは行間を広めに取ってある。
 *
 * 箱の行の高さは 1 に詰める。親の広い行間を継ぐと箱が上下に伸び、その
 * 上端に置いた読みが行間の半分だけ親字から浮く。
 */
.furi {
  display: inline-block;
  position: relative;
  text-align: center;
  text-indent: 0;
  line-height: 1;
}
.furi-rt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin: 0 auto 0.2em;
  width: max-content;
  white-space: nowrap;
  font-size: 0.56em;
  line-height: 1;
  color: inherit;
  opacity: 0.8;
  letter-spacing: 0;
  font-weight: 400;
  pointer-events: none;
}

.hud {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 0.2rem;
  border-top: 1px solid var(--paper-2);
  margin-top: 0.2rem;
  border-top-color: transparent;
}

.hud-combo { display: flex; align-items: center; gap: 0.45rem; }
.hud-combo-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--ink);
  transition: color 200ms;
  display: inline-block;
}
.hud-combo.is-up .hud-combo-num { animation: combo-kick 320ms cubic-bezier(0.2, 1.7, 0.4, 1); color: var(--vermilion); }
.hud-combo.is-hot .hud-combo-num { color: var(--vermilion); }
@keyframes combo-kick {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.hud-combo-label { font-size: 0.98rem; color: var(--ink-soft); line-height: 1.9; }

.hud-score { display: flex; align-items: baseline; gap: 0.4rem; }
.hud-score-label { font-size: 0.98rem; color: var(--ink-soft); }
.hud-score-num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
  color: #9a6c00;
  font-variant-numeric: tabular-nums;
}

/* 3・2・1 の合図。数字だけを大きく出す。 */
.countdown {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 6;
}
.countdown-num {
  font-family: var(--font-display);
  font-size: clamp(5rem, 26vw, 10rem);
  line-height: 1;
  color: var(--grape);
  -webkit-text-stroke: 6px var(--white);
  paint-order: stroke fill;
}
.countdown.is-tick .countdown-num { animation: count-pop 640ms cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes count-pop {
  0%   { opacity: 0; transform: scale(1.5); }
  22%  { opacity: 1; transform: scale(1); }
  76%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.88); }
}


.screen-pick {
  justify-content: safe center;
  gap: clamp(0.9rem, 3.4vw, 2.4rem);
  padding-bottom: 1.2rem;
}

/* 得点が 2 倍になったことを知らせる札。
 *
 * 幅を中身ぶんに留めて折り返させない。画面いっぱいの箱に大きな字を置くと、
 * 端末の幅しだいで語の途中で改行され、読めない形で出る。
 */
.double-banner {
  position: fixed;
  left: 50%;
  top: 40%;
  width: max-content;
  max-width: calc(100vw - 2rem);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.double-mark {
  background: var(--sun);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 13vw, 4.4rem);
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 0.3em 0.42em 0.36em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border-radius: 22px;
  box-shadow: 0 5px 0 var(--sun-d);
}
/* ふりがなは行の上へ絶対配置で張り出す。塗りの帯に載せるので、
 * 張り出すぶんだけ上の余白を取らないと、読みが帯の外へ出て消える。 */
.double-word {
  background: var(--ink);
  color: var(--white);
  padding: 0.75em 0.7rem 0.2em;
  font-size: clamp(1.05rem, 4.4vw, 1.25rem);
  line-height: 1.6;
  white-space: nowrap;
  border-radius: 14px;
  margin-top: 0.4rem;
}
.double-banner.is-on { animation: banner-in 1250ms ease forwards; }
@keyframes banner-in {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.76); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  26%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  72%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -64%) scale(1); }
}

/* ── おわりの画面 ──────────────────────────────────────────── */

.screen-result {
  justify-content: center;
  gap: clamp(0.9rem, 3.4vw, 1.6rem);
  max-width: 34rem;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 1.5rem;
  min-height: 0;
}

.result-top { text-align: center; }
.result-rank {
  line-height: 1.9;
  margin: 0 0 0.3rem;
  font-size: 1.45rem;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.result-score {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 17vw, 5.6rem);
  line-height: 1;
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--grape);
}
.result-score-label { margin: 0.2rem 0 0; font-size: 1rem; color: var(--ink-soft); }

.result-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin: 0;
  padding: 0.9rem 0;
  border-top: 1px solid #ded7c8;
  border-bottom: 1px solid #ded7c8;
  text-align: center;
  border-color: transparent;
}
.result-stats div { margin: 0; background: var(--white); border-radius: 18px; padding: 0.95rem 0 0.4rem; }
.result-stats dt { font-size: 1rem; color: var(--ink-soft); margin-bottom: 0.2rem; line-height: 1.9; }
.result-stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.review-head { font-size: 1.1rem; font-weight: 500; color: var(--ink); margin: 0 0 0.55rem; line-height: 1.9; }
.review { flex: 0 1 auto; display: flex; flex-direction: column; min-height: 0; }
/* 間違いが多い回でも「もう一かい」が画面に残るように、ここだけ中でスクロールさせる。 */
.review-list {
  list-style: none;
  margin: 0;
  padding: 0 0.2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.review-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #ded7c8;
  border-radius: 18px;
  padding: 0.65rem 0.7rem 0.4rem;
  border-color: transparent;
}
.review-figure {
  flex: none;
  width: 5.2rem;
  height: 3rem;
  background: #fff;
  border: 1px solid var(--paper-2);
  color: var(--ink);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem;
  border-color: transparent;
}
.review-figure .score { display: block; width: 100%; height: 100%; }
.review-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.review-label { font-size: 0.98rem; color: var(--ink-soft); line-height: 1.85; }
.review-answer { font-size: 1.15rem; line-height: 1.8; overflow-wrap: anywhere; }

.result-actions { flex: none; display: flex; flex-direction: column; gap: 0.55rem; }

/* ── 効果 ──────────────────────────────────────────────────── */

.fx-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

/* 当たった瞬間の光。明るい地なので画面全体を染めず、縁だけを光らせる。
   全面に色を掛けると、楽譜の紙まで色が付いて読みにくくなる。 */
.fx-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 30;
  transition: opacity 420ms ease;
}

body.is-hitstop .stage { filter: saturate(1.25) brightness(1.02); }

.keyhint {
  flex: none;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
  opacity: 0.8;
  margin: 0.8rem 0 0;
}
@media (hover: none), (max-width: 700px) { .keyhint { display: none; } }

/* ── 楽譜の描画 ────────────────────────────────────────────── */

/* 楽譜フォントのグリフ。font-size は描画側が staff space の単位で指定する。 */
.gl-m {
  font-family: "SolfeMusic";
  fill: currentColor;
  stroke: none;
}
/* 符幹、五線、小節線。太さも描画側が指定する。 */
.gl-l {
  fill: none;
  stroke: currentColor;
  stroke-linecap: butt;
}
.gl-staff { opacity: 0.7; }
/* 連桁、スラー、タイなど、塗りの形で描くもの。 */
.gl-f { fill: currentColor; stroke: none; }
/* 速度標語など、ふつうの文字で出すもの。 */
.gl-t {
  fill: currentColor;
  stroke: none;
  font-family: var(--font-display);
}
.gl-it { font-style: italic; }

.beat-cursor rect { fill: var(--sun); opacity: 0.35; }

/* ── 操作の見え方 ──────────────────────────────────────────── */

:focus-visible {
  outline: 3px solid var(--grape);
  outline-offset: 3px;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 縦に短い画面。ブラウザの上下のバーが出ている携帯がここに入る。
 * 選択肢とスコアが必ず見えるよう、紙と余白から先に削る。 */
@media (max-height: 820px) {
  .paper { max-height: 9rem; }
}

@media (max-height: 740px) {
  .paper { max-height: 6.4rem; }
  .choice { min-height: 2.9rem; padding: 0.55rem 0.8rem 0.55rem 0; }
  .choice-key { margin-top: -0.55rem; margin-bottom: -0.55rem; }
  .choice-name { font-size: 1.15rem; line-height: 1.55; }
  .choice-meaning { font-size: 0.95rem; line-height: 1.6; }
  .choice-play { min-height: 3.6rem; padding: 0.5rem 0.4rem; }
  .choices { gap: 0.4rem; }
  .hud { padding-top: 0.1rem; margin-top: 0.1rem; }
  .hud-combo-num { font-size: 1.55rem; }
  .hud-score-num { font-size: 1.45rem; }
}

/* 背の低い画面。名前と意味は 1 枚に載せたままにする。片方だけ覚える形に
   しないための組み方なので、入らないからといって意味を消さない。小さくして
   でも並べておく。境目は 660px。高さ 650px 前後の画面は、この詰め方なしでは
   選択肢 4 つと得点が収まらない。 */
@media (max-height: 660px) {
  .paper { max-height: 5.4rem; min-height: 3.6rem; }
  .choice { min-height: 2.5rem; }
  .choice-name { font-size: 1.1rem; line-height: 1.6; }
  .choice-meaning { font-size: 0.92rem; line-height: 1.6; }
}

/* 横に寝かせた小さい画面。上下が詰まるので紙を低くする。
   連続正解の五線をここで引き伸ばしていたが、画面いっぱいに線を引いていた
   ころの名残で、得点の横へ小さく置くようになった今は、ただ縦に伸びて
   ほかの部品を押し出すだけだった。 */
@media (max-height: 560px) and (orientation: landscape) {
  .paper { min-height: 3.6rem; max-height: 8rem; }
  .paper .score-symbol { max-height: 8rem; }
  .title-hero { margin-bottom: 0; }
  .setup { gap: 0.5rem; }
  .choice { min-height: 2.3rem; }
  .screen-play { max-width: 52rem; }
  .choices { grid-template-columns: 1fr 1fr; }
  .choices.is-play { grid-template-columns: repeat(4, 1fr); }
}

/* ── 感想を書く ────────────────────────────────────────────────
 * 遊びの邪魔をしないよう、入口は画面のいちばん下に小さく置く。開くと
 * 前面の板になる。板は白く角を大きく丸め、地を薄い夜の紫で沈める。
 */
.feedback-open-row { flex: none; margin: 0.35rem 0 0; text-align: center; }
.feedback-open {
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0.1rem 0.1rem 0.15rem;
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--ink-soft);
  cursor: pointer;
}
.feedback-open:hover, .feedback-open:focus-visible { color: var(--grape); border-color: var(--grape); }

.sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--edge);
  background: rgba(43, 35, 88, 0.35);
}

.sheet-panel {
  width: 100%;
  max-width: 30rem;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 26px;
  padding: clamp(1rem, 4vw, 1.5rem);
  border-color: transparent;
}

.sheet-title {
  margin: 0 0 0.35rem;
  font-size: 1.3rem;
  line-height: 1.8;
  font-weight: 600;
  color: var(--ink);
}
.sheet-lead {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  line-height: 1.9;
  color: var(--ink-soft);
}
.sheet-label {
  display: block;
  margin: 0 0 0.3rem;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-soft);
}
.sheet-input {
  display: block;
  width: 100%;
  margin: 0 0 0.9rem;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 1.1rem;
  color: var(--ink);
  background: #f3f8ff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  border-color: var(--sky-2);
}
.sheet-input:focus { outline: 3px solid var(--grape); outline-offset: 1px; border-color: var(--grape); }
.sheet-area { resize: vertical; min-height: 6rem; line-height: 1.7; }

/* 囮。目にも読み上げにも触れない場所へ置く。 */
.sheet-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.sheet-msg {
  margin: 0 0 0.7rem;
  min-height: 1.4em;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-soft);
}
.sheet-msg.is-ok { color: var(--leaf-d); }
.sheet-msg.is-warn { color: var(--tomato-d); }

.sheet-actions { display: flex; gap: 0.5rem; }
.sheet-actions .ghost-btn { flex: 1; }
.sheet-send { flex: 2; }

/* 使われ方の記録の告知へ。感想を書きに来る大人の目に入る場所に置く。 */
.sheet-note {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  line-height: 1.8;
  text-align: center;
}
.sheet-note a { color: var(--ink-soft); }

/* ── アップデートのお知らせ ────────────────────────────────────
 * 入口は題字の下に 1 行だけ。見ようと思えば見られる、という程度にとどめ、
 * 3 つの入口より目立たせない。日付はぶどう色の小さな札に白抜きにして、
 * 「いつのことか」だけが先に目に入るようにする。
 */
.news-open-row { margin: 0.35rem 0 0; }
.news-open {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: 0;
  padding: 0.15rem 0.1rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  cursor: pointer;
}
.news-open-date {
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.28rem 0.4rem 0.24rem;
  background: var(--grape);
  color: #fff;
  border-radius: 8px;
}
.news-open-label { border-bottom: 2px solid currentColor; padding-bottom: 0.05rem; border-bottom-width: 1px; }
.news-open:hover, .news-open:focus-visible { color: var(--grape); }
.news-open:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }

/* 一覧。日付を左の目盛りにして、同じ日の変更をその右へ積む。時の流れ
   そのものが並びなので、番号は振らない。 */
.news-list { list-style: none; margin: 0.2rem 0 0; padding: 0; }

/* 閉じる口は題と同じ行の右端に置く。一覧の下に置くと、項目が増えるほど
   押しに行くまでが遠くなる。 */
.news-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.3rem;
}
.news-head .sheet-title { margin: 0; }
.news-close { flex: none; padding: 0.35rem 1rem 0.2rem; }

/* 前のアップデート。既定は畳んでおき、押すと開く。 */
.news-older { border-top: 2px dashed var(--sky-2); padding-top: 0.6rem; }
.news-older summary {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0.2rem 0.3rem;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.news-older summary::-webkit-details-marker { display: none; }
.news-older summary::before {
  content: "";
  flex: none;
  align-self: center;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4rem 0 0.4rem 0.6rem;
  border-color: transparent transparent transparent var(--cobalt);
  transition: transform 140ms;
}
.news-older details[open] summary::before { transform: rotate(90deg); }
.news-older-count { color: var(--ink-soft); font-size: 0.95rem; }
.news-older .news-list { margin-top: 0.4rem; }
.news-day {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: 0 0.8rem;
  padding: 0.7rem 0;
  border-top: 2px dashed var(--sky-2);
}
.news-day:first-child { border-top: 0; padding-top: 0.2rem; }
.news-date {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--grape);
}
.news-items { list-style: none; margin: 0; padding: 0; }
.news-item + .news-item { margin-top: 1.05rem; }
.news-what {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--ink-soft);
}
/* 嬉しいことは、ひまわり色の丸で受ける。読み手にいちばん届けたいのは
   こちらなので、何が変わったか（添えの色）より濃い字で置く。 */
.news-good {
  position: relative;
  margin: 0.1rem 0 0;
  padding-left: 1.1rem;
  font-size: 1.05rem;
  line-height: 1.95;
  color: var(--ink);
}
.news-good::before {
  content: "";
  position: absolute;
  left: 0.05rem;
  top: 0.95em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--sun);
  border-radius: 50%;
}
/* 届いた要望から作ったもの。書いた人が自分の声だと気づけるように。 */
.news-voice {
  display: inline-block;
  margin: 0.2rem 0 0.45rem;
  padding: 0.3rem 0.45rem 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--tomato-d);
  border: 2px solid var(--vermilion);
  border-radius: 999px;
  border-color: var(--tomato);
}

/* ── すすむ・ずかん ────────────────────────────────────────────
 *
 * 遊ぶ画面と同じ白い札で組む。段の一覧は、番号をぶどう色の丸に白抜きにして
 * 左端に並べる。終えた段は丸がみどりに変わり、まだ開いていない段は札が薄く
 * なる。進み具合を、印ではなく色そのもので示す。
 */

/* 入口は添え書きが長いので、せまい画面では縦に積む。横幅が取れる画面
   （タブレットを横にしたときや机の上の画面）では横に並べて、高さを空ける。 */
.pick-row-stack { grid-template-columns: 1fr; }
@media (min-width: 720px) { .pick-row-stack { grid-template-columns: repeat(3, 1fr); } }

/* 戻り口。画面の左上に小さく置く。 */
.pick-back-row { margin: 0 0 0.2rem; }
.back-link {
  line-height: 1.9;
  background: none;
  border: 0;
  padding: 0.2rem 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
  cursor: pointer;
}
.back-link:hover, .back-link:focus-visible { color: var(--grape); }

/* ── 段の一覧 ── */

/* 段は 22 ある。中央寄せのまま並べると画面からあふれ、ページごと動いて
   上の戻り口まで流れる。上から詰めて、この枠の中だけでスクロールさせる。 */
#screen-course, #screen-range { justify-content: flex-start; }
#screen-course .setup, #screen-range .setup { flex: 1 1 auto; min-height: 0; }

/* ── れんしゅうの範囲 ──
 *
 * 段の一覧と同じ並び・同じ形にする。おぼえるで見た段が、そのまま練習の
 * 範囲の単位になっていることが、形で分かるようにする。選んだ段は札を薄い
 * ぶどう色にし、右端の角丸の四角に印を付ける。押すたびに入れ外しできることを示す。
 */
#screen-range .setup { gap: 0.55rem; }
#screen-range .setup-head { margin-bottom: 0; }
.range-presets { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.range-preset {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.35rem 1rem 0.2rem;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink);
  cursor: pointer;
  transition: transform 120ms, background 140ms;
  border-color: transparent;
  box-shadow: 0 3px 0 var(--sky-2);
}
/* 押したあとも hover が残る端末（iPhone・iPad の Safari）では、押した札だけ
   色が付いたままになり、選ばれている印に見える。マウスのある画面に限る。 */
@media (hover: hover) { .range-preset:hover { background: var(--white); } }
.range-preset:focus-visible { background: var(--white); }

/* いま選んでいる練習の種類。入口と同じ色の札で、見出しの前に置く。 */
.range-mode {
  display: inline-block;
  margin-right: 0.6rem;
  padding: 0.05rem 0.6rem 0;
  border-left: 0.5rem solid var(--vermilion);
  background: var(--grape);
  color: var(--white);
  font-size: 1rem;
  line-height: 1.9;
  border-left-color: transparent;
  border-radius: 999px;
}
.range-mode[data-mode="rhythm"] { border-left-color: transparent; background: var(--tomato); }
.range-preset:active { transform: translateY(1px); }

.range-check {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border: 2px solid var(--ink);
  background: var(--white);
  display: grid;
  place-items: center;
  border-color: var(--mute);
  border-radius: 8px;
}
.range-step.is-picked { background: #efeaff; border-color: transparent; box-shadow: 0 4px 0 #cfc3ff; }
.range-step.is-picked .range-check { background: var(--grape); border-color: var(--grape); }
.range-step.is-picked .range-check::after {
  content: "";
  width: 0.45rem;
  height: 0.85rem;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: translateY(-0.1rem) rotate(45deg);
}
.range-step:not(.is-picked) .step-no { background: var(--white); color: var(--grape); border: 2px solid var(--cobalt); border-color: var(--grape); }

#btn-range-go { flex: none; }
/* 幅のある画面（iPad を横にしたときなど）は 2 列にして、一度に見える段を増やす。 */
@media (min-width: 720px) {
  #screen-range .setup { max-width: 52rem; }
  #range-list { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
}
.start-btn:disabled { background: var(--mute); cursor: default; filter: none; transform: none; box-shadow: 0 5px 0 #9ea9be; }

.step-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow-y: auto;
  min-height: 0;
  padding-right: 0.2rem;
  padding-bottom: 6px;
}

.step-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 0.75rem 0.7rem 0.5rem;
  cursor: pointer;
  transition: transform 120ms, background 140ms;
  border-color: transparent;
  box-shadow: 0 4px 0 var(--sky-2);
}
.step-row:hover:not(:disabled), .step-row:focus-visible { transform: none; }
.step-row:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--sky-2); }

.step-no {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  background: var(--grape);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  border-radius: 50%;
}

.step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.02rem; }
.step-name { font-size: 1.22rem; line-height: 1.8; }
.step-note { font-size: 0.98rem; color: var(--ink-soft); line-height: 1.85; }
.step-mark { flex: none; color: var(--ink-soft); font-size: 1.3rem; }

.step-row.is-done .step-no { background: var(--leaf); color: var(--white); }
.step-row.is-done .step-mark { color: var(--leaf); }

/* まだ開いていない段。札を薄くし厚みを消して、押せないことを形で示す。 */
.step-row.is-locked {
  background: rgba(255, 255, 255, 0.4);
  border-color: transparent;
  color: #8f97b0;
  cursor: default;
  box-shadow: none;
}
.step-row.is-locked .step-no { background: none; border: 2px solid #cdc6b8; color: #8f97b0; border-color: var(--mute); }
.step-row.is-locked .step-note { color: #bdb6a8; }

/* ── 段の中・ずかん ── */

.screen-learn {
  gap: clamp(0.5rem, 2vw, 0.9rem);
  max-width: 34rem;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
}

.learn-head {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.learn-count { margin: 0; font-size: 1rem; color: var(--ink-soft); line-height: 1.95; }

.step-title {
  flex: none;
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.step-see, .step-drill, .step-done {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1.5vw, 0.7rem);
  min-height: 0;
}

.learn-text { flex: none; text-align: center; }
.learn-name {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.75;
}
.learn-name.is-hint { font-size: 1.2rem; font-weight: 400; color: var(--ink-soft); }
.learn-meaning { margin: 0; font-size: 1.15rem; color: var(--ink-soft); line-height: 1.85; }

.learn-hear {
  flex: none;
  align-self: center;
  background: var(--white);
  border: 2px solid var(--cobalt);
  border-radius: 999px;
  color: var(--grape);
  padding: 0.22rem 0.85rem;
  font-size: 1.02rem;
  line-height: 1.9;
  cursor: pointer;
  border-color: transparent;
  box-shadow: 0 3px 0 var(--sky-2);
}
.learn-hear:hover, .learn-hear:focus-visible { background: var(--grape); color: var(--white); }

/* 記号のボタン。押すと上に大きく出る。一度見たものは塗りが変わる。 */
.learn-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid #e4ddcd;
  padding-top: 0.4rem;
  /* 最後の行を枠の底に張り付かせない。実機のブラウザは下の帯が出入りする
     ぶん高さが変わるので、計算どおりでも最後が隠れることがある。 */
  padding-bottom: 8px;
  scroll-padding-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-content: flex-start;
  padding: 0.15rem;
  border-top-color: transparent;
}

.learn-item {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 0.18rem 0.22rem;
  cursor: pointer;
  width: 6.4rem;
  flex: none;
  transition: background 140ms, transform 110ms, border-color 140ms;
  border-color: transparent;
  box-shadow: 0 3px 0 var(--sky-2);
}
.learn-item:hover, .learn-item:focus-visible { transform: none; }
.item-figure { display: block; height: 2.6rem; }
.item-figure .score { display: block; width: 100%; height: 100%; }
/* 一度見たものは色を落とす。まだ見ていないものが浮いて見える。 */
.learn-item.is-seen { background: #eaf3fd; border-color: transparent; }
.learn-item.is-seen .item-figure { opacity: 0.55; }
/* 選んでいるものは、札の内側のぶどう色の線で示す。 */
.learn-item.is-picked {
  background: var(--white);
  border-color: var(--grape);
  outline: 3px solid var(--grape);
  outline-offset: -3px;
}
.learn-item.is-picked .item-figure { opacity: 1; }

.book-list { max-height: none; }

/* ── なれる ── */

.drill-bar { flex: none; display: flex; gap: 3px; }
.drill-bar i { flex: 1; height: 6px; background: var(--white); border-radius: 6px; }
.drill-bar i.is-hit { background: var(--leaf); }

.drill-note {
  flex: none;
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--tomato-d);
  min-height: 1rem;
}

/* 図で答える四択。名前を見て、記号のほうを選ぶ。 */
.choices.is-figure { grid-template-columns: 1fr 1fr; }

.choice-figure {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0.4rem;
}
/* 縦並びなので、番号の面はカードの左上の角に付ける。継いだままの負の
   margin（横並び用に上下の padding を打ち消すもの）だと、上へはみ出す。 */
.choice-figure .choice-key { align-self: flex-start; margin: -0.4rem 0 0 -0.4rem; }
.figure-box {
  display: block;
  background: #fff;
  border: 1px solid #e4ddcd;
  min-height: 3.4rem;
  height: 100%;
  border-color: transparent;
  border-radius: 12px;
}
.figure-box .score { display: block; width: 100%; height: 100%; }
.choice-figure.is-correct .figure-box, .choice-figure.is-wrong .figure-box { border-color: transparent; background: var(--white); }

/* ── できた ── */

.step-done { justify-content: center; align-items: center; text-align: center; gap: 0.5rem; }
.done-mark { margin: 0; font-size: 3rem; color: var(--ochre); line-height: 1; display: none; }
.done-head {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 2.2rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--grape);
}
.done-sub { margin: 0; font-size: 1.1rem; color: var(--ink-soft); line-height: 1.95; }
.step-done .result-actions { width: 100%; max-width: 20rem; }

/* ── れんしゅうの範囲 ── */

.range-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}
.range-label { font-size: 0.98rem; color: var(--ink-soft); line-height: 1.95; }
.range-btn {
  background: none;
  border: 2px solid #cdc6b8;
  border-radius: 999px;
  color: var(--ink-soft);
  padding: 0.14rem 0.6rem;
  font-size: 1rem;
  line-height: 1.95;
  cursor: pointer;
  border-color: var(--mute);
}
.range-btn.is-on { border-color: var(--grape); background: var(--grape); color: #fff; }

.drill-hint {
  flex: none;
  margin: -0.3rem 0 0;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

/* なれる の五線紙は、選択肢が 4 つ並ぶ枠でも収まるよう、遊ぶ画面より
   小さくまで縮められるようにする。 */
.step-drill .paper { min-height: 2.6rem; }
.step-drill .drill-note:empty { min-height: 0; }

/* ずかんは段ごとに区切って並べる。区切りの名前が目次になる。 */
.book-list { flex-direction: column; flex-wrap: nowrap; gap: 0.15rem; }
/* 先頭の見出しのふりがなが、送りの枠の上端で切れないだけの余白。 */
#book-list { padding-top: 0.75rem; }
.book-head {
  margin: 0.55rem 0 0.15rem;
  font-size: 0.98rem;
  line-height: 1.95;
  color: var(--ink);
}
.book-head:first-child { margin-top: 0; }
.book-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* 段の中は最大 5 個。1 行に 3 つ並べ、2 行に収める。幅は一覧の幅から割り出し、
   図の高さも幅に比例させる。iPad を譜面台に置いて離れて見ても、五線と拍の目盛りが
   読める大きさにするため。せまい画面でも 6.1rem より小さくはしない。 */
#learn-list .learn-item { width: max(6.1rem, calc((100% - 0.7rem) / 3)); }
#learn-list .item-figure { height: auto; min-height: 2.9rem; aspect-ratio: 19 / 10; }
/* 横に置いた iPad。教室では譜面台に横向きで立てて使う。縦に比べて高さで字の
   大きさが頭打ちになり、段の画面が中央の細い列に収まって左右が空くので、列を
   広げて札を横に並べる。見本は段の中の最大 5 個を 1 行に並べ切る（2 行にすると、
   名前が出たあと一覧の高さが足りず 1 行目が切れる）。なれるの図の札も 1 行に
   並べて、そのぶん問いと意味を大きくする。 */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 621px) {
  #screen-step { max-width: 60rem; }
  #learn-list { flex-wrap: nowrap; align-items: flex-start; }
  /* 3 個の段は幅が余るが、高さの低い画面で名前が出たあとも 1 行が収まるよう、
     高さでも頭を押さえる。 */
  #learn-list .learn-item { flex: 1 1 0; width: auto; min-width: 0; max-width: min(calc((100% - 0.7rem) / 3), 30vh); }
  /* 札の一覧は中身の高さで留め、紙は札が取った残りに収める。札を押すと紙に
     図が入り、名前と「もう一回 聴く」が出るが、札の並びは動かさない。図の
     縦横比のまま紙を伸ばすと、大譜表では紙が画面の半分近くまで伸び、札が一覧の
     中に押し込まれて送らないと押せなくなる。
     名前と「聴く」は紙の右に置く。紙の下に積むと、そのぶん紙が縦に削られ、
     背の低い画面では大譜表が豆粒になる。横長の紙は左右が余っている。 */
  .step-see {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "paper ."
      "paper text"
      "paper hear"
      "paper ."
      "list  list"
      "go    go";
    column-gap: clamp(0.8rem, 2.2vw, 1.4rem);
  }
  .step-see .paper { grid-area: paper; }
  .step-see .learn-text { grid-area: text; }
  .step-see .learn-hear { grid-area: hear; justify-self: center; }
  .step-see .learn-list { grid-area: list; }
  .step-see .confirm-btn { grid-area: go; }
  #learn-list { flex: none; }
  #learn-paper, #learn-paper.is-grand { position: relative; min-height: 0; max-height: none; }
  #learn-paper > .score {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    max-height: none;
  }
  #drill-choices.is-figure { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  #screen-step #drill-prompt { font-size: max(1.7rem, 4.6vh); }
  #screen-step .drill-hint { font-size: max(1.4rem, 3.8vh); }
}
/* 横に寝かせたスマートフォンは一覧の高さが 1 行半ほどしかない。大きくすると
   2 行目が送らないと見えなくなるので、元の大きさのままにする。 */
@media (orientation: landscape) and (max-height: 620px) {
  #learn-list .learn-item { width: 6.1rem; }
  #learn-list .item-figure { height: 2.9rem; aspect-ratio: auto; }
}

/* 音が出ることの断り。最初の画面に置く。教室や電車で開く人がいるので、
   遊び始める前に目に入る位置でないと意味がない。 */
.sound-note {
  margin: 0.2rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 2px solid var(--ochre);
  border-radius: 16px;
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  border-color: transparent;
}
.sound-note-mark { flex: none; color: var(--tomato); font-size: 1.25rem; }

/* 入口は3つとも役割が違う。札の全面の色で見分ける。--accent は以前の名前のまま残す。 */
#pick-home .pick:nth-child(1) { --accent: var(--cobalt); background: var(--grape); box-shadow: 0 5px 0 var(--grape-d); }
#pick-home .pick:nth-child(2) { --accent: var(--vermilion); background: var(--tomato); box-shadow: 0 5px 0 var(--tomato-d); }
#pick-home .pick:nth-child(3) { --accent: var(--ochre); background: var(--leaf); box-shadow: 0 5px 0 var(--leaf-d); }

/* 横に寝かせた小さい画面では、最初の画面の題字と楽譜を詰める。
   3つの入口と音の断りまでが、スクロールせずに見える高さにする。 */
@media (max-height: 560px) and (orientation: landscape) {
  .title-card { display: none; }
  .title-name { font-size: clamp(1.6rem, 5vw, 2.4rem); }
  .sound-note { font-size: 0.9rem; padding: 0.25rem 0.55rem; }
}

/* ── 横に寝かせた画面 ──────────────────────────────────────────
 *
 * 高さが足りないので、縦に積んだままでは楽譜か選択肢のどちらかが画面から
 * 出る。左に見るもの（楽譜・記号）、右に選ぶものを置いて 2 段組にする。
 * 目の動きは左から右へ一度きりで済む。
 *
 * 縦向きのときは何も変えない。こちらが主な持ち方である。
 */
@media (orientation: landscape) and (max-height: 620px) {
  .topbar { padding-top: max(0.35rem, env(safe-area-inset-top)); padding-bottom: 0.35rem; }
  /* この向きでは高さに余裕がない。どの画面も枠を画面ぴったりに留めて、
     あふれたぶんは内側で送らせる。縦向きでは画面ごとに掛け分けているが、
     ここでは全部が 2 段組で、行の高さを枠から配る組み方になっている。 */
  .stage {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    height: 100vh;
    height: 100dvh;
  }
  .main { min-height: 0; }

  /* 最初の画面。題字の楽譜を畳んで、入口を横に並べる。 */
  .title-card { display: none; }
  .title-hero { margin-bottom: 0.2rem; }
  .title-name { font-size: clamp(1.5rem, 4.4vw, 2.2rem); }
  .setup { gap: 0.5rem; max-width: 52rem; }
  .pick-row-stack { grid-template-columns: repeat(3, 1fr); }
  .pick { padding: 0.5rem 0.7rem 0.5rem 1.4rem; }
  .sound-note { font-size: 0.9rem; padding: 0.25rem 0.55rem; }
  .screen-pick { justify-content: safe center; gap: 0.5rem; }

  /* 段の一覧は横に 2 列。22 段を縦 1 列にすると、ほとんど画面の外になる。 */
  #screen-course .setup, #screen-range .setup { max-width: 60rem; }
  .range-preset { padding: 0.05rem 0.8rem 0; font-size: 0.95rem; }
  /* 範囲の画面は一覧に高さを回す。見出しは近道の札と重なる内容なので畳み、
     「はじめる」は添え書きと 1 行に並べる。 */
  #screen-range .setup-head { display: none; }
  #screen-range .setup { gap: 0.35rem; }
  #btn-range-go { flex-direction: row; justify-content: center; align-items: baseline; gap: 0.8rem; padding: 0.2rem 1rem; }
  #btn-range-go .start-btn-main { font-size: 1.15rem; }
  .step-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: 0.35rem;
  }
  .step-row { padding: 0.35rem 0.55rem; }
  .step-note { display: none; }

  /* 遊ぶ画面。左に楽譜、右に選択肢。 */
  .screen-play, .screen-learn { max-width: 60rem; }
  /* 選択肢の列を広めに取る。名前と意味を 1 行に並べるための幅で、紙のほうは
     高さで記号の大きさが決まるので、幅を削っても記号は小さくならない。 */
  .screen-play.is-active {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "head choices" "paper choices" "paper confirm" "hud hud";
    column-gap: clamp(0.6rem, 2.2vw, 1.4rem);
    row-gap: 0.35rem;
  }
  .play-head { grid-area: head; }
  .question { grid-area: paper; min-height: 0; display: flex; }
  /* 意味が長くて 2 行になったときに、カードの縁で切らずに中で送る。 */
  .choices { grid-area: choices; align-content: start; min-height: 0; overflow-y: auto; }
  .confirm-btn { grid-area: confirm; }
  .hud { grid-area: hud; }
  .paper { max-height: none; min-height: 0; }
  .choices { grid-template-columns: 1fr; gap: 0.3rem; padding-bottom: 6px; }
  .choices.is-play { grid-template-columns: 1fr 1fr; }
  /* 上は名前のふりがなが収まるぶん広く取る。カードは overflow: hidden なので、
     足りないと読みが縁で切れる。 */
  .choice { min-height: 2.2rem; padding: 0.7rem 0.6rem 0.25rem 0; gap: 0.5rem; padding-top: 0.85rem; }
  .choice-key { margin: -0.7rem 0.6rem -0.25rem 0; width: 1.8rem; font-size: 1.1rem; margin-top: -0.85rem; }
  .choice-figure { padding: 0.3rem; }
  .choice-figure .choice-key { margin: -0.3rem 0 0 -0.3rem; }
  .choice-name { font-size: 1.08rem; line-height: 1.7; }
  .choice-meaning { font-size: 0.95rem; line-height: 1.7; }
  /* 名前と意味を横に並べる。右の列は幅があるので 1 行に収まり、縦に積むと
     文字を大きくしたぶん 4 枚目がカードの外へはみ出す。 */
  .choice-pair .choice-body {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.7em;
  display: block;
}

  /* 段の中も同じ組み方にする。 */
  .step-see {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "paper  text"
      "paper  hear"
      "paper  list"
      "go     go";
    column-gap: clamp(0.6rem, 2.2vw, 1.4rem);
    row-gap: 0.35rem;
  }
  .step-see .paper { grid-area: paper; }
  .learn-text { grid-area: text; align-self: end; }
  .learn-hear { grid-area: hear; }
  .step-see .learn-list { grid-area: list; min-height: 0; border-top: 0; padding-top: 0; }
  .step-see .confirm-btn { grid-area: go; align-self: end; }
  .learn-name { font-size: 1.25rem; }
  .learn-meaning { font-size: 1rem; }

  .step-drill {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "bar     bar"
      "prompt  prompt"
      "hint    hint"
      "paper   choices"
      "note    note";
    column-gap: clamp(0.6rem, 2.2vw, 1.4rem);
    row-gap: 0.3rem;
  }
  .drill-bar { grid-area: bar; }
  #drill-prompt { grid-area: prompt; }
  .drill-hint { grid-area: hint; margin: 0; }
  .step-drill .paper { grid-area: paper; }
  #drill-choices { grid-area: choices; min-height: 0; overflow-y: auto; align-content: start; }
  .figure-box { min-height: 2.2rem; }
  .drill-note { min-height: 0; }
  .learn-head { font-size: 0.95rem; }
  .learn-count { font-size: 0.92rem; }
  .drill-note { grid-area: note; }
  .choices.is-figure { grid-template-columns: 1fr 1fr; }

  /* ずかんは左に選んだ記号、右に一覧。 */
  #screen-book.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "head   list"
      "paper  list"
      "text   list"
      "hear   list";
    column-gap: clamp(0.6rem, 2.2vw, 1.4rem);
    row-gap: 0.3rem;
  }
  #screen-book .learn-head { grid-area: head; }
  #book-paper { grid-area: paper; }
  #screen-book .learn-text { grid-area: text; }
  #btn-book-hear { grid-area: hear; }
  .book-list { grid-area: list; border-top: 0; }

  .step-title { font-size: 1.2rem; }
  .step-done { gap: 0.3rem; }
  .choice-play.is-revealed .play-label { font-size: 1rem; }

  /* 段の中は、戻り口・段の名前・数を 1 行にまとめる。縦に積むと、文字を
     大きくしたぶん記号の一覧が押し潰される。 */
  #screen-step.is-active {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "back  title count"
      "body  body  body";
    column-gap: 0.8rem;
    row-gap: 0.3rem;
    align-items: baseline;
  }
  #screen-step .learn-head { display: contents; }
  #btn-step-back { grid-area: back; }
  #step-count { grid-area: count; }
  #screen-step .step-title { grid-area: title; text-align: center; }
  #screen-step .step-see, #screen-step .step-drill, #screen-step .step-done { grid-area: body; align-self: stretch; }

  /* 結果も左右に分ける。左に得点と正解の数と次の一手、右に見直しの一覧。
     縦に積むと、文字を大きくしたぶん得点の上か「選び直す」が画面から出る。 */
  #screen-result.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "top     review"
      "stats   review"
      "actions review";
    column-gap: clamp(0.8rem, 3vw, 2rem);
    row-gap: 0.4rem;
    max-width: 60rem;
    align-content: center;
    padding-bottom: 0.4rem;
  }
  .result-top { grid-area: top; }
  .result-stats { grid-area: stats; padding: 0.35rem 0; }
  .review { grid-area: review; }
  #screen-result .result-actions { grid-area: actions; flex-direction: row; align-self: end; }
  #screen-result .result-actions > * { flex: 1; }
  .result-rank { margin: 0; line-height: 1.6; font-size: 1.25rem; }
  .result-score { font-size: clamp(2.4rem, 11vh, 3.4rem); }
  .done-mark { font-size: 1.8rem; }
  .done-head { font-size: 1.6rem; }
  .prompt { font-size: 1.1rem; }
}

/* ── 音価の帯 ──────────────────────────────────────────────────
 *
 * 音符と休符は「どれだけの長さか」が中身のすべてなので、五線の下に 1 小節
 * ぶんの目盛りを引いて、占める長さを面で見せる。音符は塗り、休符は枠だけ。
 * 鳴る／鳴らないを、色ではなく面のあるなしで分ける。
 *
 * 鳴らしている間は、この帯が左から同じ速さで埋まる。長さを耳で分からせる
 * ために音を足す必要がなくなり、楽譜に書いてあるものだけが鳴る。
 */
.val-bed { fill: #f1ebdd; }
.val-span { fill: var(--cobalt); }
.val-span.is-rest { fill: none; stroke: var(--cobalt); stroke-width: 0.12; }
.val-tick { stroke: #cdc6b8; stroke-width: 0.08; }

/* 埋まっていくぶん。幅そのものを左から広げる。 */
.val-fill { fill: var(--ochre); }
.val-fill.is-rest { fill: var(--vermilion); opacity: 0.5; }

/* 問いのあいだは、長さの帯を伏せる。
 *
 * 帯は「どれだけの長さか」をそのまま見せるもので、音符と休符の問いでは
 * 答えそのものになる。出したままだと、記号を読まずに帯の長さだけで選べて
 * しまう。目盛りは残して、埋まる面だけを隠す。長さを測る物差しがそこに
 * あることは見えていてよい。
 */
.is-quiz .val-span,
.is-quiz .val-fill { visibility: hidden; }

/* 拍の数。
 *
 * マスごとに 1〜4 を置き、帯の先が入ったマスの数を点ける。点いた数を
 * 数えればそのまま拍の数になる。消えている数は物差しの目盛りと同じ扱いで、
 * 帯の色の上に乗るものだけ、読める色へ塗り分ける。
 */
.val-count {
  font-family: var(--font-display);
  font-size: 0.82px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: central;
  fill: #b3ab9c;
  transform-box: fill-box;
  transform-origin: center;
}
.val-count.in-span { fill: rgba(255, 252, 244, 0.72); }
.val-count.in-span.is-rest { fill: var(--ink-soft); }
.val-count.is-on,
.val-count.in-span.is-on { fill: var(--ink); font-weight: 700; }
/* いま数えている拍。拍の頭で一度だけ弾ませる。 */
.val-count.is-now { animation: val-count-beat 0.3s ease-out; }
@keyframes val-count-beat {
  from { transform: scale(1.45); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .val-count.is-now { animation: none; }
}

/* 問いのあいだは、どの数も目盛りと同じ色に揃える。帯の上に乗る数だけ
 * 色が違うと、それで長さが分かってしまう。 */
.is-quiz .val-count.in-span,
.is-quiz .val-count { fill: #b3ab9c; font-weight: 500; }

/* ── 意匠B で足した部品 ─────────────────────────────────────── */

.icon-btn:active {
  transform: translateY(4px);
  box-shadow: var(--lip-down);
}

/* ── ソルちゃん ── */
.sol-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sol {
  display: block;
  flex: none;
}

/* 表紙。題字の上に、吹き出しを連れて立つ */
.sol-hero {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.2rem;
  margin: 0 0 0.2rem;
}

.sol-hero .sol {
  width: 5.4rem;
  height: 6.3rem;
}

.sol-bubble {
  position: relative;
  margin: 0 0 2.4rem;
  padding: 0.45rem 0.9rem;
  background: var(--white);
  border-radius: 18px;
  font-size: 1.05rem;
  line-height: 1.6;
  white-space: nowrap;
}

.sol-bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 0.7rem;
  border: 9px solid transparent;
  border-right-color: var(--white);
  border-left: 0;
}

/* 問いかけ。ソルちゃんの吹き出しとして問いを出す */
.ask {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* 問いの横のソルちゃん。吹き出しより背を高くすると問いの行が伸び、五線紙と四択の
   高さを奪う（390×760 で札が2行になる問いのとき、ページが 7px あふれた）。
   吹き出しと同じ高さに収める */
.sol-ask {
  width: 2.1rem;
  height: 2.45rem;
  margin-top: 0;
}

.sol-ask .sol-h {
  display: none;
}

/* 自分で当てたときだけ笑う。時間切れや誤答で正解が示されたときは笑わない（game.js が body に is-cheer を付ける） */
body.is-cheer .sol-ask .sol-h {
  display: inline;
}

body.is-cheer .sol-ask .sol-n {
  display: none;
}

body.is-cheer .sol-ask {
  animation: sol-hop 420ms cubic-bezier(0.3, 1.6, 0.5, 1);
}

.ask .prompt {
  position: relative;
  margin: 0;
  padding: 0.35rem 0.95rem 0.2rem;
  background: var(--white);
  border-radius: 18px;
  color: var(--ink);
}

.ask .prompt:empty {
  display: none;
}

.sol-result {
  width: 4.6rem;
  height: 5.4rem;
  /* 下に続くひと言のふりがなが、ソルちゃんの足元に付かない高さを空ける */
  margin: 0 auto 1rem;
}

.sol-done {
  width: 6rem;
  height: 7rem;
  margin: 0 auto;
  animation: sol-hop 700ms cubic-bezier(0.3, 1.6, 0.5, 1) 2;
}

.pick > * {
  position: relative;
  z-index: 1;
}

#pick-home .pick, #pick-mode .pick {
  color: var(--white);
}

#pick-home .pick .pick-title, #pick-mode .pick .pick-title {
  color: var(--white);
}

#pick-home .pick .pick-note, #pick-mode .pick .pick-note {
  color: rgba(255, 255, 255, 0.92);
}

#pick-home .pick:nth-child(1)::after {
  content: "\E050";
}

#pick-home .pick:nth-child(2)::after {
  content: "\E1D7";
}

#pick-home .pick:nth-child(3)::after {
  content: "\E262";
}

#pick-mode .pick:nth-child(1)::after {
  content: "\E4C0";
}

#pick-mode .pick:nth-child(2)::after {
  content: "\E1D7";
}

#pick-mode .pick:nth-child(3)::after {
  content: "\E050";
}

#pick-home .pick:active, #pick-mode .pick:active {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.ghost-btn:active {
  transform: translateY(4px);
  box-shadow: var(--lip-down);
}

.choice-key::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.7rem;
  height: 1.7rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--grape);
  z-index: -1;
}

.choice.is-correct .choice-key::before {
  background: rgba(255, 255, 255, 0.28);
}

.choice.is-wrong .choice-key::before {
  background: rgba(255, 255, 255, 0.28);
}

/* 聴いて選ぶ札 */
.choice-play .choice-key::before {
  width: 1.5rem;
  height: 1.5rem;
}

.choice-play.is-picked .choice-key::before {
  background: var(--ink);
}


.hud-combo-num, .hud-score-num {
  font-family: var(--font-display);
  color: var(--ink);
}

.hud-combo.is-up .hud-combo-num, .hud-combo.is-hot .hud-combo-num {
  color: var(--tomato);
}

.hud-combo-label, .hud-score-label {
  color: var(--ink-soft);
}

.cs-line[data-line].is-lit {
  background: var(--sun);
}

body.is-double {
  background: #ffeeb8;
}

.sheet-lead, .sheet-label {
  color: var(--ink-soft);
}

.sheet .ghost-btn {
  box-shadow: 0 4px 0 #d9e3ef;
  background: #f3f8ff;
}

@keyframes sol-hop {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* 縦に短い画面ではソルちゃんを小さくし、さらに短いと畳む */
@media (max-height: 760px) and (orientation: portrait) {
  .sol-hero .sol {
    width: 3.9rem;
    height: 4.5rem;
  }
  .sol-bubble {
    margin-bottom: 1.6rem;
    font-size: 0.98rem;
    padding: 0.3rem 0.75rem;
  }
}

@media (max-height: 680px) and (orientation: portrait) {
  .sol-hero {
    display: none;
  }
}

/* 横に寝かせた画面。ソルちゃんを畳み、四択の札の名前と意味を1行に流す。
   名前と意味は flex の折り返しではなく文字の流れで並べる。どのブラウザでも
   札の高さの見積もりが中身と合う。 */
@media (orientation: landscape) and (max-height: 620px) {
  .sol-hero {
    display: none;
  }
  .sol-result {
    display: none;
  }
  .sol-done {
    display: none;
  }
  .choice-pair .choice-name, .choice-pair .choice-meaning {
    display: inline;
  }
  .choice-pair .choice-name {
    margin-right: 0.7em;
  }
  /* 横向きの四択は高さの決まった枠の中で送る。行の高さを「中身の高さ」にしないと、
       札の min-height が行の高さになり、意味が2行に折れた札が伸びずに縁で切れる。
       図を選ぶ札（なれる）と聴いて選ぶ札は、枠に収まるよう縮む作りなので、これを掛けない。 */
  #choices:not(.is-play), #drill-choices:not(.is-figure) {
    grid-auto-rows: max-content;
  }
}

@media (max-height: 640px) {
  .sol-ask {
    display: none;
  }
}

/* 結果では見直しの一覧のほうが大事。一覧に高さを譲れる背の高い画面にだけ出す */
@media (max-height: 820px) {
  .sol-result {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sol-ask, .sol-done {
    animation: none !important;
  }
}

/* 大きな画面（iPad・パソコン）。style.css の寸法はほとんどが rem で書いてある。
   基準の字の大きさを画面に合わせて上げれば、組み方はそのままで全体が比例して
   大きくなる。iPad でスマートフォンの大きさのまま中央に小さく置かれるのを防ぐ。 */
@media (min-width: 700px) and (min-height: 700px) {
  /* 高さの足りない横長の画面（iPad の横、パソコン）では上げすぎると縦にあふれる。
       高さと幅の両方で頭を押さえる */
  html {
    font-size: clamp(16px, min(2vh, 2.7vw), 24px);
  }
  body {
    font-size: 1.1rem;
  }
  /* なれる の問いと意味。iPad は譜面台に置いて離れて見るので、下の札に負けない
     大きさにする。スマートフォンでは長い名前が折り返すので上げない。 */
  #drill-prompt { font-size: 1.7rem; }
  .drill-hint { font-size: 1.4rem; }
}

/* 入口の札が横に並ぶ幅では札が細くなり、透かしの記号が字に掛かる。薄くして右下へ寄せる */
@media (min-width: 720px), (orientation: landscape) and (max-height: 620px) {
  .pick::after {
    top: auto;
    bottom: 0.3rem;
    transform: none;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.3);
  }
}

/* 何を練習する? の札は、幅のある画面と横向きで横に3つ並ぶ。札が細くなると
   透かしの記号が添え書きに掛かるので、横に並ぶときは出さない */
@media (min-width: 560px), (orientation: landscape) and (max-height: 620px) {
  #pick-mode .pick::after {
    display: none;
  }
}

/* 高さ 660px 以下の縦画面で、記号の出題画面が縦にあふれていた（600px で 25px）。
   上の帯、問いの吹き出し、部品の間隔、札の下の余白を少しずつ詰めて、四択と得点を
   画面に収める。札の上の余白はふりがなの逃げなので詰めない。 */
@media (max-height: 660px) and (orientation: portrait) {
  .topbar {
    padding-top: max(0.4rem, env(safe-area-inset-top));
    padding-bottom: 0.4rem;
  }
  .icon-btn {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
  }
  .screen-play {
    gap: 0.35rem;
  }
  .progress {
    margin-bottom: 0.45rem;
  }
  .ask .prompt {
    padding-top: 0.2rem;
    padding-bottom: 0.1rem;
  }
  .choices {
    gap: 0.35rem;
  }
  .choice {
    padding-bottom: 0.35rem;
  }
  .choice-key {
    margin-bottom: -0.35rem;
    margin-right: 0.45rem;
  }
  .hud {
    padding-top: 0;
    margin-top: 0;
  }
}

/* 高さ 900px 以下の縦画面の結果で、「もう一回 見ておこう」の一覧が1行ほどしか
   見えなかった。得点をひと言と同じ行にまとめ、正解と最高連続を1段にし、2つの
   ボタンを横に並べて、空いた高さを一覧へ回す。 */
@media (max-height: 900px) and (orientation: portrait) {
  .screen-result {
    gap: 0.55rem;
    justify-content: flex-start;
    padding-top: 0.2rem;
  }
  .result-top {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 0.7rem;
  }
  .result-rank {
    margin: 0;
    font-size: 1.25rem;
  }
  .result-score {
    font-size: 2.9rem;
  }
  .result-score-label {
    margin: 0;
  }
  .result-stats {
    padding: 0;
  }
  .result-stats div {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.35rem 0 0.25rem;
  }
  .result-stats dt {
    margin: 0;
  }
  .result-stats dd {
    font-size: 1.35rem;
  }
  .review-head {
    margin-bottom: 0.35rem;
  }
  #screen-result .result-actions {
    flex-direction: row;
  }
  #screen-result .result-actions > * {
    flex: 1;
  }
  #screen-result .start-btn {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  /* ソルちゃんが出る背の高い画面では、得点の行に割り込まないよう1行を丸ごと使う */
  .result-top .sol-result {
    flex: 0 0 100%;
  }
}

/* 横向きで高さ 400px 未満。下の感想の口と、結果の数の段と、できたの部品の間隔を
   詰めて、上の部品との重なりを消す */
@media (orientation: landscape) and (max-height: 400px) {
  .feedback-open {
    line-height: 1.5;
  }
  .feedback-open-row {
    margin-top: 0.15rem;
  }
  .result-stats div {
    padding: 0.1rem 0 0;
  }
  .result-stats dt {
    line-height: 1.5;
    margin-bottom: 0;
  }
  .sound-note {
    line-height: 1.6;
  }
  .step-done {
    gap: 0.2rem;
  }
  .step-done .result-actions {
    gap: 0.35rem;
  }
}

/* 高さ 620px 以下の縦画面の表紙。題字と入口の札と音の断りを詰めて、下の感想の口
   までを画面に収める */
@media (max-height: 620px) and (orientation: portrait) {
  .title-name {
    font-size: 1.7rem;
  }
  .news-open-row {
    margin-top: 0;
  }
  .screen-pick, .setup {
    gap: 0.4rem;
  }
  .pick {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }
  .pick-title {
    line-height: 1.45;
  }
  .pick-note {
    line-height: 1.65;
  }
  .sound-note {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    line-height: 1.65;
  }
}

/* 幅のある窓（パソコン、iPad の縦と横）でも、結果は左右に分ける。左に得点と正解の数と
   次の一手、右に見直しの一覧。縦に積むと、ボタンが場所を取り、見直しの一覧が
   数十px に潰れる。横に寝かせたスマートフォン（高さ 620px 以下）は上の規則で
   同じ組み方になっている。 */
@media (min-width: 720px) and (min-height: 621px) {
  .stage:has(#screen-result.is-active) { height: 100vh; height: 100dvh; }
  .main:has(#screen-result.is-active) { min-height: 0; }
  #screen-result.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    /* 左の塊（得点・正解の数・ボタン）を上下の真ん中に寄せる。右の一覧は高さいっぱい */
    grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    grid-template-areas:
      ".       review"
      "top     review"
      "stats   review"
      "actions review"
      ".       review";
    column-gap: clamp(1rem, 3vw, 2.5rem);
    row-gap: 0.9rem;
    max-width: 60rem;
    align-content: center;
    padding-bottom: 0.6rem;
  }
  .result-top { grid-area: top; }
  .result-stats { grid-area: stats; }
  .review { grid-area: review; align-self: stretch; }
  #screen-result .result-actions { grid-area: actions; align-self: start; }
}

/* ── ふりがなの付いたラベルの文字を、枠の上下の真ん中に置く ──────────────
 * 読みは親字の上に浮かせて置く（場所を取らない）ので、枠は親字だけを見て中央を
 * 決める。そのままだと、親字と読みを合わせた文字の塊が 4〜8px 上に寄る。
 * 読みが付いている枠だけ、上の余白を増やし、下の余白を同じだけ減らして、塊を
 * 真ん中へ下ろす（枠の高さは変えない。下の余白が足りない枠だけ少し高くなる）。
 * ずらす量は、塊のずれを測って部品ごとに決めた。rem で持つので、大きな画面で
 * 字の基準が上がっても同じ割合でずれる。読みの無い枠は動かさない。
 * 画面の条件で余白が変わる部品は、同じ条件の中にも同じ形で書く（条件の中の規則が
 * 後から勝つよう、この順に並べてある）。 */
.icon-btn:has(.furi)                    { padding-top: calc(0.28rem + 0.375rem); padding-bottom: max(0px, calc(0.28rem - 0.375rem)); }
.start-btn:has(.start-btn-main .furi)   { padding-top: calc(0.72rem + 0.36rem);  padding-bottom: calc(0.72rem - 0.36rem); }
.ghost-btn:has(.furi)                   { padding-top: calc(0.7rem + 0.43rem);   padding-bottom: calc(0.7rem - 0.43rem); }
.confirm-btn:has(.furi)                 { padding-top: calc(0.62rem + 0.45rem);  padding-bottom: calc(0.62rem - 0.45rem); }
.step-row:has(.step-name .furi)         { padding-top: calc(0.75rem + 0.29rem);  padding-bottom: calc(0.5rem - 0.29rem); }
.range-preset:has(.furi)                { padding-top: calc(0.35rem + 0.29rem);  padding-bottom: max(0px, calc(0.2rem - 0.29rem)); }
.range-mode:has(.furi)                  { padding-top: calc(0.05rem + 0.54rem);  padding-bottom: 0; }
.sound-note:has(.furi)                  { padding-top: calc(0.4rem + 0.2rem);    padding-bottom: calc(0.4rem - 0.2rem); }
.ask .prompt:has(.furi)                 { padding-top: calc(0.35rem + 0.42rem);  padding-bottom: 0; }
.news-voice:has(.furi)                  { padding-top: calc(0.3rem + 0.25rem);   padding-bottom: 0; }
.learn-hear:has(.furi)                  { padding-top: calc(0.22rem + 0.45rem);  padding-bottom: 0; }
#screen-result .start-btn:has(.start-btn-main .furi) { padding-top: calc(0.72rem + 0.5rem); padding-bottom: calc(0.72rem - 0.5rem); }
/* はじめる。読みは下の添え書き（段）の側にあり、塊が下に寄るので少し上げる */
#btn-range-go:has(.furi)                { padding-top: calc(0.72rem - 0.12rem);  padding-bottom: calc(0.72rem + 0.12rem); }
.news-older summary:has(.furi)          { padding-top: calc(0.45rem + 0.28rem);  padding-bottom: calc(0.3rem - 0.28rem); }
.double-mark                            { padding-top: calc(0.3em + 0.15rem);    padding-bottom: calc(0.36em - 0.15rem); }
/* 入口の札。横に並ぶと札の高さがそろって伸びるので、中身を上下の真ん中に寄せる */
.pick                                   { justify-content: center; }
.pick:has(.pick-title .furi)            { padding-top: calc(0.7rem + 0.42rem);   padding-bottom: calc(0.7rem - 0.42rem); }
/* 四択の札。名前に読みがあるものは下ろす */
.choice.choice-pair:has(.choice-name .furi) { padding-top: calc(0.62rem + 0.46rem); padding-bottom: calc(0.62rem - 0.46rem); }

@media (max-height: 740px) {
  .choice.choice-pair:has(.choice-name .furi) { padding-top: calc(0.55rem + 0.46rem); padding-bottom: calc(0.55rem - 0.46rem); }
}
@media (max-height: 900px) and (orientation: portrait) {
  #screen-result .start-btn:has(.start-btn-main .furi) { padding-top: calc(0.5rem + 0.5rem); padding-bottom: 0; }
  .result-stats div:has(.furi)          { padding-top: calc(0.35rem + 0.18rem);  padding-bottom: calc(0.25rem - 0.18rem); }
}
@media (max-height: 700px) and (orientation: portrait) {
  .pick:has(.pick-title .furi)          { padding-top: calc(0.4rem + 0.42rem);   padding-bottom: max(0px, calc(0.4rem - 0.42rem)); }
  .sound-note:has(.furi)                { padding-top: calc(0.3rem + 0.2rem);    padding-bottom: calc(0.3rem - 0.2rem); }
}
@media (max-height: 660px) and (orientation: portrait) {
  .icon-btn:has(.furi)                  { padding-top: calc(0.1rem + 0.52rem);   padding-bottom: 0; }
  .ask .prompt:has(.furi)               { padding-top: calc(0.2rem + 0.49rem);   padding-bottom: 0; }
  .choice.choice-pair:has(.choice-name .furi) { padding-top: calc(0.55rem + 0.2rem); padding-bottom: calc(0.35rem - 0.2rem); }
  /* 名前に読みの無い札は、下の余白を詰めたぶんだけ下に寄るので上げる */
  .choice.choice-pair:not(:has(.choice-name .furi)) { padding-top: calc(0.55rem - 0.1rem); padding-bottom: calc(0.35rem + 0.1rem); }
}
@media (max-height: 620px) and (orientation: portrait) {
  .pick:has(.pick-title .furi)          { padding-top: calc(0.3rem + 0.42rem);   padding-bottom: 0; }
  .sound-note:has(.furi)                { padding-top: calc(0.2rem + 0.2rem);    padding-bottom: 0; }
}
@media (orientation: landscape) and (max-height: 620px) {
  .step-row:has(.step-name .furi)       { padding-top: calc(0.35rem + 0.45rem);  padding-bottom: 0; }
  .range-preset:has(.furi)              { padding-top: calc(0.05rem + 0.45rem);  padding-bottom: 0; }
  .sound-note:has(.furi)                { padding-top: calc(0.25rem + 0.2rem);   padding-bottom: calc(0.25rem - 0.2rem); }
  .pick:has(.pick-title .furi)          { padding-top: calc(0.5rem + 0.42rem);   padding-bottom: calc(0.5rem - 0.42rem); }
  /* 横向きの「はじめる」は添え書きと1行。読みは添え書き（段）の側に付く */
  #btn-range-go:has(.furi)              { padding-top: calc(0.2rem + 0.3rem);    padding-bottom: 0; }
  /* 横向きの札は、上の余白を読みのぶん多く取ってある。読みの無い札（リズムの読み方）は
     そのぶん下に寄るので、上下をそろえる */
  /* 横向きの札は名前と意味が1行に流れるので、どちらかに読みがあれば塊は上に伸びる */
  .choice.choice-pair:has(.furi) { padding-top: calc(0.85rem + 0.1rem); padding-bottom: calc(0.25rem - 0.1rem); }
  .choice:not(:has(.furi)):not(.choice-figure):not(.choice-play) { padding-top: calc(0.85rem - 0.29rem); padding-bottom: calc(0.25rem + 0.29rem); }
}
@media (orientation: landscape) and (max-height: 400px) {
  .result-stats div:has(.furi)          { padding-top: calc(0.1rem + 0.65rem);   padding-bottom: 0; }
}
/* 横向きのずかん。選んだ記号の名前は五線紙のすぐ下に来るので、名前の読みが紙の
   下端に食い込まないだけ空ける */
@media (orientation: landscape) and (max-height: 620px) {
  #screen-book .learn-text { margin-top: 0.55rem; }
}

/* 正解・最高連続の箱の見出しは、読みのほうが親字より幅が広い（「さいこう」と「最高」）。
   ふりがなの基本の置き方では、広い読みは右へあふれるので、見出しの塊が箱の中央から
   右へ寄る。この箱の中だけ、読みを親字の真ん中に置く。箱は画面の端に来ないので、
   読みが左へはみ出しても切れない（ふりがな全体に掛けると、左端の見出しで読みが切れる）。 */
.result-stats .furi-rt { left: 50%; right: auto; margin: 0 0 0.2em; transform: translateX(-50%); }

/* 聴いて選ぶ札の番号。縦に積む札なので、四択の札のように上下の負の余白で番号の面を
   札の高さいっぱいに伸ばす必要がない。負の余白のままだと ▶ が番号の枠へ引き上げられ、
   丸に食い込む。丸と同じ大きさの枠にして、丸を枠の真ん中に置く。 */
.choice-play .choice-key { margin: 0; min-width: 1.5rem; height: 1.5rem; }
/* 図を選ぶ札の番号。札の左上の角へ負の余白で寄せていたが、丸を番号の枠の真ん中に
   置くと、丸の上が札の縁からはみ出して切れる。丸と同じ大きさの枠にして札の内側に置く */
.choice-figure .choice-key { margin: 0; width: 1.7rem; height: 1.7rem; }
/* 聴いて選ぶ札。丸の下の ▶ が丸に触れないだけ空ける */
.choice-play .choice-key { margin-bottom: 0.2rem; }

/* 段の中（みる）とずかんで、選んだ記号の名前と読みは五線紙のすぐ下に来る。
   名前の読みが紙の下端に付かないだけ空ける */
.step-see .learn-text, #screen-book .learn-text { padding-top: 0.45rem; }

/* 全問正解のときは「もう一回 見ておこう」の一覧が出ない（隠れる）。結果を左右に
   分けたままだと右の列が空き、得点とボタンの塊が左に寄って見える。一覧が隠れて
   いるときは1段にして真ん中に置く。 */
@media (orientation: landscape) and (max-height: 620px) {
  #screen-result.is-active:has(#review[hidden]) {
    grid-template-columns: minmax(0, 30rem);
    grid-template-areas: "top" "stats" "actions";
    justify-content: center;
  }
}
@media (min-width: 720px) and (min-height: 621px) {
  #screen-result.is-active:has(#review[hidden]) {
    grid-template-columns: minmax(0, 34rem);
    grid-template-areas: "." "top" "stats" "actions" ".";
    justify-content: center;
  }
}

/* 横に寝かせた画面の聴いて選ぶ札。2段に並んだ4枚が枠に収まるよう、上下の余白と
   番号・▶・聞くの間隔を詰める */
@media (orientation: landscape) and (max-height: 620px) {
  /* 四択の札は左に番号の列があるので、横向きでは左の余白を 0 にしてある。聴いて選ぶ札は
     番号を上に積むので、その規則を継ぐと中身が左に寄る。左右をそろえる */
  .choice-play { padding: 0.35rem 0.5rem; gap: 0.1rem; min-height: 0; }
  .choice-play .choice-key { margin-bottom: 0; }
}
/* 感想・アップデートの板。中で送るときに右にだけスクロールバーの幅が付くと、中身が
   左に寄る。左右に同じ幅を取っておく */
.sheet-panel { scrollbar-gutter: stable both-edges; }
/* 大きなボタンの読みは、幅が親字より広いと右へあふれて、文字の塊が右に寄る。
   ボタンの中だけ読みを親字の真ん中に置く（ボタンは画面の端に来ないので、読みが
   左へ出ても切れない） */
.start-btn .furi-rt, .ghost-btn .furi-rt { left: 50%; right: auto; margin: 0 0 0.2em; transform: translateX(-50%); }