/* blopsi.com: lo común a todas las páginas. La UI es la del juego: el cielo de día de fondo y la
   gelatina de Blopsi (style.css, "La gelatina") en placas, botones y paneles. app.js les pone el
   borde que se mueve con squish() de /play/src/ui/squish.js; sin JS se quedan como placas quietas. */
:root {
  /* La gelatina del juego (style.css y src/ui/acento.js, forma neutra) */
  --jelly: #F4F1F8; --panel: color-mix(in srgb, #F4F1F8 78%, transparent);
  --rim: #DCD4E8; --rim-2: #C2B8D4; --text: #2B2A33; --soft: #7F7591; --ink-ui: #8C7FB0; --glow: transparent;
  --jelly-2: color-mix(in srgb, var(--rim) 45%, var(--jelly)); --ink-strong: color-mix(in srgb, var(--ink-ui) 60%, #1d1630);
  --tint: #C9634C; --tint-2: #F2B84B; --night: #2E3A4A; --mint: #4E8C6B; --neon: #7FB8C4;
  /* Los nombres de siempre de la web, sobre la gelatina */
  --ink: var(--text); --card: var(--jelly); --lav: var(--jelly-2); --lav-2: var(--rim); --violeta: var(--ink-strong);
  --gold: var(--tint-2); --gold-2: #C98E22; --pink: #E77FA0;
  --font: Nunito, "Segoe UI", system-ui, sans-serif;
  --r: 26px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--text); background: #eee3ff; overflow-x: hidden; -webkit-font-smoothing: antialiased; position: relative; }
/* El cielo del juego (#sky de día) con nubes, quieto detrás de todo */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70px 26px at 8% 14%, #fff, transparent 70%), radial-gradient(110px 34px at 13% 17%, #fffd, transparent 70%),
    radial-gradient(80px 28px at 86% 10%, #fff, transparent 70%), radial-gradient(130px 38px at 92% 14%, #fffc, transparent 70%),
    radial-gradient(90px 30px at 72% 46%, #fff9, transparent 70%), radial-gradient(80px 26px at 22% 58%, #fff9, transparent 70%),
    radial-gradient(120px 36px at 60% 84%, #fff8, transparent 70%),
    linear-gradient(180deg, #86bfff 0%, #b9d3ff 38%, #e4dcff 72%, #eee3ff 100%); }
a { color: inherit; }
button { font-family: inherit; }
[hidden] { display: none !important; }

/* ───── La gelatina: squish() dibuja la placa en SVG y apaga el fondo, el borde y la sombra del CSS ───── */
.sq { isolation: isolate; background: none !important; border-color: transparent !important; box-shadow: none !important; }
.sq-back, .sq-front { position: absolute; overflow: visible; pointer-events: none; }
.sq-back { z-index: -1; filter: drop-shadow(0 8px 12px rgba(30, 24, 40, 0.14)); }
.sq-front { z-index: 2; }
@keyframes gelatina { 0% { opacity: 0; transform: scale(.7, .5); } 55% { opacity: 1; transform: scale(1.03, .97); } 80% { transform: scale(.99, 1.01); } }
@keyframes fadeIn { from { opacity: 0; } }

/* Una placa de gelatina (los paneles del juego) */
.tarjeta {
  --sq-fill: var(--panel); --sq-rim: var(--rim); --sq-shadow: var(--rim-2); --sq-drop: 6; --sq-r: 36px;
  position: relative; background: var(--sq-fill); border: 4px solid var(--sq-rim); border-radius: 36px; padding: 24px;
  box-shadow: 0 6px 0 var(--sq-shadow), 0 24px 50px rgba(20, 16, 40, .14);
  backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25);
}
.tarjeta > .sq-back { filter: drop-shadow(0 0 22px var(--glow)) drop-shadow(0 22px 40px rgba(20, 16, 40, .18)); }
.tarjeta.lav { --sq-fill: var(--jelly-2); --sq-rim: var(--rim); }
/* Lo de dentro de una placa: tarjetas blancas como las del juego (.offer, .sec) */
.sec { background: #fff; border-radius: 22px; box-shadow: 0 3px 0 var(--rim), 0 6px 18px rgba(80, 50, 140, .06); }

/* Barra de arriba: el título del juego en su placa y las pestañas del menú */
.barra { position: relative; z-index: 5; max-width: 1120px; margin: 0 auto; padding: 16px 16px 0; display: flex; align-items: center; gap: 12px; color: var(--text); }
.barra .marca {
  --sq-fill: var(--panel); --sq-rim: var(--rim); --sq-shadow: var(--rim-2); --sq-r: 20px;
  height: 56px; padding: 0 22px 0 16px; border-radius: 20px; border: 3px solid var(--sq-rim); background: var(--sq-fill); box-shadow: 0 4px 0 var(--sq-shadow);
  display: inline-flex; align-items: center; gap: 10px; flex: none; margin-right: auto;
  font: 900 26px var(--font); letter-spacing: .01em; color: var(--night); text-decoration: none;
}
.barra .marca::before { content: ""; width: 26px; height: 26px; flex: none; background: var(--tint-2);
  clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 77%, 20% 100%, 30% 60%, 0 38%, 38% 35%); }
.barra nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.barra nav a, .barra nav button {
  --sq-fill: var(--jelly-2); --sq-rim: var(--rim); --sq-shadow: var(--rim-2); --sq-drop: 3;
  height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 18px; border-radius: 22px;
  border: 3px solid var(--sq-rim); background: var(--sq-fill); box-shadow: 0 3px 0 var(--sq-shadow);
  color: var(--soft); font: 900 15px var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.barra nav a:hover, .barra nav button:hover { color: var(--text); transform: translateY(-2px); }
.barra nav a.on { --sq-fill: #fff; color: var(--text); }
.barra .gemas { --sq-fill: var(--panel); color: var(--text); font-variant-numeric: tabular-nums; padding-left: 8px; }
.barra .entrar { --sq-fill: var(--tint); --sq-rim: #A94D39; --sq-shadow: #8C3E2E; color: #fff !important; }
.barra .instalar svg { width: 16px; height: 16px; }

/* Gema y chispa: los iconos 3D del juego (src/monedas_3d.js) */
.gema { display: inline-block; width: 20px; height: 20px; flex: none; background: url(/img/gema.png) center / contain no-repeat; }
.gema.g { width: 28px; height: 28px; }
.chispa { width: 18px; height: 18px; background: url(/img/chispa.png) center / contain no-repeat; display: inline-block; vertical-align: -3px; }

/* Botones: los del juego (.buy oscuro, el de la tienda en coral) */
.boton {
  --sq-fill: var(--ink-strong); --sq-rim: color-mix(in srgb, var(--ink-strong) 80%, #000); --sq-shadow: color-mix(in srgb, var(--ink-strong) 55%, #000); --sq-drop: 4;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none;
  background: var(--sq-fill); border: 3px solid var(--sq-rim); box-shadow: 0 4px 0 var(--sq-shadow);
  color: #fff; font: 900 17px var(--font); padding: 11px 24px; border-radius: 999px; transition: transform .15s;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(2px); }
.boton:disabled { --sq-fill: #E6E0F2; --sq-rim: #DCD4E8; --sq-shadow: #CFC6E2; color: #A89CC4; cursor: default; transform: none; }
.boton.suave { --sq-fill: #fff; --sq-rim: var(--rim); --sq-shadow: var(--rim-2); color: var(--text); }
.boton.coral, .boton.peligro { --sq-fill: var(--tint); --sq-rim: #A94D39; --sq-shadow: #8C3E2E; color: #fff; }

/* El botón de jugar: grande, dorado y blandito */
.jugar {
  --sq-fill: var(--tint-2); --sq-rim: #D99A2B; --sq-shadow: #B97A1A; --sq-drop: 8;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; text-decoration: none; cursor: pointer;
  background: var(--sq-fill); border: 4px solid var(--sq-rim); box-shadow: 0 8px 0 var(--sq-shadow);
  color: var(--night); font: 900 clamp(28px, 4.4vw, 44px) var(--font); letter-spacing: .01em;
  padding: .42em 1.5em .46em; border-radius: 999px;
  transition: transform .18s cubic-bezier(.2, 1.6, .4, 1); animation: latido 2.6s ease-in-out infinite; }
.jugar > .sq-back { filter: drop-shadow(0 18px 30px rgba(120, 70, 10, .25)); }
.jugar svg { width: .8em; height: .8em; }
.jugar:hover { transform: translateY(-3px) scale(1.03); animation-play-state: paused; }
.jugar:active { transform: translateY(4px) scale(.98); }
@keyframes latido { 0%, 100% { scale: 1 1; } 50% { scale: 1.035 .97; } }

/* Texto */
.zona { background: none; }
.caja { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
h2.titulo { font: 900 24px var(--font); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; color: var(--text); }
h2.titulo small { font: 900 14px var(--font); color: var(--soft); margin-left: auto; background: var(--jelly-2); border-radius: 999px; padding: 4px 12px; }
.nota { font: 700 14px/1.45 var(--font); color: var(--soft); }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 900 12px var(--font); padding: 4px 10px; border-radius: 999px; background: var(--jelly-2); color: var(--soft); white-space: nowrap; }
.chip.ok { background: #DDF3E3; color: #2E7A4A; }
.chip.obras { background: #FFE9A8; color: #A56A00; }

/* La cabecera de cada página: el título y lo que va a su lado, sobre el cielo */
.cielo { position: relative; color: var(--text); }
.cabeza { max-width: 1120px; margin: 0 auto; padding: 30px 16px 26px; position: relative; }
.cabeza h1 { font: 900 clamp(40px, 7vw, 64px) var(--font); margin: 0; line-height: 1; letter-spacing: -.02em; color: #fff;
  text-shadow: 0 4px 0 var(--rim-2), 0 12px 30px rgba(40, 30, 90, .18); }
/* Saltos a cada sección: las pestañas del menú del juego */
.saltos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.saltos a {
  --sq-fill: var(--jelly-2); --sq-rim: var(--rim); --sq-shadow: var(--rim-2); --sq-drop: 3;
  text-decoration: none; color: var(--soft); font: 900 15px var(--font); height: 42px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 21px;
  background: var(--sq-fill); border: 3px solid var(--sq-rim); box-shadow: 0 3px 0 var(--sq-shadow); transition: color .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.saltos a:hover { color: var(--text); transform: translateY(-2px); --sq-fill: #fff; }

/* Selector partido (idioma, formas): el .seg del juego */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--jelly-2); border-radius: 999px; padding: 4px; }
.seg button { border: 0; background: none; padding: 9px 18px; border-radius: 999px; font: 900 15px var(--font); color: var(--soft); cursor: pointer; }
.seg button.on { background: #fff; color: var(--text); box-shadow: 0 2px 8px rgba(80, 50, 140, .15); }

/* Avisos */
.aviso { max-width: 1120px; margin: 16px auto 0; padding: 14px 18px; border-radius: 20px; font: 800 15px var(--font); background: #DDF3E3; color: #2E7A4A; box-shadow: 0 3px 0 #B5DEC1; }
.aviso.no { background: #FFE3E0; color: #A0524A; box-shadow: 0 3px 0 #F0C2BC; }

/* Ventana (confirmar una compra...): un panel de gelatina que sale con su rebote */
.velo { position: fixed; inset: 0; z-index: 50; background: rgba(20, 12, 50, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadeIn .2s; }
.ventana {
  --sq-fill: var(--jelly); --sq-rim: var(--rim); --sq-shadow: var(--rim-2); --sq-drop: 6; --sq-r: 40px;
  position: relative; width: min(420px, 100%); background: var(--sq-fill); border: 4px solid var(--sq-rim); border-radius: 40px; padding: 26px 24px 22px; text-align: center;
  box-shadow: 0 6px 0 var(--sq-shadow), 0 30px 70px rgba(20, 16, 40, .35); animation: gelatina .5s cubic-bezier(.3, 1.45, .5, 1); }
.ventana > .sq-back { filter: drop-shadow(0 26px 50px rgba(20, 16, 40, .35)); }
.ventana h3 { font: 900 24px var(--font); margin: 6px 0 4px; }
.ventana .precio { font: 900 30px var(--font); margin: 6px 0 14px; }
.ventana label { display: flex; gap: 10px; text-align: left; font: 700 14px/1.4 var(--font); color: var(--soft); margin: 0 0 16px; }
.ventana label input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--ink-strong); }
.ventana .botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* La x de cerrar: la del menú del juego */
.cerrar-x { position: absolute; z-index: 3; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
  background: var(--jelly-2); color: var(--soft); font: 900 24px/1 var(--font); cursor: pointer; }
.cerrar-x:hover { color: var(--text); }

/* Instalar como app */
.instalar-ios img { border-radius: 18px; box-shadow: 0 4px 0 var(--rim); }
.instalar-ios p { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font: 800 17px var(--font); margin: 14px 0 18px; }
.instalar-ios svg { width: 22px; height: 22px; color: #2f7bf6; }

/* Campos de texto */
.opinion textarea, input.campo { display: block; width: 100%; resize: vertical; border: 3px solid var(--rim); border-radius: 18px;
  padding: 10px 14px; font: 700 15px/1.4 var(--font); color: var(--text); background: #fff; outline: none; transition: border-color .15s; }
.opinion textarea:focus, input.campo:focus { border-color: var(--ink-ui); }
.opinion { display: grid; gap: 10px; text-align: left; }
.opinion textarea { min-height: 84px; }
.opinion .boton { justify-self: end; }
.opinion .nota { margin: 0; }

footer.pie { text-align: center; padding: 34px 16px 40px; font: 800 14px var(--font); color: var(--soft); }
footer.pie a { margin: 0 8px; color: var(--ink-strong); }

@media (max-width: 640px) {
  .barra { flex-wrap: wrap; padding-top: 12px; gap: 10px; }
  .barra .marca { height: 48px; font-size: 22px; padding: 0 16px 0 12px; }
  .barra .marca::before { width: 22px; height: 22px; }
  /* Las pestañas en una fila que se desliza, a mano del pulgar */
  .barra nav { order: 2; width: calc(100% + 32px); margin: 0 -16px; padding: 2px 16px 10px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .barra nav::-webkit-scrollbar { display: none; }
  .barra nav a, .barra nav button { height: 40px; padding: 0 14px; font-size: 14px; flex: none; }
  /* Entrar (o tus gemas) siempre a la vista, junto al título */
  .barra nav .entrar, .barra nav .gemas { position: absolute !important; top: 16px; right: 16px; height: 42px; }
  .tarjeta { padding: 20px 16px; border-radius: 30px; --sq-r: 30px; }
}
@media (prefers-reduced-motion: reduce) { .jugar { animation: none; } .ventana, .velo { animation: none; } }