/* ============================================================
   Realm SMP — Main Stylesheet
   Modern boreal / earth-tone theme. Light + dark via prefers-color-scheme.
   Edit the :root / [data-theme] blocks to retheme.
   ============================================================ */

/* ============================================================
   Pastel Minecraft-inspired / liquid-glass theme.
   Bright, airy, sunlit-village feel. Cream & white dominate;
   soft pastel earth tones accent.
   Palette: pastel clay #D4B5A0, pastel sage #C5D9C1,
   pastel ochre #E8D4B8, soft brown #8B7355 (sparingly),
   muted grass #B8D887, cream #FAF8F5.
   ============================================================ */

/* ── Bold Minecraft theme (default) ─────────────────────────────────────── */
:root {
  /* The page background is a colored earth-tone gradient (set on body).
     "Surfaces" are now liquid-glass tints over that gradient — no solid
     white/cream backgrounds anywhere. */
  /* Proven dark-glass recipe: panels are a translucent LIGHT (white) tint
     over a genuinely dark background, so cards read lighter than the page
     and text stays high-contrast. */
  --color-bg:           transparent;
  --color-bg-alt:       transparent;
  --color-surface:      rgba(255, 255, 255, 0.08);
  --color-surface-2:    rgba(255, 255, 255, 0.05);
  --color-border:       rgba(255, 255, 255, 0.16);
  --color-border-light: rgba(255, 255, 255, 0.24);

  /* Text — neutral cool-white, high contrast on dark glass */
  --color-text:         #f4f5f7;
  --color-text-muted:   #c3c7d0;
  --color-text-faint:   #9aa0ab;
  --color-text-dark:    #1a1c22;

  /* Accent — cool indigo (single accent per view) */
  --color-accent:       #7c8cff;
  --color-accent-hover: #97a4ff;
  --color-accent-dim:   rgba(124, 140, 255, 0.16);

  /* Neutral / cool palette — no earth tones. Aliases kept so existing
     rules resolve; they now map to the cool accent + neutral greys. */
  --moss:        #7c8cff;
  --moss-dark:   #5f6fe0;
  --bronze:      #7c8cff;
  --brown:       #8b8f9a;
  --warm-grey:   #9aa0ab;
  --grass:       #7c8cff;
  --grass-dark:  #5f6fe0;
  --gold:        #7c8cff;
  --dirt:        #8b8f9a;
  --dirt-dark:   #6f7480;
  --stone:       #8b8f9a;
  --stone-dark:  #5a5e68;
  --clay:        #8b8f9a;
  --sage:        #7c8cff;
  --cream:       #7c8cff;
  --deep-brown:  #5a5e68;

  /* Feature / dimension accents (cool, readable on dark glass) */
  --mc-grass:    #6fce9f;
  --mc-dirt:     #d9b06f;
  --mc-redstone: #e07a8a;
  --mc-diamond:  #6fc7d9;
  --mc-lapis:    #7c8cff;
  --mc-gold:     #e0c46f;

  /* Semantic */
  --color-success:      #57c98a;
  --color-danger:       #e07a8a;
  --color-warning:      #e0c46f;
  --color-info:         #7c8cff;
  --color-discord:      #5865f2;

  /* Dimensions */
  --color-overworld:    #57c98a;
  --color-nether:       #e07a8a;
  --color-end:          #b18cff;

  /* Glass tokens — translucent light over dark bg (the working recipe) */
  --glass-bg:      rgba(255, 255, 255, 0.08);
  --glass-bg-2:    rgba(255, 255, 255, 0.12);
  --glass-border:  rgba(255, 255, 255, 0.18);
  --glass-blur:    16px;

  /* Text shadow presets — minimal, subtle */
  --tshadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --tshadow-md: 0 2px 4px rgba(0,0,0,0.3);
  --tshadow-lg: 0 2px 4px rgba(0,0,0,0.3);

  /* Chamfer — kept for legacy references (unused visually) */
  --chamfer:    10px;
  --chamfer-sm: 6px;

  /* Typography — Space Grotesk for headings, Inter for body */
  --font-body:    'Inter', 'Segoe UI', -apple-system, system-ui, sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'SF Mono', 'Consolas', 'Courier New', monospace;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  22px;
  --space-xl:  34px;
  --space-2xl: 52px;

  /* Radii — refined, rounded (not bubbly) */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  18px;

  /* Shadows — refined, restrained depth */
  --shadow-sm:  0 4px 16px rgba(0,0,0,0.18);
  --shadow-md:  0 6px 20px rgba(0,0,0,0.25);
  --shadow-lg:  0 10px 28px rgba(0,0,0,0.3);
  --glow-accent: 0 6px 18px rgba(124,140,255,0.4);

  --nav-height: 64px;
}

/* ── Dark theme ─────────────────────────────────────────────────────────── */
/* The bold Minecraft look is intentionally colorful in both modes. In dark
   mode we only deepen the glass tints slightly for a touch more contrast. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface:   rgba(255, 255, 255, 0.10);
    --color-surface-2: rgba(255, 255, 255, 0.07);
    --color-border:    rgba(255, 255, 255, 0.22);

    --glass-bg:      rgba(255, 255, 255, 0.10);
    --glass-bg-2:    rgba(255, 255, 255, 0.14);
    --glass-border:  rgba(255, 255, 255, 0.2);
  }
}

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

html { scroll-behavior: smooth; }

body {
  /* PAGE-WIDE neutral dark slate gradient — genuinely dark so translucent
     white glass panels read lighter and text stays high-contrast. */
  background: linear-gradient(135deg, #12141a 0%, #1a1d26 50%, #15171f 100%) fixed;
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Clear the floating navbar: its top offset (16px) plus its height */
  padding-top: calc(16px + var(--nav-height) + var(--space-md));
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-accent-hover); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  line-height: 1.25;
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 700;
  text-shadow: var(--tshadow-sm);
}
h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
h2 { font-size: clamp(1.3rem, 3.2vw, 1.9rem); }
h3 { font-size: 1.2rem; }

code {
  background: var(--color-surface-2);
  color: var(--color-accent-hover);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.88em;
}

/* ── Layout helpers ─────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-narrow {
  max-width: 740px;
}

.main-content {
  flex: 1;
  padding: var(--space-xl) 0 var(--space-2xl);
}
/* Hero is now a self-contained floating card; no negative pull needed. */
.main-content > .hero:first-child { margin-top: 0; }

.section       { padding: var(--space-lg) 0; }
.section-alt   { background: rgba(255, 255, 255, 0.03); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

.section-title {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: var(--space-sm) auto 0;
  border-radius: 2px;
  background: var(--color-accent);
}

/* ── Navigation — floating liquid-glass, chamfered ──────────────────────── */
/* Floats by default: fixed, detached from the viewport edge with padding
   from the top, chamfered corners and subtle glass. Stays floating on scroll,
   tightening slightly for a compact feel. */
.navbar {
  position: fixed;
  top: 16px;           /* floats with padding from the viewport edge */
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - 40px);
  max-width: 1120px;
  height: auto;        /* let the inner bar define the height so padding
                          doesn't eat into it (box-sizing: border-box) */
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
  transition: padding 0.35s cubic-bezier(0.22,1,0.36,1), top 0.35s ease;
}

/* On scroll, tighten the float */
.navbar.scrolled {
  top: 8px;            /* floats higher when scrolling */
}

.nav-inner {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  height: var(--nav-height);   /* fixed height — same on load and scroll */
  display: flex;
  align-items: center;
  gap: var(--space-lg);

  /* Dark liquid glass */
  background: rgba(18, 20, 27, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: max-width 0.35s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}

/* Scrolled state: added by JS — glass firms up (more opaque). */
.navbar.scrolled .nav-inner {
  max-width: 1060px;
  background: rgba(14, 16, 22, 0.85);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  flex-shrink: 0;
  padding-right: var(--space-md);
}
.nav-logo      { font-size: 1.3rem; color: var(--bronze); }
.nav-site-name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--bronze);
  letter-spacing: 0.01em;
  text-shadow: var(--tshadow-sm);
}
.nav-logo-img {
  height: 34px;
  width: auto;
  display: block;
  /* Soft shadow so it reads on the dark glass */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2px;
  margin-left: auto;
  align-items: center;
}

.nav-links a {
  color: rgba(240, 240, 245, 0.82);   /* light on dark glass */
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-links a:hover,
.nav-links a.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* Discord CTA — filled accent so it stands apart from nav items */
.nav-links a.nav-cta {
  background: var(--color-discord);
  color: #fff;
}
.nav-links a.nav-cta:hover { background: #4752c4; color: #fff; }

/* Login — outlined pill */
.nav-links a.nav-login {
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.nav-links a.nav-login:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.1); }

/* ── Nav dropdowns ───────────────────────────────────────────────────────── */
.nav-dropdown { position: relative; }
.nav-drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: rgba(240, 240, 245, 0.82);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}
.nav-drop-toggle:hover { color: #fff; background: rgba(255,255,255,0.12); }
.nav-dropdown.active > .nav-drop-toggle { color: #fff; background: rgba(255,255,255,0.1); }
.nav-caret { font-size: 0.7rem; opacity: 0.8; transition: transform 0.2s; }
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }

.nav-drop-menu {
  list-style: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  background: rgba(14, 16, 22, 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  display: none;
  z-index: 200;
}
.nav-dropdown.open .nav-drop-menu { display: block; }
.nav-drop-menu li a {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  color: rgba(240, 240, 245, 0.85);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}
.nav-drop-menu li a:hover { background: rgba(255,255,255,0.12); color: #fff; }

.nav-member {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.nav-member-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(240, 240, 245, 0.9);
  white-space: nowrap;
}
.nav-logout-form { margin: 0; }
.nav-logout-btn {
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.nav-logout-btn:hover { color: #fff; border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.15); }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-muted);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

/* ── Flash messages ─────────────────────────────────────────────────────── */
.flash-container {
  position: sticky;
  top: calc(16px + var(--nav-height) + var(--space-md));
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-lg);
  font-size: 0.9rem;
  font-weight: 500;
}
.flash-success { background: #eef6e6; color: #4f7a3a; border-left: 4px solid var(--color-success); }
.flash-error   { background: #fbeeea; color: #a85647; border-left: 4px solid var(--color-danger); }
.flash-warning { background: #fbf4e2; color: #937225; border-left: 4px solid var(--color-warning); }
.flash-info    { background: #edf1fa; color: #4f629e; border-left: 4px solid var(--color-info); }

.flash-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.2rem;
  opacity: 0.7;
  padding: 0 var(--space-xs);
  line-height: 1;
}
.flash-close:hover { opacity: 1; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 11px 24px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
              border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
/* Lift only — no scale (scale reads as playful) */
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn-primary {
  /* Solid indigo gradient — no blur */
  background: linear-gradient(135deg, #7c8cff, #5f6fe0);
  color: #ffffff;
  border-color: rgba(124, 140, 255, 0.9);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  text-shadow: var(--tshadow-sm);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #8f9dff, #6f7ff0);
  box-shadow: var(--glow-accent);
  color: #ffffff;
}

.btn-outline {
  /* Liquid glass — neutral light tint, subtle border */
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.3);
  text-shadow: var(--tshadow-sm);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-outline:hover { background: rgba(124, 140, 255, 0.16); color: var(--color-accent-hover); border-color: var(--color-accent); }

.btn-ghost {
  background: rgba(245, 245, 240, 0.08);
  color: var(--color-text);
  border-color: rgba(245, 245, 240, 0.3);
  text-shadow: var(--tshadow-sm);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(245, 245, 240, 0.16); color: var(--bronze); border-color: rgba(196,147,74,0.5); }

.btn-discord {
  background: var(--color-discord);
  color: #fff;
  border-color: var(--color-discord);
}
.btn-discord:hover { background: #4752c4; color: #fff; }

.btn-success { background: linear-gradient(135deg, #57c98a, #3fa66d); color: #0e1a13; border-color: #3fa66d; text-shadow: none; box-shadow: 0 6px 16px rgba(0,0,0,0.22); }
.btn-success:hover { background: linear-gradient(135deg, #67d69a, #4bb478); color: #0e1a13; }
.btn-danger  { background: linear-gradient(135deg, #e07a8a, #c25666);  color: #2a0f14; border-color: #c25666; text-shadow: none; box-shadow: 0 6px 16px rgba(0,0,0,0.22); }
.btn-danger:hover  { background: linear-gradient(135deg, #e88b99, #cd6474); color: #2a0f14; }

.btn-sm  { padding: 6px 14px; font-size: 0.82rem; }
.btn-lg  { padding: 14px 28px; font-size: 1rem; }
.btn-xs  { padding: 3px 10px; font-size: 0.78rem; border-width: 1px; }
.btn-full { width: 100%; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* Hero: a background-image card constrained to the navbar/content width,
   centered, with a dark overlay so text stays readable. */
.hero {
  position: relative;
  overflow: hidden;
  padding: 80px 20px;
  /* Match the navbar / content column width instead of near edge-to-edge */
  width: calc(100% - 40px);
  max-width: 1120px;
  margin: 20px auto;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}
/* Background photo + readability overlay behind the hero content */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(18, 20, 26, 0.62), rgba(18, 20, 26, 0.72)),
    url("../images/background.jpg");
  background-size: cover;
  background-position: center;
  border-radius: inherit;
}

.hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }

/* ── Page banner (reusable hero-style header for interior pages) ──────────── */
.page-banner {
  position: relative;
  overflow: hidden;
  padding: 48px 28px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-xl);
  text-align: left;
}
.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(18, 20, 26, 0.58), rgba(18, 20, 26, 0.72)),
    var(--banner-image, none);
  background-size: cover;
  background-position: center;
  border-radius: inherit;
}
.page-banner > * { position: relative; z-index: 1; }
.page-banner h1 { color: #fff; margin-bottom: 6px; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.page-banner .page-subtitle { color: rgba(240, 240, 245, 0.85); margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.page-banner .page-banner-actions { margin-top: var(--space-md); display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* Per-page background images */
.banner-bluemap    { --banner-image: url("../images/bluemap-bg.jpg"); }
.banner-shops      { --banner-image: url("../images/shop-bg.jpg"); }
.banner-nether     { --banner-image: url("../images/nether-coords.jpg"); }
.banner-overworld  { --banner-image: url("../images/overworld-coords.png"); }

.hero-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
  background: rgba(124, 140, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(124, 140, 255, 0.35);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: var(--space-md);
  text-shadow: var(--tshadow-sm);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 7vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--color-text);
  text-shadow: var(--tshadow-md);
  margin-bottom: var(--space-md);
}

.hero-subtitle {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto var(--space-lg);
  line-height: 1.7;
  text-shadow: var(--tshadow-sm);
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* Preseason hero: big launch date, focused CTAs */
.hero-preseason { padding-top: calc(var(--nav-height) + var(--space-2xl)); padding-bottom: var(--space-2xl); }
.hero-preseason-label {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-md);
}
.hero-preseason-date {
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

/* Countdown clock */
.countdown {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 var(--space-sm);
  flex-wrap: wrap;
}
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 74px;
  padding: var(--space-md) var(--space-sm);
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.countdown-num {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.countdown-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.countdown-localtime {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.hero-preseason-explore {
  margin-top: var(--space-lg);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.hero-preseason-explore a { font-weight: 700; color: var(--color-accent); }

/* ── Minecraft EXP-bar countdown ─────────────────────────────────────────── */
.exp-countdown {
  max-width: 620px;
  margin: var(--space-lg) auto var(--space-xl);
  text-align: center;
  image-rendering: pixelated;   /* keep pixel edges crisp */
}
.exp-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #dfe6cf;
  margin: 0 0 14px;
  /* Minecraft-style hard drop shadow (offset, not blurred) */
  text-shadow: 2px 2px 0 rgba(0,0,0,0.7);
}
.exp-number {
  position: relative;
  z-index: 1;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1rem, 3.5vw, 1.6rem);
  line-height: 1;
  color: #80FF20;                                   /* Minecraft XP green */
  /* Hard drop shadow to the bottom-right, like the in-game level number */
  text-shadow: 2px 2px 0 rgba(0,0,0,0.75);
  margin-bottom: -8px;                              /* overlap the bar */
}

/* The bar: dark beveled track with pixel segment notches */
.exp-bar {
  position: relative;
  height: 12px;
  background:
    linear-gradient(#242424 0 45%, #151515 45% 100%);   /* subtle 2-tone track */
  border: 2px solid #000;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.10),
    inset -1px -1px 0 rgba(0,0,0,0.6);
  overflow: hidden;
}
.exp-fill {
  height: 100%;
  width: 0;                                            /* animated to target */
  /* Two-tone green: brighter top band, deeper bottom — matches the game bar */
  background: linear-gradient(#a6ff4d 0 45%, #62c81a 45% 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
  transition: width 0.75s ease-in;
}
/* Segment dividers drawn over the whole bar — fewer, wider sections */
.exp-notches {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    rgba(0,0,0,0.55) 0, rgba(0,0,0,0.55) 2px,
    transparent 2px, transparent calc(100% / 15)
  );
}
@media (prefers-reduced-motion: reduce) {
  .exp-fill { transition: none; }
}

/* Hero connect strip: IP + version */
.hero-connect {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}
.connect-ip, .connect-ver {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.connect-ip:hover, .connect-ver:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.connect-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-shadow: var(--tshadow-sm);
}
.connect-ip-value, .connect-ver span:last-child {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.95rem;
  text-shadow: var(--tshadow-sm);
}
.connect-ip { cursor: pointer; }
.connect-ip:hover { border-color: var(--bronze); }

/* ── Live status pill ────────────────────────────────────────────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 7px 16px 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  text-shadow: var(--tshadow-sm);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.status-pill .status-text strong { color: var(--bronze); }

.status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color-text-faint);
  flex-shrink: 0;
  position: relative;
}
.status-pill.is-online  { color: var(--color-text); }
.status-pill.is-online  .status-dot { background: var(--color-success); }
.status-pill.is-offline .status-dot { background: var(--color-danger); }

/* Pulsing ring on the online dot */
.status-pill.is-online .status-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--color-success);
  opacity: 0;
  animation: status-pulse 2s ease-out infinite;
}
@keyframes status-pulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .status-pill.is-online .status-dot::after { animation: none; }
}

/* ── Scroll reveal ───────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.reveal-in {
  opacity: 1;
  transform: none;
}

/* ── At-a-glance strip (consolidated homepage stats) ─────────────────────── */
.glance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.glance-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Translucent light glass over the dark page (working recipe) */
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: var(--space-md) var(--space-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.glance-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
  background: rgba(255, 255, 255, 0.12);
}
.glance-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--warm-grey);
  text-shadow: var(--tshadow-sm);
}
.glance-value {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.15;
  text-shadow: var(--tshadow-sm);
}
.glance-note  { font-size: 0.8rem; color: var(--color-text-muted); text-shadow: var(--tshadow-sm); }

/* ── Feature card tags (Minecraft-coloured) ──────────────────────────────── */
.feature-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: var(--space-sm);
  color: #1e2318;   /* dark text reads clearly on the light accent chips */
  text-shadow: none;
}
.feature-tag-grass    { background: var(--mc-grass); }
.feature-tag-redstone { background: var(--mc-redstone); color: #2e1512; }
.feature-tag-diamond  { background: var(--mc-diamond); color: #12211f; }
.feature-tag-lapis    { background: var(--mc-lapis); color: #161c30; }
.feature-tag-gold     { background: var(--mc-gold); color: #2e2410; }

/* ── Showcase feed (social-style vertical scroll) ────────────────────────── */
.feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 620px;
  margin: 0 auto;
}
.feed-post {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.feed-title { font-size: 1.25rem; font-weight: 800; margin-bottom: var(--space-md); }
.feed-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-md);
  background: var(--color-surface-2);
}
.feed-image img { width: 100%; height: auto; display: block; }
.feed-desc { color: var(--color-text-muted); line-height: 1.7; white-space: pre-line; }
.feed-date { font-size: 0.78rem; color: var(--color-text-faint); margin-top: var(--space-sm); }

/* ── Shop cards ──────────────────────────────────────────────────────────── */
.shop-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease;
}
.shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.shop-card-name  { font-size: 1.1rem; font-weight: 800; margin-bottom: 2px; }
.shop-card-owner { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: var(--space-xs); }
.shop-card-desc  { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: var(--space-xs); }
.shop-card-coords { font-size: 0.82rem; color: var(--color-text-faint); font-family: var(--font-mono); }
.shop-card-foot  { display: flex; align-items: center; justify-content: space-between; }
.shop-card-link  { font-size: 0.85rem; font-weight: 700; color: var(--color-accent-hover); }

/* ── BlueMap embed ───────────────────────────────────────────────────────── */
.map-embed {
  width: 100%;
  height: calc(100vh - var(--nav-height) - 180px);
  min-height: 420px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-surface-2);
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.map-fallback-note {
  font-size: 0.82rem;
  color: var(--color-text-faint);
  text-align: center;
  margin-top: var(--space-sm);
}

/* ── Home CTA ────────────────────────────────────────────────────────────── */
.home-cta {
  text-align: center;
  margin: 40px 20px;
  padding: 70px 20px;
  /* Translucent light glass with a subtle indigo wash for CTA emphasis */
  background:
    linear-gradient(135deg, rgba(124, 140, 255, 0.14), rgba(124, 140, 255, 0.06)),
    rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(124, 140, 255, 0.32);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}
.home-cta h2 { font-size: 2rem; letter-spacing: 0; text-shadow: var(--tshadow-md); }
.home-cta p { color: var(--color-text-muted); margin-bottom: var(--space-md); font-size: 1.05rem; text-shadow: var(--tshadow-sm); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Server info cards ───────────────────────────────────────────────────── */
.server-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}

.info-card {
  /* Translucent light glass over the dark page */
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: var(--space-lg);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.info-card:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.3);
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.11);
}

.info-card h3   { font-family: var(--font-body); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--warm-grey); margin-bottom: var(--space-sm); text-shadow: var(--tshadow-sm); }

.info-card-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-mono);
  text-shadow: var(--tshadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}
.info-card-note { font-size: 0.78rem; color: var(--color-text-muted); margin-top: var(--space-xs); text-shadow: var(--tshadow-sm); }

.copy-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 2px;
  transition: color 0.15s;
}
.copy-btn:hover { color: var(--bronze); }

/* ── Feature cards ───────────────────────────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
}

.feature-card {
  position: relative;
  /* Translucent light glass — dark page shows through the frost */
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 28px;
  transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}
.feature-card:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.3);
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.11);
}

.feature-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-text);
  text-shadow: var(--tshadow-sm);
  margin-bottom: var(--space-xs);
}
.feature-card p  { color: var(--color-text-muted); font-size: 0.875rem; margin-bottom: var(--space-md); line-height: 1.7; text-shadow: none; }
.feature-link    {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--bronze);
  transition: color 0.2s ease;
}
.feature-card:hover .feature-link { color: var(--color-accent-hover); }

/* ── Page header ─────────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}
.page-header h1 { margin-bottom: var(--space-xs); }
.page-subtitle  { color: var(--color-text-muted); font-size: 0.95rem; margin-top: var(--space-xs); }
.breadcrumb     { margin-bottom: var(--space-lg); }
.breadcrumb a, .breadcrumb-link {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  text-decoration: none;
}
.breadcrumb a:hover, .breadcrumb-link:hover { color: var(--color-accent-hover); }

/* ── Community / member grid ─────────────────────────────────────────────── */
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-md);
}

.member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.member-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  background: var(--glass-bg-2);
}

.member-head {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  image-rendering: pixelated;   /* keeps Minecraft skin faces crisp */
}

.member-name {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
  word-break: break-all;        /* long usernames won't overflow the card */
}

/* ── Builds grid ─────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.filter-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.filter-btn:hover { color: var(--color-text); border-color: var(--color-border-light); }
.filter-btn.active {
  background: var(--color-accent-dim);
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}

.builds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.build-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.build-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.build-card-link { display: block; text-decoration: none; color: inherit; }

.build-card-image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--color-surface-2);
}
.build-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.build-card:hover .build-card-image img { transform: scale(1.04); }

.build-card-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
}
.placeholder-label {
  font-size: 0.78rem;
  color: var(--color-text-faint);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.build-card-dimension {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dimension-overworld { background: var(--mc-grass);  color: #3f5233; }
.dimension-nether    { background: var(--mc-redstone); color: #7a3529; }
.dimension-end       { background: var(--color-end); color: #4a3a67; }

.build-card-body { padding: var(--space-md); }
.build-card-category {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  font-weight: 700;
  display: block;
  margin-bottom: var(--space-xs);
}
.build-card-title  { font-size: 1rem; font-weight: 700; margin-bottom: 2px; }
.build-card-author { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: var(--space-xs); }
.build-card-desc   { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.5; margin-bottom: var(--space-xs); }
.build-card-coords { font-size: 0.8rem; color: var(--color-text-faint); font-family: var(--font-mono); }
.builds-count      { color: var(--color-text-faint); font-size: 0.85rem; margin-top: var(--space-lg); }

/* ── Build detail ────────────────────────────────────────────────────────── */
.build-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 800px) {
  .build-detail {
    grid-template-columns: 1fr 420px;
    align-items: start;
  }
}

.gallery { display: flex; flex-direction: column; gap: var(--space-sm); }
.gallery-main {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-2);
  aspect-ratio: 16/10;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.gallery-thumbs {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.gallery-thumb {
  width: 72px; height: 54px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.7;
  transition: opacity 0.15s, border-color 0.15s;
}
.gallery-thumb:hover, .gallery-thumb.active {
  opacity: 1;
  border-color: var(--color-accent);
}

.gallery-placeholder {
  aspect-ratio: 16/10;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-faint);
}
.gallery-placeholder p { font-size: 0.9rem; }

.build-detail-body {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.build-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.build-detail-author { color: var(--color-text-muted); font-size: 0.9rem; margin-top: var(--space-xs); }

.build-detail-desc { margin-bottom: var(--space-lg); }
.build-detail-desc h2 { font-size: 1rem; margin-bottom: var(--space-sm); }
.build-detail-desc p  { color: var(--color-text-muted); }

.build-detail-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.meta-item   { display: flex; justify-content: space-between; font-size: 0.88rem; gap: var(--space-md); }
.meta-label  { color: var(--color-text-muted); flex-shrink: 0; }
.meta-value  { color: var(--color-text); font-weight: 600; text-align: right; }
.coords-value { font-family: var(--font-mono); }

.build-detail-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* ── Coordinates ─────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-lg);
}
.tab-btn {
  padding: var(--space-sm) var(--space-lg);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--color-text); text-decoration: none; }
.tab-btn.active { color: var(--color-accent-hover); border-bottom-color: var(--color-accent); }

.coords-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}
.search-form { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.search-form input[type="text"] { width: 220px; }

.coord-form-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-sm);
}
.coord-form-panel h2 { margin-bottom: var(--space-lg); font-size: 1.1rem; }

.table-wrapper { overflow-x: auto; }

.coords-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.coords-table th, .coords-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.coords-table th {
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  position: sticky;
  top: 0;
}
.coords-table tbody tr:hover { background: var(--color-surface); }
.coords-table .coords-desc { white-space: normal; max-width: 200px; color: var(--color-text-muted); }
.coords-name { font-weight: 600; white-space: normal; }
.coord-num   { font-family: var(--font-mono); text-align: right; }
.map-link    { font-size: 1.1rem; text-decoration: none; }
.coords-count { color: var(--color-text-faint); font-size: 0.85rem; margin-top: var(--space-md); }

/* ── Tags & badges ───────────────────────────────────────────────────────── */
.tag {
  display: inline-block;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
}
.tag-dir {
  background: var(--color-accent-dim);
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}
.wl-cmd {
  display: inline-block;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  margin-right: var(--space-xs);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
.badge-pending { background: var(--color-warning); color: #4a3a12; }
.badge-error   { background: var(--color-danger); color: #fff; }

/* Event log level pills + cells */
.log-level {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.log-info    { background: color-mix(in srgb, var(--color-info) 18%, transparent);    color: var(--color-info); }
.log-warning { background: color-mix(in srgb, var(--color-warning) 20%, transparent); color: var(--color-warning); }
.log-error   { background: color-mix(in srgb, var(--color-danger) 18%, transparent);  color: var(--color-danger); }
.log-detail  { max-width: 340px; white-space: normal; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.8rem; }
.log-when    { white-space: nowrap; color: var(--color-text-faint); font-size: 0.82rem; }

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.status-pending  { background: #fbf4e2; color: #937225; }
.status-approved { background: #eef6e6; color: #4f7a3a; }
.status-rejected { background: #fbeeea; color: #a85647; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

/* Notice callout (e.g. 18+ requirement) */
.notice {
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: 0.92rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.notice-strong {
  border-color: var(--color-accent);
  background: var(--color-accent-dim);
  color: var(--color-text);
}
.notice-strong strong { display: block; margin-bottom: 2px; }

/* Status checker */
.status-check-form {
  display: flex;
  gap: var(--space-md);
  align-items: flex-end;
  flex-wrap: wrap;
}
.status-result {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  font-size: 0.95rem;
  line-height: 1.6;
}
.status-result strong { display: block; margin-bottom: 2px; }
.status-result-pending  { border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 12%, transparent); }
.status-result-approved { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, transparent); }
.status-result-rejected { border-color: var(--color-danger);  background: color-mix(in srgb, var(--color-danger) 12%, transparent); }

/* Bulk whitelisted usernames copy box */
.bulk-usernames {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.5;
  resize: vertical;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* Rules list */
.rules-list {
  margin: var(--space-md) 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  color: var(--color-text-muted);
  font-size: 0.92rem;
}
.rules-list strong { color: var(--color-text); }

.form-section { margin-bottom: var(--space-xl); }
.form-section:last-of-type { margin-bottom: 0; }

.form-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-hover);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.form-group { display: flex; flex-direction: column; gap: 5px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-group-grow { flex: 1 1 auto; }

label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="password"],
select,
textarea {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 10px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(197,217,193,0.5);
}

select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a9080' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

textarea { resize: vertical; min-height: 90px; }

.required  { color: var(--color-danger); margin-left: 2px; }
.form-optional { color: var(--color-text-faint); font-weight: 400; }
.form-hint { font-size: 0.8rem; color: var(--color-text-faint); }

/* File input */
.file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xl);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.file-label:hover { border-color: var(--color-accent); background: var(--color-accent-dim); }
.file-label-text { font-size: 0.88rem; color: var(--color-text-muted); }
.file-label input[type="file"] { display: none; }

.file-preview {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.file-thumb {
  position: relative;
  width: 80px; height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-thumb-badge {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: color-mix(in srgb, var(--mc-grass) 92%, transparent);
  color: #3f5233;
  font-size: 0.65rem;
  font-weight: 700;
  text-align: center;
  padding: 1px;
}

.form-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: flex-end;
  padding-top: var(--space-lg);
  flex-wrap: wrap;
}

/* ── Empty & error states ────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
}
.empty-state h2 { margin-bottom: var(--space-sm); }
.empty-state p  { color: var(--color-text-muted); margin-bottom: var(--space-lg); }

.error-page {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
}
.error-code {
  display: block;
  font-size: 6rem;
  font-weight: 900;
  color: var(--color-accent-dim);
  line-height: 1;
  margin-bottom: var(--space-md);
}
.error-page h1 { margin-bottom: var(--space-sm); }
.error-page p  { color: var(--color-text-muted); margin-bottom: var(--space-lg); }

.success-page {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  max-width: 520px;
  margin: 0 auto;
}
.success-page h1 { margin-bottom: var(--space-md); }
.success-page p  { color: var(--color-text-muted); margin-bottom: var(--space-sm); }
.success-note    { font-size: 0.9rem; }
.success-actions { display: flex; gap: var(--space-md); justify-content: center; margin-top: var(--space-xl); flex-wrap: wrap; }

/* ── Admin ───────────────────────────────────────────────────────────────── */
.admin-login-wrap {
  display: flex;
  justify-content: center;
  padding: var(--space-2xl) 0;
}
.admin-login-card {
  width: 100%;
  max-width: 400px;
  text-align: center;
}
.admin-login-card h1 { margin-bottom: var(--space-sm); }
.admin-login-card .page-subtitle { margin-bottom: var(--space-xl); }

.admin-stats {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  text-align: center;
  flex: 1 1 140px;
}
.stat-number { display: block; font-size: 2.5rem; font-weight: 900; color: var(--color-accent-hover); }
.stat-label  { font-size: 0.82rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}
.setting-row strong { color: var(--color-text); }
.setting-row p { font-size: 0.85rem; color: var(--color-text-muted); margin: 2px 0 0; max-width: 60ch; }

.admin-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.admin-nav-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, transform 0.15s;
  position: relative;
}
.admin-nav-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.admin-nav-card strong { display: block; margin-bottom: 2px; }
.admin-nav-card p { font-size: 0.82rem; color: var(--color-text-muted); margin: 0; }
.admin-nav-card .badge { position: absolute; top: var(--space-sm); right: var(--space-sm); }

.admin-section { margin-top: var(--space-xl); }
.admin-section h2 { margin-bottom: var(--space-md); font-size: 1.1rem; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.admin-table th, .admin-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.admin-table th {
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  white-space: nowrap;
}
.admin-table tbody tr:hover { background: var(--color-surface); }
.action-cell { display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap; }

.admin-thumb {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.admin-thumb-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 42px;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  font-size: 1.2rem;
}

/* Detail view */
.detail-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.detail-longform { display: flex; flex-direction: column; gap: var(--space-lg); }
.detail-item     { display: flex; flex-direction: column; gap: 4px; }
.detail-label    { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); font-weight: 700; }
.detail-value    { font-size: 0.95rem; }
.detail-text     { color: var(--color-text-muted); line-height: 1.7; }

.admin-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.admin-action-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding: 10px 0;
  font-size: 0.82rem;
  font-weight: 500;
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  color: var(--color-text-muted);
}
.footer-ip { font-family: var(--font-mono); cursor: pointer; }
.footer-ip:hover { color: var(--color-text); }
.footer-dot { opacity: 0.5; }
.footer-inner a { color: var(--color-text-muted); }
.footer-inner a:hover { color: var(--color-accent); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-toggle { display: flex; margin-left: auto; }
  .nav-inner { padding: 0 var(--space-md); }
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-xs));
    left: 0; right: 0;
    background: rgba(14, 16, 22, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-sm);
    gap: 2px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); }
  .nav-member { justify-content: space-between; padding: var(--space-xs) var(--space-md); }

  /* Dropdowns render inline (accordion-style) inside the collapsed mobile nav */
  .nav-dropdown { width: 100%; }
  .nav-drop-toggle { width: 100%; justify-content: space-between; }
  .nav-drop-menu {
    position: static;
    display: none;
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 0 var(--space-md);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-dropdown.open .nav-drop-menu { display: block; }

  .hero { padding: var(--space-lg) var(--space-md) var(--space-xl); }
  .glance-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row, .form-row-3, .admin-actions-row { grid-template-columns: 1fr; }
  .coords-toolbar { flex-direction: column; align-items: stretch; }
  .search-form input[type="text"] { width: 100%; }
  .build-detail { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .hero-actions { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
  .container { padding: 0 var(--space-md); }
  .form-card { padding: var(--space-lg); }
  .builds-grid { grid-template-columns: 1fr; }
  .admin-actions-row { grid-template-columns: 1fr; }
}

/* ── Liquid-glass frosting for surface-based cards (secondary pages) ─────────
   Ensures every card/panel reads as frosted glass over the page gradient,
   not a flat opaque panel. Applied broadly so builds/coords/forms/admin match
   the homepage's glass language. */
.build-card,
.build-detail-body,
.coord-form-panel,
.form-card,
.stat-card,
.admin-nav-card,
.admin-action-form,
.detail-card,
.map-embed {
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}

/* Feature grid: 2 columns on desktop, single column on mobile (per spec). */
@media (min-width: 720px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 719px) {
  .features-grid { grid-template-columns: 1fr; }
}