#geometry-cave-game{--cream:#fff8dc;--lime:#b9f34a;--teal:#0e6670;--gold:#ffc43d;position:relative;width:100vw;height:100dvh;min-height:520px;overflow:hidden;background:#07353c url('assets/cave-waterfall-bg.png') center/cover no-repeat;font-family:Tahoma,"Noto Sans Thai",sans-serif;color:#173d49;box-shadow:inset 0 0 80px #00191f}
#geometry-cave-game *{box-sizing:border-box}#geometry-cave-game button{font:inherit;cursor:pointer;border:0}.hidden{display:none!important}
.cave-intro,.finish{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:linear-gradient(90deg,#001a22c9,#06434b73,#001a22c9)}
.intro-panel,.finish>div{width:min(620px,82%);padding:36px;text-align:center;border:4px solid #d7ff78;border-radius:24px;background:linear-gradient(160deg,#fffceef2,#dff6d9e8);box-shadow:0 10px 0 #315925,0 20px 55px #001820aa}.finish>div{display:flex;flex-direction:column;align-items:center}.chapter{display:inline-block;padding:7px 16px;border-radius:99px;background:#1d7c70;color:white;font-weight:800}.intro-panel h1,.finish h1{font-size:clamp(36px,5.2vw,76px);line-height:1.2;margin:16px 0 14px}.intro-panel h1 span{display:inline-block;color:#439841;padding-top:.08em}.intro-panel p,.finish p{margin:0 0 22px;font-weight:700;line-height:1.75}.start-game,.again{padding:13px 30px;border-radius:15px!important;background:linear-gradient(#f8e464,#f4a92d);color:#4d3909;font-size:20px;font-weight:900;box-shadow:0 6px 0 #9a6318}.trophy{display:block;font-size:90px;line-height:1;margin:0 0 18px}.finish h1{margin:0 0 14px}
.game-screen{position:absolute;inset:0}.topbar{position:absolute;z-index:10;left:1.2%;right:1.2%;top:1.5%;height:9%;display:grid;grid-template-columns:1fr minmax(220px,36%) 1fr;align-items:center;padding:8px 18px;border:3px solid #d9ff84;border-radius:16px;background:#073d49eb;color:white;box-shadow:0 5px 0 #06242b}.game-name{font-weight:900;font-size:clamp(14px,1.4vw,22px)}.progress-wrap{text-align:center}.wave-label{font-size:clamp(13px,1.2vw,19px)}.track{height:10px;margin-top:5px;border-radius:99px;background:#ffffff40;overflow:hidden}.track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#5dffdc,#d4f346,#ffd13d);transition:.35s}.score{display:flex;justify-content:flex-end;align-items:center;gap:9px;font-weight:900}.sound{width:40px;height:40px;border-radius:10px;background:#fff;color:#164351;box-shadow:0 3px 0 #78999a}.mission{position:absolute;z-index:8;left:50%;top:12%;transform:translateX(-50%);width:min(780px,72%);padding:9px 18px;text-align:center;border:4px solid var(--lime);border-radius:17px;background:#fff9e9ed;box-shadow:0 6px 0 #426424}.mission small{color:#35883a;font-weight:900}.mission h2{margin:2px 0;font-size:clamp(18px,2vw,30px)}.mission p{margin:0;font-size:clamp(11px,1vw,15px)}
.bridge-zone{position:absolute;left:5%;right:5%;top:29%;height:34%;display:grid;place-items:center}.left-ledge,.right-ledge{position:absolute;top:58%;width:18%;height:18%;border-radius:50% 45% 12% 12%;background:linear-gradient(#a5ec3d 0 20%,#284537 21% 55%,#102d2d);box-shadow:0 10px 18px #00191f}.left-ledge{left:-4%}.right-ledge{right:-4%}.sequence{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.1vw,18px);width:86%;min-height:145px;padding:24px 18px;border:3px solid #a8ed53;border-radius:24px;background:#062e36bd;box-shadow:0 12px 35px #00191fab,inset 0 0 28px #4fffd21a}.tile{position:relative;display:grid;place-items:center;width:clamp(58px,8vw,112px);aspect-ratio:1;border:4px solid #f2ffbf;border-radius:16px;background:linear-gradient(145deg,#356c64,#173d45);box-shadow:0 8px 0 #031b21,0 0 18px #99ff6540;transition:.25s}.tile.blank{border-style:dashed;border-color:#ffe169;background:#413d2866;animation:pulse 1.2s ease-in-out infinite}.tile.blank::after{content:'?';font-size:clamp(32px,4vw,60px);font-weight:900;color:#ffe169}.tile.reveal{animation:pop .45s ease-out}.geo{display:block;width:62%;height:62%;filter:drop-shadow(0 6px 2px #001e25aa)}.geo.circle{border-radius:50%;background:radial-gradient(circle at 32% 25%,#fff7a7 0 8%,#ffd348 28%,#e68b24 78%)}.geo.square{border-radius:8px;background:linear-gradient(135deg,#73ecce,#178b91);box-shadow:inset -9px -9px 0 #0a6470}.geo.triangle{background:linear-gradient(135deg,#e886ff,#7f55d8);clip-path:polygon(50% 0,100% 92%,0 92%)}.geo.oval{width:70%;height:50%;border-radius:50%;background:radial-gradient(ellipse at 32% 25%,#fff 0 8%,#ff85b2 30%,#d94a82 80%)}.mist{position:absolute;inset:auto 15% 0;height:45%;background:radial-gradient(ellipse,#7ffbe76b,transparent 67%);filter:blur(10px)}
.answers{position:absolute;z-index:9;left:22%;right:22%;bottom:10%;height:18%;display:grid;grid-template-columns:repeat(4,1fr);gap:4%}.answer{display:grid;place-items:center;border:4px solid #dcff9f!important;border-radius:18px!important;background:linear-gradient(#fffdf2f2,#dff3d4e8);box-shadow:0 7px 0 #2d5b32;transition:.15s}.answer:hover{transform:translateY(-5px);filter:brightness(1.08)}.answer .geo{width:55px;height:55px}.answer.wrong{animation:shake .38s;background:#ffd7d7}.feedback{position:absolute;z-index:10;left:50%;bottom:3%;transform:translateX(-50%);width:max-content;max-width:80%;padding:8px 22px;border:3px solid #cfff72;border-radius:99px;background:#073d49ed;color:white;text-align:center;font-weight:800}
@keyframes pulse{50%{box-shadow:0 8px 0 #031b21,0 0 30px #ffe364aa}}@keyframes pop{50%{transform:scale(1.28) rotate(8deg)}}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@media(max-height:650px){.intro-panel{padding:22px 30px}.intro-panel h1{font-size:clamp(32px,7vh,52px);line-height:1.18;margin:10px 0}.intro-panel p{line-height:1.55;margin-bottom:16px}.finish>div{padding:22px 30px}.trophy{font-size:70px;margin-bottom:14px}.finish h1{font-size:clamp(34px,7vh,52px);line-height:1.16}.finish p{margin-bottom:16px}}
@media(max-width:720px){#geometry-cave-game{min-height:580px;aspect-ratio:auto}.intro-panel{padding:26px 20px}.intro-panel h1{font-size:clamp(34px,11vw,54px);line-height:1.22}.topbar{grid-template-columns:1fr 1.2fr}.score .hearts{display:none}.mission{width:92%}.sequence{width:98%;gap:5px;padding:16px 8px}.tile{width:55px}.answers{left:8%;right:8%}.game-name{display:none}}