/* Layout del landing del hato — usa las variables/clases de shared/theme.css */
body { padding: 24px 16px 60px; }
#app { max-width: 880px; margin: 0 auto; }

.hub-register { max-width: 420px; margin: 60px auto 0; padding: 28px 26px; text-align: center; }
.hub-register h1 { font-size: 1.7rem; margin: 0 0 8px; }
.hub-sub { color: var(--canvas-dim); font-size: 0.9rem; margin: 0 0 20px; }
.hub-register form { display: flex; flex-direction: column; gap: 10px; }
.hub-register input {
  font-family: var(--font-body); font-size: 0.95rem; padding: 11px 13px;
  border-radius: 10px; border: 1px solid rgba(233,220,195,0.2);
  background: rgba(255,255,255,0.04); color: var(--canvas);
}
.hub-error { color: var(--danger-glow); font-size: 0.85rem; }

.hub-title { font-size: 1.4rem; margin: 28px 0 14px; }
.hub-link { background: none; border: none; color: var(--fire-400); font-size: 0.8rem; cursor: pointer; padding: 0; }

.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.game-card { padding: 18px 16px; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; }
.game-card:hover { transform: translateY(-2px); border-color: rgba(255,177,92,0.4); }
.game-card.disabled { opacity: 0.5; cursor: default; }
.game-card.disabled:hover { transform: none; border-color: rgba(255,177,92,0.14); }
.game-card-emoji { font-size: 1.8rem; }
.game-card-name { font-size: 1.05rem; margin: 6px 0 4px; }
.game-card-desc { font-size: 0.8rem; color: var(--canvas-dim); line-height: 1.4; margin-bottom: 10px; min-height: 34px; }

.recent-rooms { display: flex; flex-direction: column; gap: 8px; color: var(--canvas-dim); font-size: 0.85rem; }
.recent-room-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; text-decoration: none; color: var(--canvas);
}

/* ---- Tabla de posiciones (GET /api/leaderboard) ---- */
.leaderboard-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.leaderboard-rank { width: 24px; text-align: center; font-weight: 700; color: var(--canvas-dim); flex: none; }
.leaderboard-name { flex: 1; font-weight: 600; }