:root{--ink:#5c4052;--pink:#f07f9d;--gold:#ffc955;--blue:#70c9ef}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Tahoma,"Noto Sans Thai",sans-serif;background:#f8c8b9}button{font:inherit;border:0;cursor:pointer}.game{position:relative;width:100vw;height:100dvh;background:url('assets/cat-castle-shop.png') center/100% 100% no-repeat;overflow:hidden}.hidden{display:none!important}.overlay{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:linear-gradient(90deg,#efa8b5e8,#77cce3bb);text-align:center}.intro-card{width:min(720px,80%);padding:clamp(25px,4vw,60px);background:#fff8eced;border:7px solid white;border-radius:38px;color:var(--ink);box-shadow:0 12px 0 #c66f7b,0 20px 35px #87495b55}.intro-card small{display:inline-block;padding:.35em 1em;background:var(--pink);color:white;border-radius:99px;font-weight:bold}.intro-card h1,.result-card h1{font-size:clamp(43px,6vw,88px);line-height:.95;margin:.22em 0}.intro-card h1 span{color:#f08a8f}.intro-card p,.result-card p{font-size:clamp(16px,1.6vw,25px);font-weight:bold}.primary{padding:.6em 1.7em;border:4px solid white;border-radius:20px;background:linear-gradient(#ffe987,#ffc23e);color:#76461b;font-size:clamp(17px,1.5vw,24px);font-weight:900;box-shadow:0 7px 0 #bd7323}.play{position:absolute;inset:0}header{position:absolute;z-index:15;left:1%;right:1%;top:1%;height:8%;display:grid;grid-template-columns:1fr minmax(220px,35%) 1fr;align-items:center;padding:5px 15px;border:3px solid white;border-radius:18px;background:#bd6f82e8;color:white;box-shadow:0 5px 0 #814355;font-size:clamp(12px,1.15vw,19px)}.progress{text-align:center;font-weight:bold}.progress i{display:block;height:10px;border-radius:99px;background:#ffffff66;overflow:hidden}.progress b{display:block;width:0;height:100%;background:linear-gradient(90deg,#72e6ff,#ffe45c);transition:.3s}.tools{display:flex;justify-content:flex-end;align-items:center;gap:9px;font-weight:bold}.tools button{width:clamp(32px,3vw,45px);aspect-ratio:1;border-radius:12px;background:white;color:var(--ink);box-shadow:0 3px 0 #b67b88}.order{position:absolute;z-index:12;left:50%;top:10%;transform:translateX(-50%);width:min(900px,66%);min-height:18%;display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center;padding:clamp(10px,1.4vw,22px);border:6px solid white;border-radius:28px;background:#fff8eff2;color:var(--ink);box-shadow:0 8px 0 #d48c75,0 13px 25px #724b4155}.portrait{display:grid;place-items:center;width:clamp(65px,7vw,110px);aspect-ratio:1;border-radius:50%;background:#ffd4dc;border:5px solid #f598ad;font-size:clamp(38px,4.5vw,73px)}.order small{font-weight:bold;color:#d85f79}.order h2{margin:.15em 0;font-size:clamp(18px,2vw,33px)}.order p{margin:0;font-size:clamp(11px,1vw,16px);color:#8e6b76}.order button{width:clamp(42px,4vw,62px);aspect-ratio:1;border-radius:50%;background:var(--blue);color:white;font-size:clamp(20px,2.2vw,34px);box-shadow:0 5px 0 #388fb5}.products{position:absolute;z-index:10;left:16%;right:16%;top:36%;bottom:13%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:5% 4%}.product{position:relative;display:grid;place-items:center;border:5px solid white;border-radius:25px;background:#fffaf0eF;color:var(--ink);box-shadow:0 8px 0 #cf8c75,0 13px 18px #70483f44;transition:.18s;overflow:hidden}.product:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 13px 0 #cf8c75,0 18px 24px #70483f55}.product:active{transform:translateY(4px)}.product .emoji{font-size:clamp(48px,6vw,96px);filter:drop-shadow(0 5px 2px #0003)}.product b{position:absolute;bottom:6px;left:8px;right:8px;padding:.25em;background:#fff;border-radius:10px;font-size:clamp(10px,1vw,16px)}.product.correct{background:#caffd5;outline:8px solid #62dc83}.product.wrong{animation:shake .35s;background:#ffd2d4}.feedback{position:absolute;z-index:12;left:50%;bottom:3%;transform:translateX(-50%);min-width:36%;padding:.65em 1.4em;border:4px solid white;border-radius:99px;background:#66506ee8;color:white;text-align:center;font-weight:bold;font-size:clamp(12px,1.2vw,19px);box-shadow:0 5px 0 #3e3147}.result-card{padding:35px;color:white;text-shadow:0 4px 0 #985467}.result-card>div{font-size:clamp(100px,13vw,190px)}@keyframes shake{25%{transform:translateX(-9px)}50%{transform:translateX(9px)}75%{transform:translateX(-5px)}}@media(max-height:650px){.order{top:9%;min-height:16%}.products{top:33%;bottom:12%}.product .emoji{font-size:clamp(42px,5vw,75px)}}