/* ============================================================
   CARIETÓN — el monstruo de la caries (minijuego)
   ============================================================ */

/* ---------- Contenedor del monstruo ---------- */
.carieton {
  position: fixed;
  width: 104px;
  height: 112px;
  z-index: 11000;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: left .9s cubic-bezier(.45,.05,.35,1), top .9s cubic-bezier(.45,.05,.35,1), transform 1.4s ease, opacity .6s ease, width .45s ease, height .45s ease;
  filter: drop-shadow(0 10px 18px rgba(60, 25, 8, .35));
}
@media (max-width: 560px) { .carieton { width: 86px; height: 93px; } }

.carieton svg { width: 100%; height: 100%; overflow: visible; }

/* Mirando hacia la derecha (cuando entra por la izquierda) */
.carieton.face-right svg { transform: scaleX(-1); }

/* Asomándose tímido por el costado */
.carieton.is-peeking { transform: rotate(-8deg); }
.carieton.is-peeking.face-right { transform: rotate(8deg); }

/* Huida rápida */
.carieton.is-dashing {
  transition: left .5s cubic-bezier(.3,.6,.3,1.15), top .5s cubic-bezier(.3,.6,.3,1.15), transform .5s ease;
}

/* ---------- Animaciones de vida ---------- */
.cari-all {
  transform-origin: 100px 122px;
  animation: cariBob 3.4s ease-in-out infinite;
}
@keyframes cariBob {
  0%, 100% { transform: rotate(-1.6deg) translateY(0); }
  50%      { transform: rotate(1.6deg) translateY(-4px); }
}

.cari-lid {
  transform-box: fill-box;
  transform-origin: center top;
  transform: scaleY(0);
  animation: cariBlink 4.6s infinite;
}
@keyframes cariBlink {
  0%, 90%, 100% { transform: scaleY(0); }
  93%, 97%      { transform: scaleY(1); }
}

.cari-pupil {
  transform-box: fill-box;
  animation: cariLook 7s ease-in-out infinite;
}
@keyframes cariLook {
  0%, 34%, 100% { transform: translateX(0); }
  40%, 58%      { transform: translateX(3px); }
  66%, 88%      { transform: translateX(-3px); }
}

/* Masticando */
.cari-mouth { transform-box: fill-box; transform-origin: 50% 18%; }
.carieton.is-chewing .cari-mouth { animation: cariChew .42s ease-in-out infinite alternate; }
@keyframes cariChew {
  from { transform: scaleY(1); }
  to   { transform: scaleY(.68); }
}
.carieton.is-chewing .cari-all { animation-duration: 1.2s; }

/* Golpeado */
.carieton.is-hurt { animation: cariHurt .38s ease; }
@keyframes cariHurt {
  0%   { filter: brightness(2.1) saturate(.4) drop-shadow(0 10px 18px rgba(60,25,8,.35)); transform: translateX(0) rotate(0); }
  25%  { transform: translateX(-7px) rotate(-6deg); }
  50%  { transform: translateX(7px) rotate(6deg); }
  100% { filter: brightness(1) drop-shadow(0 10px 18px rgba(60,25,8,.35)); transform: translateX(0); }
}

/* Muerte */
.carieton.is-dead {
  animation: cariDeath 1.6s ease forwards;
  pointer-events: none;
}
@keyframes cariDeath {
  0%   { transform: rotate(0) scale(1); opacity: 1; }
  30%  { transform: rotate(-14deg) scale(1.08); }
  60%  { transform: rotate(340deg) scale(.7); opacity: .9; }
  100% { transform: rotate(680deg) scale(0); opacity: 0; }
}

/* ---------- Burbuja de diálogo ---------- */
.cari-bubble {
  position: fixed;
  z-index: 11002;
  max-width: 230px;
  background: #fff;
  color: var(--ink, #21395c);
  font-family: var(--font-display, "Baloo 2", sans-serif);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.25;
  padding: 10px 14px;
  border-radius: 16px;
  border: 2px solid #8f3f1d;
  box-shadow: 0 8px 24px rgba(60, 25, 8, .25);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(.92);
  transition: opacity .25s ease, transform .25s ease;
}
.cari-bubble.is-on { opacity: 1; transform: translateY(0) scale(1); }
.cari-bubble::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 26px;
  border: 8px solid transparent;
  border-top-color: #8f3f1d;
  border-bottom: 0;
}

/* ---------- Tooltip explicativo ---------- */
.cari-tip {
  position: fixed;
  z-index: 11003;
  width: min(300px, 84vw);
  background: var(--bg, #fffaf3);
  border: 2px solid #8f3f1d;
  border-radius: var(--radius-md, 18px);
  box-shadow: 0 16px 44px rgba(60, 25, 8, .3);
  padding: 16px 18px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.cari-tip.is-on { opacity: 1; pointer-events: auto; transform: translateY(0); }
.cari-tip h4 {
  font-family: var(--font-display, "Baloo 2", sans-serif);
  color: #8f3f1d;
  font-size: 1.1rem;
  margin: 0 0 6px;
}
.cari-tip p {
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ink, #21395c);
  margin: 0 0 12px;
}
.cari-tip .cari-tip__btn {
  display: inline-block;
  font-family: var(--font-display, "Baloo 2", sans-serif);
  font-weight: 800;
  font-size: .95rem;
  color: #fff;
  background: linear-gradient(120deg, var(--turquoise, #1fc2b8), var(--turquoise-deep, #0fa39b));
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 163, 155, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cari-tip .cari-tip__btn::before { content: "\1FAA5  "; }
.cari-tip .cari-tip__btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 26px rgba(15,163,155,.45); }

/* ---------- Manchas de caries y mordidas ---------- */
.cari-stain {
  position: absolute;
  z-index: 2000;
  pointer-events: none;
  filter: drop-shadow(0 3px 8px rgba(60, 25, 8, .3));
  animation: cariStainPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cariStainPop {
  from { transform: scale(0) rotate(-30deg); }
  to   { transform: scale(1) rotate(0); }
}
.cari-stain svg { width: 100%; height: 100%; }

/* Espuma y burbujas al limpiar una mancha */
.cari-foam {
  position: absolute;
  z-index: 2002;
  pointer-events: none;
}
.cari-foam__blob {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #e7fbf9 55%, #bfeeea);
  box-shadow: 0 2px 8px rgba(15, 163, 155, .25);
  transform: translate(var(--fx, 0), var(--fy, 0)) scale(0);
  animation: cariFoamBlob .95s ease-out forwards;
}
@keyframes cariFoamBlob {
  0%   { transform: translate(var(--fx, 0), var(--fy, 0)) scale(0); opacity: .98; }
  55%  { transform: translate(var(--fx, 0), var(--fy, 0)) scale(1); opacity: .92; }
  100% { transform: translate(var(--fx, 0), var(--fy, 0)) scale(1.3); opacity: 0; }
}
.cari-foam__bub {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  border: 2px solid rgba(31, 194, 184, .8);
  background: rgba(255, 255, 255, .55);
  opacity: 0;
  animation: cariFoamBub 1.25s ease-out forwards;
}
@keyframes cariFoamBub {
  0%   { transform: translate(var(--bx, 0), 6px) scale(.35); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translate(var(--bx, 0), -58px) scale(1); opacity: 0; }
}

/* Chispas al limpiar */
.cari-spark {
  position: absolute;
  z-index: 2001;
  color: var(--yellow, #ffc93c);
  text-shadow: 0 0 8px rgba(255, 201, 60, .9);
  font-size: 18px;
  pointer-events: none;
  animation: cariSpark .7s ease forwards;
}
@keyframes cariSpark {
  0%   { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); }
  100% { opacity: 0; transform: translate(var(--sx, 20px), var(--sy, -24px)) scale(1.1) rotate(120deg); }
}

/* ---------- Cursor cepillo ---------- */
html.cari-brushing, html.cari-brushing * { cursor: none !important; }
html.cari-brushing { user-select: none; -webkit-user-select: none; }

.cari-brush {
  position: fixed;
  z-index: 11005;
  width: 46px;
  height: 46px;
  margin: -6px 0 0 -4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  filter: drop-shadow(0 4px 8px rgba(33, 57, 92, .35));
}
.cari-brush.is-on { opacity: 1; }
.cari-brush svg { width: 100%; height: 100%; transform: rotate(-32deg); }
.cari-brush.is-scrubbing svg { animation: cariScrub .18s linear infinite alternate; }
@keyframes cariScrub {
  from { transform: rotate(-42deg); }
  to   { transform: rotate(-20deg); }
}

/* ---------- Aviso de victoria ---------- */
.cari-toast {
  position: fixed;
  z-index: 11010;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%) translateY(20px);
  max-width: min(420px, 88vw);
  background: linear-gradient(120deg, var(--turquoise, #1fc2b8), var(--turquoise-deep, #0fa39b));
  color: #fff;
  font-family: var(--font-display, "Baloo 2", sans-serif);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  padding: 18px 24px;
  border-radius: var(--radius-md, 18px);
  box-shadow: 0 16px 44px rgba(15, 163, 155, .4);
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease;
}
.cari-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.cari-toast strong { display: block; font-size: 1.2rem; margin-bottom: 4px; }

/* ============================================================
   EXPRESIONES (tímido / enojado / asustado / sarcástico)
   ============================================================ */
.cari-brow, .cari-lid-angry, .cari-mouth, .cari-blush {
  transition: opacity .25s ease, transform .3s ease;
}
.cari-brow { transform-box: fill-box; transform-origin: center; }

/* Bocas: la sonrisota es la base; las otras se encienden por humor */
.cari-mouth--grin { opacity: 1; }
.cari-mouth--o, .cari-mouth--smug { opacity: 0; }

/* Tímido: cejas levantadas, ojos abiertos, rubor y sonrisita */
.carieton.mood-shy .cari-brow--l { transform: rotate(-16deg) translateY(-7px); }
.carieton.mood-shy .cari-brow--r { transform: rotate(16deg) translateY(-7px); }
.carieton.mood-shy .cari-lid-angry { opacity: 0; }
.carieton.mood-shy .cari-blush { opacity: .85; }
.carieton.mood-shy .cari-mouth--grin { opacity: 0; }
.carieton.mood-shy .cari-mouth--smug { opacity: 1; }

/* Asustado: cejas de preocupación, boca en "o", pupilas temblando */
.carieton.mood-scared .cari-brow--l { transform: rotate(-24deg) translateY(-9px); }
.carieton.mood-scared .cari-brow--r { transform: rotate(24deg) translateY(-9px); }
.carieton.mood-scared .cari-lid-angry { opacity: 0; }
.carieton.mood-scared .cari-mouth--grin { opacity: 0; }
.carieton.mood-scared .cari-mouth--o { opacity: 1; }
.carieton.mood-scared .cari-pupil { animation: cariShiver .28s linear infinite; }
@keyframes cariShiver {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-1.6px, .6px); }
  75%      { transform: translate(1.6px, -.6px); }
}

/* Sarcástico: una ceja alzada y sonrisita ladeada */
.carieton.mood-smug .cari-brow--l { transform: rotate(-12deg) translateY(-6px); }
.carieton.mood-smug .cari-mouth--grin { opacity: 0; }
.carieton.mood-smug .cari-mouth--smug { opacity: 1; }

/* ---------- Accesorios animados ---------- */
.cari-mace {
  transform-box: fill-box;
  transform-origin: 85% 92%;
  animation: cariMace 2.8s ease-in-out infinite;
}
.carieton.is-chewing .cari-mace { animation-duration: 1.1s; }
@keyframes cariMace {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(5deg); }
}
.cari-drip { animation: cariDrip 2.4s ease-in infinite; }
.cari-drip--2 { animation-delay: 1.1s; }
@keyframes cariDrip {
  0%, 55%  { opacity: 1; transform: translateY(0); }
  90%      { opacity: 0; transform: translateY(9px); }
  100%     { opacity: 0; transform: translateY(0); }
}
.cari-candy-arm {
  transform-box: fill-box;
  transform-origin: 10% 20%;
  animation: cariCandy 3.6s ease-in-out infinite;
}
@keyframes cariCandy {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(6deg); }
}
.cari-tongue { transform-box: fill-box; transform-origin: center; }
.carieton.is-chewing .cari-tongue { animation: cariTongue .42s ease-in-out infinite alternate; }
@keyframes cariTongue {
  from { transform: scale(1); }
  to   { transform: scale(.85) translateY(-2px); }
}

/* ============================================================
   BOTÓN "Conoce a Carietón" (en la barra fija)
   ============================================================ */
.navbar__carieton {
  font-family: var(--font-display, "Baloo 2", sans-serif);
  font-weight: 800;
  font-size: .92rem;
  color: #fff;
  background: linear-gradient(120deg, #f9a86b, #ef8b45);
  border: 2px solid #d0742f;
  border-radius: 999px;
  padding: 9px 16px;
  margin-left: 10px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(224, 130, 60, .38);
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
  animation: cariBtnPulse 2.8s ease-in-out infinite;
}
.navbar__carieton:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 22px rgba(224, 130, 60, .5); }
.navbar__carieton.is-active {
  animation: none;
  cursor: default;
  opacity: .85;
  transform: none;
}
@keyframes cariBtnPulse {
  0%, 100% { box-shadow: 0 6px 16px rgba(224, 130, 60, .38); }
  50%      { box-shadow: 0 6px 24px rgba(249, 168, 107, .75); }
}
@media (max-width: 560px) {
  /* Navbar compacta: que el botón no se monte sobre el nombre */
  .navbar__inner { gap: 8px; }
  .navbar__brand { min-width: 0; flex: 1 1 auto; gap: 7px; }
  .brand-logo { width: 42px !important; }
  .navbar__name strong { font-size: .8rem; }
  .navbar__carieton {
    font-size: .72rem;
    padding: 7px 10px;
    margin-left: 0;
    flex: 0 0 auto;
  }
}

/* ============================================================
   BLOQUEO DE INTERACCIONES DURANTE EL JUEGO
   (los botones/enlaces de la página no responden mientras se juega)
   ============================================================ */
html.cari-brushing a,
html.cari-brushing button:not(.cari-tip__btn),
html.cari-brushing input,
html.cari-brushing select,
html.cari-brushing textarea,
html.cari-brushing iframe,
html.cari-brushing video {
  pointer-events: none !important;
}

/* Mientras el juego está activo: sin tooltips ni mensajes emergentes de la página */
html.cari-active .stat__tooltip { display: none !important; }
html.cari-active .stat--tip { cursor: default; }

/* ============================================================
   FUEGOS ARTIFICIALES DE VICTORIA
   ============================================================ */
.cari-fw {
  position: fixed;
  inset: 0;
  z-index: 11020;
  pointer-events: none;
  overflow: hidden;
}
.cari-fw__p {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  animation: cariFwP 1.05s ease-out forwards;
}
@keyframes cariFwP {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 60px), var(--dy, 60px)) scale(.25); }
}

/* Accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .cari-all, .cari-lid, .cari-pupil, .cari-mace, .cari-drip, .cari-candy-arm,
  .carieton.is-chewing .cari-mouth, .navbar__carieton { animation: none !important; }
}

/* Icono del botón: carita simplificada de Carietón
   (display inline: el CSS global pone svg en block y partía el botón en 2 líneas) */
.carieton-btn-icon {
  display: inline-block;
  width: 21px;
  height: 21px;
  vertical-align: -5px;
  margin-right: 5px;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(60, 25, 8, .3));
}
.navbar__carieton {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}