:root{--neon-cyan:#00f3ff;--neon-magenta:#ff00ea;--bg-dark:#0f0f13}*{box-sizing:border-box;margin:0;padding:0}body,html{background-color:var(--bg-dark);color:#fff;width:100%;min-height:100dvh;margin:0;font-family:Outfit,sans-serif;overflow:hidden}#game-container{margin:0 auto;position:relative;overflow:hidden}video{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}canvas{display:block;position:absolute;top:0;left:0;transform:scaleX(-1)}#ui-layer{pointer-events:none;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:2rem;display:flex;position:absolute;top:0;left:0}#hud-game{pointer-events:none;flex-direction:column;align-items:flex-start;gap:.75rem;display:flex}#hud-game.is-hidden{visibility:hidden;opacity:0;pointer-events:none;width:0;height:0;position:absolute;overflow:hidden}#score-display{text-shadow:0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);pointer-events:none;font-size:3rem;font-weight:900}.game-over-overlay{text-align:center;letter-spacing:.12em;color:#ff5252;text-shadow:0 0 12px #ff5252f2,0 0 28px #00f3ff73;pointer-events:none;order:-1;width:100%;font-size:clamp(1.75rem,8vw,4rem);font-weight:900}.game-over-overlay.is-hidden{display:none}.hud-row{pointer-events:auto;flex-wrap:wrap;align-items:center;gap:1rem;display:flex}#tracking-display{color:#ffffffd1;text-shadow:0 0 8px #00f3ff59;font-size:.95rem;font-weight:600}.water-meter{right:max(1rem, env(safe-area-inset-right));pointer-events:none;flex-direction:column;align-items:center;gap:.45rem;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.water-meter-track{background:#0a0e18b8;border:2px solid #ffffff47;border-radius:999px;width:22px;height:min(42vh,280px);position:relative;overflow:hidden;box-shadow:inset 0 0 12px #00000073}.water-meter-fill{background:linear-gradient(#64c8fff2,#1450c8f2);border-radius:0 0 999px 999px;width:100%;height:0%;transition:height .25s ease-out;position:absolute;bottom:0;left:0}.water-meter-danger .water-meter-fill{background:linear-gradient(#ff7878f2,#c82828f2)}.water-meter-mark{pointer-events:none;background:#ff5050d9;height:2px;position:absolute;bottom:50%;left:-6px;right:-6px;box-shadow:0 0 8px #ff505099}.water-meter-label{color:#b4e6fff2;text-shadow:0 0 8px #00f3ff66;font-size:.82rem;font-weight:800}.water-meter-danger .water-meter-label{color:#ff8a80}.mug-timers{pointer-events:none;flex-direction:column;gap:.55rem;min-width:min(220px,42vw);display:flex}.mug-timers.is-hidden{display:none}.mug-timer-row{background:#140e08c7;border:1px solid #ffbe5073;border-radius:10px;flex-direction:column;gap:.35rem;padding:.45rem .55rem;display:flex;box-shadow:0 0 12px #ffaa3c2e}.mug-timer-row.is-hidden{display:none}.mug-timer-name{letter-spacing:.04em;color:#ffdc8cf2;text-shadow:0 0 8px #ffaa3c59;font-size:.78rem;font-weight:800}.mug-timer-track{background:#00000073;border:1px solid #ffd27859;border-radius:999px;height:10px;overflow:hidden}.mug-timer-fill{transform-origin:0;background:linear-gradient(90deg,#ffaa3cf2,#ffdc78f2);border-radius:999px;width:100%;height:100%;transition:width .12s linear}.menu-hero-roof-leak{box-shadow:none;background:0 0;border:none;margin:0 auto 1rem;padding:0;position:relative;overflow:visible}.menu-hero-image{border:2px solid var(--menu-border-strong,#c4a5749e);border-radius:14px;width:100%;max-width:min(100%,520px);height:auto;margin:0 auto;display:block;box-shadow:0 8px 28px #140c0873,inset 0 0 0 1px #ebe0c80f}#level-display{color:#ffffffd9;text-shadow:0 0 8px var(--neon-magenta);font-size:1.1rem;font-weight:700}.btn-menu{color:#fff;cursor:pointer;background:#0f0f13bf;border:1px solid #ffffff40;border-radius:10px;padding:.5rem 1.1rem;font-family:inherit;font-size:.95rem;font-weight:700;transition:border-color .2s,box-shadow .2s,background .2s}.btn-menu:hover{border-color:var(--neon-cyan);box-shadow:0 0 14px #00f3ff59}.btn-back-menu{left:50%;bottom:max(1rem, env(safe-area-inset-bottom));pointer-events:auto;background:#0f0f13d1;padding:.55rem 1.4rem;position:absolute;transform:translate(-50%);box-shadow:0 0 14px #00000073}.ui-top-controls{top:max(.75rem, env(safe-area-inset-top));right:max(.75rem, env(safe-area-inset-right));z-index:20;pointer-events:none;flex-direction:column;align-items:stretch;gap:.45rem;display:flex;position:fixed}.ui-top-controls>*{pointer-events:auto}.ui-lang-picker{background:#2a1e16eb;border:1px solid #c4a57461;border-radius:12px;padding:.45rem .5rem;box-shadow:0 0 14px #140c0866}.ui-lang-label{letter-spacing:.06em;text-transform:uppercase;color:#c4a574eb;text-align:center;margin-bottom:.35rem;font-size:.62rem;font-weight:800}.ui-lang-segment{gap:.35rem;display:flex}.ui-lang-pill{cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;position:relative}.ui-lang-pill input{opacity:0;pointer-events:none;width:1px;height:1px;margin:0;position:absolute}.ui-lang-pill input:focus-visible+span{outline-offset:2px;outline:2px solid #a8d4e8bf}.ui-lang-pill span{color:#ebdabec7;letter-spacing:.04em;text-align:center;background:#140e0a73;border:1px solid #c4a57438;border-radius:8px;padding:.32rem .45rem;font-size:.72rem;font-weight:800;transition:border-color .15s,background .15s,color .15s;display:block}.ui-lang-pill:hover span{border-color:#a8d4e873}.ui-lang-pill input:checked+span{color:#f5ead6;background:#c9852a38;border-color:#c9852abf;box-shadow:0 0 10px #c9852a38}#ui-layer>.ui-top-controls .btn-fullscreen{position:static}.btn-fullscreen{color:#f5ead6;font:inherit;cursor:pointer;pointer-events:auto;z-index:6;background:#2a1e16eb;border:1px solid #c4a57461;border-radius:12px;align-items:center;gap:.45rem;padding:.45rem .85rem;font-size:.85rem;font-weight:700;transition:border-color .2s,box-shadow .2s,background .2s;display:inline-flex}.btn-fullscreen[hidden]{display:none}.btn-fullscreen:hover{border-color:#a8d4e88c;box-shadow:0 0 14px #7eb4cc47}.btn-fullscreen-on,.btn-fullscreen-off{font-size:1.05rem;line-height:1}.btn-fullscreen.is-active .btn-fullscreen-on,.btn-fullscreen:not(.is-active) .btn-fullscreen-off{display:none}@media (width<=480px){.btn-fullscreen-label{display:none}}.menu-overlay{--menu-text:#f5ead6;--menu-text-muted:#ebdabe9e;--menu-wood-dark:#2a1c14;--menu-wood-mid:#5c4030;--menu-tan:#c4a574;--menu-parchment:#ebe0c8;--menu-water:#7eb4cc;--menu-water-bright:#a8d4e8;--menu-amber:#c9852a;--menu-amber-deep:#8b5a1e;--menu-border:#c4a57461;--menu-border-strong:#c4a5749e;--menu-glow-water:#7eb4cc47;--menu-glow-amber:#c9852a38;padding:max(.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));z-index:5;pointer-events:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;color:var(--menu-text);background:#1e1610f0;justify-content:center;align-items:flex-start;display:flex;position:absolute;inset:0;overflow:hidden auto}.menu-overlay.is-hidden{display:none}.menu-drops-canvas{pointer-events:none;z-index:0;width:100%;height:100%;position:absolute;inset:0}.menu-panel{z-index:1;border:1px solid var(--menu-border-strong);text-align:center;-webkit-overflow-scrolling:touch;background:linear-gradient(165deg,#483426f5 0%,#2a1e16fa 100%);border-radius:22px;flex-shrink:0;width:100%;max-width:min(560px,94vw);max-height:min(92vh,92dvh);margin:auto 0;padding:1.75rem 2rem;position:relative;overflow:hidden auto;transform:translateZ(0);box-shadow:0 0 32px #140c088c,inset 0 1px #ebe0c814}.menu-hero-blasters{background:radial-gradient(at 50% 20%,#00f3ff2e,#0000 55%),linear-gradient(165deg,#120c20f2,#080810eb);border:1px solid #00f3ff59;border-radius:18px;margin:0 auto 1.35rem;padding:1.5rem 1rem;position:relative;overflow:hidden;box-shadow:0 0 28px #00f3ff38,inset 0 1px #ffffff0f}.menu-hero-glow{opacity:.85;pointer-events:none;background:conic-gradient(from 120deg,#00f3ff26,#0000 35%,#ff00ea1f,#0000 70%);animation:10s linear infinite hero-spin;position:absolute;inset:-40%}@keyframes hero-spin{to{transform:rotate(360deg)}}.menu-hero-title{letter-spacing:.08em;background:linear-gradient(125deg,#00f3ff 0%,#ff00ea 100%);color:#0000;filter:drop-shadow(0 0 14px #00f3ff59);-webkit-background-clip:text;background-clip:text;font-size:clamp(2rem,8vw,3rem);font-weight:900;position:relative}.menu-hero-sub{letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-top:.35rem;font-size:.78rem;font-weight:700;position:relative}.menu-cta{margin-top:.35rem;margin-bottom:1.1rem}.btn-start{letter-spacing:.06em;color:#2a1c14;cursor:pointer;box-shadow:0 0 18px var(--menu-glow-amber), 0 8px 22px #140c086b;background:linear-gradient(125deg,#e8c878 0%,#c9852a 52%,#a86b22 100%);border:2px solid #ebe0c873;border-radius:999px;padding:.95rem 2.75rem;font-family:inherit;font-size:1.15rem;font-weight:900;transition:transform .14s,box-shadow .14s,filter .14s}.btn-start:hover{filter:brightness(1.05);box-shadow:0 0 22px var(--menu-glow-water), 0 0 14px var(--menu-glow-amber), 0 12px 26px #140c087a;border-color:#a8d4e8a6;transform:translateY(-2px)scale(1.02)}.btn-start:active{transform:translateY(0)scale(.98)}.menu-heading{color:var(--neon-cyan);text-shadow:0 0 10px #00f3ff66;margin-top:0;margin-bottom:.5rem;font-size:1.25rem;font-weight:800}.menu-hint{opacity:.65;margin-bottom:1.25rem;font-size:.88rem;line-height:1.4}.menu-options{text-align:left;border:1px solid var(--menu-border);background:linear-gradient(165deg,#34261ce0 0%,#221812eb 100%);border-radius:16px;margin-top:1.25rem;margin-bottom:0;padding:1rem 1.1rem;box-shadow:inset 0 1px #ebe0c80f}.menu-options-title{letter-spacing:.08em;text-transform:uppercase;color:var(--menu-tan);text-shadow:0 1px 2px #140c0873;margin-bottom:.75rem;font-size:.72rem;font-weight:800}.menu-volume-row{border-bottom:1px solid var(--menu-border);margin-bottom:.85rem;padding-bottom:.85rem}.menu-volume-label{cursor:pointer;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.55rem;display:flex}.menu-volume-title{color:var(--menu-text);font-size:.88rem;font-weight:700}.menu-volume-value{color:var(--menu-water-bright);text-align:right;min-width:2.8rem;font-size:.82rem;font-weight:800}.menu-volume-slider{appearance:none;cursor:pointer;background:linear-gradient(90deg,#c9852ad9,#7eb4cce6);border-radius:999px;outline:none;width:100%;height:.45rem;margin:0}.menu-volume-slider::-webkit-slider-runnable-track{background:#2a1e16a6;border-radius:999px;height:.45rem}.menu-volume-slider::-webkit-slider-thumb{appearance:none;border:2px solid var(--menu-parchment);width:1.05rem;height:1.05rem;box-shadow:0 0 8px var(--menu-glow-water);background:linear-gradient(165deg,#e8c878,#7eb4cc);border-radius:50%;margin-top:-.3rem}.menu-volume-slider::-moz-range-track{background:#2a1e16a6;border-radius:999px;height:.45rem}.menu-volume-slider::-moz-range-thumb{border:2px solid var(--menu-parchment);width:1.05rem;height:1.05rem;box-shadow:0 0 8px var(--menu-glow-water);background:linear-gradient(165deg,#e8c878,#7eb4cc);border-radius:50%}.menu-volume-slider:focus-visible{outline-offset:3px;outline:2px solid #a8d4e8bf}.menu-option-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;background:#140e0a61;border:1px solid #c4a57424;border-radius:12px;justify-content:space-between;align-items:center;gap:.65rem;margin-bottom:.65rem;padding:.55rem .6rem;transition:border-color .2s,background .2s,box-shadow .2s;display:flex}.menu-option-toggle:last-of-type{margin-bottom:0}.menu-option-toggle:hover{box-shadow:0 0 12px var(--menu-glow-water);background:#7eb4cc14;border-color:#a8d4e859}.menu-option-input{clip:rect(0, 0, 0, 0);white-space:nowrap;opacity:0;pointer-events:none;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.menu-option-left{flex:1;align-items:center;gap:.65rem;min-width:0;display:flex}.menu-option-emoji{flex-shrink:0;place-items:center;width:2.6rem;height:2.6rem;font-size:1.42rem;line-height:1;display:grid;position:relative}.menu-option-emoji-on,.menu-option-emoji-off{transition:opacity .2s,transform .2s,filter .2s,visibility .2s linear;position:absolute}.menu-option-toggle:has(.menu-option-input:checked) .menu-option-emoji-on{opacity:0;visibility:hidden;filter:none;z-index:0;transform:scale(.75)}.menu-option-toggle:has(.menu-option-input:checked) .menu-option-emoji-off{opacity:1;visibility:visible;filter:drop-shadow(0 0 10px #ffffff73);z-index:1;transform:scale(1.06)}.menu-option-toggle:not(:has(.menu-option-input:checked)) .menu-option-emoji-on{opacity:1;visibility:visible;filter:drop-shadow(0 0 8px #a8d4e88c);z-index:1;transform:scale(1.06)}.menu-option-toggle:not(:has(.menu-option-input:checked)) .menu-option-emoji-off{opacity:0;visibility:hidden;filter:none;z-index:0;transform:scale(.75)}.menu-option-text{flex-direction:column;align-items:flex-start;gap:.12rem;min-width:0;display:flex}.menu-option-title{color:var(--menu-parchment);letter-spacing:.01em;font-size:.92rem;font-weight:800}.menu-option-desc{color:var(--menu-text-muted);font-size:.72rem;font-weight:600;line-height:1.25}.menu-option-toggle:not(:has(.menu-option-input:checked)) .menu-option-title{text-shadow:0 1px 3px #140c0859}.menu-option-switch{border:1px solid var(--menu-border);background:#2a1e16d9;border-radius:14px;flex-shrink:0;width:52px;height:28px;transition:background .24s,border-color .24s,box-shadow .24s;position:relative;box-shadow:inset 0 2px 6px #00000059}.menu-option-toggle:not(:has(.menu-option-input:checked)) .menu-option-switch{box-shadow:inset 0 1px 0 #ebe0c826, 0 0 12px var(--menu-glow-water);background:linear-gradient(125deg,#c9852a73 0%,#7eb4cc59 100%);border-color:#a8d4e873}.menu-option-knob{background:linear-gradient(165deg,#f5ead6 0%,#c4a574 55%,#a8d4e8 100%);border-radius:50%;width:22px;height:22px;transition:transform .24s cubic-bezier(.34,1.35,.64,1);position:absolute;top:3px;left:3px;box-shadow:0 2px 8px #0006,inset 0 0 0 1px #ebe0c859}.menu-option-toggle:not(:has(.menu-option-input:checked)) .menu-option-knob{transform:translate(24px)}.menu-option-toggle:focus-within{outline-offset:2px;outline:2px solid #a8d4e88c}#loading{z-index:10;color:#f5ead6;opacity:0;background:linear-gradient(165deg,#483426f5 0%,#2a1e16fa 100%);border:1px solid #c4a57473;border-radius:20px;flex-direction:column;align-items:center;gap:1.15rem;width:90%;max-width:min(420px,92vw);padding:2rem 2.25rem;font-size:1.15rem;font-weight:700;transition:opacity .5s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 32px #140c088c}#loading.visible{opacity:1}#progress-container{background:#140e0a8c;border:1px solid #c4a57438;border-radius:10px;width:100%;height:10px;overflow:hidden}#progress-bar{background:linear-gradient(90deg,#c9852a,#7eb4cc);width:0%;height:100%;transition:width .3s;box-shadow:0 0 10px #7eb4cc59}#loading-text{color:#ebe0c8;letter-spacing:.02em;text-align:center}