/* Preserve the existing visual style while making training flow vertically. */
[hidden] {display:none !important;}
html,body {height:100%; min-height:100%; -webkit-text-size-adjust:100%;}
.screen {display:none;transform:none;filter:none;transition:none;will-change:auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));}
.screen.active {display:flex;transform:none;filter:none;}
#homeScreen {overflow-y:auto;}
.home-content {padding:48px 0;gap:18px;}
#homeStatus,#syncStatus {font-size:15px;line-height:1.5;}
#topicsScreen {overflow-y:auto;padding-top:max(130px,calc(env(safe-area-inset-top) + 110px));padding-bottom:30px;}
#topicsScreen .topics-title {margin-top:0;}
#trainingScreen {height:100dvh;max-height:var(--tg-viewport-stable-height,100dvh);padding-top:calc(env(safe-area-inset-top) + 12px);padding-bottom:max(12px,env(safe-area-inset-bottom));gap:12px;overflow:hidden;}
#trainingScreen.active {display:flex;flex-direction:column;}
#trainingScreen .back-button {top:calc(env(safe-area-inset-top) + 12px);left:max(12px,env(safe-area-inset-left));}
#trainingScreen .stats {position:static;transform:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;flex:none;margin:0 0 0 52px;min-height:48px;width:calc(100% - 52px);}
#trainingScreen .stat {font-size:13px;padding:7px 9px;min-height:32px;}
#trainingScreen .training-top {height:auto;min-height:0;flex:1;width:100%;padding:0;overflow-y:auto;display:block;}
#trainingScreen .word-area {height:auto;min-height:100%;width:100%;padding:12px 2px;gap:16px;justify-content:safe center;}
#trainingScreen .word,#trainingScreen .word.n20-fit {position:static;inset:auto;transform:none;flex:none;max-height:none;min-height:0;margin:0;width:100%;font-size:clamp(32px,9vw,52px);line-height:1.3;letter-spacing:-.025em;}
#trainingScreen .word.n20-fit {font-size:clamp(20px,5.5vw,26px);line-height:1.5;letter-spacing:normal;text-align:left;}
#trainingScreen .word.n20-fit .word-main {text-align:left;}
#trainingScreen .word-note {font-size:16px;line-height:1.5;}
#trainingScreen .result {position:static;transform:none;flex:none;height:auto;min-height:0;margin:0;width:100%;overflow:visible;gap:8px;}
#trainingScreen .result-label {font-size:19px;font-weight:750;line-height:1.4;}
#trainingScreen .result-word {font-size:17px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;}
#trainingScreen .correct-result {border-radius:18px;background:#e1f5e9;padding:14px;color:#12693d;}
#trainingScreen .wrong-result {border-radius:18px;background:#ffebe6;padding:14px;color:#a52d26;}
#trainingScreen #nextButton {min-height:48px;padding:12px 20px;font-size:17px;flex:none;}
#trainingScreen .training-bottom {position:static;transform:none;height:auto;flex:none;width:100%;padding:0;}
#trainingScreen .answer-buttons {position:static;transform:none;width:100%;gap:10px;}
#trainingScreen .answer-button {min-width:0;min-height:58px;height:64px;font-size:28px;touch-action:manipulation;}
#trainingScreen .answer-buttons.n20-mode {grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:8px;}
#trainingScreen .n20-number-button,#trainingScreen .n20-submit-button {width:100%;height:50px;min-height:48px;font-size:23px;}
@media(max-height:500px) {#trainingScreen .answer-button{height:48px;min-height:48px;} #trainingScreen .stats{min-height:36px;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;}}