:root{--teal:#087d85;--gold:#ffc52e;--purple:#7b48dc;--ink:#183e4c}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Tahoma,"Noto Sans Thai",sans-serif;background:#164b58}button{font:inherit;border:0;cursor:pointer}#game{position:relative;width:100vw;height:100dvh;min-height:600px;overflow:hidden;background:linear-gradient(#12475a22,#153e4c88),url('assets/geometry-boss-lab.png') center/cover no-repeat}.hidden{display:none!important}.overlay{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:linear-gradient(110deg,#0b7080b8,#7030a092);text-align:center}.intro-card,.result{width:min(650px,84%);padding:34px;border:6px solid white;border-radius:38px;background:#fff9e9ec;color:var(--ink);box-shadow:0 11px 0 #dc9821,0 25px 50px #15343d88}.intro-card small{display:inline-block;padding:7px 18px;border-radius:99px;background:var(--teal);color:white;font-weight:900}.intro-card h1,.result h1{font-size:clamp(46px,6.5vw,88px);line-height:1.06;margin:14px 0}.intro-card h1 span{color:var(--purple)}.intro-card p,.result p{font-size:clamp(17px,1.6vw,24px);font-weight:800;line-height:1.55}.primary{padding:13px 34px;border:4px solid white;border-radius:18px;background:linear-gradient(#ffe56c,#f7ad26);color:#603d04;font-size:20px;font-weight:900;box-shadow:0 7px 0 #a96711}header{position:absolute;z-index:20;left:1%;right:1%;top:1%;height:8%;min-height:58px;display:grid;grid-template-columns:1fr minmax(220px,35%) 1fr;align-items:center;padding:6px 16px;border:4px solid white;border-radius:17px;background:#086d79ed;color:white;box-shadow:0 6px 0 #074653;font-size:clamp(12px,1.15vw,19px)}.progress{text-align:center}.progress i{display:block;height:9px;margin-top:4px;border-radius:99px;background:#ffffff55;overflow:hidden}.progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#54f6d2,#ffe24f,#ff6f8e);transition:.35s}.tools{display:flex;justify-content:flex-end;align-items:center;gap:9px}.tools button{width:39px;height:39px;border-radius:11px;background:white;color:var(--ink);box-shadow:0 3px 0 #73aeb4}.question-card{position:absolute;z-index:16;left:50%;top:10.5%;transform:translateX(-50%);width:min(850px,72%);min-height:120px;padding:10px 20px;text-align:center;border:5px solid white;border-radius:22px;background:#fffaf0ed;color:var(--ink);box-shadow:0 7px 0 #de9f28}.question-card small{display:inline-block;padding:4px 13px;border-radius:99px;background:var(--purple);color:white;font-weight:900}.question-card h2{margin:5px 0;font-size:clamp(18px,1.7vw,28px)}.clue{height:48px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:900}.arena{position:absolute;left:9%;right:9%;top:30%;height:38%;display:grid;grid-template-columns:1fr 1fr;align-items:end}.fighter{position:relative;display:grid;justify-items:center}.actor{position:relative;font-size:clamp(100px,10vw,165px);line-height:1;filter:drop-shadow(0 13px 7px #18353c88);transition:.3s}.name{padding:4px 14px;border:3px solid white;border-radius:99px;background:#105e69dd;color:white;font-weight:900}.gear{position:absolute;left:50%;top:35%;width:230px;height:170px;transform:translateX(-50%);pointer-events:none}.gear-piece{position:absolute;font-size:32px;filter:drop-shadow(0 4px 2px #0005);animation:gearPop .5s}.gear-piece:nth-child(4n+1){left:5%;top:10%}.gear-piece:nth-child(4n+2){right:3%;top:10%}.gear-piece:nth-child(4n+3){left:12%;bottom:5%}.gear-piece:nth-child(4n){right:10%;bottom:4%}.power,.boss-hp{width:min(240px,70%);height:17px;margin-top:8px;border:3px solid white;border-radius:99px;background:#293c48;overflow:hidden}.power span,.boss-hp span{display:block;height:100%;transition:.45s}.power span{width:0;background:linear-gradient(90deg,#57e7c4,#ffe247)}.boss-hp span{width:100%;background:linear-gradient(90deg,#ffdb49,#f14868)}.effect{position:absolute;z-index:8;left:50%;top:48%;transform:translate(-50%,-50%);font-size:80px;pointer-events:none}.effect.fly{animation:attack .7s ease-out}.boss.hit .actor{animation:bossHit .5s}.answers{position:absolute;z-index:18;left:18%;right:18%;bottom:7%;height:17%;display:grid;grid-template-columns:repeat(4,1fr);gap:3%}.answer{display:grid;place-items:center;padding:7px;border:4px solid white;border-radius:17px;background:#fffaf0ed;color:var(--ink);font-weight:900;box-shadow:0 7px 0 #553f8a;transition:.15s}.answer:hover{transform:translateY(-5px);filter:brightness(1.07)}.answer.wrong{background:#ffb4bf;animation:shake .35s}.visual{display:grid;place-items:center;width:62px;height:62px}.flat{display:block;width:52px;height:52px;background:linear-gradient(135deg,#70e7d0,#158ea1)}.flat.circle{border-radius:50%}.flat.oval{width:62px;height:42px;border-radius:50%}.flat.triangle{clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(135deg,#e88fff,#7540cb)}.flat.square{border-radius:5px;background:linear-gradient(135deg,#ffcb4c,#ee792c)}.solid{display:block;position:relative;width:55px;height:55px}.solid.sphere{border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff 0 7%,#81dcff 20%,#2f78df 72%)}.solid.box{height:47px;background:linear-gradient(135deg,#ffcd58,#dd7726);box-shadow:inset -10px -8px #ad551d;border-radius:5px}.solid.cylinder{width:44px;background:linear-gradient(90deg,#a371eb,#e8c5ff 48%,#7145b4);border-radius:50%/12%}.solid.cylinder:before{content:"";position:absolute;left:0;top:-1px;width:100%;height:12px;border-radius:50%;background:#d8b9fb}.solid.cone{background:linear-gradient(90deg,#58d8a2,#c3f2cb 50%,#24996d);clip-path:polygon(50% 0,100% 100%,0 100%)}.object{font-size:48px}.pattern{display:flex;gap:7px}.pattern .flat{width:38px;height:38px}.pattern .blank{display:grid;place-items:center;border:3px dashed #7045a8;border-radius:8px;background:#fff;color:#7045a8;font-size:24px;font-weight:900}.feedback{position:absolute;z-index:19;left:50%;bottom:1.5%;transform:translateX(-50%);width:max-content;max-width:80%;padding:7px 22px;border:3px solid white;border-radius:99px;background:#075f6ee9;color:white;text-align:center;font-weight:900}.result>div{font-size:90px;line-height:1;margin-bottom:12px}@keyframes gearPop{50%{transform:scale(1.6) rotate(15deg)}}@keyframes attack{0%{left:33%;opacity:0}50%{opacity:1}100%{left:67%;opacity:0}}@keyframes bossHit{30%{transform:translateX(14px) rotate(8deg);filter:brightness(2)}60%{transform:translateX(-10px) rotate(-6deg)}}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@media(max-height:700px){.question-card{top:10%;min-height:100px;padding:6px 18px}.arena{top:28%;height:38%}.actor{font-size:100px}.answers{height:18%;bottom:7%}.clue{height:38px}.object{font-size:38px}}@media(max-width:780px){#game{min-height:650px}header{grid-template-columns:1fr 1.2fr}.tools #hearts,header>b{display:none}.question-card{width:94%}.arena{left:1%;right:1%}.gear{transform:translateX(-50%) scale(.7)}.answers{left:3%;right:3%;gap:1%}.answer{font-size:12px}.feedback{font-size:12px}}
.gear-piece{right:auto!important;bottom:auto!important}
.actor{width:clamp(130px,12vw,205px);height:clamp(150px,16vw,250px);display:grid;place-items:end center;font-size:0}.actor img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 13px 7px #18353c88)}.boss .actor img{transform:scale(1.08)}.pattern .flat.oval{width:48px;height:30px;border-radius:50%}.pattern .flat.circle{width:38px;height:38px;border-radius:50%}
@media(max-height:700px){.actor{width:125px;height:150px}}