@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root{font-family:Nunito,ui-rounded,"Segoe UI",sans-serif;color:#303c35;background:#fff9ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 0% 40%,#f7efd9 0,transparent 45%),radial-gradient(ellipse at 100% 85%,#eaf0df 0,transparent 40%);min-height:100vh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:4px solid #253f88;outline-offset:5px}main{max-width:1010px;margin:auto;padding:30px 32px}header{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:900;color:inherit;text-decoration:none}.brand-icon{font-size:38px;color:#ef9b47}.tag{font-size:10px;letter-spacing:1.6px;font-weight:800;color:#777e6c}.intro{text-align:center;margin:42px 0 29px}.eyebrow{font-size:11px;letter-spacing:2.3px;font-weight:900;color:#798664}h1{font-size:clamp(38px,6vw,60px);letter-spacing:-2px;line-height:1.15;margin:12px 0}h1 span{color:#70874e}.intro p{font-size:17px;line-height:1.65;color:#73796e;margin:0}.play-panel{background:#fffefb;border:1px solid #eae8dc;border-radius:28px;padding:26px;box-shadow:0 12px 45px #5c65460b}.prompt-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:25px}.prompt{display:flex;gap:14px;align-items:center}.speaker{display:grid;place-items:center;background:#eef2e6;color:#718b50;width:50px;height:50px;border-radius:17px;font-size:30px}.small-label{font-size:10px;font-weight:900;letter-spacing:1.4px;color:#898c7f}h2{font-size:21px;margin:3px 0 0;line-height:1.3}.repeat{border:1px solid #e7e7de;border-radius:12px;background:white;padding:10px 14px;font-weight:800;color:#647357}.repeat:disabled{opacity:.4;cursor:default}.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.tile{position:relative;height:137px;border:0;border-radius:20px;background:var(--color);box-shadow:inset 0 -7px 0 #00000012;transition:transform .15s,box-shadow .15s}.tile:enabled:hover{transform:translateY(-4px);box-shadow:inset 0 -7px 0 #00000012,0 8px 15px #00000015}.tile:enabled:active{transform:scale(.96)}.tile:disabled{cursor:default}.tile::before{content:"";position:absolute;top:14px;left:15px;width:30px;height:8px;background:#ffffff30;border-radius:10px;transform:rotate(-30deg)}.tile.correct::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:62px;text-shadow:0 2px 8px #0006}.tile.wrong{animation:shake .3s}.feedback{text-align:center;min-height:55px;padding:19px 0 10px;font-size:15px;font-weight:700;color:#78806b}.feedback.success{color:#537338}.bottom-row{border-top:1px solid #eeeee5;display:flex;justify-content:space-between;align-items:center;gap:15px;padding-top:19px}.score{display:flex;gap:9px;align-items:center;color:#828578;font-size:12px}.score>span:first-child{font-size:29px;color:#eeb949}.score strong{font-size:23px;color:#4c5942}.primary{border:0;background:#738953;color:white;padding:13px 24px;border-radius:13px;font-weight:900;min-width:154px;box-shadow:0 4px 0 #5b713d}.primary:hover{background:#627a44}.primary:disabled{opacity:.65;cursor:default}.primary span{margin-left:14px}footer{text-align:center;font-size:12px;color:#919381;margin:22px 0}footer span{color:#baad89;margin-right:5px}details{max-width:660px;margin:0 auto;color:#818473;font-size:12px;line-height:1.7}summary{cursor:pointer;text-align:center}.text-button{background:none;border:0;text-decoration:underline;color:#596d44;padding:5px 0}@keyframes shake{25%,75%{transform:translateX(-7px)}50%{transform:translateX(7px)}}@media(max-width:600px){main{padding:20px 16px}.tag{display:none}.intro{margin:29px 0 22px}.intro p{font-size:15px}.play-panel{padding:17px;border-radius:23px}.tiles{grid-template-columns:repeat(2,1fr);gap:12px}.tile{height:108px}.repeat span{display:none}.repeat{font-size:24px;padding:4px 12px}.small-label{font-size:8px}h2{font-size:17px}.speaker{width:40px;height:43px;flex-shrink:0}.prompt{gap:9px}.score{gap:6px}.score>span:last-child{max-width:82px;line-height:1.2}.primary{min-width:130px;padding:12px 14px}.feedback{font-size:13px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
[hidden]{display:none!important}
.tile.wrong::after{content:"×";position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:68px;font-weight:900;text-shadow:0 2px 8px #0006}.tile.light.wrong::after{color:#803c36;text-shadow:none}
.setup{border:0;padding:0;margin:0 0 24px}.setup legend{font-size:21px;font-weight:900}.setup p{font-size:14px;color:#73796e;margin:10px 0 16px}.color-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px}.color-option{display:flex;align-items:center;gap:9px;border:1px solid #e3e5d9;border-radius:12px;padding:12px;background:#fff;cursor:pointer;font-weight:700}.color-option:has(input:checked){background:#f0f4e9;border-color:#829768}.color-option input{width:19px;height:19px;accent-color:#637e45;cursor:pointer}.color-option input:focus-visible{outline:3px solid #253f88;outline-offset:3px}.swatch{width:23px;height:23px;flex-shrink:0;border-radius:7px;background:var(--color);border:1px solid #0003}.tile.light{border:2px solid #c9c9bf}.tile.light.correct::after{color:#426232;text-shadow:none}#change-colors{margin-top:20px}
.game-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}.game-choice{display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px 15px;border:2px solid #dce4cf;border-radius:20px;background:#f3f6ed;color:#435633}.game-choice:hover{background:#e8efdd;border-color:#829768}.game-choice>span:first-child{font-size:38px;font-weight:900;letter-spacing:6px;color:#738953}.game-choice strong{font-size:26px}.game-choice>span:last-child{font-size:14px}.number-swatch{font-size:23px;font-weight:900;min-width:23px;text-align:center}.number-tile{font-size:72px;font-weight:900;color:#303c35}.number-tile::before{display:none}.tile.number-tile.wrong::after,.tile.number-tile.correct::after{inset:8px 8px auto auto;width:34px;height:34px;border-radius:50%;background:white;font-size:30px;text-shadow:none;line-height:1;color:#803c36}.tile.number-tile.correct::after{color:#426232}#change-game{display:block;margin-top:16px}@media(max-width:420px){.game-options{grid-template-columns:1fr}.game-choice{padding:20px 12px}}
/* Compact, touch-friendly layouts sized to the available viewport. */
main{padding:clamp(12px,2.5vh,26px) clamp(16px,3vw,32px)}
.intro{margin:clamp(12px,2.5vh,28px) 0 20px}
.game-actions{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin-top:8px}
.game-actions #change-colors,.game-actions #change-game{display:inline-flex;align-items:center;justify-content:center;margin:0;min-height:44px;font-size:clamp(12px,1.8vw,15px)}
.repeat,.primary,summary{min-height:44px}
summary{display:flex;align-items:center;justify-content:center}
body:has(#game-panel:not([hidden])) .intro{margin:10px 0 14px}
body:has(#game-panel:not([hidden])) h1{font-size:clamp(28px,4vw,40px);margin:6px 0}
body:has(#game-panel:not([hidden])) .eyebrow,body:has(#game-panel:not([hidden])) #intro-text{display:none}
body:has(#setup:not([hidden])) .prompt-row,body:has(#setup:not([hidden])) .feedback{display:none}
body:has(#game-panel:not([hidden])) footer{margin:10px 0 0}
.setup{min-width:0;margin-bottom:12px}
.color-option{min-height:48px}
.feedback{min-height:64px;display:flex;align-items:center;justify-content:center;padding:10px 0;line-height:1.4}
.bottom-row{padding-top:12px}
.prompt-row{margin-bottom:16px}
@media(min-width:601px){
 .tiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
 .tile{height:clamp(72px,calc((100dvh - 390px)/2),160px)}
 .number-tile{font-size:clamp(48px,9dvh,80px)}
 .color-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
 .color-option{padding:10px 6px;gap:6px;font-size:14px}
 .color-option input{margin:0;flex-shrink:0}
}
@media(min-width:601px) and (max-height:700px){
 main{padding-top:10px;padding-bottom:10px}
 .play-panel{padding:16px}
 .brand-icon{font-size:28px}
 .brand{font-size:20px}
 body:has(#game-panel:not([hidden])) .intro{margin:4px 0 8px}
 body:has(#game-panel:not([hidden])) h1{font-size:28px;margin:4px 0}
 .prompt-row{margin-bottom:10px}
 .speaker{height:42px;width:42px}
 .tile{height:clamp(64px,calc((100dvh - 330px)/2),160px)}
 .setup p{margin:8px 0}
 .feedback{min-height:52px;font-size:14px}
 body:has(#game-panel:not([hidden])) footer{display:none}
}
@media(max-width:600px){
 .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 .tile{height:clamp(64px,calc((100dvh - 370px)/4),108px);border-radius:14px}
 .number-tile{font-size:48px}
 .tile.number-tile.wrong::after,.tile.number-tile.correct::after{width:25px;height:25px;font-size:23px;inset:4px 4px auto auto}
 .game-actions{gap:8px}
 .color-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.game-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.shapes-game .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.shapes-game .color-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.shape-tile{display:flex;align-items:center;justify-content:center;padding:2px}
.shape-tile::before{display:none}
.shape-tile svg{display:block;width:100%;height:100%;fill:#496f92;pointer-events:none}
.tile.shape-tile.wrong::after,.tile.shape-tile.correct::after{inset:6px 6px auto auto;width:30px;height:30px;border-radius:50%;background:white;font-size:27px;text-shadow:none;line-height:1;color:#803c36}
.tile.shape-tile.correct::after{color:#426232}
@media(max-width:600px){.game-options{grid-template-columns:1fr}.game-choice{padding:14px;gap:5px}.game-choice>span:first-child{font-size:28px}.game-choice strong{font-size:22px}.shapes-game .tile{height:clamp(90px,calc((100dvh - 370px)/2),180px)}}
.game-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.pattern-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.pattern-settings-grid label{display:flex;flex-direction:column;gap:8px;font-weight:800}
.pattern-settings-grid label:last-child{grid-column:1/-1}
.pattern-settings-grid select{font:inherit;max-width:100%;min-height:44px;padding:8px;border:1px solid #a3af95;border-radius:10px;background:white;color:#303c35}
.pattern-help{font-size:14px;color:#68745c;line-height:1.5;margin:12px 0}
.pattern-strip-scroll{overflow-x:auto;padding:5px 3px 12px}
.pattern-strip{display:grid;grid-template-columns:repeat(var(--cells),minmax(36px,64px));gap:5px;justify-content:center;min-width:max-content}
.pattern-cell{position:relative;aspect-ratio:1;min-width:0;width:100%;border:2px solid #a7b49c;border-radius:7px;padding:0}
.pattern-cell:disabled{opacity:1;cursor:default}
.cell-badge{position:absolute;right:2px;bottom:2px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#303c35;font-size:18px;font-weight:900;line-height:1}
.pattern-cell:disabled .cell-badge{font-size:12px}
.pattern-palette{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:12px}
.pattern-paint{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid #d8dfd0;border-radius:12px;padding:8px 12px;min-height:48px;font-weight:800;touch-action:none;user-select:none;color:#303c35}
.pattern-paint::before{content:"";width:clamp(44px,7vw,64px);height:clamp(44px,7vw,64px);background:var(--color);border-radius:7px}
.pattern-paint[aria-pressed=true]{outline:3px solid #526b3e;outline-offset:2px}
.pattern-paint:disabled{opacity:.5}
.pattern-drag{position:fixed;width:72px;height:72px;border:2px solid white;border-radius:9px;transform:translate(-50%,-50%);z-index:100;pointer-events:none;box-shadow:0 4px 12px #0004}
.pattern-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
#pattern-panel .pattern-controls{margin-top:24px}
#pattern-panel .game-actions{justify-content:flex-start;gap:12px;margin-top:28px}
#pattern-panel .game-actions button{min-height:44px}
body:has(#pattern-panel:not([hidden])) .intro{margin:8px 0 12px}
body:has(#pattern-panel:not([hidden])) h1{font-size:32px;margin:6px 0}
body:has(#pattern-panel:not([hidden])) .eyebrow,body:has(#pattern-panel:not([hidden])) #intro-text{display:none}
body:has(#pattern-panel:not([hidden])) footer{margin:10px 0 0}
@media(max-width:600px){.game-choice{padding:14px 8px;gap:5px}.game-choice>span:first-child{font-size:26px}.game-choice strong{font-size:21px}.game-choice>span:last-child{font-size:12px}.pattern-settings-grid{grid-template-columns:1fr;gap:12px}.pattern-palette{gap:8px}.pattern-paint{padding:6px 8px;font-size:13px}.pattern-strip{justify-content:start}.pattern-controls{gap:8px}.pattern-controls button{font-size:13px;min-width:0;padding:10px}.pattern-help{font-size:13px}}
.pattern-strip{grid-template-columns:repeat(var(--cells),minmax(36px,1fr));width:100%;max-width:calc(var(--cells)*69px - 5px);min-width:calc(var(--cells)*41px - 5px);margin-inline:auto}
footer{font-size:16px}
.game-actions :is(#change-colors,#change-game,#pattern-change,#pattern-exit){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;min-width:0;padding:10px 14px;border:1px solid #b5c1a6;border-radius:12px;background:#eef2e6;color:#3e532d;font-size:18px;font-weight:900;line-height:1.25;text-decoration:none}
.game-actions .action-icon{font-size:26px;line-height:1;flex-shrink:0}
.game-actions .text-button:hover{background:#dfe8d3;border-color:#738953}
@media(max-width:600px){#pattern-panel .game-actions{gap:10px}.game-actions :is(#change-colors,#change-game,#pattern-change,#pattern-exit){font-size:16px;padding:9px 10px;gap:6px;flex:1}.game-actions .action-icon{font-size:23px}}
.game-actions svg.action-icon{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}@media(max-width:600px){.game-actions svg.action-icon{width:23px;height:23px}}