/* index uses Syne instead of the DM Sans default in shared.css */
:root {
  --bg2: #0d1017;
  --font-body: "Syne", sans-serif;
}

/* index fadeUp travels slightly further */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── HERO ─── */
.hero {
  /* 100vh on mobile is calculated against the largest possible viewport,
     as if the browser's address bar were already hidden - since it's
     usually still visible on load, the hero rendered taller than the
     actual visible screen, pushing everything below it down and making
     the fixed nav's position glitch as the toolbar shows/hides on scroll.
     100dvh (dynamic viewport height) tracks the real visible area instead -
     kept 100vh first as a fallback for browsers that don't support dvh yet. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 3rem 5rem;
  position: relative;
  overflow: hidden;
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    black 30%,
    transparent 100%
  );
}

.hero-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 229, 255, 0.08) 0%,
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-glow2 {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 60, 110, 0.06) 0%,
    transparent 70%
  );
  top: 30%;
  right: 10%;
  pointer-events: none;
}

.hero-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  animation: fadeUp 0.8s ease both;
}

.hero-name {
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 16rem);
  line-height: 0.88;
  color: var(--text);
  animation: fadeUp 0.8s 0.1s ease both;
}

.hero-name .accent-z {
  color: var(--accent);
  text-shadow: 0 0 60px rgba(0, 229, 255, 0.35);
}

.hero-sub {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1rem;
  animation: fadeUp 0.8s 0.2s ease both;
}

.hero-sub span {
  color: var(--accent2);
}

.hero-games {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  animation: fadeUp 0.8s 0.35s ease both;
}

.game-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.38rem 0.9rem;
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
  transition:
    border-color 0.2s,
    color 0.2s,
    background 0.2s;
}

.game-tag.active:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 229, 255, 0.06);
}

.game-tag.retired {
  opacity: 0.35;
}

.hero-cta {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  margin-top: 3rem;
  animation: fadeUp 0.8s 0.45s ease both;
  flex-wrap: wrap;
}

.btn-primary {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  background: var(--accent);
  color: #000;
  border: none;
  cursor: none;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
  text-decoration: none;
  display: inline-block;
}

.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent2);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.btn-primary:hover::before {
  transform: translateX(0);
}

.btn-primary span {
  position: relative;
  z-index: 1;
}

.btn-ghost {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  border: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
  cursor: none;
  transition:
    border-color 0.2s,
    color 0.2s;
  text-decoration: none;
  display: inline-block;
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-donate-hero {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  border: 1px solid var(--accent2);
  color: var(--accent2);
  background: transparent;
  cursor: none;
  transition:
    background 0.2s,
    color 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-donate-hero svg {
  width: 0.8em;
  height: 0.8em;
  flex-shrink: 0;
}

.btn-donate-hero:hover {
  background: var(--accent2);
  color: #000;
}

/* ─── LIVE BANNER ─── */
.live-banner {
  display: none;
  margin: 0 3rem 3rem;
}

.live-banner.is-live,
.live-banner.is-vod {
  display: block;
  animation: fadeUp 0.5s ease both;
}

.live-banner-link {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 1.8rem;
  background: rgba(34, 255, 136, 0.05);
  border: 1px solid rgba(34, 255, 136, 0.3);
  text-decoration: none;
  color: var(--text);
  cursor: none;
  transition: background 0.2s, border-color 0.2s;
}

.live-banner-link:hover {
  background: rgba(34, 255, 136, 0.09);
  border-color: rgba(34, 255, 136, 0.55);
}

.live-banner-dot {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #22ff88;
  animation: pulse-dot 1.8s infinite;
}

.live-banner-thumb {
  display: none;
  width: 96px;
  height: 54px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--bg2);
}

.live-banner-text {
  flex: 1;
  min-width: 0;
}

.live-banner-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #22ff88;
  font-weight: 700;
}

.live-banner-title {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-banner-cta {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #22ff88;
  border: 1px solid rgba(34, 255, 136, 0.4);
  padding: 0.5rem 1rem;
}

/* VOD fallback state - cyan instead of green, dot swapped for a thumbnail */
.live-banner.is-vod .live-banner-link {
  background: rgba(0, 229, 255, 0.05);
  border-color: rgba(0, 229, 255, 0.3);
}

.live-banner.is-vod .live-banner-link:hover {
  background: rgba(0, 229, 255, 0.09);
  border-color: rgba(0, 229, 255, 0.55);
}

.live-banner.is-vod .live-banner-dot { display: none; }
.live-banner.is-vod .live-banner-thumb { display: block; }

.live-banner.is-vod .live-banner-label,
.live-banner.is-vod .live-banner-cta {
  color: var(--accent);
}

.live-banner.is-vod .live-banner-cta {
  border-color: rgba(0, 229, 255, 0.4);
}

@media (max-width: 600px) {
  .live-banner-cta { display: none; }
  .live-banner-thumb { width: 64px; height: 36px; }
}

/* ─── SHARED SECTION STYLES ─── */
section {
  padding: 6rem 3rem;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  margin: 0 0 3rem;
  color: var(--text);
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin: 0 3rem;
  opacity: 0.15;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ─── AD SLOT ─── */
.ad-slot {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(0, 229, 255, 0.1);
  padding: 1rem 3rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--muted);
}

/* ─── NEWS ─── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5px;
  background: var(--border);
}

.news-card {
  background: var(--bg);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: background 0.25s;
  cursor: none;
}

.news-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.news-card:hover {
  background: var(--surface);
}

.news-card:hover::before {
  transform: scaleX(1);
}

.news-date {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 0.8rem;
}

.news-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin-bottom: 0.7rem;
}

.news-card p {
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.7;
}

.news-arrow {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  font-size: 1.2rem;
  color: var(--accent);
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
}

.news-card:hover .news-arrow {
  opacity: 1;
  transform: translate(3px, -3px);
}

.news-more {
  margin-top: 2rem;
  text-align: right;
}

/* ─── STATS ─── */
.stats-bar {
  display: grid;
  /* minmax(0, 1fr), not plain 1fr - a bare 1fr track still won't shrink
     below its content's natural min-content size, which on a narrow phone
     (4 columns x 2rem padding x 3.5rem stat-num text) forced every column
     wider than its fair share and dragged the whole page into being
     horizontally scrollable (this was the real cause behind the reported
     "games list is too wide on Firefox Android" - the stats bar above it
     was the actual widest offender, not the games rows). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  margin: 0 3rem;
}

.stat-item {
  padding: 2rem;
  border-right: 1px solid var(--border);
  text-align: center;
}

.stat-item:last-child {
  border-right: none;
}

.stat-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: var(--accent);
  line-height: 1;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.4rem;
}

@media (max-width: 600px) {
  .stats-bar {
    margin: 0 1.2rem;
  }

  .stat-item {
    padding: 1rem 0.5rem;
  }

  .stat-num {
    font-size: 1.7rem;
  }
}

/* ─── LINKS SECTION (on index) ─── */
.links-section {
  background: var(--bg2);
}

.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5px;
  background: var(--border);
}

.link-card {
  background: var(--bg);
  padding: 2rem 1.8rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  text-decoration: none;
  transition: background 0.2s;
  position: relative;
  overflow: hidden;
  cursor: none;
}

.link-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--link-color, var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.link-card:hover {
  background: var(--surface);
}

.link-card:hover::after {
  transform: scaleX(1);
}

.link-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  color: var(--link-color, var(--accent));
}

.link-icon svg {
  width: 1em;
  height: 1em;
  display: block;
}

.link-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: var(--text);
}

.link-handle {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-top: 0.2rem;
}

.link-arrow {
  margin-left: auto;
  font-size: 1rem;
  color: var(--muted);
  transition:
    transform 0.2s,
    color 0.2s;
}

.link-arrow svg,
.news-arrow svg {
  width: 1em;
  height: 1em;
  display: block;
}

.link-card:hover .link-arrow {
  transform: translate(3px, -3px);
  color: var(--link-color, var(--accent));
}

/* ─── GAMES ─── */
.games-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
}

.game-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: var(--bg);
  padding: 1.8rem 2rem;
  transition: background 0.2s;
  cursor: none;
  position: relative;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.game-row::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 0.25s ease;
}

.game-row:hover {
  background: var(--surface);
}

.game-row:hover::after {
  transform: scaleY(1);
}

.game-icon {
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border: 1.5px solid currentColor;
  border-radius: 4px;
  padding: 0.4rem;
}

.game-icon img {
  width: 100%;
  height: 100%;
  /* Logos aren't uniformly square - contain keeps each one's real
     proportions instead of stretching it to fill the box. */
  object-fit: contain;
}

.active-game .game-icon { color: var(--accent); }

.game-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  flex: 1;
}

.game-rank {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.game-status {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.25rem 0.7rem;
  border: 1px solid currentColor;
}

.game-row.active-game .game-status {
  color: #22ff88;
}

.game-row.retired-game {
  opacity: 0.45;
}

/* Flex items default to min-width:auto, which for text content resolves to
   its full single-line width, not its wrap-able min-content width - with
   4 siblings (icon, name, rank badge, status badge) and 2rem gaps, that
   forced every .game-row wider than a narrow phone's viewport, and since
   nothing here was clipping that overflow, it dragged the whole page into
   being horizontally scrollable (confirmed on Firefox Android). min-width:0
   lets the text actually shrink/wrap into the space that's available. */
@media (max-width: 600px) {
  .game-row {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 1rem;
    padding: 1.4rem 1.2rem;
  }

  .game-name {
    min-width: 0;
    font-size: 1.25rem;
  }

  .game-rank {
    /* Two-word game names (Marvel Rivals, Overwatch) wrap onto 2 lines at
       this width - flex-basis:100% forces the rank label onto its own new
       flex line instead of overlapping that wrapped second line. */
    min-width: 0;
    flex-basis: 100%;
    order: 1;
  }

  .game-status {
    /* Follows .game-rank onto that same newly-wrapped line (both are short
       enough to fit together), pushed to its right edge. */
    min-width: 0;
    order: 2;
    margin-left: auto;
  }
}

/* ─── DONATE SECTION ─── */
.donate-section {
  background: var(--bg);
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 6rem 3rem;
}

.donate-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(255, 60, 110, 0.07),
    transparent 60%
  );
}

.donate-section p {
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto 2.5rem;
  line-height: 1.8;
  position: relative;
}

.donate-big-btn {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.15em;
  padding: 1.2rem 3.5rem;
  background: transparent;
  border: 1px solid var(--accent2);
  color: var(--accent2);
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: color 0.25s;
  cursor: none;
}

.donate-big-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent2);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 0;
}

.donate-big-btn:hover {
  color: #000;
}

.donate-big-btn:hover::before {
  transform: translateY(0);
}

.donate-big-btn span {
  position: relative;
  z-index: 1;
}

/* Footer styling now lives in shared.css so every page can use it. */