.machine-page{max-width:1280px;margin:auto;padding:12px 18px 28px}.machine-page>h1{font-size:clamp(22px,3vw,34px);margin:0;color:#574276}.machine-page>p{margin:4px 0 12px}.machine{--u:min(1cqw,1.77778cqh);container-type:size;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;isolation:isolate;border:3px solid #bba3d9;border-radius:26px;background:#cdb5e9 url('./assets/machine.webp') center/100% 100%;color:#403153;font:900 16px 'Zen Maru Gothic',sans-serif}.machine *{box-sizing:border-box}.machine [hidden]{display:none!important}.machine button{font:inherit;line-height:1.5;cursor:pointer;color:#483451;background:#fff6e7;border:2px solid #b6a1cf;border-radius:12px;padding:.4em .7em;box-shadow:0 3px 0 #66447b33}.machine button:focus-visible{outline:4px solid #246f98;outline-offset:2px}.machine button:disabled{cursor:default;opacity:.5}.machine button:hover{filter:brightness(1.04)}.base{height:100%;padding:3% 8% 4%;display:flex;flex-direction:column}.game-tools{height:11%;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px}.game-tools strong{font-size:calc(var(--u)*2.4);color:#775193;white-space:nowrap;text-shadow:0 2px #fff}.game-tools nav{display:flex;gap:calc(var(--u)*.45)}.game-tools button{font-size:calc(var(--u)*1.05);padding:.25em .5em}.cover{flex:1;min-height:0;display:grid;grid-template-columns:43% 55%;grid-template-rows:minmax(0,1fr) 20% 7%;gap:2%}.sample-window,.picture-window{background:url('./assets/window.webp') center/100% 100%;min-height:0;position:relative}.sample-window{display:flex;flex-direction:column;align-items:center;padding:9% 12%}.sample-window img{width:100%;height:78%;min-height:0;object-fit:contain}.sample-window b{font-size:calc(var(--u)*3);line-height:1.5}.invitation{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8%;text-align:center;min-height:0}.invitation h2{font-size:calc(var(--u)*3.4);line-height:1.5;margin:0;white-space:nowrap;color:#754575}.invitation p{font-size:calc(var(--u)*2.6);line-height:1.6;margin:0}.invitation small{font-size:calc(var(--u)*1.4);line-height:1.6}.machine .primary{background:transparent url('./assets/start.webp') center/100% 100%;border:0;box-shadow:none;color:#562b43}.cover .primary{grid-column:1/-1;width:54%;justify-self:center;font-size:calc(var(--u)*2.4);padding:0 4%}.limit-note{grid-column:1/-1;text-align:center;margin:0;font-size:calc(var(--u)*1.2);line-height:1.5}.game{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 29% 12% 5%;gap:2%;padding-top:1%}.display{min-height:0;display:grid;grid-template-columns:39% 59%;gap:2%}.picture-window img{position:absolute;inset:12%;width:76%;height:76%;object-fit:contain}.word-panel{min-height:0;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;text-align:center;background:#fff6e6d9;border:2px solid #d5bbd8;border-radius:24px;padding:1% 2%}.word-panel h2{font-size:calc(var(--u)*2.25);line-height:1.5;margin:0;white-space:nowrap}.word{display:flex;align-items:center;justify-content:center;white-space:nowrap;gap:2%;font-size:calc(var(--u)*6.6);line-height:1.5;width:100%}.word b{font:inherit;font-weight:900;display:grid;place-items:center;min-width:1.2em;background:#ebdefb;border:3px solid #aa88c5;border-radius:16px}.word-panel p{font-size:calc(var(--u)*1.9);line-height:1.5;margin:0;white-space:nowrap}.machine[data-phase=correct] #letter,.machine[data-phase=wrong] #letter{background:#ffeab0;border-color:#ce9b39}.machine[data-phase=correct] #feedback{color:#187044}.answers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:8%;min-height:0;padding:0 7%}.machine .answer{background:transparent url('./assets/key-coral.webp') center/100% 100%;border:0;box-shadow:none;aspect-ratio:1;max-height:100%;height:100%;width:auto;min-height:0;min-width:0;justify-self:center;padding:0 0 10%;font-size:calc(var(--u)*4.8);border-radius:50%;opacity:1;position:relative}.machine .answer:nth-child(even){background-image:url('./assets/key-blue.webp')}.machine .answer.correct{outline:4px solid #258153;outline-offset:-3px}.machine .answer.selected-wrong{outline:4px dashed #b15168;outline-offset:-3px}.answer.correct:after{content:'○';position:absolute;right:7%;top:2%;font-size:.35em;color:#187b4f}.counters{min-height:0;display:flex;align-items:center;gap:2%;padding:0 2%;background:#b19acc88;border-radius:15px}.counters>span{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:8%;}.counters small{font-size:calc(var(--u)*1.25);white-space:nowrap}.counters b{font:700 calc(var(--u)*2.7)/1.25 Fredoka,sans-serif;background:#fff1cc;border:2px solid #bb9669;border-radius:5px;padding:0 .25em}.counters button{font-size:calc(var(--u)*1.2);padding:.2em .5em;white-space:nowrap;background:#ffe1d9}.game>small{text-align:center;font-size:calc(var(--u)*1.1);line-height:1.5}.parent-note{font-size:14px;line-height:1.7;padding:12px}.machine:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0}.dialog{position:absolute;inset:0;z-index:5;background:#3e3155b8;display:grid;place-items:center;padding:3%}.dialog-card{position:relative;background:#fff7e7;border:4px solid #aa89c6;box-shadow:0 8px 0 #0003;border-radius:22px;width:min(78%,740px);max-height:100%;overflow:auto;padding:5% 4% 3%;font-size:calc(var(--u)*1.6)}.dialog-card h2{margin:0 0 4%;text-align:center;font-size:calc(var(--u)*2.8)}.dialog-card p{line-height:1.8;margin:.5em 0}.dialog-card .close{position:absolute;right:2%;top:2%;font-size:calc(var(--u)*1.2)}.dialog-card section{display:flex;flex-direction:column;gap:10px}.dialog-card dl{margin:.4em 0;display:grid;gap:4px}.dialog-card dl>div{display:grid;grid-template-columns:22% 78%;padding:.4em;border-bottom:1px solid #d9cbae}.dialog-card dd{margin:0}.dialog-card small{font-size:.8em}.dialog-card input{width:100%;accent-color:#8056a8}.dialog-card label{display:flex;justify-content:space-between}
@media(orientation:portrait) and (max-width:680px){.machine-page{padding:8px}.machine{height:min(800px,calc(100dvh - 12px));aspect-ratio:auto;--u:1cqw;border-width:2px;background-size:150% 100%;}.base{padding:5% 4% 7%}.game-tools{height:80px;flex-direction:column;justify-content:center;gap:5px}.game-tools strong{font-size:24px}.game-tools nav{width:100%;justify-content:space-between;gap:2px}.game-tools button{font-size:11px;padding:.35em .3em}.cover{grid-template-columns:1fr;grid-template-rows:43% 34% 15% 5%;gap:1%}.sample-window{width:76%;justify-self:center;padding:8% 12%}.sample-window b{font-size:27px}.invitation{gap:5px}.invitation h2{font-size:27px}.invitation p{font-size:21px;line-height:1.5}.invitation p br{display:none}.invitation small{font-size:13px}.invitation small br{display:none}.cover .primary{width:90%;font-size:25px}.limit-note{font-size:12px}.game{grid-template-rows:minmax(0,1fr) 19% 9% 4%;gap:2%;padding-top:2%}.display{grid-template-columns:1fr;grid-template-rows:56% 42%;gap:2%}.picture-window{width:76%;justify-self:center}.word-panel{padding:1% 2%;border-radius:19px}.word-panel h2{font-size:19px}.word{font-size:45px;line-height:1.35}.word b{border-width:2px;border-radius:10px}.word-panel p{font-size:18px}.answers{padding:0;gap:2%}.machine .answer{height:auto;width:100%;max-height:100%;font-size:38px}.counters{gap:2%;padding:2px 3px}.counters>span{flex-direction:column;gap:1px}.counters small{font-size:10px}.counters b{font-size:20px;line-height:1.1}.counters button{font-size:11px;white-space:normal;max-width:24%;padding:.35em}.game>small{font-size:11px}.dialog-card{width:98%;padding:48px 5% 6%;font-size:15px;max-height:98%}.dialog-card h2{font-size:25px}.dialog-card .close{font-size:13px}.dialog-card dl>div{grid-template-columns:1fr;gap:2px}.dialog-card dd{font-size:14px}.machine:fullscreen{height:100dvh}}
@media(orientation:landscape) and (max-height:520px){.base{padding:2% 7% 3%}.game-tools{height:40px}.game-tools strong{font-size:20px}.game-tools button{font-size:11px;padding:.25em .4em}.invitation h2{font-size:27px}.invitation p{font-size:20px;line-height:1.4}.invitation small{font-size:12px}.cover .primary{font-size:21px}.limit-note{font-size:11px}.sample-window b{font-size:25px}.word-panel h2{font-size:18px}.word{font-size:50px;line-height:1.25}.word-panel p{font-size:16px}.machine .answer{font-size:35px}.game{grid-template-rows:minmax(0,1fr) 27% 13% 5%;gap:2%}.counters small{font-size:11px}.counters b{font-size:22px}.counters button{font-size:11px}.game>small{font-size:10px}.dialog-card{padding:35px 4% 3%;font-size:15px;width:80%}.dialog-card h2{font-size:23px}.dialog-card .close{font-size:12px}}
@media(prefers-reduced-motion:reduce){.machine *{scroll-behavior:auto!important}}

.game>small{background:#fff4e2ed;border-radius:8px;color:#493153}

.machine .answer:disabled{opacity:1}