/* ============================================================
   Blocky MMORPG / RuneScape-style home redesign (v2)
   Stone & parchment panels, chunky beveled borders, gold trim,
   pixel-font labels. Scoped to body[data-page="home"] so the
   rest of the site is untouched until the look is approved.
   ============================================================ */

body[data-page="home"] {
  --rs-bg:          #14110b;
  --rs-stone:       #2e2a22;
  --rs-stone-hi:    #3b362b;
  --rs-stone-lo:    #211e18;
  --rs-bevel-light: #5c5340;
  --rs-bevel-dark:  #0c0a06;
  --rs-trim:        #6b5a2e;   /* gold-brown frame trim */
  --rs-trim-hi:     #9a8a4e;
  --rs-gold:        #ffcf45;
  --rs-gold-soft:   #ffe48a;
  --rs-gold-deep:   #b8881f;
  --rs-parchment:   #e9d8a8;
  --rs-ink:         #2a2012;
  --rs-text:        #e8dcc2;
  --rs-text-dim:    #b3a585;
}

html[data-theme="light"] body[data-page="home"] {
  --rs-bg:        #cdbb8c;
  --rs-stone:     #e9d8a8;
  --rs-stone-hi:  #f3e6c2;
  --rs-stone-lo:  #d8c597;
  --rs-text:      #2a2012;
  --rs-text-dim:  #5c4a28;
}

/* The full-bleed stone backdrop (map ghosting under a veil) now lives in
   the shared rs-theme.css, applied via body.rs-theme. */
body[data-page="home"] .page-content {
  max-width: none;
  padding: 0;
  background: transparent;
  color: var(--rs-text);
}
/* keep inner sections readable-width and centered */
body[data-page="home"] .hx-section,
body[data-page="home"] .stats-dashboard,
body[data-page="home"] .video-grid,
body[data-page="home"] .build-grid,
body[data-page="home"] .patch-notes-container {
  margin-left: auto;
  margin-right: auto;
}

/* re-usable chunky beveled stone panel */
body[data-page="home"] .rs-panel,
body[data-page="home"] .stat-card,
body[data-page="home"] .build-card,
body[data-page="home"] .patch-note-card,
body[data-page="home"] .video-card {
  background-color: var(--rs-stone);
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(rgba(0, 0, 0, 0.25) 1px, transparent 1px);
  background-size: 5px 5px, 7px 7px;
  background-position: 0 0, 3px 4px;
  border: 3px solid var(--rs-trim);
  border-radius: 0;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.10),
    inset -2px -2px 0 rgba(0, 0, 0, 0.55),
    0 4px 0 rgba(0, 0, 0, 0.4);
}

/* ---------- HERO ---------- */
.hx-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4.5rem 1.25rem 3.5rem;
}

.hx-hero-inner {
  position: relative;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  padding: 3rem 2rem;
  background-color: var(--rs-stone);
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(rgba(0, 0, 0, 0.28) 1px, transparent 1px);
  background-size: 6px 6px, 8px 8px;
  background-position: 0 0, 3px 4px;
  border: 4px solid var(--rs-trim);
  box-shadow:
    inset 3px 3px 0 rgba(255, 255, 255, 0.10),
    inset -3px -3px 0 rgba(0, 0, 0, 0.6),
    0 8px 0 rgba(0, 0, 0, 0.45),
    0 0 0 2px var(--rs-bevel-dark);
}

.hx-eyebrow {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--rs-gold);
  text-shadow: 1px 1px 0 #000;
}

.hx-hero-title {
  font-family: 'Asul', serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 8vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--rs-gold);
  text-shadow:
    3px 3px 0 #000,
    -1px -1px 0 var(--rs-gold-deep),
    0 0 18px rgba(255, 207, 69, 0.25);
}
.hx-grad { color: inherit; }

.hx-hero-tagline {
  max-width: 36rem;
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.6;
  color: var(--rs-text);
}
.hx-hero-tagline em { color: var(--rs-gold-soft); font-style: normal; }

/* chunky stone buttons */
.hx-hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.hx-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--rs-gold-soft);
  background: linear-gradient(180deg, var(--rs-stone-hi), var(--rs-stone-lo));
  border: 2px solid var(--rs-bevel-dark);
  border-radius: 0;
  box-shadow: inset 2px 2px 0 var(--rs-bevel-light), inset -2px -2px 0 var(--rs-bevel-dark);
  text-shadow: 1px 1px 0 #000;
  transition: filter 0.12s, color 0.12s;
}
.hx-btn svg { width: 16px; height: 16px; }
.hx-btn:hover { filter: brightness(1.18); color: #fff36b; }
.hx-btn:active { box-shadow: inset -2px -2px 0 var(--rs-bevel-light), inset 2px 2px 0 var(--rs-bevel-dark); }
.hx-btn-primary {
  color: var(--rs-ink);
  background: linear-gradient(180deg, var(--rs-gold-soft), var(--rs-gold-deep));
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25);
}
.hx-btn-primary:hover { color: #1a1206; }
.hx-btn-discord { color: #fff; background: linear-gradient(180deg, #6b77f5, #3b45b8); }

.hx-hero-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem;
  font-size: 0.85rem; font-weight: 600;
}
.hx-hero-links a { color: var(--rs-text-dim); text-decoration: none; }
.hx-hero-links a:hover { color: var(--rs-gold); text-decoration: underline; }
.hx-hero-links .hx-dot { color: var(--rs-trim); }
.hx-hero-links .hx-dot::before { content: "\2756"; }

/* ---------- SECTIONS ---------- */
.hx-section {
  max-width: 1160px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem;
}
.hx-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 3px double var(--rs-trim);
}
.hx-section-eyebrow {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  color: var(--rs-gold);
  text-shadow: 1px 1px 0 #000;
}
.hx-section-title {
  font-family: 'Asul', serif;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.1;
  margin: 0;
  color: var(--rs-gold-soft);
  text-shadow: 2px 2px 0 #000;
}
.hx-section-title a { color: inherit; text-decoration: none; }
.hx-section-title a:hover { color: var(--rs-gold); }
.hx-section-sub { color: var(--rs-text-dim); font-size: 0.95rem; }

/* ---------- STATS (skill-tile look) ---------- */
body[data-page="home"] .stats-dashboard-section {
  position: relative;
  margin-top: -1.5rem;
  padding: 0 0 0.5rem;
  z-index: 2;
}
body[data-page="home"] .stats-dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
body[data-page="home"] .stat-card {
  padding: 1.4rem 1rem;
  text-align: center;
  transition: filter 0.15s, transform 0.15s;
}
body[data-page="home"] .stat-card:hover { filter: brightness(1.1); transform: translateY(-2px); }
body[data-page="home"] .stat-icon {
  display: inline-flex; padding: 0.4rem; margin-bottom: 0.4rem;
  border: 2px solid var(--rs-bevel-dark);
  box-shadow: inset 1px 1px 0 var(--rs-bevel-light), inset -1px -1px 0 var(--rs-bevel-dark);
  background: var(--rs-stone-lo);
}
body[data-page="home"] .stat-value {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1.1rem, 3vw, 1.7rem);
  line-height: 1.2;
  color: var(--rs-gold);
  text-shadow: 2px 2px 0 #000;
}
body[data-page="home"] .stat-label {
  margin-top: 0.45rem; font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rs-text-dim); font-weight: 700;
}

/* ---------- CARD GRIDS ---------- */
body[data-page="home"] .build-card,
body[data-page="home"] .patch-note-card,
body[data-page="home"] .video-card {
  transition: filter 0.15s, transform 0.15s;
}
body[data-page="home"] .build-card:hover,
body[data-page="home"] .patch-note-card:hover,
body[data-page="home"] .video-card:hover {
  filter: brightness(1.1);
  transform: translateY(-3px);
}
body[data-page="home"] .build-name,
body[data-page="home"] .patch-note-title { color: var(--rs-gold-soft); }

body[data-page="home"] .view-all-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.75rem 1.3rem;
  font-family: 'Press Start 2P', monospace; font-size: 0.62rem;
  color: var(--rs-gold-soft); text-decoration: none;
  background: linear-gradient(180deg, var(--rs-stone-hi), var(--rs-stone-lo));
  border: 2px solid var(--rs-bevel-dark); border-radius: 0;
  box-shadow: inset 2px 2px 0 var(--rs-bevel-light), inset -2px -2px 0 var(--rs-bevel-dark);
  text-shadow: 1px 1px 0 #000;
}
body[data-page="home"] .view-all-link:hover { filter: brightness(1.18); color: #fff36b; }

@media (max-width: 720px) {
  body[data-page="home"] .stats-dashboard { grid-template-columns: 1fr; }
}