:root{font-family:Tahoma,"Noto Sans Thai",sans-serif;color:#123c62;--navy:#123c62;--blue:#1ab9e8;--yellow:#ffd447;--coral:#ff6f61}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#bbedfb}button{font:inherit}.screen{width:100vw;height:100dvh;background:linear-gradient(#e8fbff20,#50cce855),url('assets/arctic-islands.png') center/cover;position:relative}.start,.finish{display:grid;place-items:center;text-align:center}.card{width:min(760px,90vw);padding:clamp(25px,4vw,55px);background:#ffffffed;border:7px solid #fff;border-radius:38px;box-shadow:0 15px 0 #177ea6,0 25px 45px #176f9255}.logo{font-size:clamp(55px,8vw,110px);line-height:.9;margin:0;color:#126f9e;text-shadow:0 5px 0 #bdefff,0 8px 0 #084e78}.logo span{display:block;color:#f59b16;font-size:clamp(25px,3.8vw,48px);line-height:1.1;white-space:nowrap;margin-top:15px;text-shadow:0 3px 0 #fff2ae,0 6px 0 #9b5500}.card p{font-size:clamp(19px,2vw,28px);font-weight:800}.btn{border:4px solid #fff;border-radius:22px;padding:13px 28px;background:linear-gradient(#ffe96d,#ffbc28);color:#5b3a00;font-size:clamp(19px,2vw,28px);font-weight:900;box-shadow:0 8px 0 #c67900;cursor:pointer}.btn:active{transform:translateY(5px);box-shadow:0 3px 0 #c67900}.sound{position:fixed;z-index:30;right:18px;bottom:18px;width:58px;height:58px;border:4px solid #fff;border-radius:50%;background:#123c62;color:#fff;font-size:25px;box-shadow:0 6px 0 #082640;cursor:pointer}.game{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:clamp(8px,1.2vw,18px)}.hud,.answerbar{z-index:5;width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,24px);background:#123c62ed;border:4px solid #fff;border-radius:24px;padding:8px 75px;color:#fff;box-shadow:0 7px 0 #082640}.hud strong{white-space:nowrap}.progress{height:20px;flex:1;max-width:650px;border:3px solid #fff;border-radius:20px;overflow:hidden;background:#35617e}.progress i{display:block;height:100%;background:linear-gradient(90deg,#2de0da,#ffd447,#ff6f61);transition:.45s}.small{border:2px solid #fff;border-radius:12px;padding:7px 12px;background:#39c9ee;color:#103b61;font-weight:900;cursor:pointer}.arena{z-index:3;align-self:center;justify-self:center;width:min(1500px,97vw);height:min(72vh,760px);position:relative}.question{position:absolute;top:1%;left:50%;transform:translateX(-50%);z-index:7;background:#fff;border:5px solid #19b9e8;border-radius:25px;padding:8px 25px;text-align:center;box-shadow:0 7px 0 #087ba7;min-width:min(580px,75vw)}.question b{font-size:clamp(20px,2vw,31px)}.question small{display:block;color:#287098;font-weight:800}.island-group{position:absolute;top:25%;width:43%;height:56%;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:clamp(2px,.45vw,7px);padding:2%;}.left{left:3%}.right{right:3%}.count{position:absolute;top:18%;width:70px;height:55px;display:grid;place-items:center;border-radius:18px;background:#fff;border:4px solid #18badf;box-shadow:0 6px 0 #087da6;font-size:34px;font-weight:900;z-index:6}.count.left-count{left:20%}.count.right-count{right:20%}.penguin{width:clamp(38px,4.25vw,70px);aspect-ratio:.72;position:relative;filter:drop-shadow(0 4px 2px #15648755);animation:pop .35s both;transform-origin:bottom}.penguin:before{content:"";position:absolute;inset:10% 8% 7%;border-radius:52% 52% 45% 45%;background:radial-gradient(ellipse at 50% 60%,#fff 0 43%,transparent 45%),#173c59;border:2px solid #fff}.penguin:after{content:"";position:absolute;left:32%;top:1%;width:36%;height:23%;border-radius:50%;background:linear-gradient(145deg,#ffd447 45%,#ff9f2b 46% 64%,transparent 65%);box-shadow:-8px 25px 0 -5px #ffd447,8px 25px 0 -5px #ffd447}.penguin i{position:absolute;z-index:2;top:22%;left:29%;width:8%;aspect-ratio:1;border-radius:50%;background:#15344e;box-shadow:20px 0 #15344e}.penguin:nth-child(3n):before{background:radial-gradient(ellipse at 50% 60%,#fff 0 43%,transparent 45%),#315f7e}.penguin:nth-child(3n+1){transform:rotate(-3deg)}.penguin:nth-child(3n+2){transform:rotate(3deg)}@keyframes pop{from{opacity:0;transform:translateY(22px) scale(.5)}to{opacity:1}}.answerbar{min-height:86px}.answerbar span{font-size:clamp(17px,2vw,25px);font-weight:900}.choice{width:clamp(70px,8vw,110px);height:58px;border:4px solid #fff;border-radius:18px;background:linear-gradient(#56dcef,#159fd8);color:#fff;font-size:38px;font-weight:900;box-shadow:0 7px 0 #06668e;cursor:pointer}.choice:hover{transform:translateY(-3px)}.choice.wrong{animation:shake .35s;background:#ff6f61}.feedback{min-width:190px;font-weight:900;color:#65f8dc}.stars{font-size:60px}.finish h1{font-size:clamp(42px,7vw,82px);margin:.1em;color:#127aa7}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}@media(max-height:650px) and (orientation:landscape){.game{gap:4px;padding:5px}.hud,.answerbar{padding-top:4px;padding-bottom:4px}.arena{height:74vh}.question{padding:4px 18px}.island-group{top:23%;height:58%}.count{top:16%;height:45px}.choice{height:48px}.answerbar{min-height:58px}.sound{width:48px;height:48px}}@media(max-aspect-ratio:4/3){body{overflow:auto}.screen{height:auto;min-height:100dvh}.game{grid-template-rows:auto auto auto}.arena{height:70vh;min-height:540px}.hud{flex-wrap:wrap;padding:8px 65px 8px 12px}.answerbar{flex-wrap:wrap;padding:10px 70px 10px 12px}.penguin{width:clamp(27px,6vw,48px)}}