/* Tema compartido del juego: un solo set de tokens y los componentes comunes
   (overlay, tarjeta, botones, respuestas y dato curioso) que antes estaban
   copiados en index.html y mundos.html. Lo cargan ambas páginas con
   <link rel="stylesheet" href="/theme.css?v=__V__"> antes de su <style> propio,
   así que cada juego puede seguir sobreescribiendo lo que le es exclusivo
   (.overlay fixed en Los Mundos, ancho de .card, etc.). */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  --coral:#FF6B8A; --coral-deep:#E9547A;
  --sun:#FFC94D; --sun-deep:#F2B32E;
  --green:#4CC98C; --green-deep:#33A971;
  --cream:#FFF7EC; --peach:#F3D2AE; --nose:#5A4632;
  --ink:#3A2E4A; --ink-soft:#6B5E7A;
  --card:#FFFFFF; --card-edge:#F0E6EE;
  --shadow:0 14px 30px rgba(90,60,80,.18);
  --shadow-sm:0 6px 14px rgba(90,60,80,.15);
  --font-d:'Fredoka',system-ui,sans-serif;
  --font-b:'Nunito',system-ui,sans-serif;
}

/* ---------- overlay y tarjeta ---------- */
.overlay{position:absolute;inset:0;background:rgba(30,18,40,.55);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.overlay.show{display:flex}
.card{background:var(--card);border-radius:26px;border:3px solid #fff;box-shadow:var(--shadow);
  width:100%;max-width:400px;padding:24px 22px;text-align:center;
  animation:card-in .35s cubic-bezier(.2,1.3,.5,1)}
@keyframes card-in{from{transform:translateY(24px) scale(.94);opacity:0}to{transform:none;opacity:1}}

/* ---------- tipografía ---------- */
h1{font-family:var(--font-d);font-weight:700;margin:0;line-height:1.05;text-wrap:balance}
h2{font-family:var(--font-d);font-weight:600;margin:0 0 4px;text-wrap:balance}
p{margin:8px 0;line-height:1.45;color:var(--ink-soft)}
.eyebrow{font-family:var(--font-d);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  font-size:12px;color:var(--coral)}

/* ---------- botones ---------- */
.btn{font-family:var(--font-d);font-weight:600;font-size:18px;border:none;cursor:pointer;
  border-radius:999px;padding:14px 26px;color:#fff;background:var(--coral);
  box-shadow:0 6px 0 var(--coral-deep);transition:transform .1s,box-shadow .1s;width:100%}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--coral-deep)}
.btn.sun{background:var(--sun);box-shadow:0 6px 0 var(--sun-deep);color:#5a4300}
.btn.green{background:var(--green);box-shadow:0 6px 0 var(--green-deep)}
.btn.ghost{background:#F1ECF3;color:var(--ink);box-shadow:0 6px 0 #ddd3e0}
.btn:focus-visible,.ans:focus-visible{outline:3px solid var(--coral);outline-offset:2px}

/* ---------- respuestas del reto ---------- */
.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 6px}
.answers.one{grid-template-columns:1fr}
.ans{font-family:var(--font-d);font-weight:600;font-size:20px;padding:16px 10px;border-radius:18px;
  border:3px solid var(--card-edge);background:#FBF7FA;color:var(--ink);cursor:pointer;
  transition:transform .1s,border-color .15s,background .15s;min-height:64px}
.ans:active{transform:scale(.96)}
.ans.right{border-color:var(--green);background:#E6FAF0;animation:right-pop .4s}
.ans.wrong{border-color:var(--coral);background:#FDECF1;animation:shake .35s}
@keyframes right-pop{50%{transform:scale(1.08)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---------- dato curioso ---------- */
.fact{background:#FFF8E7;border:2px dashed var(--sun-deep);border-radius:18px;padding:14px 16px;margin:14px 0;
  font-family:var(--font-b);color:#7a5a10;font-weight:700;font-size:15px;line-height:1.4}
.fact .label{display:block;font-family:var(--font-d);color:var(--sun-deep);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}