/* HOODBTC Games — Night Water theme layer.
   The same style as the Token Factory (PR #44) and HOODBTC
   Intelligence: deep blue-black water, pale mint ink, brand green,
   hairline panels, pill buttons, Cormorant Garamond display type —
   with the exact Intelligence water loop moving behind every page.
   This file is the final cascade layer on every page and restyles
   palette, type and surfaces ONLY: no layout geometry, no game
   markup, no gear/shop rules. Remove this file's <link> from a page
   to revert that page completely. */

:root {
  /* Root pages (home / shop / leaderboard) theme variables. */
  --bg: #020607;
  --panel: rgba(3, 13, 12, .88);
  --mint: #35E87F;
  --line: rgba(233, 242, 236, .13);
  --text: #EFF3EC;
  /* Gear/shop shared variables (shop.css) — colours only.
     --hood-gold is deliberately NOT overridden: gold is the
     functional campaign-mode signal in the gear UI. */
  --hood-bg: #020607;
  --hood-panel: rgba(3, 13, 12, .92);
  --hood-mint: #35E87F;
  --hood-line: rgba(233, 242, 236, .16);
  --hood-text: #EFF3EC;
  --hood-muted: #9AA396;
}

/* ---------- the water ---------- */

html {
  /* Deep-water gradient from the very first paint — before the
     video's first frame arrives there is never a black flash,
     only dark water. */
  background: radial-gradient(130% 95% at 50% -10%, #0c3833 0%, #052227 46%, #020607 82%) #020607;
}

body {
  /* The page's own background paint is lifted so the fixed water
     video shows through; the video (or the #020607 html fallback)
     becomes the background on every page. */
  background: transparent !important;
}

#night-water-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  /* The same deep-water gradient sits under the poster/first
     frame, so a slow video fades in over water, never black. */
  background: radial-gradient(130% 95% at 50% -10%, #0c3833 0%, #052227 46%, #020607 82%) #020607;
}

/* ---------- display type ---------- */

.brand {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: .3em;
  color: #35E87F;
}

.brand small {
  color: #9AA396;
}

.brandlogo {
  border-color: #35E87F;
  box-shadow: 0 0 20px rgba(53, 232, 127, .25);
}

h1,
h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.game h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.hero h1 em,
h1 em {
  color: #6FF2A4;
}

/* ---------- surfaces over the water ---------- */

.hero {
  background: radial-gradient(ellipse at 85% 10%, rgba(53, 232, 127, .10), transparent 50%), rgba(3, 13, 12, .86);
  border-color: rgba(233, 242, 236, .22);
  box-shadow: 0 16px 60px rgba(0, 0, 0, .38), 0 0 90px rgba(53, 232, 127, .07);
}

.game {
  background: rgba(3, 13, 12, .86);
}

.game--breaker {
  background: radial-gradient(ellipse at 86% 38%, rgba(53, 232, 127, .12) 0%, rgba(3, 13, 12, .9) 58%);
  border-color: rgba(111, 242, 164, .35);
}

.panel {
  background: rgba(3, 13, 12, .88);
  border-color: rgba(233, 242, 236, .16);
}

/* Homepage promo sections carry inline backgrounds; the night
   panel treatment is applied over them, geometry untouched. */
section[aria-label="Global Leaderboards"],
section[aria-label="Gear Shop"] {
  background: rgba(3, 13, 12, .86) !important;
  border-color: rgba(233, 242, 236, .16) !important;
}

.tabs a {
  background: rgba(3, 13, 12, .7);
}

.tabs a.selected {
  background: #35E87F;
  border-color: #35E87F;
  color: #04120a;
}

.count {
  background: rgba(3, 13, 12, .7);
  border-color: rgba(233, 242, 236, .16);
}

/* ---------- text tones ---------- */

.hero p,
.game p,
.lede,
.description {
  color: #C2C9BE;
}

.note,
footer {
  color: #9AA396;
}

.toplink,
.home {
  color: #C2C9BE;
}

/* ---------- pill buttons ---------- */

.cta {
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .09em;
  background: #35E87F;
  color: #04120a;
  /* Card CTA labels never wrap to two lines — the pill is sized
     so the longest label ("PLAY PLANE WAR ↗") fits the narrowest
     card on one line. */
  white-space: nowrap;
  font-size: .84rem;
  padding-left: 18px;
  padding-right: 18px;
}

.cta:hover,
.game:hover .cta {
  background: #6FF2A4;
}

.toplink,
.home {
  border-radius: 999px;
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .game,
  .game .cta {
    transition: none;
  }
}

/* ==================================================================
   Round 2 — fixes from the visual tour + the magic touches.
   Everything below lives in this theme layer only: no game markup,
   no game CSS, no shop/gear rules were touched.
   ================================================================== */

/* ---------- glass header & nav (tour fix 1) ----------
   The header and its pills sit directly over the moving water;
   a bright ripple behind a bare link made it unreadable. A
   translucent dark glass bar + pill glass keeps the nav legible
   at every moment of the loop, on every page that has one. */

header {
  background: linear-gradient(180deg, rgba(2, 12, 10, .68), rgba(2, 12, 10, .5));
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
  border-bottom: 1px solid rgba(233, 242, 236, .1);
  border-radius: 0 0 18px 18px;
}

.toplink,
.home {
  background: rgba(2, 12, 10, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---------- contrast insurance (tour fix 4) ----------
   Any theme-layer text that sits directly over the water gets a
   soft shadow veil, so bright frames never wash it out. */

h1,
.eyebrow,
.lede,
.note,
.count,
.tip,
.sectionhead,
footer {
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .45);
}

/* Panels already carry their own dark ground — no veil needed
   inside them. */
.hero h1,
.panel h1,
.shop-wallet,
.shop-pro,
.shop-card {
  text-shadow: none;
}

/* ---------- shop top: let the water through (tour fix 3) ----------
   The wallet and PRO panels at the top of /shop were nearly
   opaque, hiding the water across the whole first screen. Eased
   to translucent glass: ripples now read through them exactly
   like further down the page, while prices and copy stay crisp
   (blur + the panels' own dark tint do the legibility work). */

.shop-wallet {
  background: rgba(3, 13, 12, .66);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.shop-pro {
  background: linear-gradient(145deg, rgba(43, 36, 16, .7), rgba(18, 16, 10, .8));
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

/* ---------- glow (magic) ----------
   A soft green halo behind the hero wordmark line and the
   header wordmark — light on water, kept calm. */

.hero h1 em {
  text-shadow: 0 0 26px rgba(111, 242, 164, .45), 0 0 74px rgba(53, 232, 127, .26);
}

.brand {
  text-shadow: 0 0 18px rgba(53, 232, 127, .35);
}

/* ---------- cards: hover lift glow + focus rings (magic) ------- */

.game {
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}

.game:hover,
.game:focus-visible {
  box-shadow: 0 16px 36px rgba(0, 0, 0, .5), 0 0 0 1px rgba(53, 232, 127, .5), 0 0 26px rgba(53, 232, 127, .16);
}

.game:focus-visible {
  outline: 2px solid #6FF2A4;
  outline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid #6FF2A4;
  outline-offset: 2px;
}

/* ---------- small luxury details (magic) ---------- */

::selection {
  background: #35E87F;
  color: #04120a;
}

html {
  scrollbar-color: #1f6a41 #020607;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #020607;
}

::-webkit-scrollbar-thumb {
  background: #1f6a41;
  border-radius: 99px;
  border: 2px solid #020607;
}

::-webkit-scrollbar-thumb:hover {
  background: #35E87F;
}

/* ---------- entrance: a gentle fade-in-up (magic) ----------
   Backwards fill only: the moment the animation ends, natural
   styles return, so the card hover lift is never overridden. */

@media (prefers-reduced-motion: no-preference) {
  @keyframes nw-rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .hero,
  .shop-wallet,
  .shop-pro,
  .shop-card,
  .games .game {
    animation: nw-rise .7s cubic-bezier(.22, .8, .3, 1) backwards;
  }

  .games .game:nth-child(2) { animation-delay: .05s; }
  .games .game:nth-child(3) { animation-delay: .1s; }
  .games .game:nth-child(4) { animation-delay: .15s; }
  .games .game:nth-child(5) { animation-delay: .2s; }
  .games .game:nth-child(6) { animation-delay: .25s; }
  .games .game:nth-child(n+7) { animation-delay: .3s; }
}

/* ---------- phone sizing for the no-wrap CTA (tour fix 2) ----- */

@media (max-width: 560px) {
  .cta {
    font-size: .78rem;
    letter-spacing: .06em;
    padding-left: 15px;
    padding-right: 15px;
  }
}