:root{font-family:Tahoma,"Noto Sans Thai",sans-serif;color:#fff;background:#012d56;--a:#F59A32;--b:#27C6DE;--c:#9B68D8}*{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(#043d73aa,#03275288),url('assets/underwater-temple.png') center/cover;position:relative}.start{display:grid;place-items:center;padding:5vw}.logo{text-align:center;background:#052d5be8;border:5px solid #62f1ff;border-radius:40px;padding:clamp(22px,4vw,54px);box-shadow:0 16px 0 #021a3d,0 0 45px #4eefff}.logo span{font-weight:900;color:#ffe45b;font-size:clamp(18px,2vw,28px)}.logo h1{margin:.08em;font-size:clamp(52px,7vw,106px);line-height:1;text-shadow:0 7px #54278b}.logo p{font-size:clamp(18px,2vw,28px)}.legend{display:flex;justify-content:center;gap:12px;margin:20px}.legend i{font-style:normal;font-weight:900;padding:8px 20px;border-radius:22px;border:3px solid #fff}.a{background:var(--a)}.b{background:var(--b);color:#06345a}.c{background:var(--c)}button{border:0;border-radius:18px;padding:13px 28px;background:linear-gradient(#ffe86a,#ffad25);color:#082a55;font-weight:900;box-shadow:0 7px 0 #995000;cursor:pointer}button:active{transform:translateY(4px);box-shadow:0 3px 0 #995000}.sound{position:fixed;right:17px;bottom:17px;z-index:30;width:58px;height:58px;padding:0;border:3px solid #fff;border-radius:50%;background:#073367;color:#fff;box-shadow:0 6px 0 #021a3d;font-size:25px}.game{display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:clamp(8px,1.2vw,20px)}.hud{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#03234de8;border:3px solid #62f1ff;border-radius:20px;padding:9px 18px}.bar{height:18px;flex:1;max-width:600px;border:2px solid #fff;border-radius:15px;background:#173d66;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#27e2f4,#b76afa,#ffbd34);transition:.4s}.addition{margin:auto;text-align:center;background:#04264ce8;border:4px solid #ffe45b;border-radius:22px;padding:7px 28px;box-shadow:0 8px 0 #02162f}.addition small{display:block;color:#bffaff;font-weight:900}.equation{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.2vw,18px);font-size:clamp(27px,3.5vw,54px);font-weight:900}.pearl,.slot{width:clamp(60px,7vw,96px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;border:5px solid #fff;box-shadow:0 7px 0 #02214a}.pearl.a,.slot.a{background:var(--a)}.pearl.b,.slot.b{background:var(--b);color:#07345a}.pearl.c,.slot.c{background:var(--c)}.locks{width:min(1100px,92%);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,3vw,46px)}.lock{background:#042b58e8;border:5px solid #61eefa;border-radius:30px;padding:clamp(12px,2vw,26px);text-align:center;box-shadow:0 12px 0 #021932}.lock h2{margin:0 0 8px;color:#ffe45b;font-size:clamp(18px,2vw,28px)}.lock .equation{font-size:clamp(25px,3vw,46px)}.slot{border-style:dashed;background:#082a55!important;color:#fff!important;transition:.2s}.slot.selected{outline:6px solid #ffe45b}.slot.filled{border-style:solid}.slot.wrong{animation:shake .35s;border-color:#ff657c}.dock{display:flex;justify-content:center;align-items:center;gap:18px;background:#03234de8;border:3px solid #62f1ff;border-radius:22px;padding:10px 90px 10px 20px}.dock strong{color:#ffe45b}.tile{padding:0;width:clamp(54px,5vw,72px);aspect-ratio:1;border-radius:50%;font-size:clamp(24px,3vw,38px);box-shadow:0 6px 0 #02152c}.tile:active{transform:scale(.94)}.check{background:linear-gradient(#7dffb0,#20c986);box-shadow:0 7px 0 #087546}.feedback{min-width:180px;font-weight:900;color:#8affcf}.win{display:grid;place-items:center;text-align:center}.win>div{background:#03234ded;border:5px solid #ffe45b;border-radius:36px;padding:45px;box-shadow:0 16px 0 #02152c}.win h1{font-size:clamp(45px,7vw,95px);margin:.15em}.win .pearls{font-size:70px}@keyframes shake{25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}@media(max-aspect-ratio:4/3){body{overflow:auto}.game{height:auto;min-height:100dvh}.locks{grid-template-columns:1fr}.dock{flex-wrap:wrap;padding-right:75px}}@media(max-height:650px) and (orientation:landscape){.game{gap:5px;padding:6px}.addition{padding:3px 20px}.lock{padding:8px}.pearl,.slot{width:58px}.dock{padding-top:4px;padding-bottom:4px}.sound{width:48px;height:48px}}