@font-face{font-family:'Monster Pixel';src:url('assets/fonts/monster-pixel.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
/* All theme selectors are scoped: the approved Welcome Page is untouched. */
#game{font-family:'Monster Pixel',monospace;color:#253d29;font-size:16px;line-height:1.35;background:#c7e983 url('assets/gameplay-meadow.png') center/cover no-repeat;gap:10px;padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom))}
#game button{font-family:inherit;font-weight:400}#game header,#game .tray-panel,#game footer,#game .result{border:22px solid transparent;border-image:url('assets/panel.png') 65 fill / 22px / 0 stretch;border-radius:0;box-shadow:none;background:none}
#game header{max-width:1100px;padding:3px 10px;gap:24px;align-items:center;filter:drop-shadow(0 4px 0 #3c542b33)}
#game header>div:first-child{min-width:0}#game h1{font-size:24px;font-weight:400;line-height:1.35;margin:4px 0 0;text-shadow:0 2px #fff1b3}#game .eyebrow{font-size:12px;font-weight:400;letter-spacing:1px;color:#53682b}
#game .pupil{max-width:230px;gap:7px;font-size:14px;line-height:1.3}#game #pupil-name{overflow-wrap:anywhere}#game #progress{font-size:18px;font-weight:400;white-space:nowrap;padding:9px 12px;background:#2e6b35;color:#fff6c4;box-shadow:inset 0 3px #6a9a42,inset 0 -3px #1d492c;letter-spacing:0}
#game .instruction{font-size:16px;font-weight:400;line-height:1.5;color:#213b2b;margin:0 auto;padding:5px 20px;max-width:1000px;background:#fff6d7e8;box-shadow:4px 0 #56783e,-4px 0 #56783e,0 3px #56783e,0 -3px #56783e;text-wrap:balance}
#game .play-layout{max-width:1100px;grid-template-columns:minmax(0,1fr) 270px;gap:28px;align-items:stretch}#game .stage{isolation:isolate}#game #monster{filter:drop-shadow(0 5px 0 #3d6b3930)}
#game .tray-panel{padding:7px 8px 10px;border-width:26px;border-image-width:26px;filter:drop-shadow(0 5px 0 #3c542b33)}#game .tray-heading{padding:0 0 10px;text-align:center}#game .tray-heading h2{font-size:18px;font-weight:400;line-height:1.4;margin:0 0 5px;color:#503b20}#game .tray-heading span{font-size:12px;color:#6e562d}
#game #tray{gap:10px;margin-top:0}#game .piece{border:10px solid transparent;border-image:url('assets/name-field.png') 39 fill / 10px / 0 stretch;border-radius:0;background:transparent;padding:5px;transition:filter .12s;box-shadow:none}#game .piece:hover:not(:disabled){filter:brightness(1.07)}#game .piece:active:not(:disabled){filter:brightness(1.1)}#game .piece img{max-height:125px}#game .piece.used{filter:brightness(.86);border-style:solid;background:none}#game .piece.used:after{content:'Placed!';font-size:12px;color:#39532a;font-weight:400}
#game footer{max-width:1100px;border-width:14px;border-image-width:14px;padding:3px 10px;min-height:58px;gap:16px}#game .categories{gap:15px;align-items:center;flex:none}#game .categories span{background:none;border:0;border-radius:0;padding:0;font-size:14px;font-weight:400;color:#5d4b2b;white-space:nowrap}#game .categories b{font-family:inherit;font-size:12px;font-weight:400;color:#3d6a32;margin-left:4px}
#game #feedback{font-size:16px;font-weight:400;line-height:1.4;color:#345a2b;min-width:0;text-wrap:balance}#game #feedback[data-tone='correct']{color:#1b6430;text-shadow:0 2px #fff5c8}#game #feedback[data-tone='incorrect']{color:#9a3925;text-shadow:0 2px #fff5c8}
#game #completion{background:transparent;justify-content:flex-end;align-items:center;padding:0 max(18px,calc((100% - 1100px)/2));pointer-events:none}#game .result{width:270px;padding:10px;gap:10px;grid-template-columns:1fr;filter:drop-shadow(0 6px 0 #3c542b55);pointer-events:auto}#game .result .eyebrow,#game .result h2,#game .result p{grid-column:1/-1}#game .result h2{font-family:inherit;font-size:18px;font-weight:400;line-height:1.5;color:#2e602f;text-shadow:0 2px #fff4c2}#game .result p{font-size:12px;line-height:1.5;overflow-wrap:anywhere}#game .result strong{font-family:inherit;font-size:24px;font-weight:400;color:#553c20;white-space:nowrap}#game #again{font-size:16px;line-height:1.25;border:0;border-radius:0;background:#438d2c;color:#fff7c9;padding:16px 10px;box-shadow:inset 0 4px #a1d94b,inset 0 -5px #24552a,4px 0 #23472a,-4px 0 #23472a;white-space:nowrap;text-shadow:0 2px #2a5429}#game #again:active{transform:translateY(3px)}
@media(max-width:600px) and (orientation:portrait){
 #game{gap:9px;padding-left:12px;padding-right:12px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
 #game header{border-width:16px;border-image-width:16px;padding:1px 3px;gap:10px}#game h1{font-size:16px;line-height:1.4;margin-top:4px}#game .eyebrow{font-size:10px;letter-spacing:0}#game .pupil{font-size:10px;max-width:105px;gap:6px;line-height:1.4}#game #progress{font-size:14px;padding:7px 8px}
 #game .instruction{font-size:14px;line-height:1.5;padding:5px 10px;max-width:calc(100% - 8px)}
 #game .play-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 142px;gap:10px}#game .tray-panel{border-width:12px;border-image-width:12px;padding:4px 5px 5px}#game .tray-heading{display:flex;align-items:center;justify-content:space-between;padding:0 2px 6px;text-align:left}#game .tray-heading h2{font-size:14px;margin:0;line-height:1.4}#game .tray-heading span{font-size:10px}#game #tray{gap:5px;grid-template-columns:repeat(5,minmax(0,1fr))}#game .piece{border-width:7px;border-image-width:7px;padding:3px}#game .piece:last-child{grid-column:auto}#game .piece img{max-height:80px}#game .piece.used:after{font-size:9px}
 #game footer{border-width:12px;border-image-width:12px;padding:2px 5px;min-height:76px;gap:7px;flex-direction:column;justify-content:center}#game .categories{gap:13px}#game .categories span{font-size:12px}#game .categories b{font-size:10px;margin-left:3px}#game #feedback{font-size:14px;text-align:center;line-height:1.4}
 #game #completion{align-items:flex-end;justify-content:center;padding:0 12px max(12px,env(safe-area-inset-bottom))}#game .result{width:100%;border-width:16px;border-image-width:16px;padding:6px 8px;grid-template-columns:1fr 1fr;gap:7px 12px}#game .result h2{font-size:16px;line-height:1.45}#game .result p{font-size:12px;line-height:1.35}#game .result strong{font-size:16px}#game #again{font-size:14px;padding:13px 5px}#game .result .eyebrow{font-size:10px}
}
@media(max-height:500px) and (orientation:landscape){
 #game{gap:7px;padding:8px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left))}#game header{border-width:12px;border-image-width:12px;padding:0 5px;gap:12px}#game header>div:first-child{display:flex;align-items:baseline;gap:10px}#game h1{font-size:16px;line-height:1.3;margin:0}#game .eyebrow{font-size:10px;letter-spacing:0}#game .pupil{flex-direction:row;align-items:center;gap:10px;max-width:280px;font-size:10px}#game #pupil-name{max-width:140px}#game #progress{font-size:14px;padding:6px 8px}#game .instruction{font-size:12px;line-height:1.4;padding:3px 12px}
 #game .play-layout{grid-template-columns:minmax(0,1fr) 235px;gap:15px}#game .tray-panel{border-width:14px;border-image-width:14px;padding:4px}#game .tray-heading{display:none}#game #tray{gap:6px;grid-template-columns:repeat(3,minmax(0,1fr))}#game .piece{border-width:7px;border-image-width:7px;padding:2px}#game .piece:last-child{grid-column:auto}#game .piece img{max-height:78px}#game .piece.used:after{font-size:9px}
 #game footer{min-height:36px;border-width:9px;border-image-width:9px;padding:1px 8px;gap:12px}#game .categories{gap:12px}#game .categories span{font-size:10px}#game .categories b{font-size:10px}#game #feedback{font-size:12px}
 #game #completion{justify-content:flex-end;align-items:center;padding:35px max(14px,calc((100% - 1100px)/2)) 0 0}#game .result{width:235px;max-width:42vw;border-width:14px;border-image-width:14px;padding:6px;gap:6px;grid-template-columns:1fr}#game .result h2{font-size:14px;line-height:1.4}#game .result p{font-size:10px}#game .result .eyebrow{font-size:10px}#game .result strong{font-size:18px}#game #again{font-size:14px;padding:11px 8px}
}
@media(prefers-reduced-motion:reduce){#game .piece{transition:none}}
/* Shared source frame is sliced past its rails so text sits on pale timber. */
#game header,#game .tray-panel,#game footer,#game .result{border-image-slice:85 72 80 fill}
#game #again{background:transparent url('assets/play-again-button.png') center/100% 100% no-repeat;box-shadow:none;min-height:48px;padding-left:15px;padding-right:15px}
@media(max-width:600px) and (orientation:portrait){#game .pupil{max-width:136px;flex:none}}
/* Completion replaces tray chrome visually while preserving the layout space. */
#game:has(#completion:not([hidden])) .tray-panel,#game:has(#completion:not([hidden])) footer{visibility:hidden}
@media(max-width:600px) and (orientation:portrait) and (max-height:740px){
 #game{gap:7px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}#game header{border-width:12px;border-image-width:12px;gap:8px}#game header .eyebrow{display:none}#game h1{font-size:14px;line-height:1.4;margin:0}#game .pupil{max-width:118px}#game #progress{font-size:12px;padding:5px 7px}#game .instruction{font-size:12px;line-height:1.5;padding:4px 8px}#game .play-layout{grid-template-rows:minmax(0,1fr) 120px;gap:8px}#game .tray-panel{border-width:10px;border-image-width:10px;padding:3px 4px}#game .tray-heading{padding-bottom:4px}#game .tray-heading h2{font-size:12px}#game .piece{border-width:6px;border-image-width:6px;padding:2px}#game footer{min-height:64px;border-width:10px;border-image-width:10px;gap:5px}#game #feedback{font-size:12px}#game .result h2{font-size:14px}#game .result p{font-size:10px}#game .result{gap:5px 10px;padding:4px 6px}#game #again{font-size:12px;min-height:44px}#game .result strong{font-size:14px}
}
@media(max-width:600px) and (orientation:portrait) and (min-height:741px){#game #feedback{font-size:13px;min-height:20px}}
@media(max-height:500px) and (orientation:landscape){#game{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}}