:root{color-scheme:dark;--ink:#0d1920;--grass:#69efd0;--mint:#ddfff8;--cream:#f7fff8;--muted:#b6d0ca;--glass:rgba(12,30,35,.70);--line:rgba(221,255,247,.17);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;background:var(--ink)}
body{-webkit-tap-highlight-color:transparent;touch-action:manipulation;overscroll-behavior:none}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--grass);outline-offset:4px}
.app{width:100%;height:100%;height:100dvh;position:relative;overflow:hidden;isolation:isolate;color:var(--cream);background:#0d1920}
.is-hidden{display:none!important}
.environment,.environment>video,.demo-world,.environment-shade{position:absolute;inset:0;width:100%;height:100%}
.environment{z-index:-2}
#camera{object-fit:cover;transform:scaleX(1);display:none}#camera.is-active{display:block}
.demo-world{overflow:hidden;background:radial-gradient(ellipse at 80% 20%,#23556b 0%,transparent 50%),radial-gradient(ellipse at 0 90%,#17404e 0%,transparent 52%),linear-gradient(145deg,#122c35,#081017 80%)}
.ambient{position:absolute;border-radius:50%;filter:blur(50px);opacity:.35}.ambient-a{height:280px;width:280px;top:8%;left:-130px;background:#6dc37f;animation:ambient-move 13s ease-in-out infinite alternate}.ambient-b{height:220px;width:220px;right:-70px;bottom:8%;background:#9f9947;animation:ambient-move 9s ease-in-out infinite alternate-reverse}
.world-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(184,255,197,.052) 1px,transparent 1px),linear-gradient(90deg,rgba(184,255,197,.052) 1px,transparent 1px);background-size:54px 54px;transform:perspective(480px) rotateX(23deg) scale(1.9);mask-image:linear-gradient(transparent,black 46%,black);opacity:.55}
.scene-glow{position:absolute;inset:0;background:radial-gradient(circle at 52% 42%,transparent 0,transparent 28%,rgba(5,15,10,.65) 100%)}
.environment-shade{background:linear-gradient(to bottom,rgba(7,16,18,.35),transparent 32%,transparent 70%,rgba(7,16,18,.38));pointer-events:none}
#gameCanvas{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;touch-action:none;pointer-events:none}#gameCanvas.is-live{pointer-events:auto;cursor:crosshair}
.screen{position:absolute;z-index:10;inset:0;width:100%;height:100%;min-height:0}
.screen-welcome{overflow-y:auto;overflow-x:hidden;background:linear-gradient(180deg,rgba(9,22,16,.4) 0%,rgba(7,19,14,.93) 75%);scrollbar-width:none}.screen-welcome::-webkit-scrollbar{display:none}
.screen-inner{width:min(100%,560px);margin:auto;padding:max(24px,env(safe-area-inset-top)) clamp(22px,5vw,38px) max(20px,env(safe-area-inset-bottom));min-height:100%;display:flex;flex-direction:column;justify-content:center;position:relative}
.welcome-top{display:flex;align-items:center;justify-content:space-between;gap:20px;letter-spacing:2.25px;font-size:10px;font-weight:800;color:var(--mint)}.eyebrow{display:flex;align-items:center;gap:9px}.led{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--grass);box-shadow:0 0 12px var(--grass)}.mini-counter{color:rgba(234,252,225,.58);letter-spacing:1px}
.hero-art{position:relative;flex:0 0 auto;height:clamp(194px,34vh,310px);margin:4px auto 0;width:min(100%,370px);display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 25px 32px rgba(34,118,126,.18))}
.hero-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(190,255,185,.26);border-radius:50%;transform:translate(-50%,-50%)}.ring-one{width:65%;aspect-ratio:1;box-shadow:0 0 0 19px rgba(184,255,189,.025),0 0 0 42px rgba(184,255,189,.015)}.ring-two{width:87%;aspect-ratio:1;border-style:dashed;border-color:rgba(190,255,185,.14);animation:spin 45s linear infinite}.hero-crosshair{position:absolute;background:linear-gradient(90deg,transparent,rgba(191,255,199,.38),transparent)}.crosshair-v{width:1px;height:94%;top:3%;left:50%}.crosshair-h{height:1px;width:95%;left:3%;top:50%}
.hero-mosquito{width:100%;height:105%;max-height:315px;position:relative;z-index:1;filter:drop-shadow(0 16px 18px rgba(0,0,0,.48));transform:rotate(-13deg);animation:mosquito-hover 3.8s ease-in-out infinite}.hero-wing-left{transform-origin:48% 49%;animation:wing-left .14s ease-in-out infinite alternate}.hero-wing-right{transform-origin:53% 49%;animation:wing-right .12s ease-in-out infinite alternate}
.target-label{position:absolute;right:4px;bottom:15px;color:var(--mint);font:800 9px/1.3 ui-monospace,monospace;letter-spacing:1px;display:flex;flex-direction:column;gap:4px}.target-label span{color:var(--grass);font-size:11px}.hero-spark{position:absolute;color:var(--grass);font-weight:700}.spark-one{font-size:28px;right:4%;top:12%}.spark-two{font-size:26px;left:9%;bottom:23%}
.welcome-copy{position:relative;z-index:1}.overline{font-weight:850;font-size:10px;letter-spacing:3px;color:var(--grass);margin:6px 0 12px}
h1,h2,p{margin-top:0}h1{font-size:clamp(45px,9.4vw,68px);line-height:.94;letter-spacing:-.065em;font-weight:1000;margin:0 0 19px}h1 em,h2 em{font-style:normal;color:var(--grass)}h1 em span{color:#ffe09a}.welcome-subtitle{max-width:400px;color:#bfcebe;line-height:1.6;font-size:13.6px;margin:0 0 22px}
.welcome-actions{display:flex;flex-direction:column;gap:9px}.primary-btn{border:none;display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--grass);color:#102214;padding:18px 19px 18px 22px;border-radius:12px;font-size:12px;font-weight:950;letter-spacing:1.1px;min-height:58px;width:100%;box-shadow:0 12px 30px rgba(136,239,98,.12);transition:transform .17s,background .17s}.primary-btn:hover{background:#c7ff93;transform:translateY(-1px)}.primary-btn:active{transform:scale(.988)}.btn-content{display:flex;align-items:center;gap:10px}.btn-content svg{width:18px;height:18px}.btn-arrow{font-size:20px;font-weight:500}
.secondary-btn{border:1px solid rgba(209,255,210,.23);background:rgba(32,52,40,.48);color:var(--cream);border-radius:12px;min-height:50px;width:100%;padding:14px 18px 14px 22px;display:flex;justify-content:space-between;align-items:center;letter-spacing:1px;font-size:11px;font-weight:750;transition:background .15s}.secondary-btn:hover{background:rgba(66,102,73,.55)}.secondary-btn span{font-size:18px;font-weight:400}
.welcome-foot{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;margin:22px 0 0;color:#e4f4dc;font-size:9px;font-weight:800;letter-spacing:.75px;opacity:.9}.privacy-note{font-size:10px;line-height:1.5;color:rgba(215,233,212,.55);text-align:center;margin:17px 0 0}
.hud{position:absolute;inset:0 0 auto;z-index:4;pointer-events:none;padding:calc(19px + env(safe-area-inset-top)) clamp(14px,4vw,24px) 0}.hud-top{display:flex;align-items:center;justify-content:space-between}.hud-brand{color:#f4ffe6;font-size:13px;font-weight:1000;letter-spacing:-.7px;text-shadow:0 1px 12px #0008}.hud-brand span:last-child{color:var(--grass)}.hud-brand-mark{color:var(--grass);font-size:18px;padding-right:3px}.hud-tools{display:flex;gap:8px;pointer-events:auto}.icon-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(238,255,234,.22);background:rgba(8,22,15,.58);backdrop-filter:blur(14px);color:white;border-radius:12px}.icon-button svg{width:19px;height:19px}.icon-button.muted .sound-waves{display:none}.icon-button:not(.muted) .sound-off{display:none}.icon-button:active{transform:scale(.95)}
.score-strip{display:grid;grid-template-columns:1fr 92px 1fr;gap:10px;align-items:center;margin:12px auto 7px;max-width:520px}.stat{background:var(--glass);border:1px solid var(--line);padding:13px 15px;border-radius:13px;min-height:67px;backdrop-filter:blur(12px)}.stat-right{text-align:right}.stat-label{display:block;color:#a2bfaa;font-size:9px;font-weight:850;letter-spacing:1.7px;margin-bottom:5px}.stat strong{font-size:25px;letter-spacing:-1.2px;line-height:1;font-variant-numeric:tabular-nums}
.time-gauge{position:relative;width:78px;height:78px;margin:auto;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 5px 12px #0005)}.time-gauge svg{width:78px;height:78px;transform:rotate(-90deg)}.time-gauge circle{fill:rgba(10,29,19,.83);stroke-width:5}.time-gauge .time-track{stroke:rgba(221,255,223,.16)}.time-gauge .time-progress{fill:none;stroke:var(--grass);stroke-linecap:round;stroke-dasharray:182.213;stroke-dashoffset:0;transition:stroke .25s}.time-value{position:absolute;display:flex;flex-direction:column;align-items:center}.time-value strong{font-size:25px;line-height:1;font-variant-numeric:tabular-nums}.time-value small{color:#a2c0a8;font-size:9px;letter-spacing:2px;font-weight:800;margin-top:3px}.time-gauge.danger .time-progress{stroke:#ffc06c}.time-gauge.danger .time-value strong{color:#ffc06c}
.top-progress{width:min(100%,520px);height:3px;background:rgba(234,255,235,.14);border-radius:3px;margin:auto;overflow:hidden}.top-progress>div{height:100%;width:100%;background:var(--grass);transform-origin:left;transition:width .1s linear}.ingame-tip{margin-top:17px;text-align:center;font-size:10px;letter-spacing:1.9px;font-weight:850;text-shadow:0 3px 12px #0007;color:#eaffc8;opacity:.9;animation:pulse-tip 2s ease-in-out infinite}
.bottom-ui{position:absolute;z-index:4;bottom:calc(25px + env(safe-area-inset-bottom));left:clamp(14px,4vw,24px);right:clamp(14px,4vw,24px);display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none}.live-indicator,.level-indicator{border:1px solid var(--line);background:rgba(7,22,14,.56);backdrop-filter:blur(12px);border-radius:20px;padding:10px 12px;font-size:9px;font-weight:900;letter-spacing:1px}.live-indicator{display:flex;align-items:center;gap:7px}.live-indicator>span:first-child{display:block;border-radius:50%;width:7px;height:7px;background:#ef796c;box-shadow:0 0 0 4px #ef796c30}.level-indicator span{color:var(--grass);padding-left:7px;letter-spacing:2px}
.particles-layer{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}.burst{position:absolute;pointer-events:none;transform:translate(-50%,-50%);font-size:22px;font-weight:1000;letter-spacing:-1px;color:var(--grass);text-shadow:0 3px 15px #0008;animation:burst-up .65s cubic-bezier(.2,.6,.2,1) forwards;white-space:nowrap}.burst.miss{font-size:11px;color:#fcf6d9;letter-spacing:1px}.splatter{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--grass);animation:particle-scatter .52s ease-out forwards;transform:translate(-50%,-50%)}
.overlay-screen{z-index:8;background:rgba(5,17,11,.84);backdrop-filter:blur(22px);display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:35px 22px}.overlay-content{width:min(100%,440px);text-align:center}.overlay-kicker{font-weight:900;letter-spacing:3px;color:var(--grass);font-size:11px;margin:0 0 20px}.overlay-content h2{font-size:clamp(42px,10vw,64px);line-height:.96;letter-spacing:-.06em;margin:0 0 19px;font-weight:1000}.overlay-content h2>span{color:var(--grass)}.overlay-content>p{color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:34px}.overlay-content .secondary-btn{margin-top:10px}.result-symbol{display:grid;place-items:center;font-size:42px;color:var(--grass);background:#244b2f;width:82px;height:82px;border:1px solid #5d965e;border-radius:50%;margin:0 auto 19px}.result-points{font-size:clamp(56px,17vw,88px);line-height:1.05;letter-spacing:-.06em;font-weight:1000;color:var(--grass);font-variant-numeric:tabular-nums}.result-points-label{color:#d5eacb;font-size:10px;letter-spacing:2px;font-weight:900;margin:5px 0 23px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:15px;overflow:hidden;margin-bottom:27px;background:#13291e}.result-grid>div{min-width:0;padding:19px 7px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:7px}.result-grid>div:last-child{border:0}.result-grid strong{font-size:24px;font-variant-numeric:tabular-nums}.result-grid span{font-size:8px;color:#b4c8b1;letter-spacing:1px;font-weight:800}.text-btn{border:none;background:transparent;color:#d8e3d2;padding:16px;font-size:12px;text-decoration:underline;text-underline-offset:4px;margin-top:7px}.toast{position:absolute;z-index:20;bottom:calc(70px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#e7ffcb;color:#142c1a;font-size:12px;line-height:1.4;font-weight:750;padding:13px 18px;border-radius:12px;max-width:calc(100% - 32px);width:max-content;text-align:center;box-shadow:0 12px 40px #0009}
@keyframes mosquito-hover{0%,100%{transform:translateY(3px) rotate(-13deg)}50%{transform:translateY(-7px) rotate(-10deg)}}@keyframes wing-left{from{transform:scaleX(.91) rotate(-5deg)}to{transform:scaleX(1.05) rotate(5deg)}}@keyframes wing-right{from{transform:scaleX(.93) rotate(5deg)}to{transform:scaleX(1.07) rotate(-5deg)}}@keyframes ambient-move{to{transform:translate(65px,-50px)}}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes burst-up{0%{transform:translate(-50%,-25% ) scale(.65);opacity:0}17%{opacity:1;transform:translate(-50%,-100%) scale(1.25)}100%{transform:translate(-50%,-200%) scale(.93);opacity:0}}@keyframes particle-scatter{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.3)}}@keyframes pulse-tip{50%{opacity:.5}}
@media(min-width:720px){.welcome-top{font-size:11px}.screen-inner{padding-block:18px 18px}.hero-art{height:240px}.welcome-subtitle{font-size:15px}.screen-welcome{background:radial-gradient(ellipse at 50% 33%,rgba(74,109,68,.28),rgba(7,19,14,.94) 68%)}}
@media(max-height:770px){.screen-inner{justify-content:flex-start}.hero-art{height:clamp(155px,26vh,230px)}.overline{margin-top:0}.welcome-copy h1{font-size:clamp(42px,8.5vw,58px);margin-bottom:12px}.welcome-subtitle{line-height:1.4;margin-bottom:16px}.welcome-foot{margin-top:14px}.privacy-note{margin-top:10px}}
@media(max-height:610px){.hero-art{height:135px}.hero-mosquito{height:140px}.welcome-foot{display:none}.privacy-note{margin-top:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* 3D edition: subtle optical reticle and richer HUD labels. */
.aim-reticle{position:absolute;z-index:3;top:50%;left:50%;width:46px;height:46px;transform:translate(-50%,-50%);border:1px dashed rgba(220,255,192,.22);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .2s}
.aim-reticle::before,.aim-reticle::after{content:'';position:absolute;background:rgba(221,255,198,.48)}
.aim-reticle::before{width:16px;height:1px;left:15px;top:22px}.aim-reticle::after{height:16px;width:1px;left:22px;top:15px}
.app:has(#gameCanvas.is-live) .aim-reticle{opacity:1}
.impact-circle{position:absolute;z-index:1;transform:translate(-50%,-50%) scale(.5);width:32px;height:32px;border:2px solid rgba(250,251,232,.7);border-radius:50%;animation:impact-3d .42s ease-out forwards;pointer-events:none}
.impact-circle.hit{border-color:#bcff71;box-shadow:0 0 20px #caff9955}
@keyframes impact-3d{from{opacity:1;transform:translate(-50%,-50%) scale(.4)}to{opacity:0;transform:translate(-50%,-50%) scale(3.6)}}

/* Edición exploración espacial: guía para localizar objetivos fuera de cámara. */
#gameCanvas { touch-action: none; }
.search-hint {position:absolute;z-index:3;left:50%;top:72%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;border:1px solid rgba(216,255,198,.28);border-radius:50px;background:rgba(9,26,18,.76);color:#dfffc5;padding:10px 15px;max-width:calc(100vw - 32px);pointer-events:none;box-shadow:0 12px 25px #0004;backdrop-filter:blur(8px);font-size:10px;font-weight:850;letter-spacing:.65px;white-space:nowrap}
.search-hint.is-hidden {display:none}
.search-hint #hintArrow {font-size:22px;color:#afff7f;line-height:1}
.search-hint.found {opacity:.5}
@media(max-width:360px){.search-hint{font-size:9px;gap:6px;padding:8px 12px}}