:root{--ink:#eefcff;--navy:#071b2d;--cyan:#68f4db;--acid:#b7ff52;--coral:#ff806c;--gold:#ffd273;--brick:#b95343;--brick-dark:#6d2d35}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--navy);font-family:"Gowun Dodum",sans-serif;color:var(--ink)}button,input{font:inherit}.game{position:relative;width:100%;height:100%;min-height:540px;isolation:isolate;overflow:hidden;background:linear-gradient(#071b2d44,#08384d55),url("assets/venice-storm.png") center/cover no-repeat;user-select:none}.game::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 38%,transparent 0 22%,#04142188 90%)}.sky-glow{position:absolute;width:50vw;height:50vw;left:25%;top:5%;background:#a6ff5a12;border-radius:50%;filter:blur(60px);animation:pulse 5s ease-in-out infinite}.hud{position:absolute;z-index:30;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left));background:linear-gradient(#03101bc9,transparent)}.brand{font-family:"Black Han Sans",sans-serif;letter-spacing:1px;font-size:clamp(17px,2.2vw,28px);text-shadow:0 3px 0 #0008}.brand span{color:var(--acid)}.hud-stats{display:flex;gap:clamp(8px,3vw,44px);padding:6px 18px;border:1px solid #b5fff62c;border-radius:16px;background:#04182399;backdrop-filter:blur(8px)}.hud-stats div{text-align:center;min-width:48px}.hud-stats small{display:block;font-size:10px;color:#a7cbd0}.hud-stats strong{font-family:"Black Han Sans";font-size:clamp(17px,2.2vw,26px);font-weight:400}.icon-button{width:42px;height:42px;border:1px solid #fff3;border-radius:50%;color:white;background:#03172499;font-weight:bold;cursor:pointer}.playfield{position:absolute;inset:70px 0 10%;z-index:10}.tower{position:absolute;z-index:14;left:50%;bottom:3%;width:min(28vw,250px);transform:translateX(-50%);filter:drop-shadow(0 12px 10px #00121a99);transition:transform 1.5s ease-in}.tower.sinking{animation:sink 2.6s ease-in forwards}.answer-deck{position:relative;padding:10px 12px 12px;background:linear-gradient(#e7d6ae,#978061);border:4px solid #453b36;border-radius:13px 13px 4px 4px;box-shadow:inset 0 2px #fff9,0 -4px 0 #222a}.answer-deck::before,.answer-deck::after{content:"";position:absolute;bottom:-12px;width:15px;height:14px;background:#4c4540}.answer-deck::before{left:14%}.answer-deck::after{right:14%}.answer-deck label{display:block;text-align:center;color:#26383b;font-weight:bold;font-size:12px;margin-bottom:5px}.answer-row{display:flex;gap:5px}.answer-row input{width:100%;min-width:0;height:44px;border:3px solid #273b3d;border-radius:8px;background:#f5ffff;color:#10252b;text-align:center;font-family:"Black Han Sans";font-size:25px;outline:none}.answer-row input:focus{border-color:#31cbb6;box-shadow:0 0 0 3px #83ffda70}.answer-row button{border:0;border-radius:8px;padding:0 12px;background:#136b69;color:white;font-weight:bold;cursor:pointer}.bricks{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px 6px 0}.brick{position:relative;aspect-ratio:1.45;border:2px solid #5e2d2f;border-radius:3px;background:linear-gradient(135deg,#d47b59,#a84740 60%,#77323b);box-shadow:inset 2px 2px #ffc19277,inset -3px -3px #461d2977;transition:.35s}.brick:nth-child(even){background:linear-gradient(135deg,#c86950,#963b3c 65%,#6a2d38)}.brick::after{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(32deg,transparent 46%,#371722 47% 51%,transparent 52%),linear-gradient(145deg,transparent 47%,#371722 48% 51%,transparent 52%);transition:.3s}.brick.hit-1::after{opacity:.45}.brick.hit-2::after{opacity:1}.brick.breaking{animation:brickFall 1s ease-in forwards}.tower-base{height:16px;display:flex;justify-content:space-around;background:#5a3938;border-radius:2px 2px 7px 7px}.tower-base span{width:9px;height:22px;background:#302a2c}.problem-layer{position:absolute;z-index:12;inset:70px 5% 13%;pointer-events:none}.drop{position:absolute;top:0;width:clamp(64px,8vw,94px);height:clamp(64px,8vw,94px);display:grid;place-items:center;color:#effffb;font-family:"Black Han Sans";font-size:clamp(18px,2.4vw,29px);text-shadow:0 2px 0 #16413e,0 0 10px #c7ff85;filter:drop-shadow(0 5px 5px #001);transform:translate(-50%,-100%);will-change:transform}.drop::before{content:"";position:absolute;inset:7%;z-index:-1;border-radius:60% 40% 58% 42%/72% 65% 35% 28%;transform:rotate(45deg);background:radial-gradient(circle at 25% 20%,#efffcf,#89dc45 20%,#13797a 70%);border:2px solid #d8ff9b99;box-shadow:inset -8px -8px 14px #062f4c99}.drop.burst{animation:burst .28s ease-out forwards}.decoy{position:absolute;z-index:13;color:#d1ff80;font-family:"Black Han Sans";font-size:clamp(38px,8vw,96px);text-shadow:0 0 16px #93ff5f;animation:decoy .7s ease-in-out forwards;pointer-events:none}.sea{position:absolute;z-index:20;left:0;bottom:0;width:100%;height:14%;background:linear-gradient(#0e7084cc,#052e4f 70%);box-shadow:0 -8px 30px #58e5db33}.wave{position:absolute;left:-10%;width:120%;height:25px;background:radial-gradient(ellipse at 50% 100%,transparent 52%,#a3f4e8 54% 60%,transparent 62%) 0 0/80px 24px;animation:wave 3s linear infinite}.wave-b{top:22px;opacity:.5;animation-direction:reverse;animation-duration:4s}.splash{position:absolute;bottom:35%;left:var(--x);width:10px;height:10px;border:3px solid #adfff3;border-radius:50%;animation:splash .65s ease-out forwards}.message{position:absolute;z-index:25;top:5%;left:50%;transform:translateX(-50%);padding:8px 16px;border-radius:30px;background:#071b2dcc;font-weight:bold;opacity:0;white-space:nowrap}.message.show{animation:toast 1s}.overlay{position:absolute;z-index:50;inset:0;display:grid;place-items:center;padding:20px;background:#03131c99;backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.4s}.overlay.show{opacity:1;visibility:visible}.panel{width:min(92vw,560px);padding:clamp(25px,5vw,48px);text-align:center;border:1px solid #9fffff42;border-radius:28px;background:linear-gradient(145deg,#092d3af2,#061925f5);box-shadow:0 24px 80px #0009,inset 0 1px #fff2}.eyebrow{margin:0;color:var(--acid);font-weight:bold;letter-spacing:2px}.panel h1,.panel h2{margin:8px 0 12px;font-family:"Black Han Sans";font-weight:400;font-size:clamp(42px,9vw,78px);line-height:1;text-shadow:0 5px #001}.panel h1 em{color:var(--coral);font-style:normal}.story{line-height:1.7}.story strong{color:var(--gold)}.how-to{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}.how-to span{padding:12px 7px;border-radius:12px;background:#fff1;font-size:12px}.how-to b{display:grid;place-items:center;width:24px;height:24px;margin:0 auto 7px;border-radius:50%;background:var(--acid);color:#16352e}.primary-button{min-width:190px;padding:14px 28px;border:0;border-radius:99px;background:linear-gradient(135deg,var(--acid),#42d9ab);color:#113b36;font-family:"Black Han Sans";font-size:20px;box-shadow:0 6px 0 #167264,0 10px 25px #0006;cursor:pointer;transition:.15s}.primary-button:hover{transform:translateY(-2px)}.primary-button:active{transform:translateY(4px);box-shadow:0 2px 0 #167264}.hint{margin:18px 0 0;color:#91afb5;font-size:12px}.final-score{margin:20px auto;padding:15px;border-radius:16px;background:#fff1}.final-score small{display:block}.final-score strong{font-family:"Black Han Sans";font-size:50px;color:var(--gold)}.rain-layer{position:absolute;inset:0;opacity:.3;background-image:repeating-linear-gradient(105deg,transparent 0 28px,#d5fff6 29px,#d5fff6 30px,transparent 31px 50px);background-size:130% 130%;animation:rain .35s linear infinite;pointer-events:none}
@keyframes rain{to{background-position:-22px 70px}}@keyframes wave{to{transform:translateX(80px)}}@keyframes pulse{50%{opacity:.4;transform:scale(1.15)}}@keyframes burst{to{opacity:0;transform:translate(-50%,-50%) scale(1.8) rotate(30deg);filter:brightness(3)}}@keyframes splash{to{transform:translate(-35px,-65px) scale(7);opacity:0}}@keyframes toast{0%,100%{opacity:0;transform:translate(-50%,-10px)}15%,75%{opacity:1;transform:translate(-50%,0)}}@keyframes brickFall{to{opacity:0;transform:translate(var(--fall-x),140px) rotate(var(--rot))}}@keyframes sink{30%{transform:translateX(-50%) rotate(-4deg)}100%{transform:translate(-50%,130%) rotate(8deg);opacity:.3}}@keyframes decoy{0%{opacity:0;transform:scale(.3) rotate(-10deg)}35%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(.7) rotate(12deg)}}
@media(max-width:620px){.game{min-height:480px}.brand{font-size:16px}.brand span{display:block}.hud{padding-inline:12px}.hud-stats{gap:6px;padding:5px 8px}.hud-stats div{min-width:42px}.icon-button{width:38px;height:38px}.playfield{inset:65px 0 10%}.tower{width:min(48vw,210px)}.problem-layer{inset:64px 2% 12%}.drop{font-size:18px}.how-to{grid-template-columns:1fr;gap:5px}.how-to span{display:flex;align-items:center;text-align:left;padding:7px 12px}.how-to b{margin:0 10px 0 0;flex:none}.panel{padding:24px}.hint{display:none}}@media(max-height:650px){.panel h1{font-size:42px}.how-to{margin:12px 0}.story{margin:8px}.tower{width:min(25vw,190px)}.answer-deck{padding:5px 8px 8px}.answer-deck label{display:none}.answer-row input{height:38px}}
@media(prefers-reduced-motion:reduce){.rain-layer,.sky-glow,.wave{animation-duration:2s}}

/* Healing drop, difficulty controls, and layered natural rain. */
.drop.cure{color:#fff7bb;text-shadow:0 2px #476312,0 0 14px #fff98c}
.drop.cure::before{background:radial-gradient(circle at 25% 20%,#fffbd1,#d6ff62 24%,#28a979 72%);border-color:#fff7a8;box-shadow:inset -8px -8px 14px #176f5899,0 0 20px #dcff6c88}
.drop .cure-tag{position:absolute;top:4px;padding:1px 7px;border-radius:8px;background:#fff6a8;color:#315f37;font-family:"Gowun Dodum";font-size:9px;font-weight:bold;text-shadow:none;letter-spacing:1px}
.brick.healing{animation:heal .7s ease-out}
.difficulty-picker{display:flex;justify-content:center;gap:7px;margin:0 0 18px;padding:0;border:0}
.difficulty-picker legend{margin:0 auto 7px;color:#b7d7dc;font-size:12px}
.difficulty-picker input{position:absolute;opacity:0}
.difficulty-picker span{display:block;min-width:88px;padding:7px 10px;border:1px solid #ffffff2c;border-radius:10px;background:#fff1;cursor:pointer;font-weight:bold}
.difficulty-picker small{display:block;color:#9bb8bd;font-size:9px;font-weight:normal}
.difficulty-picker input:checked+span{border-color:var(--acid);background:#b7ff5222;color:var(--acid);box-shadow:0 0 0 2px #b7ff5222}
.difficulty-picker input:focus-visible+span{outline:2px solid white}
.rain-layer{position:absolute;inset:-25% -10%;overflow:hidden;opacity:.55;pointer-events:none;transform:rotate(2deg);background-image:linear-gradient(transparent 0 72%,#c9f8ff77 76%,transparent 83%),linear-gradient(transparent 0 82%,#eaffff99 86%,transparent 91%);background-size:37px 180px,83px 260px;animation:rainNear .62s linear infinite;filter:blur(.25px)}
.rain-layer::before{content:"";position:absolute;inset:0;background-image:linear-gradient(transparent 0 78%,#bce9f16b 81%,transparent 86%),linear-gradient(transparent 0 66%,#d8ffff52 70%,transparent 76%);background-size:23px 125px,59px 205px;background-position:11px 30px,37px 70px;animation:rainFar .9s linear infinite}
.rain-layer::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#b7fff00d 55%,#b7fff022);filter:blur(16px)}
@keyframes rainNear{to{background-position:2px 260px,-3px 370px}}
@keyframes rainFar{to{background-position:13px 280px,39px 420px}}
@keyframes heal{0%,100%{filter:none}35%{filter:brightness(2) drop-shadow(0 0 14px #dfff77);transform:scale(1.08)}}
@media(max-height:650px){.difficulty-picker{margin-bottom:10px}.difficulty-picker span{padding-block:5px}}

/* Authenticated leaderboard and touch controls. */
.auth-card{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding:9px 12px;border:1px solid #ffffff24;border-radius:12px;background:#ffffff0d;font-size:12px;text-align:left}
.auth-card button{flex:none;padding:7px 11px;border:1px solid #b7ff5277;border-radius:9px;background:#b7ff521a;color:var(--acid);font-weight:bold;cursor:pointer}.auth-card button:disabled{border-color:#6fe3cc55;color:#8fe7d7}
.start-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.install-button{min-height:48px;padding:12px 20px;border:1px solid #b7ff5288;border-radius:99px;background:#b7ff5216;color:var(--acid);font-weight:bold;cursor:pointer}.install-button:hover{background:#b7ff5228}.install-button[hidden]{display:none}
.result-actions{display:flex;justify-content:center;gap:10px}.result-actions button{flex:1;min-width:0;min-height:48px;padding:12px 18px}.secondary-button{border:1px solid #9fffff66;border-radius:99px;background:#ffffff12;color:var(--ink);font-family:"Black Han Sans";font-size:18px;box-shadow:0 6px 0 #03121b99;cursor:pointer;transition:.15s}.secondary-button:hover{transform:translateY(-2px);background:#ffffff1f}.secondary-button:active{transform:translateY(4px);box-shadow:0 2px 0 #03121b99}
.leaderboard{margin-top:14px;padding:10px 12px;border-radius:14px;background:#020e1788}.leaderboard h3{margin:0 0 7px;color:var(--gold);font-size:12px}.leaderboard ol{display:grid;gap:3px;max-height:130px;margin:0;padding:0;overflow:auto;list-style:none}.leaderboard li{display:grid;grid-template-columns:22px 1fr auto 34px;gap:6px;align-items:center;padding:3px 6px;border-radius:7px;font-size:11px}.leaderboard li:nth-child(-n+3){background:#ffd2730e}.leaderboard li.mine{outline:1px solid var(--acid);background:#b7ff5217}.leaderboard li b{color:var(--gold)}.leaderboard li span{overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.leaderboard li small{color:#8fb4ba}.leaderboard .rank-empty{display:block;color:#91afb5;text-align:center}.save-status{min-height:20px;color:var(--acid);font-size:12px}.result-panel .leaderboard{margin-bottom:15px}.mobile-pad{display:none}
.rain-layer{inset:0;overflow:hidden;opacity:1;transform:none;background:none;filter:none;animation:none}.rain-layer::before,.rain-layer::after{display:none}.weather-drop{position:absolute;top:-12vh;left:var(--left);width:var(--size);height:calc(var(--size) * 1.38);border-radius:58% 42% 62% 38%/72% 68% 32% 28%;background:radial-gradient(circle at 28% 22%,#e9ffffdd 0 8%,#64ddffb8 20%,#168fd1a6 58%,#075b9b80 100%);border:1px solid #b7f5ff77;box-shadow:inset -3px -5px 7px #07538c66,0 2px 7px #36caff33;transform:rotate(calc(45deg + var(--tilt)));animation:blueRain var(--duration) linear var(--delay) infinite;will-change:transform;opacity:.66}
@keyframes blueRain{0%{transform:translate3d(0,-15vh,0) rotate(calc(45deg + var(--tilt)));opacity:0}8%{opacity:.7}100%{transform:translate3d(var(--drift),125vh,0) rotate(calc(45deg + var(--tilt)));opacity:.42}}
@media(pointer:coarse){.answer-row button{display:none}.answer-deck{z-index:3}.mobile-pad{position:absolute;z-index:5;top:75px;left:50%;display:grid;width:calc(100% - 8px);transform:translateX(-50%);grid-template-columns:repeat(3,1fr);gap:3px;padding:5px;border:1px solid #b9ffff45;border-radius:12px;background:#05243538;backdrop-filter:blur(1px);box-shadow:0 6px 16px #0014}.mobile-pad button{min-height:30px;border:1px solid #dfffff55;border-radius:7px;background:#eaffff14;color:white;font-family:"Black Han Sans";font-size:16px;text-shadow:0 2px 2px #001,0 0 5px #001;touch-action:manipulation}.mobile-pad button:active{background:#b7ff5255;transform:scale(.95)}.mobile-pad .pad-fire{grid-column:1/-1;background:#b7ff5238;color:#efffd0}.answer-row input{pointer-events:none}.bricks{opacity:1}.tower{width:min(54vw,220px)}}
@media(max-width:620px){.intro-panel,.result-panel{max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior-y:contain}.auth-card{margin-bottom:8px}.difficulty-picker span{min-width:76px;padding-inline:6px}.leaderboard ol{max-height:none;overflow:visible}.hint{display:block}.hud-stats div:last-child{display:none}}
@media(max-width:620px){body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.game{min-height:100dvh}.intro-panel,.result-panel{max-height:calc(100dvh - 16px);border-radius:24px}.difficulty-picker span,.panel button,.result-actions button{min-height:44px}.mobile-pad button{min-height:34px}}

/* Keep touch controls above the decorative sea stacking layer. */
.sea{pointer-events:none}
@media(pointer:coarse){.tower{z-index:24}.mobile-pad .pad-fire{min-height:42px;background:#b7ff5266;box-shadow:0 3px 0 #153f38}}