/* Japanese Match and Listen reuse the established practice tile sizes. Only
   the content frame is specialized: native script, kana, and rōmaji are one
   measured group, centered within the same tile that every other language
   already uses. */
.is-japanese-practice .practice-choice.japanese-three-track,
.is-japanese-practice .practice-prompt.text-prompt {
  align-content:center;
  justify-items:center;
  gap:var(--japanese-match-choice-gap, var(--japanese-listen-choice-gap, var(--japanese-match-prompt-gap, 5px)));
}

.is-japanese-practice .practice-choice.japanese-three-track {
  grid-template-rows:repeat(var(--japanese-track-count, 3), max-content);
}
.is-japanese-practice .practice-choice.japanese-three-track.tracks-1 { --japanese-track-count:1; }
.is-japanese-practice .practice-choice.japanese-three-track.tracks-2 { --japanese-track-count:2; }
.is-japanese-practice .practice-choice.japanese-three-track.tracks-3 { --japanese-track-count:3; }
.is-japanese-practice .practice-choice.japanese-three-track.has-artwork { grid-template-rows:max-content repeat(var(--japanese-track-count, 3), max-content); }

.is-japanese-practice .practice-choice.japanese-three-track .practice-hanzi,
.is-japanese-practice .practice-choice.japanese-three-track .practice-kana,
.is-japanese-practice .practice-choice.japanese-three-track .practice-romanization,
.is-japanese-practice .practice-prompt.text-prompt .practice-prompt-hanzi,
.is-japanese-practice .practice-prompt.text-prompt .practice-prompt-kana,
.is-japanese-practice .practice-prompt.text-prompt .practice-prompt-romanization {
  width:100%;
  min-width:0;
  max-width:100%;
  margin:0;
  overflow:hidden;
  text-align:center;
  white-space:nowrap;
}

.is-japanese-practice .practice-choice.japanese-three-track .practice-hanzi,
.is-japanese-practice .practice-prompt.text-prompt .practice-prompt-hanzi {
  color:#1d1d1d;
  font-family:"PingFang SC","Hiragino Sans",sans-serif;
  font-size:var(--japanese-match-choice-native-size, var(--japanese-listen-choice-native-size, var(--japanese-match-prompt-native-size, 34px))) !important;
  font-weight:700;
  line-height:1.05;
}

.is-japanese-practice .practice-choice.japanese-three-track .practice-kana,
.is-japanese-practice .practice-prompt.text-prompt .practice-prompt-kana {
  color:var(--pinyin);
  font-family:"Avenir Next",Avenir,"Hiragino Sans",sans-serif;
  font-size:var(--japanese-match-choice-kana-size, var(--japanese-listen-choice-kana-size, var(--japanese-match-prompt-kana-size, 20px))) !important;
  font-weight:600;
  line-height:1.1;
}

.is-japanese-practice .practice-choice.japanese-three-track .practice-romanization,
.is-japanese-practice .practice-prompt.text-prompt .practice-prompt-romanization {
  color:#248eaa;
  font-family:"Avenir Next",Avenir,sans-serif;
  font-size:var(--japanese-match-choice-romanization-size, var(--japanese-listen-choice-romanization-size, var(--japanese-match-prompt-romanization-size, 18px))) !important;
  font-weight:500;
  line-height:1.12;
}

.is-japanese-practice .practice-choice.japanese-three-track.has-artwork img {
  width:var(--japanese-listen-choice-artwork-size);
  height:var(--japanese-listen-choice-artwork-size);
}

.is-japanese-practice .practice-prompt.text-prompt {
  grid-template-rows:repeat(3, max-content);
  gap:var(--japanese-match-prompt-gap, 6px);
}

/* Compact header controls use the same colors as Review: kana is light blue,
   while rōmaji has its own teal control and never inherits pinyin's label. */
.practice-control.practice-kana-control { font-size:12px; line-height:1; white-space:nowrap; }

@media (max-width:899px) {
  /* Match's phone answers are compact cards, not full-screen prompts. Extra
     * inset keeps short Japanese labels from visually filling the tile. */
  .is-japanese-practice.mode-match .practice-choice.japanese-three-track {
    padding:clamp(14px,4vw,20px);
  }

  /* A Listen tile with artwork needs visible air below its image and around
     * the text group, especially when only kana or rōmaji is shown. */
  .is-japanese-practice.mode-listen .practice-choice.japanese-three-track.has-artwork {
    padding:clamp(12px,3.4vw,18px) clamp(12px,3.4vw,18px) clamp(17px,4.6vw,22px);
  }
}