*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Mali,Tahoma,sans-serif;background:#062a47;color:#fff}.screen{width:100vw;height:100dvh;position:relative;background:url('assets/block-island-arena-v2.png') center/cover no-repeat;overflow:hidden}.screen:after{content:"";position:absolute;inset:0;background:linear-gradient(#06294c33,#001b3566);pointer-events:none}.start,.end{display:grid;place-items:center}.panel{z-index:2;width:min(760px,86vw);padding:clamp(24px,4vw,48px);text-align:center;border:6px solid #fff;border-radius:30px;background:linear-gradient(145deg,#123d63f2,#07243ef2);box-shadow:0 14px 0 #001a2c,0 22px 50px #00182f99}.eyebrow{display:inline-block;padding:7px 18px;border-radius:99px;background:#ffbd32;color:#493004;font-weight:900}.panel h1{margin:12px 0 5px;font-size:clamp(38px,6vw,75px);line-height:1;color:#fff;text-shadow:0 5px #166082,0 9px #05243a}.panel h2{margin:9px;color:#7ee8ff}.panel p{font-size:clamp(17px,2vw,24px)}button{font:inherit}.btn{border:4px solid #fff;border-radius:18px;padding:13px 28px;background:linear-gradient(#ffcb4d,#ed8a18);color:#4b2b00;font-size:clamp(20px,2.3vw,28px);font-weight:900;box-shadow:0 7px 0 #9b4b0a;cursor:pointer}.btn:active,.answer:active{transform:translateY(4px);box-shadow:0 3px 0 #562c0a}.sound{position:fixed;right:18px;top:auto;bottom:72px;z-index:20;width:52px;height:52px;border:3px solid #fff;border-radius:15px;background:#153d62;color:#fff;font-size:24px;cursor:pointer}.hud{position:absolute;z-index:3;left:2vw;right:2vw;top:12px;height:88px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px}.fighter{display:grid;gap:5px}.fighter.enemy{text-align:right}.name{font-size:clamp(14px,1.6vw,23px);font-weight:900;text-shadow:0 3px #00192d}.health{height:25px;border:4px solid #fff;border-radius:99px;background:#132438;overflow:hidden;box-shadow:0 4px 0 #00192d}.health i{display:block;height:100%;width:100%;transition:width .45s}.player .health i{background:linear-gradient(90deg,#42d771,#a8f05d)}.enemy .health i{margin-left:auto;background:linear-gradient(90deg,#ffb32f,#f04f45)}.wave{padding:8px 15px;border:3px solid #fff;border-radius:16px;background:#173b5ce8;font-weight:900;white-space:nowrap}.arena{position:absolute;z-index:3;inset:105px 0 0}.question{position:absolute;top:1%;left:50%;transform:translateX(-50%);min-width:min(560px,84vw);padding:12px 28px;text-align:center;border:5px solid #fff;border-radius:22px;background:#123957ed;box-shadow:0 7px 0 #041c30}.equation{font-size:clamp(34px,5vw,64px);font-weight:900;letter-spacing:4px;color:#ffe06a;text-shadow:0 4px #713f00}.hint{font-size:14px;color:#bcefff}.answers{position:absolute;left:50%;top:25%;transform:translateX(-50%);display:flex;gap:clamp(12px,2vw,26px)}.answer{width:clamp(92px,10vw,150px);height:clamp(74px,11vh,105px);border:6px solid #fff;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff6cd 0 8%,#ffc341 10% 58%,#e97718 60%);color:#532900;font-size:clamp(31px,4.5vw,55px);font-weight:900;box-shadow:0 9px 0 #88400b,0 14px 25px #001b3877;cursor:crosshair;transition:.18s}.answer:hover{transform:translateY(-5px) scale(1.04)}.answer.hit{animation:targetHit .55s}.answer.miss{animation:targetMiss .55s}.cannonball{position:absolute;left:21%;bottom:41%;width:31px;height:31px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#d7f4ff,#344d61 38%,#0b1420 70%);opacity:0;z-index:7}.cannonball.fire{animation:fire .55s ease-in forwards}.smoke{position:absolute;left:24%;bottom:42%;font-size:58px;opacity:0}.smoke.puff{animation:puff .6s}.blocks{position:absolute;z-index:5;left:50%;bottom:2%;transform:translateX(-50%);display:flex;gap:clamp(5px,1.4vw,22px)}.block{width:clamp(66px,10vw,150px);height:clamp(56px,13vh,130px);display:grid;place-items:center;border:5px solid #ffd073;border-radius:15px;background:linear-gradient(145deg,#ef8e36,#bb4d24);box-shadow:inset 0 0 0 5px #7d301d,0 9px 0 #522111;color:#fff;font-size:32px;transition:.55s}.block.fallen{transform:translateY(180px) rotate(25deg);opacity:0}.status{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);padding:8px 19px;border-radius:15px;background:#082846dc;color:#fff;font-weight:900;opacity:0;transition:.2s}.status.show{opacity:1}.status.good{color:#8dffac}.status.bad{color:#ffb4aa}.controls{position:absolute;right:2vw;bottom:2vh;z-index:7;display:flex;gap:8px}.small{padding:8px 13px;border:3px solid #fff;border-radius:12px;background:#16466d;color:#fff;font-weight:900;cursor:pointer}.end .result-icon{font-size:75px}.end.lose .panel{border-color:#ff9b8f}.end.win .panel{border-color:#ffe064}@keyframes fire{0%{opacity:1;transform:translate(0,0) scale(.8)}75%{opacity:1;transform:translate(48vw,-28vh) scale(1.2)}100%{opacity:0;transform:translate(58vw,-31vh)}}@keyframes puff{0%{opacity:0;transform:scale(.3)}40%{opacity:1}100%{opacity:0;transform:translate(25px,-35px) scale(1.4)}}@keyframes targetHit{50%{transform:scale(.8) rotate(-10deg);filter:brightness(2)}}@keyframes targetMiss{25%,75%{transform:translateX(-9px)}50%{transform:translateX(9px);filter:hue-rotate(130deg)}}@media(max-height:650px) and (orientation:landscape){.hud{height:62px}.arena{inset:76px 0 0}.question{padding:5px 20px}.equation{font-size:36px}.answers{top:22%}.answer{height:61px;width:82px;font-size:29px}.blocks{bottom:0}.status{bottom:18%}}@media(max-aspect-ratio:4/3){.hud{grid-template-columns:1fr auto 1fr;gap:5px}.arena{inset:100px 0 0}.answers{top:29%}.answer{width:88px}.blocks{width:95%;justify-content:center}.block{width:14vw}.controls{bottom:auto;top:108px}}
.cannonball{position:fixed;left:27vw;top:35vh;bottom:auto;width:34px;height:34px}.cannonball.fire{animation:aimedFire .56s cubic-bezier(.2,.55,.4,1) forwards}.smoke{position:fixed;left:25.5vw;top:32vh;bottom:auto;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle,#f4f6f2cc 0 22%,#ccd7d366 23% 43%,transparent 45%);filter:blur(2px)}.enemy-shot{position:fixed;right:26vw;top:30vh;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ffde45 14%,#ff5d26 42%,#8c1024 70%);opacity:0;z-index:9;box-shadow:0 0 20px #ff6a22}.enemy-shot.counter{animation:counterFire .7s ease-in forwards}.answer.choice-correct{animation:choicePulse .55s;outline:6px solid #75ff9e}.answer.choice-wrong{animation:targetMiss .55s;outline:6px solid #ff7168}.tower-targets{position:fixed;left:66.8vw;top:34vh;width:25vw;height:22vh;z-index:5;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}.tower-target{position:relative;width:clamp(70px,7.8vw,126px);aspect-ratio:1;border-radius:50%;border:clamp(8px,1vw,15px) solid #8a4c1e;background:radial-gradient(circle at 38% 32%,#fff9dc,#ead8a4 65%,#c89b57 67%);box-shadow:inset 0 0 0 5px #f5c66b,0 8px 0 #4f2b17;transform-origin:50% 125%;transition:.3s}.tower-target:after{content:"";position:absolute;left:42%;top:88%;width:18%;height:55%;border-radius:5px;background:#74401e;box-shadow:-20px 25px 0 -5px #74401e,20px 25px 0 -5px #74401e;z-index:-1}.tower-target i{position:absolute;inset:31%;border-radius:50%;background:#ef5a3f;box-shadow:0 0 0 7px #ffd85b}.tower-target.active{filter:drop-shadow(0 0 12px #fff06b)}.tower-target.fall{animation:towerFall 1.15s forwards}.tower-target.fallen-static{transform:rotate(88deg) translateY(55px);opacity:.28;filter:grayscale(.5)}.screen.cannon-damaged{animation:cannonShake .55s}.screen.cannon-damaged:before{content:"";position:absolute;inset:0;z-index:15;background:#ff332244;animation:damageFlash .6s;pointer-events:none}@keyframes aimedFire{0%{opacity:1;transform:translate(0,0) scale(.7)}85%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1.2)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.8)}}@keyframes counterFire{0%{opacity:1;transform:translate(0,0)}85%{opacity:1;transform:translate(-47vw,4vh) scale(1.35)}100%{opacity:0;transform:translate(-47vw,4vh) scale(2)}}@keyframes towerFall{20%{filter:brightness(2);transform:rotate(-8deg)}55%{transform:rotate(38deg) translateY(12px)}100%{transform:rotate(88deg) translateY(55px);opacity:.35}}@keyframes choicePulse{50%{transform:scale(1.1);filter:brightness(1.3)}}@keyframes cannonShake{20%,60%{transform:translateX(-12px)}40%,80%{transform:translateX(12px)}}@keyframes damageFlash{to{opacity:0}}