/* 譜読みと調号（reading.js）。
 *
 * style.css とは分けて置く。ほかの画面の見た目を触らずに足し引きできるように
 * するため。色と部品の形は style.css の変数とクラスをそのまま借りる。
 */

/* ── 何を練習する? の札 ──
   札が 5 枚になり、携帯の縦画面で 1 列に積むと下がはみ出す。2 列にする。
   幅のある画面は 3 列。 */
#pick-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { #pick-mode { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 札の色。並び順で決めると、札が増えたり減ったりするたびに色がずれる。
   種類の印で決める。 */
#pick-mode .pick[data-mode="read"] { background: #2f8cf0; box-shadow: 0 5px 0 #1f6fc4; }
#pick-mode .pick[data-mode="read"]::after { content: "\E0A4"; }
#pick-mode .pick[data-mode="key"] { background: var(--sun); box-shadow: 0 5px 0 var(--sun-d); }
#pick-mode .pick[data-mode="key"]::after { content: "\E262"; color: rgba(43, 35, 88, 0.22); }
#pick-mode .pick[data-mode="key"] .pick-title,
#pick-mode .pick[data-mode="key"] .pick-note { color: var(--ink); }

.range-mode[data-mode="read"] { border-left-color: transparent; background: #2f8cf0; }
.range-mode[data-mode="key"] { border-left-color: transparent; background: var(--sun); color: var(--ink); }

/* ── おぼえるの一覧の見出し ──
   テーマの名前は、れんしゅうの札と同じ。段の番号はテーマごとに 1 から数える。 */
.step-theme {
  margin: 0.5rem 0 0;
  font-size: 1.05rem;
  line-height: 1.95;
  color: var(--ink);
  grid-column: 1 / -1;
}
.step-theme:first-child { margin-top: 0; }

/* ── ドレミファソラシ の 7 つ ──
   鍵盤と同じく横 1 列に並べる。番号は小さく上に置き、音の名前を主にする。 */
.choices.is-letters {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}
.choice-letter {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.5rem 0;
  min-height: 3.6rem;
  text-align: center;
}
/* 番号は左上の角に小さく載せ、音の名前を札の真ん中に置く。 */
.choice-letter .choice-key {
  position: absolute;
  left: 0.2rem;
  top: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  font-size: 0.66rem;
}
.choice-letter .choice-key::before { width: 1.1rem; height: 1.1rem; }
.choice-letter .choice-body { flex: none; }
.choice-letter .choice-name {
  font-size: clamp(1.05rem, 4.6vw, 1.45rem);
  line-height: 1.3;
  white-space: nowrap;
}

/* 調の四択。名前が短いので 2 列にし、縦に長い大譜表へ高さを回す。 */
.choices.is-keys { grid-template-columns: 1fr 1fr; }

/* ── 大譜表の紙 ──
   大譜表は縦に 2 段あり、記号のカードより背が高い。同じ高さの枠では、音符が
   読めない大きさまで縮む。
   みる・ずかんの紙は、図の縦横比のまま上限まで伸ばす。問いの紙（遊ぶ画面と
   なれる）は、答えの札と得点が取った残りをそのまま紙にする。図を紙の中に
   浮かせ、図の縦横比が紙の高さを押し広げないようにする。押し広げると、
   背の低い画面で答えの札と得点が画面の外へ出る。 */
.paper.is-grand { max-height: 24rem; min-height: 6rem; }
.question .paper.is-grand, #drill-paper.is-grand { position: relative; flex: 1 1 0; }
.question .paper.is-grand > .score, #drill-paper.is-grand > .score {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  width: calc(100% - 1rem);
  height: calc(100% - 1rem);
  max-height: none;
}
@media (max-height: 560px) and (orientation: landscape) {
  .paper.is-grand { max-height: none; min-height: 0; }
}
@media (orientation: landscape) and (max-height: 620px) {
  .paper.is-grand { max-height: none; min-height: 0; }
  /* 横に寝かせた携帯は、右の列に札を置く。7 つは 4 と 3 に折る。 */
  .choices.is-letters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .choice-letter { min-height: 2.8rem; padding: 0.3rem 0; }
}

/* 調の四択を 2 列に並べるとき、番号を左の帯に置くと名前と意味の幅が足りず、
   「はじ／まる」のように語の途中で折れる。番号は左上の角に小さく載せ、
   文字は札の幅いっぱいに中央で組む。 */
.choices.is-keys .choice {
  flex-direction: column;
  justify-content: center;
  padding: 0.55rem 0.4rem 0.5rem;
  text-align: center;
}
.choices.is-keys .choice-key {
  position: absolute;
  left: 0.45rem;
  top: 0.45rem;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  font-size: 0.8rem;
}
.choices.is-keys .choice-key::before { width: 1.4rem; height: 1.4rem; }
.choices.is-keys .choice-body { flex: none; align-items: center; }
.choices.is-keys .choice-meaning { white-space: nowrap; font-size: 0.95rem; }

/* 一覧の札。1 段だけの図は正方形に近いので、横長の札では小さくなる。
   札の背を高くして、線と符頭を読める大きさにする。 */
#learn-list .learn-item.is-grand .item-figure { aspect-ratio: 4 / 3; }
.book-row .learn-item.is-grand .item-figure { height: 3.4rem; }

/* 狭い幅では 7 つの札が細く、角の番号が音の名前に重なる。番号はキーボードで
   選ぶための印なので、指で押す幅の画面では出さない。 */
@media (max-width: 559px) {
  .choice-letter .choice-key { display: none; }
}

/* 横に寝かせた携帯。札が 5 枚になり、2 行に積むと下がはみ出す。3 列 2 行にして、
   添え書きを畳んで札の背を低くする。 */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) {
  #pick-mode { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #pick-mode .pick-note { display: none; }
}

/* 図を選ぶ問いの札。1 段だけの図は正方形に近く、幅の広い画面では札の幅に
   合わせて背が伸び、4 枚が画面に収まらない。図の高さを画面の高さで押さえる。 */
.choice-figure.is-grand .figure-box { height: clamp(3.4rem, 17vh, 10rem); }