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

/* ── 何を練習する? の4枚目の札 ── */

#pick-mode .pick:nth-child(4) { background: var(--ink); box-shadow: 0 5px 0 #17122f; }
#pick-mode .pick:nth-child(4)::after { content: "\E084"; }

/* 札が4枚になったので、横に並べる画面では 2×2 か 4 つ並びにする。
   3 列のままだと 4 枚目だけが次の行に取り残される。 */
@media (min-width: 560px) { #pick-mode { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { #pick-mode { grid-template-columns: repeat(4, 1fr); } }
/* 横に寝かせた携帯は高さが足りず、2×2 にすると下の「書く」の口に札が重なる。
   札が3枚だったときと同じく1行に収める。 */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) {
  #pick-mode { grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
  /* 札が細くなるぶん、左の余白と添え書きを詰めて、添え書きが語の途中で折れないようにする */
  #pick-mode .pick { padding-left: 0.8rem; padding-right: 0.6rem; }
  #pick-mode .pick-note { font-size: 0.86rem; }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) and (max-width: 620px) {
  #pick-mode .pick-note { font-size: 0.8rem; }
}

/* 札の添え書きは、語のまとまり（.pick-seg）の間でだけ折る。札が細くなる横向きで、
   「当て／る」のように語の途中で折れないようにするため。 */
.pick-seg { display: inline-block; }

/* ── 拍子の画面 ── */

/* 4 小節を 1 段に並べるため、ほかの画面より幅を広く取る。 */
.screen-meter {
  max-width: 72rem;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
  padding-bottom: 0.8rem;
}

#meter-play {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1.6vw, 0.8rem);
}

.meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.meter-progress { margin: 0; }
.meter-progress i { margin: 0 0.22rem; }

.meter-prompt { margin: 0; }

.meter-rule {
  margin: 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-soft);
}

/* 紙。4 小節を 1 段に並べ、幅に収まらないときは横に送る。 */
.meter-paper {
  display: block;
  flex: none;
  max-height: none;
  min-height: 0;
  padding: clamp(0.4rem, 2vw, 1rem) clamp(0.5rem, 2.4vw, 1.2rem);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
/* 送れる向きの端をぼかし、続きがあることを見せる。 */
.meter-paper.is-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
.meter-paper.is-more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); }
.meter-paper.is-more-left.is-more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }

.meter-row { position: relative; margin: 0 auto; }
.paper .meter-score { display: block; width: 100%; height: auto; }

/* 線を置く口。見た目は SVG の点線で、押す場所はこの透明なボタン。 */
.mt-hit {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mt-hit:hover:not(:disabled) { background: rgba(123, 92, 255, 0.08); }
.mt-hit:focus-visible { outline: 3px solid var(--grape); outline-offset: -3px; }
.mt-hit:disabled { cursor: default; }

.mt-guide {
  stroke: var(--grape);
  stroke-opacity: 0.5;
  stroke-width: 0.14px;
  stroke-dasharray: 0.35 0.3;
  stroke-linecap: round;
}
.mt-bar { stroke: var(--ink); display: none; }
.mt-slot.is-on .mt-bar { display: inline; }
.mt-slot.is-on .mt-guide { display: none; }

/* 自分で入れた線。答え合わせまでは紫で太く、頭に × の丸を付ける。
   元からある終止線（黒）や、まだ入れていない候補（薄い点線）と一目で見分け、
   丸の × で「押せば消える」ことを見せる。 */
.mt-slot.is-on .mt-bar { stroke: var(--grape); stroke-width: 0.28px; }
.mt-knob { display: none; }
.mt-slot.is-on .mt-knob { display: inline; }
.mt-knob circle { fill: var(--grape); }
.mt-knob path { stroke: #fff; stroke-width: 0.16px; stroke-linecap: round; fill: none; }
.mt-hit[aria-pressed="true"]:not(:disabled) { background: rgba(123, 92, 255, 0.1); }
.is-judged .mt-slot.is-on .mt-knob { display: none; }
.is-judged .mt-slot.is-on .mt-bar { stroke-width: 0.2px; }

.mt-miss {
  display: none;
  stroke: var(--leaf);
  stroke-width: 0.24px;
  stroke-dasharray: 0.45 0.25;
}
.mt-x {
  display: none;
  fill: var(--tomato-d);
  font-family: var(--font-ui);
  font-size: 1.4px;
  font-weight: 700;
  text-anchor: middle;
}

/* 答え合わせのあと。入れた線が合っていれば緑、余計なら赤と×、入れ忘れは
   緑の点線で、正しい場所を示す。 */
.is-judged .mt-guide { display: none; }
.is-judged .mt-slot.is-ok .mt-bar { stroke: var(--leaf-d); }
.is-judged .mt-slot.is-extra .mt-bar { stroke: var(--tomato); }
.is-judged .mt-slot.is-extra .mt-x { display: inline; }
.is-judged .mt-slot.is-missed .mt-miss { display: inline; }

/* 拍の数。答え合わせのあとだけ出す。 */
.mt-counts { display: none; }
.is-judged .mt-counts { display: inline; }
.mt-count {
  fill: var(--grape-d);
  font-family: var(--font-display);
  font-size: 1.25px;
  letter-spacing: 0.12px;
  text-anchor: middle;
}
.mt-count.is-rest { fill: var(--ink-soft); }

.meter-note {
  margin: 0;
  min-height: 3.8em;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--ink-soft);
}
.meter-note.is-ok { color: var(--leaf-d); }
.meter-note.is-miss { color: var(--tomato-d); }

.meter-foot { display: flex; flex-direction: column; gap: clamp(0.35rem, 1.6vw, 0.8rem); }
.meter-go { margin-top: 0; }

/* ── 5問おわったあと ── */

.meter-done {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}
.meter-done .done-head { font-size: 1.8rem; }
.meter-done .result-actions { width: 100%; max-width: 20rem; }

/* 横に寝かせた携帯。高さが足りず「これで OK」が画面の下へ押し出されるので、
   問いと決まりを1行に、答え合わせの言葉と決めるボタンを横に並べる。 */
@media (orientation: landscape) and (max-height: 500px) {
  #meter-play { gap: 0.5rem; }
  .meter-ask { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 1rem; }
  .meter-foot { flex-direction: row; align-items: center; gap: 0.8rem; }
  .meter-foot .meter-note { flex: 1; min-height: 3.8em; text-align: left; }
  .meter-foot .meter-go { flex: none; width: 13rem; }
}

/* ── 範囲を選ぶ ──
   リズムの範囲の画面と同じ部品（.range-step、.range-preset）を使う。拍子と
   音符・休符の2つの組を上下に置く。 */
.meter-range { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.meter-range .setup { gap: 0.7rem; padding-bottom: 1rem; }
.meter-range .setup-head { margin-bottom: 0; }
.range-mode[data-mode="meter"] { border-left-color: transparent; background: var(--ink); }

.meter-range-group { display: flex; flex-direction: column; gap: 0.4rem; }
.meter-range-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.8rem; }
.meter-range-head { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.9; color: var(--ink); }
.meter-range-list { overflow: visible; }

/* 拍子の段の番号の代わりに、拍子記号の形で2つの数字を縦に積む。 */
.mt-sig { display: flex; flex-direction: column; align-items: center; line-height: 1; font-size: 0.82em; }
.mt-sig i { font-style: normal; display: block; }
.mt-sig i + i { border-top: 2px solid currentColor; padding-top: 1px; margin-top: 1px; }

@media (min-width: 640px) {
  .meter-range .setup { max-width: 52rem; }
  .meter-range-list { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
}