:root{font:16px/1.4 ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:#234653;background:#e1f6fc}
*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,calc((100% - 1100px)/2));background:#fff9dd;font-size:13px}header a{color:#086779;text-decoration:none;font-weight:700}
main{width:min(1100px,calc(100% - 28px));margin:12px auto 20px;text-align:center}h1{font-size:clamp(22px,3vw,30px);line-height:1.15;margin:10px 0}#game-status{min-height:2.6em;max-width:800px;margin:8px auto;font-size:clamp(15px,2vw,18px);font-weight:700}
.play-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);align-items:center;gap:24px}.game-stage{position:relative;width:100%;max-width:720px;margin:auto}.game-panel{min-width:0}#game-canvas{width:100%;aspect-ratio:720/460;border-radius:26px;overflow:hidden}#game-canvas:empty{display:none}#game-canvas canvas{display:block;max-width:100%}#target-fallback{display:none}
button{font:700 15px ui-rounded,"Trebuchet MS",sans-serif;background:#07869c;color:#fff;border:0;border-radius:16px;padding:10px 16px;min-height:44px;cursor:pointer;box-shadow:0 4px 0 #075c70;margin:4px}button:hover:not(:disabled){background:#066c7f}button:focus-visible,a:focus-visible{outline:4px solid #bd7731;outline-offset:4px}button:disabled{opacity:.55;cursor:default}#start,#next{background:#d45637;box-shadow:0 4px 0 #a43f26;font-size:18px;padding:12px 28px}#restart{background:#ffe06c;color:#624b19;box-shadow:0 4px 0 #c4a348}.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:3px}
#answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:600px;margin:12px auto}.answer{background:#fffdf4;color:#234653;border:3px solid #a2cfce;min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin:0;padding:12px 4px;box-shadow:0 5px 0 #add9df;font-size:12px}.answer:hover:not(:disabled){background:#fff0bb}.shape{display:block;width:52px;height:52px;flex-shrink:0}.circle{background:#ec9b68;border-radius:50%}.square{background:#48a7bf;border-radius:8px}.triangle{background:#d5ad33;clip-path:polygon(50% 0,100% 100%,0 100%)}.game-object{background-color:transparent;background-repeat:no-repeat;border-radius:0;clip-path:none}
.parent-note{font-size:11px;color:#526f78;margin:10px 0}#progress{font-size:14px;margin:10px 0}.build-notice{text-align:center;padding:20px;font-size:14px}[hidden]{display:none!important}
.feedback-slot{display:flex;align-items:center;justify-content:center;margin:6px 0}.feedback-slot:has([hidden]){display:none}.answer-feedback{padding:8px 16px;border-radius:18px;font-size:15px;font-weight:750;animation:feedback-pop .3s ease-out}.answer-feedback.is-correct{background:#d6f1d9;color:#28553c}.answer-feedback.try-again{background:#fff1bd;color:#654c22}.answer.answer-correct{opacity:1;background:#e1f5df;border-color:#50966c;animation:answer-hop .5s ease-in-out}.answer.answer-retry{border-color:#d6b961;background:#fff6d8;animation:answer-nudge .4s ease-in-out}
.success-popup{max-width:380px;margin:12px auto;padding:16px;border:3px solid #a6cf9c;background:#fffdf2;border-radius:26px;box-shadow:0 6px 0 #a6cf9c50;animation:feedback-pop .3s ease-out}.success-popup h2{font-size:clamp(22px,3vw,28px);margin:3px 0}.success-popup p{margin:4px 0 8px}.success-spark{color:#d3a92e;font-size:30px;line-height:1}.success-popup #next{margin:4px}.complete-dialog{position:static;width:100%;max-width:380px;max-height:none;overflow:visible;margin:12px auto;padding:18px;border:3px solid #a6cf9c;border-radius:26px;background:#fffdf2;color:#234653;text-align:center;animation:feedback-pop .3s ease-out}.complete-dialog h2{font-size:24px;line-height:1.2;margin:12px 0}.complete-dialog p{font-size:15px}.complete-dialog>a{display:inline-block;margin-top:12px;color:#086779;font-size:14px}.celebration-friends{display:flex;justify-content:center;align-items:end;gap:4px}.celebration-mascot{display:block;width:30%;max-width:85px;aspect-ratio:1;background-image:url('assets/mascots-trio-v3.png');background-size:300% 100%;background-repeat:no-repeat}.celebration-mascot.dugong{background-position:0 0}.celebration-mascot.pangolin{background-position:50% 0;clip-path:inset(0 0 0 10%)}.celebration-mascot.bird{background-position:100% 0}.celebration-actions{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.quiet-button{background:#fff0b4;color:#654c22;box-shadow:0 4px 0 #d7bf71}.quiet-button:hover:not(:disabled){background:#ffe58a}
.pattern-sequence{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;margin:10px auto;max-width:720px}.pattern-token{width:60px;height:64px;background:#fffdf2;border:2px solid #b3d7d4;border-radius:15px;display:flex;align-items:center;justify-content:center}.pattern-token .shape{width:38px;height:38px}.pattern-answer{border-style:dashed;border-color:#c5a348;background:#fff4cc}.pattern-answer.is-solved{border-style:solid;border-color:#50966c;background:#dff2df}.pattern-question{font-size:32px;font-weight:800;color:#836725}
.shape-drop-zone{width:100%;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px;background:#fff9dc;border:3px dashed #bc9a45;border-radius:26px;color:#705722;font-weight:800;transition:background .18s,border-color .18s}.shape-drop-zone>.shape{opacity:.38;filter:grayscale(1)}.has-canvas .shape-drop-zone{position:absolute;left:53.6%;top:21.7%;width:38.2%;height:57.6%;min-height:0;background:transparent;padding:6px;justify-content:flex-end;border-radius:14%}.has-canvas .shape-drop-zone>.shape{display:none}#drop-label{font-size:clamp(11px,1.6vw,16px);background:#fff9dce8;border-radius:12px;padding:4px 8px}.shape-drop-zone.is-over{background:#d8f0e588;border-color:#328b71}.shape-drop-zone.is-filled{border-style:solid;border-color:#50966c}.shape-drop-zone.is-filled>.shape{opacity:1;filter:none}.shape-drop-zone.is-paused{opacity:.5}.draggable-answers .answer{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;-webkit-user-drag:none}.draggable-answers .answer.is-dragging{opacity:.45;cursor:grabbing}.drag-ghost{position:fixed;z-index:1000;width:68px;height:68px;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 8px 7px #23465340)}
@keyframes feedback-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes answer-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-8px)}}@keyframes answer-nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}65%{transform:translateX(4px)}}
@media(max-width:760px){header{font-size:12px;padding:8px 12px}header button{font-size:13px;padding:8px 12px}main{width:calc(100% - 24px);margin:8px auto 16px}h1{font-size:24px;margin:8px 0}.play-layout{grid-template-columns:minmax(0,1fr);gap:8px}.game-stage{width:min(100%,max(220px,calc(156.5dvh - 532px)));max-width:640px}.game-panel{width:100%;max-width:600px;margin:auto}.controls button{font-size:13px;padding:8px 12px}#answers{margin:10px auto}.answer{min-height:94px;font-size:12px;gap:8px}.shape{width:46px;height:46px}#game-status{min-height:2.4em;margin:6px auto;font-size:15px}.success-popup{padding:12px;margin:10px auto}.success-popup h2{font-size:24px}.success-spark{display:none}.success-popup p{font-size:14px}.parent-note{font-size:10px}.pattern-token{width:40px;height:48px;border-radius:10px}.pattern-token .shape{width:28px;height:28px}.pattern-sequence{gap:5px}.pattern-question{font-size:26px}.drag-ghost{width:60px;height:60px}.complete-dialog{padding:14px}.celebration-friends{display:none}}
@media(min-width:761px) and (max-height:700px){header{padding-top:5px;padding-bottom:5px}main{margin-top:6px}h1{font-size:24px;margin:6px}#game-status{min-height:1.4em;margin:6px auto}.game-stage{max-width:min(100%,calc(156.5dvh - 230px))}.parent-note{margin:6px 0}.answer{min-height:94px}}
@media(max-width:360px){header{gap:6px;font-size:11px}.pattern-token{width:34px;height:42px}.pattern-token .shape{width:24px;height:24px}.pattern-sequence{gap:4px}.controls{gap:0}.controls button{padding:8px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}