/* Keep the learning screen compact without clipping longer words or examples. */
@media (max-width: 600px) {
 .study-page .app {
  width:100%;max-width:480px;min-height:100svh;
  padding: max(8px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
 }
 .study-page .header{display:grid;grid-template-columns:minmax(0,1fr) auto 40px auto;gap:8px;min-height:44px}
 .study-page .brand{grid-column:1;grid-row:1;font-size:20px;gap:5px;letter-spacing:1px;white-space:nowrap}
 .study-page .brand-icon{font-size:27px}
 .study-page .brand-en,.study-page .member-full{display:none}
 .study-page .member-short{display:inline}
 .study-page .member-link{grid-column:2;grid-row:1;display:grid;place-items:center;min-width:40px;min-height:44px;color:#45623e;text-decoration:none;font-size:12px;white-space:nowrap}
 .study-page .sound-toggle{grid-column:3;grid-row:1;width:40px;height:44px;border:0;font-size:20px}
 .study-page .game-link{grid-column:4;grid-row:1;display:flex;align-items:center;min-height:44px;white-space:nowrap}
 .study-page .intro{padding:9px 2px 13px;display:block;margin-left: 18px}
 .study-page .intro .eyebrow,.study-page .intro .plant{display:none}
 .study-page .intro h1{font-size:12px;color:#acafaa;line-height:1.4;display: none;letter-spacing:0}
 .study-page .intro h1 br{display:none}
 .study-page .intro-copy{font-size:11px;line-height:1.5;margin:4px 0 0;letter-spacing:0}
 .study-page .study-library-label{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;margin:0 0 12px}
 .study-page .study-library-label label{min-width:0;gap:4px;font-size:10px}
 .study-page .study-library-label select{min-width:0;max-width:100%;height:44px;padding:7px 22px 7px 9px;font-size:13px;text-overflow:ellipsis}
 .study-page .progress-panel{margin:0 0 11px;padding:0 2px}
 .study-page .progress-track{margin-top:7px}
 .study-page .word-card{padding:10px 13px 3px;border-radius:18px;min-width:0}
 .study-page .card-top{gap:8px;min-height:36px}
 .study-page .level-tag{min-width:0;overflow-wrap:anywhere;line-height:1.4;padding:4px 7px}
 .study-page .favorite{flex-shrink:0;width:44px;height:44px}
 .study-page .word-card .word-parts{margin-top:0;min-height:48px;flex-wrap:wrap;gap:0 2px;white-space:normal}
 .study-page .word-part{max-width:100%;min-width:0;font-size:clamp(26px,8.5vw,36px);line-height:1.25;letter-spacing:-.8px;overflow-wrap:anywhere}
 .study-page .phonetic-row{margin-top:1px;gap:4px;overflow-wrap:anywhere}
 .study-page #phonetic{min-width:0;text-align:center}
 .study-page .phonetic-row button{min-width:44px;min-height:44px;flex-shrink:0}
 .study-page .word-card .meaning{margin:5px 0 19px;flex-wrap:wrap;gap:5px 8px;text-align:center}
 .study-page .meaning strong{font-size:14px;letter-spacing:0;overflow-wrap:anywhere;line-height:1.5}
 .study-page .divider{margin-bottom:16px}
 .study-page .word-card .syllables{gap:6px;flex-wrap:wrap}
 .study-page .syllable{min-width:48px;max-width:100%;min-height:44px;padding:6px 8px;overflow-wrap:anywhere}
 .study-page .syllable b{font-size:16px;line-height:1.3}
 .study-page .syllable small{line-height:1.4}
 .study-page .word-card .tip{margin:8px 0;align-items:flex-start;overflow-wrap:anywhere}
 .study-page .word-card .example{margin:20px 0 0px;padding-left:8px}
 .study-page .example-heading{flex-wrap:wrap;line-height:1.5}
 .study-page .word-card #exampleEn{font-size:13px;line-height:1.6;margin-top:5px;margin-bottom:3px}
 .study-page .word-card #exampleZh{font-size:11px;line-height:1.6}
 .study-page .word-card .previous,.study-page .word-card .next{min-height:44px;height:44px}
 .study-page .word-card .audio-status{font-size:10px;line-height:0.1;margin:1px 0;min-height:1px}
 .study-page .bottom-note{margin:10px 0;font-size:9px;line-height:1.5}
 .study-page footer{padding-top:10px;gap:8px;flex-wrap:wrap;letter-spacing:0;line-height:1.6}
 .study-page .empty-library{padding:16px;margin-top:0}
}
/* Browser bars and landscape screens can leave much less usable height. */
@media (max-width:600px) and (max-height:740px){
 .study-page .intro{padding:5px 2px 9px}
 .study-page .intro-copy,.study-page .progress-caption{display:none}
 .study-page .study-library-label{margin-bottom:9px}
 .study-page .bottom-note{display:none}
}