:root {
  --fondo: #FFF4DC;
  --tinta: #3B2A4A;
  --suave: #7A6A86;
  --tarjeta: #FFFFFF;
  --acento: #FF7A59;
  --acento-osc: #E0593A;
  --verde: #2FBF71;
  --amarillo: #FFC93C;
  --borde: #F1DFC0;
  --lado: min(calc(100vw - 24px), calc((100dvh - 180px) / 2));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Fredoka', system-ui, sans-serif;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom));
  gap: 8px;
}

/* ---------- Barra superior ---------- */
.barra { position: relative; z-index: 15; width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 6px; }

.niveles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.nivel {
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  color: var(--tinta);
  background: var(--tarjeta);
  border: 2px solid var(--borde);
  border-radius: 14px;
  padding: 6px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: transform .12s, background .12s;
}
.nivel .emoji { font-size: 20px; line-height: 1; }
.nivel:active { transform: scale(.95); }
.nivel.activo { background: var(--amarillo); border-color: #E5A800; box-shadow: 0 3px 0 #E5A800; }

.progreso { display: flex; justify-content: center; gap: 4px; min-height: 28px; font-size: 24px; line-height: 28px; }
.progreso .estrella { filter: grayscale(1) opacity(.3); transition: filter .3s, transform .3s; }
.progreso .estrella.ok { filter: none; transform: scale(1.15); }

/* ---------- Tablero ---------- */
.tablero { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.lienzo {
  position: relative;
  width: var(--lado);
  height: var(--lado);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 3px #fff, 0 4px 14px rgba(59, 42, 74, .15);
  touch-action: manipulation;
}
.lienzo img, .lienzo canvas { width: 100%; height: 100%; display: block; pointer-events: none; }
.lienzo img:not([src]) { visibility: hidden; }
.lienzo .marcas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

.marca { fill: none; stroke: #1E9E57; stroke-width: .016; animation: aparecer .35s ease-out; }
.marca-sombra { fill: none; stroke: #fff; stroke-width: .028; }
.fallo { stroke: #E53935; stroke-width: .012; stroke-linecap: round; animation: desvanecer .7s forwards; }
.pista { fill: rgba(255, 201, 60, .35); stroke: var(--amarillo); stroke-width: .01; animation: latido 1.6s ease-in-out forwards; }

@keyframes aparecer { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.marca, .marca-sombra { transform-box: fill-box; transform-origin: center; }
@keyframes desvanecer { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes latido { 0% { opacity: 0; } 25%, 75% { opacity: 1; } 100% { opacity: 0; } }

.lienzo.temblor { animation: temblor .3s; }
@keyframes temblor { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---------- Acciones ---------- */
.acciones { display: flex; gap: 10px; width: 100%; max-width: 640px; justify-content: center; }

.btn {
  font: inherit;
  font-weight: 700;
  font-size: 18px;
  border: none;
  border-radius: 16px;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform .12s;
}
.btn:active { transform: translateY(2px); }
.btn-otro { background: var(--acento); color: #fff; box-shadow: 0 4px 0 var(--acento-osc); flex: 1; max-width: 320px; }
.btn-pista { background: var(--tarjeta); box-shadow: 0 4px 0 var(--borde); font-size: 22px; padding: 8px 16px; }
.btn:disabled { opacity: .5; }

/* ---------- Capas ---------- */
.capa {
  position: fixed;
  inset: 0;
  background: rgba(255, 244, 220, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10;
}
.capa[hidden] { display: none; }

.tarjeta {
  background: var(--tarjeta);
  border-radius: 24px;
  padding: 28px 24px;
  text-align: center;
  width: min(340px, 100%);
  box-shadow: 0 10px 30px rgba(59, 42, 74, .18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tarjeta .titulo { font-size: 24px; font-weight: 700; margin: 0; }
.tarjeta .sub { font-size: 15px; color: var(--suave); margin: 0; }
.tarjeta .btn-otro { width: 100%; margin-top: 8px; }

.pincel, .trofeo { font-size: 56px; line-height: 1; }
.pincel { animation: pintar 1.2s ease-in-out infinite; }
.trofeo { animation: rebote .8s ease-out; }
@keyframes pintar { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg) translateX(8px); } }
@keyframes rebote { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

.barra-carga { width: 100%; height: 12px; background: var(--fondo); border-radius: 99px; overflow: hidden; }
.barra-carga div { height: 100%; width: 0; background: linear-gradient(90deg, var(--amarillo), var(--acento)); border-radius: 99px; transition: width 1s linear; }

#confeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }

/* Celular horizontal / pantallas anchas: dibujos lado a lado */
@media (orientation: landscape) and (min-aspect-ratio: 4/3) {
  :root { --lado: min(calc((100vw - 40px) / 2), calc(100dvh - 140px)); }
  .tablero { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}