/* Fixed mobile compositions ported from ListenPracticeView and MatchPracticeView. */
/* Match follows Review's single phone/desktop boundary: phone through 899px,
   desktop from 900px. There is intentionally no intermediate composition. */
@media (max-width: 899px) {
  .practice-view { --practice-accent:#2f95c3; --practice-level:#9aa0a3; position:fixed; inset:0; z-index:80; display:flex; flex-direction:column; width:auto !important; min-height:100dvh; margin:0; padding:calc(8px + env(safe-area-inset-top)) 20px calc(14px + env(safe-area-inset-bottom)); overflow:hidden; background:#fdf9ef; font-family:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
  .practice-header { display:grid; grid-template-columns:52px minmax(0,1fr) 52px; align-items:center; height:52px; flex:0 0 52px; }
  /* Keep the streak meter centered on the device even when Safari's visual
     * viewport and its side controls do not resolve to matching grid tracks. */
  .practice-header { position:relative; }
  .practice-header-center { position:absolute; left:50%; top:50%; z-index:1; transform:translate(-50%,-50%); }
  #practice-undo { grid-column:3; justify-self:end; }
  .practice-header .circle-button { width:52px; height:52px; border:0; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(40,32,21,.08); color:#1d1d1d; }
  .practice-header .circle-button .ff-symbol { width:24px; height:24px; margin:auto; }
  #practice-undo { justify-self:end; color:var(--practice-accent); }
  #practice-undo:disabled { color:rgba(0,0,0,.3); }
  .practice-streak { justify-self:center; display:grid; grid-template-columns:38px 122px auto; align-items:center; column-gap:7px; min-width:0; height:42px; padding:0; border:0; background:transparent; color:var(--practice-level); font-family:ui-rounded,"SF Pro Rounded",sans-serif; }
  .practice-streak .practice-fire { display:grid; place-items:center; width:38px; height:38px; color:var(--practice-level); }
  .practice-streak .practice-fire .ff-symbol,.practice-streak .practice-fire svg { width:35px; height:35px; }
  .practice-streak-track { display:block; height:12px; overflow:hidden; border-radius:999px; background:rgba(0,0,0,.12); }
  .practice-streak-track i { display:block; width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--practice-fill-a),var(--practice-fill-b)); transition:width .28s ease; }
  .practice-streak strong { min-width:23px; color:var(--practice-level); font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; text-align:left; }
  .practice-streak.is-collapsed { display:flex; width:auto; grid-template-columns:none; }.practice-streak.is-collapsed .practice-fire,.practice-streak.is-collapsed .practice-streak-track { display:none; }.practice-streak.is-collapsed strong { font-size:18px; }
  .practice-streak.level-yellow { --practice-level:#ed9f10; --practice-fill-a:#f7bd19; --practice-fill-b:#f18a17; }.practice-streak.level-orange { --practice-level:#ef7b17; --practice-fill-a:#ffae13; --practice-fill-b:#ee641d; }.practice-streak.level-red { --practice-level:#e44836; --practice-fill-a:#ff8d1b; --practice-fill-b:#df3e32; }.practice-streak.level-blue { --practice-level:#278ed2; --practice-fill-a:#49cae0; --practice-fill-b:#2588d0; }
  .practice-streak.is-flaring .practice-fire { animation:practice-streak-flare .34s ease-out both; }
  @keyframes practice-streak-flare { 0% { transform:scale(1); } 45% { transform:scale(1.3); } 100% { transform:scale(1); } }
  .practice-mode-title { display:none; }
  .practice-prompt { position:relative; display:grid; place-items:center; flex:0 0 218px; height:218px; margin:14px 0; overflow:hidden; }
  /* The prompt content and Lottie are independent layers in either Match
     direction. The Lottie must never become a grid item and move the word. */
  .practice-view.mode-match .practice-prompt { isolation:isolate; }
  .practice-view.mode-match .practice-prompt > :not(.match-audio-animation) { position:relative; z-index:2; }
  .practice-view.mode-match .practice-prompt > .match-audio-animation { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
  .practice-view.mode-match .match-audio-animation svg { display:block; width:100% !important; height:100% !important; }
  .practice-view.mode-match .practice-prompt.picture-prompt { flex-basis:220px; height:220px; margin:8px 0; }
  .practice-prompt img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 7px rgba(0,0,0,.11)); }
  .practice-view.mode-match .practice-prompt.picture-prompt img { display:block; width:min(94%,220px); height:auto; max-height:94%; aspect-ratio:1; object-fit:contain; }
  .practice-prompt .practice-prompt-hanzi,.practice-prompt .practice-prompt-pinyin,.practice-prompt .practice-prompt-romanization { margin:0; text-align:center; line-height:1.03; }
  .practice-prompt.text-prompt { align-content:center; gap:10px; }.practice-prompt .practice-prompt-hanzi { color:#1d1d1d; font-family:"PingFang SC","Hiragino Sans GB",sans-serif; font-size:70px; font-weight:700; }.practice-prompt .practice-prompt-hanzi.is-solo { font-size:88px; }.practice-prompt .practice-prompt-pinyin { color:#ad3d2d; font-size:38px; font-weight:600; }.practice-prompt .practice-prompt-pinyin.is-solo { font-size:54px; }.practice-prompt .practice-prompt-romanization { color:rgba(0,0,0,.5); font-size:27px; font-weight:600; }
  .practice-view.mode-match .practice-prompt.text-prompt { grid-template-rows:auto auto; gap:var(--match-prompt-gap,10px); padding:10px; }.practice-view.mode-match .practice-prompt .practice-prompt-hanzi { max-width:100%; margin:0; font-size:var(--match-prompt-hanzi-size,70px); line-height:1.05; white-space:nowrap; }.practice-view.mode-match .practice-prompt .practice-prompt-pinyin { width:100%; max-width:100%; margin:0; font-size:var(--match-prompt-pinyin-size,38px); line-height:1.16; text-align:center; white-space:nowrap; }.practice-view.mode-match .practice-prompt.allows-two-lines .practice-prompt-pinyin { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; white-space:normal; }
  .practice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); flex:1 1 auto; min-height:0; gap:11px; padding-bottom:22px; }
  .practice-choice { position:relative; display:grid; place-items:center; min-height:0; padding:12px; overflow:hidden; border:0; border-radius:18px; background:#fff; box-shadow:0 4px 0 rgba(0,0,0,.12); color:#1d1d1d; transition:transform .12s ease,background .16s ease,opacity .18s ease; }
  .practice-choice:active { transform:translateY(4px) scale(.96); box-shadow:0 0 0 rgba(0,0,0,.12); }.practice-choice img { display:block; width:100%; height:100%; min-height:0; object-fit:contain; }.practice-choice .practice-hanzi,.practice-choice .practice-pinyin,.practice-choice .practice-romanization { margin:0; text-align:center; line-height:1.05; }.practice-choice .practice-hanzi { font-family:"PingFang SC","Hiragino Sans GB",sans-serif; font-size:34px; font-weight:700; }.practice-choice .practice-pinyin { color:#ad3d2d; font-size:19px; font-weight:600; }.practice-choice .practice-romanization { color:rgba(0,0,0,.5); font-size:15px; font-weight:600; }.practice-choice.choice-text .practice-pinyin:only-child { font-size:28px; }
  .practice-view.mode-match .practice-choice.choice-artwork { padding:0; }.practice-view.mode-match .practice-choice.choice-artwork img { width:var(--match-choice-artwork-size,100%); height:var(--match-choice-artwork-size,100%); }.practice-view.mode-match .practice-choice.choice-text { grid-template-rows:auto auto; align-content:center; gap:var(--match-choice-gap,4px); }.practice-view.mode-match .practice-choice .practice-hanzi,.practice-view.mode-match .practice-choice .practice-pinyin { min-width:0; max-width:100%; margin:0; white-space:nowrap; }.practice-view.mode-match .practice-choice .practice-hanzi { font-size:var(--match-choice-hanzi-size,34px); line-height:1.05; }.practice-view.mode-match .practice-choice .practice-pinyin { font-size:var(--match-choice-pinyin-size,19px); line-height:1.16; }.practice-choice.is-incorrect { background:#f7d6d2; box-shadow:0 4px 0 #d89088; }.practice-choice.is-correct { background:#d4efd9; box-shadow:0 4px 0 #99c7a8; }
  .practice-view.mode-match .practice-choice.allows-two-lines .practice-pinyin { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; white-space:normal; }
  .practice-view.mode-listen .practice-prompt { display:none; }.practice-view.mode-listen .practice-grid { margin-top:14px; }.practice-view.mode-listen .practice-choice { align-content:center; }.practice-view.mode-listen .practice-choice.layout-artwork-only { padding:16px; }.practice-view.mode-listen .practice-choice.layout-artwork-characters { grid-template-rows:minmax(0,.62fr) minmax(0,.28fr); gap:4px; padding:14px; }.practice-view.mode-listen .practice-choice.layout-artwork-pinyin { grid-template-rows:minmax(0,.64fr) minmax(0,.24fr); gap:4px; padding:14px; }.practice-view.mode-listen .practice-choice.layout-artwork-full { grid-template-rows:minmax(0,.46fr) minmax(0,.25fr) minmax(0,.21fr); gap:4px; padding:14px; }.practice-view.mode-listen .practice-choice.layout-artwork-full .practice-hanzi { font-size:36px; }.practice-view.mode-listen .practice-choice.layout-artwork-full .practice-pinyin { font-size:24px; }.practice-view.mode-listen .practice-choice.layout-characters-only .practice-hanzi { font-size:56px; }.practice-view.mode-listen .practice-choice.layout-pinyin-only .practice-pinyin { font-size:38px; }.practice-view.mode-listen .practice-choice.layout-characters-pinyin { grid-template-rows:minmax(0,.48fr) minmax(0,.30fr); gap:4px; }.practice-view.mode-listen .practice-choice.layout-characters-pinyin .practice-hanzi { font-size:52px; }.practice-view.mode-listen .practice-choice.layout-characters-pinyin .practice-pinyin { font-size:31px; }
  .practice-controls { display:flex; justify-content:center; align-items:center; flex:0 0 58px; gap:14px; height:58px; padding-bottom:14px; }.practice-control { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; color:#fff; background:var(--control-color,#4563bd); box-shadow:0 3px 0 rgba(0,0,0,.18); font-family:"Avenir Next",Avenir,sans-serif; font-size:17px; font-weight:600; }.practice-control .ff-symbol { width:21px; height:21px; stroke-width:3.7; }.practice-control.is-off { color:var(--control-color,#4563bd); background:#fff; box-shadow:0 3px 0 rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.12); }.practice-control.is-rejected { animation:practice-control-shake .26s linear; } @keyframes practice-control-shake { 25%{transform:translateX(6px)} 55%{transform:translateX(-6px)} 100%{transform:translateX(0)} }
  .practice-mode-toggle { position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; width:84px; height:44px; padding:0 5px; border:0; border-radius:999px; color:#fff; background:#0aa6cf; box-shadow:0 3px 0 rgba(0,0,0,.18); font-family:"Avenir Next",Avenir,sans-serif; font-size:21px; font-weight:500; }.practice-mode-toggle.is-text { background:#0769b5; }.practice-mode-toggle-text,.practice-mode-toggle-image { z-index:1; display:grid; place-items:center; width:36px; height:30px; justify-self:center; }.practice-mode-toggle-image .ff-symbol { width:24px; height:24px; }.practice-mode-toggle i { position:absolute; top:5px; left:5px; width:34px; height:34px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.16); transition:transform .18s ease; }.practice-mode-toggle.is-text i { transform:translateX(40px); }.practice-mode-toggle.is-picture .practice-mode-toggle-text,.practice-mode-toggle.is-text .practice-mode-toggle-image { visibility:hidden; }
  .practice-audio { position:absolute; right:20px; bottom:calc(22px + env(safe-area-inset-bottom)); z-index:2; display:grid; place-items:center; width:62px; height:54px; margin:0; padding:0; border:0; background:transparent; color:var(--practice-accent); }.practice-audio .ff-symbol { width:29px; height:29px; }.practice-view.mode-match .practice-audio { display:none; }
}
@media (max-width:759px) and (max-width:370px), (max-width:759px) and (max-height:700px) { .practice-view { padding-right:14px; padding-left:14px; }.practice-prompt,.practice-view.mode-match .practice-prompt.picture-prompt { flex-basis:184px; height:184px; margin:8px 0; }.practice-view.mode-match .practice-prompt.picture-prompt img { width:184px; }.practice-grid { gap:9px; }.practice-view.mode-listen .practice-grid { margin-top:8px; }.practice-controls { flex-basis:54px; height:54px; gap:11px; }.practice-control { width:41px; height:41px; } .practice-choice .practice-hanzi { font-size:30px; } }