/* =========================================================
   GRANXA GALEGA · Estilos (versión 3)
   1. Colores y base · 2. Cabecera y cielo · 3. Zona de clic
   4. Paneles y listas · 5. Personaje, razas y establo
   6. Minijuegos · 7. Ventanas, avisos y tutorial · 8. Animaciones
   ========================================================= */

/* ---------- 1. Colores y base ---------- */
:root {
  --verde: #2f6b3a;
  --verde-claro: #e7f2e4;
  --azul: #1f6fb2;
  --crema: #fbf8f1;
  --blanco: #ffffff;
  --texto: #2b2b2b;
  --gris: #6e6a60;
  --borde: #e3dccb;
  --oro: #e0a526;
  --morado: #6b3fa0;
  --rojo: #b33a3a;
  --radio: 16px;
  --sombra: 0 4px 16px rgba(40, 60, 40, .10);
  --letra-titulos: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Los cambia cielo.js según la hora y el clima */
  --ceo-1: #4fa6dd; --ceo-2: #b9e3f8;
  --fondo-1: #e1f1fb; --fondo-2: #edf6e6;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--texto);
  line-height: 1.4;
  background: linear-gradient(180deg, var(--fondo-1) 0, var(--fondo-2) 100%) fixed;
  transition: background 2s;
  min-height: 100vh;
}
/* Colinas suaves al fondo de la página */
body::before {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 200px; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0 70 Q150 25 300 62 T600 52 T900 66 T1200 45 V120 H0Z' fill='%2394c27f'/><path d='M0 95 Q200 55 400 88 T800 82 T1200 78 V120H0Z' fill='%235a9a4c'/></svg>") bottom/100% 100% no-repeat;
  opacity: .35;
}
body[data-periodo="noite"]::before { opacity: .15; }
body[data-periodo="noite"] .pie { color: #c9d3e6; }

button { font: inherit; cursor: pointer; touch-action: manipulation; color: inherit; }
h2, h3, .cartos, .item-cantidad, .herdanza-datos span { font-family: var(--letra-titulos); }
h3 { margin: 18px 0 6px; font-size: 1.05rem; color: var(--verde); }
input, select { font: inherit; }

/* ---------- 2. Cabecera y cielo ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  height: 132px; padding: 10px 16px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  overflow: hidden; transition: height .35s;
}
.cabecera.compacta { height: 78px; }
@media (max-width: 520px) { .cabecera { height: 118px; padding: 8px 10px; } .cabecera.compacta { height: 72px; } }
.cabecera > *:not(.cielo) { position: relative; z-index: 5; }

.cielo { position: absolute; inset: 0; z-index: 0; overflow: hidden; --monte-1: #94c27f; --monte-2: #5a9a4c; --monte-3: #3f7a37; }
.cielo .ceo { position: absolute; inset: 0; background: linear-gradient(180deg, var(--ceo-1), var(--ceo-2)); transition: background 2s; }
.cielo.periodo-noite { --monte-1: #2c4636; --monte-2: #22392b; --monte-3: #182c20; }
.cielo.periodo-solpor { --monte-1: #9aa86a; --monte-2: #6a8a45; --monte-3: #4b6c33; }
.cielo.periodo-amencer { --monte-1: #a3bb7c; --monte-2: #6f9a52; --monte-3: #4f7a3c; }
.cielo.clima-choiva, .cielo.treboada { --monte-1: #7d9474; --monte-2: #4f7246; --monte-3: #3a5a33; }
.cielo.clima-neboa { --monte-1: #a9b8a6; --monte-2: #7f9a7a; --monte-3: #5f7c5a; }
.cielo.periodo-noite.clima-choiva { --monte-1: #1f3026; --monte-2: #18281e; --monte-3: #111e16; }

/* Sol y luna */
.astro { position: absolute; width: 34px; height: 34px; border-radius: 50%; transform: translate(-50%, -50%); transition: left 60s linear, top 60s linear; }
.astro.sol { background: radial-gradient(circle, #fff7c9 40%, #ffd76a 70%); box-shadow: 0 0 30px 10px rgba(255, 220, 120, .55); }
.astro.sol.baixo { background: radial-gradient(circle, #ffe9b0 40%, #ff9e5a 75%); box-shadow: 0 0 30px 12px rgba(255, 150, 80, .5); }
.astro.lua { width: 26px; height: 26px; background: #fdf6d8; box-shadow: 0 0 20px 6px rgba(253, 246, 216, .35), inset -7px -3px 0 rgba(200, 190, 150, .45); }
.clima-choiva .astro, .clima-neboa .astro, .treboada .astro { opacity: .15; }

/* Estrellas (solo de noche y con cielo despejado) */
.estrelas { position: absolute; inset: 0; opacity: 0; transition: opacity 2s;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 18%, #fff, transparent), radial-gradient(1.2px 1.2px at 17% 46%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 27% 12%, #fff, transparent), radial-gradient(1.2px 1.2px at 39% 38%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 52% 15%, #fff, transparent), radial-gradient(1.2px 1.2px at 61% 44%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 70% 20%, #fff, transparent), radial-gradient(1.2px 1.2px at 83% 40%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 92% 14%, #fff, transparent), radial-gradient(1.2px 1.2px at 46% 28%, #fff, transparent);
  animation: titilar 4s ease-in-out infinite alternate; }
.periodo-noite:not(.clima-choiva):not(.clima-neboa):not(.treboada) .estrelas { opacity: 1; }

/* Nubes */
.nubes { position: absolute; inset: 0; }
.nube {
  position: absolute; left: 0; width: var(--w); height: calc(var(--w) * .32); border-radius: 100px;
  background: rgba(255, 255, 255, .92); animation: nube linear infinite;
}
.nube::before, .nube::after { content: ''; position: absolute; background: inherit; border-radius: 50%; }
.nube::before { width: 50%; height: 140%; left: 14%; top: -60%; }
.nube::after { width: 36%; height: 110%; left: 50%; top: -38%; }
.periodo-noite .nube { background: rgba(170, 182, 210, .35); }
.periodo-solpor .nube, .periodo-amencer .nube { background: rgba(255, 228, 210, .85); }
.clima-choiva .nube, .treboada .nube { background: rgba(120, 130, 145, .9); }

/* Lluvia, niebla y rayo */
.chuvia { position: absolute; inset: -20px 0 0; opacity: 0; transition: opacity 1.5s;
  background: repeating-linear-gradient(103deg, transparent 0 9px, rgba(220, 232, 255, .55) 9px 10px, transparent 10px 22px);
  background-size: 200px 200px; animation: chuvia .5s linear infinite; }
.clima-choiva .chuvia, .treboada .chuvia { opacity: 1; }
.neboa { position: absolute; inset: 0; opacity: 0; transition: opacity 2s;
  background: linear-gradient(0deg, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .25) 70%, transparent),
              radial-gradient(60% 40% at 30% 70%, rgba(255, 255, 255, .6), transparent);
  animation: neboa 14s ease-in-out infinite alternate; }
.clima-neboa .neboa { opacity: 1; }
.periodo-noite.clima-neboa .neboa { filter: brightness(.45); }
.raio { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.treboada .raio { animation: raio 3.3s infinite; }

/* Partículas de eventos de temporada */
.particulas-evento { position: absolute; inset: 0; pointer-events: none; }
.cae { position: absolute; top: -20px; font-size: 16px; animation: caer linear infinite; }
.neve { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .9; }
.confeti { width: 6px; height: 10px; border-radius: 2px; }
.luz { position: absolute; top: 4px; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px 2px currentColor; animation: luz 1.6s ease-in-out infinite alternate; }
.chispa { position: absolute; bottom: 30px; width: 3px; height: 3px; border-radius: 50%; background: #ffcf5a; box-shadow: 0 0 6px 2px #ff9a3c; animation: chispa linear infinite; }

/* Paisaje */
.paisaxe { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
.paisaxe text { font-family: system-ui, sans-serif; }
.periodo-noite .ventana, .periodo-solpor .ventana { fill: #ffd76a; }
.aspas { transform-origin: 0px -44px; animation: girar 4s linear infinite; }
.clima-vento .aspas { animation-duration: 1.2s; }
.peregrino { animation: caminar 14s linear infinite; }
.vapor { animation: vapor 3s ease-in-out infinite; }
.fume { animation: vapor 4s ease-in-out infinite; }
.fogueira { animation: luz .6s ease-in-out infinite alternate; }

/* Contenido de la cabecera */
.marca {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 0; border-radius: 40px;
  background: rgba(255, 255, 255, .88); box-shadow: 0 2px 10px rgba(0, 0, 0, .15); max-width: 34%;
}
.avatar-mini { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: block; }
.avatar-mini svg { width: 100%; height: 100%; display: block; }
.nombre-granxa { font-family: var(--letra-titulos); font-weight: 600; color: var(--verde); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contador {
  text-align: center; background: rgba(255, 255, 255, .94); border-radius: 18px; padding: 6px 22px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18); min-width: 180px;
}
.cartos { font-size: 1.7rem; font-weight: 700; color: var(--verde); font-variant-numeric: tabular-nums; line-height: 1.15; }
.cartos small { font-size: .9rem; font-weight: 500; color: var(--gris); }
.por-segundo { font-size: .85rem; color: var(--gris); }
.acciones { display: flex; gap: 6px; }
.btn-icono {
  background: rgba(255, 255, 255, .88); border: 0; border-radius: 50%;
  width: 40px; height: 40px; font-size: 1.15rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
@media (max-width: 640px) {
  .nombre-granxa { display: none; }
  .marca { padding: 3px; max-width: none; }
  .contador { min-width: 0; padding: 4px 14px; }
  .cartos { font-size: 1.3rem; }
  .btn-icono { width: 36px; height: 36px; font-size: 1rem; }
  .acciones { gap: 4px; }
}

/* ---------- 3. Zona de clic ---------- */
.juego { max-width: 1120px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }
@media (min-width: 820px) {
  .juego { grid-template-columns: 350px 1fr; align-items: start; }
  .zona-clic { position: sticky; top: 94px; max-height: calc(100vh - 110px); overflow-y: auto; }
}
@media (max-width: 520px) { .juego { padding: 10px; } }

.zona-clic {
  background: var(--blanco); border-radius: var(--radio); padding: 16px; text-align: center; box-shadow: var(--sombra);
  background-image: linear-gradient(180deg, transparent 55%, rgba(156, 205, 140, .18) 100%);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; }
.chip { padding: 4px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600; background: var(--verde-claro); color: var(--verde); }
.chip-evento { background: #fff1d6; color: #8a5a00; }
.chip-feira { background: #e5f1fb; color: var(--azul); }
.chip-reto { background: #f3e6ff; color: var(--morado); }

.vaca-zona { position: relative; display: inline-block; }
.btn-vaca {
  width: 180px; height: 180px; border-radius: 50%; padding: 18px;
  border: 6px solid var(--verde-claro);
  background: radial-gradient(circle at 35% 30%, #ffffff, #dcefd8);
  box-shadow: 0 6px 0 #c4dcbf, var(--sombra);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn-vaca svg, .vaca-flotante svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.btn-vaca:hover { filter: brightness(1.03); }
.golpe { animation: golpe .14s ease-out; }
.can { position: absolute; right: -14px; bottom: 6px; font-size: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }
.can.salta { animation: salta .4s ease-out; }
.combo { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  background: #fff; padding: 2px 8px; border-radius: 12px; box-shadow: var(--sombra); opacity: 0; transition: opacity .3s; }
.combo.visible { opacity: 1; }
.combo-barra { width: 70px; height: 6px; background: #fde2c4; border-radius: 3px; overflow: hidden; }
#combo-relleno { height: 100%; background: linear-gradient(90deg, #ffb13b, #e0452b); width: 0; }
#combo-texto { font-size: .8rem; font-weight: 700; color: #c0392b; }
.ayuda { margin: 20px 0 2px; color: var(--gris); }
.valor-clic { margin: 0; font-weight: 700; color: var(--verde); font-family: var(--letra-titulos); }

.efecto { margin-bottom: 12px; padding: 8px 12px; border-radius: 10px; background: var(--morado); color: var(--blanco); font-weight: 700; animation: latido 1s infinite; }
.btn-regalo { width: 100%; margin-bottom: 12px; padding: 10px; border: 0; border-radius: 10px; background: var(--rojo); color: #fff; font-weight: 700; animation: latido 1.2s infinite; }

.siguiente { margin-top: 14px; text-align: left; font-size: .85rem; color: var(--gris); }
.barra { height: 8px; border-radius: 4px; background: var(--verde-claro); overflow: hidden; margin-top: 4px; }
.barra-relleno { height: 100%; width: 0; background: var(--verde); border-radius: 4px; transition: width .3s; }

.titulo-escena { text-align: left; }
.escena { border-radius: 12px; padding: 10px; text-align: left; min-height: 70px;
  background: linear-gradient(var(--ceo-1) 0, var(--ceo-2) 30%, #cfe5ca 30%, #b8d9b1 100%); }
.fila-escena { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.fila-escena .iconos { font-size: 1.1rem; letter-spacing: -2px; overflow: hidden; white-space: nowrap; }
.fila-escena .num { font-size: .75rem; font-weight: 700; color: var(--verde); background: rgba(255, 255, 255, .75); padding: 0 6px; border-radius: 8px; }
.fila-escena.nueva { animation: entrar .4s ease-out; }
.escena-vacia { margin: 18px 0; text-align: center; color: #fff; font-size: .85rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
@media (max-width: 819px) {
  .escena { max-height: 150px; overflow-y: auto; }
  .btn-vaca { width: 150px; height: 150px; padding: 14px; }
}

.vaca-flotante {
  display: none; position: fixed; right: 16px; bottom: 16px; z-index: 40;
  width: 78px; height: 78px; border-radius: 50%; border: 4px solid #fff; padding: 8px;
  background: radial-gradient(circle at 35% 30%, #ffffff, #dcefd8); box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
@media (max-width: 819px) {
  .vaca-flotante.visible { display: block; }
  .toasts { top: 84px; bottom: auto !important; left: 10px; right: 10px !important; max-width: none !important; }
  .toast { padding: 7px 12px; font-size: .85rem; }
}

/* ---------- 4. Paneles y listas ---------- */
.paneles { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.pestanas { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px; background: var(--verde-claro); }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { flex: 1 0 auto; padding: 8px 9px; border: 0; border-radius: 10px; background: transparent; font-weight: 600; font-size: .88rem; white-space: nowrap; }
.pestana.activa { background: var(--blanco); color: var(--verde); box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--oro); color: #fff; font-size: .75rem; }
.mini { font-size: .75rem; color: var(--gris); }
.panel { display: none; padding: 14px; }
.panel.activo { display: block; }
.nota { color: var(--gris); font-size: .9rem; }

.modos { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; color: var(--gris); font-size: .9rem; }
.modo { padding: 4px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--blanco); font-weight: 600; }
.modo.activo { background: var(--verde); border-color: var(--verde); color: #fff; }

.lista { display: grid; gap: 8px; }
.item {
  --progreso: 0%;
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left;
  background: linear-gradient(90deg, var(--verde-claro) var(--progreso), var(--blanco) var(--progreso));
  border: 1px solid var(--borde); border-radius: 14px; transition: transform .1s, box-shadow .1s, opacity .2s;
}
.item:not(:disabled):not(div):hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); border-color: var(--verde); }
.item:disabled { opacity: .62; cursor: not-allowed; }
.item.comprado { background: #fff8e6; border-color: var(--oro); opacity: 1; cursor: default; }
.item.bloqueado { background: #f4f1ea; opacity: .75; cursor: default; }
.item.activo { border-color: var(--morado); background: #f8f1ff; }
.item-emoji {
  --tono: #eef3ea;
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.7rem; background: var(--tono); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .06);
}
.item.bloqueado .item-emoji { filter: grayscale(1); }
.item-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.item-info small { color: var(--gris); font-size: .8rem; }
.item-info .item-prod { color: var(--verde); }
.item-lado { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.item-coste { font-weight: 700; color: var(--azul); white-space: nowrap; }
.item-cantidad { font-size: 1.5rem; font-weight: 700; color: var(--verde); }
.vacio { text-align: center; color: var(--gris); padding: 24px 8px; }

.mision { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 14px; }
.mision.hecha { background: #fff8e6; border-color: var(--oro); }
.mision .item-info { gap: 4px; }

.rejilla-logros { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.logro { padding: 10px; border: 1px solid var(--borde); border-radius: 12px; text-align: center; background: #f4f1ea; opacity: .55; }
.logro.conseguido { background: #fff8e6; border-color: var(--oro); opacity: 1; }
.logro-emoji { font-size: 1.8rem; display: block; }
.logro strong { display: block; font-size: .85rem; }
.logro small { color: var(--gris); font-size: .75rem; }

.herdanza-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; }
@media (max-width: 520px) { .herdanza-datos { grid-template-columns: repeat(2, 1fr); } }
.herdanza-datos div { background: var(--verde-claro); border-radius: 12px; padding: 12px 6px; text-align: center; }
.herdanza-datos span { display: block; font-size: 1.4rem; font-weight: 700; color: var(--verde); }
.herdanza-datos small { color: var(--gris); font-size: .75rem; }

.btn-principal { width: 100%; padding: 12px; border: 0; border-radius: 12px; background: var(--verde); color: #fff; font-weight: 700; font-size: 1rem; box-shadow: 0 3px 0 #1f4a27; }
.btn-principal:active { transform: translateY(2px); box-shadow: 0 1px 0 #1f4a27; }
.btn-principal:disabled { opacity: .45; cursor: not-allowed; }
.btn-auto { width: auto; padding: 10px 16px; }
.btn-secundario { padding: 10px 16px; border: 1px solid var(--borde); border-radius: 10px; background: var(--blanco); font-weight: 600; }
.btn-peligro { margin-top: 8px; padding: 8px 14px; border: 1px solid var(--rojo); border-radius: 10px; background: var(--blanco); color: var(--rojo); font-weight: 600; }
.enlace { border: 0; background: none; color: var(--gris); text-decoration: underline; padding: 4px; }

.stats { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; }
.stats dt { color: var(--gris); }
.stats dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.botones-datos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ---------- 5. Personaje, razas y establo ---------- */
.tarxeta-ti { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 14px; background: var(--verde-claro); }
.tarxeta-ti h3 { margin: 0; }
.tarxeta-ti .nota { margin: 2px 0 8px; }
.avatar-grande { width: 110px; height: 110px; flex-shrink: 0; border-radius: 50%; overflow: hidden; box-shadow: var(--sombra); }
.avatar-grande svg, .editor-vista svg { width: 100%; height: 100%; display: block; }
.rejilla-razas { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.raza { border: 2px solid var(--borde); border-radius: 14px; background: #fff; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.raza svg { width: 70px; height: 76px; }
.raza strong { font-size: .85rem; }
.raza small { font-size: .72rem; color: var(--gris); text-align: center; }
.raza.activa { border-color: var(--verde); background: var(--verde-claro); }
.raza.bloqueada { cursor: not-allowed; }
.raza.bloqueada svg { filter: grayscale(1) brightness(.4); opacity: .5; }

.editor-avatar { display: grid; grid-template-columns: 180px 1fr; gap: 16px; text-align: left; }
.editor-vista { width: 180px; height: 180px; border-radius: 50%; overflow: hidden; box-shadow: var(--sombra); position: sticky; top: 0; }
@media (max-width: 560px) { .editor-avatar { grid-template-columns: 1fr; } .editor-vista { width: 130px; height: 130px; margin: 0 auto; position: static; } }
.editor-campos { display: grid; gap: 8px; }
.editor-campos label { display: grid; gap: 2px; font-size: .85rem; color: var(--gris); }
.editor-campos input { padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; color: var(--texto); }
.fila-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.fila-opciones > span { width: 100%; font-size: .85rem; color: var(--gris); }
.fila-opciones > span:empty { display: none; }
.opcion { padding: 5px 10px; border: 1px solid var(--borde); border-radius: 20px; background: #fff; font-size: .8rem; }
.opcion.activa { background: var(--verde); color: #fff; border-color: var(--verde); }
.muestra { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--borde); }
.muestra.activa { box-shadow: 0 0 0 3px var(--verde); }

.establo-escena { border-radius: 14px; overflow: hidden; box-shadow: var(--sombra); }
.establo-svg { width: 100%; display: block; }
.aspas-ventilador { animation: girar 1s linear infinite; }
.robot-establo { animation: robot 8s ease-in-out infinite; }
.nota-musical { animation: vapor 2s ease-in-out infinite; }
.vaca-establo { animation: respirar 3s ease-in-out infinite; }

/* ---------- 6. Minijuegos ---------- */
.mj { text-align: left; }
.mj-instr { margin-top: 0; }
.mj-cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mj-tiempo { flex: 1; height: 10px; border-radius: 5px; background: var(--verde-claro); overflow: hidden; }
#mj-barra { height: 100%; width: 100%; background: var(--verde); transition: width .1s linear; }
#mj-barra.poco { background: var(--rojo); }
#mj-puntos { font-weight: 700; font-family: var(--letra-titulos); min-width: 60px; text-align: right; }
.mj-area {
  position: relative; height: 320px; border-radius: 14px; overflow: hidden; background: #f4f1ea;
  display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none;
}
.mj-empezar { width: auto; padding: 14px 30px; font-size: 1.2rem; }
.mj-prado { background: linear-gradient(#bfe4f7 0, #dff2fb 22%, #9ccd8c 22%, #78b46a 100%); display: block; }
.mj-ceo { background: linear-gradient(#f6c88f, #fbe6c4 70%, #a8c97f 70%); display: block; }
.mj-tormenta { background: linear-gradient(#59636f 0, #8a949f 22%, #6f9a63 22%, #4f7a46 100%); }
.mj-area.flash { filter: brightness(2.2); }
.objetivo, .bicho, .uva, .ovo, .castana { border: 0; background: none; padding: 0; line-height: 1; }
.deco { position: absolute; font-size: 28px; opacity: .85; }
.objetivo { position: absolute; font-size: 46px; transition: left .18s, top .18s; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); }
.vaca-mj { font-size: 42px; transition: left .5s ease-in, top .5s ease-in, transform .5s; }
.vaca-mj.a-casa { transform: scale(.4); opacity: .6; }
.establo-meta { position: absolute; right: 4%; bottom: 6%; font-size: 64px; }
.mj-resultado { text-align: center; padding: 10px; }
.mj-emoji { font-size: 56px; }
.mj-premio { font-family: var(--letra-titulos); font-size: 1.4rem; color: var(--verde); font-weight: 700; }
.mj-resultado .btn-principal { width: auto; padding: 10px 28px; }
.mj-estado { position: absolute; top: 6px; left: 0; right: 0; text-align: center; margin: 0; font-weight: 700; }

/* Veterinario */
.mj-vete { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; width: 100%; }
@media (max-width: 520px) { .mj-area { height: 360px; } .posit { padding: 8px 10px; } .movil { width: 150px; } .teclado button { height: 34px; } }
.posit { background: #fff27a; padding: 12px 14px; transform: rotate(-4deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .15); font-size: .85rem; line-height: 1.5; }
.posit span { white-space: nowrap; font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; font-weight: 700; letter-spacing: 1px; }
.movil { width: 170px; background: #1f1f2a; border-radius: 26px; padding: 14px 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.movil-pantalla { background: #dff3e4; color: #1f1f2a; border-radius: 10px; padding: 8px; height: 40px; text-align: center; font-family: ui-monospace, Consolas, monospace; font-size: 1rem; font-weight: 700; margin-bottom: 8px; overflow: hidden; white-space: nowrap; }
.movil-pantalla.error { background: #f8c9c9; animation: temblar .3s; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.teclado button { height: 40px; border: 0; border-radius: 50%; background: #3a3a4a; color: #fff; font-size: 1.05rem; font-weight: 600; }
.teclado button:active { background: #5a5a6e; }
.teclado .llamar { background: #2fa84f; }

/* Huevos */
.mj-nidos { position: absolute; top: 10px; left: 10px; right: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.nido { position: relative; height: 58px; display: grid; place-items: end center; font-size: 34px; background: #e8dcc0; border-radius: 12px; }
.ovo { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-size: 34px; animation: aparecer .2s ease-out; }
.ovo.dorado { filter: sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.1) drop-shadow(0 0 6px #ffd34d); }
.caja { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #c99a5e; border-radius: 10px; color: #fff; }
.caja.llena { animation: pop .4s; }
.huecos { display: grid; grid-template-columns: repeat(6, 34px); gap: 4px; }
.huecos span { height: 34px; border-radius: 50%; background: #a87a44; display: grid; place-items: center; font-size: 22px; }

/* Rejillas (vendimia, ratones, peregrino) */
.mj-rejilla { display: grid; gap: 8px; width: 100%; max-width: 360px; padding: 10px; }
.mj-rejilla.r4 { grid-template-columns: repeat(4, 1fr); }
.mj-rejilla.r3 { grid-template-columns: repeat(3, 1fr); }
.celda { height: 64px; border-radius: 12px; display: grid; place-items: center; position: relative; border: 0; }
.cepa { background: #a8c97f; height: 62px; }
.burato { background: radial-gradient(ellipse at 50% 70%, #3a2a1a 40%, #6b4a2a 42%); height: 80px; }
.vieira { background: #e5f1fb; font-size: 32px; filter: grayscale(.6); }
.vieira.brilla { background: #ffd34d; filter: none; transform: scale(1.08); }
.uva, .bicho { font-size: 40px; animation: aparecer .15s ease-out; position: relative; }
.uva.podre { filter: sepia(1) brightness(.55); }
.uva i { position: absolute; top: -6px; right: -8px; font-size: 18px; font-style: normal; filter: none; }
.mj-area:has(.burato) { background: #8a5a36; }
.mj-area:has(.vieira) { background: #d7ecf7; }
.mj-area:has(.cepa) { background: #dff0cc; }

/* Pulpo */
.mj-polbo { width: 100%; padding: 16px; text-align: center; }
.polbo-grande { font-size: 64px; }
.medidor { position: relative; height: 28px; border-radius: 14px; background: #f0d9c4; margin: 12px 0; overflow: hidden; }
.zona { position: absolute; top: 0; bottom: 0; background: #7cc46a; }
.aguja { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; background: #1f1f2a; border-radius: 2px; }
.platos { min-height: 34px; font-size: 26px; }
.cortar { width: auto; padding: 12px 34px; font-size: 1.15rem; margin-top: 6px; }

/* Castañas */
.castana { position: absolute; top: -40px; font-size: 38px; animation: caerJuego linear forwards; }

/* ---------- 7. Ventanas, avisos y tutorial ---------- */
.avisos { display: grid; gap: 6px; margin-bottom: 8px; }
.aviso { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; text-align: left; border: 0; font-size: .85rem; }
.aviso > span:first-child { font-size: 1.6rem; }
.aviso > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.aviso small { opacity: .8; }
.aviso b { background: rgba(255, 255, 255, .85); padding: 4px 10px; border-radius: 10px; color: var(--texto); }
.aviso-evento { background: #ffcf5a; color: #4a3300; animation: latido 1s infinite; }
.aviso-castigo { background: #f8d4cf; color: #6a1f18; }

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px); }
.toast { background: rgba(43, 43, 43, .95); color: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: var(--sombra); animation: entrar .3s ease-out; }
.toast strong { color: var(--oro); }

.modal { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); padding: 16px; }
.modal-caja { position: relative; background: #fff; border-radius: var(--radio); padding: 20px; max-width: 460px; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; text-align: center; animation: entrar .25s ease-out; }
.modal.ancho .modal-caja { max-width: 640px; }
.modal-caja h2 { margin: 0 30px 12px; color: var(--verde); font-size: 1.35rem; }
.modal-cerrar { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f0ece2; font-size: 1rem; }
.modal-caja textarea { width: 100%; height: 120px; padding: 8px; border: 1px solid var(--borde); border-radius: 8px; font: .75rem/1.3 ui-monospace, Consolas, monospace; resize: vertical; }
.modal-botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.modal-botones:empty { display: none; }
.modal-botones .btn-principal { width: auto; padding: 10px 18px; }
.ajustes { display: grid; gap: 12px; text-align: left; }
.ajustes label { display: grid; gap: 4px; font-size: .9rem; color: var(--gris); }
.ajustes label.check { display: flex; align-items: center; gap: 8px; color: var(--texto); }
.ajustes select { padding: 8px; border-radius: 8px; border: 1px solid var(--borde); }
.retos-eleccion { text-align: left; background: #f8f1ff; border-radius: 12px; padding: 10px 12px; }
.retos-eleccion p { margin: 0 0 6px; }
.opcion-reto { display: block; padding: 4px 0; font-size: .9rem; }
.tarjeta-vista { width: 100%; max-width: 420px; border-radius: 14px; box-shadow: var(--sombra); }

.tutorial { position: fixed; z-index: 85; max-width: 290px; background: var(--verde); color: #fff; padding: 12px 14px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); animation: entrar .3s ease-out; }
.tutorial p { margin: 0 0 8px; }
.tutorial > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tutorial .enlace { color: #d7ecd2; }
.tutorial .mini { color: #d7ecd2; }
.tutorial .btn-principal { width: auto; padding: 6px 14px; background: #fff; color: var(--verde); box-shadow: none; }
.tuto-foco { animation: foco 1.4s ease-in-out infinite !important; position: relative; z-index: 2; }

.meiga { position: fixed; z-index: 50; font-size: 58px; line-height: 1; padding: 0; background: none; border: 0; filter: drop-shadow(0 0 12px rgba(107, 63, 160, .8)); animation: flotar 1.6s ease-in-out infinite; }
.flotante { position: fixed; z-index: 60; pointer-events: none; font-weight: 800; color: var(--verde); font-size: 1.2rem; font-family: var(--letra-titulos); text-shadow: 0 1px 0 #fff, 0 0 4px #fff; animation: subir .9s ease-out forwards; }
.flotante.fuego { color: #d2401f; font-size: 1.35rem; }
.particula { position: fixed; z-index: 59; pointer-events: none; font-size: 1.1rem; animation: estallar .7s ease-out forwards; }
.contador.pop { animation: pop .6s ease-out; }
.pie { text-align: center; color: var(--gris); font-size: .8rem; padding: 8px 16px 28px; }

/* ---------- 8. Animaciones ---------- */
@keyframes golpe { 50% { transform: scale(.9) rotate(-5deg); } }
@keyframes subir { to { transform: translateY(-70px); opacity: 0; } }
@keyframes estallar { to { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }
@keyframes flotar { 50% { transform: translateY(-10px) rotate(-6deg); } }
@keyframes latido { 50% { opacity: .82; } }
@keyframes entrar { from { transform: translateY(10px); opacity: 0; } }
@keyframes pop { 30% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(224, 165, 38, .45), 0 4px 14px rgba(0, 0, 0, .18); } }
@keyframes salta { 40% { transform: translateY(-12px) rotate(-8deg); } }
@keyframes foco { 50% { box-shadow: 0 0 0 5px rgba(224, 165, 38, .8); } }
@keyframes titilar { to { filter: brightness(.45); } }
@keyframes nube { from { transform: translateX(-200px); } to { transform: translateX(calc(100vw + 50px)); } }
@keyframes chuvia { to { background-position: -40px 200px; } }
@keyframes neboa { to { transform: translateX(-40px); } }
@keyframes raio { 0%, 90%, 94%, 100% { opacity: 0; } 92%, 96% { opacity: .55; } }
@keyframes caer { from { transform: translateY(-20px) rotate(0); } to { transform: translateY(170px) rotate(360deg); } }
@keyframes caerJuego { to { transform: translateY(380px) rotate(200deg); } }
@keyframes luz { to { opacity: .35; } }
@keyframes chispa { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-80px); opacity: 0; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes caminar { from { transform: translateX(-20px); } to { transform: translateX(30px); } }
@keyframes vapor { 50% { transform: translateY(-4px); opacity: .4; } }
@keyframes robot { 50% { transform: translateX(-150px); } }
@keyframes respirar { 50% { transform: translateY(-1px); } }
@keyframes aparecer { from { transform: scale(.3); } }
@keyframes temblar { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* Ajuste "sin animaciones" y preferencia del sistema */
body.sin-animaciones *, body.sin-animaciones *::before, body.sin-animaciones *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
body.sin-animaciones .castana { animation-duration: 2.5s !important; } /* el minijuego necesita su animación */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .castana { animation-duration: 2.5s !important; }
}