/* ============================================================
   MINESITE — style.css  (Redesign 2026)
   Rich dark palette · High contrast · Colorful accents
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ── Variables ── */
:root {
  /* Backgrounds — rich slate-navy, not black */
  --bg:          #0d1117;
  --bg-2:        #131921;
  --bg-3:        #1a2233;
  --bg-card:     #161d2b;
  --bg-elevated: #1e2a3d;

  /* Borders — clearly visible */
  --border:      #253047;
  --border-2:    #34465e;
  --border-focus: #4ade80;

  /* Green — primary brand */
  --green:        #4ade80;
  --green-dim:    #2ea855;
  --green-muted:  #1e7a40;
  --green-glow:   rgba(74,222,128,0.20);
  --green-soft:   rgba(74,222,128,0.10);

  /* Gold — seeds accent */
  --gold:         #fbbf24;
  --gold-dim:     #d97706;
  --gold-soft:    rgba(251,191,36,0.12);

  /* Cyan — servers accent */
  --cyan:         #38bdf8;
  --cyan-dim:     #0284c7;
  --cyan-soft:    rgba(56,189,248,0.10);


  /* Purple — skins accent */
  --purple:       #a78bfa;
  --purple-soft:  rgba(167,139,250,0.10);

  /* Text — WCAG AA on all backgrounds */
  --text:    #e8f0fe;
  --text-2:  #9aadbe;
  --text-3:  #5b7080;
  --text-inv: #0d1117;

  /* Semantic */
  --danger:  #f87171;
  --success: #4ade80;
  --warning: #fbbf24;
  --info:    #38bdf8;

  /* Typography */
  --sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  --mono:  'DM Mono', 'Courier New', monospace;
  --pixel: 'Press Start 2P', cursive;

  /* Layout */
  --radius:    6px;
  --radius-lg: 12px;
  --radius-xl: 18px;

  /* Motion */
  --dur-fast: 0.15s;
  --dur-base: 0.22s;
  --dur-slow: 0.4s;
  --ease:     cubic-bezier(0.22,1,0.36,1);
  --transition: all var(--dur-base) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; }
  *,*::before,*::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .particle { display:none; }
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; overflow-x:hidden; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(74,222,128,0.06) 0%, transparent 60%);
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.pixel { font-family:var(--pixel); letter-spacing:0.05em; }
.mono  { font-family:var(--mono); }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

.skip-link {
  position:absolute; top:-60px; left:1rem;
  background:var(--green); color:var(--bg);
  padding:10px 20px; font-weight:700; font-size:0.9rem;
  text-decoration:none; z-index:9999;
  border-radius:0 0 var(--radius) var(--radius);
  transition:top 0.2s;
}
.skip-link:focus { top:0; }


/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(13,17,23,0.92);
  backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid var(--border);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 1rem;
}

.logo {
  display:flex; align-items:center; gap:0.7rem;
  text-decoration:none; flex-shrink:0;
  transition:var(--transition);
}
.logo-icon-svg {
  width:34px; height:34px; flex-shrink:0;
  border-radius:8px;
  border:1px solid var(--border-2);
  box-shadow: 0 0 12px rgba(74,222,128,0.2);
}
.logo-text {
  font-family:var(--pixel); font-size:0.65rem;
  color:var(--green); letter-spacing:0.1em;
  text-shadow:0 0 20px rgba(74,222,128,0.6);
  transition:color var(--dur-base) var(--ease);
}
.logo:hover .logo-text { color:#a7f3cb; }

.main-nav ul { display:flex; gap:1.5rem; list-style:none; align-items:center; }
.main-nav a {
  font-size:0.875rem; font-weight:500;
  color:var(--text-2); text-decoration:none;
  letter-spacing:0.02em;
  transition:color var(--dur-base) var(--ease);
  position:relative; padding-bottom:2px;
}
.main-nav a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:2px;
  background:var(--green); border-radius:1px;
  transition:width var(--dur-base) var(--ease);
}
.main-nav a:hover { color:var(--text); }
.main-nav a:hover::after { width:100%; }

.nav-cta {
  background: linear-gradient(135deg,rgba(74,222,128,0.15),rgba(74,222,128,0.08)) !important;
  border: 1px solid rgba(74,222,128,0.35) !important;
  border-radius:999px !important;
  padding:0.42rem 1.1rem !important;
  color:var(--green) !important;
  font-size:0.82rem !important;
  font-weight:600 !important;
}
.nav-cta:hover {
  background:rgba(74,222,128,0.22) !important;
  border-color:var(--green) !important;
  color:#b9f5d0 !important;
  box-shadow:0 0 16px rgba(74,222,128,0.25) !important;
}
.nav-cta::after { display:none !important; }

.mobile-menu-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:1px solid transparent;
  cursor:pointer; padding:0.5rem; border-radius:var(--radius);
  transition:border-color var(--dur-base) var(--ease);
}
.mobile-menu-toggle:hover { border-color:var(--border-2); }
.burger-line {
  display:block; width:22px; height:2px;
  background:var(--text-2); border-radius:2px;
  transition:var(--transition);
}


/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  position:relative; overflow:hidden;
  padding:7rem 1.5rem 6rem;
}

.hero-bg-img {
  position:absolute; inset:0;
  background-image:url('https://res.cloudinary.com/dwovpecbm/image/upload/v1774177464/themb_vr6akj.jpg');
  background-size:cover; background-position:center;
  filter:brightness(0.28) saturate(0.6);
  z-index:0;
}

.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 80% 65% at 50% 35%, rgba(74,222,128,0.14) 0%, transparent 65%),
    linear-gradient(to bottom, rgba(13,17,23,0.1) 0%, transparent 40%, rgba(13,17,23,0.95) 100%);
}
.hero-overlay::after {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.03) 3px,rgba(0,0,0,0.03) 4px);
  opacity:0.5; pointer-events:none;
}

.hero-particles { position:absolute; inset:0; z-index:1; pointer-events:none; }
.particle {
  position:absolute; width:5px; height:5px; border-radius:1px;
  opacity:0; animation:floatUp 9s infinite ease-in-out;
}
.p1 { left:12%; top:28%; background:var(--green);  animation-delay:0s; }
.p2 { left:74%; top:22%; background:var(--cyan);   animation-delay:1.8s; }
.p3 { left:30%; top:66%; background:var(--green);  animation-delay:3.2s; } /* was --gold */
.p4 { left:84%; top:54%; background:var(--green);  animation-delay:4.7s; }
.p5 { left:54%; top:78%; background:var(--purple); animation-delay:2.1s; }
.p6 { left:8%;  top:74%; background:var(--green);  animation-delay:6.2s; } /* was --amber */

@keyframes floatUp {
  0%   { opacity:0; transform:translateY(0) scale(1); }
  20%  { opacity:0.6; }
  80%  { opacity:0.2; }
  100% { opacity:0; transform:translateY(-90px) scale(0.3); }
}

.hero-content {
  position:relative; z-index:2;
  max-width:880px; margin:0 auto;
  animation:fadeUp 0.9s var(--ease) both;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}

.hero-eyebrow {
  font-family:var(--mono); font-size:0.78rem;
  color:var(--green); letter-spacing:0.22em;
  text-transform:uppercase; margin-bottom:1.5rem;
  animation:fadeUp 0.9s 0.1s var(--ease) both;
}
.hero-eyebrow::before { content:'> '; color:var(--green); }

.hero-title {
  font-family:var(--pixel);
  font-size:clamp(1.8rem,7vw,4.25rem);
  color:#fff; line-height:1.3; margin-bottom:1.5rem;
  text-shadow:
    0 0 60px rgba(74,222,128,0.55),
    0 0 120px rgba(74,222,128,0.22),
    0 6px 28px rgba(0,0,0,0.95);
  letter-spacing:0.06em;
  animation:fadeUp 0.9s 0.15s var(--ease) both;
}

.hero-sub {
  font-size:clamp(1rem,2vw,1.15rem);
  color:var(--text-2); line-height:1.9;
  max-width:540px; margin:0 auto 2rem;
  animation:fadeUp 0.9s 0.22s var(--ease) both;
}

.hero-pills {
  display:flex; gap:0.65rem; justify-content:center;
  flex-wrap:wrap; margin-bottom:2.25rem;
  animation:fadeUp 0.9s 0.3s var(--ease) both;
}
.pill {
  display:inline-flex; align-items:center; gap:0.45rem;
  padding:0.5rem 1.15rem;
  background:rgba(22,29,43,0.85);
  backdrop-filter:blur(10px);
  border:1px solid var(--border-2);
  color:var(--text-2); font-size:0.83rem; font-weight:500;
  text-decoration:none; border-radius:999px;
  transition:var(--transition);
}
.pill:hover {
  border-color:var(--green);
  color:var(--green);
  background:var(--green-soft);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(74,222,128,0.2);
}

.hero-actions {
  display:flex; gap:1rem; justify-content:center;
  flex-wrap:wrap;
  animation:fadeUp 0.9s 0.38s var(--ease) both;
}

/* ── SCROLL CUE BUTTON ───────────────────────────────────── */


.scroll-cue-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-3);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  line-height: 1;
}

.scroll-cue-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  animation: none;
}
.scroll-cue-ring::before { display: none; }

.scroll-cue-arrow {
  color: var(--green);
  animation: bounceArrow 1.8s ease infinite;
}

@keyframes bounceArrow {
  0%, 100% { transform: translateY(0);   opacity: 0.7; }
  50%       { transform: translateY(6px); opacity: 1;   }
}


/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.875rem 2rem;
  font-family:var(--sans); font-size:0.9rem; font-weight:600;
  text-decoration:none; cursor:pointer; color:inherit;
  border-radius:var(--radius);
  transition:var(--transition); border:none;
  letter-spacing:0.01em; line-height:1; white-space:nowrap;
}
.btn-primary {
  background: linear-gradient(135deg,#4ade80,#22c55e);
  color:var(--bg);
  box-shadow:0 0 28px rgba(74,222,128,0.35),0 4px 12px rgba(0,0,0,0.4);
}
.btn-primary:focus-visible {
  animation:pulse-glow 3s ease infinite;
}
.btn-primary:hover {
  background:linear-gradient(135deg,#6ee7a0,#4ade80);
  box-shadow:0 0 48px rgba(74,222,128,0.55),0 6px 16px rgba(0,0,0,0.4);
  transform:translateY(-2px);
}
.btn-primary:active { transform:translateY(0); }
@keyframes pulse-glow {
  0%   { box-shadow:0 0 0 0 rgba(74,222,128,0.45),0 4px 12px rgba(0,0,0,0.4); }
  65%  { box-shadow:0 0 0 14px rgba(74,222,128,0),0 4px 12px rgba(0,0,0,0.4); }
  100% { box-shadow:0 0 0 0 rgba(74,222,128,0),0 4px 12px rgba(0,0,0,0.4); }
}

.btn-ghost {
  background:rgba(22,29,43,0.8);
  backdrop-filter:blur(10px);
  border:1px solid var(--border-2);
  color:var(--text-2);
}
.btn-ghost:hover {
  border-color:var(--green);
  color:var(--green);
  background:var(--green-soft);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(74,222,128,0.15);
}
.btn-ghost:active { transform:translateY(0); }
.btn-sm { padding:0.55rem 1.1rem; font-size:0.8rem; }


/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
  padding: 0;
  position: relative;
  overflow: hidden;
}
.stats-bar::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(74,222,128,0.05) 0%,
    rgba(56,189,248,0.05) 33%,
    rgba(74,222,128,0.05) 66%,   /* was purple */
    rgba(74,222,128,0.05) 100%);
  pointer-events: none;
}

.stats-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  row-gap: 0;
  position: relative;
}

.stat-item {
  text-align: center;
  padding: 1.75rem 2.75rem;
  position: relative;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  transition: background 0.2s ease, transform 0.2s ease;
  flex: 1;
  min-width: 140px;
}
.stat-item:hover {
  background: rgba(255,255,255,0.03);
  transform: translateY(-2px);
}
.stat-item:not(:last-child)::after {
  content: '';
  position: absolute; right: 0; top: 15%; height: 70%;
  width: 1px; background: var(--border-2);
}

.stat-icon {
  font-size: 1.35rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.1rem;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.2));
}

/* All stat numbers use green */
.stat-num {
  font-family: var(--pixel);
  font-size: 1.35rem;
  color: var(--green);
  display: block;
  text-shadow: 0 0 22px rgba(74,222,128,0.55);
  line-height: 1.3;
}
.stat-item:nth-child(2) .stat-num {
  color: var(--cyan);
  text-shadow: 0 0 22px rgba(56,189,248,0.55);
}
.stat-item:nth-child(4) .stat-num {
  color: var(--purple);
  text-shadow: 0 0 22px rgba(167,139,250,0.55);
}

.stat-label {
  font-size: 0.7rem;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: block;
  font-family: var(--sans);
  font-weight: 600;
}

@media (max-width: 640px) {
  .stat-item { padding: 1.25rem 1.5rem; min-width: 120px; }
  .stat-item:not(:last-child)::after { display: none; }
  .stat-icon { font-size: 1.1rem; }
  .stat-num  { font-size: 1.1rem; }
}


/* ============================================================
   SECTIONS — shared layout
   ============================================================ */
.section { padding:5.5rem 0; }

.section-alt {
  background:var(--bg-2);
  position:relative;
}
.section-alt::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 50%,rgba(56,189,248,0.04) 0%,transparent 60%),
    radial-gradient(ellipse 50% 60% at 20% 50%,rgba(74,222,128,0.04) 0%,transparent 60%);
  pointer-events:none;
}

/* section bg handled per-section via explicit IDs */

.section-head-row {
  display:flex; align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap; gap:1rem; margin-bottom:2.75rem;
  position:relative;
}
.section-head-text { max-width:580px; }

.section-tag {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--mono); font-size:0.72rem;
  color:var(--green); letter-spacing:0.15em;
  text-transform:uppercase; margin-bottom:0.9rem;
  background:var(--green-soft);
  border:1px solid rgba(74,222,128,0.25);
  padding:0.3rem 0.75rem; border-radius:999px;
}

/* Per-section accent colors */
#servers  .section-tag { color:var(--cyan);   background:var(--cyan-soft);   border-color:rgba(56,189,248,0.25); }
#skins    .section-tag { color:var(--purple); background:var(--purple-soft); border-color:rgba(167,139,250,0.25); }
/* mods now uses green instead of amber */
#mods     .section-tag { color:var(--green);  background:var(--green-soft);  border-color:rgba(74,222,128,0.25); }
#download .section-tag { color:var(--cyan);   background:var(--cyan-soft);   border-color:rgba(56,189,248,0.25); }
#upload   .section-tag { color:var(--green);  background:var(--green-soft);  border-color:rgba(74,222,128,0.25); } /* was gold */

.section-title {
  font-family:var(--pixel);
  font-size:clamp(0.85rem,2vw,1.1rem);
  color:var(--text); margin-bottom:0.7rem; line-height:1.7;
}

.section-sub {
  font-size:1rem; font-weight:400;
  color:var(--text-2); line-height:1.9;
}

.view-all-link {
  font-size:0.85rem; font-weight:600;
  color:var(--green); text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:0.35rem;
  border:1px solid rgba(74,222,128,0.3);
  padding:0.45rem 1rem; border-radius:999px;
  background:var(--green-soft);
  transition:var(--transition);
}
.view-all-link:hover {
  background:rgba(74,222,128,0.18);
  border-color:var(--green);
  box-shadow:0 0 14px rgba(74,222,128,0.2);
}

.section-divider {
  height:1px;
  background:linear-gradient(90deg,transparent,var(--border-2),transparent);
}

.cta-row { display:flex; gap:0.85rem; flex-wrap:wrap; margin-top:2rem; }

/* Skeleton loader */
.skeleton {
  background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-elevated) 50%,var(--bg-card) 75%);
  background-size:200% 100%;
  animation:shimmer 1.6s infinite;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
}
@keyframes shimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}


/* ============================================================
   SEEDS & SERVERS — card grid
   ============================================================ */
.card-grid { display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:560px) { .card-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px) { .card-grid { grid-template-columns:repeat(3,1fr); } }

.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden; text-decoration:none;
  color:inherit; display:flex; flex-direction:column;
  transition:var(--transition); position:relative;
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  opacity:0; transition:opacity var(--dur-base) var(--ease);
  z-index:2;
}
.card:hover {
  border-color:var(--border-2);
  transform:translateY(-6px);
  box-shadow:0 24px 56px rgba(0,0,0,0.6),0 0 0 1px rgba(74,222,128,0.15);
}
.card:hover::before { opacity:1; }

.card-img-wrap {
  position:relative; overflow:hidden;
  aspect-ratio:16/9; flex-shrink:0;
  background:var(--bg-3);
}
.card-img-wrap::after {
  content:''; position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0.85);
  width:0; height:0;
  border-left:16px solid rgba(255,255,255,0.9);
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  opacity:0; transition:all 0.3s ease;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,0.5));
  z-index:4;
}
.card:hover .card-img-wrap::after { opacity:1; transform:translate(-50%,-50%) scale(1); }

.card-img {
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-slow) var(--ease);
  filter:brightness(0.88) saturate(0.9);
}
.card:hover .card-img { transform:scale(1.06); filter:brightness(1) saturate(1.15); }

.card-badge {
  position:absolute; top:0.75rem; right:0.75rem;
  font-family:var(--pixel); font-size:0.42rem;
  background:rgba(13,17,23,0.92);
  border:1px solid var(--green);
  color:var(--green); padding:0.3rem 0.65rem;
  border-radius:var(--radius); z-index:5;
}

.game-tag {
  position:absolute; top:0.75rem; left:0.75rem;
  font-family:var(--mono); font-size:0.65rem; font-weight:600;
  padding:0.2rem 0.6rem; border-radius:var(--radius);
  z-index:5;
}
.game-tag.minecraft {
  background:rgba(74,222,128,0.18); color:var(--green);
  border:1px solid rgba(74,222,128,0.4);
}
.game-tag.hytale {
  background:rgba(167,139,250,0.18); color:var(--purple);
  border:1px solid rgba(167,139,250,0.4);
}

.card-body {
  padding:1.1rem 1.25rem;
  background:var(--bg-card);
  border-top:1px solid var(--border);
  flex-grow:1; display:flex; flex-direction:column;
}

.card-code-tag {
  display:inline-block; font-size:0.7rem; font-family:var(--mono);
  color:var(--green); background:var(--green-soft);
  border:1px solid rgba(74,222,128,0.25);
  padding:0.15rem 0.5rem; border-radius:var(--radius);
  margin-bottom:0.6rem; width:fit-content;
}

.card-code {
  font-family:var(--mono); font-size:0.75rem;
  color:var(--green); margin-bottom:0.55rem;
  display:flex; align-items:center; gap:0.4rem;
}
.card-code-label {
  font-size:0.65rem; color:var(--text-3);
  text-transform:uppercase; letter-spacing:0.08em;
}

.card-title {
  font-family:var(--pixel); font-size:0.65rem;
  line-height:1.6; margin-bottom:0.55rem;
  color:var(--text); letter-spacing:0.02em;
}

.card-desc {
  font-size:0.87rem; color:var(--text-2); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}

.card-zone { font-size:0.78rem; font-weight:600; margin-bottom:0.3rem; }

.card-tags {
  display:flex; flex-wrap:nowrap; gap:0.35rem;
  margin-top:auto; padding-top:0.75rem;
  overflow:hidden; max-height:1.8rem;
}
.tag {
  font-size:0.65rem; padding:0.2rem 0.55rem;
  border:1px solid var(--border-2);
  color:var(--text-2); border-radius:var(--radius);
  text-transform:uppercase; letter-spacing:0.05em;
  font-family:var(--mono); transition:var(--transition);
}
.card:hover .tag { border-color:rgba(74,222,128,0.4); color:var(--green); }


/* ============================================================
   MODS — preview grid + toggle
   ============================================================ */
.edition-toggle {
  display:flex; gap:0.4rem; padding:0.4rem;
  margin-bottom:2rem; border-radius:var(--radius-lg);
  background:var(--bg-3); border:1px solid var(--border);
  width:fit-content;
}
.etoggle {
  padding:0.7rem 1.6rem; border:none; border-radius:var(--radius);
  background:transparent; font-family:var(--sans);
  font-size:0.9rem; font-weight:500;
  color:var(--text-3); cursor:pointer; transition:var(--transition);
}
.etoggle:hover { background:var(--bg-elevated); color:var(--text-2); }
/* Active state: green instead of amber */
.etoggle.active {
  background: linear-gradient(135deg, rgba(74,222,128,0.15), rgba(74,222,128,0.08));
  color: var(--green);
  border: 1px solid rgba(74,222,128,0.3);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.mod-grid { display:grid; gap:1.2rem; grid-template-columns:1fr; }
@media (min-width:560px)  { .mod-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px)  { .mod-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1300px) { .mod-grid { grid-template-columns:repeat(3,1fr); } }

.mod-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.3rem; display:flex; gap:1rem;
  align-items:flex-start; text-decoration:none;
  color:inherit; transition:var(--transition); position:relative;
  overflow:hidden;
}
/* Left accent stripe: green instead of amber/gold */
.mod-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px;
  background: linear-gradient(180deg, var(--green), var(--green-dim));
  opacity:0; transition:opacity var(--dur-base) var(--ease);
}
.mod-card:hover {
  border-color: rgba(74,222,128,0.35);
  transform:translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(74,222,128,0.1);
}
.mod-card:hover::before { opacity:1; }

.mod-card-icon {
  width:52px; height:52px; border-radius:12px; flex-shrink:0;
  background:var(--bg-3); border:1px solid var(--border-2);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
}
.mod-card-info { flex:1; min-width:0; }
.mod-card-name {
  font-family:var(--sans); font-size:1rem; font-weight:600;
  color:var(--text); margin-bottom:0.35rem; line-height:1.4;
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
}
.mod-card-desc { font-size:0.88rem; color:var(--text-2); line-height:1.6; margin-top:0.2rem; }
.mod-card-loaders { display:flex; gap:0.45rem; margin-top:0.6rem; flex-wrap:wrap; }
/* Loader tags: green instead of amber */
.mod-loader-tag {
  font-size:0.72rem; font-family:var(--mono);
  padding:0.2rem 0.55rem; border-radius:var(--radius);
  border: 1px solid rgba(74,222,128,0.3);
  color: var(--green);
  background: var(--green-soft);
  text-transform:uppercase; letter-spacing:0.04em;
}


/* ============================================================
   SKIN EDITOR SECTION
   ============================================================ */
.skin-layout {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1.5rem; align-items:start;
}
.skin-cta {
  background:linear-gradient(135deg,var(--bg-card) 0%,rgba(26,37,53,0.8) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden; display:flex;
  text-decoration:none; color:inherit;
  transition:var(--transition); position:relative;
}
.skin-cta::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--purple),var(--cyan));
}
.skin-cta:hover {
  border-color:rgba(167,139,250,0.4);
  box-shadow:0 20px 52px rgba(0,0,0,0.6),0 0 0 1px rgba(167,139,250,0.15);
  transform:translateY(-4px);
}
.skin-cta-visual {
  min-width:160px; max-width:220px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  border-right:1px solid var(--border);
  background:radial-gradient(ellipse at center,rgba(167,139,250,0.15) 0%,var(--bg-3) 72%);
  padding:1.5rem 0;
}
.skin-render {
  width:120px; height:auto; image-rendering:pixelated;
  position:relative; z-index:1;
  filter:drop-shadow(0 4px 20px rgba(167,139,250,0.35));
  transition:transform var(--dur-slow) var(--ease),filter var(--dur-slow) var(--ease);
}
.skin-cta:hover .skin-render {
  transform:scale(1.07) translateY(-6px);
  filter:drop-shadow(0 12px 30px rgba(167,139,250,0.5));
}
.skin-pixel-grid {
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(167,139,250,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(167,139,250,0.05) 1px,transparent 1px);
  background-size:8px 8px; pointer-events:none;
}
.skin-cta-info { padding:1.75rem; flex:1; }
.skin-cta-tag {
  display:block; font-size:0.72rem; font-family:var(--mono);
  color:var(--purple); letter-spacing:0.1em; margin-bottom:0.6rem;
}
.skin-cta-title {
  font-family:var(--pixel); font-size:0.65rem;
  line-height:1.8; margin-bottom:0.75rem; color:var(--text);
}
.skin-cta-desc {
  font-size:0.9rem; color:var(--text-2); line-height:1.85; margin-bottom:1.1rem;
}
.skin-features { list-style:none; display:flex; flex-direction:column; gap:0.55rem; }
.skin-features li {
  display:flex; align-items:center; gap:0.6rem;
  font-size:0.88rem; color:var(--text-2);
}
.skin-features svg { flex-shrink:0; }

.skin-gallery {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.6rem;
  container-type:inline-size;
  position:relative; overflow:hidden;
}
.skin-gallery::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--purple),var(--cyan));
}
.skin-gallery-label {
  font-family:var(--mono); font-size:0.68rem;
  color:var(--purple); letter-spacing:0.15em;
  text-transform:uppercase; margin-bottom:1.2rem; display:block;
}
.skin-grid {
  display:grid; gap:0.75rem;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
}
@container (min-width:400px) {
  .skin-grid { grid-template-columns:repeat(4,1fr); }
}
.skin-card { display:flex; flex-direction:column; align-items:center; gap:0.45rem; }
.skin-card-img {
  width:100%; aspect-ratio:1;
  background:var(--bg-3); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:var(--transition);
}
.skin-card-img:hover {
  border-color:rgba(167,139,250,0.5);
  box-shadow:0 4px 16px rgba(167,139,250,0.15);
  transform:translateY(-2px);
}
.skin-card-img img { width:72%; height:72%; object-fit:contain; image-rendering:pixelated; }
.skin-card-name {
  font-size:0.68rem; color:var(--text-2); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.skin-gallery .view-all-link {
  color:var(--purple); background:var(--purple-soft);
  border-color:rgba(167,139,250,0.3);
}
.skin-gallery .view-all-link:hover { background:rgba(167,139,250,0.18); border-color:var(--purple); }


/* ============================================================
   DOWNLOAD SECTION
   ============================================================ */
.download-layout {
  display:grid; grid-template-columns:1fr minmax(0,auto);
  gap:3rem; align-items:center;
}
.dl-badges { display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:1.5rem; }
.dl-badge {
  display:inline-flex; align-items:center; gap:0.45rem;
  font-size:0.82rem; color:var(--text);
  background:var(--bg-3); border:1px solid var(--border-2);
  padding:0.48rem 0.95rem; border-radius:var(--radius);
}
.download-visual { display:flex; align-items:center; justify-content:center; }
.dl-box {
  background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-elevated) 100%);
  border:1px solid var(--border-2);
  border-radius:var(--radius-lg);
  padding:2rem 2.5rem; text-align:center;
  width:min(100%,230px); position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.dl-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}
.dl-box-label { font-family:var(--mono); font-size:0.65rem; color:var(--cyan); letter-spacing:0.12em; }
.dl-box-file  { font-size:0.82rem; color:var(--text); }
.dl-box-size  { font-size:0.72rem; color:var(--text-2); }


/* ============================================================
   SUBMIT SECTION — form
   ============================================================ */
.submit-tabs {
  display:flex; max-width:700px; margin:0 auto 2rem;
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; background:var(--bg-card);
}
.stab {
  flex:1; padding:0.9rem; background:transparent; border:none;
  color:var(--text-3); font-family:var(--pixel); font-size:0.47rem;
  cursor:pointer; transition:var(--transition); letter-spacing:0.07em;
  border-right:1px solid var(--border);
}
.stab:last-child { border-right:none; }
.stab:hover { color:var(--text-2); background:var(--bg-3); }
/* Active tab: green instead of gold */
.stab.active {
  background: var(--bg-elevated);
  color: var(--green);
  box-shadow: inset 0 -2px 0 var(--green);
}

.submit-panel { display:none; }
.submit-panel.active { display:block; }

.review-notice {
  display:flex; align-items:flex-start; gap:0.85rem;
  max-width:700px; margin:0 auto 1.5rem;
  background: var(--green-soft);
  border: 1px solid rgba(74,222,128,0.3);
  border-radius:var(--radius-lg);
  padding:1rem 1.2rem; font-size:0.875rem;
  color:var(--text-2); line-height:1.75;
}
.review-notice-icon { font-size:1.1rem; flex-shrink:0; margin-top:0.05rem; }
.review-notice strong {
  display:block; margin-bottom:0.2rem;
  font-size:0.6rem; font-family:var(--pixel);
  letter-spacing:0.07em; color:var(--green);
}

.form-wrap {
  max-width:700px; margin:0 auto;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:2.5rem; position:relative; overflow:hidden;
}
.form-wrap::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
}

.form-group { margin-bottom:1.5rem; }
.form-label {
  display:block; font-size:0.82rem; font-weight:600;
  color:var(--text-2); letter-spacing:0.04em; margin-bottom:0.5rem;
}
.req { color:var(--green); margin-left:2px; }
.form-hint { font-size:0.78rem; color:var(--text-3); font-style:italic; margin-top:0.3rem; display:block; }

.form-control {
  width:100%; padding:0.8rem 1.1rem;
  background:var(--bg-3); border:1px solid var(--border-2);
  color:var(--text); border-radius:var(--radius);
  font-family:var(--sans); font-size:0.9rem;
  transition:border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease);
}
.form-control::placeholder { color:var(--text-3); }
.form-control:focus {
  outline:none; border-color:var(--green-muted);
  box-shadow:0 0 0 3px var(--green-glow);
}
.form-control:user-invalid {
  border-color:var(--danger); box-shadow:0 0 0 2px rgba(248,113,113,0.18);
}
/* Fallback for older browsers */
.form-control:invalid:not(:placeholder-shown):not(:focus) {
  border-color:var(--danger); box-shadow:0 0 0 2px rgba(248,113,113,0.18);
}
textarea.form-control { resize:vertical; min-height:120px; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.radio-group { display:flex; gap:1.5rem; margin-top:0.35rem; flex-wrap:wrap; }
.radio-opt {
  display:flex; align-items:center; gap:0.55rem;
  cursor:pointer; font-size:0.88rem; color:var(--text-2);
}
.radio-opt input { accent-color:var(--green); width:1em; height:1em; }

/* Submit button: green instead of gold */
.submit-btn {
  width:100%; padding:1rem;
  background: linear-gradient(135deg, rgba(74,222,128,0.12), rgba(74,222,128,0.06));
  border: 1px solid rgba(74,222,128,0.4);
  color: var(--green);
  font-family:var(--pixel); font-size:0.52rem;
  letter-spacing:0.1em; cursor:pointer; border-radius:var(--radius);
  transition:var(--transition); text-transform:uppercase;
  position:relative; overflow:hidden;
}
.submit-btn::after {
  content:''; position:absolute; top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);
  transition:left 0.55s var(--ease);
}
.submit-btn:hover::after { left:100%; }
.submit-btn:hover {
  background: var(--green);
  color: var(--bg);
  box-shadow: 0 0 26px rgba(74,222,128,0.4);
}
.submit-btn:disabled { opacity:0.4; cursor:not-allowed; }

.form-feedback {
  display:none; margin-top:1rem; text-align:center;
  font-size:0.85rem; padding:0.8rem;
  border-radius:var(--radius); font-weight:500;
}
.form-feedback.show { display:block; }
.form-feedback.success {
  background:rgba(74,222,128,0.08); border:1px solid var(--green-muted); color:var(--green);
}
.form-feedback.error {
  background:rgba(248,113,113,0.08); border:1px solid var(--danger); color:var(--danger);
}


/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  margin-top:auto;
  background:var(--bg-2);
  border-top:1px solid var(--border);
}

.footer-inner-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:3rem; padding:3.5rem 0 2.5rem;
}
.footer-brand .footer-logo {
  font-family:var(--pixel); font-size:clamp(0.6rem,1vw,0.75rem);
  color:var(--green); display:block; margin-bottom:0.85rem;
  text-shadow:0 0 16px rgba(74,222,128,0.5);
}
.footer-brand p { font-size:clamp(0.8rem,1vw,0.9rem); color:var(--text-2); line-height:1.8; max-width:320px; }

.footer-col h4 {
  font-size:clamp(0.7rem,1vw,0.8rem); font-weight:700;
  color:var(--text); letter-spacing:0.1em;
  text-transform:uppercase; margin-bottom:1rem;
}
.footer-col ul { list-style:none; padding:0; }
.footer-col li { margin-bottom:0.6rem; }
.footer-col a {
  font-size:clamp(0.8rem,1vw,0.9rem); color:var(--text-2);
  text-decoration:none; transition:color var(--dur-base) var(--ease);
}
.footer-col a:hover { color:var(--green); }

.footer-bottom-bar { border-top:1px solid var(--border); }
.footer-bottom-inner {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; padding:1.2rem 0; gap:0.75rem;
}
.footer-bottom-inner small { font-size:0.78rem; color:var(--text-3); }


/* ============================================================
   SERVER PREVIEW CARDS (homepage)
   ============================================================ */
.srv-edition-tabs { display:flex; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.srv-etab {
  padding:0.5rem 1.1rem; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--bg-card);
  color:var(--text-2); font-size:0.78rem; font-family:var(--mono);
  cursor:pointer; transition:var(--transition); white-space:nowrap;
}
.srv-etab:hover { border-color:var(--cyan); color:var(--cyan); }
.srv-etab.active { background:var(--cyan-soft); border-color:var(--cyan); color:var(--cyan); }

.srv-preview-list { display:flex; flex-direction:column; gap:0.6rem; }
.srv-preview-card {
  display:flex; align-items:center; gap:0.9rem;
  padding:0.9rem 1.1rem; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  text-decoration:none; color:inherit;
  transition:var(--transition);
}
.srv-preview-card:hover {
  border-color:var(--cyan); background:var(--bg-elevated);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.4),0 0 0 1px rgba(56,189,248,0.15);
}
.srv-icon {
  font-size:1.6rem; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; background:var(--bg-3);
  border:1px solid var(--border-2); border-radius:var(--radius); overflow:hidden;
}
.srv-icon img { width:100%; height:100%; object-fit:cover; }
.srv-info { flex:1; min-width:0; }
.srv-name-row { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.15rem; }
.srv-name {
  font-weight:600; font-size:0.92rem; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px;
}
.srv-ip { font-family:var(--mono); font-size:0.72rem; color:var(--text-3); margin-bottom:0.3rem; }
.srv-desc { font-size:0.8rem; color:var(--text-2); line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:0.35rem; }
.srv-tags { display:flex; gap:0.3rem; flex-wrap:wrap; align-items:center; }
.srv-tag {
  background:var(--bg-elevated); border:1px solid var(--border-2);
  color:var(--text-2); font-size:0.65rem;
  padding:0.1rem 0.45rem; border-radius:4px; font-family:var(--mono);
}
.srv-version { font-family:var(--mono); font-size:0.65rem; color:var(--cyan-dim); }
.srv-badge {
  font-family:var(--mono); font-size:0.58rem; letter-spacing:0.06em;
  padding:0.15rem 0.45rem; border-radius:4px; font-weight:600; flex-shrink:0;
}
.srv-badge-java    { background:rgba(74,222,128,0.12); color:var(--green); border:1px solid rgba(74,222,128,0.3); }
.srv-badge-bedrock { background:rgba(74,222,128,0.12); color:var(--green); border:1px solid rgba(74,222,128,0.3); } /* was gold */
.srv-arrow { color:var(--text-3); font-size:1rem; flex-shrink:0; transition:transform var(--dur-fast) var(--ease),color var(--dur-fast); }
.srv-preview-card:hover .srv-arrow { transform:translateX(4px); color:var(--cyan); }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
  .footer-inner-grid { grid-template-columns:1.5fr 1fr; gap:2.5rem; }
  .footer-brand p { max-width:100%; }
}

@media (max-width:768px) {
  .mobile-menu-toggle { display:flex; }

  .main-nav {
    position:fixed; top:68px; left:0; right:0;
    background:rgba(13,17,23,0.98); backdrop-filter:blur(24px);
    padding:1.5rem; visibility:hidden; opacity:0; pointer-events:none;
    transition:opacity var(--dur-base) var(--ease),visibility var(--dur-base) var(--ease);
    border-bottom:1px solid var(--border); z-index:199;
  }
  .main-nav.open { visibility:visible; opacity:1; pointer-events:auto; }
  .main-nav ul { flex-direction:column; gap:1.2rem; align-items:stretch; }
  .main-nav a { display:block; text-align:center; padding:0.5rem 0; }
  .nav-cta { text-align:center; }

  .skin-layout      { grid-template-columns:1fr; }
  .download-layout  { grid-template-columns:1fr; text-align:center; }
  .form-row         { grid-template-columns:1fr; gap:1rem; }
  .section-head-row { flex-direction:column; align-items:flex-start; }
  .view-all-link    { white-space:normal; }
  .dl-box           { width:100%; }
  .footer-inner-grid { grid-template-columns:1fr; gap:2rem; text-align:center; }
  .footer-brand { display:flex; flex-direction:column; align-items:center; }
  .footer-col ul { display:flex; flex-direction:column; align-items:center; }
  .footer-bottom-inner { flex-direction:column; text-align:center; }

  .srv-name { max-width:130px; }
  .srv-desc { display:none; }
  .srv-preview-card { padding:0.75rem 0.85rem; }
}

@media (max-width:480px) {
  .footer-inner-grid { padding:2.5rem 0 2rem; gap:1.5rem; }
  .footer-brand p { font-size:0.8rem; }
  .footer-col a { font-size:0.8rem; }
  .footer-bottom small { font-size:0.7rem; }
  .skin-cta { flex-direction:column; }
  .skin-cta-visual { width:100%; height:160px; border-right:none; border-bottom:1px solid var(--border); }
}

body.menu-open { overflow:hidden; }



@media (forced-colors:active) {
  .btn-primary { forced-color-adjust:none; }
  .card,.mod-card { border:1px solid ButtonText; }
}

@media (min-width:1400px) {
  .footer-inner-grid { max-width:1200px; margin:auto; }
}


/* ============================================================
   EXTRA VISUAL POLISH
   ============================================================ */
.section-head {
  text-align:center;
  margin-bottom:2.5rem;
  position:relative;
}

.download-text { display:flex; flex-direction:column; justify-content:center; }

/* Left border accents on section headings */
.section-head-row::before {
  content:''; position:absolute; left:-1.5rem; top:0; bottom:0;
  width:3px; border-radius:999px;
  background:linear-gradient(180deg,var(--green),transparent);
}
#servers  .section-head-row::before { background:linear-gradient(180deg,var(--cyan),transparent); }
#skins    .section-head-row::before { background:linear-gradient(180deg,var(--purple),transparent); }
/* mods: green instead of amber */
#mods     .section-head-row::before { background:linear-gradient(180deg,var(--green),transparent); }
#download .section-head-row::before { background:linear-gradient(180deg,var(--cyan),transparent); }
/* upload: green instead of gold */
#upload   .section-head-row::before { background:linear-gradient(180deg,var(--green),transparent); }

/* Mods section background — green tint instead of amber/gold */
#mods.section-alt::before {
  background:
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(74,222,128,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 20% 50%, rgba(74,222,128,0.03) 0%, transparent 60%);
}

.hero-scroll-cue {
  position: absolute;
  bottom: clamp(1.75rem, 5vh, 3rem);
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  width: -moz-fit-content; /* Firefox fallback */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  animation: fadeUp 0.9s 0.75s var(--ease) both;
  transition: opacity 0.2s ease;
  text-align: center;
}


/* ============================================================
   MOBILE SKIN SCROLL STRIP
   ============================================================ */
.skin-grid-desktop { display:grid; }
.skin-scroll-strip  { display:none; }

@media (max-width: 768px) {
  .skin-grid-desktop { display:none !important; }
  .skin-scroll-strip  { display:block; }

  .skin-scroll-strip {
    background: var(--bg-card);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
  }
  .skin-scroll-strip::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 48px;
    background: linear-gradient(to right, transparent, var(--bg-card));
    pointer-events: none;
    z-index: 2;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }

  .skin-strip-inner {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 1rem;
    gap: 0.75rem;
  }
  .skin-strip-inner::-webkit-scrollbar { display: none; }

  .skin-strip-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    scroll-snap-align: start;
    text-decoration: none;
    color: var(--text-2);
    font-size: 0.68rem;
    text-align: center;
    width: 72px;
    transition: var(--transition);
  }
  .skin-strip-card:hover { color: var(--purple); }
  .skin-strip-card:active { transform: scale(0.96); }

  .skin-strip-img {
    width: 72px;
    height: 72px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color var(--dur-base) var(--ease);
  }
  .skin-strip-card:hover .skin-strip-img {
    border-color: rgba(167,139,250,0.5);
    box-shadow: 0 4px 14px rgba(167,139,250,0.18);
  }
  .skin-strip-img img {
    width: 72%;
    height: 72%;
    object-fit: contain;
    image-rendering: pixelated;
  }

  .skin-gallery {
    border: none;
    background: transparent;
    padding: 0;
  }
  .skin-gallery::before { display: none; }
}

/* Hytale seed card placeholder */
.hytale-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; background:var(--bg-3);
}

select.form-control option { background:var(--bg-3); color:var(--text); }


/* ============================================================
   INTRO SECTION
   ============================================================ */
.intro-section { padding-top:2rem !important; padding-bottom:2rem !important; }

.breadcrumb-nav { margin-bottom:0.5rem; }
.breadcrumb-list {
  list-style:none; padding:0; margin:0;
  display:flex; gap:0.5rem;
  font-size:0.78rem; opacity:0.5;
}
.breadcrumb-list a { text-decoration:none; }

.toc-nav {
  margin-bottom:2rem;
  background:rgba(255,255,255,0.03);
  border-left:3px solid var(--green);
  padding:1rem 1.25rem;
  border-radius:0 8px 8px 0;
}
.toc-list {
  list-style:decimal; padding-left:1.25rem; margin:0;
  display:flex; flex-direction:column; gap:0.4rem;
}
.toc-list a { font-size:0.88rem; opacity:0.75; text-decoration:none; }
.toc-list a:hover { opacity:1; text-decoration:underline; }

.intro-text-grid {
  display:grid;
  grid-template-columns:1fr 230px;
  gap:2.5rem; align-items:start;
}
.intro-text-block p { line-height:1.8; font-size:0.93rem; opacity:0.85; margin-bottom:0.75rem; }

.intro-quick-links {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-lg);
  padding:1.25rem;
  position:sticky; top:80px;
}
.intro-quick-links ul {
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:0.6rem;
}
.intro-quick-links a { font-size:0.85rem; opacity:0.8; display:block; padding:0.2rem 0; }
.intro-quick-links a:hover { opacity:1; }

@media (max-width:768px) {
  .intro-text-grid { grid-template-columns:1fr; }
  .intro-quick-links { display:none; }
}


/* ============================================================
   FAQ — <details> accordion
   ============================================================ */
.faq-list {
  max-width:780px; margin:0 auto;
  display:flex; flex-direction:column; gap:0.75rem;
}
.faq-item {
  border:1px solid var(--border-2);
  border-radius:12px;
  overflow:hidden;
  transition:border-color 0.2s ease;
  background:var(--bg-2);
}
.faq-item:hover   { border-color:rgba(74,222,128,0.3); }
.faq-item[open]   { border-color:rgba(74,222,128,0.4); }

.faq-q {
  padding:1.15rem 1.5rem;
  cursor:pointer; font-weight:600; font-size:0.95rem;
  list-style:none;
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; color:var(--text); user-select:none;
  transition:color 0.2s ease;
}
.faq-q:hover { color:var(--green); }
.faq-q::-webkit-details-marker { display:none; }
.faq-q::after {
  content:'+'; font-size:1.3rem; font-weight:300;
  opacity:0.55; flex-shrink:0;
  transition:transform 0.2s ease, opacity 0.2s ease;
  line-height:1;
}
.faq-item[open] .faq-q::after { content:'−'; opacity:0.8; color:var(--green); }

.faq-a {
  padding:1rem 1.5rem 1.25rem;
  font-size:0.9rem; line-height:1.7;
  color:var(--text-2); border-top:1px solid var(--border);
}
.faq-a a       { color:var(--green); }
.faq-a a:hover { text-decoration:underline; }


/* ============================================================
   WHY SECTION — trust signals
   ============================================================ */
.why-section { background:var(--bg-2); }

.why-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.25rem;
}
.why-card {
  background:var(--bg-3);
  border:1px solid var(--border-2);
  border-radius:14px;
  padding:1.75rem 1.5rem;
  transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position:relative; overflow:hidden;
}
.why-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  opacity:0; transition:opacity 0.2s ease;
}
.why-card:hover {
  transform:translateY(-4px);
  border-color:rgba(74,222,128,0.25);
  box-shadow:0 12px 40px rgba(0,0,0,0.3);
}
.why-card:hover::before { opacity:1; }

.why-icon { font-size:1.75rem; display:block; margin-bottom:0.75rem; line-height:1; }
.why-title { font-size:0.95rem; font-weight:700; color:var(--text); margin:0 0 0.6rem; letter-spacing:0.01em; }
.why-card p { font-size:0.875rem; color:var(--text-2); line-height:1.65; margin:0; }

@media (max-width:640px) {
  .why-grid { grid-template-columns:1fr; gap:0.85rem; }
  .why-card  { padding:1.35rem 1.25rem; }
}


/* ============================================================
   SCROLL FADE-IN
   ============================================================ */
.fade-on-scroll {
  opacity:0;
  transform:translateY(22px);
  transition:opacity 0.55s ease, transform 0.55s ease;
}
.fade-on-scroll.is-visible { opacity:1; transform:translateY(0); }
.why-card.fade-on-scroll { transition-delay:calc(var(--i,0) * 0.07s); }


/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
  font-size:0.72rem; color:var(--text-3);
  text-decoration:none; letter-spacing:0.1em;
  border:1px solid var(--border);
  padding:0.3rem 0.75rem; border-radius:999px;
  transition:color 0.2s, border-color 0.2s;
  white-space:nowrap;
}
.back-to-top:hover { color:var(--green); border-color:var(--green); }

.footer-bottom-inner {
  display:flex; flex-wrap:wrap; gap:0.75rem;
  align-items:center; justify-content:space-between;
}


/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .hero-particles, .hero-scroll-cue, .mobile-menu-toggle,
  .skip-link, .site-header, .back-to-top { display:none !important; }
  .hero-h1 { font-size:1.6rem !important; color:#000 !important; }
  .section { page-break-inside:avoid; }
  a[href]::after { content:" (" attr(href) ")"; font-size:0.7rem; }
  .intro-quick-links { display:block !important; position:static !important; }
}

/* ============================================================
   HIGH CONTRAST
   ============================================================ */
@media (forced-colors:active) {
  .why-card, .faq-item, .toc-nav { border:2px solid ButtonText; }
  .hero-h1, .section-title { forced-color-adjust:none; color:ButtonText; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce) {
  .fade-on-scroll, .hero-h1, .hero-tagline,
  .why-card, .btn-skin-editor, .back-to-top {
    animation:none !important;
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}

/* ── Intro section link colours ──────────────────────────── */
.breadcrumb-list a,
.toc-list a,
.intro-text-block a,
.intro-quick-links ul a {
  color: var(--green);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease);
}
.breadcrumb-list a:hover,
.toc-list a:hover,
.intro-text-block a:hover,
.intro-quick-links ul a:hover {
  color: #a7f3c9;
  text-decoration: underline;
}