.words-page{max-width:1240px;margin:22px auto;padding:0 14px;color:#274865}.words-page>h1{font-size:30px;margin:0 0 8px}.words-page>.kids-seo-lead{margin:0 0 20px}#host{container-type:inline-size;position:relative;isolation:isolate;aspect-ratio:16/9;overflow:hidden;background:#edb783 url('./assets/room.webp') center/cover;border:4px solid #af5c37;border-radius:18px;box-shadow:0 12px 30px #75503538;color:#274865;font-family:'Zen Maru Gothic',sans-serif}#host *{box-sizing:border-box}#host [hidden]{display:none!important}#host p,#host h2{margin:0}#host button{font:900 clamp(12px,1.5cqw,22px)/1.25 'Zen Maru Gothic',sans-serif;min-height:34px;border:2px solid #b69a70;border-radius:11px;padding:.5em .7em;background:#fff4dd;color:#294a69;box-shadow:0 3px 0 #66412d35;cursor:pointer;touch-action:manipulation}#host button:focus-visible{outline:4px solid #244e87;outline-offset:3px}#host button:disabled{cursor:default;opacity:.65}#host .primary{background:#b95330;color:#fff5dc;border-color:#983b26}#base{height:100%;display:flex;flex-direction:column}.theatre-top{height:10%;min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 2%;gap:10px;background:#fdf1ddeb;border-bottom:3px double #b99a6c}.theatre-top>strong{font-size:2.2cqw;white-space:nowrap}.theatre-top nav{display:flex;gap:8px}.theatre-top button{font-size:1.25cqw!important;min-height:30px!important;padding:.4em .6em!important}.word-art{display:block;aspect-ratio:1;background-size:400% 300%;background-repeat:no-repeat;clip-path:inset(1.3%);min-height:0;min-width:0}.arrow{font-size:4cqw;color:#3f6892;font-weight:900;text-align:center;line-height:1}#cover{flex:1;min-height:0;display:grid;grid-template-rows:13% 7% minmax(0,1fr) 13% 6%;gap:2%;padding:2% 9% 2.5%;text-align:center}#cover>h2{font-size:4.5cqw;line-height:1.3;align-self:center}.intro{font-size:1.6cqw;font-weight:900}.cover-book{min-height:0;background:url('./assets/book.webp') center/100% 100%;padding:4% 10%}.cover-pair{height:100%;display:grid;grid-template-columns:1fr 13% 1fr;align-items:center;gap:3%}.cover-pair>div{display:flex;flex-direction:column;align-items:center;height:100%;min-height:0}.cover-pair>div>span{display:contents}.cover-pair .word-art{flex:1;width:auto;max-width:100%;height:0;min-height:0;aspect-ratio:1;mix-blend-mode:multiply}.cover-pair b{font-size:2.3cqw;line-height:1.3}.cover-pair>div:last-child .word-art{transform:scale(.68)}#start{width:60%;justify-self:center;font-size:2.3cqw!important;min-height:0!important;padding:.2em!important}#ready-note{font-size:1.2cqw;font-weight:900;align-self:center}#match{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 9% 16%;gap:3%;padding:3% 7% 2.5%}.question-scene{min-height:0;display:grid;grid-template-columns:39% 8% minmax(0,1fr);gap:2%;align-items:center}.question-card{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 18% 15%;padding:3% 5%;gap:2%;background:#fff4df;border:3px solid #c0a477;border-radius:15px;box-shadow:3px 5px 0 #81603d22}#picture{container-type:size;min-height:0;display:flex;justify-content:center;align-items:center}#picture .word-art{height:100%;width:auto;aspect-ratio:1;max-width:100%}#word{font-size:3.5cqw;text-align:center;align-self:center;line-height:1.2}#speak{font-size:1.4cqw!important;min-height:25px!important;padding:.2em!important;background:#e3edf4!important}.choice-side{height:100%;min-height:0;display:grid;grid-template-rows:14% minmax(0,1fr);gap:8%}.choice-side>h2{font-size:2.4cqw;text-align:center;align-self:center}#answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr 1fr;gap:10%;min-height:0}#answers button{position:relative;font-size:2.8cqw;min-height:0;border:3px solid #b49b73;background:#fff8e7;padding:.2em;box-shadow:4px 5px 0 #7c513b25;opacity:1;white-space:nowrap}#answers button small{position:absolute;left:.45em;top:.3em;font-size:1.1cqw;color:#7e827b}#answers button.correct{border-color:#426d3b;background:#e3edc9;box-shadow:0 0 0 4px #4a783b80}#answers button.wrong{border-color:#b15a40;background:#f3daca}#feedback{font-size:1.8cqw;align-self:center;text-align:center;font-weight:900;background:#fff0d8eb;padding:.35em;border-radius:8px;line-height:1.35}.bottom-ribbon{display:grid;grid-template-columns:minmax(0,1fr) 18% 23%;gap:2%;min-height:0;align-items:center}.bottom-ribbon>button{height:75%;font-size:1.4cqw;min-height:30px}.stats{height:100%;display:flex;align-items:center;justify-content:space-around;background:#fff0d8ef;border:2px solid #c3a170;border-radius:8px}.stats span{display:flex;align-items:center;gap:.6em;font-size:1.2cqw}.stats b{font-size:2.7cqw;color:#9e432d}#review{flex:1;min-height:0;display:grid;grid-template-rows:11% minmax(0,1fr) 11% 12% 5%;gap:2%;padding:2% 7% 2%}#review>h2{font-size:3cqw;text-align:center}#record-book{min-height:0;background:url('./assets/book.webp') center/100% 100%;padding:3% 8%}#collection{height:100%;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:2%;min-height:0}.pair-row{display:grid;grid-template-columns:1fr 8% 1fr 12%;gap:2%;align-items:center;min-height:0;border-bottom:1px solid #c5b696}.record-word{display:flex;align-items:center;gap:6%;min-width:0;height:100%;min-height:0}.record-word .word-art{height:100%;width:auto;aspect-ratio:1;mix-blend-mode:multiply;flex-shrink:0}.record-word b{font-size:1.9cqw;white-space:nowrap}.pair-row .arrow{font-size:2.4cqw}.mark{font-size:1.1cqw;text-align:center;color:#a45334;font-weight:900}.mark.ok{font-size:2.8cqw;color:#426d3b}.review-summary{display:flex;align-items:center;justify-content:space-around;gap:10px;background:#fff4dce8;border-radius:9px;font-size:1.6cqw}.review-summary b{color:#a84930;font-size:2.2cqw}#pager{display:flex;align-items:center;gap:10px}#pager button{font-size:1.2cqw;min-height:27px;padding:.2em .5em}.review-actions{display:flex;justify-content:center;gap:12px}.review-actions button{flex:1;font-size:1.6cqw;min-height:0}.review-actions .primary{flex:1.7;font-size:2.1cqw!important}.review-note{font-size:1.1cqw;text-align:center;font-weight:900}.empty{grid-row:1/4;align-self:center;text-align:center;font-size:1.8cqw}#modal{position:absolute;inset:0;z-index:10;background:#3b283ab8;display:flex;align-items:center;justify-content:center;padding:3%}.dialog{width:75%;max-height:95%;overflow:auto;background:#fff4df;border:4px solid #bd8860;border-radius:18px;padding:4%;box-shadow:0 10px 30px #0005}.dialog header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.dialog h2{font-size:2.5cqw}.dialog p,.dialog label{font-size:1.65cqw;line-height:1.7}.dialog small{display:block;font-size:1.1cqw;line-height:1.8;margin:10px 0}.dialog button{margin:4px}.dialog #dialog-content{display:grid;gap:10px}.dialog input[type=range]{width:100%}.parent-note{font-size:13px;line-height:1.9;margin:18px 0}#host:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0;display:grid;place-items:center}#host:fullscreen #base{width:min(100vw,177.7778dvh);height:min(100dvh,56.25vw)}
@media(max-width:600px) and (orientation:portrait){#host{aspect-ratio:9/21;border-width:3px;border-radius:12px}.words-page>h1{font-size:25px}.theatre-top{height:10%;min-height:70px;flex-direction:column;justify-content:center;gap:5px;padding:4px}.theatre-top>strong{font-size:5cqw}.theatre-top nav{gap:4px}.theatre-top button{font-size:11px!important;min-height:30px!important;padding:.35em .4em!important}#cover{grid-template-rows:16% 7% minmax(0,1fr) 14% 6%;gap:3%;padding:6%}#cover>h2{font-size:8.5cqw}.intro{font-size:clamp(11px,3.4cqw,16px)}.cover-book{padding:8% 9%}.cover-pair{grid-template-columns:1fr 10% 1fr;gap:3%}.cover-pair b{font-size:4.5cqw}.cover-pair .word-art{max-height:38cqw}.arrow{font-size:8cqw}#start{width:95%;font-size:6.5cqw!important}#ready-note{font-size:clamp(11px,3.4cqw,16px)}#match{grid-template-rows:minmax(0,1fr) 10% 20%;gap:3%;padding:4% 5%}.question-scene{grid-template-columns:1fr;grid-template-rows:46% minmax(0,1fr);gap:8%;align-items:stretch}.question-scene>.arrow{display:none}.question-card{grid-template-columns:44% minmax(0,1fr);grid-template-rows:1fr 30%;padding:4%;gap:5%}#picture{grid-row:1/3}#picture .word-art{width:100%;height:auto}#word{font-size:7cqw}#speak{font-size:clamp(11px,3.4cqw,16px)!important;min-height:28px!important}.choice-side{grid-template-rows:20% minmax(0,1fr);gap:9%}.choice-side>h2{font-size:5.5cqw}#answers{gap:12px 10px}#answers button{font-size:6cqw;min-height:38px}#answers button small{font-size:10px;left:.3em;top:.2em}#feedback{font-size:clamp(12px,3.7cqw,17px);line-height:1.6;padding:.3em}.bottom-ribbon{grid-template-columns:1fr 1fr;grid-template-rows:45% minmax(0,1fr);gap:8% 8px}.stats{grid-column:1/3}.stats span{font-size:clamp(10px,3cqw,15px);gap:.5em}.stats b{font-size:6cqw}.bottom-ribbon>button{height:100%;font-size:3.8cqw;min-height:28px;padding:.3em}#review{grid-template-rows:10% minmax(0,1fr) 15% 16% 6%;gap:3%;padding:5% 4%}#review>h2{font-size:6cqw}#record-book{padding:5% 7%}#collection{gap:5%}.pair-row{grid-template-columns:1fr 10% 1fr;gap:2%;position:relative;padding-bottom:13px}.record-word{flex-direction:column;justify-content:center;gap:3px}.record-word .word-art{height:auto;flex:1;max-height:21cqw;width:auto;max-width:100%}.record-word b{font-size:4.2cqw}.pair-row .arrow{font-size:6cqw}.mark{position:absolute;right:0;bottom:-2px;font-size:10px!important;line-height:1.2}.mark.ok{font-size:14px!important}.review-summary{display:grid;grid-template-columns:1fr 1fr;gap:3px;font-size:4cqw;text-align:center;padding:2%}.review-summary b{font-size:5cqw}#pager{grid-column:1/3;justify-content:center;gap:14px}#pager button{font-size:3.6cqw;min-height:27px}.review-actions{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px}.review-actions .primary{grid-row:1;grid-column:1/3;font-size:5cqw!important}.review-actions button{font-size:4cqw}.review-note{font-size:clamp(10px,3cqw,15px)}.empty{font-size:4.5cqw}.dialog{width:98%;padding:5%;max-height:96%}.dialog h2{font-size:5.5cqw}.dialog p,.dialog label{font-size:clamp(12px,4cqw,18px)}.dialog small{font-size:clamp(10px,3.2cqw,15px)}.dialog button{font-size:4cqw!important}#host:fullscreen #base{width:100%;height:100%}}
@media(min-width:601px) and (max-width:1000px){.theatre-top button{font-size:11px!important;min-height:28px!important}.stats span{font-size:11px;gap:.3em}.bottom-ribbon>button{font-size:11px}.review-note{font-size:10px}#ready-note{font-size:11px}.mark{font-size:10px}.dialog p{font-size:14px}.dialog small{font-size:12px}#speak{font-size:11px!important}}
@media(max-width:600px) and (orientation:portrait){#review{grid-template-rows:8% minmax(0,1fr) 13% 16% 5%;gap:2%;padding:4%}#record-book{padding:9% 8%}.record-word b{font-size:clamp(11px,4.2cqw,18px)}.pair-row{padding-bottom:15px}.mark{right:auto;left:50%;transform:translateX(-50%);bottom:0;white-space:nowrap}}
@media(max-width:600px) and (orientation:portrait){.mark{bottom:18%}}