:root{
  --bg:#0b0a10;
  --bg2:#171522;
  --card:#1c1929;
  --line:#2e2a40;
  --txt:#efeaf6;
  --dim:#9a91b0;
  --acc:#a97bff;
  --ok:#4fc27a;
  --mal:#e0574f;
  --radio:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  overscroll-behavior:none;
  position:relative;
  overflow-x:hidden;
}
/* dos manchas de color que respiran detrás de todo */
body::before,body::after{
  content:"";position:fixed;z-index:-1;border-radius:50%;
  filter:blur(90px);opacity:.5;pointer-events:none;
}
body::before{
  width:70vw;height:70vw;max-width:460px;max-height:460px;
  top:-16vh;left:-18vw;background:#6d3df0;
  animation:flotar 15s ease-in-out infinite;
}
body::after{
  width:60vw;height:60vw;max-width:400px;max-height:400px;
  top:10vh;right:-24vw;background:#f0357f;opacity:.2;
  animation:flotar 19s ease-in-out infinite reverse;
}
@keyframes flotar{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(6%,7%) scale(1.12)}
}
@media (prefers-reduced-motion:reduce){
  body::before,body::after{animation:none}
}
.pantalla{min-height:100dvh;max-width:520px;margin:0 auto;padding:18px 16px 34px}

/* ---------- portada ---------- */
.portada{text-align:center;padding:40px 0 26px}
.portada .kicker{
  display:inline-block;margin:0 0 14px;padding:5px 12px;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(20,18,30,.55);backdrop-filter:blur(6px);
  font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);
}
.portada h1{
  margin:0;font-size:clamp(44px,15vw,62px);font-weight:800;
  letter-spacing:-2.5px;line-height:.95;
}
.portada h1 span{
  background:linear-gradient(103deg,#c9a5ff 0%,#a97bff 38%,#ff5f8f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(169,123,255,.45));
}
.portada p{margin:12px 0 0;color:var(--dim);font-size:14px}

.grilla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ficha{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,0) 55%), var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:15px 14px 14px;
  text-align:left;color:var(--txt);font:inherit;cursor:pointer;
  min-height:132px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:3px;
  transition:transform .16s ease, border-color .16s ease;
}
/* filo de luz arriba, del color del juego */
.ficha::before{
  content:"";position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,var(--c,var(--acc)),transparent);
  opacity:.85;
}
/* halo del color, apenas */
.ficha::after{
  content:"";position:absolute;z-index:-1;inset:auto -30% -60% auto;
  width:150px;height:150px;border-radius:50%;
  background:var(--c,var(--acc));opacity:.13;filter:blur(34px);
}
.ficha .mini{
  position:absolute;right:-14px;bottom:-16px;width:74px;height:74px;
  color:var(--c,var(--acc));opacity:.16;pointer-events:none;
}
.ficha b{font-size:17.5px;font-weight:700;line-height:1.15;position:relative}
.ficha small{color:var(--dim);font-size:12px;line-height:1.35;position:relative;max-width:74%}
.ficha .tag{
  position:absolute;top:14px;left:15px;
  font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--c,var(--acc));font-weight:700;
}
.ficha .hoy{
  position:absolute;top:13px;right:14px;
  display:flex;align-items:center;gap:5px;
  font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);
}
.ficha .hoy i{
  width:6px;height:6px;border-radius:50%;background:var(--c,var(--acc));
  box-shadow:0 0 0 0 var(--c,var(--acc));animation:latir 2.4s ease-out infinite;
}
@keyframes latir{
  0%{box-shadow:0 0 0 0 currentColor;opacity:1}
  70%{box-shadow:0 0 0 7px transparent;opacity:.75}
  100%{box-shadow:0 0 0 0 transparent;opacity:1}
}
.ficha:hover{border-color:var(--c,var(--acc))}
.ficha:active{transform:scale(.975)}

.pie{margin-top:26px;text-align:center;color:#5b5471;font-size:11.5px;line-height:1.6}

/* ---------- barra del juego ---------- */
.barra{
  display:flex;align-items:center;gap:10px;
  padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.barra strong{flex:1;font-size:17px}
.barra #volver{
  width:38px;height:38px;flex:none;font-size:26px;line-height:1;
  border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--txt);
  cursor:pointer;padding:0 0 3px;
}
#acciones{display:flex;gap:7px}
#acciones button{
  border:1px solid var(--line);background:var(--bg2);color:var(--txt);
  border-radius:11px;padding:8px 12px;font:600 13px inherit;cursor:pointer;
}
#acciones button.on{background:var(--acc);color:#1a1226;border-color:var(--acc)}

/* ---------- comunes de juegos ---------- */
#lienzo{padding-top:12px}
.marcador{
  display:flex;justify-content:center;gap:22px;margin-bottom:14px;
  font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;text-align:center;
}
.marcador b{display:block;font-size:22px;color:var(--txt);letter-spacing:0;margin-bottom:1px}
.aviso{text-align:center;color:var(--dim);font-size:13.5px;line-height:1.5;margin:14px 0 0}
.btn{
  display:block;width:100%;margin-top:14px;padding:15px;border-radius:14px;
  border:1px solid var(--acc);background:var(--acc);color:#1a1226;
  font:700 16px inherit;cursor:pointer;
}
.btn.fantasma{background:transparent;color:var(--txt);border-color:var(--line)}
.tablero{margin:0 auto;touch-action:manipulation;user-select:none}

.fin{
  position:fixed;inset:0;background:rgba(10,9,15,.86);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:22px;z-index:20;
}
.fin > div{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:26px 22px;text-align:center;max-width:340px;width:100%;
}
.fin h2{margin:0 0 6px;font-size:24px}
.fin p{margin:0;color:var(--dim);font-size:14px;line-height:1.5}

iframe.externo{
  width:100%;height:calc(100dvh - 90px);border:0;border-radius:14px;background:var(--bg2);
}