/* =========================================================
   El Rescate de las Icnitas — estilos
   Paleta: badlands de Rioja Oriental
   ========================================================= */
:root{
  --arena:      #F3E4C8;   /* fondo cálido, tierra clara */
  --arcilla:    #C1502E;   /* acento principal, roca roja */
  --arcilla-osc:#9C3D22;
  --olivo:      #7A8B5A;   /* vegetación del valle */
  --cielo:      #8EC5E8;   /* cielo */
  --dorado:     #E0A72E;   /* pirita / estrellas */
  --marron:     #3B2A1E;   /* texto principal */
  --marron-cl:  #8B5A2B;
  --blanco:     #FFFDF8;
  --sombra:     0 4px 0 rgba(59,42,30,0.35);
  --radio:      18px;
  --fuente: 'Trebuchet MS', 'Comic Sans MS', 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; }

html,body{
  margin:0; padding:0; height:100%;
  font-family: var(--fuente);
  background: linear-gradient(180deg, var(--cielo) 0%, var(--cielo) 22%, var(--arena) 22%);
  color: var(--marron);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#app{
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding: 12px;
}

h1,h2,h3{ margin:.2em 0; line-height:1.15; }
h1{ font-size: clamp(1.5rem, 6vw, 2.2rem); text-align:center; color: var(--arcilla-osc); }
h2{ font-size: clamp(1.2rem, 5vw, 1.6rem); text-align:center; }
p{ font-size: 1rem; line-height:1.45; }

/* ---------- Pantallas ---------- */
.pantalla{
  width:100%;
  max-width: 560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  animation: aparecer .25s ease-out;
}
.pantalla.oculta{ display:none; }
@keyframes aparecer{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.tarjeta, .tarjeta-inicio{
  background: var(--blanco);
  border: 3px solid var(--marron-cl);
  border-radius: var(--radio);
  padding: 20px;
  width:100%;
  text-align:center;
  box-shadow: var(--sombra);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.subtitulo{ color: var(--marron-cl); margin-top:-6px; }

/* ---------- Botones ---------- */
.boton{
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  color: var(--marron);
  background: var(--arena);
  border: 3px solid var(--marron-cl);
  border-radius: 14px;
  padding: 10px 18px;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--marron-cl);
  transition: transform .08s ease;
}
.boton:active{ transform: translateY(2px); box-shadow: 0 1px 0 var(--marron-cl); }
.boton:focus-visible{ outline: 4px solid var(--dorado); outline-offset: 2px; }

.boton-grande{ width:100%; max-width:320px; font-size:1.1rem; padding:14px 18px; }
.boton-primario{ background: var(--arcilla); color: var(--blanco); border-color: var(--arcilla-osc); box-shadow: 0 3px 0 var(--arcilla-osc); }
.boton-icono{ padding: 8px 12px; font-size:1.3rem; line-height:1; }

.botones-inicio{ display:flex; flex-direction:column; gap:10px; width:100%; align-items:center; margin-top:6px; }
.botones-resultado{ display:flex; gap:10px; width:100%; flex-wrap:wrap; justify-content:center; }

/* ---------- Instrucciones ---------- */
.instrucciones-contenido{ text-align:left; width:100%; }
.paso-instruccion{ display:flex; align-items:center; gap:12px; background:var(--arena); border-radius:14px; padding:10px; margin-bottom:10px; }
.lista-instrucciones{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.lista-instrucciones li{ background:var(--arena); border-radius:12px; padding:8px 12px; }

/* ---------- Selección de nivel ---------- */
.lista-niveles{ display:flex; flex-direction:column; gap:12px; width:100%; }
.tarjeta-nivel{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--arena); border:3px solid var(--marron-cl); border-radius:14px;
  padding:12px 16px; cursor:pointer; font-family:inherit; font-size:1.05rem; font-weight:bold;
  min-height:44px; color:var(--marron);
}
.tarjeta-nivel:focus-visible{ outline: 4px solid var(--dorado); outline-offset:2px; }
.tarjeta-nivel .estrellas-mini{ font-size:1.1rem; color:var(--dorado); letter-spacing:2px; }
.tarjeta-nivel[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- Pantalla de juego ---------- */
#pantalla-juego{ max-width: 720px; gap:8px; }
.barra-superior{ width:100%; display:flex; align-items:center; justify-content:space-between; }
.info-juego{ display:flex; gap:8px; }
.chip{
  background: var(--blanco); border:2px solid var(--marron-cl); border-radius: 999px;
  padding:6px 12px; font-weight:bold; font-size:.95rem;
}
.instruccion-nivel{ text-align:center; font-weight:bold; color:var(--arcilla-osc); margin:2px 0; min-height: 1.3em; }

.mapa-juego{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  max-height: 46vh;
  background:
    radial-gradient(circle at 20% 25%, #ffffff55 0, transparent 35%),
    linear-gradient(180deg, #D9B97F 0%, #C89A5E 55%, #B98650 100%);
  border: 3px solid var(--marron-cl);
  border-radius: 16px;
  overflow:hidden;
  touch-action: none;
}
.mapa-juego::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(59,42,30,.06) 0 2px, transparent 2px 40px),
    repeating-linear-gradient(0deg, rgba(59,42,30,.05) 0 2px, transparent 2px 40px);
  pointer-events:none;
}

.zona{
  position:absolute;
  width: 84px; height: 84px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 3px dashed var(--marron-cl);
  background: rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  transition: box-shadow .2s;
}
.zona svg{ width:56%; height:56%; opacity:.32; }
.zona.completa{ border-style: solid; background: rgba(122,139,90,.25); }
.zona.completa svg{ opacity:1; }
.zona.pista{ animation: pulso 1s infinite; box-shadow: 0 0 0 6px rgba(224,167,46,.55); border-color: var(--dorado); }
@keyframes pulso{ 0%,100%{ box-shadow:0 0 0 4px rgba(224,167,46,.4);} 50%{ box-shadow:0 0 0 12px rgba(224,167,46,.15);} }
.zona:focus-visible{ outline: 4px solid var(--dorado); outline-offset:3px; }

.bandeja-piezas{
  width:100%; min-height: 96px;
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:center;
  background: var(--arena); border:3px solid var(--marron-cl); border-radius:16px; padding:10px;
}

.pieza{
  width: 72px; height: 72px;
  background: var(--blanco);
  border: 3px solid var(--marron-cl);
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  cursor: grab;
  touch-action: none;
  box-shadow: 0 3px 0 var(--marron-cl);
  user-select:none;
  position: relative;
  z-index: 5;
}
.pieza svg{ width: 62%; height:62%; }
.pieza.arrastrando{ cursor:grabbing; opacity:.85; z-index:50; box-shadow: 0 8px 14px rgba(0,0,0,.25); }
.pieza.seleccionada{ outline: 4px solid var(--dorado); outline-offset:2px; }
.pieza.colocada{ visibility:hidden; }
.pieza:focus-visible{ outline: 4px solid var(--dorado); outline-offset:2px; }

/* ---------- Estrellas resultado ---------- */
.estrellas-resultado{ font-size: 2.4rem; letter-spacing:6px; color:#D8C9A9; }
.estrellas-resultado .ganada{ color: var(--dorado); }
.texto-resultados{ font-weight:bold; }

/* ---------- Microficha (modal) ---------- */
.microficha{
  position:fixed; inset:0; background: rgba(59,42,30,.55);
  display:flex; align-items:center; justify-content:center; padding:16px; z-index:100;
}
.microficha.oculta{ display:none; }
.microficha-caja{
  background: var(--blanco); border-radius: var(--radio); border:3px solid var(--marron-cl);
  padding: 22px; max-width: 380px; width:100%; text-align:center;
  box-shadow: var(--sombra);
}
.microficha-icono svg{ width:64px; height:64px; }
.microficha-botones{ display:flex; gap:10px; justify-content:center; margin-top:10px; }

/* ---------- Utilidades ---------- */
.visualmente-oculto{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* Reducir movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  .pantalla, .zona.pista{ animation:none !important; }
}

/* Pantallas pequeñas (360px) */
@media (max-width:380px){
  .zona{ width:68px; height:68px; }
  .pieza{ width:60px; height:60px; }
}