/* =========================================================
   WAI CATS — Sistema de diseño
   "Cuidar también es una aventura"
   Paleta y estilo tomados de la hoja de estilo oficial.
   ========================================================= */

/* La tipografia Baloo 2 se carga con un <link> en waicats.html (mas rapido) */

:root{
  /* Paleta "atardecer": lavanda, melocoton y turquesa manda; el rosa es un detalle */
  --wc-lavanda:#B9A7F0;  --wc-lila:#D8CBFF;
  --wc-melocoton:#FFC48F; --wc-melocoton-osc:#EF9D5F;
  --wc-turquesa:#7FD0C8;  --wc-turquesa-cl:#B2E6E0;
  --wc-mostaza:#FFD066;   --wc-coral:#FF9A86;
  --wc-crema:#FFF4E4;     --wc-crema-osc:#F3E2C9;
  --wc-salvia:#A9C9A4;    --wc-cielo:#CFE4FF;
  --wc-rosa:#F7B6CE;      --wc-gris:#D6D2DE;
  --wc-gris-osc:#6F6B7A;  --wc-madera:#C79A6B;
  /* Compatibilidad con nombres antiguos */
  --wc-durazno:var(--wc-melocoton);
  --wc-menta:var(--wc-turquesa-cl);
  --wc-amarillo:var(--wc-mostaza);
  --wc-coral2:#FFB7A0;
  --wc-lima:#CFF0B6;
  --wc-marron:var(--wc-madera);
  /* Derivados */
  --wc-texto:#4d4557;
  --wc-texto-suave:#847c93;
  --wc-rosa-osc:#e07a63;
  --wc-lila-osc:#7d63c9;
  --wc-menta-osc:#4faea3;
  --wc-sombra:rgba(110,92,140,.18);
  --wc-radio:26px;
}

/* ---------- Base ---------- */
.wc-body{
  font-family:'Nunito',sans-serif;
  color:var(--wc-texto);
  background:
    radial-gradient(ellipse at 8% 0%, #ffd9b8 0%, transparent 55%),
    radial-gradient(ellipse at 92% 4%, #ddd0ff 0%, transparent 52%),
    radial-gradient(ellipse at 50% 100%, #c9ece6 0%, transparent 58%),
    var(--wc-crema);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
.wc-body *{ -webkit-user-select:none; user-select:none; }
.wc-body input{ -webkit-user-select:text; user-select:text; }

.wc-titulo{ font-family:'Baloo 2','Nunito',sans-serif; font-weight:800; line-height:1.1; }

/* Huellitas decorativas de fondo */
.wc-huellas{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:
   radial-gradient(circle at 12% 22%, #ffc48f 0 8px, transparent 9px),
   radial-gradient(circle at 88% 62%, #d8cbff 0 10px, transparent 11px),
   radial-gradient(circle at 25% 82%, #b2e6e0 0 7px, transparent 8px),
   radial-gradient(circle at 72% 12%, #ffd066 0 6px, transparent 7px);
}

/* ---------- Contenedor ---------- */
.wc-wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 .9rem 5.5rem;}

/* ---------- Paneles ---------- */
.wc-panel{
  background:rgba(255,255,255,.86);
  border:3px solid #fff;
  border-radius:var(--wc-radio);
  box-shadow:0 10px 28px var(--wc-sombra);
  padding:1.1rem 1.2rem;
}
.wc-panel-crema{ background:linear-gradient(180deg,#fffdf7,#fff4e6); }
.wc-panel-rosa { background:linear-gradient(180deg,#fff4ea,#ffe6d4); }
.wc-panel-lila { background:linear-gradient(180deg,#f5f1ff,#e8e0ff); }

/* ---------- Botones caramelo ---------- */
.wc-btn{
  font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:1.05rem;
  border:none;border-radius:999px;color:#fff;cursor:pointer;
  padding:.68em 1.5em;display:inline-flex;align-items:center;gap:.5em;
  justify-content:center;text-decoration:none;line-height:1.2;
  transition:transform .12s ease, box-shadow .12s ease, filter .15s;
  position:relative;
}
.wc-btn::after{content:'';position:absolute;inset:3px 3px 55% 3px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);pointer-events:none;}
.wc-btn:active{transform:translateY(4px);}
.wc-btn[disabled]{filter:grayscale(.55) brightness(1.05);cursor:not-allowed;opacity:.75;}
.wc-btn[disabled]:active{transform:none;}

.wc-btn-rosa   {background:linear-gradient(180deg,#ffb894,#ff9377);box-shadow:0 5px 0 #e07050,0 9px 18px rgba(224,112,80,.3);}
.wc-btn-rosa:active{box-shadow:0 1px 0 #e07050,0 4px 10px rgba(224,112,80,.28);}
.wc-btn-lila   {background:linear-gradient(180deg,#cbbcfb,#a893ee);box-shadow:0 5px 0 #7a63c9,0 9px 18px rgba(122,99,201,.3);}
.wc-btn-lila:active{box-shadow:0 1px 0 #7a63c9,0 4px 10px rgba(122,99,201,.28);}
.wc-btn-menta  {background:linear-gradient(180deg,#a7e4dd,#7ccfc6);box-shadow:0 5px 0 #46a79c,0 9px 18px rgba(70,167,156,.3);color:#24605a;}
.wc-btn-menta:active{box-shadow:0 1px 0 #46a79c,0 4px 10px rgba(70,167,156,.28);}
.wc-btn-amar   {background:linear-gradient(180deg,#ffe9a0,#ffd968);box-shadow:0 5px 0 #e0ac33,0 9px 18px rgba(224,172,51,.28);color:#7a5a12;}
.wc-btn-amar:active{box-shadow:0 1px 0 #e0ac33,0 4px 10px rgba(224,172,51,.26);}
.wc-btn-cielo  {background:linear-gradient(180deg,#bfe2ff,#95c9f7);box-shadow:0 5px 0 #5a9bd0,0 9px 18px rgba(90,155,208,.28);color:#26536f;}
.wc-btn-cielo:active{box-shadow:0 1px 0 #5a9bd0,0 4px 10px rgba(90,155,208,.26);}
.wc-btn-gris   {background:linear-gradient(180deg,#eae6ef,#d7d1dd);box-shadow:0 5px 0 #b0a8b8,0 9px 16px rgba(140,130,150,.22);color:#6a5f70;}
.wc-btn-gris:active{box-shadow:0 1px 0 #b0a8b8;}
.wc-btn-xl{font-size:1.35rem;padding:.72em 2.2em;}
.wc-btn-sm{font-size:.9rem;padding:.55em 1.1em;}

/* ---------- Píldoras de moneda ---------- */
.wc-pill{
  display:inline-flex;align-items:center;gap:.35em;
  background:#fff;border:3px solid #fff;border-radius:999px;
  padding:.22em .7em .22em .3em;font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;
  box-shadow:0 4px 12px var(--wc-sombra);font-size:1rem;color:var(--wc-texto);
  background:linear-gradient(180deg,#fffdf8,#fff2e2);
}
.wc-pill .ico{font-size:1.15em;line-height:1;}
.wc-pill.moneda{background:linear-gradient(180deg,#fff6d8,#ffe9a8);}
.wc-pill.corazon{background:linear-gradient(180deg,#ffeee8,#ffd6c9);}
.wc-pill.racha{background:linear-gradient(180deg,#ffe9d6,#ffd3ad);}

/* ---------- Barra superior del juego ---------- */
.wc-topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.55rem .7rem;margin:0 -.9rem .8rem;
  background:rgba(255,253,248,.92);
  backdrop-filter:blur(8px);
  border-bottom:3px solid #fff;
  box-shadow:0 4px 16px rgba(122,90,130,.13);
}
.wc-yo{display:flex;align-items:center;gap:.5rem;background:linear-gradient(180deg,#fff,#fdf2e6);
  border:3px solid #fff;border-radius:999px;padding:.2rem .8rem .2rem .2rem;
  box-shadow:0 4px 12px var(--wc-sombra);cursor:pointer;}
.wc-yo .cara{width:38px;height:38px;border-radius:50%;background:var(--wc-rosa);
  overflow:hidden;flex-shrink:0;display:grid;place-items:center;border:2px solid #fff;}
.wc-yo .cara img{width:100%;height:100%;object-fit:cover;object-position:50% 6%;}
.wc-yo .txt{line-height:1.05}
.wc-yo .nom{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:.95rem;}
.wc-yo .niv{font-size:.68rem;font-weight:800;color:var(--wc-texto-suave);}
.wc-xp{height:7px;border-radius:99px;background:#f0e6ee;overflow:hidden;width:88px;margin-top:2px;}
.wc-xp i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ffd066,#a893ee);transition:width .4s;}
.wc-topbar .sep{flex:1}

/* ---------- Navegación inferior ---------- */
.wc-nav{
  position:fixed;left:50%;transform:translateX(-50%);bottom:.6rem;z-index:50;
  display:flex;gap:.15rem;padding:.35rem;
  background:rgba(255,253,248,.95);backdrop-filter:blur(10px);
  border:3px solid #fff;border-radius:999px;
  box-shadow:0 8px 26px rgba(122,90,130,.25);
  max-width:calc(100vw - 1.2rem);overflow-x:auto;scrollbar-width:none;
}
.wc-nav::-webkit-scrollbar{display:none}
.wc-nav button{
  border:none;background:transparent;cursor:pointer;border-radius:999px;
  padding:.35rem .7rem;display:flex;flex-direction:column;align-items:center;gap:.1rem;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.62rem;color:var(--wc-texto-suave);
  min-width:58px;transition:background .2s,color .2s;position:relative;
}
.wc-nav button .i{font-size:1.25rem;line-height:1}
.wc-nav button.on{background:linear-gradient(180deg,#cbbcfb,#a893ee);color:#fff;box-shadow:0 3px 0 #7a63c9;}
.wc-nav button .punto{position:absolute;top:2px;right:6px;width:9px;height:9px;border-radius:50%;
  background:#ff8a5c;border:2px solid #fff;display:none}
.wc-nav button.aviso .punto{display:block}

/* ---------- Cabecera de pantalla ---------- */
.wc-cinta{
  display:block;margin:.2rem auto 1rem;text-align:center;
  font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:clamp(1.35rem,4.4vw,2rem);
  color:#fff;padding:.35em 1.6em;border-radius:999px;
  background:linear-gradient(100deg,#ffb490,#c9aef4);
  border:3px solid #fff;
  box-shadow:0 6px 0 #a58ad8,0 12px 26px rgba(150,120,200,.28);
  text-shadow:0 2px 0 rgba(0,0,0,.10);
  max-width:max-content;
}
.wc-sub{text-align:center;color:var(--wc-texto-suave);font-weight:700;font-size:.9rem;margin:-.6rem 0 1.2rem;}

/* ---------- Tarjetas de local ---------- */
.wc-locales{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));}
.wc-local{
  border:4px solid #fff;border-radius:30px;overflow:hidden;position:relative;
  box-shadow:0 12px 30px var(--wc-sombra);background:#fff;
  cursor:pointer;transition:transform .25s,box-shadow .25s;text-align:center;
  display:flex;flex-direction:column;
}
.wc-local:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(122,90,130,.28);}
.wc-local .foto{height:190px;background-size:cover;background-position:center top;position:relative;}
.wc-local .foto::after{content:'';position:absolute;inset:auto 0 0 0;height:55%;
  background:linear-gradient(transparent,rgba(255,246,232,.96));}
.wc-local .cuerpo{padding:.2rem 1rem 1.1rem;margin-top:-1.6rem;position:relative;background:linear-gradient(180deg,#fff6e8,#fff);}
.wc-local h3{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:1.3rem;margin-bottom:.15rem;}
.wc-local p{font-size:.82rem;color:var(--wc-texto-suave);font-weight:700;margin-bottom:.8rem;min-height:2.4em}
.wc-local.bloq .foto{filter:grayscale(.7) brightness(1.06)}
.wc-local .candado{position:absolute;inset:0;display:grid;place-items:center;font-size:3rem;
  background:rgba(255,255,255,.35);backdrop-filter:blur(2px);}
.wc-local .insignia{position:absolute;top:.6rem;right:.6rem;font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;
  font-size:.75rem;color:#fff;background:linear-gradient(180deg,#c9b6ff,#a98cf5);
  padding:.2em .8em;border-radius:999px;border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.15)}

/* ---------- Rejilla genérica de tarjetas ---------- */
.wc-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));}
.wc-card{
  background:linear-gradient(180deg,#fffdf8,#fff3e6);
  border:3px solid #fff;border-radius:22px;padding:.8rem .7rem;text-align:center;
  box-shadow:0 6px 18px var(--wc-sombra);position:relative;transition:transform .2s;
}
.wc-card.clic{cursor:pointer}
.wc-card.clic:active{transform:scale(.97)}
.wc-card h4{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:1rem;margin-bottom:.15rem}
.wc-card .desc{font-size:.72rem;color:var(--wc-texto-suave);font-weight:700;line-height:1.3;min-height:2.6em}
.wc-card .sprite{width:100%;height:88px;object-fit:contain;display:block;margin:0 auto .3rem;
  filter:drop-shadow(0 5px 8px rgba(122,90,130,.2))}
.wc-card.sel{border-color:var(--wc-coral);box-shadow:0 0 0 4px #ffe0ea,0 8px 22px var(--wc-sombra)}
.wc-card .tick{position:absolute;top:-8px;right:-8px;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(180deg,#cbbcfb,#a893ee);color:#fff;display:grid;place-items:center;
  border:3px solid #fff;font-weight:900;box-shadow:0 3px 8px rgba(0,0,0,.18)}
.wc-card.bloq{filter:grayscale(.6);opacity:.85}

/* ---------- Estrellas ---------- */
.wc-estrellas{font-size:.85rem;letter-spacing:1px;color:#ffc93c}
.wc-estrellas i{opacity:.25;font-style:normal}
.wc-estrellas i.on{opacity:1}

/* ---------- Barras ---------- */
.wc-barra{height:12px;border-radius:99px;background:#efe6ee;overflow:hidden;border:2px solid #fff;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.wc-barra i{display:block;height:100%;border-radius:99px;transition:width .25s linear}
.wc-barra.v i{background:linear-gradient(90deg,#a7e4dd,#7ccfc6)}
.wc-barra.a i{background:linear-gradient(90deg,#ffe9a0,#ffd968)}
.wc-barra.r i{background:linear-gradient(90deg,#ffc3a8,#ff9377)}

/* =========================================================
   INTERFAZ DEL JUEGO 3D
   ========================================================= */
.wc-mundo{
  position:relative;width:100%;
  border:4px solid #fff;border-radius:28px;overflow:hidden;
  box-shadow:0 12px 34px var(--wc-sombra);
  background:linear-gradient(180deg,#cfe0f7,#ffe4c9);
  touch-action:none;cursor:grab;margin-bottom:.8rem;
}
.wc-mundo:active{cursor:grabbing}
.wc-lienzo{display:block;width:100%;height:100%}

/* Aviso mientras carga la escena */
.wc-cargando3d{
  position:absolute;inset:0;z-index:30;display:grid;place-items:center;
  background:linear-gradient(180deg,#fff6e8,#ffe6cf);
  font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;color:#8d7fa5;font-size:1rem;
}

/* Mando (joystick) */
.wc-joy{
  position:absolute;left:1rem;bottom:1rem;z-index:22;
  width:112px;height:112px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.85), rgba(230,220,250,.55));
  border:3px solid rgba(255,255,255,.95);
  box-shadow:0 6px 20px rgba(90,70,110,.25), inset 0 2px 10px rgba(255,255,255,.5);
  touch-action:none;transition:opacity .25s, transform .15s;opacity:.85;
}
.wc-joy.activo{opacity:1;transform:scale(1.04)}
.wc-joy.libre{position:absolute}
.wc-joy .bola{
  position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;
  border-radius:50%;
  background:linear-gradient(180deg,#ffffff,#e6dcff);
  border:3px solid #fff;
  box-shadow:0 4px 12px rgba(90,70,110,.3);
  transition:transform .06s linear;
}
.wc-joy::after{
  content:'🐾';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:1.1rem;opacity:.35;pointer-events:none;
}

/* Bandeja: qué llevas encima */
.wc-bandeja3d{
  position:absolute;right:.7rem;bottom:.9rem;z-index:22;display:flex;gap:.35rem;
}
.wc-bandeja3d .hueco{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-size:1.35rem;line-height:1;
  background:rgba(255,253,248,.72);border:3px dashed rgba(150,130,170,.45);
  box-shadow:0 4px 12px rgba(90,70,110,.22);
}
.wc-bandeja3d .hueco.lleno{
  background:linear-gradient(180deg,#fffdf8,#ffeed8);
  border-style:solid;border-color:#fff;
  animation:wcPop .25s cubic-bezier(.34,1.56,.64,1) both;
}

/* Banner de hora punta */
.wc-rush{
  position:absolute;left:50%;top:2.9rem;transform:translateX(-50%);z-index:23;
  font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:.82rem;color:#fff;
  background:linear-gradient(90deg,#ff9a5c,#ff7a7a);border:3px solid #fff;border-radius:999px;
  padding:.18rem .95rem;box-shadow:0 5px 18px rgba(255,122,90,.5);
  animation:wcLatido .7s infinite;white-space:nowrap;
}

/* Cofre de racha */
.wc-cofre-caja{
  font-size:6rem;line-height:1.1;cursor:pointer;user-select:none;
  display:inline-block;transition:transform .1s;
  filter:drop-shadow(0 10px 16px rgba(150,110,60,.4));
}
.wc-cofre-caja:active{transform:scale(.92)}
.wc-cofre-caja.golpe{animation:wcCofreGolpe .3s}
@keyframes wcCofreGolpe{
  0%{transform:rotate(0) scale(1)}
  30%{transform:rotate(-8deg) scale(1.08)}
  60%{transform:rotate(7deg) scale(1.05)}
  100%{transform:rotate(0) scale(1)}
}
.wc-cofre-toques{display:flex;gap:.5rem;justify-content:center;margin:.6rem 0}
.wc-cofre-toques span{
  width:16px;height:16px;border-radius:50%;background:#eadfd0;border:2px solid #fff;
  box-shadow:0 2px 6px rgba(150,110,60,.25);transition:background .2s, transform .2s;
}
.wc-cofre-toques span.on{background:linear-gradient(180deg,#ffe4a0,#ffc95c);transform:scale(1.25)}

/* Tarjeta de cofre pendiente en el inicio */
.wc-cofre-tarjeta{
  display:flex;align-items:center;gap:.8rem;cursor:pointer;
  background:linear-gradient(100deg,#fff3d6,#ffe3c2);
  border:3px solid #fff;border-radius:22px;padding:.7rem 1rem;margin-bottom:1rem;
  box-shadow:0 8px 22px rgba(210,150,80,.28);
  animation:wcLatido 1.6s infinite;
}
.wc-cofre-tarjeta .caja{font-size:2.4rem;line-height:1}
.wc-cofre-tarjeta h4{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:1rem;margin:0}
.wc-cofre-tarjeta p{font-size:.76rem;font-weight:800;color:#9a7c50;margin:0}

/* Pista de qué hacer ahora */
.wc-pista{
  position:absolute;left:50%;top:.7rem;transform:translateX(-50%);z-index:22;
  font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:.86rem;
  color:#4d4557;background:rgba(255,253,248,.9);
  border:3px solid #fff;border-radius:999px;padding:.2rem .95rem;
  box-shadow:0 5px 16px rgba(90,70,110,.22);
  max-width:78%;text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}

/* HUD de partida */
.wc-hud{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  padding:.5rem .6rem;background:linear-gradient(180deg,#fffdf8,#fff2e4);
  border:3px solid #fff;border-radius:20px;margin-bottom:.45rem;
  box-shadow:0 6px 18px var(--wc-sombra);
  position:sticky;top:.35rem;z-index:38}
.wc-hud .sep{flex:1}
.wc-reloj{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;display:flex;align-items:center;gap:.3rem;
  background:linear-gradient(180deg,#e6f1ff,#cfe1fb);border:3px solid #fff;border-radius:999px;
  padding:.15em .7em;box-shadow:0 4px 12px var(--wc-sombra);color:#3f6285}
.wc-reloj.poco{background:linear-gradient(180deg,#ffe6dc,#ffc9b4);color:#a8543c;animation:wcLatido .8s infinite}
.wc-combo{position:absolute;top:.55rem;right:.7rem;z-index:24;
  font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;color:#fff;padding:.15em .8em;border-radius:999px;
  background:linear-gradient(180deg,#ffd88a,#ffb04a);border:3px solid #fff;
  box-shadow:0 4px 12px rgba(255,176,74,.45);animation:wcPop .3s both}

/* Objetivos del turno */
.wc-objs{display:grid;gap:.3rem;margin-bottom:.8rem}
.wc-obj{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.8);
  border:3px solid #fff;border-radius:16px;padding:.4rem .7rem;box-shadow:0 4px 12px var(--wc-sombra)}
.wc-obj .tick{width:22px;height:22px;border-radius:50%;border:2.5px solid #ded4dc;display:grid;
  place-items:center;font-size:.8rem;flex-shrink:0;color:transparent}
.wc-obj.ok .tick{background:linear-gradient(180deg,#a7e4dd,#7ccfc6);border-color:#fff;color:#24605a}
.wc-obj .t{font-weight:800;font-size:.84rem;flex:1}
.wc-obj .p{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:.84rem;color:var(--wc-coral)}
.wc-obj.ok .t{color:var(--wc-texto-suave)}

/* Efectos flotantes */
.wc-fx{position:absolute;pointer-events:none;z-index:60;font-family:'Baloo 2','Nunito',sans-serif;
  font-weight:800;font-size:1.15rem;animation:wcSube 1s ease-out forwards;
  text-shadow:0 2px 0 #fff,0 0 8px #fff}
.wc-fx.mon{color:#e0a01c}
.wc-fx.cor{color:#ff5c8a}
.wc-fx.xp{color:#8a6fd6}
.wc-fx.mal{color:#b0a4ae;font-size:1rem}
.wc-brillo{position:absolute;pointer-events:none;z-index:59;font-size:1.3rem;
  animation:wcBrilla .8s ease-out forwards}

/* Aviso flotante (toast) */
.wc-toasts{position:fixed;left:50%;transform:translateX(-50%);top:.7rem;z-index:200;
  display:grid;gap:.35rem;width:min(92vw,420px);pointer-events:none}
.wc-toast{background:linear-gradient(180deg,#fffdf8,#fff0e0);border:3px solid #fff;border-radius:18px;
  padding:.55rem .9rem;box-shadow:0 8px 24px rgba(122,90,130,.3);font-weight:800;font-size:.88rem;
  display:flex;align-items:center;gap:.55rem;animation:wcToast 3.4s ease both}
.wc-toast .i{font-size:1.4rem}
.wc-toast.logro{background:linear-gradient(180deg,#fff4d6,#ffe6a8)}

/* Modales */
.wc-modal-bg{position:fixed;inset:0;z-index:300;background:rgba(92,74,88,.5);
  backdrop-filter:blur(4px);display:grid;place-items:center;padding:1rem;
  animation:wcFade .25s both;overflow-y:auto}
.wc-modal{background:linear-gradient(180deg,#fffdf8,#fff2e4);border:4px solid #fff;
  border-radius:30px;box-shadow:0 20px 50px rgba(60,40,60,.35);padding:1.3rem 1.2rem;
  width:min(94vw,520px);text-align:center;animation:wcPop .35s cubic-bezier(.34,1.56,.64,1) both;
  max-height:92vh;overflow-y:auto}
.wc-modal h2{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:1.6rem;margin-bottom:.2rem}
.wc-modal .cerrar{position:absolute;top:.6rem;right:.7rem}

/* Resumen del día */
.wc-resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:.5rem;margin:.9rem 0}
.wc-resumen .celda{background:#fff;border:3px solid #fff;border-radius:18px;padding:.5rem .3rem;
  box-shadow:0 5px 14px var(--wc-sombra)}
.wc-resumen .celda .ic{font-size:1.5rem}
.wc-resumen .celda .v{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:1.3rem;color:var(--wc-coral)}
.wc-resumen .celda .t{font-size:.66rem;font-weight:800;color:var(--wc-texto-suave);line-height:1.2}
.wc-celebra{width:100%;border-radius:22px;border:3px solid #fff;display:block;margin-bottom:.4rem}

/* Racha */
.wc-racha-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem;margin:.8rem 0}
.wc-dia{border:3px solid #fff;border-radius:14px;padding:.4rem .1rem;text-align:center;
  background:linear-gradient(180deg,#fff,#f4eef6);box-shadow:0 4px 10px var(--wc-sombra)}
.wc-dia .d{font-size:.6rem;font-weight:800;color:var(--wc-texto-suave)}
.wc-dia .p{font-size:1.15rem;line-height:1.2}
.wc-dia.ok{background:linear-gradient(180deg,#ffe4b0,#ffc987)}
.wc-dia.hoy{border-color:var(--wc-coral);box-shadow:0 0 0 3px #ffe0ea,0 4px 10px var(--wc-sombra)}

/* Ficha de gatito */
.wc-ficha{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center;text-align:left}
.wc-ficha img{width:118px;filter:drop-shadow(0 8px 10px rgba(122,90,130,.3))}
.wc-hab{display:inline-flex;align-items:center;gap:.3rem;background:#fff;border:2.5px solid #fff;
  border-radius:999px;padding:.15rem .6rem;font-size:.72rem;font-weight:800;
  box-shadow:0 3px 8px var(--wc-sombra);margin:.15rem .15rem 0 0}

/* Mejoras */
.wc-mejora .precio{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800}
.wc-mejora .niv{font-size:.66rem;font-weight:800;color:var(--wc-lila-osc)}

/* Registro */
.wc-reg-inp{width:100%;padding:.7rem 1rem;border:3px solid #fff;border-radius:16px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:1rem;text-align:center;
  background:#fff;box-shadow:inset 0 2px 6px rgba(0,0,0,.06),0 4px 12px var(--wc-sombra);
  color:var(--wc-texto)}
.wc-reg-inp:focus{outline:none;border-color:var(--wc-coral)}
.wc-elige-gatos{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin:.9rem 0}
.wc-elige-gatos .g{border:3px solid #fff;border-radius:16px;padding:.3rem .1rem;cursor:pointer;
  background:linear-gradient(180deg,#fff,#fff2f7);box-shadow:0 4px 10px var(--wc-sombra);transition:transform .15s}
.wc-elige-gatos .g img{width:100%;display:block}
.wc-elige-gatos .g .n{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:.68rem}
.wc-elige-gatos .g.sel{border-color:var(--wc-coral);box-shadow:0 0 0 4px #ffe0ea,0 6px 16px var(--wc-sombra);transform:translateY(-3px)}

/* Hero */
.wc-hero{position:relative;border-radius:0 0 34px 34px;overflow:hidden;border-bottom:4px solid #fff;
  box-shadow:0 12px 30px var(--wc-sombra);margin:0 -.9rem 1.2rem}
.wc-hero img{width:100%;display:block}
.wc-hero .abajo{position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(transparent,rgba(255,246,232,.92))}

/* Animaciones */
@keyframes wcEntra{from{opacity:0;transform:translateY(18px) scale(.8)}to{opacity:1;transform:none}}
@keyframes wcPop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes wcFade{from{opacity:0}to{opacity:1}}
@keyframes wcSube{0%{opacity:0;transform:translateY(6px) scale(.8)}
  20%{opacity:1;transform:translateY(-4px) scale(1.1)}
  100%{opacity:0;transform:translateY(-46px) scale(1)}}
@keyframes wcBrilla{0%{opacity:0;transform:scale(.4) rotate(0)}
  40%{opacity:1;transform:scale(1.2) rotate(25deg)}
  100%{opacity:0;transform:scale(.7) rotate(60deg) translateY(-20px)}}
@keyframes wcLatido{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes wcPalpita{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@keyframes wcTiembla{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px) rotate(-3deg)}75%{transform:translateX(2px) rotate(3deg)}}
@keyframes wcToast{0%{opacity:0;transform:translateY(-16px)}10%{opacity:1;transform:none}
  85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
@keyframes wcFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.wc-flota{animation:wcFlota 3s ease-in-out infinite}

/* Confeti */
.wc-confeti{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden}
.wc-confeti i{position:absolute;top:-24px;font-size:1.1rem;animation:wcCae linear forwards}
@keyframes wcCae{to{transform:translateY(105vh) rotate(540deg);opacity:.15}}

/* =========================================================
   MODO PARTIDA — que todo esté siempre a la vista
   ========================================================= */
body.wc-partida .wc-topbar{display:none}
body.wc-partida .wc-toasts{top:auto;bottom:1.2rem}


@media (max-width:820px){
  .wc-joy{width:96px;height:96px;left:.7rem;bottom:.7rem}
  .wc-joy .bola{width:46px;height:46px;margin:-23px 0 0 -23px}
  .wc-bandeja3d .hueco{width:38px;height:38px;font-size:1.15rem;border-radius:12px}
  .wc-pista{font-size:.76rem;max-width:70%;padding:.15rem .7rem}
  .wc-hud{gap:.3rem;padding:.45rem .5rem;flex-wrap:nowrap}
  .wc-hud .wc-pill{font-size:.86rem;padding:.18em .55em .18em .25em}
  .wc-reloj{padding:.12em .55em;font-size:.9rem}
}

/* Responsive */
@media (max-width:640px){
  .wc-panel{padding:.9rem}

  .wc-hud{gap:.3rem;padding:.45rem .5rem;flex-wrap:nowrap}
  .wc-hud .wc-pill{font-size:.86rem;padding:.18em .55em .18em .25em}
  .wc-reloj{padding:.12em .55em;font-size:.9rem}
  .wc-combo{font-size:.8rem;padding:.12em .6em;top:.35rem;right:.35rem}
  .wc-bandeja{justify-content:flex-start}
  .wc-ficha{grid-template-columns:1fr;text-align:center;justify-items:center}
  .wc-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
  .wc-local .foto{height:158px}
  .wc-nav button{min-width:52px;padding:.32rem .5rem}
}

@media (prefers-reduced-motion:reduce){
  .wc-body *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}