:root{
  --bg1:#ffedd5;        /* durazno claro */
  --bg2:#ffe4e6;        /* rosado pastel */
  --acc:#f97316;        /* naranja brillante */
  --acc2:#22c55e;       /* verde alegre */
  --card:#ffffff;       /* cartas claras */
  --cardEdge:#f43f5e;   /* rosa fuerte */
  --gap:12px;
  --border:#fecaca;     /* borde suave rosado */
  --ink:#1f2937;        /* texto oscuro */
}

/* -------------------- Base -------------------- */
html, body { height: 100%; margin: 0; }
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -20%, #ffd6a2, #ffd6a2 40%, transparent 41%),
    radial-gradient(1000px 700px at 110% -10%, #ffc0cb, transparent 60%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  background-attachment: fixed;
}

.container{ max-width: 980px; }
#app-container{ text-align:center; user-select:none; -webkit-user-select:none; }

/* Asegura que lo oculto no capture clics */
.hidden{ display:none !important; pointer-events:none !important; }

/* -------------------- Pantalla de niveles -------------------- */
#level-selection-screen h1{
  color:#fb7185;
  text-shadow:0 0 12px color-mix(in srgb, #fb7185 40%, transparent);
}
.level-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:var(--gap);
}
.level-btn{
  padding:18px 14px;
  font-size:1.1rem;
  font-weight:700;
  border:2px solid #fdba74;
  border-radius:16px;
  background:linear-gradient(180deg,#fff7ed,#ffedd5);
  color:#9a3412;
  box-shadow:0 6px 16px rgba(253,186,116,.35);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s;
}
.level-btn:hover,.level-btn:active{
  transform:translateY(-2px);
  border-color:#fb923c;
  box-shadow:0 10px 24px rgba(34,197,94,.25);
}

/* -------------------- Cabecera de juego -------------------- */
.game-header{
  display:flex; gap:8px; justify-content:space-between; align-items:center;
  margin-bottom:.75rem; flex-wrap:wrap;
}
#level-display{ font-size:1.25rem; color:#9a3412 }
.timer{
  font-size:1.1rem; font-weight:800; color:#166534;
  background:#dcfce7; padding:6px 14px; border-radius:999px;
  border:2px solid #86efac; box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

/* Botón de sonido */
.sound-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:999px; border:2px solid #fde68a;
  background:linear-gradient(180deg,#fff7ed,#fffbeb);
  color:#92400e; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.sound-btn.muted{ opacity:.65 }

/* Botón Iniciar (mismo estilo en overlay) */
.start-btn{
  padding:10px 18px; border-radius:999px; font-weight:800;
  border:2px solid #fda4af;
  background:linear-gradient(180deg,#fecdd3,#fda4af);
  color:#831843; cursor:pointer;
  box-shadow:0 8px 18px rgba(253,164,175,.35);
  transition:transform .15s ease;
}
.start-btn:hover{ transform:translateY(-1px); }

/* -------------------- Barra de tiempo -------------------- */
.progress{
  height:10px;
  background:#ffe4e6;
  border:2px solid #fecaca;
}
.progress-bar{
  background:linear-gradient(90deg, var(--acc), var(--acc2));
}

/* -------------------- Tablero y overlays -------------------- */
.board-wrapper{ position:relative; }
#game-board{
  --cols:4;
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(var(--cols), 1fr);
  justify-content:center;
  margin-inline:auto;
}

/* Overlay de inicio encima del tablero */
#start-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.55);
  z-index:900;
}

/* Cuenta regresiva encima del overlay */
#countdown{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,240,245,.6);
  z-index:1000;
}
#countdown .countdown-text{
  font-size:clamp(4rem, 18vmin, 12rem); /* grande */
  font-weight:900;
  color:#ef4444;
  text-shadow:0 8px 30px rgba(0,0,0,.2);
  animation:pop .5s ease;
}
@keyframes pop{ from{ transform:scale(.7); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* Shake para el “¡YA!” */
@keyframes shake {
  0%{transform:translateX(0)}
  15%{transform:translateX(-8px)}
  30%{transform:translateX(8px)}
  45%{transform:translateX(-6px)}
  60%{transform:translateX(6px)}
  75%{transform:translateX(-3px)}
  90%{transform:translateX(3px)}
  100%{transform:translateX(0)}
}
.shake{ animation:shake .55s ease-in-out; }

/* -------------------- Cartas -------------------- */
.card{
  width:clamp(56px, calc(80vmin / var(--cols)), 120px);
  aspect-ratio:1/1;
  perspective:1000px;
  cursor:pointer;
}
.card-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform .6s;
  border-radius:14px;
  background:radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.9), transparent 40%);
  box-shadow:0 10px 24px rgba(255,105,135,.25), inset 0 0 0 2px #fecaca;
}
.card.flipped .card-inner{ transform:rotateY(180deg); }

.card-face{
  position:absolute; inset:0; border-radius:14px;
  display:flex; justify-content:center; align-items:center;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  font-size:clamp(1.8rem, 5vmin, 3rem);
}

/* cara frontal */
.card-front{
  background:linear-gradient(180deg,#fff7ed,#ffedd5);
  border:2px solid #fdba74;
  color:#f97316;
  font-weight:800; letter-spacing:.05em;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.card-front::after{ content:"?"; }

/* cara trasera */
.card-back{
  transform:rotateY(180deg);
  background:linear-gradient(180deg,#93c5fd,#60a5fa); /* azul alegre */
  border:2px solid #bfdbfe;
  color:#1f2937;
}

/* Hover */
.card:hover .card-inner{
  box-shadow:0 16px 32px rgba(34,197,94,.22), inset 0 0 0 2px #fda4af;
}

/* Emparejada */
.card.matched .card-inner{
  animation:found .6s ease both;
  box-shadow:0 0 0 2px var(--cardEdge), 0 0 32px rgba(244,63,94,.35);
}
@keyframes found{
  0%{ transform:rotateY(180deg) scale(1) }
  50%{ transform:rotateY(180deg) scale(1.06) }
  100%{ transform:rotateY(180deg) scale(1.0) }
}

/* -------------------- Stats -------------------- */
.game-stats{
  display:flex; gap:12px; justify-content:center; align-items:center;
  padding:10px 12px; border-radius:12px;
  background:#fff1f2; border:2px solid #fecaca;
  color:#1f2937; font-weight:700;
}

/* -------------------- Modal -------------------- */
#modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  z-index:1100;
}
#modal.hidden{ display:none !important; }
.modal-content{
  width:min(92vw, 460px);
  background:linear-gradient(180deg,#fff7ed,#ffedd5);
  border:2px solid #fdba74;
  border-radius:18px; padding:28px 24px; text-align:center; color:#1f2937;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  animation:zoomIn .25s ease-out;
}
@keyframes zoomIn{ from{ transform:scale(.92); opacity:0 } to{ transform:scale(1); opacity:1 } }
.modal-content h2{ font-size:1.8rem; margin:0 0 12px }
.modal-content button{
  display:block; width:100%; padding:12px 16px; margin-top:12px;
  font-size:1rem; font-weight:800; border-radius:12px; border:2px solid #fda4af; cursor:pointer;
  background:linear-gradient(180deg,#fecdd3,#fda4af); color:#831843;
}
#back-to-menu-btn{
  background:linear-gradient(180deg,#fffbeb,#fff7ed);
  border:2px solid #fde68a;
  color:#92400e;
}
/* Botón INICIAR más grande (solo en el overlay) */
#start-overlay .start-btn{
  font-size: clamp(1.25rem, 4.8vmin, 2.2rem);
  padding: clamp(14px, 2.2vmin, 22px) clamp(28px, 4.8vmin, 40px);
  min-width: min(80vw, 460px);
  min-height: clamp(48px, 8vmin, 72px);
  border-width: 3px;
  border-radius: 999px;
  letter-spacing: .03em;
  box-shadow: 0 10px 24px rgba(253,164,175,.4), 0 2px 0 rgba(255,255,255,.8) inset;
}

#start-overlay .start-btn:hover{
  transform: translateY(-2px) scale(1.02);
}