:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#263c48;background:#e8f1f4}*{box-sizing:border-box}body{margin:0;overscroll-behavior:none}.app{height:100dvh;min-height:430px;display:flex;flex-direction:column;max-width:760px;margin:auto;background:linear-gradient(130deg,#f8fdff,#c7dce4)}header{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) 19px 12px}.brand{display:flex;gap:10px;align-items:center}.brand-icon{font-size:31px}.brand strong{display:block;font-size:21px;letter-spacing:-.6px}.brand small{display:block;color:#6c8792;font-size:11px;margin-top:1px}.iconbtn{border:1px solid #ffffffa8;border-radius:15px;background:#ffffff99;color:#476270;min-width:43px;height:43px;font-size:25px;cursor:pointer}.counters{display:flex;align-items:center;gap:23px;padding:8px 19px 13px}.counters>div span{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#748b95;display:block}.counters strong{font-size:27px;font-variant-numeric:tabular-nums}.counters button{margin-left:auto;border:1px solid #aac8d4;border-radius:30px;background:#ffffffe0;color:#385965;padding:11px 15px;font-size:12px;font-weight:700;cursor:pointer}main{position:relative;flex:1;min-height:0;overflow:hidden;border-top:1px solid #fff9;border-bottom:1px solid #fff7;background:repeating-linear-gradient(35deg,#e3eff3,#cddfe5 70px,#eaf4f7 125px);touch-action:manipulation}.bubbles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);padding:7px;gap:4px}.bubble{border:0;padding:0;min-width:0;min-height:0;align-self:stretch;justify-self:stretch;position:relative;cursor:pointer;border-radius:50%;background:radial-gradient(ellipse at 35% 26%,#fffefde8 0%,#faffff81 14%,#b4d2e380 39%,#84acc184 67%,#d3e9efbd 79%,#ffffffed 92%,#bad1daaf 100%);box-shadow:inset 2px 3px 5px #fff,inset -3px -5px 8px #719bb073,0 2px 3px #789caf99,0 0 0 1px #ffffffa8;transform:scale(.94);-webkit-tap-highlight-color:transparent;transition:transform .1s,background .15s,box-shadow .15s}.bubble:before{content:"";position:absolute;left:18%;top:10%;width:38%;height:16%;border-radius:50%;background:#fffefa9c;filter:blur(2px);transform:rotate(-30deg)}.bubble.popped{cursor:default;transform:scale(.87);background:radial-gradient(ellipse at 50% 55%,#9ab2ba23 0 48%,#b5d0d958 63%,#fff9 79%,#8eacb381 100%);box-shadow:inset 1px 2px 5px #668a9544,0 0 0 1px #ffffff7a}.bubble.popped:before{opacity:.14}.bubble.pop-animate{animation:pop .17s ease-out}@keyframes pop{50%{transform:scale(.65)}}footer{display:flex;align-items:center;gap:8px;min-height:57px;padding:8px 15px;color:#6d8691;font-size:12px}footer span{flex:1}footer button{border:1px solid #ffffffed;background:#ffffffa8;border-radius:11px;width:38px;height:36px;font-size:19px;cursor:pointer}footer button.off{opacity:.38}.copyright{font-size:9px;line-height:1.5;text-align:center;color:#8298a2;padding:0 10px calc(8px + env(safe-area-inset-bottom))}.modal{position:fixed;inset:0;background:#102a3899;display:grid;place-items:center;padding:16px;z-index:10}.modal[hidden]{display:none}.panel{width:min(100%,430px);max-height:92dvh;overflow:auto;background:#f8fcfe;border-radius:25px;padding:23px;box-shadow:0 20px 65px #14394e44}.panelhead{display:flex;justify-content:space-between;align-items:flex-start}.panel h2{margin:0;font-size:25px}.panel p{margin:5px 0;color:#8196a1;font-size:13px}.summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:21px 0}.summary>div{background:#dcebf2;border-radius:17px;padding:15px}.summary small{display:block;color:#6d8997}.summary strong{display:block;font-size:28px;margin-top:4px}.panel h3{font-size:15px}.days{display:grid;gap:10px}.day{display:grid;grid-template-columns:60px 1fr 34px;align-items:center;gap:9px;font-size:12px}.bartrack{height:11px;background:#dfebee;border-radius:10px;overflow:hidden}.bar{height:100%;background:linear-gradient(90deg,#76abc4,#3c809f);border-radius:10px}.day b{text-align:right}.panel .note{margin-top:22px;font-size:12px}@media(min-width:600px){.app{box-shadow:0 0 40px #607e8b3b}} 

/* Modo alimañas: las capas superiores permiten apuntar con el dedo. */
#creatures,#splats{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#creatures{z-index:3}#splats{z-index:2}
.critter{position:absolute;width:62px;height:62px;left:0;top:0;transform:translate(-50%,-50%);pointer-events:auto;touch-action:none;cursor:crosshair;will-change:transform;filter:drop-shadow(0 3px 2px #202b3455)}
.critter svg{width:100%;height:100%;overflow:visible}.critter.catch{pointer-events:none}
.splat{position:absolute;width:60px;height:60px;transform:translate(-50%,-50%) rotate(var(--rot));pointer-events:none;opacity:.85;animation:splatIn .22s ease-out}
.splat svg{width:100%;height:100%}@keyframes splatIn{from{transform:translate(-50%,-50%) scale(.1) rotate(var(--rot))}to{transform:translate(-50%,-50%) scale(1) rotate(var(--rot))}}
.score-float{position:absolute;z-index:5;pointer-events:none;color:#1b6332;font-size:23px;font-weight:950;transform:translate(-50%,-50%);text-shadow:0 1px 2px white;animation:scoreRise 1s ease-out forwards}@keyframes scoreRise{to{transform:translate(-50%,-125%);opacity:0}}
.counters{gap:14px}.counters strong{font-size:24px}.counters button{padding:10px;font-size:11px}.summary{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Rareza de alimañas. Mantener la apariencia natural del plástico. */
.tier-rare svg{filter:drop-shadow(0 0 3px #68f0e8)}
.tier-epic svg{filter:drop-shadow(0 0 6px #a96aff)}
.tier-legendary svg{filter:drop-shadow(0 0 9px #ffd34b)}
.score-rare{color:#097d79}.score-epic{color:#8343bf}.score-legendary{color:#a36500;font-size:20px;text-shadow:0 1px 3px #fff}

/* Movimiento de supervivencia simulado y crías */
.critter.alert svg{filter:drop-shadow(0 0 6px #ff6c65)}.critter.baby{filter:drop-shadow(0 2px 2px #263a4677)}.swarm-text{font-size:19px;color:#a32935;text-shadow:0 1px 3px white}

/* V5: inmovilidad estratégica y salto simulado hacia la cámara. */
.critter.feigning{filter:grayscale(.8) opacity(.85) drop-shadow(0 2px 2px #3336)}
.jump-scare{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:rgba(20,11,13,.17);pointer-events:auto;overflow:hidden;touch-action:none;animation:jumpVeil .8s ease-out forwards}
.jump-bug{width:32vmin;height:32vmin;max-width:350px;aspect-ratio:1;filter:drop-shadow(0 12px 14px #19191999);animation:jumpToward .8s cubic-bezier(.22,.76,.31,1) forwards;transform-origin:center center;pointer-events:none}
.jump-bug svg{display:block;width:100%;height:100%}
@keyframes jumpToward{0%{transform:translateY(20vh) scale(.15) rotate(-20deg);opacity:.55}45%{opacity:1}85%{transform:translateY(-5vh) scale(5.3) rotate(10deg);opacity:1}100%{transform:translateY(-7vh) scale(6.1) rotate(12deg);opacity:0}}
@keyframes jumpVeil{0%{background:transparent}60%{background:rgba(20,11,13,.17)}100%{background:transparent}}
@media(prefers-reduced-motion:reduce){.jump-bug{animation:none;transform:scale(1.8)}.jump-scare{animation:none;background:transparent}}

/* BubblePop v6: versión, controles y tabla de récords */
.version{display:inline-block;font-style:normal;font-size:11px;color:#427a94;background:#d7edf5;padding:2px 5px;border-radius:7px;vertical-align:middle}
.counters{gap:8px;padding-inline:10px;flex-wrap:wrap}.counters button{margin-left:0;padding:9px 8px}.counters #renew{margin-left:auto}.counters strong{font-size:clamp(17px,5vw,24px)}
.rankings{display:grid;gap:5px;max-height:255px;overflow:auto}.rank-line{display:grid;grid-template-columns:28px 1fr auto;gap:4px 8px;align-items:center;background:#e5f0f5;border-radius:11px;padding:8px 10px}.rank-line small{grid-column:2 / 4;color:#6e8895}.rank-line strong{font-size:13px}.rank-line span{font-size:13px}
.critter.roamer.ant svg{filter:drop-shadow(0 2px 2px #361a1399)}.critter.roamer.roach svg{filter:drop-shadow(0 3px 4px #27160d99)}
/* V6: salto elástico desde el centro: compresión, impulso, ascenso y llegada */
.jump-scare{display:flex;align-items:center;justify-content:center;perspective:900px}
.jump-bug{width:32vmin;height:32vmin;max-width:350px;transform-origin:center center;animation:jumpTowardV6 .85s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes jumpTowardV6{0%{transform:translate3d(0,18vh,-450px) scale(.22,.64) rotate(-12deg);opacity:.9}16%{transform:translate3d(0,13vh,-380px) scale(.4,.25) rotate(0deg);opacity:1}32%{transform:translate3d(0,-13vh,-240px) scale(1.1,1.4) rotate(10deg);opacity:1}48%{transform:translate3d(0,-22vh,0) scale(1.7,1.1) rotate(-8deg);opacity:1}70%{transform:translate3d(0,-5vh,300px) scale(3.8) rotate(var(--jump-spin));opacity:1}92%{transform:translate3d(0,0,500px) scale(7.4) rotate(var(--jump-spin));opacity:1}100%{transform:translate3d(0,0,520px) scale(8) rotate(var(--jump-spin));opacity:0}}
@media(prefers-reduced-motion:reduce){.jump-bug{animation:none;transform:scale(1.5)}}

.counters #resetAll{border-color:#c99191;background:#fff1f1;color:#9b3030}.counters #resetAll:focus-visible{outline:3px solid #a94343;outline-offset:2px}

.counters #resetToday{background:#e5f6ed;color:#167245;border-color:#95caae}.counters #resetToday:focus-visible{outline:3px solid #228451;outline-offset:2px}

/* v6.3: controles móviles visibles, sin desplazamientos accidentales */
html,body{height:100%;width:100%;overflow:hidden}
.app{height:100dvh;min-height:0;overflow:hidden}
header{padding:calc(6px + env(safe-area-inset-top)) 12px 5px;flex-shrink:0}
.brand strong{font-size:19px}
.counters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(95px,1.3fr);gap:4px;padding:4px 8px;flex-shrink:0}
.counters>div{min-width:0;text-align:center}.counters>div span{font-size:9px;letter-spacing:.6px}.counters strong{font-size:clamp(15px,4.5vw,22px)}
.counters .level-pill{border-radius:10px;background:#e1f3f9;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:3px}
.level-pill #levelInfo{letter-spacing:0;font-size:10px}.level-pill #timeInfo{font-size:19px}.level-pill #timeInfo.urgent{color:#bd3131}
.toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:4px 8px 7px;flex-shrink:0}
.toolbar button,.options-panel button,.options-panel select{min-width:0;padding:10px 4px;font-size:clamp(10px,2.8vw,13px);font-weight:700;border:1px solid #adc9d4;border-radius:12px;background:#ffffffe3;color:#335b69;touch-action:manipulation}
.toolbar #lockBtn[aria-pressed=true]{background:#d3f0da;color:#246a39}
.options-panel{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:8px;background:#e0eff4;border-bottom:1px solid #a9c9d4;flex-shrink:0;max-height:32dvh;overflow:auto}
.options-panel[hidden],.game-notice[hidden]{display:none}
.options-panel label{font-size:11px;font-weight:700}.options-panel select{flex:1;min-width:125px}.options-panel button{flex:1 1 27%;min-width:92px}
.options-panel #resetAll{color:#9c3030;background:#fff1f1}
.options-panel p{width:100%;font-size:10px;margin:2px;color:#557887}
main{touch-action:none;min-height:0}
.bubbles,.bubble{touch-action:none}
body.screen-locked,body.screen-locked main{overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}
.game-notice{position:absolute;z-index:20;top:44%;left:50%;transform:translate(-50%,-50%);width:min(90%,340px);padding:16px;text-align:center;border-radius:18px;background:#fffffff0;color:#234c62;font-size:18px;font-weight:800;box-shadow:0 6px 24px #1238;pointer-events:none}
footer{min-height:35px;padding:3px 8px;font-size:11px;flex-shrink:0}.copyright{font-size:8px;padding-bottom:calc(3px + env(safe-area-inset-bottom));flex-shrink:0}
@media(max-height:650px){header{padding-top:calc(2px + env(safe-area-inset-top));padding-bottom:2px}.brand small{display:none}.brand-icon{font-size:22px}footer{min-height:30px}.copyright{font-size:7px}.toolbar button{padding:6px 2px}}
