/* Lanzadera de juegos: menú de consola a pantalla completa.
   Todo dibujado con CSS y SVG en línea; ni una imagen de terceros. */

:root{
  --ink:#07080f; --paper:#eef0f8; --dim:#9aa0b8;
  --g:#6e62f5;                       /* color del juego señalado, lo pone cada ficha */
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box}
html,body{height:100%}
body.kp-body{
  margin:0;overflow:hidden;background:var(--ink);color:var(--paper);
  font:400 16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;
  transition:background .5s ease;
}

/* Fondo: tres manchas desenfocadas que se tiñen del color del juego señalado. */
.kp-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.kp-bg i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.5;
  background:var(--bg,#6e62f5);transition:background .5s ease}
.kp-bg i:nth-child(1){width:60vmax;height:60vmax;left:-18vmax;top:-22vmax;animation:kpf 26s ease-in-out infinite}
.kp-bg i:nth-child(2){width:46vmax;height:46vmax;right:-14vmax;bottom:-18vmax;opacity:.38;animation:kpf 34s ease-in-out infinite reverse}
.kp-bg i:nth-child(3){width:30vmax;height:30vmax;left:40%;top:55%;opacity:.22;animation:kpf 42s ease-in-out infinite}
@keyframes kpf{0%,100%{transform:translate(0,0)}50%{transform:translate(4vmax,-3vmax)}}
.kp-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 0%,#0000 35%,#07080fcc 100%)}

.kp-top{position:fixed;z-index:3;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;
  padding:calc(var(--st) + 16px) calc(var(--sr) + 22px) 10px calc(var(--sl) + 22px);
  font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.kp-brand{font-weight:700;color:var(--paper)}

.kp-main{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,3vh,34px)}
.kp-h1{margin:0;padding:0 calc(var(--sl) + 22px);font-size:clamp(1.3rem,3.4vw,2.1rem);font-weight:800;letter-spacing:-.02em}
.kp-empty{padding:0 22px;color:var(--dim)}

/* Carril horizontal de fichas, como una consola. */
.kp-rail{list-style:none;margin:0;display:flex;align-items:center;gap:clamp(12px,2.2vw,26px);
  padding:28px calc(var(--sr) + 22px) 28px calc(var(--sl) + 22px);
  overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;
  justify-content:safe center}
.kp-rail::-webkit-scrollbar{display:none}

.kp-cell{flex:0 0 auto;transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.kp-card{display:block;position:relative;width:clamp(160px,22vw,250px);text-decoration:none;color:inherit;
  border-radius:20px;background:#12141fcc;border:2px solid #ffffff14;overflow:hidden;
  box-shadow:0 14px 34px #0009;transition:border-color .22s,box-shadow .22s,transform .22s}
.kp-cover{display:block;aspect-ratio:4/5;overflow:hidden;background:#0d0f18}
.kp-art{display:block;width:100%;height:100%}
.kp-name{display:block;padding:12px 14px 2px;font-weight:800;font-size:clamp(1rem,1.5vw,1.2rem);letter-spacing:-.01em}
.kp-sub{display:block;padding:3px 14px 0;color:var(--dim);font-size:.82rem;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .22s,opacity .22s}
/* El boton va en el flujo, no encima del texto: si flota, tapa el subtitulo. */
.kp-go{display:block;width:fit-content;margin:0 14px;padding:0 14px;border-radius:999px;
  background:var(--g);color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.02em;line-height:0;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .22s,opacity .22s,padding .22s,line-height .22s,margin .22s}

/* La señalada crece, se ilumina y enseña el texto y el botón. */
.kp-cell.on{transform:translateY(-10px) scale(1.07)}
.kp-cell.on .kp-card{border-color:var(--g);box-shadow:0 20px 48px #000b,0 0 0 4px color-mix(in srgb,var(--g) 38%,transparent)}
.kp-cell.on .kp-sub{max-height:4.4em;opacity:1}
.kp-cell.on .kp-go{max-height:2.6em;opacity:1;padding:7px 14px;line-height:1.2;margin:10px 14px 14px}
.kp-card:focus-visible{outline:3px solid #fff;outline-offset:3px}

.kp-hint{position:fixed;z-index:3;left:0;right:0;bottom:0;display:flex;justify-content:center;flex-wrap:wrap;gap:18px;
  padding:10px calc(var(--sr) + 22px) calc(var(--sb) + 16px) calc(var(--sl) + 22px);
  color:var(--dim);font-size:.82rem}
.kp-hint b{display:inline-block;min-width:1.6em;padding:1px 6px;margin-right:4px;text-align:center;
  border:1px solid #ffffff2e;border-radius:6px;color:var(--paper);font-weight:700}
.kp-only-pad{display:none}
body.kp-pad .kp-only-pad{display:inline}

/* Móvil en vertical: las fichas se apilan y se ven de una en una. */
@media (max-width:700px) and (orientation:portrait){
  .kp-main{gap:10px}
  .kp-rail{flex-direction:column;align-items:stretch;overflow-x:hidden;overflow-y:auto;padding-top:14px;padding-bottom:14px}
  .kp-card{width:auto;display:grid;grid-template-columns:104px 1fr;align-items:center}
  .kp-cover{aspect-ratio:1/1;height:100%;grid-row:span 3}
  .kp-name{padding:12px 14px 0}
  .kp-cell.on{transform:scale(1.02)}
  .kp-cell.on .kp-sub{max-height:4.4em}
  .kp-go{max-height:2.6em;opacity:1;padding:7px 14px;line-height:1.2;margin:8px 14px 12px}
  .kp-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}