/* Animal Habitat home screen (js/home.js) and the sign-in gate's wordmark.
 * game.css and auth.css (copied from Animal Army) style everything else. */

/* One column, no nested card chrome. */
#card{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }

.home-play{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
.home-play-btn{
  width:min(100%, 420px); padding:18px 24px; border-radius:16px; border:2px solid var(--parchment, #f6ead0);
  background:var(--blaze, #ff7a1a); color:#1a1a1a; font-family:var(--font-display); font-size:clamp(22px, 6vw, 30px);
  letter-spacing:0.04em; text-transform:uppercase; cursor:pointer; box-shadow:0 6px 0 rgba(0,0,0,0.35);
}
.home-play-btn:hover{ translate:0 -1px; }
.home-play-btn:active{ translate:0 3px; box-shadow:0 3px 0 rgba(0,0,0,0.35); }
.home-play-btn:focus-visible{ outline:2px solid var(--parchment, #f6ead0); outline-offset:3px; }
.home-play-sub{ margin:0; font-family:var(--font-body); font-size:14px; color:var(--parchment-dim, #c9bfa6); }

.home-stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; font-family:var(--font-body); font-size:13px; color:var(--parchment-dim, #c9bfa6); }
.home-stat b{ color:var(--parchment, #f6ead0); }

.home-free-btn{
  padding:10px 18px; border-radius:999px; border:1px solid rgba(246,234,208,0.35); background:rgba(9,21,16,0.62);
  color:var(--parchment, #f6ead0); font-family:var(--font-body); font-size:14px; cursor:pointer;
}
.home-free-btn:hover{ border-color:var(--parchment, #f6ead0); }

/* A decorative empty globe: a lit sphere with a slowly drifting graticule. */
.home-globe{
  --globe: 240px;
  width:var(--globe); height:var(--globe); border-radius:50%; margin:10px auto 0; position:relative; overflow:hidden;
  background:radial-gradient(circle at 35% 30%, #2f6a9c 0%, #1b4a72 45%, #0d2a44 80%, #071a2c 100%);
  box-shadow:inset -18px -14px 40px rgba(0,0,0,0.55), 0 0 0 6px rgba(246,234,208,0.08), 0 18px 40px rgba(0,0,0,0.45);
}
.home-globe::before{ /* latitude lines */
  content:""; position:absolute; inset:0; border-radius:50%;
  background:repeating-linear-gradient(to bottom, transparent 0 26px, rgba(246,234,208,0.14) 26px 27px);
}
.home-globe::after{ /* longitude lines, drifting */
  content:""; position:absolute; inset:0; border-radius:50%;
  background:repeating-linear-gradient(to right, transparent 0 30px, rgba(246,234,208,0.14) 30px 31px);
  animation:home-globe-spin 14s linear infinite;
}
.home-globe.home-globe-small{ --globe: 72px; display:block; margin:0 auto 8px; }
@keyframes home-globe-spin{ from{ background-position:0 0; } to{ background-position:31px 0; } }
@media (prefers-reduced-motion: reduce){ .home-globe::after{ animation:none; } }
@media (max-width:420px){ .home-globe{ --globe: 200px; } .home-globe.home-globe-small{ --globe: 72px; } }

.home-footer-links{ margin:6px 0 2px; font-family:var(--font-body); font-size:12px; color:var(--parchment-dim, #c9bfa6); }
.home-footer-links a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.home-footer-links a:hover{ color:var(--parchment, #f6ead0); }

/* Sign-in gate: the Habitat wordmark instead of the Animal Army banner. */
.auth-gate-wordmark{ text-align:center; margin:12px auto 6px; }
.auth-gate-wordmark .kicker{ display:block; }

/* Four icon pills must fit a 375px phone. */
@media (max-width:420px){
  .top-actions{ gap:4px; }
  .top-actions > .how-to-play-fab, .top-actions > .leaderboard-btn{ min-width:0; flex:1 1 0; padding-left:0; padding-right:0; }
}