*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:#1b2341;color:#fff5d5;font-family:'Courier New',monospace}main{width:min(1150px,98vw);height:100dvh;min-height:490px;margin:auto;padding:10px;display:flex;flex-direction:column;gap:10px}header{display:flex;align-items:center;gap:10px;background:#58351e;border:4px solid #131d32;padding:7px}header a{color:#ffe277;text-decoration:none;font-size:29px;padding:0 8px}header img{width:42px;height:49px;object-fit:cover;object-position:20% 30%;border:2px solid #1b2341}h1{font-size:clamp(19px,3vw,29px);margin:0;flex:1}button,select,input,a.button{font:700 18px 'Courier New',monospace;color:#163249;border:3px solid #17354b;background:#6cc9ff;padding:9px;box-shadow:3px 3px #10182c;min-height:44px}button,a.button{cursor:pointer;touch-action:manipulation}button:hover{background:#b2e9ff}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:4px solid #eaa630;outline-offset:3px}header button{font-size:22px;min-width:47px}select{max-width:min(330px,75vw);background:#fff5d5}nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#263d59;padding:9px}nav small{color:#ffe277}.progress{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:bold}.progress button{font-size:15px;padding:7px}#scene{position:relative;border:5px solid #12263c;background:#b8e2e7;box-shadow:5px 5px #0b1427;min-height:150px;flex:1;overflow:hidden;display:grid;place-items:center}#scene>svg{position:absolute;inset:0;width:100%;height:100%}.mystery{font-size:clamp(70px,14vh,140px);color:#658b9e;background:#e6f2e2;border:5px dashed #648597;padding:0 35px}.scene-label{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:clamp(23px,4vw,35px);font-weight:bold;color:#18364c;background:#fff1c8;border:3px solid #294b60;padding:5px 18px;white-space:nowrap}#task{background:#fff4cf;color:#18364d;border:4px solid #142c43;padding:12px;display:flex;flex-direction:column;gap:12px;align-items:center;flex-shrink:0}.word-row,.controls{display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap}.word{margin:0;font-size:clamp(30px,5vw,45px);font-weight:900;letter-spacing:3px}.prompt{font-size:23px;font-weight:bold;margin:0;text-align:center}form{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}label{font-weight:bold;font-size:19px}#answer{width:min(300px,65vw);font-size:clamp(25px,4vw,34px);text-align:center;background:#fffdf4;box-shadow:none;letter-spacing:2px}#check,#nextWord,#start{background:#89e3a4;font-size:25px;min-width:80px}.read{font-size:25px}#feedback{font-size:16px;min-height:20px;margin:0;text-align:center;color:#ffe18a}.gallery{position:absolute;inset:0;overflow:auto;padding:15px;display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;align-content:start}.gallery button{background:#fff4cf;display:flex;flex-direction:column;align-items:center;font-size:17px;box-shadow:none}.gallery svg{width:100%;height:85px}.gallery .empty{grid-column:1/-1;color:#18364c;font-size:22px;text-align:center}.gallery svg *{animation:none!important}.motion{transform-box:fill-box;transform-origin:center bottom}.hop{animation:hop .9s steps(5) infinite}.walk{animation:walk 2s steps(6) infinite}.swing{transform-origin:center top;animation:swing 1.5s ease-in-out infinite}.grow{animation:grow 2s ease-in-out infinite}.float{animation:float 2s ease-in-out infinite}.snow{animation:snow 2s linear infinite}.launch{animation:launch 2.5s ease-in-out infinite}.spin{transform-origin:center;animation:spin 5s linear infinite}.dance{animation:dance .9s steps(4) infinite}.wave{animation:wave 1.2s steps(3) infinite}.bubble{animation:bubble 2s ease-out infinite}.rise{animation:rise 2.5s ease-in-out infinite}.wheels{transform-origin:center;animation:spin 1s linear infinite}.fly{animation:fly 3s ease-in-out infinite}.pop{animation:pop 1.1s steps(4) infinite}.chips{animation:chips 2s steps(2) infinite}.open{transform-origin:left bottom;animation:open 2s steps(4) infinite}.water{animation:water 2s ease-in-out infinite}.leaves{animation:leaves 2s ease-in-out infinite}.cross{animation:cross 3s linear infinite}.spark{animation:chips 1.2s steps(2) infinite}@keyframes hop{50%{transform:translateY(-28px)}}@keyframes walk{50%{transform:translateX(35px)}}@keyframes swing{50%{transform:rotate(12deg)}}@keyframes grow{50%{transform:scaleY(.8)}}@keyframes float{50%{transform:translate(20px,-8px)}}@keyframes snow{from{transform:translateY(-24px)}to{transform:translateY(28px)}}@keyframes launch{60%{transform:translateY(-65px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes dance{25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}@keyframes wave{50%{transform:skewY(-8deg)}}@keyframes bubble{from{opacity:.1;transform:translate(0,10px) scale(.7)}to{opacity:1;transform:translate(28px,-25px) scale(1.1)}}@keyframes rise{50%{transform:translateY(-25px)}}@keyframes fly{50%{transform:translate(50px,-15px)}}@keyframes pop{50%{transform:translateY(-35px) rotate(10deg)}}@keyframes chips{50%{opacity:.15}}@keyframes open{50%{transform:rotate(-20deg)}}@keyframes water{50%{transform:translateX(20px)}}@keyframes leaves{50%{transform:translateX(20px) rotate(8deg)}}@keyframes cross{from{transform:translateX(-85px)}to{transform:translateX(85px)}}
@media(max-width:600px){main{height:auto;min-height:100dvh;padding:7px;gap:8px}header{gap:6px}header img{display:none}header button{padding:5px;min-width:44px}header a{padding:0 3px}#scene{height:33dvh;min-height:180px;flex:none}.progress{font-size:14px}.progress button{font-size:13px}.word-row{gap:10px}#task{padding:10px}form{gap:8px}#answer{width:min(230px,63vw)}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.scene-label{bottom:6px}.gallery button{font-size:14px}}
@media(prefers-reduced-motion:reduce){.motion{animation:none!important}}