.sentence-page{max-width:1240px;margin:22px auto;padding:0 16px;color:#263d3b;font-family:'Zen Maru Gothic',sans-serif}.page-heading{padding:8px 4px 18px}.page-heading h1{font-size:34px;margin:0 0 6px}.page-heading p{margin:0}.parent-note{max-width:920px;margin:30px auto;padding:25px;background:#fff4d9;line-height:1.9}.parent-note h2{font-size:22px}#progress-storage{font-size:12px;text-align:center}
#host{--ink:#263d3b;--paper:#fff6df;position:relative;isolation:isolate;container-type:size;container-name:game;height:800px;max-width:1200px;margin:auto;overflow:hidden;background:#f3eddc;border:3px solid #4f7049;border-radius:10px;color:var(--ink);font-family:'Zen Maru Gothic',sans-serif}#host *{box-sizing:border-box}#host [hidden]{display:none!important}#host button{font:800 15px/1.4 'Zen Maru Gothic',sans-serif;min-width:0;min-height:43px;border:2px solid #9d8257;border-radius:9px;background:var(--paper);color:var(--ink);padding:8px 14px;cursor:pointer;touch-action:manipulation;box-shadow:0 3px 0 #b8a07e}#host button:disabled{cursor:default;opacity:.4}#host button:focus-visible,#host input:focus-visible{outline:3px solid #c44f34;outline-offset:3px}#host button:hover:enabled{filter:brightness(1.04)}#host button.primary{background:#386847;border-color:#195a56;color:#fff9df}#host input{accent-color:#386847;font:inherit}#host .sentence-top{height:55px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;background:#386847;color:#fff6df}#host .sentence-top strong{font-size:17px;white-space:nowrap}#host nav{display:flex;gap:7px}#host nav button{font-size:12px;min-height:31px;padding:5px 10px;border-width:1px;border-radius:5px;box-shadow:none}#base{height:calc(100% - 55px)}
#modal{position:absolute;inset:0;z-index:50;background:#1d3c3bc9;display:grid;place-items:center;padding:16px}#modal>section{max-height:100%;overflow:auto;width:min(620px,100%);background:#fff9e9;border:3px dashed #ad8c58;border-radius:12px;padding:25px}#modal header{display:flex;align-items:center;justify-content:space-between;gap:10px}#modal h2{font-size:23px;margin:0}#dialog-content{font-size:15px;line-height:1.9}#dialog-content>button{display:block;width:100%;margin-top:12px}#dialog-content label{display:flex;align-items:center;gap:12px;margin:17px 0}#dialog-content input[type=checkbox]{width:25px;height:25px}#dialog-content label:has(input[type=range]){display:block}#dialog-content input[type=range]{display:block;width:100%;height:34px}#storage-note{font-size:12px}#host:fullscreen,#host.faux-fullscreen{width:100vw;height:100dvh;max-width:none;margin:0;border:0;border-radius:0}#host.faux-fullscreen{position:fixed;inset:0;z-index:99999}
#host{--ink:#123f48;--paper:#fff5db;background:#125966;border-color:#125966}#host button{border-color:#8e9c92;box-shadow:0 3px 0 #a1aaa0;border-radius:7px}#host button.primary{background:#cc4434;border-color:#a33229;color:#fff9e7}#host .sentence-top{background:#fff4d9;color:#174b55;border-bottom:2px solid #125966}#cover{height:100%;display:grid;grid-template-columns:1.55fr 1fr;background:#fff4d9;padding:16px;gap:18px;border:8px solid transparent;border-image:repeating-linear-gradient(135deg,#cc4434 0 18px,#fff4d9 18px 36px,#17616e 36px 54px,#fff4d9 54px 72px) 8}.cover-art{width:100%;height:100%;object-fit:cover;object-position:57% center;min-height:0;border-radius:4px}.welcome{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;text-align:center;border-left:2px dashed #c7ab86;padding:20px}.welcome h2{font-size:46px;line-height:1.5;margin:0;color:#124c59}.welcome h2 span{color:#c23a2d}.welcome p{font-size:15px;line-height:1.9;margin:0}.welcome>small{font-size:11px}.stamp{width:65px;height:67px;border:3px dotted #c64733;color:#c64733;font-size:44px;line-height:1.3;transform:rotate(8deg)}#host #start{font-size:21px;min-height:57px;width:100%;margin-top:9px}#ready-note{font-size:10px}
#play{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;height:100%;padding:20px;background:#125966}#postcard{display:grid;grid-template-rows:minmax(0,1fr) 200px;background:#fff6df;border:8px solid transparent;border-image:repeating-linear-gradient(135deg,#dc5140 0 16px,#fff6df 16px 32px,#2d7882 32px 48px,#fff6df 48px 64px) 8;min-height:0;padding:9px}#postcard figure{position:relative;display:grid;grid-template-rows:minmax(0,1fr) 33px;min-height:0;margin:0;overflow:hidden}#scene-image{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 53%;border-radius:3px}#postcard figcaption{font-size:12px;display:flex;align-items:center;justify-content:center;color:#45636a}#word-desk{display:grid;grid-template-rows:minmax(64px,1fr) 21px minmax(62px,1fr);gap:9px;padding:10px 1px 5px;min-height:0}#slots,#words{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:0}.slot{display:flex;flex-direction:column;justify-content:center;align-items:center;border:2px dashed #909d90;border-radius:6px;background:#fcf5e4;gap:7px;min-width:0}.slot small{font:600 12px/1 sans-serif;color:#8c998e}.slot b{font-size:clamp(15px,2.1cqw,25px);white-space:nowrap}.slot.filled{background:#e6f0e9;border-style:solid;border-color:#4f8079}.desk-note{font-size:11px;text-align:center;line-height:21px;margin:0;color:#4f686c}#host #words button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 3px;min-height:0;border:2px solid #197180;background:#fffaf0;box-shadow:0 4px 0 #85a5a5}#words small{font:600 11px/1 sans-serif;color:#78918c}#words b{font-size:clamp(16px,2.25cqw,26px);white-space:nowrap}#host #words button.used{opacity:.28;box-shadow:none}#postcard[data-status=correct] .slot{border:3px solid #318270;background:#deefe2}#postcard[data-status=wrong] .slot{border-color:#bd6046;background:#ffe6d3}
#post-counter{display:grid;grid-template-rows:126px minmax(50px,1fr) 85px 50px 50px 23px;gap:16px;min-height:0;padding:16px;background:#fff4d9;border-radius:70px 70px 6px 6px;border:3px solid #0d424d}#post-counter>header{display:flex;flex-direction:column;gap:11px;padding:15px 10px 5px}#post-counter header span{display:flex;align-items:center;justify-content:space-between;font-size:12px}#post-counter header b{font:700 26px/1 'Fredoka',sans-serif;color:#bb3c30}.postmaster{width:100%;height:100%;object-fit:cover;object-position:center 47%;min-height:0;border-radius:80px 80px 5px 5px;border:2px solid #b49b73}#feedback{display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;line-height:1.8;margin:0;padding:9px;background:#fffaf0;border:2px dotted #90a598;border-radius:8px}#feedback[data-state=correct]{background:#dff0df;border-color:#4c906a}#feedback[data-state=wrong]{background:#ffe5d8;border-color:#ce7961}.counter-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}#host .counter-actions button{font-size:12px;padding:8px 3px}#host #undo{font-size:15px}.tip{font-size:10px;text-align:center;line-height:1.7}
#result{height:100%;display:grid;grid-template-rows:82px minmax(0,1fr) 20px 48px;gap:16px;padding:25px 32px;background:#fff4d9}#result>header{display:flex;align-items:center;justify-content:space-between;border-bottom:3px double #bd493b;padding-bottom:12px;gap:15px}#result h2{font-size:37px;margin:5px 0 0;color:#134b59;line-height:1.3}#result header small{font-size:10px}#result header p{font-size:13px;white-space:nowrap;margin:0;border:2px dotted #be493a;padding:10px}#result-score{font:700 30px/1 'Fredoka',sans-serif;color:#bf4235}#review-layout{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);min-height:0;gap:25px}#collection{overflow:auto;min-height:0;overscroll-behavior:contain;scrollbar-gutter:stable;border-block:2px solid #ceb792;padding:5px 12px;background:#fff9e9}#collection article{display:grid;grid-template-columns:25px 94px minmax(0,1fr);gap:15px;align-items:center;min-height:100px;padding:12px 0;border-bottom:1px dashed #b6a584}#collection article img{width:94px;height:68px;object-fit:cover;border:3px dotted #a59470;padding:3px}#collection article>span{font:600 13px/1 sans-serif;color:#8f8d74}#collection p{font-size:17px;line-height:1.9;margin:0}#collection>p{padding:25px;font-size:16px}.review-art{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:90px 90px 5px 5px}.reading-note{text-align:center;font-size:11px;margin:0}#result>footer{display:flex;gap:14px;justify-content:center}#host #result>footer button{min-width:180px}#collection:focus-visible{outline:3px solid #c44635;outline-offset:3px}
@media(max-width:700px){.sentence-page{padding:0 8px}#host{height:880px}.page-heading h1{font-size:29px}.parent-note{padding:16px}}@media(max-height:520px) and (min-width:621px){#host{height:390px}}
@container game (max-width:620px){#host .sentence-top{height:76px;display:grid;justify-content:stretch;gap:6px;padding:7px 8px;text-align:center}#host .sentence-top strong{font-size:13px}#host nav{gap:5px}#host nav button{flex:1;white-space:nowrap;font-size:10px;padding:6px 3px;min-height:31px}#base{height:calc(100% - 76px)}#cover{grid-template-columns:1fr;grid-template-rows:minmax(200px,1fr) 258px;padding:10px;gap:10px;border-width:6px}.cover-art{object-position:center}.welcome{border-left:0;border-top:2px dashed #c7ab86;padding:12px;gap:10px;position:relative}.stamp{display:none}.welcome h2{font-size:32px;line-height:1.2}.welcome h2 br{display:none}.welcome p{font-size:11px;line-height:1.7}.welcome>small{font-size:9px}#host #start{font-size:17px;min-height:44px;margin-top:4px}#ready-note{font-size:8px}#play{grid-template-columns:1fr;grid-template-rows:minmax(240px,1fr) 179px;padding:10px;gap:10px}#postcard{grid-template-rows:minmax(0,1fr) 158px;padding:5px;border-width:6px}#postcard figure{grid-template-rows:minmax(0,1fr) 26px}#postcard figcaption{font-size:10px}#word-desk{grid-template-rows:minmax(50px,1fr) 15px minmax(48px,1fr);gap:6px;padding:6px 0}#slots,#words{gap:7px}.slot{gap:4px}.slot small{font-size:10px}.slot b{font-size:clamp(12px,3.6cqw,20px)}#words b{font-size:clamp(13px,3.7cqw,20px)}#words small{font-size:10px}.desk-note{font-size:9px;line-height:15px}#host #words button{padding:5px 2px;gap:4px}#post-counter{border-radius:8px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:31px 48px 36px 17px;gap:8px;padding:10px}#post-counter>header{grid-column:1/3;flex-direction:row;justify-content:space-around;padding:0;gap:9px}#post-counter header span{font-size:10px;gap:9px}#post-counter header b{font-size:20px}.postmaster{display:none}#feedback{grid-column:1/3;font-size:12px;padding:5px;line-height:1.5}#host #undo{min-height:34px;font-size:11px;padding:5px}.counter-actions{gap:7px}#host .counter-actions button{font-size:9px;min-height:33px;padding:4px 1px}.tip{grid-column:1/3;font-size:9px}#result{grid-template-rows:77px minmax(0,1fr) 23px 39px;gap:12px;padding:18px 13px}#result h2{font-size:25px}#result header small{font-size:8px}#result header p{font-size:9px;padding:7px}#result-score{font-size:24px}#review-layout{grid-template-columns:1fr}.review-art{display:none}#collection{padding:3px 6px}#collection article{grid-template-columns:17px 62px minmax(0,1fr);gap:8px;min-height:90px}#collection article img{width:62px;height:60px}#collection article>span{font-size:10px}#collection p{font-size:13px;line-height:1.8}#collection>p{font-size:13px;padding:16px}.reading-note{font-size:9px}#host #result>footer button{min-width:0;flex:1;font-size:12px;min-height:36px;padding:5px}#modal>section{padding:18px}#modal h2{font-size:19px}#dialog-content{font-size:13px}}
@container game (max-height:520px) and (min-width:621px){#host .sentence-top{height:38px;padding:4px 12px}#host .sentence-top strong{font-size:12px}#host nav button{min-height:26px;font-size:10px;padding:4px 8px}#base{height:calc(100% - 38px)}#cover{padding:9px;gap:10px;border-width:6px;grid-template-columns:1.55fr 1fr}.welcome{padding:8px 15px;gap:9px}.stamp{width:38px;height:36px;font-size:23px}.welcome h2{font-size:28px;line-height:1.2}.welcome h2 br{display:none}.welcome>small{font-size:8px}.welcome p{font-size:10px;line-height:1.7}#host #start{font-size:14px;min-height:37px;margin-top:3px}#ready-note{font-size:8px}#play{grid-template-columns:minmax(0,1fr) 197px;gap:10px;padding:10px}#postcard{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:1fr;gap:10px;padding:6px;border-width:6px}#postcard figure{grid-template-rows:minmax(0,1fr) 24px}#postcard figcaption{font-size:8px}#scene-image{object-position:center}#word-desk{grid-template-rows:minmax(75px,1fr) 14px minmax(65px,1fr);gap:8px;padding:3px 0}#slots,#words{grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:6px}.slot{flex-direction:row;gap:9px;border-width:1px}.slot b{font-size:13px}.slot small{font-size:9px}#host #words button{flex-direction:row;gap:10px;padding:3px;box-shadow:0 2px 0 #85a5a5;border-width:1px}#words b{font-size:14px}#words small{font-size:9px}.desk-note{font-size:8px;line-height:14px}#post-counter{grid-template-rows:74px minmax(20px,1fr) 46px 30px 29px 13px;gap:8px;padding:9px 12px;border-radius:40px 40px 6px 6px;border-width:2px}#post-counter>header{padding:4px 7px;gap:6px}#post-counter header span{font-size:9px}#post-counter header b{font-size:18px}.postmaster{object-position:center 26%;border-radius:40px 40px 4px 4px}#feedback{font-size:10px;line-height:1.55;padding:5px}#host #undo{font-size:11px;min-height:28px;padding:4px}#host .counter-actions button{font-size:9px;min-height:27px;padding:3px}.tip{font-size:8px}#result{grid-template-rows:46px minmax(0,1fr) 15px 31px;gap:8px;padding:12px 24px}#result h2{font-size:25px;margin-top:3px}#result header small{font-size:8px}#result header p{font-size:9px;padding:6px}#result-score{font-size:24px}#result>header{padding-bottom:7px}#review-layout{grid-template-columns:2fr 1fr;gap:22px}#collection article{min-height:64px;grid-template-columns:20px 68px minmax(0,1fr);gap:11px;padding:7px 0}#collection article img{width:68px;height:48px}#collection p{font-size:13px}#collection article>span{font-size:10px}.review-art{border-radius:35px 35px 4px 4px}.reading-note{font-size:9px}#host #result>footer button{min-height:29px;min-width:160px;font-size:11px;padding:3px}#modal>section{padding:13px 22px}#modal h2{font-size:19px}#dialog-content{font-size:12px;line-height:1.6}#dialog-content p{margin:9px 0}#dialog-content label{margin:8px 0}}
@container game (max-width:350px){#cover{grid-template-rows:minmax(160px,1fr) 225px;padding:7px;gap:8px}.welcome{gap:8px;padding:9px}.welcome h2{font-size:26px}.welcome p{font-size:10px}.welcome>small{font-size:8px}#host #start{font-size:15px;min-height:39px}#play{padding:7px;gap:8px;grid-template-rows:minmax(210px,1fr) 170px}#postcard{grid-template-rows:minmax(0,1fr) 145px;padding:4px}#word-desk{gap:5px}#slots,#words{gap:5px}.slot b{font-size:11px}#words b{font-size:11px}#post-counter{padding:8px;gap:7px;grid-template-rows:27px 47px 33px 16px}#post-counter header span{font-size:9px;gap:6px}#feedback{font-size:10px}#host #undo{font-size:10px}.counter-actions{gap:5px}#host .counter-actions button{font-size:8px}.tip{font-size:8px}#result h2{font-size:20px}#result header small{font-size:7px}#collection p{font-size:11px}#collection article{grid-template-columns:15px 50px minmax(0,1fr);gap:6px}#collection article img{width:50px;height:47px}}
@media(prefers-reduced-motion:reduce){#host *{transition:none!important;animation:none!important}}