/* Functional handwriting screen; sizes follow the available phone width. */
#quizCardContent.stroke-practice-mode { padding:0!important; background:none!important; border:0!important; box-shadow:none!important; }
.stroke-practice-mode > :not(#writingPractice) { display:none!important; }
.training-session-head.stroke-practice-head { display:none!important; }
#writingPractice { color:#edf3ff; max-width:480px; margin:0 auto; text-align:left; }
#writingPractice button { cursor:pointer; color:inherit; font:inherit; }
.wp-lesson { display:flex; align-items:center; gap:9px; background:linear-gradient(120deg,#242558,#071b40); border:1px solid #38499c; border-radius:12px; padding:8px; margin-bottom:10px; }
.wp-part { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(140deg,#00d8ff,#8d38ef); box-shadow:0 0 10px #458bff; }
.wp-lesson b,.wp-lesson small { display:block; white-space:nowrap; }
.wp-lesson b { font-size:12px; }.wp-lesson small { font-size:9px; color:#bfceed; }
.wp-lesson progress { appearance:none; height:6px; width:auto; min-width:20px; flex:1; border:0; border-radius:5px; overflow:hidden; background:#273d79; }
.wp-lesson progress::-webkit-progress-bar { background:#273d79; }.wp-lesson progress::-webkit-progress-value { background:linear-gradient(90deg,#00eeff,#5b72fd); }
.wp-lesson button { background:none; border:0; font-size:25px!important; padding:0 4px; }
.wp-word { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:12px; padding:9px; margin-bottom:12px; border:1px solid #398eff; border-radius:16px; background:radial-gradient(ellipse at 0 0,#53209d99,transparent 65%),linear-gradient(130deg,#06194a,#001527); box-shadow:inset 0 0 15px #0669aa66,0 0 9px #4664ff55; }
.wp-character { position:relative; min-height:105px; font-size:clamp(35px,12vw,65px)!important; line-height:1.1; border:1px solid #8764ff; border-radius:12px; background:linear-gradient(150deg,#143586,#0a1244); box-shadow:inset 0 0 14px #3449ff,0 0 7px #9d34ff; overflow-wrap:anywhere; padding:8px; }
.wp-character small { position:absolute; right:6px; bottom:6px; font-size:13px; }
.wp-definition { min-width:0; display:flex; flex-direction:column; gap:3px; }.wp-definition strong { font-size:28px; line-height:1.15; }.wp-definition span { font-size:12px; overflow-wrap:anywhere; }.wp-definition small { background:#063b75; font-size:9px; width:max-content; padding:2px 5px; border-radius:4px; }
.wp-order { padding:4px; border:1px solid #3993ff; border-radius:10px; background:linear-gradient(130deg,#0d54a8,#061c52); box-shadow:inset 0 0 12px #3267ed; min-width:0; }
#wpDemo { display:block; height:60px; }.wp-order small { font-size:9px; white-space:nowrap; }#wpDemo svg { display:block; margin:auto; }
.wp-board-wrap { position:relative; padding:8px; border:1px solid #498fff; border-radius:15px; background:linear-gradient(120deg,#094b80,#111548); box-shadow:0 0 9px #754eff,inset 0 0 10px #0969cf; }
.wp-board { width:100%; aspect-ratio:1; touch-action:none; overflow:hidden; border-radius:9px; border:1px solid #4788c9; background:linear-gradient(45deg,transparent 49.8%,#345281 50%,transparent 50.2%),linear-gradient(-45deg,transparent 49.8%,#345281 50%,transparent 50.2%),linear-gradient(90deg,transparent 49.8%,#345281 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,#345281 50%,transparent 50.2%),radial-gradient(ellipse at top left,#002b53,#020c28 75%); }
.wp-board svg { display:block; touch-action:none; }
.wp-reset,.wp-expand { position:absolute; bottom:14px; border:1px solid #578edf; width:28px; height:28px; background:#07153fce; border-radius:9px; font-size:21px!important; padding:0; }.wp-reset { left:14px; }.wp-expand { right:14px; }
#wpCharStep { position:absolute; top:15px; left:17px; pointer-events:none; font-size:10px; color:#c4d0fa; }
#wpStatus { font-size:11px; color:#c3cff8; line-height:1.4; min-height:31px; margin:8px 2px; }
.wp-detail { display:grid; grid-template-columns:65px 1fr 100px; gap:8px; margin:8px 0 12px; }
.wp-detail > * { border:1px solid #3668ca; border-radius:10px; padding:7px; background:linear-gradient(135deg,#102c64,#0a1238); min-width:0; }
.wp-listen { background:linear-gradient(140deg,#06cfff,#264ce9)!important; box-shadow:inset 0 0 8px #afffff; font-size:22px!important; }.wp-listen small { display:block; font-size:10px; }
.wp-example { display:flex; flex-direction:column; gap:2px; }.wp-example small,.wp-repetitions small { font-size:9px; color:#c6d2f5; }.wp-example b { font-size:18px; }.wp-example em { font-size:10px; font-style:normal; font-weight:400; }.wp-example span { font-size:10px; overflow-wrap:anywhere; }
.wp-repetitions { text-align:center; }.wp-repetitions b { display:block; font-size:13px; margin:3px; }.wp-repetitions i { display:block; height:6px; background:#2b3675; border-radius:5px; overflow:hidden; }.wp-repetitions i span { display:block; height:100%; background:linear-gradient(90deg,#02eddf,#4777ff); transition:width .2s; }
.wp-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.wp-actions button { padding:12px 6px; border:1px solid #9b6dff; border-radius:11px; font-size:13px!important; background:linear-gradient(140deg,#0e1743,#201649); }.wp-actions button:last-child { background:linear-gradient(115deg,#a927ee,#6342ff,#00cffa); box-shadow:0 0 10px #833bff88; }.wp-actions button:disabled { opacity:.5; cursor:default; }
.wp-fullscreen { position:fixed; inset:0; z-index:10000; border-radius:0; background:#06122c; display:flex; align-items:center; justify-content:center; padding:18px; }.wp-fullscreen .wp-board { width:min(calc(100vw - 36px),calc(100dvh - 110px)); }.wp-fullscreen .wp-reset,.wp-fullscreen .wp-expand { bottom:28px; }.wp-fullscreen #wpCharStep { top:30px; }
@media(min-width:700px) { #writingPractice { margin-top:12px; }.wp-character { font-size:55px!important; } }
html[data-mobile] .m-host-wrap[data-host="training"] #quizCardContent.stroke-practice-mode > :not(#writingPractice) { display:none!important; }
html[data-mobile] .m-host-wrap[data-host="training"] #quizCardContent.stroke-practice-mode { padding:6px 12px 16px!important; flex:none!important; }
html[data-mobile] .m-host-wrap[data-host="training"] #quizCardContent.stroke-practice-mode #writingPractice { display:block; }
#screenLessons #quizCardContent.stroke-practice-mode > :not(#writingPractice) { display:none!important; }
.wp-character { height:105px; }
.wp-guide { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); min-height:28px; padding:4px 10px; border:1px solid #578edf; border-radius:9px; background:#07153fe6; font-size:11px!important; white-space:nowrap; }
.wp-guide:disabled { opacity:.5; }
.wp-fullscreen .wp-guide { bottom:28px; }