/* El juego más difícil de Avantia — módulo 06 de la zona de juegos.
   La base (HUD, paneles de cristal, chips de teclas, botones) es la misma familia que
   «Asteroides» y «Carrera espacial», con el prefijo .dif-. Lo propio: el contador de muertes
   en grande, el rótulo de cada nivel, la rejilla de niveles y la cruceta táctil. */
.dif{position:fixed;inset:0;z-index:2147483647;background:#04020a;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  font-family:"Inter",system-ui,sans-serif;color:#f3f2f7;-webkit-tap-highlight-color:transparent;outline:0}
.dif[hidden]{display:none}
html.modo-dificil,html.modo-dificil body{overflow:hidden}
.dif .dif-lienzo{position:absolute;inset:0;width:100%;height:100%;display:block}
.dif-velo{position:absolute;inset:0;pointer-events:none}
.dif-velo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,rgb(233 226 255 / .22),rgb(143 99 255 / .12) 45%,transparent 75%);opacity:0;transition:opacity .5s ease-out}
.dif-velo.golpe::after{opacity:1;transition:none}

/* HUD */
.dif-hud{position:absolute;inset:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:12px;
  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}
.dif-izq{display:flex;flex-direction:column;gap:9px;padding-top:12px;min-width:0;opacity:0;transition:opacity .5s}
.dif.jugando .dif-izq{opacity:1}
.dif-marca{display:flex;align-items:center;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#bdb3e6}
.dif-marca b{font-weight:500;color:#fff}
.dif-marca i{font-style:normal;color:#7d769c;margin-left:-4px}
.dif-punto{width:7px;height:7px;border-radius:50%;background:#8f63ff;box-shadow:0 0 0 4px rgb(143 99 255 / .18),0 0 14px #8f63ff}
.dif-nombre{font:600 16px/1.2 var(--titular);letter-spacing:-.015em;color:#fff;max-width:26ch;text-shadow:0 1px 10px rgb(4 2 10 / .9)}
.dif-marcador{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transform:translateY(-8px);transition:opacity .5s,transform .5s var(--suave)}
.dif.jugando .dif-marcador,.dif.fin .dif-marcador{opacity:1;transform:none}
.dif-muertes{font:500 clamp(34px,4.6vw,50px)/1 var(--mono);letter-spacing:.04em;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 26px rgb(143 99 255 / .6)}
.dif-muertes.hito{animation:dif-hito .5s var(--suave)}
@keyframes dif-hito{25%{color:#ffd6f1;transform:scale(1.18);text-shadow:0 0 34px rgb(255 120 220 / .7)}}
.dif-sub{display:flex;align-items:center;gap:12px;font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#b3aed0;text-shadow:0 1px 8px rgb(4 2 10 / .9);white-space:nowrap}
.dif-sub i{font-style:normal;color:#c9b8ff;font-variant-numeric:tabular-nums}
.dif-sep{width:3px;height:3px;border-radius:50%;background:#5d5680}
.dif-botones{display:flex;gap:10px;justify-content:flex-end;pointer-events:auto}
.dif-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 / .45);-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,opacity .3s}
.dif-btn:hover{background:rgb(107 43 255 / .4);border-color:rgb(201 184 255 / .45)}
.dif-btn:active{transform:scale(.94)}
.dif-reini{opacity:0;pointer-events:none}
.dif.jugando .dif-reini{opacity:1;pointer-events:auto}
.dif-btn:focus-visible,.dif-go:focus-visible,.dif-cta:focus-visible,.dif-nv:focus-visible{outline:2px solid #c9b8ff;outline-offset:3px}
.dif-son .off{display:none}.dif-son.mudo .off{display:inline}.dif-son.mudo .on{display:none}

/* pista inferior y avisos */
.dif-pista{position:absolute;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;white-space:nowrap;
  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 / .45);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}
.dif.jugando .dif-pista{opacity:1}.dif.jugando .dif-pista.fuera{opacity:0}
.dif-pista kbd,.dif-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)}
.dif-aviso{position:absolute;left:50%;top:calc(max(18px,env(safe-area-inset-top)) + 96px);transform:translate(-50%,-6px);margin:0;pointer-events:none;
  font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#fff;padding:10px 16px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(90deg,rgb(107 43 255 / .55),rgb(143 99 255 / .35));border:1px solid rgb(201 184 255 / .4);
  box-shadow:0 10px 30px -10px rgb(107 43 255 / .9);opacity:0;transition:opacity .35s,transform .35s var(--suave)}
.dif-aviso.ver{opacity:1;transform:translate(-50%,0)}

/* rótulo de cada nivel */
.dif-rotulo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;isolation:isolate;flex-direction:column;align-items:center;gap:12px;pointer-events:none;opacity:0;
  text-align:center;width:min(calc(100vw - 40px),780px)}
.dif-rotulo::before{content:"";position:absolute;inset:-56px -8%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgb(4 2 10 / .82),rgb(4 2 10 / .55) 55%,rgb(4 2 10 / 0))}
.dif-rotulo small{font:500 11px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#a993ff}
.dif-rotulo b{font:800 clamp(34px,5.6vw,72px)/.98 var(--titular);letter-spacing:-.045em;text-wrap:balance;
  background:linear-gradient(180deg,#fff 25%,#c9b8ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgb(143 99 255 / .55)) drop-shadow(0 4px 24px rgb(4 2 10 / .9))}
.dif-rotulo span{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#cfc6f2;text-shadow:0 1px 10px rgb(4 2 10 / .9)}
.dif-rotulo.ver{animation:dif-rotulo 2.3s var(--suave) both}
@keyframes dif-rotulo{0%{opacity:0;transform:translate(-50%,-42%) scale(.96)}16%,74%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-56%) scale(1.01)}}

/* paneles de inicio y final */
.dif-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100vw - 32px),520px);max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain;
  padding:clamp(24px,3.6vw,38px);border-radius:28px;text-align:center;scrollbar-width:thin;scrollbar-color:rgb(143 99 255 / .4) transparent;
  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:dif-entra .7s var(--suave) both;touch-action:pan-y}
.dif-panel[hidden]{display:none}
@keyframes dif-entra{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
.dif-eyebrow{font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#a993ff;margin:0 0 16px}
.dif-panel h2{font:700 clamp(36px,5.6vw,52px)/.98 var(--titular);letter-spacing:-.045em;color:#fff;margin:0 0 16px}
.dif-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%,#e9e2ff 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}
.dif-texto{color:#c4c0d6;font-size:15px;line-height:1.55;margin:0 auto 20px;max-width:38ch}
.dif-teclas{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px;justify-items:center}
.dif-teclas li{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.dif-teclas span{font-size:13.5px;color:#9e99b4;margin-left:6px}
.dif-teclas i{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#6f6a88;font-style:normal;margin:0 4px}
.dif-teclas kbd.sep{margin-left:18px}
.dif-acc{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.dif-go,.dif-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}
.dif-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)}
.dif-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)}
.dif-go span,.dif-cta span{transition:transform .3s var(--suave)}.dif-go:hover span,.dif-cta:hover span{transform:translateX(3px)}
.dif-cta{color:#fff;border:1px solid rgb(201 184 255 / .3);background:rgb(255 255 255 / .04)}
.dif-cta:hover{background:rgb(255 255 255 / .1);transform:translateY(-2px)}
.dif-inicio .dif-go{min-width:220px}
.dif-mejor{margin:18px 0 0;font:500 11px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8a8a93}
.dif-mejor b{color:#c9b8ff;font-weight:500}

/* selector de niveles */
.dif-niveles{margin:24px 0 0;padding:18px 0 0;border-top:1px solid rgb(201 184 255 / .12)}
.dif-niv-tit{display:flex;justify-content:space-between;align-items:baseline;margin:0 2px 12px;font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#a993ff}
.dif-niv-tit i{font-style:normal;color:#7d769c;letter-spacing:.12em}
.dif-rejilla{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.dif-nv{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:58px;padding:0 4px;border-radius:14px;cursor:pointer;
  color:#fff;border:1px solid rgb(201 184 255 / .16);background:rgb(255 255 255 / .035);transition:background .25s,border-color .25s,transform .25s var(--suave)}
.dif-nv b{font:500 16px/1 var(--mono);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.dif-nv small{font:500 9px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#9e99b4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dif-nv:hover:not(:disabled){background:rgb(107 43 255 / .28);border-color:rgb(201 184 255 / .45);transform:translateY(-2px)}
.dif-nv.hecho{background:linear-gradient(180deg,rgb(107 43 255 / .22),rgb(107 43 255 / .08));border-color:rgb(169 139 255 / .32)}
.dif-nv.hecho small{color:#c9b8ff}
.dif-nv.toca{border-color:rgb(201 184 255 / .6);box-shadow:0 0 0 3px rgb(107 43 255 / .25),0 10px 26px -12px rgb(107 43 255 / .9)}
.dif-nv.toca small{color:#e9e2ff}
.dif-nv.cerrado{cursor:not-allowed;color:#5d5680;background:rgb(255 255 255 / .015);border-color:rgb(201 184 255 / .07)}
.dif-nv.cerrado small{color:#5d5680;display:grid;place-items:center}

/* final */
.dif-gran{margin:4px 0 6px;display:flex;flex-direction:column;align-items:center;gap:10px}
.dif-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))}
.dif-gran small{font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#8a8a93}
.dif-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)}
.dif-nuevo[hidden]{display:none}
.dif-fin .dif-texto{margin-bottom:22px}
.dif-datos{list-style:none;margin:18px auto 24px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:340px}
.dif-datos li{display:flex;flex-direction:column;gap:7px;padding:14px 10px;border-radius:16px;background:rgb(255 255 255 / .04);border:1px solid rgb(201 184 255 / .14)}
.dif-datos b{font:500 24px/1 var(--mono);color:#fff;font-variant-numeric:tabular-nums}
.dif-datos small{font:500 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8a8a93}

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

/* cruceta táctil de 8 direcciones */
.dif-mando{position:absolute;inset:0;pointer-events:none;display:none}
.dif.tactil.jugando .dif-mando{display:block}
.dif-cruceta{position:absolute;left:50%;bottom:max(30px,calc(env(safe-area-inset-bottom) + 18px));width:176px;height:176px;margin-left:-88px;border-radius:50%;pointer-events:auto;touch-action:none;
  background:radial-gradient(circle,rgb(107 43 255 / .14),rgb(22 12 50 / .5) 72%);border:1px solid rgb(201 184 255 / .22);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 50px -20px rgb(0 0 0 / .9),inset 0 1px 0 rgb(255 255 255 / .06)}
.dif-cruceta i{position:absolute;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:rgb(255 255 255 / .05);border:1px solid rgb(201 184 255 / .22);transition:background .12s,border-color .12s,box-shadow .12s}
.dif-cruceta i::before{content:"";width:0;height:0;border:8px solid transparent;border-bottom:11px solid #e9e2ff;margin-top:-8px;opacity:.85}
.dif-cruceta i[data-d="arr"]{left:61px;top:8px}
.dif-cruceta i[data-d="aba"]{left:61px;bottom:8px;transform:rotate(180deg)}
.dif-cruceta i[data-d="izq"]{left:8px;top:61px;transform:rotate(-90deg)}
.dif-cruceta i[data-d="der"]{right:8px;top:61px;transform:rotate(90deg)}
.dif-cruceta i.on{background:linear-gradient(160deg,#9d7bff,#5a24e0);border-color:rgb(233 226 255 / .7);box-shadow:0 0 24px -2px rgb(143 99 255 / .9)}
.dif-cruceta b{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:5px;background:rgb(201 184 255 / .18);border:1px solid rgb(201 184 255 / .3)}
@media (orientation:landscape) and (max-height:560px){
  .dif-cruceta{left:auto;margin-left:0;right:max(22px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}
}

@media (max-width:700px){
  .dif-hud{grid-template-columns:minmax(0,1fr) auto;padding-left:16px;padding-right:16px;row-gap:8px}
  .dif-izq{grid-column:1;grid-row:2;padding-top:0;flex-direction:row;align-items:center;gap:10px}
  .dif-marcador{grid-column:1;grid-row:1;align-items:flex-start}
  .dif-botones{grid-column:2;grid-row:1}
  .dif-nombre{font-size:13px;max-width:none;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dif-marca{flex:none;letter-spacing:.12em;gap:8px}
  .dif-izq{gap:8px}
  .dif-muertes{font-size:34px}
  .dif-sub{gap:8px;font-size:9.5px;letter-spacing:.14em}
  .dif-btn{width:42px;height:42px}
  .dif-botones{gap:8px}
  .dif-aviso{top:auto;bottom:250px}
  .dif-pista{font-size:10px;letter-spacing:.12em;padding:10px 14px;white-space:normal;width:max-content;max-width:calc(100vw - 32px);text-align:center;line-height:1.6}
  .dif.tactil .dif-pista{display:none}
  .dif-panel{border-radius:24px;top:calc(50% + 36px);max-height:calc(100dvh - 112px)}
  .dif-panel h2{font-size:clamp(32px,9vw,40px)}
  .dif-texto{font-size:14.5px}
  .dif-acc .dif-go,.dif-acc .dif-cta{flex:1 1 140px}
  .dif-inicio .dif-go{min-width:0;width:100%}
  .dif-rejilla{gap:6px}
  .dif-nv{height:52px;border-radius:12px}
  .dif-nv small{font-size:8px;letter-spacing:.02em}
}
@media (prefers-reduced-motion:reduce){
  .dif-panel,.dif-muertes.hito,.dif-panel h2 em{animation:none}
  .dif-rotulo.ver{animation:dif-quieto 2.2s linear both}
  @keyframes dif-quieto{0%,85%{opacity:1}100%{opacity:0}}
  .dif-marcador,.dif-izq,.dif-pista,.dif-velo::after,.dif-go,.dif-cta,.dif-btn,.dif-nv,.dif-aviso{transition:none}
}

/* ───────── menú de juegos: con seis tarjetas, tres filas de dos iguales ───────── */
/* css/bugs.css ponía la quinta tarjeta a lo ancho; aquí vuelve a ser una más (mismo degradado y texto) */
.juegos-menu .dv-con-mods .dv-mod,.juegos-menu .dv-con-mods .dv-mod[data-j="bugs"]{grid-column:auto;aspect-ratio:16/10}
.juegos-menu .dv-mod[data-j="bugs"] .dv-mod-cover img{object-position:50% 50%}
.juegos-menu .dv-mod[data-j="bugs"] .dv-mod-cover::after{background:linear-gradient(180deg,rgb(6 5 12 / 0) 35%,rgb(6 5 12 / .55) 62%,rgb(6 5 12 / .95))}
.juegos-menu .dv-mod[data-j="bugs"] .dv-mod-txt{right:52px;max-width:none}
@media (max-width:900px){
  .juegos-menu .dv-con-mods .dv-mod,.juegos-menu .dv-con-mods .dv-mod[data-j="bugs"]{aspect-ratio:16/10}
  .juegos-menu .dv-mod[data-j="bugs"] .dv-mod-txt{max-width:none}
}
/* si no cabe en alto: tarjetas algo más bajas y scroll interno discreto (sin meterse bajo la barra de la web) */
.juegos-menu.dv-consola{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgb(143 99 255 / .45) transparent}
@media (min-width:641px){.juegos-menu.dv-consola{max-height:calc(100dvh - 200px)}}
@media (min-width:641px) and (max-height:860px){.juegos-menu .dv-con-mods .dv-mod,.juegos-menu .dv-con-mods .dv-mod[data-j="bugs"]{aspect-ratio:2/1}}
.juegos-menu.dv-consola::-webkit-scrollbar{width:8px}
.juegos-menu.dv-consola::-webkit-scrollbar-thumb{background:rgb(143 99 255 / .4);border-radius:8px;border:2px solid transparent;background-clip:padding-box}