/* Homepage only: Dark Sea + Sand. Loaded by the homeTheme page flag.
   Shared component tokens retain their names to leave the game theme intact. */
:root {
  --bg: #1d3f43;
  --bg-1: #142c2f;
  --bg-2: #0c191b;
  --line: rgba(214, 203, 186, .2);
  --line-2: rgba(214, 203, 186, .65);
  --tx: #d6cbba;
  --tx-dim: rgba(214, 203, 186, .8);
  --tx-mute: rgba(214, 203, 186, .8);
  --bg-alt: #142c2f;
  --gold: #d6cbba;
  --gold-2: #d6cbba;
  --gold-soft: rgba(214, 203, 186, .12);
  --hero-particle-rgb: 214,203,186;
}

body.theme-home { color-scheme: dark; }
body.theme-home ::selection { background: var(--tx); color: var(--bg); }
/* Clear over the water at the top, so the scene starts at the top of the
   screen; solid once the page scrolls or the menu opens. */
body.theme-home .site-header {
  background: transparent;
  border-bottom: 0;
}
body.theme-home .site-header:has(.nav.is-open) { background: var(--bg-2); }
body.theme-home .site-header.is-scrolled {
  background: rgba(12, 25, 27, .96);
  backdrop-filter: blur(14px);
}
body.theme-home .site-footer { background: var(--bg-2); }
body.theme-home .btn--primary { color: var(--bg); box-shadow: none; }
body.theme-home .btn--primary:hover {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--gold);
}
body.theme-home .hero__cta .btn--primary::after { display: none; }
/* A bright surface above a deep water column, using only Sea and Sand. */
body.theme-home .hero {
  background: linear-gradient(180deg, #1d3f43 0%, #142c2f 76%, #0c191b 100%);
}
body.theme-home .hero__bg::before {
  inset: -18% -20% auto;
  width: 140%; height: 65%;
  background: radial-gradient(ellipse at 65% 0%, rgba(214, 203, 186, .22), transparent 68%);
  animation: none; transform: none; filter: blur(18px);
}
body.theme-home .hero__sunlight {
  position: absolute; inset: 0;
  mask-image: linear-gradient(#000, rgba(0, 0, 0, .8) 38%, transparent 95%);
}
body.theme-home .hero__sunlight i {
  position: absolute; top: -12%; left: 52%;
  width: 16%; height: 125%;
  transform-origin: 50% 0;
  background: linear-gradient(90deg, transparent, rgba(214, 203, 186, .13) 48%, transparent);
  filter: blur(7px);
  transform: rotate(24deg);
  animation: underwaterSway 17s ease-in-out infinite alternate;
}
body.theme-home .hero__sunlight i:nth-child(2) { left: 68%; width: 9%; opacity: .8; animation-delay: -6s; }
body.theme-home .hero__sunlight i:nth-child(3) { left: 83%; width: 22%; opacity: .65; animation-delay: -11s; }
body.theme-home .hero__sunlight i:nth-child(4) { left: 36%; width: 8%; opacity: .5; animation-delay: -3s; }
body.theme-home .hero__sunlight i:nth-child(5) { left: 95%; width: 12%; opacity: .75; animation-delay: -8s; }
/* The WebGL scene from hero-water.js. It fades into the gradient below so
   the hero still ends where the page begins; once it draws, the CSS glow
   and rays above step aside (they remain the fallback without WebGL). */
body.theme-home .hero__water {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.2s ease;
  mask-image: linear-gradient(#000 62%, transparent 100%);
}
body.theme-home .hero.has-water .hero__water { opacity: 1; }
body.theme-home .hero.has-water .hero__sunlight,
body.theme-home .hero.has-water .hero__bg::before { display: none; }
/* Set by hero-fx.js while the pointer is over a bubble: it can be popped,
   and a click there shouldn't start selecting the copy behind it. */
body.theme-home .hero.is-bubble-hover { cursor: pointer; -webkit-user-select: none; user-select: none; }
@keyframes underwaterSway {
  from { transform: rotate(20deg) scaleX(.85); opacity: .5; }
  to { transform: rotate(29deg) scaleX(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-home .hero__sunlight i { animation: none; }
}
body.theme-home .contact-card.reveal:hover {
  box-shadow: 0 14px 32px rgba(12, 25, 27, .35);
}
body.theme-home .contact-card { min-width: 0; }
/* Links in the legal text are the one place a line helps: in running copy
   the colour alone doesn't set them apart. */
body.theme-home .legal__doc a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }

/* No decorative lines: rules, underlines and outlines around content made the
   page read as a template. Surfaces are told apart by their fill, and only
   buttons keep an edge, because that edge says they can be pressed. */
body.theme-home .nav a:not(.btn)::after { display: none; }
body.theme-home .nav-toggle { border-color: transparent; }
body.theme-home .game-feature,
body.theme-home .contact-card { border: 0; }
body.theme-home .tag { border-color: transparent; background: rgba(214, 203, 186, .07); }
/* Denser than the genre tags so the status reads apart, still well under the
   solid fill of the buttons. */
body.theme-home .tag--status { background: rgba(214, 203, 186, .3); color: #f3ede3; }
body.theme-home .site-footer,
body.theme-home .footer-bottom { border-top: 0; }

@media (max-width: 760px) {
  body.theme-home .nav { background: var(--bg-2); border-bottom: 0; }
  body.theme-home .nav a:not(.btn) { border-bottom: 0; }
}
@media (max-width: 480px) {
  body.theme-home .contact-card { padding: var(--s5); }
  body.theme-home .contact-card .btn {
    max-width: 100%;
    white-space: normal;
    justify-content: center;
    text-align: center;
  }
}

body.theme-home .hero__inner { max-width: 1100px; }