/* Homepage (logged out). Dark is the original look. Light and Pink use the same colours as the chat page
   (the --c-* variables in chat-ui.css, set by the Dark / Light / Pink button). A season (Retro / Halloween)
   restyles the card in its own stylesheet, so these rules only apply when no season is on. */
html.theme-light body.home-page, html.theme-pink body.home-page { background: var(--c-bg); color: var(--c-text); }
html.theme-light .home-page .logged-out-container, html.theme-pink .home-page .logged-out-container {
  background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--c-shadow); }
html.theme-light .home-page .logged-out-container h1, html.theme-pink .home-page .logged-out-container h1 {
  background: none; color: var(--c-accent-text); -webkit-text-fill-color: var(--c-accent-text); }
html.theme-light .home-page .logged-out-container p, html.theme-pink .home-page .logged-out-container p,
html.theme-light .home-page #stay-logged-in-label, html.theme-pink .home-page #stay-logged-in-label { color: var(--c-text); }
/* Pink: the gold buttons take the pink accent like the rest of the site */
html.theme-pink .home-page .bg-gold { background: var(--c-accent-grad); color: var(--c-accent-fg); }

/* The theme and Tools buttons are the same size and look as on the chat page */
.home-page .tools-header-container .right-tools > #theme-toggle-btn { width: 40px; height: 40px; padding: 0; border-radius: 12px; }
.home-page .tools-header-container .right-tools > #tools-button { height: 40px; min-width: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* "Stay logged in" sits under the Log In button as one tidy line */
.home-page #stay-logged-in-label { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.home-page #stay-logged-in { width: 18px; height: 18px; accent-color: var(--c-accent, #FFD700); }

/* Phones: a smaller heading so it does not run to four lines, and room for the bar at the top */
@media (max-width: 479.98px) {
  .home-page { padding-top: 64px; }
  .home-page .logged-out-container h1 { font-size: 1.45rem; line-height: 1.25; }
}
/* Short screens (a phone on its side): shrink the logo so Log In is visible without scrolling */
@media (max-height: 500px) {
  .home-page { padding-top: 64px; }
  .home-page .logo-container { margin-bottom: 10px; }
  .home-page .logo-container video, .home-page .logo-container img { width: 90px !important; height: 90px !important; }
}