/* ============================================================
   COMBO STUDIO — Magivercol
   Todo prefijado .cs-game- / [data-cs-*]. Sin estilos globales.
   ============================================================ */

.cs-game{
  /* Sistema de la casa */
  --mg-black:#0A0A0B; --mg-ink:#111113; --mg-ink-2:#6E6E73; --mg-ink-3:#9A9AA0;
  --mg-iris:#5B34B8; --mg-iris-light:#A78BFA;
  --mg-blue:#0071E3; --mg-green:#25D366; --mg-red:#E01F3D;

  --mg-r-badge:8px; --mg-r-input:12px; --mg-r-v4:13px; --mg-r-card:20px; --mg-r-block:26px;
  --mg-s1:4px; --mg-s2:8px; --mg-s3:12px; --mg-s4:20px; --mg-s5:32px; --mg-s6:46px; --mg-s7:70px;
  --mg-ease-card:cubic-bezier(.25,.8,.3,1);
  --mg-ease-pill:cubic-bezier(.32,1.5,.42,1);

  /* Derivados oscuros */
  --cs-surface:#0E0E11;
  --cs-surface-2:#15151A;
  --cs-line:rgba(255,255,255,.10);
  --cs-line-strong:rgba(255,255,255,.18);
  --cs-text:#F4F4F6;
  --cs-text-2:#B6B7C0;     /* AA sobre #0A0A0B */
  --cs-text-3:var(--mg-ink-3);

  /* Rareza (se sobreescribe por tier) */
  --r:#8A90AC; --rt:#BFC4D6; --r-soft:rgba(138,144,172,.16);

  --cs-px:0; --cs-py:0;      /* parallax */
  --cs-kivo:clamp(150px,44vw,240px);

  position:relative;
  isolation:isolate;
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  overflow-x:clip;
  min-height:100svh;
  background:var(--mg-black);
  color:var(--cs-text);
  font-family:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
.cs-game *,.cs-game *::before,.cs-game *::after{box-sizing:border-box}
:where(.cs-game) :where(button){font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer}
:where(.cs-game) :where(a){color:var(--rt);text-decoration:none}
:where(.cs-game) :where(a):hover{color:var(--cs-text)}
.cs-game :focus-visible{outline:2px solid var(--mg-iris-light);outline-offset:3px;border-radius:6px}

/* Tiers de rareza — derivados de la familia iris/azul/rosa */

/* ---------- Fondos: aura de marca + tinte de rareza + scanlines ---------- */
.cs-game-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cs-game-bg__aura{
  position:absolute;inset:-18%;
  background:
    radial-gradient(55% 105% at 22% 50%,rgba(120,90,240,.32),transparent 70%),
    radial-gradient(50% 100% at 55% 55%,rgba(30,170,240,.30),transparent 70%),
    radial-gradient(55% 105% at 86% 52%,rgba(240,90,180,.30),transparent 70%);
  filter:blur(18px) saturate(115%);
  opacity:.42;
  transform:translate3d(calc(var(--cs-px)*-14px),calc(var(--cs-py)*-10px),0);
  transition:opacity .9s var(--mg-ease-card);
  animation:cs-game-breathe 11s ease-in-out infinite;
}
.cs-game-bg__rarity{
  position:absolute;left:50%;top:44%;width:min(150%,1400px);aspect-ratio:1;
  transform:translate3d(calc(-50% + var(--cs-px)*22px),calc(-50% + var(--cs-py)*16px),0);
  background:radial-gradient(circle at 50% 50%,var(--r-soft),transparent 62%);
  transition:background .7s var(--mg-ease-card);
}
.cs-game-bg__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(120% 80% at 50% 40%,#000 20%,transparent 78%);
  transform:translate3d(calc(var(--cs-px)*10px),calc(var(--cs-py)*8px),0);
  opacity:.7;
}
.cs-game-bg__vign{position:absolute;inset:0;background:radial-gradient(115% 85% at 50% 38%,transparent 42%,rgba(10,10,11,.86) 100%)}
.cs-game-scan{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen;opacity:.55;
}
.cs-game-scan::after{
  content:"";position:absolute;left:0;right:0;height:26%;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.055),transparent);
  animation:cs-game-sweep 7.5s linear infinite;
}
@keyframes cs-game-sweep{from{transform:translateY(-40%)}to{transform:translateY(420%)}}
@keyframes cs-game-breathe{0%,100%{opacity:.36}50%{opacity:.52}}

.cs-game-particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cs-game-particles i{
  position:absolute;bottom:-8px;display:block;
  width:var(--s);height:var(--s);border-radius:50%;
  background:var(--r);opacity:0;
  filter:blur(.4px);
  box-shadow:0 0 10px var(--r);
  animation:cs-game-rise var(--dur) linear var(--del) infinite;
}
@keyframes cs-game-rise{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}
  12%{opacity:.85}
  70%{opacity:.5}
  100%{opacity:0;transform:translate3d(var(--dx),-108svh,0) scale(1)}
}

/* ---------- Escenas ---------- */
.cs-game-stagewrap{position:relative;z-index:4}
.cs-game-scene{
  display:none;
  position:relative;
  min-height:100svh;
  padding:var(--mg-s4) var(--mg-s4) 76px;  /* deja libre la esquina del botón de WhatsApp */
  flex-direction:column;
}
.cs-game-scene[data-cs-active]{display:flex;animation:cs-game-in .62s var(--mg-ease-card) both}
.cs-game-scene[data-cs-leaving]{display:flex;animation:cs-game-out .34s var(--mg-ease-card) both;pointer-events:none}
@keyframes cs-game-in{
  from{opacity:0;transform:scale(1.06) translate3d(0,14px,0);filter:blur(9px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes cs-game-out{
  from{opacity:1;transform:none;filter:none}
  to{opacity:0;transform:scale(.955) translate3d(0,-10px,0);filter:blur(7px)}
}

/* ---------- Tipografía ---------- */
.cs-game-kicker{
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cs-text-2);margin:0;
}
.cs-game-h1{
  margin:var(--mg-s3) 0 0;
  font-weight:800;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(38px,11vw,86px);
  max-width:14ch;
}
.cs-game-lede{
  margin:var(--mg-s4) 0 0;                 /* separación explícita: el titular no pisa el párrafo */
  font-size:clamp(15px,4vw,18px);line-height:1.55;font-weight:500;
  color:var(--cs-text-2);max-width:44ch;
}

/* ---------- Escena 1 · Entrada ---------- */
.cs-game-intro{
  justify-content:center;align-items:flex-start;gap:var(--mg-s5);
  --r:#6C3FD8;--rt:#B6A0FF;--r-soft:rgba(108,63,216,.22);   /* la entrada es iris de marca, no rareza */
}
.cs-game-intro__inner{
  display:grid;gap:var(--mg-s5);align-items:center;width:100%;max-width:1180px;margin:0 auto;
}
.cs-game-intro__art{display:flex;justify-content:center;order:-1}
.cs-game-intro__meta{
  display:flex;flex-wrap:wrap;gap:var(--mg-s2);margin:var(--mg-s5) 0 0;padding:0;list-style:none;
}
.cs-game-intro__meta li{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  color:var(--cs-text-2);border:1px solid var(--cs-line);border-radius:var(--mg-r-badge);
  padding:7px 11px;background:rgba(255,255,255,.02);
}

/* ---------- Botones ---------- */
.cs-game-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 var(--mg-s5);
  border-radius:999px;font-weight:700;font-size:15px;letter-spacing:.04em;
  background:var(--cs-text);color:var(--mg-black);
  transition:transform .35s var(--mg-ease-pill),box-shadow .35s var(--mg-ease-card),background .3s linear;
  box-shadow:0 0 0 0 var(--r-soft),0 18px 40px -22px rgba(0,0,0,.9);
}
.cs-game-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 8px var(--r-soft),0 22px 46px -22px rgba(0,0,0,.9)}
.cs-game-btn:active{transform:translateY(0) scale(.985)}
.cs-game-btn--primary{
  background:linear-gradient(100deg,var(--r),var(--mg-iris-light));color:#0A0A0B;
  animation:cs-game-pulse 3.4s ease-in-out infinite;
}
@keyframes cs-game-pulse{0%,100%{box-shadow:0 0 0 0 var(--r-soft)}50%{box-shadow:0 0 0 12px transparent,0 0 34px -4px var(--r)}}
.cs-game-btn--ghost{
  background:transparent;color:var(--cs-text);border:1px solid var(--cs-line-strong);
  animation:none;box-shadow:none;
}
.cs-game-btn--ghost:hover{border-color:var(--rt);box-shadow:none}
/* El botón de continuar llevaba el verde de WhatsApp y el texto salía
   azul, porque el color de enlace del tema le ganaba. Ahora toma el
   color de la rareza del combo y el texto se fija con !important para
   que ninguna regla del tema lo pise. (7 ago 2026, aviso de Miguel) */
.cs-game-btn--exit{
  background:linear-gradient(100deg,var(--r),var(--rt));
  color:#0A0A0B !important; text-decoration:none !important;
  width:100%;max-width:520px;min-height:56px;font-size:16px;animation:none;
  box-shadow:0 0 0 0 var(--r-soft),0 18px 40px -22px rgba(0,0,0,.9);
}
.cs-game-btn--exit:hover{box-shadow:0 0 0 8px var(--r-soft),0 22px 46px -22px rgba(0,0,0,.9)}
.cs-game-btn--exit:visited,.cs-game-btn--exit:active{color:#0A0A0B !important}
.cs-game-btn--block{width:100%;max-width:520px}

/* ---------- Escena 2 · Exploración ---------- */
.cs-game-explore{
  display:none;gap:var(--mg-s3);
  grid-template-columns:1fr;
  grid-template-areas:"hud" "stage" "ident" "loot" "actions" "rail";
  align-content:start;
  max-width:1520px;margin:0 auto;width:100%;
}
.cs-game-explore[data-cs-active]{display:grid}
.cs-game-explore[data-cs-leaving]{display:grid}
.cs-game-explore > *{min-width:0}   /* impide que el rail estire las columnas: cero scroll horizontal */

.cs-game-hud{grid-area:hud;display:flex;flex-direction:column;gap:var(--mg-s2)}
.cs-game-hud__row{display:flex;align-items:center;justify-content:space-between;gap:var(--mg-s3);min-width:0}
.cs-game-hud__count{
  font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--cs-text-2);white-space:nowrap;
}
.cs-game-hud__count b{color:var(--cs-text);font-weight:800}
.cs-game-rarity{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--mg-r-badge);
  border:1px solid color-mix(in oklab,var(--r) 55%,transparent);
  background:var(--r-soft);
  color:var(--rt);font-size:11px;font-weight:800;letter-spacing:.2em;
  transition:color .45s linear,background .45s linear,border-color .45s linear;
}
.cs-game-rarity::before{
  content:"";width:8px;height:8px;background:var(--r);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  box-shadow:0 0 10px var(--r);
  animation:cs-game-blip 2.6s ease-in-out infinite;
}
@keyframes cs-game-blip{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

.cs-game-power{display:flex;align-items:center;gap:var(--mg-s3);min-width:0}
.cs-game-power__label{font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--cs-text-3);white-space:nowrap}
.cs-game-power__track{
  position:relative;flex:1;height:8px;border-radius:999px;
  background:rgba(255,255,255,.07);overflow:hidden;
}
.cs-game-power__fill{
  position:absolute;inset:0 auto 0 0;width:16.6%;
  border-radius:999px;
  background:linear-gradient(90deg,color-mix(in oklab,var(--r) 60%,#0A0A0B),var(--r));
  box-shadow:0 0 16px -2px var(--r);
  transition:width .7s var(--mg-ease-card),background .5s linear;
}
.cs-game-power__fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:cs-game-shine 2.2s linear infinite;
}
@keyframes cs-game-shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.cs-game-power__pips{display:flex;gap:5px}
.cs-game-power__pips span{width:6px;height:6px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .4s linear,box-shadow .4s linear}
.cs-game-power__pips span[data-cs-on]{background:var(--r);box-shadow:0 0 8px var(--r)}

/* Escenario de la criatura */
.cs-game-stage{
  grid-area:stage;position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:calc(var(--cs-kivo) + 28px);
}
.cs-game-stage__floor{
  position:absolute;left:50%;bottom:6%;width:min(84%,420px);height:64px;
  transform:translateX(-50%) translate3d(calc(var(--cs-px)*10px),0,0);
  background:radial-gradient(ellipse at 50% 50%,var(--r-soft),transparent 70%);
  filter:blur(6px);
}
.cs-game-stage__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--cs-line-strong);
  background:rgba(14,14,17,.72);backdrop-filter:blur(8px);
  color:var(--cs-text);z-index:3;
  transition:border-color .3s linear,transform .3s var(--mg-ease-pill),background .3s linear;
}
.cs-game-stage__nav:hover{border-color:var(--rt);background:rgba(21,21,26,.9)}
.cs-game-stage__nav[data-cs-prev]{left:0}
.cs-game-stage__nav[data-cs-next]{right:0}
.cs-game-stage__nav:hover[data-cs-prev]{transform:translateY(-50%) translateX(-3px)}
.cs-game-stage__nav:hover[data-cs-next]{transform:translateY(-50%) translateX(3px)}
.cs-game-stage__nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cs-game-stage__nav[disabled]{opacity:.32;cursor:default}

/* Identidad del combo */
.cs-game-ident{grid-area:ident;display:flex;flex-direction:column;gap:var(--mg-s3)}
.cs-game-card{
  border-radius:var(--mg-r-card);
  border:1px solid var(--cs-line);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),var(--cs-surface);
  padding:var(--mg-s3);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .5s linear,box-shadow .5s var(--mg-ease-card);
}
.cs-game-card[data-cs-flip]{animation:cs-game-flip .6s var(--mg-ease-card) both}
@keyframes cs-game-flip{
  0%{transform:perspective(1200px) rotateY(-28deg) translateZ(-40px);opacity:.35;filter:blur(4px)}
  100%{transform:none;opacity:1;filter:none}
}
.cs-game-card--active{border-color:color-mix(in oklab,var(--r) 45%,transparent);box-shadow:0 0 0 1px var(--r-soft),0 40px 90px -50px rgba(0,0,0,.9)}
.cs-game-card__name{
  margin:0;font-size:clamp(27px,7.6vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.08;
}
.cs-game-card__specs{display:flex;gap:var(--mg-s2);margin:var(--mg-s3) 0 0;padding:0;list-style:none;flex-wrap:wrap}
.cs-game-card__specs li{
  flex:1 1 130px;
  border:1px solid var(--cs-line);border-radius:var(--mg-r-v4);
  padding:11px 13px;background:rgba(255,255,255,.02);
}
.cs-game-card__specs b{display:block;font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--cs-text)}
.cs-game-card__specs span{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-text-2);margin-top:3px}
.cs-game-card__specs li[data-cs-pick] b{color:var(--rt)}
.cs-game-price{
  display:flex;align-items:baseline;gap:8px;margin:var(--mg-s4) 0 0;
}
.cs-game-price__value{font-size:clamp(30px,8vw,40px);font-weight:800;letter-spacing:-.02em}
.cs-game-price__cur{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--cs-text-2)}
.cs-game-note{margin:var(--mg-s2) 0 0;font-size:13px;line-height:1.5;color:var(--cs-text-2)}

/* Botín */
.cs-game-loot{grid-area:loot;display:flex;flex-direction:column;gap:var(--mg-s3)}
.cs-game-loot__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--mg-s2);flex-wrap:nowrap}
.cs-game-loot__title{margin:0;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--cs-text-2);white-space:nowrap}
.cs-game-loot__total{font-size:12px;font-weight:700;color:var(--rt);letter-spacing:.08em;white-space:nowrap}
/* Botín — en móvil es una tira de inventario deslizable; en pantallas grandes, rejilla */
.cs-game-loot__grid{
  display:flex;gap:var(--mg-s2);overflow-x:auto;padding:0 0 4px;margin:0;list-style:none;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cs-game-loot__grid::-webkit-scrollbar{display:none}
.cs-game-tile{
  position:relative;flex:0 0 56px;width:56px;aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border-radius:var(--mg-r-v4);border:1px solid var(--cs-line);
  background:var(--cs-surface-2);
  opacity:0;transform:translateY(10px) scale(.9);
  animation:cs-game-pop .42s var(--mg-ease-pill) forwards;
  animation-delay:var(--d,0ms);
}
@keyframes cs-game-pop{to{opacity:1;transform:none}}
.cs-game-tile svg{width:22px;height:22px}
.cs-game-tile__tag{font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cs-text-3)}
.cs-game-tile--pick{
  border-color:color-mix(in oklab,var(--r) 50%,transparent);
  background:linear-gradient(180deg,var(--r-soft),rgba(255,255,255,.02)),var(--cs-surface-2);
}
.cs-game-tile--pick svg{fill:var(--rt)}
.cs-game-tile--pick .cs-game-tile__tag{color:var(--rt)}
.cs-game-tile--rand svg{fill:var(--cs-text-3)}
.cs-game-tile--rand::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.09) 50%,transparent 60%);
  animation:cs-game-glint 4.5s ease-in-out infinite;animation-delay:var(--d,0ms);
}
@keyframes cs-game-glint{0%,72%,100%{opacity:0}80%{opacity:1}}

/* Acciones */
.cs-game-actions{grid-area:actions;display:flex;flex-direction:column;gap:var(--mg-s2);align-items:flex-start}
.cs-game-hint{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cs-text-3);margin:0}

/* Rail de combos */
.cs-game-rail{grid-area:rail;display:flex;flex-direction:column;gap:var(--mg-s2)}
.cs-game-rail__scroll{
  display:flex;gap:var(--mg-s2);overflow-x:auto;padding-bottom:4px;min-width:0;
  scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;
}
.cs-game-rail__scroll::-webkit-scrollbar{display:none}
.cs-game-chip{
  flex:1 0 auto;min-width:104px;min-height:52px;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
  padding:9px 13px;border-radius:var(--mg-r-v4);
  border:1px solid var(--cs-line);background:rgba(255,255,255,.02);
  transition:border-color .3s linear,background .3s linear,transform .3s var(--mg-ease-pill);
}
.cs-game-chip:hover{transform:translateY(-2px);border-color:var(--cs-line-strong)}
.cs-game-chip__n{font-size:9px;font-weight:800;letter-spacing:.18em;color:var(--cs-text-3)}
.cs-game-chip__t{font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--cs-text-2);white-space:nowrap}
.cs-game-chip[aria-current="true"]{
  background:var(--r-soft);border-color:color-mix(in oklab,var(--r) 55%,transparent);
}
.cs-game-chip[aria-current="true"] .cs-game-chip__t{color:var(--cs-text)}
.cs-game-chip[aria-current="true"] .cs-game-chip__n{color:var(--rt)}

/* ---------- Escena 3 · Elegido ---------- */
.cs-game-chosen{justify-content:center;align-items:center;text-align:center;gap:var(--mg-s4)}
.cs-game-chosen__art{position:relative;display:flex;align-items:center;justify-content:center}
.cs-game-shock{
  position:absolute;left:50%;top:50%;width:var(--cs-kivo);aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;border:1.5px solid var(--r);opacity:0;
  animation:cs-game-shock 1.5s var(--mg-ease-card) forwards;
}
.cs-game-shock:nth-of-type(2){animation-delay:.16s}
.cs-game-shock:nth-of-type(3){animation-delay:.34s}
@keyframes cs-game-shock{
  0%{opacity:.9;transform:scale(.35)}
  100%{opacity:0;transform:scale(2.6)}
}
.cs-game-chosen__name{
  margin:var(--mg-s3) 0 0;font-size:clamp(32px,9vw,64px);font-weight:800;letter-spacing:-.025em;line-height:1.12;
}
.cs-game-chosen__line{
  margin:var(--mg-s4) 0 0;font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--cs-text-2);
}
.cs-game-chosen__price{margin-top:var(--mg-s3);justify-content:center}

/* ---------- Escena 4 · Destino ---------- */
.cs-game-dest{justify-content:center;align-items:center;gap:var(--mg-s4)}
.cs-game-ticket{
  width:100%;max-width:520px;
  border-radius:var(--mg-r-block);border:1px solid var(--cs-line);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),var(--cs-surface);
  padding:var(--mg-s5) var(--mg-s4);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
}
.cs-game-ticket__top{display:flex;align-items:center;justify-content:space-between;gap:var(--mg-s3)}
.cs-game-ticket__name{margin:var(--mg-s4) 0 0;font-size:clamp(26px,7vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.cs-game-ticket__rows{margin:var(--mg-s4) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0}
.cs-game-ticket__rows li{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--mg-s3);
  padding:13px 0;border-top:1px solid var(--cs-line);
  font-size:14px;
}
.cs-game-ticket__rows dt,.cs-game-ticket__rows span:first-child{color:var(--cs-text-2);font-weight:500}
.cs-game-ticket__rows b{font-weight:700;color:var(--cs-text);text-align:right}
.cs-game-ticket__total b{font-size:22px;font-weight:800;letter-spacing:-.01em}
.cs-game-dest__out{width:100%;max-width:520px;display:flex;flex-direction:column;gap:var(--mg-s3);align-items:center}
.cs-game-dest__legal{margin:0;font-size:12px;line-height:1.5;color:var(--cs-text-3);text-align:center;max-width:44ch}
@keyframes cs-game-kaura{0%,100%{opacity:.12;transform:scale(.94)}50%{opacity:.26;transform:scale(1.06)}}
@keyframes cs-game-spin{to{transform:rotate(360deg)}}
@keyframes cs-game-spin-r{to{transform:rotate(-360deg)}}
@keyframes cs-game-float{0%,100%{transform:translateY(-3px) scale(.995)}50%{transform:translateY(4px) scale(1.012)}}
@keyframes cs-game-core{0%,100%{opacity:.72;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes cs-game-blink{0%,92%,100%{transform:scaleY(1)}94%,97%{transform:scaleY(.08)}}
@keyframes cs-game-lid{0%,92%,100%{opacity:0}94%,97%{opacity:1}}
@keyframes cs-game-react{
  0%{transform:scale(1)}
  22%{transform:scale(1.12) rotate(-3deg)}
  48%{transform:scale(.96) rotate(2deg)}
  100%{transform:scale(1)}
}

/* ---------- Recomposición: tablet ---------- */
@media (min-width:721px){
  .cs-game{--cs-kivo:clamp(220px,30vw,320px)}
  .cs-game-scene{padding:var(--mg-s5) var(--mg-s5) clamp(84px,10vh,110px)}
  .cs-game-card{padding:var(--mg-s4)}
  .cs-game-intro__inner{grid-template-columns:1.05fr .95fr;gap:var(--mg-s6)}
  .cs-game-intro__art{order:0}
  .cs-game-explore[data-cs-active],.cs-game-explore[data-cs-leaving]{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "hud hud"
      "stage stage"
      "ident loot"
      "actions loot"
      "rail rail";
    align-content:center;
    gap:var(--mg-s4) var(--mg-s5);
  }
  .cs-game-card__specs li{flex:1 1 0}
  .cs-game-loot__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));overflow:visible}
  .cs-game-tile{flex:1 1 auto;width:auto}
}

/* ---------- Recomposición: escritorio (1280 / 1568) ---------- */
@media (min-width:1080px){
  .cs-game{--cs-kivo:clamp(300px,24vw,400px)}
  .cs-game-scene{padding:var(--mg-s6) var(--mg-s6) var(--mg-s6);justify-content:center}
  .cs-game-explore[data-cs-active],.cs-game-explore[data-cs-leaving]{
    grid-template-columns:minmax(300px,1fr) minmax(380px,1.15fr) minmax(280px,.95fr);
    grid-template-rows:auto auto auto auto;
    align-content:center;
    grid-template-areas:
      "hud    hud    hud"
      "ident  stage  loot"
      "actions stage loot"
      "rail   rail   rail";
    gap:var(--mg-s4) var(--mg-s6);
    align-items:start;
  }
  .cs-game-stage{grid-row:2 / span 2;align-self:stretch;min-height:min(58svh,480px)}
  .cs-game-loot{grid-row:2 / span 2}
  .cs-game-hud__row{gap:var(--mg-s5)}
  .cs-game-hud{flex-direction:row;align-items:center;gap:var(--mg-s5)}
  .cs-game-hud__row{flex:0 0 auto}
  .cs-game-power{flex:1}
  .cs-game-loot__grid{grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}
  .cs-game-chip{flex:1 1 0;min-width:0}
  .cs-game-chip__t{white-space:normal}
  .cs-game-rail__scroll{overflow:visible}
  .cs-game-intro__inner{grid-template-columns:1fr .9fr;gap:var(--mg-s7)}
  .cs-game-chosen__name{white-space:nowrap}
}

/* ---------- Pantallas bajas (568 / 640 / 667) ---------- */
@media (max-height:700px) and (max-width:720px){
  .cs-game{--cs-kivo:clamp(126px,34vh,168px)}
  .cs-game-scene{padding:var(--mg-s3) var(--mg-s4) clamp(72px,15vh,92px);gap:var(--mg-s3)}
  .cs-game-explore[data-cs-active]{gap:var(--mg-s3)}
  .cs-game-h1{font-size:clamp(32px,8.4vw,44px)}
  .cs-game-lede{margin-top:var(--mg-s3);font-size:14px}
  .cs-game-intro__meta{margin-top:var(--mg-s4)}
  .cs-game-card{padding:var(--mg-s3)}
  .cs-game-price{margin-top:var(--mg-s3)}
  .cs-game-ticket{padding:var(--mg-s4) var(--mg-s3)}
}

/* ---------- Movimiento reducido: todo utilizable, sin animación ---------- */
@media (prefers-reduced-motion:reduce){
  .cs-game *,.cs-game *::before,.cs-game *::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
  .cs-game-tile{opacity:1;transform:none}
  .cs-game-scan::after,.cs-game-particles{display:none}
  .cs-game-scene[data-cs-active]{opacity:1;transform:none;filter:none}
  .cs-game-kivo{transform:none}
  .cs-game-bg__aura,.cs-game-bg__rarity,.cs-game-bg__grid,.cs-game-stage__floor{transform:none}
  .cs-game[data-cs-tier="3"] .cs-game-kivo__crown,.cs-game[data-cs-tier="4"] .cs-game-kivo__crown,
  .cs-game[data-cs-tier="5"] .cs-game-kivo__crown,.cs-game[data-cs-tier="6"] .cs-game-kivo__crown{opacity:1}
}

/* ══════════════════════════════════════════════════════════════════
   ESCENA 4 · ELIGES TUS JUEGOS  (añadido 5 ago 2026)
   Estantería de carátulas con render 3D flotante. Cada carátula es
   una caja física falsa: cara frontal con la imagen, lomo lateral y
   un reflejo en el suelo. Flota con un ciclo lento y se inclina al
   pasar el puntero. Al elegirla se levanta y se enciende el borde.
   ══════════════════════════════════════════════════════════════════ */

/* OJO: sin la condicion [data-cs-active] este display:block anula el
   display:none de .cs-game-scene y la estanteria de juegos se queda
   visible bajo la intro desde que carga la pagina. Medido el 5 ago 2026. */
.cs-game-pick{ text-align:left; }
.cs-game-scene.cs-game-pick[data-cs-active]{ display:block; }

.cs-pick__head{ text-align:center; margin-bottom:var(--mg-s5,28px); }
.cs-pick__title{ font-size:clamp(28px,5vw,44px); line-height:1.05; margin:.2em 0 .3em; }
.cs-pick__sub{ color:#b9b9c6; max-width:52ch; margin:0 auto; }

.cs-pick__bar{
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin:0 auto var(--mg-s4,22px); max-width:1080px;
}
.cs-pick__search{
  display:flex; align-items:center; gap:10px; flex:1 1 240px; max-width:420px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:999px; padding:10px 16px; color:#9a9aa8;
}
.cs-pick__search input{
  flex:1; background:none; border:0; outline:none; color:#fff; font:inherit; font-size:15px;
}
.cs-pick__search input::placeholder{ color:#7d7d8c; }
.cs-pick__search:focus-within{ border-color:rgba(140,110,255,.75); box-shadow:0 0 0 3px rgba(140,110,255,.18); }

.cs-pick__count{ margin:0; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:#9a9aa8; }
.cs-pick__count b{ color:#fff; }

.cs-pick__grid{
  display:grid; gap:26px 20px; max-width:1080px; margin:0 auto;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  perspective:1100px;
}
.cs-pick__empty{ text-align:center; color:#9a9aa8; margin-top:28px; }

/* ---- la carátula ---- */
.cs-cov{
  position:relative; background:none; border:0; padding:0; cursor:pointer;
  transform-style:preserve-3d; -webkit-tap-highlight-color:transparent;
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.cs-cov__box{
  position:relative; display:block; aspect-ratio:3/4; transform-style:preserve-3d;
  transform:rotateY(-16deg) rotateX(4deg);
  transition:transform .45s cubic-bezier(.2,.8,.3,1), filter .3s;
  animation:cs-float 7s ease-in-out infinite;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.6));
}
.cs-pick__grid .cs-cov:nth-child(3n)   .cs-cov__box{ animation-delay:-1.6s; }
.cs-pick__grid .cs-cov:nth-child(3n+1) .cs-cov__box{ animation-delay:-3.4s; }
.cs-pick__grid .cs-cov:nth-child(4n)   .cs-cov__box{ animation-duration:8.4s; }

@keyframes cs-float{
  0%,100%{ translate:0 0; }
  50%    { translate:0 -9px; }
}

.cs-cov__face{
  position:absolute; inset:0; border-radius:6px; overflow:hidden;
  background:#15151c; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transform:translateZ(9px);
}
.cs-cov__face img{ width:100%; height:100%; object-fit:cover; display:block; }
/* brillo diagonal del plástico */
.cs-cov__face::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.09) 100%);
}
/* lomo de la caja */
.cs-cov__spine{
  position:absolute; top:0; bottom:0; left:0; width:18px;
  transform:rotateY(-90deg) translateZ(9px); transform-origin:left center;
  background:linear-gradient(90deg,#2a2136,#171720);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.08);
  border-radius:4px 0 0 4px;
}
/* reflejo en el suelo */
.cs-cov__floor{
  position:absolute; left:8%; right:8%; bottom:-10px; height:14px; border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(124,92,255,.45),rgba(0,0,0,0) 70%);
  filter:blur(3px); opacity:.65; transition:opacity .3s;
}

.cs-cov__meta{ margin-top:14px; }
.cs-cov__name{
  display:block; font-size:13px; line-height:1.25; color:#e7e7ef; font-weight:600;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.cs-cov__plat{
  display:inline-block; margin-top:5px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#8f8fa0;
}

.cs-cov__tick{
  position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%;
  background:#7c5cff; color:#fff; display:grid; place-items:center;
  transform:translateZ(22px) scale(.4); opacity:0;
  transition:transform .3s cubic-bezier(.2,1.4,.4,1), opacity .2s;
  box-shadow:0 4px 14px rgba(124,92,255,.6);
}
.cs-cov__tick svg{ width:14px; height:14px; }

@media (hover:hover){
  .cs-cov:hover .cs-cov__box{ transform:rotateY(-4deg) rotateX(2deg) scale(1.05); }
  .cs-cov:hover .cs-cov__floor{ opacity:1; }}
.cs-cov:focus-visible{ outline:none; }
.cs-cov:focus-visible .cs-cov__face{ box-shadow:0 0 0 2px #fff, 0 0 0 5px rgba(124,92,255,.6); }

/* elegida */
.cs-cov[aria-selected="true"] .cs-cov__box{
  transform:rotateY(0deg) rotateX(0deg) scale(1.06); animation-play-state:paused;
}
.cs-cov[aria-selected="true"] .cs-cov__face{
  box-shadow:inset 0 0 0 2px #7c5cff, 0 0 26px rgba(124,92,255,.55);
}
.cs-cov[aria-selected="true"] .cs-cov__tick{ transform:translateZ(22px) scale(1); opacity:1; }
.cs-cov[aria-selected="true"] .cs-cov__name{ color:#fff; }
.cs-cov[aria-selected="true"] .cs-cov__floor{ opacity:1; }

/* cupo lleno: las no elegidas se apagan */
.cs-pick__grid[data-cs-full] .cs-cov:not([aria-selected="true"]){ opacity:.34; }
.cs-pick__grid[data-cs-full] .cs-cov:not([aria-selected="true"]) .cs-cov__box{ animation-play-state:paused; }

.cs-pick__foot{
  display:flex; flex-wrap:wrap; gap:var(--mg-s3,14px); justify-content:center;
  margin-top:var(--mg-s6,36px);
}

/* lista dentro del ticket */
.cs-ticket__picked{ margin-top:18px; border-top:1px dashed rgba(255,255,255,.18); padding-top:14px; }
.cs-ticket__list{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px; }
.cs-ticket__list li{
  display:flex; align-items:center; gap:10px; font-size:14px; color:#e7e7ef;
}
.cs-ticket__list img{
  width:28px; height:37px; object-fit:cover; border-radius:3px; flex:none;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}

@media (max-width:640px){
  .cs-pick__grid{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:20px 14px; }
  .cs-cov__box{ transform:rotateY(-10deg); }
  .cs-cov__name{ font-size:12px; }}

@media (prefers-reduced-motion:reduce){
  .cs-cov__box{ animation:none; transform:none; }
  .cs-cov:hover .cs-cov__box,
  .cs-cov[aria-selected="true"] .cs-cov__box{ transform:scale(1.03); }}

/* La escena del catálogo debe ocupar el ancho de su contenedor y no
   crecer con el contenido: sin esto la rejilla se estira a max-content
   y en móvil se sale de la pantalla. Medido el 5 ago 2026. */
.cs-game-pick{ width:100%; justify-self:stretch; }
.cs-pick__grid,
.cs-pick__bar{ width:100%; box-sizing:border-box; }
.cs-pick__grid > *{ min-width:0; }

/* El botón es inline-block por defecto: sin ancho definido, aspect-ratio
   no puede calcular la altura de la caja y la carátula se monta sobre el
   título. Medido en móvil el 5 ago 2026. */
.cs-cov{ display:block; width:100%; text-align:center; }
.cs-cov__box{ width:100%; }

/* display:block del autor anula el [hidden] del navegador. */
.cs-cov[hidden]{ display:none; }

/* La perspectiva estaba en la rejilla: con un solo punto de fuga para
   todas, las carátulas de los bordes se deformaban y crecían por encima
   de su hueco, montándose sobre el título. Cada carátula lleva ahora su
   propia perspectiva centrada. Medido el 5 ago 2026. */
.cs-pick__grid{ perspective:none; }
.cs-cov{ perspective:900px; }

/* ══════════════════════════════════════════════════════════════════
   Cabecera fija de la escena de juegos (5 ago 2026, 5:40 p. m.)
   Se eliminó la pantalla de celebración: el combo y el precio viven
   ahora en esta barra, que queda pegada arriba mientras el cliente
   recorre las carátulas. Así ve siempre qué compró y cuántas lleva.
   ══════════════════════════════════════════════════════════════════ */

.cs-pick__bar{
  position:sticky; top:0; z-index:5;
  margin-inline:auto; margin-bottom:var(--mg-s4,22px);
  padding:12px 0;
  background:linear-gradient(180deg,rgba(10,10,11,.97) 62%,rgba(10,10,11,0));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}

.cs-pick__combo{
  display:flex; align-items:baseline; gap:10px; margin:0; flex:0 0 auto;
}
.cs-pick__combo b{
  font-size:15px; color:#fff; letter-spacing:.01em;
}
.cs-pick__combo span{
  font-size:13px; color:#7c5cff; font-weight:700;
  background:rgba(124,92,255,.14); border:1px solid rgba(124,92,255,.35);
  border-radius:999px; padding:3px 10px;
}

@media (max-width:720px){
  .cs-pick__bar{ gap:10px; }
  .cs-pick__combo{ order:-1; width:100%; justify-content:space-between; }
  .cs-pick__search{ flex:1 1 auto; max-width:none; }}

/* ══════════════════════════════════════════════════════════════════
   CELEBRACIÓN FINAL · KIVO se convierte en personaje (5 ago 2026)
   Hasta aquí KIVO era una cápsula hexagonal. En la última escena se
   despliega: cabeza, torso, brazos en alto y piernas. Los miembros
   son trazos y se "dibujan" con stroke-dashoffset, que es lo que da
   la sensación de que los saca. Nada se mueve si el sistema pide
   menos movimiento.
   ══════════════════════════════════════════════════════════════════ */

.cs-hero{
  position:relative; text-align:center; width:100%;
  margin:0 auto var(--mg-s5,28px); max-width:520px;
}
.cs-hero__mount{ position:relative; display:block; margin:0 auto; width:min(300px,72vw); }
.cs-hero__svg{ width:100%; height:auto; display:block; overflow:visible; }

.cs-hero__title{
  font-size:clamp(24px,4.4vw,36px); line-height:1.1; margin:.25em 0 .2em; color:#fff;
}
.cs-hero__sub{ color:#b9b9c6; margin:0; }

/* ---- piezas ---- */
.cs-hero__glow{ fill:rgba(124,92,255,.16); }
.cs-hero__crown path{ fill:#a78bfa; }
.cs-hero__ring{ fill:none; stroke:rgba(167,139,250,.5); stroke-width:2; }
.cs-hero__shell{ fill:#15121f; stroke:#7c5cff; stroke-width:3; stroke-linejoin:round; }
.cs-hero__facet{ fill:none; stroke:rgba(167,139,250,.35); stroke-width:1.2; }
.cs-hero__core{ fill:#7c5cff; opacity:.9; }
.cs-hero__eye{ fill:#fff; }
.cs-hero__iris{ fill:#15121f; }
.cs-hero__limb{
  fill:none; stroke:#7c5cff; stroke-width:13; stroke-linecap:round;
}
.cs-hero__hand{ fill:#a78bfa; }
.cs-hero__foot{ fill:#5b3fd6; }

/* ---- estado de reposo: sin miembros, cápsula sola ---- */
.cs-hero__limb{ stroke-dasharray:60; stroke-dashoffset:60; }
.cs-hero__ends > *{ opacity:0; transform:scale(.2); transform-box:fill-box; transform-origin:center; }
.cs-hero__head, .cs-hero__torso{ opacity:0; }
.cs-hero__ring{ opacity:0; }

/* ---- se despliega ---- */
[data-cs-hero-on] .cs-hero__torso{ animation:cs-hero-pop .5s .05s cubic-bezier(.2,1.5,.4,1) both; }
[data-cs-hero-on] .cs-hero__head { animation:cs-hero-pop .5s .18s cubic-bezier(.2,1.5,.4,1) both; }
[data-cs-hero-on] .cs-hero__limb { animation:cs-hero-draw .42s cubic-bezier(.3,.9,.3,1) both; }
[data-cs-hero-on] .cs-hero__limb--a1{ animation-delay:.40s }
[data-cs-hero-on] .cs-hero__limb--a2{ animation-delay:.56s }
[data-cs-hero-on] .cs-hero__limb--b1{ animation-delay:.46s }
[data-cs-hero-on] .cs-hero__limb--b2{ animation-delay:.62s }
[data-cs-hero-on] .cs-hero__limb--c1{ animation-delay:.30s }
[data-cs-hero-on] .cs-hero__limb--c2{ animation-delay:.44s }
[data-cs-hero-on] .cs-hero__limb--d1{ animation-delay:.34s }
[data-cs-hero-on] .cs-hero__limb--d2{ animation-delay:.48s }
[data-cs-hero-on] .cs-hero__hand:nth-of-type(1){ animation:cs-hero-pop .34s .80s cubic-bezier(.2,1.6,.4,1) both }
[data-cs-hero-on] .cs-hero__hand:nth-of-type(2){ animation:cs-hero-pop .34s .86s cubic-bezier(.2,1.6,.4,1) both }
[data-cs-hero-on] .cs-hero__foot:nth-of-type(1){ animation:cs-hero-pop .34s .62s cubic-bezier(.2,1.6,.4,1) both }
[data-cs-hero-on] .cs-hero__foot:nth-of-type(2){ animation:cs-hero-pop .34s .66s cubic-bezier(.2,1.6,.4,1) both }
[data-cs-hero-on] .cs-hero__ring{ animation:cs-hero-ring 1s .9s ease-out both, cs-hero-spin 26s 1.9s linear infinite; }
[data-cs-hero-on] .cs-hero__svg{ animation:cs-hero-salto .7s 1.0s cubic-bezier(.3,1.4,.4,1) 2; }

@keyframes cs-hero-pop{
  from{ opacity:0; transform:scale(.35) }
  to  { opacity:1; transform:scale(1) }
}
@keyframes cs-hero-draw{
  from{ stroke-dashoffset:60 }
  to  { stroke-dashoffset:0 }
}
@keyframes cs-hero-ring{
  from{ opacity:0; transform:scale(.7) }
  to  { opacity:1; transform:scale(1) }
}
@keyframes cs-hero-spin{ to{ transform:rotate(360deg) } }
@keyframes cs-hero-salto{
  0%,100%{ transform:translateY(0) }
  40%    { transform:translateY(-14px) }
}
.cs-hero__ring{ transform-box:view-box; transform-origin:120px 150px; }
.cs-hero__svg{ transform-box:view-box; transform-origin:center bottom; }

/* ---- confeti ---- */
.cs-hero__confeti{
  position:absolute; inset:-10% 0 auto 0; height:120%; pointer-events:none; overflow:hidden; z-index:2;
}
.cs-confeti{
  position:absolute; top:-16px; width:8px; height:13px; border-radius:2px; opacity:0;
  animation-name:cs-confeti-cae; animation-timing-function:cubic-bezier(.35,.2,.5,1); animation-fill-mode:forwards;
}
@keyframes cs-confeti-cae{
  0%  { opacity:0; translate:0 -10px; }
  12% { opacity:1; }
  100%{ opacity:0; translate:0 320px; }
}

@media (prefers-reduced-motion:reduce){
  .cs-hero__limb{ stroke-dashoffset:0; }
  .cs-hero__ends > *{ opacity:1; transform:none; }
  .cs-hero__head, .cs-hero__torso, .cs-hero__ring{ opacity:1; }
  [data-cs-hero-on] .cs-hero__svg,
  [data-cs-hero-on] .cs-hero__ring,
  [data-cs-hero-on] .cs-hero__limb,
  [data-cs-hero-on] .cs-hero__head,
  [data-cs-hero-on] .cs-hero__torso,
  [data-cs-hero-on] .cs-hero__hand,
  [data-cs-hero-on] .cs-hero__foot{ animation:none; }}

/* ══════════════════════════════════════════════════════════════════
   REGLAS COMERCIALES EN PANTALLA (5 ago 2026, dictadas por Miguel)
   Al combo solo entran juegos de $110.000 o menos. Los de Nintendo
   Switch 2 sí se pueden elegir, pero llevan recargo: se avisa con un
   sello en la carátula y con un párrafo arriba, y el mensaje de
   WhatsApp lo dice para que Miguel cotice antes de cobrar.
   ══════════════════════════════════════════════════════════════════ */

.cs-pick__aviso{
  max-width:62ch; margin:14px auto 0; padding:12px 16px;
  background:rgba(255,193,84,.08); border:1px solid rgba(255,193,84,.34);
  border-radius:12px; color:#e8dcc4; font-size:14px; line-height:1.5;
}
.cs-pick__aviso b{ color:#ffc154; letter-spacing:.06em; }

.cs-cov__recargo{
  position:absolute; left:6px; bottom:6px; z-index:3;
  transform:translateZ(20px);
  background:#ffc154; color:#20160a;
  font-size:9px; font-weight:800; letter-spacing:.08em;
  padding:3px 6px; border-radius:5px; white-space:nowrap;
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.cs-cov__recargo--inline{
  position:static; transform:none; display:inline-block; vertical-align:middle;
  box-shadow:none; margin:0 2px;
}
.cs-cov[data-cs-recargo][aria-selected="true"] .cs-cov__face{
  box-shadow:inset 0 0 0 2px #ffc154, 0 0 26px rgba(255,193,84,.5);
}
.cs-cov[data-cs-recargo][aria-selected="true"] .cs-cov__tick{ background:#ffc154; color:#20160a; }

.cs-pick__pedir{
  max-width:560px; margin:28px auto 0; padding:18px 20px; text-align:center;
  border:1px dashed rgba(255,255,255,.2); border-radius:16px;
  background:rgba(255,255,255,.03);
}
.cs-pick__pedir-txt{ margin:0 0 12px; color:#b9b9c6; font-size:14px; }
.cs-game-btn--wa{
  display:inline-flex; align-items:center; gap:9px;
  background:#25d366; color:#08210f; font-weight:700; border:0;
}
.cs-game-btn--wa:hover{ background:#1fbe5b; color:#08210f; }

/* ══════════════════════════════════════════════════════════════════
   LA CARÁTULA ES UN BOTÓN (5 ago 2026, pedido de Miguel)
   Antes la carátula flotaba suelta sobre el fondo. Ahora cada juego
   es un botón rectangular de esquinas redondeadas: marco propio,
   fondo propio, y la carátula dentro. Se lee como algo pulsable
   incluso antes de tocarlo.
   ══════════════════════════════════════════════════════════════════ */

.cs-cov{
  padding:10px 10px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:0 2px 0 rgba(255,255,255,.05) inset, 0 10px 24px rgba(0,0,0,.35);
  transition:border-color .25s, background .25s, transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
}
.cs-cov__face{ border-radius:12px; }
.cs-cov__spine{ border-radius:6px 0 0 6px; }
.cs-cov__box{ filter:drop-shadow(0 12px 16px rgba(0,0,0,.5)); }
.cs-cov__meta{ margin-top:12px; }

@media (hover:hover){
  .cs-cov:hover{
    background:linear-gradient(180deg,rgba(124,92,255,.18),rgba(124,92,255,.05));
    border-color:rgba(167,139,250,.55);
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(167,139,250,.2);
  }}
.cs-cov:active{ transform:translateY(0) scale(.985); }

.cs-cov[aria-selected="true"]{
  background:linear-gradient(180deg,rgba(124,92,255,.28),rgba(124,92,255,.08));
  border-color:#7c5cff;
  box-shadow:0 0 0 1px #7c5cff, 0 14px 34px rgba(124,92,255,.28);
}
.cs-cov[data-cs-recargo][aria-selected="true"]{
  background:linear-gradient(180deg,rgba(255,193,84,.24),rgba(255,193,84,.06));
  border-color:#ffc154;
  box-shadow:0 0 0 1px #ffc154, 0 14px 34px rgba(255,193,84,.24);
}

/* El sello de recargo se ancla al marco del botón, no a la caja 3D. */
.cs-cov__recargo{ left:14px; bottom:auto; top:14px; }

.cs-pick__grid{ gap:22px 16px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
@media (max-width:640px){
  .cs-pick__grid{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:16px 12px; }
  .cs-cov{ padding:8px 8px 10px; border-radius:14px; }}
/* ══════════════════════════════════════════════════════════════════
   KIVO ROBOT (7 ago 2026) — Miguel pidió el lenguaje de los robots
   blancos de dibujos: carcasa clara, visor oscuro, ojos encendidos.
   Diseño original, no calcado de la referencia.
   Y lo importante: EL ROBOT CRECE con el nivel del combo. No solo
   cambia de color, le van saliendo piezas.
   ══════════════════════════════════════════════════════════════════ */

.k-pieza{ fill:url(#kb); stroke:#AEC0D8; stroke-width:1.1; }
.k-acento{ fill:url(#ka); }
.k-visor{ fill:url(#kv); stroke:#9FB4D0; stroke-width:1.4; }
.k-sombra{ fill:#000; opacity:.28; filter:blur(2px); }
.k-costilla{ fill:#B9C8DC; opacity:.7; }
.k-orejas{ fill:url(#ka); }
.k-antena-tallo{ fill:none; stroke:#B9C8DC; stroke-width:2.4; stroke-linecap:round; }

/* Lo que brilla toma el color de la rareza del combo. */
.k-ojo{ fill:var(--rt); filter:drop-shadow(0 0 6px var(--r)); }
.k-antena-bola{ fill:var(--rt); filter:drop-shadow(0 0 7px var(--r)); animation:cs-kivo-late 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.k-nucleo{ fill:var(--rt); filter:drop-shadow(0 0 9px var(--r)); animation:cs-kivo-nucleo 2.9s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.k-escaner{ fill:var(--rt); opacity:.35; animation:cs-kivo-escaneo 3.4s linear infinite; transform-box:view-box; }
.k-prop{ fill:url(#ka); stroke:#8FA8C8; stroke-width:1; }
.k-prop-fuego{ fill:var(--rt); filter:drop-shadow(0 0 8px var(--r)); animation:cs-kivo-empuje 1.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.cs-game-kivo__lid{ fill:url(#kv); opacity:0; animation:cs-game-lid 6.4s steps(1,end) infinite; }

@keyframes cs-kivo-late{ 0%,100%{opacity:.6;transform:scale(.88)} 50%{opacity:1;transform:scale(1.12)} }
@keyframes cs-kivo-nucleo{ 0%,100%{opacity:.7;transform:scale(.94)} 50%{opacity:1;transform:scale(1.08)} }
@keyframes cs-kivo-escaneo{ 0%{transform:translateY(0);opacity:0} 12%{opacity:.5} 88%{opacity:.5} 100%{transform:translateY(26px);opacity:0} }
@keyframes cs-kivo-empuje{ 0%,100%{opacity:.35;transform:scale(.7)} 50%{opacity:1;transform:scale(1.2)} }

/* La antena se balancea; la cabeza se inclina apenas. */
.k-antena{ transform-box:fill-box; transform-origin:50% 100%; animation:cs-kivo-antena 4.2s ease-in-out infinite; }
@keyframes cs-kivo-antena{ 0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(7deg)} }
.cs-game-kivo__cabeza{ transform-box:fill-box; transform-origin:50% 90%; animation:cs-kivo-cabeza 5.4s ease-in-out infinite; }
@keyframes cs-kivo-cabeza{ 0%,100%{transform:rotate(-1.8deg)} 50%{transform:rotate(1.8deg)} }

@keyframes cs-kivo-brazo{ 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(4deg)} }

/* ── EL ROBOT CRECE ───────────────────────────────────────────────
   Nivel 1: solo cabeza y torso, flotando, pequeño.
   2: le salen brazos · 3: hombreras · 4: base y patas ·
   5: propulsores · 6: corona, alas y halo. Y el conjunto gana
   tamaño en cada escalón.                                          */
.cs-game-kivo__crece{
  transform-box:view-box; transform-origin:100px 118px;
  transition:none;
}
.k-brazos,.k-hombreras,.k-base,.k-propulsores{
  opacity:0; transition:opacity .5s ease;
}

.cs-game[data-cs-tier="2"] .k-brazos,.cs-game[data-cs-tier="3"] .k-brazos,
.cs-game[data-cs-tier="4"] .k-brazos,.cs-game[data-cs-tier="5"] .k-brazos,
.cs-game[data-cs-tier="6"] .k-brazos{ opacity:1; }
.cs-game[data-cs-tier="3"] .k-hombreras,.cs-game[data-cs-tier="4"] .k-hombreras,
.cs-game[data-cs-tier="5"] .k-hombreras,.cs-game[data-cs-tier="6"] .k-hombreras{ opacity:1; }
.cs-game[data-cs-tier="4"] .k-base,.cs-game[data-cs-tier="5"] .k-base,
.cs-game[data-cs-tier="6"] .k-base{ opacity:1; }
.cs-game[data-cs-tier="5"] .k-propulsores,.cs-game[data-cs-tier="6"] .k-propulsores{ opacity:1; }

.cs-game[data-cs-tier="5"] .k-escaner,.cs-game[data-cs-tier="6"] .k-escaner{ animation-duration:1.6s; }
.cs-game[data-cs-tier="6"] .k-nucleo{ animation-duration:1.4s; }
.cs-game[data-cs-tier="6"] .k-visor{ stroke:var(--rt); stroke-width:2; }

@media (prefers-reduced-motion:reduce){
  .k-antena,.cs-game-kivo__cabeza,.k-brazo,.k-antena-bola,.k-nucleo,
  .k-escaner,.k-prop-fuego{ animation:none; }
  .cs-game-kivo__crece{ transition:none; }
}

/* ── Rareza: los 6 niveles como los ve un jugador ───────────────── */
.cs-game[data-cs-tier="1"]{--r:#8B8B99;--rt:#E2E6F0;--r-soft:rgba(139,139,153,.16)}
.cs-game[data-cs-tier="2"]{--r:#2ECC71;--rt:#9DF3C0;--r-soft:rgba(46,204,113,.18)}
.cs-game[data-cs-tier="3"]{--r:#3B9EFF;--rt:#B6DEFF;--r-soft:rgba(59,158,255,.20)}
.cs-game[data-cs-tier="4"]{--r:#9146FF;--rt:#DCC4FF;--r-soft:rgba(145,70,255,.22)}
.cs-game[data-cs-tier="5"]{--r:#FF7A1A;--rt:#FFD0A6;--r-soft:rgba(255,122,26,.22)}
.cs-game[data-cs-tier="6"]{--r:#FF3D6E;--rt:#FFB9CA;--r-soft:rgba(255,61,110,.24)}

/* ══════════════════════════════════════════════════════════════════
   KIVO PELEA (7 ago 2026) — Miguel: «que esté siempre moviéndose con
   poses de lucha: alzar una mano, ponerse en guardia, dar patadas al
   aire, una vuelta canela».
   Es un ciclo de 9 s con seis tiempos: guardia · directo izquierdo ·
   guardia · patada · vuelta canela · victoria. Cada parte del cuerpo
   lleva su propia línea de tiempo pero todas duran lo mismo, así que
   encajan sin desincronizarse nunca.
   ══════════════════════════════════════════════════════════════════ */

.k-lado{ transform-box:view-box; transform-origin:100px 116px; }
.k-lado--i{ animation:kivo-pelea-i 9s cubic-bezier(.3,0,.3,1) infinite; }
.k-lado--d{ animation:kivo-pelea-d 9s cubic-bezier(.3,0,.3,1) infinite; }

/* Izquierdo: sube a guardia, lanza el directo, y al final saluda. */
@keyframes kivo-pelea-i{
  0%,6%    { transform:rotate(0deg) translate(0,0); }
  12%,20%  { transform:rotate(-26deg) translate(3px,-6px); }      /* guardia */
  26%      { transform:rotate(-84deg) translate(22px,-18px); }    /* directo */
  32%,44%  { transform:rotate(-26deg) translate(3px,-6px); }
  50%,58%  { transform:rotate(-14deg) translate(2px,-3px); }      /* patada: equilibrio */
  64%,72%  { transform:rotate(0deg) translate(0,0); }             /* vuelta canela */
  80%,90%  { transform:rotate(-112deg) translate(20px,-24px); }   /* mano en alto */
  100%     { transform:rotate(0deg) translate(0,0); }
}
/* Derecho: guardia alta, cubre durante el directo, y remata la patada. */
@keyframes kivo-pelea-d{
  0%,6%    { transform:rotate(0deg) translate(0,0); }
  12%,20%  { transform:rotate(30deg) translate(-4px,-8px); }
  26%      { transform:rotate(38deg) translate(-6px,-10px); }
  32%,44%  { transform:rotate(30deg) translate(-4px,-8px); }
  50%,58%  { transform:rotate(52deg) translate(-8px,-12px); }
  64%,72%  { transform:rotate(0deg) translate(0,0); }
  80%,90%  { transform:rotate(16deg) translate(-2px,-4px); }
  100%     { transform:rotate(0deg) translate(0,0); }
}

/* El cuerpo: se agacha en guardia, se inclina al pegar, da la vuelta
   completa y aterriza. La vuelta canela es el giro de 360°. */
.cs-game-kivo__crece{ animation:kivo-pelea-cuerpo 9s cubic-bezier(.3,0,.3,1) infinite; }
@keyframes kivo-pelea-cuerpo{
  0%,6%   { transform:scale(var(--k,.78)) rotate(0deg) translateY(0); }
  12%,20% { transform:scale(var(--k,.78)) rotate(-5deg) translateY(2px); }
  26%     { transform:scale(var(--k,.78)) rotate(-11deg) translateY(0) translateX(4px); }
  32%,44% { transform:scale(var(--k,.78)) rotate(-5deg) translateY(2px); }
  50%     { transform:scale(var(--k,.78)) rotate(20deg) translateY(-11px); }  /* patada */
  58%     { transform:scale(var(--k,.78)) rotate(6deg) translateY(-3px); }
  64%     { transform:scale(var(--k,.78)) rotate(0deg) translateY(-12px); }
  72%     { transform:scale(var(--k,.78)) rotate(360deg) translateY(-12px); } /* vuelta canela */
  78%     { transform:scale(var(--k,.78)) rotate(360deg) translateY(0); }
  84%,92% { transform:scale(var(--k,.78)) rotate(360deg) translateY(-4px); }  /* victoria */
  100%    { transform:scale(var(--k,.78)) rotate(360deg) translateY(0); }
}

/* La base hace de pierna: se recoge y suelta la patada. */
.k-base{ transform-box:view-box; transform-origin:100px 146px; animation:kivo-pelea-base 9s cubic-bezier(.3,0,.3,1) infinite; }
@keyframes kivo-pelea-base{
  0%,44%  { transform:rotate(0deg) translate(0,0); }
  50%     { transform:rotate(-42deg) translate(-11px,-5px); }
  56%     { transform:rotate(6deg) translate(4px,0); }
  62%,100%{ transform:rotate(0deg) translate(0,0); }
}

/* El tamaño de cada nivel viaja por una variable para no pisar la
   animación de pelea, que también usa transform. */
.cs-game[data-cs-tier="1"] .cs-game-kivo__crece{--k:.78}
.cs-game[data-cs-tier="2"] .cs-game-kivo__crece{--k:.84}
.cs-game[data-cs-tier="3"] .cs-game-kivo__crece{--k:.89}
.cs-game[data-cs-tier="4"] .cs-game-kivo__crece{--k:.94}
.cs-game[data-cs-tier="5"] .cs-game-kivo__crece{--k:.98}
.cs-game[data-cs-tier="6"] .cs-game-kivo__crece{--k:1.03}
/* A más nivel, pelea más rápido. */
.cs-game[data-cs-tier="5"] .cs-game-kivo__crece,.cs-game[data-cs-tier="5"] .k-lado,.cs-game[data-cs-tier="5"] .k-base{animation-duration:7.5s}
.cs-game[data-cs-tier="6"] .cs-game-kivo__crece,.cs-game[data-cs-tier="6"] .k-lado,.cs-game[data-cs-tier="6"] .k-base{animation-duration:6s}

@media (prefers-reduced-motion:reduce){
  .k-lado,.k-base,.cs-game-kivo__crece{ animation:none; }
}


/* ── Sin alas (7 ago 2026, pedido de Miguel) ──────────────────────
   KIVO ya no despliega alas en ningún nivel. Se deja la regla en un
   solo sitio para poder devolverlas cambiando esta línea.           */
.cs-game-kivo__wings{ display:none; }

/* ── Botón flotante para continuar sin bajar hasta el final ───────
   Miguel: «cuando seleccione los juegos debe haber un botón flotante
   con un mini KIVO para darle a continuar sin bajar hasta abajo».
   Aparece solo cuando el cupo está completo. Se coloca centrado y
   desplazado a la izquierda para no chocar con el botón de WhatsApp,
   que vive en la esquina inferior derecha.                          */
.cs-flotante{
  position:fixed; left:50%; bottom:20px; transform:translate(-50%,26px);
  z-index:60; display:inline-flex; align-items:center; gap:10px;
  padding:10px 20px 10px 10px; border-radius:999px; border:0; cursor:pointer;
  background:linear-gradient(100deg,var(--r),var(--rt)); color:#0A0A0B;
  font-weight:800; font-size:15px; letter-spacing:.03em;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.14) inset;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.3,1);
}
.cs-flotante[data-visible]{ opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.cs-flotante:hover{ transform:translate(-50%,-3px); }
.cs-flotante:active{ transform:translate(-50%,0) scale(.97); }
.cs-flotante__kivo{ width:38px; height:38px; flex:0 0 38px; display:block; }
.cs-flotante__cuenta{
  background:rgba(0,0,0,.22); border-radius:999px; padding:3px 9px; font-size:13px;
}
@media (max-width:640px){
  .cs-flotante{ left:calc(50% - 34px); bottom:16px; font-size:14px; padding:9px 16px 9px 9px; }
  .cs-flotante:hover{ transform:translate(-50%,0); }
  .cs-flotante[data-visible]{ transform:translate(-50%,0); }
}
@media (prefers-reduced-motion:reduce){ .cs-flotante{ transition:none; } }

/* El mini KIVO del botón saluda de vez en cuando. */
.cs-flotante__kivo .m-cabeza{ transform-box:view-box; transform-origin:50px 58px; animation:cs-mini-saludo 3.6s ease-in-out infinite; }
@keyframes cs-mini-saludo{ 0%,72%,100%{transform:rotate(0)} 80%{transform:rotate(-11deg)} 88%{transform:rotate(9deg)} }
.cs-flotante__kivo .m-ojo{ fill:#0A0A0B; }
.cs-flotante__kivo .m-visor{ fill:#101826; }
.cs-flotante__kivo .m-casco{ fill:#fff; stroke:#0A0A0B; stroke-width:3; }
.cs-flotante__kivo .m-antena{ stroke:#0A0A0B; stroke-width:4; fill:none; stroke-linecap:round; }
.cs-flotante__kivo .m-bola{ fill:#0A0A0B; }

/* ── Banner de categoría (7 ago 2026) ─────────────────────────────
   Reserva su espacio con aspect-ratio para que nada salte mientras
   carga, y recorta con object-fit por si la imagen no es 16:9.     */
.mg-cat-banner{
  margin:0 0 22px; border-radius:18px; overflow:hidden;
  aspect-ratio:16/9; max-height:340px; background:#B4131B;
}
.mg-cat-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:640px){ .mg-cat-banner{ border-radius:14px; margin-bottom:16px; max-height:210px; } }

/* ══════════════════════════════════════════════════════════════════
   PROPORCIONES · TODO EN UNA PANTALLA  (7 ago 2026)
   Miguel: «que se pueda usar todo en una sola pantalla, desde el móvil
   o desde el escritorio».
   Medido en su navegador (1534x722): había 618 px libres y el contenido
   ocupaba 684, así que la tira de combos quedaba cortada por abajo.
   Ahora la escena mide exactamente el hueco libre y el escenario de
   KIVO es la única fila elástica: si sobra sitio crece, y si falta se
   encoge él en vez de empujar la tira fuera de la pantalla.
   ══════════════════════════════════════════════════════════════════ */

.cs-paleta{ position:absolute; width:0; height:0; overflow:hidden; }

/* El SVG de KIVO no tenía ancho ni alto: se perdió al limpiar las reglas
   del diseño viejo, y por eso salía a tamaño cero en la exploración. */
.cs-game-kivo{
  display:block; height:100%; width:auto; max-width:100%;
  aspect-ratio:1; margin:0 auto; overflow:visible;
}
[data-cs-kivo-mount]{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; min-height:0;
}

/* --cs-alto lo calcula el script del snipplet; el calc es el respaldo
   por si el JS no corre. */
.cs-game-scene[data-cs-active]{
  /* border-box o el relleno se suma por fuera: medido en producción,
     la escena salía 647 px cuando se le pedían 613. */
  box-sizing:border-box;
  height:var(--cs-alto, calc(100dvh - var(--cs-head,108px)));
  min-height:440px;
  padding:clamp(6px,1.1vh,14px) var(--mg-s5) clamp(8px,1.3vh,16px);
  justify-content:flex-start;
  /* Desplazar antes que cortar: si en algún teléfono el contenido no
     cupiera, se desliza un poco en vez de perderse la tira de combos.
     Cuando cabe —que es lo normal— no aparece barra ninguna. */
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.cs-game-scene[data-cs-active]::-webkit-scrollbar{ display:none; }
.cs-game-explore[data-cs-active]{
  height:100%; align-content:stretch;
  gap:clamp(6px,1.1vh,14px) var(--mg-s5);
}
.cs-game-stage{ min-height:0; height:100%; }
.cs-game-actions{ align-self:center; }

/* Una fila elástica por composición: la del escenario. */
@media (min-width:1080px){
  .cs-game-explore[data-cs-active]{ grid-template-rows:auto minmax(0,1fr) auto auto; }
}
@media (min-width:721px) and (max-width:1079px){
  .cs-game-explore[data-cs-active]{ grid-template-rows:auto minmax(0,1fr) auto auto auto; }
}
@media (max-width:720px){
  .cs-game-explore[data-cs-active]{ grid-template-rows:auto minmax(96px,1fr) auto auto auto auto; }
  .cs-game-scene[data-cs-active]{ padding-left:var(--mg-s4); padding-right:var(--mg-s4); }
}

/* Pantallas muy bajas (portátiles pequeños, móvil apaisado): antes de
   aplastarlo todo, se permite desplazar dentro de la escena. */
@media (max-height:430px){
  .cs-game-scene[data-cs-active]{ height:auto; min-height:0; overflow:visible; }
  .cs-game-explore[data-cs-active]{ grid-template-rows:none; }
}

/* ══════════════════════════════════════════════════════════════════
   MÓVIL · QUE LA ENTRADA QUEPA (7 ago 2026)
   Medido con la página montada en local: a 390x844 se salía por 9 px y
   a 360x640 por 139. El arte de KIVO se comía el 53% del alto.
   Ahora el arte es una fila elástica con tope, y el texto manda.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  .cs-game-intro[data-cs-active]{ justify-content:flex-start; gap:clamp(6px,1.4vh,14px); }
  .cs-game-intro__inner{
    height:100%;
    grid-template-rows:minmax(96px,1fr) auto;
    gap:clamp(6px,1.4vh,14px);
    align-items:center;
  }
  .cs-game-intro__art{ min-height:0; height:100%; align-items:center; }
  .cs-game-intro__art .cs-game-kivo{ height:100%; max-height:min(34vh,300px); width:auto; }

  /* El titular ocupaba tres líneas y empujaba todo hacia abajo. */
  .cs-game-intro .cs-game-title{ font-size:clamp(30px,9.2vw,44px); line-height:1.04; }
  .cs-game-intro .cs-game-lead{ font-size:clamp(14px,3.8vw,16px); line-height:1.42; }
  .cs-game-intro__meta{ margin-top:clamp(8px,1.6vh,16px); gap:6px; }
  .cs-game-intro__meta li{ font-size:10px; padding:6px 9px; letter-spacing:.09em; }
  .cs-game-intro .cs-game-btn{ min-height:48px; }
}
/* Teléfonos cortos: el arte cede primero, y si aun así no llega, se desliza. */
@media (max-width:720px) and (max-height:700px){
  .cs-game-intro__art .cs-game-kivo{ max-height:min(26vh,210px); }
  .cs-game-intro__meta li:nth-child(n+4){ display:none; }
}

/* KIVO ocupaba solo el 56% de su propio lienzo: el resto es el margen que
   necesitan los anillos en órbita. En la entrada no hay anillos girando,
   así que ahí se le deja crecer y llenar el círculo. */
@media (max-width:720px){
  /* Con .cs-game-intro no bastaba: las reglas de rareza
     (.cs-game[data-cs-tier="N"] .cs-game-kivo__crece) le ganaban por
     especificidad y el robot no crecía. */
  .cs-game [data-cs-scene="intro"] .cs-game-kivo__crece{ --k:1.18; }
  .cs-game [data-cs-scene="intro"] .cs-game-kivo__aura{ opacity:.10; filter:blur(10px); }
}

/* En la exploración KIVO se quedaba en 136 px dentro de un círculo el
   doble de grande. Mismo remedio: crece dentro de su lienzo y el aura
   se afina. No cambia la altura de la fila, solo cómo se lee. */
@media (max-width:720px){
  .cs-game [data-cs-scene="explore"] .cs-game-kivo__crece{ --k:1.15; }
  .cs-game [data-cs-scene="explore"] .cs-game-kivo__aura{ opacity:.11; filter:blur(9px); }
}
/* Teléfonos cortos: se recorta lo prescindible antes que dejar scroll. */
@media (max-width:720px) and (max-height:700px){
  .cs-game-explore .cs-game-hint,
  .cs-game-explore .cs-game-actions > p:last-child{ display:none; }
  .cs-game-card{ padding:var(--mg-s3); }
  .cs-game-card__name{ font-size:clamp(22px,6.6vw,30px); }
  .cs-game-note{ display:none; }
  .cs-game-loot__grid{ gap:6px; }
}

/* ══════════════════════════════════════════════════════════════════
   BOTONES Y TARJETA  (7 ago 2026, avisos de Miguel desde el móvil)
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · El botón flotante era invisible ──────────────────────────
   Estaba colgado FUERA de .cs-game, así que no heredaba --r ni --rt.
   El degradado quedaba inválido, el fondo salía en 'none' y el botón
   se veía transparente con texto oscuro sobre fondo oscuro. Medido:
   background-image devolvía "none". Ahora lleva color propio y las
   variables solo lo matizan si existen.                             */
.cs-flotante{
  background:linear-gradient(100deg,#7C3AED,#C9B0FF);
  color:#0A0A0B;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 16px 38px -10px rgba(0,0,0,.8), 0 0 0 4px rgba(124,58,237,.22);
}
.cs-flotante__cuenta{ background:rgba(0,0,0,.30); color:#fff; }
.cs-flotante__kivo .m-casco{ fill:#fff; stroke:#0A0A0B; stroke-width:3.4; }
.cs-flotante__kivo .m-visor{ fill:#12182A; }
.cs-flotante__kivo .m-ojo{ fill:#fff; }
.cs-flotante__kivo .m-antena{ stroke:#0A0A0B; }
.cs-flotante__kivo .m-bola{ fill:#0A0A0B; }

/* ── 2 · Las llamadas a la acción no dependen de la rareza ────────
   Con el nivel 1 la rareza es gris y el botón quedaba apagado. El
   color de rareza sigue mandando en la insignia, el borde de la
   tarjeta, el precio y KIVO; el botón va siempre en violeta de marca
   para que se vea sí o sí, con el halo teñido de la rareza.         */
.cs-game-btn--primary,
.cs-game-btn--exit{
  background:linear-gradient(100deg,#7C3AED,#C9B0FF);
  color:#0A0A0B !important;
  border:1px solid rgba(255,255,255,.18);
}
.cs-game-btn--primary{ box-shadow:0 0 0 0 var(--r-soft), 0 18px 40px -20px rgba(0,0,0,.9); }
.cs-game-btn--exit:hover,
.cs-game-btn--primary:hover{ box-shadow:0 0 0 8px var(--r-soft), 0 22px 46px -22px rgba(0,0,0,.9); }
.cs-game-btn--primary[disabled]{ opacity:.42; filter:saturate(.5); }

/* ── 3 · La tarjeta no puede solaparse ────────────────────────────
   Miguel vio el precio montado encima de «JUEGOS QUE ELIGES». No se
   reprodujo en local (allí no carga la tipografía de la tienda), así
   que en vez de perseguirlo se elimina la causa posible: se apila con
   separación propia en lugar de márgenes, que es lo que puede
   descuadrarse cuando la fuente real es más alta de lo previsto.    */
.cs-game-card{
  display:flex; flex-direction:column; gap:var(--mg-s3);
  min-width:0;
}
.cs-game-card > *{ margin-top:0 !important; margin-bottom:0 !important; }
.cs-game-card__specs{ margin:0 !important; }
.cs-game-card__specs li{ min-width:0; }
.cs-game-card__specs span{ overflow-wrap:anywhere; }
.cs-game-price{ margin:0 !important; align-items:baseline; flex-wrap:wrap; }

@media (max-width:720px){
  .cs-game-card{ gap:clamp(8px,1.5vh,14px); }
  .cs-game-card__specs span{ font-size:9.5px; letter-spacing:.10em; }
}

/* ── 4 · La pantalla final tenía el KIVO antiguo ──────────────────
   La celebración usaba un SVG propio (cs-hero__svg) que se quedó con
   la figura geométrica morada de antes: el cliente veía el robot
   blanco tres pantallas y otro personaje distinto en la última.
   Ahora es el mismo robot. Se le deja el ancho del hueco en vez del
   alto completo, que es como se dimensiona el resto.               */
.cs-hero__svg.cs-game-kivo{ width:100%; height:auto; margin:0 auto; }

/* ── 5 · El botón de pagar también se quedaba abajo ───────────────
   En el móvil el ticket es largo y «Continuar a la compra» caía a
   985 px, fuera de la pantalla. Se queda pegado al borde inferior
   mientras se desplaza el ticket, igual que el flotante de la
   pantalla de elegir juegos.                                       */
/* Con sticky no bastaba: medido, seguía cayendo en 985 px porque el
   botón no comparte caja de desplazamiento con la escena. En el móvil
   se ancla al borde inferior, desplazado a la izquierda para no
   chocar con el botón de WhatsApp. */
@media (max-width:720px){
  .cs-game-dest{ padding-bottom:86px; }
  .cs-game-dest .cs-game-btn--exit{
    position:fixed; left:calc(50% - 34px); transform:translateX(-50%);
    bottom:16px; z-index:60; width:min(300px,72vw); max-width:none; min-height:52px;
    box-shadow:0 16px 38px -10px rgba(0,0,0,.85), 0 0 0 4px rgba(124,58,237,.20);
  }
}

/* ══════════════════════════════════════════════════════════════════
   PANTALLA DE UNIVERSOS  (8 ago 2026)
   Pedido de Miguel: al escoger el combo, primero se elige universo y
   dentro de él los juegos. Las tarjetas se generan solas según el
   catálogo, así que la rejilla se adapta a cuantas haya.
   ══════════════════════════════════════════════════════════════════ */
.cs-game-univ-esc{ gap:clamp(8px,1.6vh,18px); }
.cs-game-univ-esc[data-cs-active]{
  display:flex; flex-direction:column;
  max-width:1180px; margin:0 auto; width:100%;
}
.cs-univ__head{ text-align:center; flex:0 0 auto; }
.cs-univ__head .cs-pick__sub{ margin:.4em auto 0; max-width:52ch; }

.cs-univ__grid{
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  display:grid; gap:clamp(8px,1.2vw,14px);
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  align-content:start; padding:2px;
  scrollbar-width:none;
}
.cs-univ__grid::-webkit-scrollbar{ display:none; }
.cs-univ__pie{ flex:0 0 auto; display:flex; justify-content:center; }

.cs-univ{
  display:flex; flex-direction:column; gap:5px; text-align:left;
  min-height:82px; padding:14px 16px; cursor:pointer;
  border-radius:var(--mg-r-v4);
  border:1px solid var(--cs-line);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),var(--cs-surface);
  color:var(--cs-text);
  transition:transform .3s var(--mg-ease-pill), border-color .3s linear, box-shadow .3s var(--mg-ease-card);
}
.cs-univ:hover{
  transform:translateY(-3px);
  border-color:color-mix(in oklab,var(--r) 55%,transparent);
  box-shadow:0 0 0 1px var(--r-soft), 0 22px 44px -26px rgba(0,0,0,.9);
}
.cs-univ:active{ transform:translateY(0) scale(.99); }
.cs-univ__n{ font-size:15px; font-weight:800; letter-spacing:-.01em; line-height:1.2; }
.cs-univ__c{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cs-text-2); }
.cs-univ--todos{
  border-color:color-mix(in oklab,var(--r) 45%,transparent);
  background:linear-gradient(140deg,var(--r-soft),transparent 70%),var(--cs-surface);
}
.cs-univ--todos .cs-univ__n{ color:var(--rt); }

@media (max-width:720px){
  .cs-univ__grid{ grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:8px; }
  .cs-univ{ min-height:70px; padding:11px 12px; }
  .cs-univ__n{ font-size:13.5px; }
  .cs-univ__c{ font-size:10px; letter-spacing:.10em; }
  .cs-game-univ-esc .cs-game-title{ font-size:clamp(24px,7.4vw,34px); }
}