/* Approved generated PNG skins only; CSS handles layout, sizing and interaction. */
.writing-mode .world-bg{background-image:url('assets/writing/background.png')}
.writing-mode #reading-exit,.writing-mode .sound,.writing-mode .reading-back{border-image-source:url('assets/writing/button-secondary.png')}
.writing-mode .reading-next{border-image-source:url('assets/writing/button-primary.png')}
.writing-mode .reading-next.see-score{border-image-source:url('assets/writing/button-gold.png')}
.writing-mode .reading-result-card{border-image-source:url('assets/writing/result-card.png');border-image-slice:150 fill}
.writing-mode .reading-next,.writing-mode .reading-back,.writing-mode #reading-exit,.writing-mode .sound{border-image-slice:55 125 fill}
.writing-score-label{font-size:10px;margin:14px 0 0;letter-spacing:1px}
.writing-stage{justify-content:center;gap:18px;padding:12px 0 18px}
.writing-layout{flex:0 0 auto;grid-template-columns:1fr 1.12fr;grid-template-rows:auto;align-items:start;gap:24px}
.writing-email-card,.writing-question-card{border:24px solid transparent;border-image:url('assets/writing/email-panel.png') 150 fill / 24px / 0 stretch;padding:15px 19px;justify-content:flex-start}
.writing-question-card{border-image-source:url('assets/writing/sentence-panel.png')}
.writing-email-card>*,.writing-question-card>*{flex-shrink:0}
.writing-email-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.writing-email-head p{margin:0;line-height:1.5}
.writing-to{font-size:15px}.writing-subject{font-size:13px}
.writing-set-label{font-size:9px;letter-spacing:.5px;display:block;color:#536b43;margin-top:2px}
.writing-stationery{width:125px;height:96px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}
.writing-greeting{font-size:16px;line-height:1.5;margin:15px 0 12px}
.writing-email-body{font-size:16px;line-height:1.65;margin:0;overflow-wrap:normal}
.writing-email-hint{color:#60704f}
.writing-closing{font-size:15px;line-height:1.5;margin:14px 0 0}
.writing-preview-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;font-size:11px;color:#536b43}
.writing-preview-footer button{min-width:120px}
.writing-banner{border:9px solid transparent;border-image:url('assets/writing/question-banner.png') 55 125 fill / 9px / 0 stretch;padding:1px 4px;min-height:31px;align-items:center;margin:0 0 12px}
.writing-question-card .reading-question{font-size:21px;line-height:1.4;min-height:0;margin:0 0 4px}
.writing-instruction{font-size:13px;line-height:1.4;margin:0 0 12px}
.writing-word-workspace{display:flex;flex-direction:column;gap:6px}
.writing-area-label{font-size:9px;letter-spacing:1px;margin:0;line-height:1.4;flex-shrink:0}
.writing-built,.writing-bank{display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start;align-items:flex-start;min-width:0;min-height:52px;flex-shrink:0}
.writing-built{border:9px solid transparent;border-image:url('assets/writing/question-banner.png') 55 125 fill / 9px / 0 stretch;padding:3px;min-height:76px}
.writing-bank{flex:1;min-height:48px}
.writing-tile,.writing-secondary{background:none;border:10px solid transparent;border-image:url('assets/writing/tile.png') 55 125 fill / 10px / 0 stretch;border-radius:0;box-shadow:none;min-width:44px;min-height:48px;padding:2px 7px;color:#233e2c;font-size:15px;font-weight:bold;line-height:1.25;transition:transform .12s}
.writing-tile.is-selected{border-image-source:url('assets/writing/tile-selected.png');animation:word-in .13s ease}
.writing-tile.is-correct{border-image-source:url('assets/writing/tile-correct.png')}
.writing-tile.is-incorrect{border-image-source:url('assets/writing/tile-incorrect.png')}
.writing-tile:disabled{opacity:1;cursor:default}
.writing-tile:hover:not(:disabled){transform:translateY(-1px)}
.writing-tile:active:not(:disabled){transform:translateY(2px)}
.writing-secondary{border-image-source:url('assets/writing/button-secondary.png');font-size:10px;min-height:48px;padding:0 5px}
.writing-empty{font-size:13px;font-weight:normal;line-height:1.4;margin:8px 2px;color:#5f704d}
.writing-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:8px}
.writing-actions .reading-next{min-height:48px;font-size:11px;padding:0 3px}
.writing-actions button:disabled{opacity:.45;visibility:visible;cursor:default}
.writing-feedback{height:43px;margin:10px 0 0;font-size:13px;line-height:1.45}
.writing-second-set{margin-left:12px}
.writing-full-email{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:10px 0}
.writing-full-card{width:100%;max-width:790px;border:25px solid transparent;border-image:url('assets/writing/email-panel.png') 150 fill / 25px / 0 stretch;padding:16px 25px;animation:reading-appear .2s ease}
.writing-full-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.writing-full-heading h2{font-size:21px;margin:0}.writing-full-heading span{font-size:9px;line-height:1.5;text-align:right}
.writing-full-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.writing-full-actions button{min-width:140px;min-height:48px}
.writing-opening .writing-email-card,.writing-bank .writing-tile{animation:reading-appear .15s ease}
@keyframes word-in{from{opacity:.45;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){
 .writing-layout{gap:16px;grid-template-columns:1fr 1.15fr}
 .writing-email-card,.writing-question-card{border-width:19px;border-image-width:19px;padding:12px}
 .writing-email-body{font-size:15px;line-height:1.6}.writing-greeting{font-size:15px}.writing-stationery{width:104px;height:80px}
 .writing-tile{font-size:14px;padding:2px 5px}.writing-built,.writing-bank{gap:6px}
 .writing-word-workspace{}
}
@media(orientation:portrait){
 .writing-stage{justify-content:flex-start;gap:16px;padding-top:8px}
 .writing-layout{grid-template-columns:1fr;grid-template-rows:auto auto;gap:12px}
 .writing-email-preview{display:none}
 .writing-email-card{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px}
 .writing-preview-footer{margin:0;flex-direction:column;gap:7px}
 .writing-stationery{width:108px;height:80px}
 .writing-email-body{font-size:16px}
 .writing-word-workspace{}
 .writing-question-card{padding:16px 20px}
}
@media(max-width:700px) and (orientation:portrait){
 .writing-stage{gap:14px;padding:4px 0 9px}
 .writing-layout{gap:9px}
 .writing-email-card,.writing-question-card{border-width:15px;border-image-width:15px;padding:8px 10px}
 .writing-email-card{grid-template-columns:1fr;gap:5px}
 .writing-email-head{gap:10px}.writing-to{font-size:14px}.writing-subject{font-size:12px}.writing-set-label{font-size:8px}
 .writing-stationery{width:85px;height:66px}
 .writing-preview-footer{flex-direction:row;margin-top:2px;font-size:10px;gap:8px}.writing-preview-footer button{min-width:111px}
 .writing-banner{font-size:9px;min-height:28px;margin-bottom:8px;padding:0 3px}
 .writing-question-card .reading-question{font-size:18px}.writing-instruction{font-size:12px;margin-bottom:10px}
 .writing-word-workspace{gap:6px}
 .writing-built{min-height:70px;padding:3px;border-width:8px;border-image-width:8px}
 .writing-tile{font-size:14px;min-height:44px;border-width:8px;border-image-width:8px;padding:1px 5px}
 .writing-built,.writing-bank{gap:5px}
 .writing-actions{margin-top:6px;gap:8px}.writing-actions .reading-next,.writing-secondary{min-height:44px;font-size:10px;border-width:9px;border-image-width:9px}
 .writing-feedback{height:40px;margin-top:8px;font-size:12px}
 .writing-stage .reading-progress{gap:3px}.writing-second-set{margin-left:9px}
 .writing-full-card{border-width:16px;border-image-width:16px;padding:12px}
 .writing-full-heading h2{font-size:18px}.writing-full-heading span{font-size:8px;max-width:105px}
 .writing-full-card .writing-stationery{width:85px;height:66px}
 .writing-full-card .writing-email-body{font-size:15px;line-height:1.55}
 .writing-greeting{font-size:14px;margin:12px 0 10px}.writing-closing{font-size:14px;margin-top:12px}
 .writing-full-actions{margin-top:15px}.writing-full-actions button{flex:1;min-width:0;font-size:10px;min-height:44px}
}
@media(max-width:700px) and (orientation:portrait) and (max-height:740px){
 .writing-stage{gap:12px;padding:3px 0 6px}.writing-layout{gap:7px}
 .writing-email-card,.writing-question-card{border-width:12px;border-image-width:12px;padding:6px 8px}
 .writing-stationery{width:71px;height:52px}.writing-email-head p{line-height:1.4}.writing-set-label{margin-top:1px}
 .writing-preview-footer button{min-height:44px}
 .writing-banner{min-height:24px;margin-bottom:6px;font-size:8px;border-width:7px;border-image-width:7px}
 .writing-question-card .reading-question{font-size:16px}.writing-instruction{font-size:11px;margin-bottom:7px}
 .writing-word-workspace{gap:4px}.writing-built{min-height:60px;border-width:7px;border-image-width:7px;padding:1px}
 .writing-area-label{font-size:8px}.writing-feedback{height:36px;margin-top:7px;font-size:12px}
 .writing-full-card{padding:10px}.writing-full-card .writing-email-body{font-size:14px;line-height:1.5}
}
@media(max-width:700px) and (orientation:portrait) and (max-height:620px){
 .writing-stage{gap:10px;padding:2px 0 5px}.writing-layout{gap:6px}
 .writing-email-card,.writing-question-card{border-width:9px;border-image-width:9px;padding:4px 7px}
 .writing-email-card{grid-template-columns:1fr auto;gap:5px}
 .writing-email-card .writing-stationery{display:none}
 .writing-preview-footer{flex-direction:column;gap:2px;margin:0;font-size:9px}.writing-preview-footer button{min-width:94px;font-size:8px}
 .writing-to{font-size:12px}.writing-subject{font-size:10px}.writing-set-label{font-size:7px}
 .writing-banner{min-height:22px;margin-bottom:5px}
 .writing-question-card .reading-question{font-size:15px}.writing-instruction{font-size:11px;margin-bottom:6px}
 .writing-word-workspace{gap:4px}.writing-built{border:0;border-image:none;padding:0;min-height:44px}
 .writing-tile{font-size:13px;padding:1px 4px}.writing-empty{font-size:12px;margin:6px 0}
 .writing-feedback{height:35px;margin-top:5px;font-size:12px;line-height:1.4}
 .writing-actions{margin-top:4px}.writing-actions .reading-next,.writing-secondary{font-size:9px}
 .writing-full-card{border-width:12px;border-image-width:12px;padding:8px 10px}
 .writing-full-heading{margin-bottom:7px}.writing-full-heading h2{font-size:16px}
 .writing-full-card .writing-stationery{display:none}
 .writing-full-card .writing-email-body{font-size:14px;line-height:1.5}
 .writing-full-card .writing-greeting{margin:10px 0}.writing-full-card .writing-closing{font-size:13px;margin-top:10px}.writing-full-actions{margin-top:12px}
}
@media(orientation:landscape) and (max-height:600px){
 .writing-stage{justify-content:center;gap:10px;padding:3px 0 5px}
 .writing-layout{grid-template-columns:1fr 1.2fr;gap:12px;align-items:center}
 .writing-email-card,.writing-question-card{border-width:11px;border-image-width:11px;padding:5px 8px}
 .writing-email-preview{display:none}.writing-email-head{flex-direction:column-reverse;align-items:flex-start;gap:7px}
 .writing-stationery{width:122px;height:94px;align-self:center}.writing-to{font-size:13px}.writing-subject{font-size:11px}.writing-set-label{font-size:8px}
 .writing-preview-footer{font-size:10px;margin-top:10px}
 .writing-banner{min-height:22px;border-width:7px;border-image-width:7px;font-size:8px;padding:0 3px;margin-bottom:4px}
 .writing-question-card .reading-question{display:none}.writing-instruction{font-size:11px;margin-bottom:5px}
 .writing-word-workspace{gap:3px}.writing-area-label{font-size:8px}
 .writing-built{min-height:44px;border:0;border-image:none;padding:0}.writing-built,.writing-bank{gap:4px}
 .writing-tile{min-height:44px;font-size:13px;border-width:8px;border-image-width:8px;padding:1px 4px}
 .writing-empty{font-size:11px;margin:6px 0}
 .writing-actions{margin-top:4px;gap:8px}.writing-secondary,.writing-actions .reading-next{min-height:44px;border-width:8px;border-image-width:8px;font-size:9px;padding:0 3px}
 .writing-feedback{height:31px;font-size:11px;line-height:1.4;margin-top:5px}
 .writing-full-email{padding:3px 0}.writing-full-card{max-width:900px;border-width:15px;border-image-width:15px;padding:7px 16px}
 .writing-full-heading{margin-bottom:5px}.writing-full-heading h2{font-size:16px}.writing-full-heading span{font-size:8px}
 .writing-full-card .writing-email-head{flex-direction:row}.writing-full-card .writing-stationery{display:none}
 .writing-full-card .writing-to{font-size:12px}.writing-full-card .writing-set-label{display:inline;margin-left:12px}
 .writing-full-card .writing-greeting{font-size:13px;margin:7px 0}.writing-full-card .writing-email-body{font-size:14px;line-height:1.45}
 .writing-full-card .writing-closing{font-size:13px;margin-top:7px}.writing-full-actions{margin-top:8px}.writing-full-actions button{min-height:44px;font-size:9px}
 .writing-mode .reading-final-score{margin-top:8px}.writing-score-label{font-size:8px;margin:0;grid-column:2;grid-row:1;align-self:start}
}
@media(prefers-reduced-motion:reduce){.writing-tile.is-selected,.writing-full-card,.writing-opening .writing-email-card,.writing-bank .writing-tile{animation:none!important}.writing-tile{transition:none}}
.writing-send-card{border:25px solid transparent;border-image:url('assets/writing/email-panel.png') 150 fill / 25px / 0 stretch;padding:20px 35px;width:min(100%,540px);align-self:center;text-align:center;animation:reading-appear .18s ease}
.writing-sending-stage{justify-content:center;gap:12px}
.writing-send-card h2{font-size:23px;margin:8px 0 0}
.writing-send-label{font-size:10px;letter-spacing:1px;margin:0}
.writing-send-scene{height:184px;display:flex;align-items:center;justify-content:center;padding:10px 0}
.writing-send-scene img{width:300px;max-width:100%;height:220px;object-fit:contain;image-rendering:pixelated;transition:transform .2s ease}
.writing-send-scene img.is-sent{transform:translateY(-6px)}
.writing-send-card>p{font-size:14px;margin:8px 0}
.writing-send-card .writing-send-label{font-size:10px}
.writing-send-subject{color:#536b43}
.writing-send-card button{min-width:150px;margin-top:15px}
@media(max-width:700px) and (orientation:portrait){.writing-second-set{margin-left:9px}.writing-stage .reading-progress{gap:3px}.writing-set-label{font-size:8px;margin-left:8px;letter-spacing:0}.writing-send-card{border-width:17px;border-image-width:17px;padding:15px 18px}.writing-send-card h2{font-size:20px}.writing-send-scene{height:210px}.writing-send-scene img{width:260px;height:195px}.writing-full-heading span{max-width:105px;line-height:1.4;text-align:right}}
@media(max-width:700px) and (orientation:portrait) and (max-height:620px){.writing-set-label{font-size:7px}.writing-send-card{border-width:13px;border-image-width:13px;padding:10px 14px}.writing-send-card h2{font-size:18px}.writing-send-scene{height:180px}.writing-send-scene img{height:160px;width:220px}.writing-send-card button{margin-top:10px}}
@media(orientation:landscape) and (max-height:600px){.writing-send-card{max-width:620px;border-width:16px;border-image-width:16px;padding:8px 24px;display:grid;grid-template-columns:1fr 1fr;gap:5px 20px;align-items:center}.writing-send-card .writing-send-label{grid-column:1/-1;margin:0}.writing-send-card h2{grid-column:2;grid-row:2;font-size:18px;margin:0}.writing-send-scene{grid-column:1;grid-row:2/6;height:170px;padding:5px 0}.writing-send-scene img{width:245px;height:160px}.writing-send-card>p{grid-column:2;margin:2px 0;font-size:12px}.writing-send-card button{grid-column:2;min-height:44px;margin-top:4px}.writing-second-set{margin-left:10px}}
@media(prefers-reduced-motion:reduce){.writing-send-card{animation:none}.writing-send-scene img{transition:none;transform:none!important}}
/* Low-height phones reserve the wider column for touch targets. */
@media(orientation:landscape) and (max-height:600px){
 .writing-layout{grid-template-columns:.85fr 1.35fr}
 .writing-word-workspace{}
 .writing-stage{gap:8px}
 .writing-bank{min-height:44px}
}
/* Fit the longest approved sequence at desktop size without reducing text. */
@media(min-width:1101px){.writing-tile{padding-left:3px;padding-right:3px}}
@media(orientation:landscape) and (max-height:600px) and (max-width:740px){
 .writing-layout{grid-template-columns:.65fr 1.55fr;gap:10px}
 .writing-email-card{padding:5px}
 .writing-preview-footer{flex-direction:column;align-items:stretch;gap:4px;margin-top:7px}
 .writing-preview-footer button{min-width:0}
 .writing-stationery{width:108px;height:82px}
 .writing-tile{font-size:12px;padding:1px 2px;border-width:7px;border-image-width:7px}
 .writing-feedback{font-size:10px;height:28px}
 .writing-word-workspace{}
}
/* A separate preview is useful only where the compact email replaces the body. */
@media(orientation:landscape) and (min-height:601px){.writing-email-card #writing-email{display:none}}
/* Let real wrapped rows set the task height; do not reserve an empty word-bank box. */
.writing-word-workspace{height:auto}
.writing-bank{flex:0 0 auto}
/* Longer approved routine sentences: retain 44px taps on compact screens. */
@media(max-width:700px) and (orientation:portrait) and (max-height:700px), (orientation:landscape) and (max-height:600px){
 .writing-tile{border-width:6px;border-image-width:6px;font-size:12px;padding:1px 2px;min-height:44px;min-width:44px}
 .writing-built,.writing-bank{gap:4px}
 .writing-word-workspace:has(.writing-bank>.writing-empty) .writing-bank{display:none}
 .writing-word-workspace:has(.writing-bank>.writing-empty) #bank-label{display:none}
}