/* Sentence practice uses the route-game viewport and controls. */
body.practice-playing{overflow:hidden!important;padding-bottom:0!important;}
body.practice-playing #menuToggleBtn,body.practice-playing #mfStartBar{display:none!important;}
body.practice-playing #practiceScreen{
 position:fixed!important;z-index:10020;top:var(--sentence-view-top,2px)!important;left:50%!important;transform:translateX(-50%);width:min(100%,960px)!important;
 height:var(--sentence-view-height,calc(100dvh - 4px))!important;min-height:0!important;max-height:none!important;
 display:flex!important;flex-direction:column!important;gap:8px;padding:10px 12px!important;margin:0!important;box-sizing:border-box;overflow:hidden!important;
 background:var(--paper,#fff);color:var(--ink,#222);font-family:system-ui,'Noto Sans KR',sans-serif;box-shadow:0 0 0 100vmax var(--paper,#fff);
}
body.practice-playing #practiceScreen>.stats{order:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0!important;padding:0 2px 6px!important;border:none;flex:none;font-size:12px;}
body.practice-playing #practiceScreen .stat-item{display:flex;align-items:baseline;justify-content:center;gap:6px;min-width:0;white-space:nowrap;}
body.practice-playing #practiceScreen .stats .num{font-family:inherit;font-size:19px!important;font-weight:600;color:var(--ink);line-height:1.4;}
body.practice-playing #practiceBoard{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;border:1px solid var(--muted,#999);border-radius:12px;background:var(--paper,#fff);padding:16px 8px 8px;box-sizing:border-box;}
body.practice-playing #practiceScreen #typeArea{flex:1 1 0!important;min-height:0!important;max-height:none!important;overflow:auto!important;overscroll-behavior:contain;margin:0!important;position:relative;padding:0!important;}
body.practice-playing #practiceScreen #targetText{min-height:0!important;box-sizing:border-box;color:var(--ink);font-weight:400;letter-spacing:0!important;line-height:1.9!important;padding-top:4px;padding-bottom:14px!important;}
body.practice-playing[data-text-size="default"] #practiceScreen #targetText{font-size:28px!important;}
body.practice-playing[data-text-size="18"] #practiceScreen #targetText{font-size:18px!important;}
body.practice-playing[data-text-size="24"] #practiceScreen #targetText{font-size:24px!important;}
body.practice-playing[data-text-size="28"] #practiceScreen #targetText{font-size:28px!important;}
body.practice-playing #practiceScreen #targetText .ch.pending:not(.composing){color:var(--ink)!important;opacity:.9!important;}
body.practice-playing[data-pending-style="soft"] #practiceScreen #targetText .ch.pending:not(.composing){opacity:.75!important;}
body.practice-playing #practiceBoard>.typing-setting-help,body.practice-playing #practiceBoard>#challengeStatus,body.practice-playing #practiceBoard>#targetSpeedStatus{flex:none;margin:4px 8px!important;font-size:12px;line-height:1.4;max-height:70px;overflow:auto;color:var(--ink);opacity:.9;}
body.practice-playing #practiceBoard>:empty{display:none!important;}
body.practice-playing #practiceEntry{display:flex;gap:6px;flex:none;min-height:44px;align-items:stretch;}
body.practice-playing #practiceScreen #hiddenInput{flex:1;min-width:0;width:0!important;height:64px!important;min-height:44px!important;max-height:64px!important;box-sizing:border-box;margin:0!important;padding:8px 10px!important;resize:none!important;overflow:auto;background:var(--paper,#fff);color:var(--ink);caret-color:var(--ink);border:2px solid var(--brass,#b38b34);border-radius:6px;font-size:22px;line-height:1.5!important;}
body.practice-playing #practiceScreen #hiddenInput::placeholder{color:var(--muted,#777);opacity:1;}
body.practice-playing #practiceScreen #stopBtn,body.practice-playing #practiceTools button{display:inline-block!important;margin:0!important;padding:4px 8px!important;min-height:36px;border:1px solid var(--muted,#999);border-radius:5px;box-shadow:none;background:var(--paper,#fff);color:var(--ink);font-family:inherit;font-size:12px!important;line-height:1.3;cursor:pointer;}
body.practice-playing #practiceScreen #stopBtn{flex:0 0 64px;width:64px;color:var(--vermillion,#ad4940);}
body.practice-playing #practiceTools{display:flex;flex:none;gap:6px;align-items:center;justify-content:flex-end;}
body.practice-playing #practiceScreen .hint,body.practice-playing #practiceScreen #composingView{display:none!important;}
body.practice-playing #practiceScreen #practiceKeyboard.show{display:block!important;flex:none;max-height:110px;overflow:auto;margin:0!important;}
body.practice-playing #typingVisualSettingsModal{z-index:10060;}
body.practice-playing[data-focus-mode="on"] #practiceTools #restartBtn,body.practice-playing[data-focus-mode="on"] #practiceTools #skipBtn{display:none!important;}
body.practice-playing[data-live-stats="hide"] #practiceScreen>.stats,body.practice-playing[data-focus-mode="on"] #practiceScreen>.stats{display:none!important;}
@media(max-width:820px){
 body.practice-playing #practiceScreen{padding:6px!important;gap:5px;}
 body.practice-playing[data-text-size="default"] #practiceScreen #targetText{font-size:22px!important;}
 body.practice-playing #practiceBoard{padding:10px 0 4px;}
 body.practice-playing #practiceScreen .stat-item{flex-direction:column;align-items:center;gap:0;font-size:10px;}
 body.practice-playing #practiceScreen .stats .num{font-size:16px!important;}
 body.practice-playing #practiceScreen #hiddenInput{flex:1 1 100%;width:100%!important;height:44px!important;max-height:44px!important;padding:4px 8px!important;}
 body.practice-playing #practiceTools button{font-size:11px!important;min-height:32px;}
}
body.practice-playing[data-typo-detail="on"] #practiceScreen #targetText{line-height:2.4!important;}
body.practice-playing[data-tape-mode="on"] #practiceScreen #targetText{white-space:pre!important;}

/* Typed feedback stays distinct from the readable pending text. */
body.practice-playing #practiceScreen #targetText .ch.correct{color:var(--typed-char,#2f9e62)!important;-webkit-text-fill-color:currentColor;}
body.practice-playing #practiceScreen #targetText .ch.wrong{color:var(--vermillion)!important;-webkit-text-fill-color:currentColor;opacity:1!important;}
body.practice-playing #practiceScreen #targetText .ch.composing{color:transparent!important;-webkit-text-fill-color:transparent;opacity:1!important;}

/* v203: a full-height stage positions an intrinsically sized practice group.
   Do not shrink the board or use a zero flex basis for its text area. */
#practiceWorkspace{display:contents;}
@media(min-width:821px){
 body.practice-playing #practiceWorkspace{display:flex!important;flex-direction:column;justify-content:center;gap:8px;flex:1 1 0!important;min-height:0;width:100%;margin:0!important;}
 body.practice-playing[data-sentence-position="top"] #practiceWorkspace{justify-content:flex-start;}
 body.practice-playing[data-sentence-position="bottom"] #practiceWorkspace{justify-content:flex-end;}
 body.practice-playing #practiceWorkspace #practiceBoard{display:block!important;flex:0 0 auto!important;min-height:90px!important;max-height:none;}
 body.practice-playing #practiceWorkspace #typeArea{display:block!important;flex:none!important;height:auto!important;min-height:54px!important;max-height:max(54px,calc(var(--sentence-view-height,100dvh) - 350px))!important;overflow:auto!important;}
 body.practice-playing #practiceWorkspace #targetText{min-height:54px!important;}
 body.practice-playing #practiceWorkspace #practiceKeyboard.show{flex-shrink:0;}
 body.practice-playing #practiceWorkspace #practiceEntry,body.practice-playing #practiceWorkspace #practiceTools{flex-shrink:0;}
}

/* v205: one-click desktop placement beside compact practice controls. */
body.practice-playing #practiceTools{flex-wrap:wrap;}
body.practice-playing #practiceTools .practice-position-quick.active{background:var(--brass,#b38b34);color:var(--paper,#fff);border-color:var(--brass,#b38b34);}
@media(max-width:820px){body.practice-playing #practiceTools .practice-position-quick{display:none!important;}}

/* v290: the full-width entry and sentence board share the same horizontal space. */
body.practice-playing #practiceEntry{width:100%;box-sizing:border-box;}
body.practice-playing #practiceScreen #hiddenInput{flex:1 1 100%!important;width:100%!important;}
body.practice-playing #practiceTools #stopBtn{flex:0 0 auto;width:auto!important;min-width:64px;}

/* v291: school quizzes share the full-width input / controls-below arrangement. */
body #meaningScreen .meaning-entry{display:flex!important;flex-wrap:wrap!important;gap:6px!important;width:100%!important;box-sizing:border-box;flex-shrink:0;}
body #meaningScreen .meaning-entry #meaningInput{flex:1 1 100%!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;}
body #meaningScreen .meaning-entry button{flex:0 0 auto!important;min-width:44px!important;margin:0!important;}
body #meaningScreen .meaning-entry #meaningStop{width:auto!important;min-width:64px!important;}

/* v292: identical text metrics and content insets for target and entry. */
body.practice-playing #practiceWorkspace #practiceBoard{padding-left:10px!important;padding-right:10px!important;}
body.practice-playing #practiceScreen #targetText{padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important;font-kerning:none!important;font-variant-ligatures:none!important;font-synthesis:none!important;}
body.practice-playing #practiceScreen #hiddenInput{padding-left:9px!important;padding-right:9px!important;height:var(--paired-input-height,64px)!important;max-height:none!important;font-kerning:none!important;font-variant-ligatures:none!important;font-synthesis:none!important;}