:root{--ink:#eef7ed;--teal:#24c6ba;--red:#aa3559;--paper:#f7f4e9;--dark:#061f23}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Tahoma,"Noto Sans Thai",sans-serif;background:#031417}button{font:inherit;cursor:pointer;border:0}#game{position:relative;width:100vw;height:100dvh;min-height:560px;overflow:hidden;background:linear-gradient(#021a1f42,#03151896),url('assets/shadow-lab-bg.png') center/cover no-repeat}.hidden{display:none!important}.overlay{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(circle,#124b5070,#020f14e6);text-align:center}.intro-card,.result{width:min(650px,84%);padding:34px;color:white;text-shadow:0 3px 0 #061418}.intro-card small{display:inline-block;padding:7px 17px;border:2px solid #d6eee8;border-radius:50%;background:#093e44cc;font-weight:800;transform:rotate(-1deg)}.intro-card h1,.result h1{margin:12px 0;font-family:Georgia,serif;font-size:clamp(48px,7vw,94px);line-height:1.05;letter-spacing:-2px;text-transform:uppercase}.intro-card h1 span{color:#4bd7c4}.intro-card p,.result p{font-size:clamp(16px,1.7vw,24px);font-weight:700;line-height:1.65}.paper-button{padding:12px 34px;border:4px solid #fff!important;border-radius:50% 45% 52% 42%!important;background:var(--paper);color:#172e31;font-weight:900;font-size:clamp(16px,1.5vw,22px);box-shadow:0 7px 0 #142e32;transform:rotate(-1deg)}.paper-button:hover{transform:translateY(-3px) rotate(1deg)}header{position:absolute;z-index:20;left:1%;right:1%;top:1%;height:8%;display:grid;grid-template-columns:1fr minmax(220px,35%) 1fr;align-items:center;padding:6px 16px;border:3px solid #dcece8;border-radius:48% 46% 12px 16px;background:#082b31e8;color:white;box-shadow:0 5px 0 #020f12;font-size:clamp(12px,1.15vw,19px)}.brand{font-weight:900}.progress{text-align:center}.progress i{display:block;height:8px;margin-top:5px;background:#ffffff38;border-radius:99px;overflow:hidden}.progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#30d2c4,#f0e77c,#cf466f);transition:.35s}.status{display:flex;justify-content:flex-end;align-items:center;gap:10px}.status>span{color:#ef527b}.status button{width:38px;height:38px;border:2px solid white;border-radius:47% 42% 50% 35%;background:#f5f1e7;color:#16393c;box-shadow:0 3px 0 #0a191d}.mission{position:absolute;z-index:18;left:50%;top:10%;transform:translateX(-50%) rotate(-.4deg);width:min(820px,70%);padding:9px 20px;text-align:center;color:#18383c;background:#f8f5e9ed;border:4px solid white;border-radius:50% 10% 45% 12%;box-shadow:0 7px 0 #713046}.mission small{font-weight:900;color:#9e3655}.mission h2{margin:2px 0;font-size:clamp(18px,1.8vw,29px)}.mission p{margin:0;font-size:clamp(11px,1vw,15px)}.lab{position:absolute;left:5%;right:5%;top:27%;height:42%;display:grid;grid-template-columns:1fr 1fr;gap:6%}.experiment,.screen{position:relative;min-width:0}.experiment{border-bottom:5px solid #7a8c80}.screen{display:grid;place-items:center;overflow:hidden;border:8px solid #172a2c;border-radius:3% 5% 4% 2%;background:radial-gradient(circle,#fffef1,#dddcd0);box-shadow:0 0 0 3px #9a8877,0 0 30px #defbf380}.screen-title{position:absolute;top:8px;padding:3px 14px;border-bottom:2px solid #46504b;color:#30403f;font-weight:900;font-size:clamp(11px,1vw,15px)}.flashlight{position:absolute;left:2%;top:49%;z-index:5;width:105px;height:48px;transform:rotate(-6deg);border-radius:12px 3px 3px 12px;background:linear-gradient(#d8e4d8,#5a706d);box-shadow:0 5px 0 #182d30}.flashlight:after{content:"";position:absolute;right:-25px;top:-10px;border-left:30px solid #aac0b8;border-top:10px solid transparent;border-bottom:58px solid transparent}.flashlight i{position:absolute;left:15px;top:34px;width:36px;height:30px;transform:rotate(14deg);background:#4b5d5a;border-radius:4px}.flashlight span{position:absolute;right:-28px;top:8px;width:12px;height:30px;background:#fff8b4;filter:blur(2px)}.beam{position:absolute;z-index:1;left:20%;top:35%;width:72%;height:42%;background:linear-gradient(90deg,#fff5a388,transparent);clip-path:polygon(0 43%,100% 0,100% 100%,0 57%);filter:blur(2px)}.object-view{position:absolute;z-index:4;left:57%;top:42%;width:150px;height:150px;display:grid;place-items:center;transform:translate(-50%,-50%)}.direction-tag{position:absolute;left:57%;bottom:4%;transform:translateX(-50%);padding:5px 15px;border:2px solid #b6eadd;border-radius:99px;background:#082b31dc;color:white;font-weight:900}.solid{position:relative;display:block;width:105px;height:105px;filter:drop-shadow(0 12px 5px #0009)}.solid.sphere{border-radius:50%;background:radial-gradient(circle at 30% 23%,#fff 0 7%,#62e3d5 18%,#187e83 67%,#093b46 100%)}.solid.box{width:112px;height:90px;background:linear-gradient(135deg,#ef9d6b,#973856);border-radius:4px;box-shadow:inset -20px -15px #6a2741;transform:skewY(-4deg)}.solid.cylinder{width:82px;height:112px;border-radius:50%/12%;background:linear-gradient(90deg,#a53d62,#ef99a8 45%,#672443)}.solid.cylinder:before,.solid.cylinder:after{content:"";position:absolute;left:0;width:100%;height:25px;border-radius:50%;background:#e996a6}.solid.cylinder:before{top:-2px}.solid.cylinder:after{bottom:-2px;background:#61233e}.solid.cone{width:110px;height:115px;background:linear-gradient(90deg,#128188,#57ddd0 50%,#0a4c58);clip-path:polygon(50% 0,100% 92%,94% 100%,6% 100%,0 92%);border-radius:46%}.shadow-view{display:flex;align-items:center;justify-content:center;gap:32px;width:85%;height:78%;color:#111}.shadow-shape{display:block;width:145px;height:145px;background:#111;filter:blur(1px) drop-shadow(8px 10px 6px #0005);animation:breathe 2s ease-in-out infinite}.shadow-shape.circle{border-radius:50%}.shadow-shape.rectangle{width:170px;height:125px;border-radius:4px}.shadow-shape.square{width:145px;height:145px;border-radius:4px}.shadow-shape.triangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.shadow-shape.unknown{display:grid;place-items:center;border:4px dashed #303a37;border-radius:50%;background:transparent;color:#1c2624;font-size:90px;font-weight:900;filter:none}.evidence-pair{display:grid;grid-template-columns:1fr 1fr;gap:34px;text-align:center}.evidence-pair label{display:grid;gap:10px;color:#334542;font-weight:900}.evidence-pair .shadow-shape{width:105px;height:105px}.evidence-pair .rectangle{width:130px;height:90px}.answers{position:absolute;z-index:18;left:16%;right:16%;bottom:8%;height:16%;display:grid;grid-template-columns:repeat(4,1fr);gap:3%}.answer{position:relative;display:grid;place-items:center;padding:7px;border:4px solid #fff!important;border-radius:45% 8% 42% 12%!important;background:#f8f5e9ed;color:#18383c;font-weight:900;box-shadow:0 7px 0 #55283a;transition:.15s}.answer:hover{transform:translateY(-5px) rotate(1deg)}.answer .mini{transform:scale(.48);height:58px}.answer .flat{display:block;width:60px;height:60px;background:#172526}.answer .flat.circle{border-radius:50%}.answer .flat.square{border-radius:3px}.answer .flat.rectangle{width:78px;height:52px}.answer .flat.triangle{clip-path:polygon(50% 0,100% 100%,0 100%)}.answer.wrong{background:#e9a7b9;animation:shake .35s}.feedback{position:absolute;z-index:19;left:50%;bottom:2%;transform:translateX(-50%);width:max-content;max-width:80%;padding:7px 22px;border:3px solid white;border-radius:50%;background:#082b31eb;color:white;text-align:center;font-weight:900}.result>div{font-size:100px}@keyframes breathe{50%{transform:scale(1.035);opacity:.9}}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@media(max-height:680px){.mission{top:9%;padding:5px 15px}.lab{top:25%;height:40%}.answers{height:17%;bottom:8%}.object-view{transform:translate(-50%,-50%) scale(.82)}.shadow-shape{transform:scale(.8)}}@media(max-width:780px){#game{min-height:650px}.brand{display:none}header{grid-template-columns:1fr 1fr}.mission{width:94%}.lab{left:2%;right:2%;gap:2%}.flashlight{transform:scale(.7)}.object-view{left:62%;transform:translate(-50%,-50%) scale(.7)}.answers{left:3%;right:3%;gap:1%}.answer{font-size:12px}.status{gap:4px}}
.experiment.from-top .flashlight{left:51%;top:-3%;transform:translateX(-50%) rotate(90deg) scale(.78)}.experiment.from-top .beam{left:29%;top:13%;width:44%;height:62%;background:linear-gradient(180deg,#fff5a38c,transparent);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%)}.experiment.direction-case .flashlight,.experiment.direction-case .beam,.experiment.identify-case .flashlight,.experiment.identify-case .beam{opacity:0}.mystery-object{display:grid;place-items:center;width:116px;height:130px;border:5px dashed #d7eee7;border-radius:46% 40% 50% 43%;background:#082b3199;color:#fff;font-family:Georgia,serif;font-size:86px;font-weight:900;box-shadow:0 0 30px #40e6d15e}
header{left:12px;right:12px;top:10px;height:64px;min-height:64px;padding:8px 16px;border-radius:16px;background:#082b31ed}
@media(max-width:780px){header{left:7px;right:7px;top:7px;height:58px;min-height:58px;padding:7px 10px;border-radius:13px}.status button{width:34px;height:34px}}