main,.screen{height:var(--visible-height,100dvh)}
/* Leave the approved Welcome raster assets intact; fit the visible keyboard viewport. */
#name{font-size:16px}
#game .stage{padding:14px 0 8px}
#game #monster{transform-origin:50% 88%;will-change:transform}
#game #monster.celebrate{animation:monster-cheer .94s ease-in-out both}
@keyframes monster-cheer{0%{transform:none}14%{transform:scale(1.035,.965)}32%{transform:translateY(-8px) scale(.985,1.025)}48%{transform:scale(1.025,.975)}63%{transform:rotate(-2deg)}77%{transform:rotate(2deg)}89%{transform:rotate(-1deg)}100%{transform:none}}
.screen-enter{animation:screen-arrive .2s steps(5,end)}
@keyframes screen-arrive{from{opacity:.25}to{opacity:1}}
#game #completion{inset:0;align-items:flex-end;justify-content:center;padding:0 12px max(20px,env(safe-area-inset-bottom));background:transparent}
#game .completion-banner{max-width:min(720px,96%);margin:0;border:14px solid transparent;border-image:url('assets/panel.png') 85 72 80 fill /14px /0 stretch;padding:10px 18px;font:16px/1.5 'Monster Pixel',monospace;color:#28572d;text-align:center}
#monster-result{font:16px/1.4 'Monster Pixel',monospace;color:#2a4b2e;background:#c7e983 url('assets/gameplay-meadow.png') center/cover no-repeat;display:flex;flex-direction:column;gap:10px;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.result-brand{position:relative;flex:none;height:100px;display:flex;align-items:center;justify-content:center;max-width:1080px;width:100%;margin:auto}
.result-logo{max-width:300px;width:32%;height:100%;object-fit:contain}.home-button{position:absolute;top:0;left:0;width:52px;height:52px;min-width:48px;min-height:48px;padding:0;border:0;background:none}.home-button img{width:100%;height:100%;object-fit:contain}.home-button:active{transform:translateY(2px)}
.result-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:28px;align-items:center;flex:1;min-height:0;max-width:1080px;width:100%;margin:auto}
.result-hero{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;height:100%}.result-hero img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px #3f6d3230)}
.result-card{border:24px solid transparent;border-image:url('assets/panel.png') 85 72 80 fill /24px /0 stretch;padding:15px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.result-kicker{font-size:12px;color:#65743a}#result-title{font:24px/1.4 'Monster Pixel',monospace;margin:0;color:#2e602f;outline:none}#monster-result p{margin:0;overflow-wrap:anywhere}#result-name{font-size:16px}#result-detail{font-size:14px}#score{font-size:28px;font-weight:400;white-space:nowrap;color:#654523}
.result-actions{display:flex;flex-direction:column;gap:10px;width:100%}#monster-result .result-actions button{font:16px/1.2 'Monster Pixel',monospace;color:#fff8cb;text-shadow:0 2px #285229;min-height:52px;padding:12px 14px;border:0;border-radius:0;box-shadow:none;background:transparent url('assets/play-again-button.png') center/100% 100% no-repeat;cursor:pointer}#monster-result .result-actions button:active:not(:disabled){transform:translateY(2px)}#monster-result .result-actions button:disabled{cursor:default;filter:saturate(.35) brightness(.94);color:#edf3c9}#coming-soon{font-size:12px;line-height:1.5;color:#635330}
@media(max-width:600px) and (orientation:portrait){
 #monster-result{gap:7px;padding-left:12px;padding-right:12px}.result-brand{height:76px}.result-logo{width:210px;max-width:65%;height:76px}.home-button{width:48px;height:48px}.result-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:10px}.result-card{border-width:16px;border-image-width:16px;padding:8px 10px;gap:8px}#result-title{font-size:18px;line-height:1.4}#result-name{font-size:14px}#result-detail{font-size:12px}#score{font-size:24px}.result-kicker{font-size:10px}.result-actions{flex-direction:row;gap:10px}#monster-result .result-actions button{flex:1;min-width:0;font-size:13px;min-height:48px;padding:10px 5px}#coming-soon{font-size:11px}
}
@media(max-width:600px) and (orientation:portrait) and (max-height:740px){
 .result-brand{height:60px}.result-logo{height:60px;width:175px}.result-card{gap:5px;padding:6px 8px;border-width:12px;border-image-width:12px}#result-title{font-size:16px}#result-name{font-size:12px}#result-detail{font-size:11px}#score{font-size:20px}#monster-result .result-actions button{font-size:12px;min-height:46px}#coming-soon{font-size:10px}.result-layout{gap:6px}#monster-result{gap:6px}
}
@media(max-height:500px) and (orientation:landscape){
 #monster-result{gap:5px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}.result-brand{height:50px}.result-logo{height:50px;width:150px}.home-button{height:46px;width:46px;min-height:44px;min-width:44px}.result-layout{grid-template-columns:minmax(0,1fr) minmax(270px,.95fr);gap:18px}.result-card{gap:5px;padding:6px 9px;border-width:14px;border-image-width:14px}.result-kicker{font-size:9px}#result-title{font-size:16px;line-height:1.35}#result-name{font-size:12px}#result-detail{font-size:11px}#score{font-size:20px}.result-actions{flex-direction:row;gap:8px}#monster-result .result-actions button{font-size:12px;min-height:44px;min-width:0;flex:1;padding:8px 5px}#coming-soon{font-size:10px}.completion-banner{font-size:12px!important;padding:6px 10px!important}
}
@media(max-width:350px) and (orientation:portrait){
 #game .pupil{max-width:106px}#game #progress{font-size:11px;padding:5px}#game h1{font-size:12px}#game .tray-heading span{font-size:9px}#game .categories{gap:9px}#game .categories span{font-size:11px}#game .categories b{font-size:9px}#game #feedback{font-size:11px;min-height:17px}#game .piece.used:after{content:'OK';font-size:10px}#game .play-layout{grid-template-rows:minmax(0,1fr) 110px}#game .tray-heading{padding-bottom:2px}#game .tray-heading h2{font-size:11px}#game .piece{padding:1px;border-width:5px;border-image-width:5px}
 #result-title{font-size:14px}#result-name{font-size:11px}#score{font-size:18px}#monster-result .result-actions button{font-size:11px}.result-brand{height:54px}.result-logo{height:54px;width:155px}
}
body[data-keyboard='open'] #welcome{padding:8px}
body[data-keyboard='open'] #welcome .welcome-content{width:min(300px,86vw);flex-direction:column;gap:4px}
body[data-keyboard='open'] #welcome .logo{width:150px;max-height:40px}
body[data-keyboard='open'] #welcome .wood{width:100%;padding:28px 34px 22px;gap:4px;max-height:none}
body[data-keyboard='open'] #welcome label{font-size:14px}
body[data-keyboard='open'] #welcome .hub{display:none}
body[data-keyboard='open'] #welcome #name-error{bottom:7%;font-size:10px}
@media(max-height:280px){body[data-keyboard='open'] #welcome .logo{max-height:28px}body[data-keyboard='open'] #welcome .welcome-content{width:min(290px,80vw)}}
@media(prefers-reduced-motion:reduce){#game #monster.celebrate,.screen-enter{animation:none!important}}

#welcome .wood label{position:relative;top:5px}
/* In short landscape screens, celebrate in the freed tray column, clear of the hero. */
@media(max-height:500px) and (orientation:landscape){#game #completion{align-items:center;justify-content:flex-end;padding:70px max(14px,env(safe-area-inset-right)) 25px 0}#game .completion-banner{width:235px;max-width:235px;border-width:12px;border-image-width:12px;padding:8px!important}}