body.writing-open{overflow:hidden}
.game-world .mode-tile[data-world-mode="writing"]{--accent:#89e7dd}
.game-world .mode-tile[data-world-mode="writing"] .mode-emblem{color:#cefff2}
#writing-lab{color:#f4fbff;background:linear-gradient(#07182eef,#07182ef5),url('assets/mode-worlds.webp') center/cover;border:2px solid #67c7d0;border-radius:0;box-shadow:0 0 0 5px #061024,0 0 35px #408dca55;width:min(720px,calc(100% - 16px));max-height:calc(100dvh - 16px);padding:0;overflow:auto;overscroll-behavior:contain}
#writing-lab::backdrop{background:#020915df}
#writing-lab button{color:#f5faff;min-height:48px;border:1px solid #6692b3;border-radius:0;background:#163751;padding:9px 14px;font-size:15px}
#writing-lab button.primary{background:linear-gradient(#ffefac,#f5c453);border:2px solid #fff0b0;box-shadow:3px 4px 0 #654b20;color:#1f2940;font-weight:bold}
#writing-lab button:disabled{opacity:.45;box-shadow:none;cursor:default}
#writing-lab button:focus-visible{outline:3px solid #fce889;outline-offset:2px}
#writing-lab .writing-head{display:flex;align-items:center;justify-content:space-between;gap:8px;height:auto;min-height:68px;padding:10px 18px;border-bottom:1px solid #3f729a;background:#07152ac9}
#writing-lab .writing-head h2{color:#ffde83;font-size:23px;margin:0;line-height:1.2}
#writing-lab .writing-head .eyebrow{font-size:12px}
#writing-lab .writing-head button{min-width:48px;font-size:21px;padding:5px}
#writing-lab .writing-body{padding:14px clamp(12px,4vw,26px) 18px}
#writing-lab .writing-prompt{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;min-height:82px}
#writing-lab .writing-prompt>.eyebrow{flex-basis:100%;font-size:13px;color:#96e9e5}
#writing-lab .writing-prompt>strong{color:#fff2c1;font-size:clamp(25px,6vw,34px);font-weight:bold;line-height:1.2;overflow-wrap:anywhere}
#writing-lab .writing-reading{display:flex;flex-direction:column;gap:0;line-height:1.4;min-width:0;font-size:16px;color:#e4eeff}
#writing-lab .writing-reading [data-learning]{overflow-wrap:anywhere}
#writing-lab .writing-pinyin{font-size:17px;color:#9fe7ea}
#writing-lab .writing-instruction{margin:5px 0 10px;color:#c5d7ec;font-size:15px}
#writing-lab .writing-surface{height:clamp(240px,43dvh,390px);position:relative;overflow:hidden;background:linear-gradient(90deg,transparent calc(50% - 1px),#5a83a052 50%,transparent calc(50% + 1px)),linear-gradient(transparent calc(50% - 1px),#5a83a052 50%,transparent calc(50% + 1px)),#0b2440;border:2px solid #69b1d3;box-shadow:inset 0 0 35px #091227,4px 5px 0 #020917;touch-action:none}
#writing-lab .writing-surface:after{content:'';position:absolute;inset:9px;border:1px dashed #5f82a05c;pointer-events:none}
#writing-lab .writing-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
#writing-lab .writing-actions button.primary{margin-left:auto}
#writing-lab .writing-message{color:#a9c9dc;font-size:14px;margin:12px 0 0;min-height:24px}
#writing-lab .writing-finish{min-height:340px;display:flex;flex-direction:column;justify-content:center;gap:10px}
#writing-lab .writing-finish h3{font-size:clamp(28px,6vw,40px);margin:0;color:#ffe19a}
#writing-lab .writing-finish p{max-width:500px;line-height:1.6;margin:0 0 18px}
@media(max-width:650px){
 #writing-lab .writing-head{min-height:58px;padding:7px 12px}
 #writing-lab .writing-head h2{font-size:19px}
 #writing-lab .writing-body{padding:8px 12px 14px}
 #writing-lab .writing-prompt{min-height:77px;gap:4px 10px}
 #writing-lab .writing-prompt>.eyebrow{font-size:12px}
 #writing-lab .writing-prompt>strong{font-size:27px}
 #writing-lab .writing-reading{font-size:14px}
 #writing-lab .writing-pinyin{font-size:15px}
 #writing-lab .writing-instruction{font-size:14px;margin:3px 0 8px}
 #writing-lab .writing-surface{height:clamp(265px,47dvh,400px)}
 #writing-lab .writing-actions{gap:6px;margin-top:12px}
 #writing-lab .writing-actions button{font-size:14px;padding:8px;min-height:48px}
 #writing-lab .writing-message{font-size:13px}
}
@media(max-width:390px){#writing-lab .writing-actions button.primary{flex-basis:100%;margin:2px 0 0}}
@media(max-height:500px) and (orientation:landscape){
 #writing-lab .writing-head{min-height:45px;padding:4px 12px}
 #writing-lab .writing-head h2{font-size:18px}
 #writing-lab .writing-body{padding:5px 14px}
 #writing-lab .writing-prompt{min-height:45px}
 #writing-lab .writing-instruction{margin:2px 0}
 #writing-lab .writing-surface{height:142px}
 #writing-lab .writing-actions{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){#writing-lab *{scroll-behavior:auto!important}}
/* Canonical stroke practice: input protection is deliberately surface-scoped. */
#writing-lab .writing-surface,#writing-lab .writing-surface *{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;overscroll-behavior:none}
#writing-lab .writing-surface{width:min(100%,390px);height:auto;aspect-ratio:1;margin:8px auto 0;isolation:isolate}
#writing-lab .writing-target{position:absolute;inset:0;cursor:crosshair}
#writing-lab .writing-target>svg{display:block}
#writing-lab .writing-stroke-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#writing-lab .writing-progress{display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:390px;margin:5px auto;color:#aedee8}
#writing-lab .writing-characters{display:flex;flex-wrap:wrap;gap:7px}
#writing-lab .writing-characters>span{font-size:22px;opacity:.5}
#writing-lab .writing-characters>span.current{opacity:1;color:#ffe49b}
#writing-lab .writing-characters small{font:12px sans-serif;margin-left:2px;color:#83e8d0}
#writing-lab .writing-strokes{font-size:14px;white-space:nowrap}
#writing-lab .writing-actions{justify-content:center;gap:6px}
#writing-lab .writing-actions button{font-size:14px;padding:8px 10px;min-width:44px}
#writing-lab .writing-actions button.primary{margin-left:0;flex-basis:auto}
#writing-lab .writing-credit{display:block;color:#7b9cb2;font-size:10px;text-align:center;margin-top:4px}
#writing-lab .writing-message{text-align:center;margin-top:8px}
#writing-lab .stroke-miss{animation:writing-miss .22s ease-out}
@keyframes writing-miss{50%{border-color:#f8b5ab;box-shadow:inset 0 0 24px #8f433e55}}
@media(max-height:500px) and (orientation:landscape){
 #writing-lab{width:min(820px,calc(100% - 16px))}
 #writing-lab .writing-body:not(.writing-finish){display:grid;grid-template-columns:minmax(0,1fr) 250px;column-gap:18px;align-items:start}
 #writing-lab .writing-surface{grid-column:2;grid-row:1/5;width:250px;height:250px;margin:0}
 #writing-lab .writing-prompt{grid-column:1;min-height:64px}
 #writing-lab .writing-progress{grid-column:1;width:100%;margin:2px 0}
 #writing-lab .writing-actions{grid-column:1;justify-content:start;margin:6px 0}
 #writing-lab .writing-message{grid-column:1;margin:4px 0;text-align:left}
 #writing-lab .writing-credit{grid-column:1/-1;margin:5px 0 0}
}
@media(prefers-reduced-motion:reduce){#writing-lab .stroke-miss{animation:none;border-color:#f8b5ab}}