/* ============================================================
   EL HATO DE JUEGOS — tema compartido
   Misma paleta "noche de hato" que Ánimas del Llano (índigo
   profundo + fogón + cuero + lienzo crudo) para que el hub y
   todos los juegos se sientan como un solo lugar. Cada juego
   puede seguir trayendo su propio style.css encima de este.
   ============================================================ */

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

:root {
  --night-950: #070b12;
  --night-900: #0c1220;
  --night-800: #141c2e;
  --night-700: #1e2a40;
  --fire-400: #ffb15c;
  --fire-500: #ff8a3d;
  --fire-700: #c9541a;
  --leather-500: #7a5230;
  --canvas: #e9dcc3;
  --canvas-dim: #c9bb9e;
  --danger-500: #a33b2b;
  --danger-glow: #d9633f;
  --hato-500: #4c7a52;
  --shadow-deep: 0 20px 60px rgba(0,0,0,0.6);

  --font-display: 'Rye', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; min-height: 100vh;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,138,61,0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 50% -10%, #16233a 0%, var(--night-950) 55%, #04070c 100%);
  color: var(--canvas);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; }

.btn {
  font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  padding: 12px 20px; border-radius: 12px; border: 1px solid rgba(255,177,92,0.3);
  background: linear-gradient(180deg, var(--fire-500), var(--fire-700));
  color: #1a0f06; cursor: pointer; box-shadow: 0 8px 20px rgba(255,138,61,0.25);
}
.btn.secondary {
  background: rgba(255,255,255,0.05); color: var(--canvas);
  border-color: rgba(233,220,195,0.2); box-shadow: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.card {
  background: linear-gradient(180deg, var(--night-800), var(--night-900));
  border: 1px solid rgba(255,177,92,0.14); border-radius: 18px;
  box-shadow: var(--shadow-deep);
}

.profile-bar {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,177,92,0.16);
  border-radius: 16px; padding: 10px 14px;
}
.profile-bar img, .profile-bar .avatar-fallback {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
  background: var(--night-700); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); color: var(--fire-400); flex: none;
}
.profile-bar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.profile-bar-points { font-family: var(--font-display); color: var(--fire-400); }

.hato-lang-switch { display: flex; gap: 4px; }
.hato-lang-btn {
  border: 1px solid rgba(255,177,92,0.2); background: rgba(255,255,255,0.04);
  border-radius: 8px; padding: 3px 6px; font-size: 0.9rem; line-height: 1; cursor: pointer; opacity: 0.55;
}
.hato-lang-btn.active { opacity: 1; border-color: var(--fire-400); background: rgba(255,177,92,0.16); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 999px; background: rgba(255,177,92,0.12); border: 1px solid rgba(255,177,92,0.25);
  font-size: 0.78rem; color: var(--fire-400);
}