/* ==========================================================================
   Trazalandia · estilos
   Identidad: pegatinas de dibujos animados con contorno azul tinta y sombra
   sólida, cielo celeste, prado verde y un trazo arcoíris como protagonista.
   ========================================================================== */
:root {
  --cielo: #8FD8FF;
  --cielo-claro: #D6F1FF;
  --prado: #6FCF5B;
  --prado-osc: #3FA33A;
  --sol: #FFD23F;
  --chicle: #FF6FA8;
  --naranja: #FF9A3C;
  --lila: #A98BFF;
  --tinta: #29346E;
  --papel: #FFFFFF;
  --verde: #1FB36B;
  --rojo: #F2545B;
  --borde: 4px;
  --sombra: 0 6px 0 var(--tinta);
  --radio: 26px;
  --fuente: "Baloo 2", "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--fuente); font-weight: 600; font-size: 18px; line-height: 1.3;
  color: var(--tinta); background: var(--cielo);
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
}
input, select { -webkit-user-select: text; user-select: text; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 4px solid #FF6FA8; outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }

#app { position: relative; height: 100%; }
.pantalla { position: relative; min-height: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.pantalla-lista { overflow-y: auto; background: var(--cielo-claro); padding: 12px clamp(12px, 3vw, 28px) 32px; gap: 14px; }

/* ---------------------------------------------------------------- BOTONES */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 60px; padding: 8px 24px; border: var(--borde) solid var(--tinta); border-radius: 22px;
  background: var(--papel); box-shadow: var(--sombra); font-weight: 800; font-size: 1.2rem;
  transition: transform .08s, box-shadow .08s;
}
.btn:active, .btn-redondo:active, .btn-jugar:active, .casilla:active, .zona:active .zona-sello, .perfil:active, .avatar:active, .edad:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--tinta); }
.btn-verde { background: var(--verde); color: #fff; }
.btn-blanco { background: #fff; }
.btn-rojo { background: var(--rojo); color: #fff; }
.btn-grande { min-height: 72px; font-size: 1.5rem; padding: 8px 34px; }
.btn-peq { min-height: 46px; font-size: 1rem; padding: 6px 16px; border-width: 3px; box-shadow: 0 4px 0 var(--tinta); }
.btn-redondo {
  position: relative; width: 60px; height: 60px; flex: none; display: inline-grid; place-items: center;
  border: var(--borde) solid var(--tinta); border-radius: 50%; background: #fff; box-shadow: 0 5px 0 var(--tinta);
  font-size: 1.7rem; line-height: 1; padding: 0; transition: transform .08s, box-shadow .08s;
}
.btn-redondo.apagado { background: #D5D9E8; opacity: .8; }
.btn-redondo.apagado::after { content: ""; position: absolute; width: 70%; height: 4px; background: var(--rojo); border-radius: 2px; transform: rotate(-45deg); }
.btn-redondo.elegido { background: var(--sol); }
.btn-mini { width: 48px; height: 48px; font-size: 1.3rem; }
.btn-grande-r { width: 84px; height: 84px; font-size: 2.3rem; box-shadow: 0 7px 0 var(--tinta); }
.btn-verde-r { background: var(--verde); color: #fff; }
.btn-latido { animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(1.08); } }
.enlace { background: none; border: 0; text-decoration: underline; font-weight: 700; color: var(--tinta); padding: 8px; }
.punto-nuevo { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; background: var(--chicle); border: 3px solid var(--tinta); border-radius: 50%; }
.fila-botones { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- BARRA */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; position: relative; z-index: 3; }
.titulo-barra {
  flex: 1; text-align: center; font-size: clamp(1.3rem, 4.5vw, 2rem); font-weight: 800; line-height: 1.1;
  background: #fff; border: var(--borde) solid var(--tinta); border-radius: 22px; box-shadow: var(--sombra);
  padding: 8px 16px; max-width: 560px; margin: 0 auto;
}
.chip-estrellas, .zona-cuenta { background: var(--sol); border: var(--borde) solid var(--tinta); border-radius: 99px; padding: 6px 14px; font-weight: 800; box-shadow: 0 4px 0 var(--tinta); white-space: nowrap; }

/* ---------------------------------------------------------------- ESCENA CIELO */
.escena-cielo { background: linear-gradient(180deg, #7FD0FF 0%, #BDE9FF 55%, #E8F8FF 100%); }
.colinas { position: absolute; inset: auto 0 0 0; height: 30%; pointer-events: none;
  background:
    radial-gradient(120% 90% at 15% 100%, #5CC04C 60%, transparent 61%),
    radial-gradient(110% 80% at 85% 100%, #7ED86A 58%, transparent 59%),
    radial-gradient(160% 60% at 50% 110%, #4FB548 70%, transparent 71%); }
.nubes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.nube { position: absolute; width: 150px; height: 46px; background: #fff; border-radius: 40px; opacity: .92; animation: nube 60s linear infinite; }
.nube::before, .nube::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.nube::before { width: 64px; height: 64px; left: 22px; top: -30px; }
.nube::after { width: 50px; height: 50px; left: 72px; top: -20px; }
.n1 { top: 9%; left: -160px; animation-duration: 70s; }
.n2 { top: 22%; left: -160px; animation-duration: 95s; animation-delay: -40s; transform: scale(.7); }
.n3 { top: 4%; left: -160px; animation-duration: 80s; animation-delay: -65s; transform: scale(.85); }
.n4 { top: 30%; left: -160px; animation-duration: 110s; animation-delay: -20s; transform: scale(.6); }
@keyframes nube { to { translate: calc(100vw + 320px) 0; } }

/* ---------------------------------------------------------------- PORTADA */
.portada-centro { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px; text-align: center; }
.logo-playlab { width: clamp(150px, 26vmin, 230px); height: auto; filter: drop-shadow(0 6px 0 rgba(41,52,110,.25)); }
.titulo-juego { font-size: clamp(3rem, 12vw, 6.6rem); font-weight: 800; line-height: .95; letter-spacing: -.01em; margin-top: 4px; }
.titulo-juego span {
  display: inline-block; color: var(--c);
  -webkit-text-stroke: clamp(4px, 1.1vw, 8px) var(--tinta); paint-order: stroke fill;
  text-shadow: 0 clamp(5px, 1.2vw, 9px) 0 var(--tinta);
  animation: letra-entra .6s cubic-bezier(.3,1.6,.5,1) both, letra-flota 3s ease-in-out infinite;
  animation-delay: var(--d), calc(var(--d) + .6s);
}
@keyframes letra-entra { from { transform: translateY(-60px) scale(.3); opacity: 0; } }
@keyframes letra-flota { 50% { transform: translateY(-6px) rotate(-3deg); } }
.lema { font-size: clamp(1.1rem, 3.6vw, 1.6rem); font-weight: 800; background: #fff; border: var(--borde) solid var(--tinta); border-radius: 99px; padding: 2px 20px; box-shadow: 0 4px 0 var(--tinta); margin-top: 8px; }
.portada-trazin { width: clamp(110px, 20vmin, 170px); margin-top: 6px; }
.btn-jugar {
  width: clamp(110px, 22vmin, 150px); height: clamp(110px, 22vmin, 150px); border-radius: 50%;
  border: 6px solid var(--tinta); background: radial-gradient(circle at 35% 30%, #5BE08F, var(--verde) 70%);
  box-shadow: 0 9px 0 var(--tinta); color: #fff; font-size: clamp(3rem, 9vmin, 4.4rem); padding: 0 0 0 10px;
  animation: latido 1.5s ease-in-out infinite; margin-top: 6px;
}
.btn-padres { position: absolute; top: 12px; right: 12px; z-index: 4; width: 50px; height: 50px; font-size: 1.3rem; }
.portada-pie { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 12px; z-index: 3; }

/* ---------------------------------------------------------------- TRAZÍN */
.trazin { width: 100%; height: auto; overflow: visible; display: block; }
.tz-todo { transform-origin: 60px 146px; animation: trazin-respira 2.6s ease-in-out infinite; }
.tz-ojos { transform-origin: 60px 58px; animation: parpadea 4.5s infinite; }
.tz-brazo-d { transform-origin: 84px 108px; }
.tz-brazo-i { transform-origin: 36px 112px; }
@keyframes trazin-respira { 50% { transform: translateY(-3px) scaleY(1.02); } }
@keyframes parpadea { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
[data-humor="saluda"] .tz-brazo-d { animation: saluda .9s ease-in-out infinite; }
@keyframes saluda { 50% { transform: rotate(-28deg); } }
[data-humor="señala"] .tz-brazo-d { transform: rotate(-50deg); transition: transform .3s; }
[data-humor="atento"] .tz-cabeza { transform: rotate(-6deg); transform-origin: 60px 90px; transition: transform .3s; }
[data-humor="contento"] .tz-todo, [data-humor="fiesta"] .tz-todo { animation: salta .5s ease-in-out infinite; }
[data-humor="fiesta"] .tz-brazo-d { animation: saluda .4s ease-in-out infinite; }
[data-humor="fiesta"] .tz-brazo-i { animation: saluda-i .4s ease-in-out infinite; }
[data-humor="anima"] .tz-todo { animation: asiente .6s ease-in-out 3; }
@keyframes salta { 50% { transform: translateY(-12px); } }
@keyframes saluda-i { 50% { transform: rotate(28deg); } }
@keyframes asiente { 50% { transform: rotate(4deg) translateY(-3px); } }

/* ---------------------------------------------------------------- PERFILES */
#p-perfiles .barra, .perfiles-lista, .crear-perfil { position: relative; z-index: 2; }
.perfiles-lista { flex: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 18px; padding: 16px; }
.perfil {
  width: 150px; min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: #fff; border: var(--borde) solid var(--tinta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 12px 8px;
}
.perfil-cara { font-size: 4rem; line-height: 1.1; }
.perfil-nick { font-weight: 800; font-size: .92rem; word-break: break-all; text-align: center; }
.perfil-est { font-size: .9rem; opacity: .85; }
.perfil-nuevo { background: var(--sol); border-style: dashed; }
.crear-perfil { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 16px 28px; }
.paso-titulo { font-size: 1.25rem; font-weight: 800; text-align: center; margin-top: 4px; }
.avatares { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; max-width: 520px; }
.avatar { width: 72px; height: 72px; font-size: 2.6rem; border: var(--borde) solid var(--tinta); border-radius: 22px; background: #fff; box-shadow: 0 5px 0 var(--tinta); padding: 0; }
.avatar[aria-checked="true"] { background: var(--sol); transform: scale(1.08) rotate(-4deg); }
.edades { display: flex; gap: 14px; }
.edad { display: flex; flex-direction: column; align-items: center; width: 108px; padding: 8px; border: var(--borde) solid var(--tinta); border-radius: 22px; background: #fff; box-shadow: var(--sombra); }
.edad-icono { font-size: 2.6rem; line-height: 1.1; }
.edad-num { font-size: 1.4rem; font-weight: 800; }
.edad[aria-checked="true"] { background: var(--sol); transform: scale(1.06); }
.apodo-fila { display: flex; gap: 10px; align-items: center; }
#apodo { width: min(62vw, 300px); height: 60px; border: var(--borde) solid var(--tinta); border-radius: 18px; padding: 0 14px; font-size: 1.3rem; font-weight: 800; text-align: center; background: #fff; }
.apodo-nota { font-size: .95rem; opacity: .8; text-align: center; }
.apodo-nota.error { color: #B3261E; opacity: 1; font-weight: 800; }
.sacude { animation: sacude .45s; }
@keyframes sacude { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }

/* ---------------------------------------------------------------- MAPA */
#p-mapa { background: #BFEAFF; }
.mapa { position: absolute; inset: 0; overflow: hidden; }
.mapa-fondo { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #8FD8FF 0%, #C4ECFF 30%, #A6E28F 30.5%, #7FD36B 100%); }
.mapa-fondo .sol { position: absolute; top: 13%; left: 3%; width: 13vmin; height: 13vmin; border-radius: 50%; background: var(--sol); border: var(--borde) solid var(--tinta); box-shadow: 0 0 0 10px rgba(255,210,63,.35), 0 0 0 22px rgba(255,210,63,.18); animation: sol 6s ease-in-out infinite; }
@keyframes sol { 50% { box-shadow: 0 0 0 14px rgba(255,210,63,.35), 0 0 0 30px rgba(255,210,63,.15); } }
.mapa-fondo .prado { position: absolute; inset: 30% 0 0; background:
  radial-gradient(40% 30% at 20% 30%, rgba(255,255,255,.18), transparent 70%),
  radial-gradient(35% 25% at 75% 70%, rgba(63,163,58,.25), transparent 70%); }
.mapa-fondo .monte { position: absolute; bottom: 69%; width: 40vmin; height: 20vmin; background: #9ED6A0; border-radius: 50% 50% 0 0; border: var(--borde) solid rgba(41,52,110,.25); border-bottom: 0; }
.monte.m1 { left: 12%; } .monte.m2 { right: 20%; width: 55vmin; height: 26vmin; background: #8ACB8E; }
.mapa-fondo .mar, .mapa-fondo .rio { display: none; }
.via { position: absolute; left: 0; right: 0; bottom: 3%; height: 14px; background: repeating-linear-gradient(90deg, #8A5A3C 0 6px, transparent 6px 22px), linear-gradient(#6B6F85, #6B6F85) 0 3px/100% 3px no-repeat, linear-gradient(#6B6F85, #6B6F85) 0 10px/100% 3px no-repeat; }
.tren { position: absolute; bottom: 4px; left: 0; font-size: 7vmin; white-space: nowrap; animation: tren 26s linear infinite; transform: scaleX(-1); }
@keyframes tren { from { left: -40vmin; } to { left: 110%; } }
.decor { position: absolute; inset: 0; }
.decor-item { position: absolute; transform: translate(-50%, -50%); line-height: 1; filter: drop-shadow(0 3px 0 rgba(41,52,110,.18)); }
.decor-item.saluda { animation: bicho-saluda 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes bicho-saluda { 0%, 60%, 100% { transform: translate(-50%, -50%); } 70% { transform: translate(-50%, -62%) rotate(-10deg); } 80% { transform: translate(-50%, -50%) rotate(8deg); } 90% { transform: translate(-50%, -58%); } }
.decor-item.brilla { animation: brilla 1.8s ease-in-out infinite; }
@keyframes brilla { 50% { transform: translate(-50%, -50%) scale(.5) rotate(40deg); opacity: .4; } }
.decor-item.salta { animation: delfin 3s ease-in-out infinite; }
@keyframes delfin { 0%, 55%, 100% { transform: translate(-50%, -50%); } 70% { transform: translate(-50%, -110%) rotate(-25deg); } 85% { transform: translate(-50%, -60%) rotate(20deg); } }
.arcoiris-zona { font-size: 9vmin; animation: flota 3s ease-in-out infinite; }
@keyframes flota { 50% { transform: translate(-50%, -60%); } }
.agua { position: absolute; width: 36vmin; height: 26vmin; transform: translate(-50%, -45%); border-radius: 50%; background: radial-gradient(circle, #6FD3F5 55%, #4DB8EA 56%, #4DB8EA 70%, transparent 71%); }
.pajaro { position: absolute; font-size: 4vmin; animation: vuela 22s linear infinite; }
.pajaro.p1 { top: 12%; left: -10%; } .pajaro.p2 { top: 20%; left: -10%; animation-duration: 30s; animation-delay: -12s; }
@keyframes vuela { 0% { transform: translate(0, 0) scaleX(-1); } 25% { transform: translate(30vw, -3vh) scaleX(-1); } 50% { transform: translate(60vw, 2vh) scaleX(-1); } 100% { transform: translate(125vw, -2vh) scaleX(-1); } }
.mariposa { position: absolute; font-size: 4vmin; animation: mariposa 9s ease-in-out infinite; }
.mariposa.m1 { top: 50%; left: 40%; } .mariposa.m2 { top: 78%; left: 62%; animation-delay: -4s; animation-duration: 11s; }
@keyframes mariposa { 25% { transform: translate(6vmin, -5vmin) rotate(10deg); } 50% { transform: translate(12vmin, 1vmin) rotate(-6deg); } 75% { transform: translate(4vmin, 5vmin) rotate(8deg); } }

.camino-mapa { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.camino-mapa path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.camino-borde { stroke: rgba(41,52,110,.35); stroke-width: 26; }
.camino-cerrado { stroke: #E9D8B4; stroke-width: 20; }
.camino-abierto { stroke: #FFF4D2; stroke-width: 20; }
.camino-abierto + path, .camino-mapa .camino-abierto { stroke-dasharray: none; }

.zonas { position: absolute; inset: 0; }
.zona {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0; width: 150px; z-index: 2;
}
.zona-sello {
  position: relative; width: clamp(78px, 14vmin, 118px); height: clamp(78px, 14vmin, 118px); border-radius: 50%;
  display: grid; place-items: center; background: var(--zc); border: 5px solid var(--tinta); box-shadow: 0 7px 0 var(--tinta), inset 0 -10px 0 rgba(0,0,0,.12), inset 0 8px 0 rgba(255,255,255,.3);
  transition: transform .15s;
}
.zona:hover .zona-sello { transform: scale(1.05) rotate(-3deg); }
.zona-emoji { font-size: clamp(2.4rem, 7vmin, 3.8rem); line-height: 1; }
.zona-nombre { background: #fff; border: 3px solid var(--tinta); border-radius: 14px; padding: 1px 10px; font-size: clamp(.78rem, 2.2vmin, 1rem); font-weight: 800; line-height: 1.15; text-align: center; box-shadow: 0 3px 0 var(--tinta); }
.zona-progreso { width: 70%; height: 12px; background: #fff; border: 3px solid var(--tinta); border-radius: 99px; overflow: hidden; }
.zona-progreso i { display: block; height: 100%; background: var(--sol); }
.zona.cerrada .zona-sello { background: #C9CEDD; filter: saturate(.2); }
.zona.cerrada .zona-emoji { opacity: .45; }
.zona.cerrada .zona-nombre { opacity: .75; }
.candado { position: absolute; bottom: -8px; right: -8px; font-size: 2rem; }
.zona.recien .zona-sello { animation: recien 1s ease-in-out 3; }
@keyframes recien { 50% { transform: scale(1.2) rotate(8deg); box-shadow: 0 7px 0 var(--tinta), 0 0 0 16px rgba(255,210,63,.6); } }
.trazin-mapa { position: absolute; left: -46%; top: -30%; width: clamp(54px, 10vmin, 80px); pointer-events: none; animation: salta 1.2s ease-in-out infinite; }

.mapa-barra { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 12px; flex-wrap: wrap; justify-content: space-between; }
.perfil-chip { display: flex; align-items: center; gap: 8px; background: #fff; border: var(--borde) solid var(--tinta); border-radius: 99px; padding: 4px 16px 4px 6px; box-shadow: 0 5px 0 var(--tinta); }
.perfil-avatar { font-size: 2.2rem; line-height: 1; }
.perfil-estrellas { font-size: 1.3rem; font-weight: 800; }
.dificultad { display: flex; background: #fff; border: var(--borde) solid var(--tinta); border-radius: 99px; box-shadow: 0 5px 0 var(--tinta); padding: 4px; gap: 4px; }
.dificultad button { width: 52px; height: 48px; border-radius: 99px; border: 0; background: none; font-size: 1.7rem; padding: 0; opacity: .45; }
.dificultad button[aria-checked="true"] { background: var(--sol); opacity: 1; box-shadow: inset 0 0 0 3px var(--tinta); }
.mapa-acciones { display: flex; gap: 8px; align-items: center; }
@media (max-width: 640px) {
  .mapa-barra { gap: 6px; padding: 8px; }
  .mapa-acciones { width: 100%; justify-content: center; }
  .mapa-acciones .btn-redondo { width: 50px; height: 50px; font-size: 1.4rem; }
  .perfil-avatar { font-size: 1.8rem; }
  .dificultad button { width: 44px; height: 42px; font-size: 1.45rem; }
  .zona { width: 120px; }
}

/* ---------------------------------------------------------------- ZONA */
#p-zona { background: linear-gradient(180deg, color-mix(in srgb, var(--zc) 35%, #fff), color-mix(in srgb, var(--zc) 12%, #fff)); overflow-y: auto; }
.btn-aventura {
  align-self: center; display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; padding: 8px 30px 8px 22px;
  background: var(--verde); color: #fff; border: 5px solid var(--tinta); border-radius: 99px; box-shadow: 0 7px 0 var(--tinta);
  font-size: 2.6rem; font-weight: 800; animation: latido 1.6s ease-in-out infinite;
}
.aventura-dif { background: #fff; border-radius: 50%; width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.8rem; border: 3px solid var(--tinta); }
.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px; padding: 4px clamp(12px, 3vw, 32px) 32px; max-width: 1000px; width: 100%; margin: 0 auto; }
.casilla {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: #fff; border: var(--borde) solid var(--tinta); border-radius: 22px; box-shadow: var(--sombra); padding: 10px 8px 6px;
  color: var(--zc); animation: casilla-entra .4s both; animation-delay: calc(var(--i) * .03s);
}
@keyframes casilla-entra { from { transform: scale(.6); opacity: 0; } }
.casilla .mini-glifo { flex: 1; width: 100%; min-height: 0; filter: drop-shadow(0 2px 0 rgba(41,52,110,.35)); }
.casilla.hecha { background: color-mix(in srgb, var(--zc) 14%, #fff); }
.casilla-est { font-size: 1.05rem; letter-spacing: 1px; line-height: 1; }
.casilla-est i { font-style: normal; color: #D5D9E8; -webkit-text-stroke: 1.5px var(--tinta); }
.casilla-est i.on { color: var(--sol); }

/* ---------------------------------------------------------------- TRAZAR */
#p-trazo { background: linear-gradient(180deg, #BDE9FF, #E3F6FF 40%, #CDEFC0); }
.barra-trazo { padding: 8px 10px; }
.barra-derecha { display: flex; gap: 8px; }
.ruta-puntos { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; justify-content: center; flex: 1; }
.ruta-puntos li { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--tinta); background: #fff; display: grid; place-items: center; font-size: 1rem; opacity: .75; }
.ruta-puntos li.actual { background: var(--sol); opacity: 1; transform: scale(1.18); animation: latido 1.4s infinite; }
.ruta-puntos li.hecho { background: var(--verde); opacity: 1; }
.pizarra { flex: 1; min-height: 0; display: flex; padding: 4px clamp(8px, 2vw, 24px) 0; }
.pizarra-marco {
  position: relative; flex: 1; border: 6px solid var(--tinta); border-radius: 34px; box-shadow: 0 8px 0 var(--tinta);
  background: radial-gradient(circle, rgba(47,140,255,.10) 1.6px, transparent 1.8px) 0 0 / 28px 28px, #fff;
  overflow: hidden;
}
.pizarra-marco::before { content: ""; position: absolute; inset: 8px; border-radius: 26px; border: 3px dashed color-mix(in srgb, var(--zc, #6FCF5B) 55%, #fff); pointer-events: none; }
.lienzos { position: absolute; inset: 0; }
.lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lienzo-fx { touch-action: none; cursor: crosshair; }
.lienzo-guia { transition: opacity .5s, filter .5s; }
.lienzo-guia.desvanece { opacity: 0; filter: blur(6px); }
.aviso-maestro {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none;
  background: var(--lila); color: #fff; border: var(--borde) solid var(--tinta); border-radius: 99px; padding: 4px 20px;
  font-size: 1.6rem; font-weight: 800; box-shadow: 0 5px 0 var(--tinta); animation: pop .4s;
}
.trazo-pie { display: flex; align-items: flex-end; gap: 10px; padding: 0 12px 10px; min-height: 108px; }
.trazin-guia { width: 96px; flex: none; margin-top: -30px; position: relative; z-index: 2; }
.bocadillo {
  position: relative; flex: 1; align-self: center; max-width: 560px; background: #fff; border: var(--borde) solid var(--tinta);
  border-radius: 22px; padding: 8px 16px; font-size: clamp(1.1rem, 3.2vw, 1.5rem); font-weight: 800; box-shadow: 0 5px 0 var(--tinta); min-height: 56px;
}
.bocadillo:empty { visibility: hidden; }
.bocadillo::before { content: ""; position: absolute; left: -16px; top: 50%; width: 22px; height: 22px; background: #fff; border-left: var(--borde) solid var(--tinta); border-bottom: var(--borde) solid var(--tinta); transform: translateY(-50%) rotate(45deg); }
.bocadillo.pop { animation: pop .35s; }
@keyframes pop { from { transform: scale(.85); } 60% { transform: scale(1.05); } }
.botones-maestro { display: flex; gap: 14px; align-self: center; }
.selector-pincel { position: absolute; top: 76px; right: 12px; z-index: 6; display: grid; grid-template-columns: repeat(4, 60px); gap: 10px; padding: 12px; background: #fff; border: var(--borde) solid var(--tinta); border-radius: 24px; box-shadow: var(--sombra); animation: pop .3s; }
body.zurdo .trazo-pie { flex-direction: row-reverse; }
body.zurdo .bocadillo::before { left: auto; right: -16px; transform: translateY(-50%) rotate(-135deg); }
body.zurdo .barra-trazo { flex-direction: row-reverse; }
body.zurdo .selector-pincel { right: auto; left: 12px; }
@media (max-height: 560px) { .trazo-pie { min-height: 80px; } .trazin-guia { width: 70px; } .btn-grande-r { width: 66px; height: 66px; font-size: 1.8rem; } }

/* ---------------------------------------------------------------- CAPAS */
.capa { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(41,52,110,.55); padding: 16px; animation: aparece .25s; }
@keyframes aparece { from { opacity: 0; } }
.celebra, .aviso-caja, .coleccion {
  position: relative; width: min(560px, 100%); max-height: 100%; overflow-y: auto; text-align: center;
  background: #fff; border: 6px solid var(--tinta); border-radius: 36px; box-shadow: 0 10px 0 var(--tinta);
  padding: 22px 18px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: rebota .5s cubic-bezier(.3,1.6,.5,1);
}
@keyframes rebota { from { transform: scale(.5); } }
.celebra { background: radial-gradient(circle at 50% 0%, #FFF6C9, #fff 60%); }
.celebra-trazin { width: 110px; margin-top: -8px; }
.celebra-titulo { font-size: clamp(2.2rem, 8vw, 3.2rem); font-weight: 800; line-height: 1; color: var(--chicle); -webkit-text-stroke: 5px var(--tinta); paint-order: stroke fill; text-shadow: 0 5px 0 var(--tinta); }
.celebra-estrellas, .fin-estrellas { display: flex; gap: 6px; justify-content: center; }
.est-grande { font-size: clamp(3.2rem, 12vw, 4.6rem); line-height: 1; color: #E3E6F0; -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill; }
.est-grande.ganada { color: var(--sol); animation: estrella-entra .5s cubic-bezier(.3,1.8,.5,1) both; animation-delay: var(--d); }
.est-grande:nth-child(2) { transform: translateY(-10px); }
@keyframes estrella-entra { from { transform: scale(0) rotate(-120deg); } }
.premio { min-height: 70px; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.premio-objetos { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; font-size: 3rem; line-height: 1.1; max-width: 420px; }
.premio-objetos.muchos { font-size: 2rem; max-width: 330px; }
.objeto { animation: rebota .35s cubic-bezier(.3,1.8,.5,1); }
.premio-palabras { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.tarjeta-palabra { position: relative; display: flex; flex-direction: column; align-items: center; width: 150px; padding: 8px; border: var(--borde) solid var(--tinta); border-radius: 22px; box-shadow: 0 5px 0 var(--tinta); background: #F4FBFF; animation: rebota .4s both; }
.tarjeta-palabra + .tarjeta-palabra { animation-delay: .3s; background: #FFF4FA; }
.tp-emoji { font-size: 3.4rem; line-height: 1.1; }
.tp-texto { font-size: 1.6rem; font-weight: 800; }
.tp-texto b { color: var(--chicle); }
.tp-bandera { position: absolute; top: -12px; right: -10px; font-size: 1.6rem; }
.premio-dibujo { display: flex; flex-direction: column; align-items: center; }
.pd-emoji { font-size: 5rem; line-height: 1.1; animation: rebota .5s cubic-bezier(.3,1.8,.5,1); }
.pd-palabras { font-size: 1.6rem; }
.premio-extra { background: var(--sol); border: 3px solid var(--tinta); border-radius: 99px; padding: 4px 16px; font-size: 1.8rem; animation: pop .4s; }
.peg-nueva { display: inline-block; animation: salta .6s ease-in-out 3; }

/* colección completa */
.capa-coleccion { background: radial-gradient(circle, color-mix(in srgb, var(--zc) 70%, #fff), var(--tinta)); }
.coleccion { background: linear-gradient(180deg, #FFF6C9, #fff); }
.desfile { display: flex; align-items: flex-end; justify-content: center; gap: 4px; font-size: 2.4rem; flex-wrap: wrap; }
.desfile .trazin { width: 90px; }
.desfile .trazin .tz-todo { animation: salta .45s ease-in-out infinite; }
.desfile span { animation: salta .5s ease-in-out infinite; animation-delay: calc(var(--i) * .07s); }
.col-trofeo { font-size: 5rem; line-height: 1; animation: gira-trofeo 2s ease-in-out infinite; }
@keyframes gira-trofeo { 50% { transform: scale(1.15) rotate(8deg); } }
.col-titulo { font-size: clamp(2rem, 7vw, 3rem); font-weight: 800; color: var(--sol); -webkit-text-stroke: 5px var(--tinta); paint-order: stroke fill; text-shadow: 0 5px 0 var(--tinta); line-height: 1; }
.col-texto { font-size: 1.35rem; font-weight: 800; }
.aviso-icono { font-size: 3.6rem; line-height: 1; }
.aviso-titulo { font-size: 1.9rem; font-weight: 800; }
.aviso-texto { font-weight: 600; max-width: 42ch; }

/* ---------------------------------------------------------------- MINIJUEGOS */
.capa-mini { background: rgba(41,52,110,.55); padding: 10px; }
.mini { width: min(900px, 100%); height: min(700px, 100%); display: flex; flex-direction: column; background: linear-gradient(180deg, #9EDCFF, #E8F8FF); border: 6px solid var(--tinta); border-radius: 36px; box-shadow: 0 10px 0 var(--tinta); overflow: hidden; animation: rebota .45s cubic-bezier(.3,1.6,.5,1); }
.mini-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; padding: 10px 14px 6px; position: relative; z-index: 2; }
.mini-titulo { display: flex; align-items: center; gap: 8px; font-size: 2.4rem; font-weight: 800; background: #fff; border: var(--borde) solid var(--tinta); border-radius: 99px; padding: 0 22px; box-shadow: 0 5px 0 var(--tinta); line-height: 1.3; }
.mini-titulo .mini-glifo { width: 56px; height: 56px; color: var(--chicle); }
.letra-objetivo { color: var(--chicle); font-size: 3rem; line-height: 1; }
.mini-contador { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.hueco { width: 44px; height: 44px; border-radius: 50%; border: 3px dashed var(--tinta); background: rgba(255,255,255,.7); display: grid; place-items: center; font-size: 1.6rem; }
.hueco.lleno { border-style: solid; background: #fff; animation: pop .3s; }
.hueco-letra { border-radius: 12px; font-weight: 800; color: var(--chicle); }
.mini-num { background: #fff; border: 3px solid var(--tinta); border-radius: 99px; padding: 0 14px; font-size: 1.5rem; font-weight: 800; }
.mini-tiempo { width: 100%; height: 12px; border: 3px solid var(--tinta); border-radius: 99px; background: #fff; overflow: hidden; }
.mini-tiempo span { display: block; height: 100%; background: linear-gradient(90deg, var(--verde), var(--sol)); transform-origin: left; }
.mini-campo { position: relative; flex: 1; min-height: 0; container-type: size; overflow: hidden; }
.mini-item { position: absolute; left: 0; top: 0; border: 0; background: none; padding: 0; will-change: transform; touch-action: manipulation; }
.globo { width: 12cqw; min-width: 64px; max-width: 110px; }
.globo svg { width: 100%; display: block; }
.abeja { font-size: clamp(3rem, 9cqmin, 5rem); line-height: 1; transition: opacity .3s; }
.abeja.atrapada { opacity: 0; transition: opacity .35s, scale .35s; scale: 1.8; }
.burbuja { border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff 8%, rgba(160,220,255,.5) 30%, rgba(79,179,255,.35) 70%); border: 3px solid rgba(47,140,255,.7); }
.burbuja-letra { width: clamp(70px, 13cqmin, 100px); height: clamp(70px, 13cqmin, 100px); border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff 10%, #DDF2FF 55%, #A9DBFF); border: 4px solid var(--tinta); font-size: clamp(2.2rem, 7cqmin, 3.2rem); font-weight: 800; color: var(--tinta); line-height: 1; }
.explota { animation: explota .3s forwards; }
@keyframes explota { to { scale: 1.6; opacity: 0; } }
.casi { animation: sacude .45s; }
.grupo-estrellas { position: absolute; inset: 6% 6% 4%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2% 3%; font-size: clamp(2.6rem, 11cqmin, 5rem); }
.grupo-estrellas.muchas { font-size: clamp(1.8rem, 7cqmin, 3.4rem); gap: 1% 2%; }
.grupo-estrellas .est { animation: rebota .4s both, brillo-est 2s ease-in-out infinite; display: inline-block; }
.grupo-estrellas .est.contada { transform: scale(1.35); filter: drop-shadow(0 0 10px #FFD23F); }
@keyframes brillo-est { 50% { filter: brightness(1.2); } }
.mini-opciones { display: flex; gap: 18px; justify-content: center; padding: 8px 12px 18px; flex-wrap: wrap; }
.mini-opciones:empty { display: none; }
.opcion-num, .opcion-forma { width: 104px; height: 104px; border-radius: 28px; border: 5px solid var(--tinta); background: #fff; box-shadow: 0 7px 0 var(--tinta); font-size: 3.6rem; font-weight: 800; padding: 8px; }
.opcion-forma .mini-glifo { width: 100%; height: 100%; }
.correcta { background: var(--verde); color: #fff; animation: pop .4s; }
.mini-ok .mini { box-shadow: 0 10px 0 var(--tinta), 0 0 0 12px rgba(255,210,63,.7); }

/* ---------------------------------------------------------------- FIN DE RUTA */
#p-fin { align-items: center; justify-content: center; overflow-y: auto; }
.fin-caja { position: relative; z-index: 2; width: min(620px, calc(100% - 24px)); display: flex; flex-direction: column; align-items: center; gap: 10px; background: #fff; border: 6px solid var(--tinta); border-radius: 36px; box-shadow: 0 10px 0 var(--tinta); padding: 18px 16px 24px; margin: 20px 0; text-align: center; }
.fin-trazin { width: 110px; margin-top: -60px; }
.fin-titulo { font-size: clamp(2rem, 7vw, 3rem); font-weight: 800; color: var(--verde); -webkit-text-stroke: 5px var(--tinta); paint-order: stroke fill; text-shadow: 0 5px 0 var(--tinta); line-height: 1.05; }
.fin-puntos { font-size: 2.2rem; font-weight: 800; background: var(--sol); border: var(--borde) solid var(--tinta); border-radius: 99px; padding: 0 22px; box-shadow: 0 5px 0 var(--tinta); }
.fin-trofeos { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.trofeo { width: 76px; height: 86px; display: flex; flex-direction: column; align-items: center; padding: 6px 4px 2px; border: 3px solid var(--tinta); border-radius: 18px; background: color-mix(in srgb, var(--zc) 16%, #fff); color: var(--zc); }
.trofeo .mini-glifo { flex: 1; width: 100%; min-height: 0; }
.trofeo i { font-style: normal; color: var(--sol); -webkit-text-stroke: 1px var(--tinta); font-size: .95rem; line-height: 1.2; }
.fin-guardado { font-weight: 800; min-height: 1.5em; }
.fin-guardado.ok { color: #137A45; }
.fin-guardado.aviso { color: #9A5B00; }

/* ---------------------------------------------------------------- PINCELES Y ÁLBUM */
.pinceles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; max-width: 900px; width: 100%; margin: 0 auto; }
.pincel-carta { position: relative; height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; border: var(--borde) solid var(--tinta); border-radius: 24px; background: #fff; box-shadow: var(--sombra); padding: 8px; overflow: hidden; }
.pincel-carta.elegido { background: #FFF6C9; box-shadow: var(--sombra), inset 0 0 0 4px var(--sol); }
.pincel-carta.bloqueado { background: #EEF0F6; }
.pincel-carta.bloqueado .pc-muestra { filter: grayscale(1); opacity: .35; }
.pc-muestra { position: absolute; left: 12px; right: 12px; top: 18px; height: 22px; border-radius: 99px; }
.pc-pincel { background: linear-gradient(90deg, #FF4F9A, #2F8CFF); }
.pc-arcoiris { background: linear-gradient(90deg, #FF4F4F, #FFB319, #FFE14D, #3FD46B, #2F8CFF, #8F5BFF); }
.pc-purpurina { background: radial-gradient(circle, #fff 1px, transparent 2px) 0 0/7px 7px, radial-gradient(circle, #FF9BD2 1px, transparent 2px) 3px 3px/9px 9px, #F2B705; }
.pc-burbujas { background: radial-gradient(circle at 30% 50%, transparent 5px, #4FB3FF 6px, transparent 7px) 0 0/22px 22px, rgba(126,211,255,.6); }
.pc-estrellas { background: #FFC933; }
.pc-agua { background: linear-gradient(180deg, #9EDCFF, #1E90FF); }
.pc-fuego { background: linear-gradient(180deg, #FFE066, #FF9A1F 50%, #FF4B1F); }
.pc-ruedas { background: repeating-linear-gradient(90deg, #4A4F63 0 4px, transparent 4px 9px) 0 3px/100% 5px no-repeat, repeating-linear-gradient(90deg, #4A4F63 0 4px, transparent 4px 9px) 0 14px/100% 5px no-repeat, #E7E9F0; }
.pc-emoji { font-size: 2.6rem; line-height: 1.1; }
.pc-coste { font-weight: 800; min-height: 1.3em; }
.prueba-pincel { max-width: 900px; width: 100%; margin: 0 auto; }
.lienzo-prueba { position: relative; height: 220px; background: #fff; border: var(--borde) solid var(--tinta); border-radius: 26px; box-shadow: var(--sombra); overflow: hidden; }
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; max-width: 900px; width: 100%; margin: 0 auto; }
.pegatina { aspect-ratio: 1; display: grid; place-items: center; font-size: 2.8rem; background: #fff; border: var(--borde) solid var(--tinta); border-radius: 50%; box-shadow: 0 5px 0 var(--tinta); transform: rotate(calc((var(--i, 0) - 3) * 2deg)); }
.pegatina.falta { background: #E7EAF3; border-style: dashed; box-shadow: none; }
.pegatina.falta small { font-size: .95rem; font-weight: 800; opacity: .7; }
.pegatina.nueva { animation: rebota .6s cubic-bezier(.3,1.8,.5,1) both, salta .7s ease-in-out .6s 3; }
.trofeo-zona { background: color-mix(in srgb, var(--zc) 40%, #fff); border-radius: 26px; }
.trofeo-zona.falta { filter: grayscale(1); opacity: .5; }

/* ---------------------------------------------------------------- RANKING */
.rk-filtros { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.segmentos { display: flex; background: #fff; border: 3px solid var(--tinta); border-radius: 99px; padding: 4px; gap: 4px; flex-wrap: wrap; justify-content: center; }
.seg { border: 0; background: none; border-radius: 99px; padding: 8px 16px; font-weight: 800; min-height: 44px; }
.seg[aria-pressed="true"], .seg[aria-selected="true"] { background: var(--sol); box-shadow: inset 0 0 0 3px var(--tinta); }
.rk-selects { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
select { height: 48px; border: 3px solid var(--tinta); border-radius: 14px; background: #fff; padding: 0 12px; font-weight: 700; }
.rk-tabla { max-width: 640px; width: 100%; margin: 0 auto; }
.rk-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rk-lista li { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 10px; align-items: center; background: #fff; border: 3px solid var(--tinta); border-radius: 18px; padding: 8px 14px; box-shadow: 0 4px 0 var(--tinta); }
.rk-lista li.mio { background: #FFF6C9; }
.rk-pos { font-size: 1.6rem; text-align: center; font-weight: 800; }
.rk-nick { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-nivel { font-size: 1.3rem; }
.rk-puntos { font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.rk-estado { text-align: center; font-weight: 700; padding: 12px; }
.nota { text-align: center; font-size: .95rem; font-weight: 600; opacity: .8; max-width: 60ch; margin: 0 auto; }

/* ---------------------------------------------------------------- PADRES (interfaz de adultos) */
.pantalla-adultos { background: #F3F6FB; font-size: 17px; }
.pantalla-adultos .titulo-barra { font-size: 1.4rem; box-shadow: 0 4px 0 var(--tinta); }
.puerta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 4vh; }
.puerta-texto { font-size: 1.2rem; }
.puerta-cuenta { font-size: 2.4rem; font-weight: 800; }
.puerta-respuesta { min-height: 56px; min-width: 160px; border-bottom: 4px solid var(--tinta); font-size: 2.2rem; font-weight: 800; }
.teclado { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; }
.tecla { height: 64px; border: 3px solid var(--tinta); border-radius: 16px; background: #fff; box-shadow: 0 4px 0 var(--tinta); font-size: 1.6rem; font-weight: 800; }
.tecla-ok { background: var(--verde); color: #fff; }
.panel-padres { max-width: 820px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.panel-padres > .segmentos { align-self: center; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: .95rem; font-weight: 700; }
.campo input { height: 48px; border: 3px solid var(--tinta); border-radius: 14px; padding: 0 12px; font-weight: 800; }
.informe h3 { font-size: 1.15rem; margin: 18px 0 8px; }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.datos > div { background: #fff; border: 2px solid rgba(41,52,110,.25); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; }
.datos > div.ancho { grid-column: 1 / -1; }
.datos small { font-size: .85rem; opacity: .75; font-weight: 600; }
.datos b { font-size: 1.25rem; }
.barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.barras li { display: grid; grid-template-columns: minmax(150px, 1.2fr) 2fr 52px; gap: 10px; align-items: center; font-size: .95rem; }
.barra-prog { height: 14px; background: #E1E6F0; border-radius: 99px; overflow: hidden; }
.barra-prog i { display: block; height: 100%; border-radius: 99px; }
.chips-aprend { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-aprend { min-width: 40px; height: 40px; padding: 0 8px; display: grid; place-items: center; border-radius: 12px; background: #E7EAF3; font-weight: 800; color: #7C84A8; }
.chip-aprend.ok { background: #C9F2BE; color: #1B6B2E; }
.chip-aprend.oro { background: var(--sol); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.ajustes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ajustes li { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border: 2px solid rgba(41,52,110,.2); border-radius: 16px; padding: 10px 14px; }
.ajustes li span { display: flex; flex-direction: column; }
.ajustes small { font-size: .85rem; opacity: .75; font-weight: 600; }
.ajustes input[type="range"] { width: min(220px, 40vw); accent-color: var(--verde); }
.interruptor { width: 64px; height: 36px; flex: none; border-radius: 99px; border: 3px solid var(--tinta); background: #D5D9E8; position: relative; padding: 0; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--tinta); transition: left .15s; }
.interruptor[aria-checked="true"] { background: var(--verde); }
.interruptor[aria-checked="true"]::after { left: 29px; }
.pp-perfiles { display: flex; flex-direction: column; gap: 12px; }
.pp-perfil { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 10px 14px; align-items: end; background: #fff; border: 2px solid rgba(41,52,110,.2); border-radius: 18px; padding: 12px 14px; }
.pp-cara { font-size: 3rem; align-self: center; }
.pp-botones { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.pp-msg { grid-column: 1 / -1; font-weight: 700; min-height: 1.2em; }
@media (max-width: 560px) { .pp-perfil { grid-template-columns: 56px 1fr; } .pp-perfil .campo:nth-of-type(2) { grid-column: 2; } .barras li { grid-template-columns: 1fr 70px 44px; } .avatares { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------- CONFETI Y TOAST */
.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.confeti i { position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px; animation: confeti linear forwards; }
@keyframes confeti { to { transform: translate(var(--x), 110vh) rotate(var(--giro)); } }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 160%); z-index: 45; background: var(--tinta); color: #fff; border-radius: 99px; padding: 10px 22px; font-weight: 800; font-size: 1.15rem; transition: transform .3s cubic-bezier(.3,1.5,.5,1), opacity .2s, visibility .3s; max-width: calc(100% - 24px); text-align: center; pointer-events: none; opacity: 0; visibility: hidden; }
.toast.visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------- ACCESIBILIDAD */
body.calma *, body.calma *::before, body.calma *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
body.calma .nube, body.calma .tren, body.calma .pajaro, body.calma .mariposa { animation: none !important; }
body.calma .pajaro, body.calma .mariposa { display: none; }
body.contraste { --tinta: #000; --cielo-claro: #fff; }
body.contraste .mapa-fondo, body.contraste .escena-cielo, body.contraste #p-trazo, body.contraste #p-zona { background: #fff; }
body.contraste .colinas, body.contraste .nubes, body.contraste .decor, body.contraste .mapa-fondo > * { display: none; }
body.contraste .zona-nombre, body.contraste .bocadillo { font-weight: 800; }
body.contraste .pizarra-marco { background: #fff; }
@media (prefers-reduced-motion: reduce) { .nube, .tren, .pajaro, .mariposa { animation: none; } }
@media (min-width: 900px) { .casillas { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); } }
.mini-campo { background: linear-gradient(180deg, transparent 70%, #A6E28F 70.5%, #7FD36B); }
.premio-consejo { font-weight: 800; background: #E9F6FF; border: 3px dashed var(--tinta); border-radius: 16px; padding: 6px 14px; }

.trazin-mapa.derecha { left: auto; right: -46%; }
@media (max-width: 480px) {
  .barra-trazo { gap: 6px; padding: 6px 8px; }
  .barra-trazo .btn-redondo { width: 46px; height: 46px; font-size: 1.25rem; box-shadow: 0 4px 0 var(--tinta); }
  .barra-derecha { gap: 5px; }
  .ruta-puntos { gap: 4px; }
  .ruta-puntos li { width: 22px; height: 22px; border-width: 3px; font-size: .7rem; }
  .trazin-guia { width: 74px; }
  .bocadillo { font-size: 1.05rem; padding: 6px 12px; }
  .selector-pincel { top: 62px; grid-template-columns: repeat(4, 52px); }
  .selector-pincel .btn-redondo { width: 52px; height: 52px; }
}