/* Cazador de bugs — módulo 05 de la zona de juegos.
   La base (HUD, paneles de cristal, chips de teclas, botones) es la de «Asteroides» y
   «Carrera espacial» con el prefijo .cb-, para que los cinco juegos sean de la misma familia.
   La diferencia: aquí no hay fondo propio. La capa es transparente y se juega ENCIMA de la
   landing real; sólo se oscurece detrás de las tarjetas de inicio y final. */
.cb{position:fixed;inset:0;z-index:2147483000;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden;
  font-family:"Inter",system-ui,sans-serif;color:#f3f2f7;-webkit-tap-highlight-color:transparent;overscroll-behavior:contain}
.cb[hidden]{display:none}
.cb .cb-lienzo{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.cb.sacudida .cb-lienzo{animation:cb-sacude .38s cubic-bezier(.3,.7,.3,1)}
@keyframes cb-sacude{20%{transform:translate(-5px,3px)}40%{transform:translate(4px,-3px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}

/* velo: oscuro detrás de los paneles; durante la partida, sólo un marco de «modo depuración» */
.cb-velo{position:absolute;inset:0;pointer-events:none;transition:background .6s,box-shadow .6s;
  background:radial-gradient(120% 90% at 50% 50%,rgb(8 4 22 / .38),rgb(4 2 10 / .78)) ;
  -webkit-backdrop-filter:blur(3px) saturate(.9);backdrop-filter:blur(3px) saturate(.9)}
.cb.jugando .cb-velo{background:radial-gradient(130% 100% at 50% 50%,transparent 62%,rgb(20 6 50 / .42) 100%);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px rgb(143 99 255 / .28),inset 0 0 80px -20px rgb(107 43 255 / .35)}
.cb.jugando.critico .cb-velo{animation:cb-critico 1.1s ease-in-out infinite}
@keyframes cb-critico{50%{box-shadow:inset 0 0 0 2px rgb(255 77 154 / .55),inset 0 0 140px -30px rgb(255 77 154 / .45)}}
.cb.fin .cb-velo{transition-delay:.5s}

/* HUD */
.cb-hud{position:absolute;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;z-index:3;
  padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left));pointer-events:none}
.cb-marca{display:flex;align-items:center;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#bdb3e6;padding-top:15px;
  text-shadow:0 1px 8px rgb(4 2 10 / .9)}
.cb-punto{width:7px;height:7px;border-radius:50%;background:#3dffa8;box-shadow:0 0 0 4px rgb(61 255 168 / .16),0 0 14px #3dffa8}
.cb-marcador{display:flex;flex-direction:column;align-items:center;gap:9px;padding:12px 20px 12px;border-radius:22px;opacity:0;transform:translateY(-8px);
  transition:opacity .5s,transform .5s var(--suave);background:rgb(12 6 32 / .55);border:1px solid rgb(201 184 255 / .16);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 18px 50px -20px rgb(0 0 0 / .8),inset 0 1px 0 rgb(255 255 255 / .07)}
.cb.jugando .cb-marcador,.cb.fin .cb-marcador{opacity:1;transform:none}
.cb-pts{font:500 clamp(28px,3.6vw,40px)/1 var(--mono);letter-spacing:.06em;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgb(143 99 255 / .55)}
.cb-pts.hito{animation:cb-hito .5s var(--suave)}
@keyframes cb-hito{30%{color:#b6ffe0;transform:scale(1.1)}}
.cb-salud{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:min(330px,62vw)}
.cb-salud-et{font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#b3aed0;white-space:nowrap}
.cb-barra{position:relative;height:6px;border-radius:99px;background:rgb(255 255 255 / .08);overflow:hidden;box-shadow:inset 0 0 0 1px rgb(201 184 255 / .12)}
.cb-barra i{position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;transition:transform .25s linear;
  background:linear-gradient(90deg,#6b2bff,#8f63ff 45%,#3dffa8);box-shadow:0 0 14px rgb(143 99 255 / .8)}
.cb-salud-n{font:500 12px/1 var(--mono);color:#fff;font-variant-numeric:tabular-nums;min-width:4ch;text-align:right}
.cb-salud.baja .cb-barra i{background:linear-gradient(90deg,#ff4d9a,#ff7ab4);box-shadow:0 0 16px rgb(255 77 154 / .9);animation:cb-latido .55s ease-in-out infinite alternate}
.cb-salud.baja .cb-salud-n,.cb-salud.baja .cb-salud-et{color:#ff9cc6}
@keyframes cb-latido{to{opacity:.55}}
.cb-sub{display:flex;gap:14px;font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#b3aed0}
.cb-sub i{font-style:normal;color:#c9b8ff}
.cb-tiempo{color:#b6ffe0;font-variant-numeric:tabular-nums}
.cb-tiempo.poco{color:#ff9cc6}
.cb-botones{display:flex;gap:10px;justify-content:flex-end;pointer-events:auto}
.cb-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#efeaff;padding:0;
  border:1px solid rgb(201 184 255 / .2);background:rgb(22 12 50 / .55);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08);transition:background .25s,border-color .25s,transform .25s}
.cb-btn:hover{background:rgb(107 43 255 / .4);border-color:rgb(201 184 255 / .45)}
.cb-btn:active{transform:scale(.94)}
.cb-btn:focus-visible,.cb-go:focus-visible,.cb-cta:focus-visible{outline:2px solid #c9b8ff;outline-offset:3px}
.cb-son .off{display:none}.cb-son.mudo .off{display:inline}.cb-son.mudo .on{display:none}
.cb-pista{position:absolute;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;white-space:nowrap;z-index:3;
  font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#cfc6f2;padding:12px 18px;border-radius:999px;
  background:rgb(22 12 50 / .6);border:1px solid rgb(201 184 255 / .16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .6s;pointer-events:none}
.cb.jugando .cb-pista{opacity:1}.cb.jugando .cb-pista.fuera{opacity:0}
.cb-pista kbd,.cb-teclas kbd{font:500 10.5px/1 var(--mono);letter-spacing:.08em;padding:5px 8px;border-radius:7px;color:#fff;
  border:1px solid rgb(201 184 255 / .3);background:rgb(255 255 255 / .06);box-shadow:inset 0 -2px 0 rgb(0 0 0 / .35)}

/* paneles de inicio y final: cristal violeta sobre la propia web */
.cb-panel{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);width:min(calc(100vw - 32px),520px);max-height:calc(100dvh - 120px);overflow:auto;
  padding:clamp(26px,4vw,40px);border-radius:28px;text-align:center;scrollbar-width:none;
  background:linear-gradient(180deg,rgb(40 20 96 / .55),rgb(12 6 32 / .7));border:1px solid rgb(201 184 255 / .2);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 40px 120px -30px rgb(107 43 255 / .55),inset 0 1px 0 rgb(255 255 255 / .1);animation:cb-entra .7s var(--suave) both;touch-action:auto}
.cb-panel[hidden]{display:none}
@keyframes cb-entra{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
.cb-eyebrow{font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#a993ff;margin:0 0 16px}
.cb-panel h2{font:700 clamp(38px,6vw,54px)/.98 var(--titular);letter-spacing:-.045em;color:#fff;margin:0 0 16px}
.cb-panel h2 em{font:inherit;font-style:normal;letter-spacing:inherit;padding-right:.04em;
  background:linear-gradient(100deg,#c9b8ff 0%,#9d7bff 30%,#6b2bff 55%,#b49cff 75%,#b6ffe0 85%,#8f63ff 100%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgb(124 77 255 / .4));animation:estela 7s ease-in-out infinite}
.cb-texto{color:#c4c0d6;font-size:15px;line-height:1.55;margin:0 auto 22px;max-width:38ch}
.cb-teclas{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px;justify-items:center}
.cb-teclas li{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.cb-teclas span{font-size:13.5px;color:#9e99b4;margin-left:4px}
.cb-teclas kbd.sep{margin-left:16px}
.cb-acc{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cb-go,.cb-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;
  font:600 15px/1 "Inter",sans-serif;cursor:pointer;text-decoration:none;transition:transform .3s var(--suave),box-shadow .3s,background .3s}
.cb-go{border:0;color:#fff;background:linear-gradient(100deg,#7c4dff,#6b2bff 45%,#5a24e0);box-shadow:0 14px 40px -12px rgb(107 43 255 / .95),inset 0 1px 0 rgb(255 255 255 / .25)}
.cb-go:hover{transform:translateY(-2px);box-shadow:0 20px 50px -12px rgb(143 99 255 / 1),inset 0 1px 0 rgb(255 255 255 / .3)}
.cb-go span,.cb-cta span{transition:transform .3s var(--suave)}.cb-go:hover span,.cb-cta:hover span{transform:translateX(3px)}
.cb-cta{color:#fff;border:1px solid rgb(201 184 255 / .3);background:rgb(255 255 255 / .04)}
.cb-cta:hover{background:rgb(255 255 255 / .1);transform:translateY(-2px)}
.cb-inicio .cb-go{min-width:200px}
.cb-mejor{margin:18px 0 0;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8a8a93}
.cb-mejor b{color:#c9b8ff;font-weight:500}
/* fauna: los cuatro bugs, pintados con el mismo código que en la partida */
.cb-fauna{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cb-fauna li{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px 12px;border-radius:16px;
  background:rgb(255 255 255 / .035);border:1px solid rgb(201 184 255 / .12)}
.cb-fauna canvas{width:56px;height:56px;display:block}
.cb-fauna b{font:600 12.5px/1.15 var(--titular);letter-spacing:-.01em;color:#fff}
.cb-fauna span{font:500 9.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8f8aa8}
.cb-fauna li:last-child{border-color:rgb(255 77 154 / .28);background:rgb(255 77 154 / .05)}
.cb-fauna li:last-child span{color:#ff9cc6}
/* final */
.cb-gran{margin:0 0 6px;display:flex;flex-direction:column;align-items:center;gap:10px}
.cb-gran b{font:800 clamp(64px,11vw,96px)/.9 var(--titular);letter-spacing:-.05em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 20%,#c9b8ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgb(143 99 255 / .45))}
.cb-gran small{font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#8a8a93}
.cb-nuevo{display:inline-block;margin:10px 0 0;padding:8px 14px;border-radius:999px;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:linear-gradient(90deg,rgb(107 43 255 / .5),rgb(143 99 255 / .3));border:1px solid rgb(201 184 255 / .4)}
.cb-nuevo[hidden]{display:none}
.cb-datos{list-style:none;margin:18px auto 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:420px}
.cb-datos li{display:flex;flex-direction:column;gap:7px;padding:14px 8px;border-radius:16px;background:rgb(255 255 255 / .04);border:1px solid rgb(201 184 255 / .14)}
.cb-datos b{font:500 24px/1 var(--mono);color:#fff;font-variant-numeric:tabular-nums}
.cb-datos small{font:500 9.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8a8a93}
.cb-fin .cb-texto{margin-top:18px}

/* texto flotante «+50 · bug 404 resuelto» */
.cb-flotas{position:absolute;inset:0;pointer-events:none;z-index:2}
.cb-flota{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;align-items:baseline;gap:8px;white-space:nowrap;opacity:0}
.cb-flota.ver{animation:cb-flota 1.25s cubic-bezier(.2,.7,.2,1) forwards}
.cb-flota b{font:500 17px/1 var(--mono);letter-spacing:.04em;color:#fff;text-shadow:0 0 16px rgb(61 255 168 / .8),0 0 2px rgb(61 255 168)}
.cb-flota span{font:600 14.5px/1 var(--titular);letter-spacing:-.01em;color:#e1d8ff;padding:5px 10px 6px;border-radius:999px;
  background:rgb(14 8 34 / .72);border:1px solid rgb(201 184 255 / .22);box-shadow:0 8px 24px -10px rgb(0 0 0 / .8)}
.cb-flota.especial b{color:#fff;text-shadow:0 0 18px rgb(255 77 154 / .9),0 0 2px #ff4d9a}
.cb-flota.especial span{border-color:rgb(61 255 168 / .4);color:#fff}
@keyframes cb-flota{0%{opacity:0;transform:translate(-50%,-30%) scale(.86)}14%{opacity:1;transform:translate(-50%,-60%) scale(1.04)}
  70%{opacity:1}100%{opacity:0;transform:translate(-50%,-180%) scale(1)}}

/* aviso del jefe */
.cb-aviso{position:absolute;left:50%;top:38%;z-index:2;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none;opacity:0;text-align:center}
.cb-aviso small{font:500 11px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#ff9cc6;padding:7px 12px;border-radius:999px;
  background:rgb(255 77 154 / .12);border:1px solid rgb(255 77 154 / .4)}
.cb-aviso b{font:800 clamp(44px,7.5vw,92px)/.92 var(--titular);letter-spacing:-.05em;white-space:nowrap;
  background:linear-gradient(180deg,#fff 20%,#ffc2dc);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgb(255 77 154 / .55)) drop-shadow(0 4px 24px rgb(4 2 10 / .9))}
.cb-aviso span{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#efeaff;text-shadow:0 1px 10px rgb(4 2 10 / .9)}
.cb-aviso.ver{animation:cb-aviso 2.4s var(--suave) both}
@keyframes cb-aviso{0%{opacity:0;transform:translate(-50%,-40%) scale(.94)}14%,74%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) scale(1.02)}}

/* el matamoscas: sustituye al cursor mientras se juega con ratón */
.cb-cursor{position:absolute;left:0;top:0;width:84px;height:84px;z-index:5;pointer-events:none;opacity:0;transition:opacity .2s;will-change:transform;
  filter:drop-shadow(0 0 10px rgb(143 99 255 / .75)) drop-shadow(0 8px 12px rgb(0 0 0 / .5))}
.cb-cursor svg{display:block;overflow:visible}
.cb-mata{transform-box:view-box;transform-origin:72px 72px;transform:rotate(9deg)}
.cb-cursor.golpe .cb-mata{animation:cb-golpe .26s cubic-bezier(.2,.9,.3,1)}
@keyframes cb-golpe{0%{transform:rotate(16deg)}32%{transform:rotate(-5deg) scale(.88)}100%{transform:rotate(9deg)}}
.cb.jugando:not(.tactil) .cb-cursor{opacity:1}
.cb.jugando:not(.tactil){cursor:none}
.cb.tactil.jugando .cb-cursor.golpe{animation:cb-toque .42s ease-out}
@keyframes cb-toque{0%,55%{opacity:1}100%{opacity:0}}

/* teclado o táctil: cada cual ve sus instrucciones */
.cb .solo-tactil{display:none}
.cb.tactil .solo-tactil{display:revert}
.cb.tactil .solo-teclado{display:none}

@media (max-width:640px){
  .cb-hud{grid-template-columns:1fr auto;padding-left:14px;padding-right:14px;gap:8px}
  .cb-marca{display:none}
  .cb-marcador{align-items:stretch;grid-column:1;padding:10px 14px;gap:7px;border-radius:18px}
  .cb-pts{font-size:24px}
  .cb-salud{width:auto;gap:8px}
  .cb-salud-et{font-size:8.5px;letter-spacing:.12em}
  .cb-sub{gap:10px;font-size:9.5px}
  .cb-btn{width:44px;height:44px}
  .cb-pista{font-size:10px;letter-spacing:.12em;padding:10px 14px}
  .cb-panel{border-radius:24px;padding:24px 18px}
  .cb-panel h2{font-size:36px}
  .cb-texto{font-size:14.5px}
  .cb-fauna{gap:6px}
  .cb-fauna canvas{width:44px;height:44px}
  .cb-fauna b{font-size:11px}
  .cb-fauna span{display:none}
  .cb-acc .cb-go,.cb-acc .cb-cta{flex:1 1 140px}
  .cb-datos{gap:6px}.cb-datos b{font-size:20px}.cb-datos small{font-size:8.5px;letter-spacing:.1em}
  .cb-flota b{font-size:15px}.cb-flota span{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .cb-panel,.cb-pts.hito,.cb-panel h2 em,.cb-salud.baja .cb-barra i,.cb.jugando.critico .cb-velo,.cb.sacudida .cb-lienzo{animation:none}
  .cb-marcador,.cb-pista,.cb-go,.cb-cta,.cb-btn,.cb-velo{transition:none}
  .cb-flota.ver{animation:cb-quieto 1.2s linear forwards}
  .cb-aviso.ver{animation:cb-quieto 2.2s linear both}
  @keyframes cb-quieto{0%,80%{opacity:1}100%{opacity:0}}
}

/* ───────── menú de juegos: con cinco portadas, la quinta ocupa la fila entera ─────────
   (con seis, css/dificil.css lo devuelve a una rejilla 2×3 y estas reglas quedan anuladas a propósito) */
/* con cinco portadas, las cuatro de arriba pasan de 4:3 a 16:10 (las portadas son 3:2, no se pierde nada)
   para que el menú siga cabiendo bajo la barra de navegación en una pantalla de 900 px */
.juegos-menu .dv-con-mods .dv-mod{aspect-ratio:16/10}
.juegos-menu .dv-con-mods .dv-mod[data-j="bugs"]{grid-column:1 / -1;aspect-ratio:21/6}
.juegos-menu .dv-mod[data-j="bugs"] .dv-mod-cover img{object-position:50% 46%}
.juegos-menu .dv-mod[data-j="bugs"] .dv-mod-cover::after{background:linear-gradient(90deg,rgb(6 5 12 / .9) 0%,rgb(6 5 12 / .55) 38%,rgb(6 5 12 / 0) 70%),linear-gradient(180deg,transparent 50%,rgb(6 5 12 / .6))}
.juegos-menu .dv-mod[data-j="bugs"] .dv-mod-txt{right:auto;max-width:48%}
/* con cinco portadas el menú puede pasar del alto de pantallas bajas: que se desplace dentro */
.juegos-menu.dv-consola{max-height:calc(100dvh - 190px);overflow-y:auto;scrollbar-width:none}
@media (max-width:640px){
  .juegos-menu .dv-con-mods .dv-mod[data-j="bugs"]{aspect-ratio:21/9}
  .juegos-menu.dv-consola{max-height:calc(100svh - 110px)}
  .juegos-menu .dv-mod[data-j="bugs"] .dv-mod-txt{max-width:70%}
}

/* mientras se juega, la barra de navegación se aparta (no es comestible y el marcador va encima) */
html.modo-bugs .cab{opacity:.28;transition:opacity .4s}