/* Utensio · modo secreto del inicio (código Konami). Lo monta pages/konami.js; todo cuelga de .km y de html.km-on / html.km-glitch,
   así que no toca nada del resto de la web. Colores propios del arcade: fósforo verde, ámbar, cian, magenta y amarillo */
.km {
  --km-green: #39ff7a; --km-dim: #1d9e4a; --km-amber: #ffb43a; --km-cyan: #29e6ff; --km-mag: #ff4fd8; --km-yel: #ffe14d; --km-red: #ff5d6c;
  --km-night: #05061a;
  position: fixed; inset: 0; z-index: 1100; overflow: hidden;
  color: var(--km-green); background: #000;
  font: 500 clamp(12px, 1.5vw, 15px)/1.55 var(--mono);
  -webkit-font-smoothing: none;
}
html.km-on { overflow: hidden; }
.km-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.km-motor { position: fixed; width: 1px; height: 1px; left: -9999px; top: 0; border: 0; opacity: 0; pointer-events: none; }

/* ───────── Fase 1: glitch del inicio y fundido a negro ───────── */
.km[data-s="transition"] { background: transparent; animation: km-black .75s .3s steps(6, end) forwards; }
html.km-glitch body > :not(.km) { animation: km-glitch .9s steps(1, end) both; }
@keyframes km-glitch {
  0% { transform: none; }
  8% { transform: translate(-6px, 0); clip-path: inset(12% 0 58% 0); filter: hue-rotate(80deg) saturate(1.6); }
  14% { transform: translate(4px, 1px); clip-path: inset(46% 0 22% 0); filter: none; }
  20% { transform: none; clip-path: none; opacity: .85; }
  32% { transform: translate(3px, 0); clip-path: inset(70% 0 6% 0); }
  38% { transform: none; clip-path: none; filter: contrast(1.4) brightness(1.15); }
  52% { transform: translate(-3px, -1px); filter: hue-rotate(-60deg); opacity: .7; }
  60% { transform: none; filter: none; opacity: .55; }
  74% { clip-path: inset(30% 0 40% 0); opacity: .35; }
  82% { clip-path: none; opacity: .2; }
  100% { opacity: 0; }
}
@keyframes km-black { from { background: rgba(0, 0, 0, 0); } to { background: #000; } }
/* Interferencia: una franja que barre la pantalla un par de veces mientras todo se apaga */
.km-noise { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.km[data-s="transition"] .km-noise {
  opacity: 1;
  background: linear-gradient(to bottom, transparent 0, transparent 46%, rgba(57, 255, 122, .16) 48%, rgba(255, 255, 255, .22) 50%, rgba(41, 230, 255, .14) 52%, transparent 54%, transparent 100%) 0 0 / 100% 200% no-repeat,
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px);
  animation: km-sweep .9s linear 2;
}
@keyframes km-sweep { from { background-position: 0 100%, 0 0; } to { background-position: 0 -100%, 0 0; } }

/* ───────── Salir (en todas las fases) ───────── */
.km-exit {
  position: absolute; z-index: 5; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px;
  border: 1px solid rgba(57, 255, 122, .45); border-radius: 0; background: rgba(0, 0, 0, .6); color: var(--km-green);
  font: 600 12px/1 var(--mono); letter-spacing: .06em; cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s;
}
.km-exit:hover { background: var(--km-green); color: #000; }
.km-exit:focus-visible { outline: 2px dashed var(--km-cyan); outline-offset: 3px; }
.km-exit-k { padding: 2px 5px; border: 1px solid currentColor; font-size: 10px; opacity: .75; }
.km-exit .km-exit-px { display: none; }
.km[data-s="transition"] .km-exit, .km[data-s="black"] .km-exit { opacity: 0; animation: km-in .2s .9s forwards; }
.km-exit.px-mode { border: 0; background: transparent; color: #fff; padding: 0 14px; font-size: 13px;
  box-shadow: 0 -3px 0 0 #fff, 0 3px 0 0 #fff, -3px 0 0 0 #fff, 3px 0 0 0 #fff; margin: 3px; }
.km-exit.px-mode .km-exit-t { display: none; }
.km-exit.px-mode .km-exit-px { display: inline-flex; }
.km-exit.px-mode:hover { background: #fff; color: var(--km-night); }
.km-exit.px-mode .km-exit-k { border-color: currentColor; }

/* ───────── Fase 2: terminal ───────── */
.km-term {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto auto;
  padding: max(18px, env(safe-area-inset-top)) clamp(16px, 6vw, 88px) max(18px, env(safe-area-inset-bottom));
  text-shadow: 0 0 6px rgba(57, 255, 122, .45);
  transform-origin: 50% 50%;
}
/* Pantalla de tubo: líneas horizontales y bordes un poco más oscuros, muy suaves */
.km-term::after, .km-retro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .55) 100%);
}
.km-tbar, .km-tfoot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; color: var(--km-dim); font-size: 11px; letter-spacing: .08em; text-shadow: none; }
.km-tbar { padding: 0 190px 10px 0; border-bottom: 1px dashed rgba(57, 255, 122, .25); }
.km-tfoot { padding-top: 10px; }
.km-out { align-self: start; padding: clamp(18px, 4vh, 40px) 0 12px; max-width: 72ch; overflow: hidden; }
.km-ln { min-height: 1.55em; white-space: pre-wrap; word-break: break-word; }
.km-ln::before { content: "> "; color: var(--km-dim); }
.km-ln:empty::before, .km-ln:has(> span:first-child:empty):not(:has(.km-cur.on))::before { content: none; }
.km-ln.hi { color: var(--km-amber); text-shadow: 0 0 8px rgba(255, 180, 58, .5); }
.km-cur { display: none; width: .6em; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: currentColor; box-shadow: 0 0 6px currentColor; }
.km-cur.on { display: inline-block; animation: km-blink 1s steps(1, end) infinite; }
.km-cur-u { width: auto; height: auto; background: none; box-shadow: none; vertical-align: baseline; }
@keyframes km-blink { 50% { opacity: 0; } }
.km-load { display: grid; gap: 4px; padding: 10px 0 4px; border-top: 1px dashed rgba(57, 255, 122, .25); }
.km-load > div:first-child { color: var(--km-dim); font-size: .9em; }
.km-bar { white-space: pre; font-size: clamp(12px, 2.2vw, 16px); letter-spacing: .02em; }
.km-bar.done { color: var(--km-amber); }
/* La tele se apaga: se aplasta en una línea brillante y luego en un punto */
.km-term.off { animation: km-off .5s cubic-bezier(.7, 0, .9, .4) forwards; }
@keyframes km-off {
  0% { transform: none; filter: none; }
  55% { transform: scale(1, .004); filter: brightness(4); }
  85% { transform: scale(.02, .004); filter: brightness(6); opacity: 1; }
  100% { transform: scale(0, 0); opacity: 0; }
}

/* ───────── Fase 3: arcade ───────── */
.km[data-s="retro"] { background: var(--km-night); }
.km-retro {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto;
  padding: max(12px, env(safe-area-inset-top)) clamp(14px, 4vw, 40px) max(12px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse 120% 70% at 50% 115%, #1b1458 0%, #0b0b2e 45%, var(--km-night) 75%);
  color: #fff; transform-origin: 50% 50%;
}
.km-retro.on { animation: km-on .6s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes km-on {
  0% { transform: scale(.4, .004); filter: brightness(5); }
  40% { transform: scale(1, .004); filter: brightness(4); }
  100% { transform: none; filter: none; }
}
.km-stars { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.km-retro > :not(.km-stars) { position: relative; z-index: 1; }
.px { display: inline-flex; align-items: center; line-height: 1; }
.px-t { display: block; flex: none; overflow: visible; }

/* Marcador de arriba (deja sitio al botón de salir) */
.km-hud { display: flex; flex-wrap: wrap; gap: 8px clamp(14px, 4vw, 44px); padding: 6px 220px 0 0; font-size: clamp(9px, 1.3vw, 13px); }
.km-hud-b { display: grid; gap: 6px; }
.km-1up { color: var(--km-red); animation: km-blink 1.2s steps(1, end) infinite; }
.km-dim { color: #8f95d8; }
.km-red { color: var(--km-red); }

/* Escenario: título, marcianitos, nave y mensaje */
.km-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.2vh, 22px); min-height: 0; text-align: center; }
.km-title { margin: 0; font-size: clamp(30px, 9.6vw, 104px); filter: drop-shadow(.06em .06em 0 #3a1e8c) drop-shadow(0 0 .12em rgba(255, 79, 216, .35)); }
.km-title .px-t { max-width: 92vw; height: auto; }
.km-retro.on .km-title { animation: km-title 1.1s .45s steps(11, end) both; }
@keyframes km-title { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.km-title.rainbow path { animation: km-rainbow 1.4s steps(7, end) infinite; }
@keyframes km-rainbow { 0% { fill: #4f46e5; } 14% { fill: #7b52d6; } 28% { fill: #d6409f; } 42% { fill: #e5484d; } 57% { fill: #f08a2e; } 71% { fill: #e0a010; } 85% { fill: #2ea36b; } 100% { fill: #4f46e5; } }
.km-sub { margin: 0; color: var(--km-cyan); font-size: clamp(9px, 1.7vw, 17px); }
.km-retro.on .km-sub { animation: km-appear 1.6s steps(1, end) both; }

.km-fleet { display: flex; gap: clamp(8px, 2.4vw, 26px); margin-top: clamp(4px, 2vh, 18px); }
.km-inv { position: relative; width: clamp(26px, 6vw, 52px); aspect-ratio: 11 / 7; animation: km-march 2.4s steps(4, end) infinite alternate; }
.km-inv svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.km-inv .f1 { opacity: 0; }
.km-inv .f0 { animation: km-legs .5s steps(1, end) infinite; }
.km-inv .f1 { animation: km-legs .5s steps(1, end) infinite reverse; }
.km-inv:nth-child(even) { animation-delay: -.6s; }
@keyframes km-legs { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes km-march { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
.km-inv.boom .f0, .km-inv.boom .f1 { display: none; }
.km-inv .km-boom { animation: km-pop .14s steps(2, end) both; }
.km-inv.gone { visibility: hidden; }
@keyframes km-pop { from { transform: scale(.4); } }

.km-ship { position: relative; width: clamp(54px, 11vw, 104px); aspect-ratio: 15 / 14; margin: clamp(2px, 1.6vh, 14px) 0; animation: km-bob 1.6s steps(4, end) infinite alternate; }
.km-ship svg { position: absolute; left: 0; width: 100%; }
.km-ship-b { top: 0; height: calc(100% * 11 / 14); }
.km-flame { top: calc(100% * 11 / 14); height: calc(100% * 3 / 14); transform-origin: 50% 0; animation: km-flame .16s steps(1, end) infinite; }
@keyframes km-bob { from { transform: translateY(-3px); } to { transform: translateY(5px); } }
@keyframes km-flame { 50% { transform: scaleY(.55); } }
.km-ship.boost { animation: km-boost .3s steps(3, end) infinite alternate; }
.km-ship.boost .km-flame { animation-duration: .08s; transform: scaleY(1.6); }
@keyframes km-boost { from { transform: translateY(-10px); } to { transform: translateY(-4px); } }
.km-shot { position: absolute; left: -2px; top: 0; width: 4px; height: 14px; background: var(--km-yel); box-shadow: 0 0 8px var(--km-yel); pointer-events: none; }

.km-msg { margin: 0; color: var(--km-green); font-size: clamp(9px, 1.5vw, 15px); }
.km-p1 { margin: 0; color: #8f95d8; font-size: clamp(8px, 1.15vw, 12px); }

/* PRESS START: borde de píxeles (esquinas comidas) hecho con sombras */
.km-start {
  --c: var(--km-yel);
  margin: clamp(6px, 2vh, 18px) 6px 0; min-height: 48px; padding: 14px clamp(18px, 4vw, 34px);
  border: 0; border-radius: 0; background: transparent; color: var(--c); font-size: clamp(14px, 2.4vw, 24px); cursor: pointer;
  box-shadow: 0 -5px 0 0 var(--c), 0 5px 0 0 var(--c), -5px 0 0 0 var(--c), 5px 0 0 0 var(--c);
  transition: background-color .1s, color .1s;
}
.km-start .px { animation: km-blink 1.1s steps(1, end) infinite; }
.km-start:hover, .km-start:focus-visible { background: var(--c); color: var(--km-night); outline: none; }
.km-start:hover .px, .km-start:focus-visible .px { animation: none; }
.km-start:focus-visible { box-shadow: 0 -5px 0 0 var(--c), 0 5px 0 0 var(--c), -5px 0 0 0 var(--c), 5px 0 0 0 var(--c), 0 0 0 9px var(--km-night), 0 0 0 12px var(--km-cyan); }
.km-start:active, .km-start.pressed { transform: translate(3px, 3px); }
.km-start.pressed .px { animation-duration: .16s; }
.km-start:disabled { cursor: default; }

/* Mensajes que aparecen (fase superada, vidas extra) */
.km-flash { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; justify-items: center; gap: 10px; margin: 0; padding: 0; pointer-events: none;
  transform: translate(-50%, -50%); font-size: clamp(10px, 1.8vw, 18px); }
.km-flash:empty { display: none; }
.km-flash.show { padding: clamp(14px, 3vw, 26px) clamp(16px, 4vw, 36px); background: rgba(5, 6, 26, .92);
  box-shadow: 0 -4px 0 0 currentColor, 0 4px 0 0 currentColor, -4px 0 0 0 currentColor, 4px 0 0 0 currentColor;
  animation: km-flash .6s steps(1, end) both; }
.km-flash .px:first-child { font-size: 1.6em; }
.km-flash.win { color: var(--km-yel); }
.km-flash.win .px:not(:first-child) { color: #fff; }
.km-flash.lives { color: var(--km-red); }
@keyframes km-flash { 0%, 40%, 80% { opacity: 1; } 20%, 60% { opacity: 0; } }

/* JACKPOT (10 monedas): temblor, lluvia de monedas y la nave nodriza (el logo de Utensio) cruzando el cielo */
.km-flash.jack { color: var(--km-yel); }
.km-flash.jack .px:not(:first-child) { color: #fff; }
.km-flash.jack .px:last-child { color: var(--km-green); }
.km.km-shake[data-s="retro"] { animation: km-shake .5s steps(8, end); }   /* en la capa de fuera: la de dentro ya tiene su animación de encendido */
.toast.toast-konami {
  border-radius: 0;
  background: #05061a;
  color: #ffe14d;
  box-shadow: 0 -3px 0 #ff4fd8, 0 3px 0 #ff4fd8, -3px 0 0 #ff4fd8, 3px 0 0 #ff4fd8,
    0 -6px 0 #29e6ff, 0 6px 0 #29e6ff, -6px 0 0 #29e6ff, 6px 0 0 #29e6ff;
  font-family: var(--mono);
  font-weight: 600;
  text-shadow: 0 0 6px rgba(255, 225, 77, .4);
  -webkit-font-smoothing: none;
  animation: toastIn .22s steps(4, end);
}
@keyframes km-shake { 0%, 100% { transform: none; } 20% { transform: translate(-5px, 2px); } 40% { transform: translate(4px, -3px); } 60% { transform: translate(-3px, -2px); } 80% { transform: translate(3px, 2px); } }
.km-retro > .km-rain { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.km-coinfx { position: absolute; left: -12px; top: 0; width: clamp(14px, 2.4vw, 22px); }
.km-coinfx svg { display: block; width: 100%; height: auto; }
.km-mother { --text: #ededE9; position: absolute; left: 0; top: clamp(70px, 12vh, 110px); filter: drop-shadow(0 0 12px rgba(255, 225, 77, .55)); }
.km-mother svg { display: block; width: clamp(44px, 7vw, 64px); height: auto; }
.km-free > .px { animation: km-blink .8s steps(1, end) infinite; color: var(--km-green); }

/* Pie: monedas y música */
.km-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; font-size: clamp(9px, 1.25vw, 12px); }
.km-coin { display: grid; gap: 6px; justify-items: start; min-height: 40px; padding: 4px 6px; border: 0; background: none; color: #fff; cursor: pointer; }
.km-coin > .px:first-child { animation: km-blink 1.6s steps(1, end) infinite; }
.km-coin:hover > .px:first-child { color: var(--km-yel); }
.km-coin:focus-visible, .km-mute:focus-visible { outline: 2px dashed var(--km-cyan); outline-offset: 3px; }
.km-music { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: rgba(5, 6, 26, .7); box-shadow: 0 -3px 0 0 #2b2f6b, 0 3px 0 0 #2b2f6b, -3px 0 0 0 #2b2f6b, 3px 0 0 0 #2b2f6b; margin: 3px; }
.km-mute { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.km-mute:hover { background: rgba(255, 255, 255, .08); }
.km-spk { width: 24px; height: auto; }
.km-wait { position: absolute; right: 2px; bottom: 4px; width: 4px; height: 4px; background: var(--km-yel); animation: km-blink .5s steps(1, end) infinite; }
.km-volv { min-width: 4.2em; color: #fff; font-size: 11px; }
.km-volv .px-t { height: 1em; }
/* Volumen: barra de bloques; la parte llena va en verde (o en gris si está silenciada) */
.km-vol {
  --v: 30%; --on: var(--km-green);
  -webkit-appearance: none; appearance: none; width: clamp(96px, 16vw, 160px); height: 28px; margin: 0; background: transparent; cursor: pointer;
}
.km-vol.muted { --on: #555a8a; }
.km-vol::-webkit-slider-runnable-track {
  height: 12px;
  background: linear-gradient(to right, var(--on) var(--v), transparent var(--v)), repeating-linear-gradient(to right, #2b2f6b 0 8px, transparent 8px 10px);
  -webkit-mask: repeating-linear-gradient(to right, #000 0 8px, transparent 8px 10px); mask: repeating-linear-gradient(to right, #000 0 8px, transparent 8px 10px);
}
.km-vol::-moz-range-track { height: 12px; background: repeating-linear-gradient(to right, #2b2f6b 0 8px, transparent 8px 10px); }
.km-vol::-moz-range-progress { height: 12px; background: repeating-linear-gradient(to right, var(--on) 0 8px, transparent 8px 10px); }
.km-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 20px; margin-top: -4px; border: 0; border-radius: 0; background: #fff; box-shadow: 2px 2px 0 #000; }
.km-vol::-moz-range-thumb { width: 14px; height: 20px; border: 0; border-radius: 0; background: #fff; box-shadow: 2px 2px 0 #000; }
.km-vol:focus-visible { outline: 2px dashed var(--km-cyan); outline-offset: 4px; }

/* Salida: se apaga como una tele vieja. Entra la estática, la imagen se aplasta en una línea brillante, la línea se
   encoge hasta un punto que se apaga… y el fondo negro se funde para dejar ver el inicio tal como estaba */
.km[data-s="exiting"], .km[data-s="gone"] { pointer-events: none; }
.km.tv-off { background: #000; }
.km.tv-off > .km-exit, .km.tv-off > .km-noise { display: none; }
.km.tv-off > .km-term, .km.tv-off > .km-retro, .km.tv-off > .km-static { animation: km-tvoff .85s cubic-bezier(.55, 0, .85, .35) forwards; transform-origin: 50% 50%; }
.km-static { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; image-rendering: pixelated; mix-blend-mode: screen; pointer-events: none; }
.km.tv-off > .km-static { animation: km-tvoff .85s cubic-bezier(.55, 0, .85, .35) forwards, km-snow .85s linear forwards; }
@keyframes km-tvoff {
  0% { transform: none; filter: none; }
  22% { transform: scale(1, 1); filter: brightness(1.4) contrast(1.2); }
  46% { transform: scale(1, .005); filter: brightness(4); }
  64% { transform: scale(.006, .005); filter: brightness(7); }
  100% { transform: scale(0, 0); filter: brightness(7); }
}
@keyframes km-snow { 0% { opacity: 0; } 12% { opacity: .75; } 40% { opacity: .9; } 100% { opacity: 1; } }
/* El punto blanco del centro que queda brillando un instante */
.km.tv-off::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 6; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 14px 5px rgba(205, 230, 255, .85); opacity: 0;
  animation: km-dot .85s linear forwards;
}
@keyframes km-dot { 0%, 58% { opacity: 0; transform: scale(1.6); } 66% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(.15); } }
.km[data-s="gone"] { animation: km-out .22s ease-in forwards; }
@keyframes km-out { to { opacity: 0; } }
@keyframes km-in { to { opacity: 1; } }
@keyframes km-appear { from { opacity: 0; } to { opacity: 1; } }

/* ───────── Pantallas pequeñas ───────── */
@media (max-width: 640px) {
  .km-tbar { padding-right: 0; padding-top: 52px; }
  .km-tbar-m { display: none; }
  .km-exit { min-height: 40px; }
  .km-exit.px-mode { font-size: 10px; padding: 0 10px; }
  .km-hud { padding: 58px 0 0; justify-content: space-between; }
  .km-foot { justify-content: center; }
  .km-music { width: 100%; justify-content: center; }
  .km-vol { flex: 1; max-width: 220px; }
  .km-start { min-height: 52px; }
}
@media (max-height: 560px) and (min-width: 641px) {
  .km-stage { gap: 6px; }
  .km-ship { width: 52px; }
  .km-inv { width: 28px; }
}

/* ───────── Menos movimiento: sin glitch, sin barridos ni desfiles; todo aparece sin más ───────── */
@media (prefers-reduced-motion: reduce) {
  html.km-glitch body > :not(.km) { animation: none; }
  .km *, .km *::before, .km *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  .km[data-s="transition"] { animation-duration: .01s; }
}
:root[data-motion="reduce"] .km *, :root[data-motion="reduce"] .km *::before, :root[data-motion="reduce"] .km *::after, :root[data-motion="reduce"] .km[data-s] {
  animation-duration: .01s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
}