/* Kit común de la Zona Niños (mismo aspecto en todos los juegos): colores, letra, barra superior, cielo,
   tarjetas y botones. Basado en el diseño de Notas Mágicas. Uso:
     <link rel="stylesheet" href="/ninos/ui.css"> + <script src="/ninos/ui.js" defer></script>
     <div class="k-sky"></div>   (cielo con sol, nubes y colinas; lo rellena ui.js)
     <header class="k-bar"><a class="k-round" href="/ninos/" data-k-icon="home" aria-label="Zona Niños"></a>
       <h1>TÍTULO</h1><button class="k-round k-mute" aria-label="Silencio"></button></header>
   Clases: .k-card (tarjeta blanca), .k-btn (botón con relieve; .alt .pink .blue), .k-title, .k-note. */
@font-face { font-family: "Fredoka"; src: url("/Fredoka-SemiBold.ttf"); font-display: swap; }
:root {
  --ink: #3a2a5c; --soft: #6f5f93; --cream: #fff7dc;
  --pink: #ff6fae; --yellow: #ffd23f; --mint: #5fd99b; --blue: #4fb0ff; --lilac: #b993ff;
  --round: "Fredoka", "Nunito", "Varela Round", ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
}
body.k { color: var(--ink); font: 600 21px/1.3 var(--round); background: #bfe9ff; margin: 0;
         -webkit-tap-highlight-color: transparent; touch-action: manipulation; overscroll-behavior: none; }
body.k button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }

/* cielo fijo detrás de todo */
.k-sky { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none;
         background: linear-gradient(#8fd8ff, #d6f3ff 52%, #fff7dc); }
.k-sky svg { display: block; }
.k-sky .sun { position: absolute; right: 6%; top: 84px; width: min(22vw, 130px); animation: k-spin 40s linear infinite; }
.k-sky .sun .face { animation: k-spin 40s linear infinite reverse; transform-origin: 50% 50%; transform-box: fill-box; }
.k-sky .cloud { position: absolute; left: -200px; width: 180px; opacity: .95; animation: k-drift linear infinite; }
.k-sky .c1 { top: 90px; animation-duration: 70s; animation-delay: -20s; }
.k-sky .c2 { top: 190px; width: 130px; animation-duration: 95s; animation-delay: -70s; }
.k-sky .c3 { top: 40px; width: 110px; animation-duration: 120s; animation-delay: -40s; }
.k-sky .hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34vh; }
@keyframes k-drift { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 400px)); } }
@keyframes k-spin { to { transform: rotate(360deg); } }

/* barra superior: casita / título / sonido */
.k-bar { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
         padding-top: max(10px, env(safe-area-inset-top)); background: rgba(255,255,255,.72);
         box-shadow: 0 4px 0 rgba(58,42,92,.14); z-index: 5; }
.k-bar h1 { flex: 1; margin: 0; text-align: center; font: 600 30px/1.1 var(--round); color: var(--pink); letter-spacing: .5px;
            text-shadow: 2px 2px 0 #fff, 4px 4px 0 rgba(185,147,255,.55); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.k-round { width: 62px; height: 62px; flex: none; border-radius: 50%; border: 4px solid var(--ink); background: #fff;
           display: grid; place-items: center; box-shadow: 0 5px 0 var(--ink); text-decoration: none; padding: 0; color: var(--ink); }
.k-round svg { width: 32px; height: 32px; }
.k-round:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.k-round[hidden] { visibility: hidden; display: grid; }

/* piezas */
.k-card { background: #fff; border: 4px solid var(--ink); border-radius: 28px; box-shadow: 0 7px 0 var(--ink); padding: 18px; }
.k-btn { font: 600 24px/1.1 var(--round); padding: 12px 22px; border-radius: 999px; border: 4px solid var(--ink);
         background: var(--yellow); color: var(--ink); box-shadow: 0 5px 0 var(--ink); display: inline-flex; align-items: center;
         justify-content: center; gap: 8px; text-decoration: none; }
.k-btn.alt { background: var(--mint); } .k-btn.pink { background: var(--pink); color: #fff; } .k-btn.blue { background: var(--blue); color: #fff; }
.k-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.k-title { font: 600 28px/1.15 var(--round); color: var(--ink); text-shadow: 2px 2px 0 #fff; text-align: center; margin: 10px 0; }
.k-note { color: var(--soft); font-size: 18px; text-align: center; }
/* "yo" en la barra: avatar + compañera + monedas/estrellas */
.k-me { flex: none; display: flex; align-items: center; height: 62px; padding: 0 12px 0 4px; gap: 2px; border-radius: 999px; border: 4px solid var(--ink);
        background: #fff; box-shadow: 0 5px 0 var(--ink); text-decoration: none; color: var(--ink); }
.k-me:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.k-me-pic { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #e9f5ff; flex: none; }
.k-me-pic svg, .k-me-pal svg { width: 100%; height: 100%; display: block; }
.k-me-pal { width: 40px; height: 40px; margin-left: -14px; align-self: flex-end; flex: none; animation: k-hop 2.4s ease-in-out infinite; }
.k-me-num { display: flex; flex-direction: column; font-size: 16px; line-height: 1.15; margin-left: 6px; white-space: nowrap; }
@keyframes k-hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-6px); } }
@media (max-width: 640px) { .k-me-num { display: none; } .k-me { padding-right: 6px; } }
@media (max-width: 480px) { .k-me { height: 52px; } .k-me-pic { width: 42px; height: 42px; } .k-me-pal { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .k-me-pal { animation: none; } }
@media (max-width: 480px) { .k-bar h1 { font-size: 23px; } .k-round { width: 52px; height: 52px; } .k-round svg { width: 26px; height: 26px; } }
@media (prefers-reduced-motion: reduce) { .k-sky .sun, .k-sky .sun .face, .k-sky .cloud { animation: none; } }