:root{font-family:Tahoma,"Noto Sans Thai",sans-serif;color:#fff;background:#6b55b5;--brown:#5a2e2b;--pink:#f35f91;--cream:#fff4d8;--mint:#58d8d0;--gold:#ffc94d}*{box-sizing:border-box}body{margin:0;min-height:100dvh;overflow:hidden}button{font:inherit}.start,.game,.win{width:100vw;height:100dvh;background:linear-gradient(#7056b155,#54398722),url('assets/candy-shop.png') center/cover;position:relative}.start{display:flex;align-items:center;justify-content:center;gap:clamp(30px,6vw,90px);padding:5vw}.intro{max-width:720px;background:#5a2e2bed;border:5px solid #fff;border-radius:38px;padding:clamp(24px,4vw,50px);box-shadow:0 16px 0 #321819}.intro>b{color:var(--gold);font-size:clamp(18px,2vw,28px)}h1{font-size:clamp(47px,6vw,90px);line-height:1;margin:.16em 0;text-shadow:0 7px #9e3865}.intro p{font-size:clamp(19px,2vw,28px)}.modes{display:grid;grid-template-columns:1fr 1fr;gap:14px}.modes button{min-height:88px}.modes small{display:block;margin-top:5px}.cookie-logo{width:min(31vw,380px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#e2a74f;border:12px solid #fff;box-shadow:0 16px 0 #5a2e2b,inset 0 0 0 12px #bd7838;color:#5a2e2b;font-size:110px;font-weight:900}.cookie-logo span{position:absolute;font-size:70px;transform:translate(75px,70px)}button{border:0;border-radius:18px;padding:13px 23px;background:linear-gradient(#ffe977,#ffb62a);color:#5a2e2b;font-weight:900;box-shadow:0 7px 0 #9a5b00;cursor:pointer}button:active{transform:translateY(4px);box-shadow:0 3px 0 #9a5b00}.sound{position:fixed;z-index:35;right:18px;bottom:18px;width:58px;height:58px;padding:0;border:3px solid #fff;border-radius:50%;background:#5a2e2b;color:#fff;box-shadow:0 6px 0 #321819;font-size:25px}.game{display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;gap:8px;padding:clamp(7px,1.2vw,18px)}.hud{z-index:5;display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;background:#5a2e2bed;border:3px solid #fff;border-radius:22px;padding:8px 16px}.bar{height:18px;flex:1;max-width:520px;border:2px solid #fff;border-radius:18px;background:#7b514d;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#58d8d0,#ffc94d,#f35f91);transition:.4s}.mini{padding:6px 10px;box-shadow:0 4px 0 #9a5b00}.workspace{z-index:3;align-self:center;justify-self:center;max-height:100%;overflow:auto;width:min(1260px,96vw);background:#fff8eee8;color:#5a2e2b;border:6px solid #5a2e2b;border-radius:32px;padding:clamp(10px,1.8vw,24px);box-shadow:0 13px 0 #321819;text-align:center}.tag{display:inline-block;background:#9b60d4;color:#fff;border-radius:18px;padding:5px 17px;font-weight:900}.prompt{font-size:clamp(20px,2.2vw,32px);font-weight:900;margin:6px}.target{display:inline-grid;place-items:center;min-width:82px;height:65px;border-radius:20px;background:#f35f91;color:#fff;border:4px solid #fff;font-size:42px;box-shadow:0 6px 0 #9e3865}.trays{display:grid;grid-template-columns:1fr 1fr;gap:clamp(15px,3vw,40px);margin:12px auto;max-width:1120px}.tray-wrap h2{margin:0 0 6px;font-size:clamp(20px,2vw,29px)}.tray{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:7px;background:#d99a4c;border:8px solid #9b5b28;border-radius:24px;padding:8px;box-shadow:0 9px 0 #5f341c;min-height:clamp(150px,19vw,230px)}.cell{background:#fff0cf;border:3px solid #b97035;border-radius:14px;display:grid;place-items:center;min-width:0}.cookie{display:block;width:clamp(43px,5vw,72px);aspect-ratio:1;border-radius:50%;background:#d99445;border:4px solid #a95f29;box-shadow:inset -7px -8px 0 #bd7134,0 4px 0 #6f391e;position:relative}.cookie:after{content:"•••";position:absolute;inset:0;display:grid;place-items:center;color:#5a2e2b;font-size:clamp(18px,2vw,30px);letter-spacing:2px;transform:rotate(-25deg)}.cell .cookie{cursor:pointer}.actions{display:flex;justify-content:center;align-items:center;gap:12px}.check{background:linear-gradient(#78f4b2,#27c87e);box-shadow:0 7px 0 #08794b}.clear{background:linear-gradient(#e7d3ff,#ae7de8);box-shadow:0 7px 0 #7243a8}.feedback{min-height:28px;margin:8px;font-weight:900;color:#078c67}.dock{z-index:5;display:flex;width:100%;align-items:center;justify-content:center;gap:10px;background:#5a2e2bed;border:3px solid #fff;border-radius:22px;padding:8px 75px}.supply-cookie{display:grid;place-items:center;width:76px;height:76px;overflow:visible;padding:0;border-radius:50%;background:transparent;box-shadow:none}.supply-cookie .cookie{width:65px}.supply-cookie.selected{outline:6px solid #ffc94d}.card{min-width:58px;padding:8px 13px;font-size:25px;background:linear-gradient(#6be7e0,#31bbb6);box-shadow:0 6px 0 #157c78;border:3px solid #fff}.card.selected{outline:6px solid #ffc94d;transform:translateY(-5px)}.expanded{display:flex;justify-content:center;align-items:center;gap:13px;font-size:42px;font-weight:900;margin:8px}.answer-slot{width:100px;height:70px;padding:0;background:#fff;border:5px dashed #f35f91;box-shadow:0 6px 0 #9e3865;font-size:36px}.answer-slot.filled{border-style:solid}.answer-slot.wrong{animation:shake .35s}.win{display:grid;place-items:center;text-align:center}.win>div{background:#5a2e2bed;border:5px solid #fff;border-radius:38px;padding:45px;box-shadow:0 16px 0 #321819}.win h1{margin:.15em}.celebrate{font-size:85px}@keyframes shake{25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}@media(max-aspect-ratio:4/3){body{overflow:auto}.start{height:auto;min-height:100dvh;flex-direction:column}.cookie-logo{width:min(60vw,330px)}.game{height:auto;min-height:100dvh}.trays{grid-template-columns:1fr}.dock{flex-wrap:wrap}.hud{flex-wrap:wrap}}@media(max-height:650px) and (orientation:landscape){.game{padding:5px;gap:4px}.workspace{padding:6px}.prompt{margin:2px}.target{height:48px;font-size:32px}.trays{margin:5px auto}.tray{min-height:130px;padding:5px}.cookie{width:40px}.feedback{margin:3px}.dock{padding-top:3px;padding-bottom:3px}.sound{width:48px;height:48px}}