/* ═══════════════════════════════════════════════════════════════
   GRANDFLEET™ — Shared stylesheet (every page)
   One dark theme. Gold is sampled from the wordmark itself.
   Page-specific styles live in home.css, game.css, legal.css, team.css.
   ═══════════════════════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────────────────────── */
:root {
  --bg:          #0b0b0d;
  --surface:     #121316;
  --surface-2:   #191a1f;
  --line:        #26272d;
  --line-strong: #3b3c44;

  --text:        #f3efe6;
  --text-dim:    #aba89f;
  --text-faint:  #86847c;

  --gold:        #d9b672;   /* middle of the wordmark's gradient */
  --gold-hi:     #f4e49b;   /* its right-hand end */
  --gold-lo:     #bf8e50;   /* its left-hand end */
  --on-gold:     #17120a;
  --accent:      var(--gold);   /* game panels and game pages override this */

  --ok:          #7fd39a;
  --err:         #f08a80;

  --font-display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --wrap:    1240px;
  --gutter:  clamp(20px, 4vw, 48px);
  --section: clamp(72px, 10vw, 136px);
  --nav-h:   68px;
  --radius:  3px;
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

/* ─── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--on-gold); }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ─── TYPE ───────────────────────────────────────────────────── */
.label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
}
.display {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.8rem, 6.4vw, 5.2rem);
  line-height: 0.94; letter-spacing: 0.015em;
  text-wrap: balance;
}
.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.7; color: var(--text-dim);
  max-width: 58ch; text-wrap: pretty;
}
.section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.label + .display { margin-top: 14px; }
.section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ─── LINKS & BUTTONS ────────────────────────────────────────── */
.link {
  display: inline-block; padding-bottom: 3px;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.link:hover { color: var(--gold-hi); border-color: var(--gold); }
/* A larger invisible hit area, so the small text links are easy to tap */
.link { position: relative; }
.link::before { content: ""; position: absolute; inset: -12px -8px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0 24px;
  font-size: 0.8rem; font-weight: 600; line-height: 1;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease);
}
.btn:hover { border-color: var(--gold); color: var(--gold-hi); }
.btn:active { transform: scale(0.98); transition-duration: 0.08s; }
@media (hover: hover) {
  .btn:not([disabled]):hover { transform: translateY(-2px); }
  .btn:not([disabled]):active { transform: scale(0.98); }
}
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.btn--gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: var(--on-gold); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.75rem; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 5px 10px;
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.tag--accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* ─── NAV ────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
  view-transition-name: nav;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo { display: flex; align-items: center; min-height: 44px; }
.nav-logo img { height: 18px; width: auto; }
.nav-menu { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.nav-links { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.nav-links a {
  position: relative; padding: 6px 0;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.25s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-toggle {
  display: none;
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--gold); transition: transform 0.3s var(--ease), opacity 0.2s ease; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 800px) {
  /* backdrop-filter would make .nav the containing block for its fixed menu, shrinking
     the full-screen menu to the 68px bar. The bar is near-opaque without it. */
  .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--bg) 94%, transparent); }
  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed; inset: var(--nav-h) 0 0 0;
    flex-direction: column; align-items: stretch; gap: 28px;
    padding: 8px var(--gutter) calc(32px + env(safe-area-inset-bottom));
    background: var(--bg);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .nav-open .nav-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav-open, .nav-open body { overflow: hidden; }
  .nav-open .nav { background: var(--bg); border-bottom-color: var(--line); }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links li { border-bottom: 1px solid var(--line); }
  .nav-links a {
    display: flex; align-items: center; min-height: 68px;
    font-family: var(--font-display); font-weight: 400;
    font-size: 2.2rem; letter-spacing: 0.04em; text-transform: none;
    color: var(--text);
  }
  .nav-links a::after { display: none; }
  .nav-links a[aria-current="page"] { color: var(--gold); }
  .nav-menu .btn { min-height: 52px; }
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
.footer { position: relative; z-index: 1; background: var(--surface); border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 80px) 0 28px; }
.footer-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.footer-brand img { height: 26px; width: auto; }
.footer-brand p { margin-top: 14px; font-size: 0.9rem; color: var(--text-faint); }
.footer-nav { display: flex; gap: clamp(32px, 6vw, 88px); flex-wrap: wrap; }
.footer-col h2 {
  margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}
.footer-col a { display: inline-flex; align-items: center; min-height: 34px; font-size: 0.92rem; color: var(--text-dim); transition: color 0.2s ease; }
.footer-col a:hover { color: var(--gold-hi); }
.footer-bottom {
  margin-top: clamp(36px, 5vw, 64px); padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--text-faint);
}
@media (pointer: coarse) { .footer-col a { min-height: 44px; } }

/* ─── PAGE INTRO (games, team, 404) ──────────────────────────── */
.page-intro { padding: calc(var(--nav-h) + clamp(56px, 9vw, 112px)) 0 clamp(40px, 6vw, 72px); }
.page-intro h1 {
  margin: 14px 0 18px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(4rem, 11vw, 8.5rem);
  line-height: 0.9; letter-spacing: 0.015em;
}

/* ─── GAME PANELS (home, games) ──────────────────────────────── */
.game {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(44px, 7vw, 88px);
  border-top: 1px solid var(--line);
}
.game:nth-of-type(even) .game-media { order: 2; }
.game-index { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.18em; color: var(--text-faint); }
.game-head { display: flex; align-items: center; gap: 20px; margin-top: 18px; }
.game-icon { width: 76px; height: 76px; flex: none; border-radius: 18px; object-fit: cover; background: var(--surface-2); }
.game-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 0.92; letter-spacing: 0.015em;
}
.game-genre {
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.game-desc { margin-top: 22px; max-width: 50ch; color: var(--text-dim); text-wrap: pretty; }
.game-facts { margin-top: 24px; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: 0.9rem; }
.game-facts dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); padding-top: 3px; }
.game-facts dd { color: var(--text); }
.game-links { margin-top: 30px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; }

.games-group + .games-group { margin-top: clamp(48px, 7vw, 96px); }
.games-group-title { padding-bottom: 20px; }

@media (max-width: 860px) {
  .game { grid-template-columns: minmax(0, 1fr); }
  .game:nth-of-type(even) .game-media { order: 0; }
  .game-icon { width: 64px; height: 64px; border-radius: 15px; }
}

/* ─── TRAILER (a poster that becomes the video on click) ─────── */
.trailer {
  position: relative; display: block;
  aspect-ratio: 16 / 9; overflow: hidden; overflow: clip;   /* clip: not a scroll container, so the poster's view() timeline tracks the page */
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.trailer img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.trailer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(11,11,13,0.78) 0%, rgba(11,11,13,0.1) 46%, rgba(11,11,13,0.22) 100%);
  transition: opacity 0.3s ease;
}
.trailer-play {
  position: absolute; z-index: 1; top: 50%; left: 50%;
  width: 76px; height: 76px; margin: -38px 0 0 -38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold); color: var(--on-gold);
  transition: transform 0.35s var(--ease), background 0.25s ease;
}
.trailer-play svg { width: 26px; height: 26px; margin-left: 4px; }
.trailer-cap {
  position: absolute; z-index: 1; left: 18px; bottom: 14px;
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text);
}
.trailer:hover img { transform: scale(1.04); }
.trailer:hover .trailer-play { transform: scale(1.08); background: var(--gold-hi); }
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailer.is-playing::after { display: none; }
@media (max-width: 560px) { .trailer-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .trailer-play svg { width: 20px; height: 20px; } }

/* ─── FORM ───────────────────────────────────────────────────── */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }
.field input, .field textarea {
  width: 100%; padding: 14px 16px;
  font-size: 1rem;                     /* 16px: iOS zooms the page on anything smaller */
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: var(--surface-2); }
.form-note { font-size: 0.85rem; color: var(--text-faint); }
.form-status { padding: 12px 16px; font-size: 0.9rem; border: 1px solid; border-radius: var(--radius); }
.form-status--success { color: var(--ok);  border-color: color-mix(in srgb, var(--ok) 40%, transparent);  background: color-mix(in srgb, var(--ok) 8%, transparent); }
.form-status--error   { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent); background: color-mix(in srgb, var(--err) 8%, transparent); }

/* ─── REVEAL ─────────────────────────────────────────────────────
   Only hidden when scripts run (html.js is set in the <head>), so a
   page without JavaScript shows everything. js/site.js adds .is-in. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ─── PAGE TRANSITIONS (native, where supported) ─────────────── */
@view-transition { navigation: auto; }
/* The old page dims and sinks back while the new one wipes up over it. The nav
   has its own view-transition-name, so it stays put above both. */
::view-transition-old(root) { animation: vt-out 0.45s cubic-bezier(0.4, 0, 0.2, 1) both; }
::view-transition-new(root) { animation: vt-in 0.6s var(--ease) both; }
@keyframes vt-out { to { opacity: 0.35; transform: scale(0.96) translateY(-2%); filter: brightness(0.55); } }
@keyframes vt-in  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ─── MOTION (all off under prefers-reduced-motion) ──────────────
   Only transform and opacity move. Hidden states are scoped to .js,
   so without scripts everything is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  /* Rows inside a reveal cascade in after it (site.js adds .reveal-child and --i) */
  .js .reveal-child {
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.7s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms + 120ms);
  }
  .js .reveal.is-in .reveal-child { opacity: 1; transform: none; }

  /* Three-up services: stagger left to right (stacked on mobile, so no delay there) */
  @media (min-width: 861px) { .js .service.reveal { transition-delay: calc(var(--i, 0) * 90ms); } }

  /* Game panels: the panel shows at once, its media slides in from its own side
     and the text rises. Keep .is-in last so it wins the specificity tie. */
  .js main { overflow-x: clip; }   /* the sideways slide-in must never add a horizontal scrollbar; clip keeps sticky working */
  .js .game.reveal { opacity: 1; transform: none; }
  .js .game.reveal .game-media { opacity: 0; transform: translateX(-48px); transition: opacity 0.8s ease, transform 1s var(--ease); }
  .js .game.reveal:nth-of-type(even) .game-media { transform: translateX(48px); }
  @media (max-width: 860px) {
    .js .game.reveal .game-media, .js .game.reveal:nth-of-type(even) .game-media { transform: translateY(24px); }
  }
  .js .game.reveal.is-in .game-media { opacity: 1; transform: none; }

  /* Text links: a gold underline draws in from the left on hover and focus */
  .link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform 0.35s var(--ease);
  }
  .link:hover::after, .link:focus-visible::after { transform: scaleX(1); }

  /* Play button ring and game icon: small rewards for hovering */
  .trailer-play::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--gold); opacity: 0; pointer-events: none;
  }
  .trailer:hover .trailer-play::before { animation: ring 1.4s ease-out infinite; }
  @keyframes ring { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
  .game-icon { transition: transform 0.5s var(--ease); }
  @media (hover: hover) { .game:hover .game-icon { transform: rotate(-5deg) scale(1.06); } }

  /* Scroll-linked: a gold progress hairline, and a slow drift on game posters.
     Native scroll timelines; browsers without them just skip this block. */
  @supports (animation-timeline: scroll()) {
    body::before {
      content: ""; position: fixed; inset: 0 0 auto 0; z-index: 101; height: 2px;
      background: var(--gold); pointer-events: none;
      transform: scaleX(0); transform-origin: left;
      animation: progress linear both; animation-timeline: scroll(root);
    }
    @keyframes progress { to { transform: scaleX(1); } }

    .trailer img { scale: 1.12; animation: drift linear both; animation-timeline: view(); }
    @keyframes drift { from { translate: 0 -5%; } to { translate: 0 5%; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}