/* ============================================================
   MINESITE SEED VIEWER — Theme Override
   Dark palette · Green accents · Glassmorphism · Pixel headings
   ============================================================ */

/* ── Design Tokens ── */
:root {
  --ms-bg:          #0d1117;
  --ms-bg-2:        #131921;
  --ms-bg-3:        #1a2233;
  --ms-bg-card:     #161d2b;
  --ms-bg-elevated: #1e2a3d;
  --ms-border:      #253047;
  --ms-border-2:    #34465e;
  --ms-green:       #4ade80;
  --ms-green-dim:   #22c55e;
  --ms-green-glow:  rgba(74,222,128,0.20);
  --ms-green-soft:  rgba(74,222,128,0.10);
  --ms-cyan:        #38bdf8;
  --ms-blue:        #60a5fa;
  --ms-text:        #edf2ff;
  --ms-text-2:      #b8d0e0;
  --ms-text-3:      #96b5c8;
  --ms-radius:      6px;
  --ms-radius-lg:   12px;
  --ms-ease:        cubic-bezier(0.22,1,0.36,1);

  /* Mantine core overrides */
  --mantine-color-scheme: dark;
  --mantine-color-body: var(--ms-bg);
  --mantine-color-text: var(--ms-text);
  --mantine-color-placeholder: var(--ms-text-3);
  --mantine-font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  --mantine-font-family-headings: 'Press Start 2P', cursive;
  --mantine-primary-color-filled: var(--ms-green);
  --mantine-primary-color-filled-hover: var(--ms-green-dim);
  --mantine-color-dark-0: #c9c9c9;
  --mantine-color-dark-1: #b8b8b8;
  --mantine-color-dark-2: var(--ms-text-3);
  --mantine-color-dark-3: #696969;
  --mantine-color-dark-4: var(--ms-border-2);
  --mantine-color-dark-5: var(--ms-border);
  --mantine-color-dark-6: var(--ms-bg-3);
  --mantine-color-dark-7: var(--ms-bg-2);
  --mantine-color-dark-8: var(--ms-bg);
  --mantine-color-dark-9: #080b10;
  --mantine-shadow-md: 0 4px 24px rgba(0,0,0,0.5);
  --mantine-shadow-xl: 0 8px 48px rgba(0,0,0,0.6);
  --app-shell-border-color: var(--ms-border);
}

[data-mantine-color-scheme="light"] {
  --mantine-color-body: var(--ms-bg) !important;
  --mantine-color-text: var(--ms-text) !important;
}

/* ── Global ── */
html { scroll-behavior: smooth; color-scheme: dark; }

body {
  background: var(--ms-bg) !important;
  color: var(--ms-text) !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image: radial-gradient(ellipse 80% 30% at 50% -5%, rgba(74,222,128,0.04) 0%, transparent 50%);
}

a { color: var(--ms-green); }
a:hover { color: #a7f3c9; text-decoration: none; }

/* ============================================================
   HEADER
   ============================================================ */
.ms-header {
  position: sticky;
  top: 0;
  z-index: 300;
  background: rgba(13,17,23,0.92);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid var(--ms-border);
  transition: box-shadow 0.2s;
}
.ms-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.5); }

.ms-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 60px;
}

.ms-logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}
.ms-logo-img {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--ms-border-2);
  box-shadow: 0 0 12px rgba(74,222,128,0.2);
}
.ms-logo-text {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.6rem;
  color: var(--ms-green);
  letter-spacing: 0.1em;
  text-shadow: 0 0 20px rgba(74,222,128,0.6);
}

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

.ms-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(--ms-green) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}
.ms-nav-cta::after { display: none !important; }
.ms-nav-cta:hover {
  background: rgba(74,222,128,0.22) !important;
  border-color: var(--ms-green) !important;
  box-shadow: 0 0 16px rgba(74,222,128,0.25) !important;
}

.ms-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--ms-radius);
}
.ms-menu-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ms-text-2);
  border-radius: 2px;
  transition: all 0.25s var(--ms-ease);
}

@media (max-width: 768px) {
  .ms-menu-toggle { display: flex; }
  .ms-nav-links {
    display: none;
    position: absolute;
    top: 60px; left: 0; right: 0;
    background: rgba(13,17,23,0.98);
    backdrop-filter: blur(24px);
    flex-direction: column;
    padding: 1rem 1.5rem;
    gap: 0.5rem;
    border-bottom: 1px solid var(--ms-border);
  }
  .ms-nav-links.open { display: flex; }
  .ms-nav-links a { padding: 0.75rem 0; }
}

/* ── Loading screen ── */
.ms-loader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 60px);
  gap: 1.25rem;
}
.ms-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--ms-border-2);
  border-top-color: var(--ms-green);
  border-radius: 50%;
  animation: ms-spin 0.8s linear infinite;
}
@keyframes ms-spin { to { transform: rotate(360deg); } }
.ms-loader-text {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.55rem;
  color: var(--ms-text-3);
  letter-spacing: 0.08em;
  animation: ms-pulse 1.8s ease-in-out infinite;
}
@keyframes ms-pulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ============================================================
   FOOTER
   ============================================================ */
.ms-footer {
  background: rgba(13,17,23,0.92);
  border-top: 1px solid var(--ms-border);
  padding: 1.25rem 1.5rem;
  text-align: center;
}
.ms-footer-inner p {
  font-size: 0.75rem;
  color: var(--ms-text-3);
  margin: 0;
  line-height: 1.7;
}
.ms-footer-inner a { color: var(--ms-green); }

/* ============================================================
   MANTINE APP SHELL
   ============================================================ */
.mantine-AppShell-header {
  background: rgba(13,17,23,0.92) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  border-bottom-color: var(--ms-border) !important;
  display: none !important;   /* We use our own header */
}
.mantine-AppShell-main {
  background: var(--ms-bg) !important;
  padding-top: 0 !important;
  contain: layout style !important;    /* isolate layout thrashing from React re-renders */
}
.mantine-AppShell-aside {
  background: var(--ms-bg-2) !important;
  border-left-color: var(--ms-border) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.mantine-Button-root {
  border-radius: var(--ms-radius) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  transition: all 0.22s var(--ms-ease) !important;
}
.mantine-Button-root:not([data-variant="filled"]) {
  --button-bg: rgba(22,29,43,0.9) !important;
  --button-hover: var(--ms-green-soft) !important;
  --button-bd: 1px solid var(--ms-border-2) !important;
  --button-color: var(--ms-text-2) !important;
}
.mantine-Button-root:not([data-variant="filled"]):hover {
  --button-bd: 1px solid var(--ms-green) !important;
  --button-color: var(--ms-green) !important;
  box-shadow: 0 4px 16px rgba(74,222,128,0.15);
  transform: translateY(-1px);
}
.mantine-Button-root[data-variant="filled"] {
  --button-bg: linear-gradient(135deg,#4ade80,#22c55e) !important;
  background: linear-gradient(135deg,#4ade80,#22c55e) !important;
  --button-color: #0d1117 !important;
  --button-bd: none !important;
  box-shadow: 0 0 28px rgba(74,222,128,0.35), 0 4px 12px rgba(0,0,0,0.4);
  font-weight: 600 !important;
}
.mantine-Button-root[data-variant="filled"]:hover {
  background: linear-gradient(135deg,#6ee7a0,#4ade80) !important;
  transform: translateY(-2px);
  box-shadow: 0 0 48px rgba(74,222,128,0.55), 0 4px 16px rgba(0,0,0,0.4);
}

/* ============================================================
   INPUTS
   ============================================================ */
.mantine-Input-input,
.mantine-TextInput-input {
  background: var(--ms-bg-3) !important;
  border-color: var(--ms-border-2) !important;
  color: var(--ms-text) !important;
  border-radius: var(--ms-radius) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
}
.mantine-Input-input:focus,
.mantine-TextInput-input:focus {
  border-color: var(--ms-green) !important;
  box-shadow: 0 0 0 3px var(--ms-green-glow) !important;
  --input-bd-focus: var(--ms-green) !important;
}
.mantine-Input-input::placeholder { color: var(--ms-text-3) !important; }

/* ── Number input ── */
.mantine-NumberInput-input {
  background: var(--ms-bg-3) !important;
  border-color: var(--ms-border-2) !important;
  color: var(--ms-text) !important;
  font-family: 'DM Mono', monospace !important;
}
.mantine-NumberInput-input:focus {
  border-color: var(--ms-green) !important;
  box-shadow: 0 0 0 3px var(--ms-green-glow) !important;
}
.mantine-NumberInput-control {
  border-color: var(--ms-border) !important;
  color: var(--ms-text-3) !important;
}
.mantine-NumberInput-control:hover {
  background: rgba(74,222,128,0.1) !important;
  color: var(--ms-green) !important;
}

/* ── Input label & description ── */
.mantine-InputWrapper-label {
  color: var(--ms-text-2) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.4rem !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
}
.mantine-InputWrapper-description {
  color: var(--ms-text-3) !important;
  font-size: 0.73rem !important;
}
.mantine-InputWrapper-error {
  color: #f87171 !important;
  font-size: 0.73rem !important;
}

/* ── SegmentedControl ── */
.mantine-SegmentedControl-root {
  background: var(--ms-bg-3) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius) !important;
  padding: 3px !important;
  gap: 2px !important;
}
.mantine-SegmentedControl-label {
  color: var(--ms-text-3) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  transition: color 0.2s !important;
}
.mantine-SegmentedControl-label:hover { color: var(--ms-text) !important; }
.mantine-SegmentedControl-indicator {
  background: linear-gradient(135deg, rgba(74,222,128,0.2), rgba(74,222,128,0.1)) !important;
  border: 1px solid rgba(74,222,128,0.35) !important;
  border-radius: calc(var(--ms-radius) - 1px) !important;
  box-shadow: 0 0 12px rgba(74,222,128,0.15) !important;
}
.mantine-SegmentedControl-input:checked + .mantine-SegmentedControl-label {
  color: var(--ms-green) !important;
}

/* ============================================================
   TABS
   ============================================================ */
.mantine-Tabs-root {
  background: linear-gradient(145deg, rgba(19,25,33,0.95), rgba(13,17,23,0.98)) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
  margin: 0.75rem !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(74,222,128,0.05) !important;
}
.mantine-Tabs-list {
  background: linear-gradient(180deg, rgba(26,34,51,0.8), rgba(19,25,33,0.9)) !important;
  border-bottom: 1px solid var(--ms-border) !important;
  padding: 0.65rem 0.75rem !important;
  gap: 0.4rem !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
}
.mantine-Tabs-tab {
  color: var(--ms-text-3) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  border-radius: 999px !important;
  padding: 0.5rem 1rem !important;
  transition: all 0.25s var(--ms-ease) !important;
  white-space: nowrap !important;
  background: transparent !important;
}
.mantine-Tabs-tab:hover {
  color: var(--ms-text) !important;
  background: rgba(74,222,128,0.06) !important;
  border-color: rgba(74,222,128,0.15) !important;
  transform: translateY(-1px) !important;
}
.mantine-Tabs-tab[data-active] {
  color: var(--ms-green) !important;
  background: rgba(74,222,128,0.1) !important;
  border-color: rgba(74,222,128,0.35) !important;
  box-shadow: 0 0 16px rgba(74,222,128,0.15), inset 0 0 12px rgba(74,222,128,0.05) !important;
}
.mantine-Tabs-tab svg,
.mantine-Tabs-tab .mantine-Tabs-tabSection { color: inherit !important; opacity: 0.7; }
.mantine-Tabs-tab[data-active] svg,
.mantine-Tabs-tab[data-active] .mantine-Tabs-tabSection { opacity: 1; filter: drop-shadow(0 0 4px rgba(74,222,128,0.4)); }
.mantine-Tabs-tabLabel { font-family: 'DM Sans', system-ui, sans-serif !important; }
.mantine-Tabs-panel {
  background: transparent !important;
  color: var(--ms-text-2) !important;
  padding: 1.25rem !important;
}
.mantine-Tabs-panel .mantine-Title-root,
.mantine-Tabs-panel h3,
.mantine-Tabs-panel h4 {
  color: var(--ms-text) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 0.75rem !important;
  border-bottom: 1px solid var(--ms-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.mantine-Tabs-panel .mantine-Title-root::before,
.mantine-Tabs-panel h3::before,
.mantine-Tabs-panel h4::before {
  content: '' !important;
  display: inline-block !important;
  width: 3px !important; height: 1em !important;
  background: linear-gradient(180deg, var(--ms-green), var(--ms-cyan)) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

/* ── Hide specific broken tabs (2nd: Map Settings, 3rd: Seed Finder, 5th: Biomes) ── */
.mantine-Tabs-list .mantine-Tabs-tab:nth-child(2),
.mantine-Tabs-list .mantine-Tabs-tab:nth-child(3),
.mantine-Tabs-list .mantine-Tabs-tab:nth-child(5) { display: none !important; }

/* ============================================================
   CHECKBOXES & SWITCHES
   ============================================================ */
.mantine-Checkbox-root {
  padding: 0.45rem 0.6rem !important;
  margin: 0.15rem 0 !important;
  border-radius: var(--ms-radius) !important;
  transition: all 0.2s var(--ms-ease) !important;
  border: 1px solid transparent !important;
}
.mantine-Checkbox-root:hover {
  background: rgba(74,222,128,0.04) !important;
  border-color: rgba(74,222,128,0.1) !important;
}
.mantine-Checkbox-body { align-items: center !important; }
.mantine-Checkbox-input {
  background: var(--ms-bg-3) !important;
  border: 2px solid var(--ms-border-2) !important;
  border-radius: 4px !important;
  width: 18px !important; height: 18px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.mantine-Checkbox-input:checked {
  background: linear-gradient(135deg,#4ade80,#22c55e) !important;
  border-color: var(--ms-green) !important;
  box-shadow: 0 0 8px rgba(74,222,128,0.4) !important;
}
.mantine-Checkbox-label {
  color: var(--ms-text-2) !important;
  font-size: 0.82rem !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  cursor: pointer !important;
}
.mantine-Checkbox-root:hover .mantine-Checkbox-label { color: var(--ms-text) !important; }
.mantine-Checkbox-root + .mantine-Checkbox-root { border-top: 1px solid rgba(37,48,71,0.5) !important; }

.mantine-Switch-root { padding: 0.4rem 0 !important; }
.mantine-Switch-track {
  background: var(--ms-bg-3) !important;
  border: 2px solid var(--ms-border-2) !important;
  border-radius: 999px !important;
  min-width: 42px !important; height: 22px !important;
  cursor: pointer !important;
  transition: all 0.25s var(--ms-ease) !important;
}
.mantine-Switch-thumb {
  background: var(--ms-text-3) !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
  transition: all 0.25s var(--ms-ease) !important;
}
.mantine-Switch-input:checked + .mantine-Switch-track {
  background: linear-gradient(135deg,rgba(74,222,128,0.2),rgba(74,222,128,0.1)) !important;
  border-color: var(--ms-green) !important;
  box-shadow: 0 0 12px rgba(74,222,128,0.25) !important;
}
.mantine-Switch-input:checked + .mantine-Switch-track .mantine-Switch-thumb {
  background: var(--ms-green) !important;
  box-shadow: 0 0 8px rgba(74,222,128,0.5) !important;
}
.mantine-Switch-label {
  color: var(--ms-text-2) !important;
  font-size: 0.82rem !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

/* ── Select / Dropdown ── */
.mantine-Select-input,
.mantine-NativeSelect-input {
  background: var(--ms-bg-3) !important;
  border: 1px solid var(--ms-border-2) !important;
  border-radius: var(--ms-radius) !important;
  color: var(--ms-text) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.mantine-Select-input:focus,
.mantine-NativeSelect-input:focus {
  border-color: var(--ms-green) !important;
  box-shadow: 0 0 0 3px var(--ms-green-glow) !important;
}

/* ── Slider ── */
.mantine-Slider-root { padding: 0.5rem 0 !important; }
.mantine-Slider-track {
  background: var(--ms-bg-3) !important;
  border: 1px solid var(--ms-border) !important;
  height: 6px !important;
  border-radius: 999px !important;
}
.mantine-Slider-bar {
  background: linear-gradient(90deg,var(--ms-green-dim),var(--ms-green)) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 8px rgba(74,222,128,0.3) !important;
}
.mantine-Slider-thumb {
  background: var(--ms-green) !important;
  border: 2px solid var(--ms-bg) !important;
  box-shadow: 0 0 12px rgba(74,222,128,0.4), 0 2px 4px rgba(0,0,0,0.3) !important;
  width: 16px !important; height: 16px !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
.mantine-Slider-thumb:hover {
  transform: scale(1.2) !important;
  box-shadow: 0 0 20px rgba(74,222,128,0.5), 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* ── Tooltip ── */
.mantine-Tooltip-tooltip {
  background: var(--ms-bg-card) !important;
  color: var(--ms-text) !important;
  border: 1px solid var(--ms-border) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  border-radius: var(--ms-radius) !important;
}

/* ── Modal ── */
.mantine-Modal-content {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius-lg) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
}
.mantine-Modal-header {
  background: var(--ms-bg-card) !important;
  border-bottom: 1px solid var(--ms-border) !important;
}
.mantine-Modal-title { color: var(--ms-text) !important; font-weight: 700 !important; }
.mantine-Modal-close { color: var(--ms-text-3) !important; }
.mantine-Modal-close:hover { background: rgba(74,222,128,0.1) !important; color: var(--ms-green) !important; }

/* ── Alert ── */
.mantine-Alert-root {
  background: rgba(56,189,248,0.06) !important;
  border: 1px solid rgba(56,189,248,0.2) !important;
  border-radius: var(--ms-radius) !important;
}
.mantine-Alert-message { color: var(--ms-text-2) !important; }

/* ── Badge ── */
.mantine-Badge-root {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-radius: 999px !important;
}

/* ── Drawer ── */
.mantine-Drawer-content { background: var(--ms-bg-2) !important; }
.mantine-Drawer-header {
  background: var(--ms-bg-2) !important;
  border-bottom: 1px solid var(--ms-border) !important;
}
.mantine-Drawer-close { color: var(--ms-text-3) !important; }
.mantine-Drawer-close:hover { background: rgba(74,222,128,0.1) !important; color: var(--ms-green) !important; }

/* ── Dropzone ── */
.mantine-Dropzone-root {
  background: var(--ms-bg-3) !important;
  border: 2px dashed var(--ms-border-2) !important;
  border-radius: var(--ms-radius-lg) !important;
  transition: all 0.25s var(--ms-ease) !important;
}
.mantine-Dropzone-root:hover {
  border-color: var(--ms-green) !important;
  background: rgba(74,222,128,0.04) !important;
}

/* ── Popover / Menu ── */
.mantine-Popover-dropdown,
.mantine-Menu-dropdown {
  background: var(--ms-bg-card) !important;
  border-color: var(--ms-border) !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.6) !important;
}

/* ============================================================
   OPENL AYERS MAP CONTROLS
   ============================================================ */

/* ── GPU acceleration for map viewport ── */
.ol-viewport {
  contain: strict !important;
  will-change: transform !important;
}
.ol-layer canvas {
  will-change: transform !important;
  image-rendering: pixelated !important;       /* sharp pixel art, skip bilinear */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ol-zoom {
  top: 0.75rem !important;
  left: 0.75rem !important;
}
.ol-zoom button {
  background: rgba(13,17,23,0.85) !important;
  backdrop-filter: blur(12px) !important;
  color: var(--ms-text) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius) !important;
  width: 32px !important; height: 32px !important;
  font-size: 1.1rem !important;
  transition: all 0.2s var(--ms-ease) !important;
  margin: 2px 0 !important;
}
.ol-zoom button:hover {
  background: rgba(74,222,128,0.1) !important;
  border-color: var(--ms-green) !important;
  color: var(--ms-green) !important;
  box-shadow: 0 0 12px rgba(74,222,128,0.2) !important;
}

.ol-attribution {
  background: rgba(13,17,23,0.7) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: var(--ms-radius) !important;
  padding: 2px 6px !important;
  font-size: 0.65rem !important;
}
.ol-attribution a { color: var(--ms-green) !important; }

.ol-control {
  background: rgba(13,17,23,0.7) !important;
  border-radius: var(--ms-radius) !important;
}
.ol-control button {
  background: rgba(13,17,23,0.85) !important;
  color: var(--ms-text) !important;
  border: 1px solid var(--ms-border) !important;
}
.ol-control button:hover {
  background: rgba(74,222,128,0.1) !important;
  color: var(--ms-green) !important;
  border-color: var(--ms-green) !important;
}
.ol-rotate { background: transparent !important; }

.ol-scale-line { background: rgba(13,17,23,0.7) !important; }
.ol-scale-line-inner {
  border-color: var(--ms-green) !important;
  color: var(--ms-text) !important;
  font-size: 0.65rem !important;
}

.ol-mouse-position {
  background: rgba(13,17,23,0.85) !important;
  backdrop-filter: blur(8px) !important;
  color: var(--ms-text) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
  border-radius: var(--ms-radius) !important;
  border: 1px solid var(--ms-border) !important;
}

/* ── OL tooltips ── */
.ol-tooltip,
.ol-tooltip-measure,
.ol-tooltip-static {
  background: var(--ms-bg-card) !important;
  color: var(--ms-text) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius) !important;
  padding: 4px 8px !important;
}

/* ============================================================
   STRUCTURE POPUP
   This is the card shown when clicking a structure on the map.
   We rewrite the content in JS, so we only style our new elements.
   ============================================================ */

/* Popup container - floating card */
#map-context-popup,
.ol-popup {
  background: var(--ms-bg-card) !important;
  border: 1px solid var(--ms-border-2) !important;
  border-radius: var(--ms-radius-lg) !important;
  color: var(--ms-text) !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.65),
    0 0 0 1px rgba(74,222,128,0.06),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  max-width: 260px !important;
  min-width: 200px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Hide the popup arrow — avoids white-flash edge case */
.ol-popup::after,
.ol-popup::before {
  display: none !important;
}

/* Inner content wrapper injected by the app */
#map-context-popup-content {
  padding: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
}

/* ── Biome pill ── */
.ms-pp-biome {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ms-cyan);
  background: rgba(56,189,248,0.1);
  border: 1px solid rgba(56,189,248,0.25);
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
  width: fit-content;
}
.ms-pp-biome::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--ms-cyan);
  border-radius: 50%;
  opacity: 0.8;
}

/* ── Structure name ── */
.ms-pp-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ms-text);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* ── Coordinates ── */
.ms-pp-coords-block {
  font-family: 'DM Mono', monospace;
  font-size: 0.85rem;
  color: var(--ms-green);
  background: rgba(74,222,128,0.06);
  border: 1px solid rgba(74,222,128,0.15);
  border-radius: var(--ms-radius);
  padding: 0.4rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-weight: 500;
}
.ms-pp-coords-block div {
  display: flex;
  align-items: center;
}

/* ── Teleport command ── */
.ms-pp-tp {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
}
.ms-pp-tp-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--ms-text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.ms-pp-tp-code {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--ms-cyan);
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(56,189,248,0.15);
  border-radius: 4px;
  padding: 0.2rem 0.45rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Button row ── */
.ms-pp-btns {
  display: flex;
  gap: 0.4rem;
}

/* ── Copy button ── */
.ms-pp-copy {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  justify-content: center;
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.25);
  border-radius: var(--ms-radius);
  color: var(--ms-green);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  transition: all 0.2s var(--ms-ease);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.ms-pp-copy-tp {
  background: rgba(56,189,248,0.08);
  border-color: rgba(56,189,248,0.25);
  color: var(--ms-cyan);
}
.ms-pp-copy:hover {
  background: rgba(74,222,128,0.16);
  border-color: var(--ms-green);
  box-shadow: 0 0 16px rgba(74,222,128,0.2);
  transform: translateY(-1px);
}
.ms-pp-copy-tp:hover {
  background: rgba(56,189,248,0.16);
  border-color: var(--ms-cyan);
  box-shadow: 0 0 16px rgba(56,189,248,0.2);
}
.ms-pp-copy:active { transform: translateY(0); }
.ms-pp-copy.done {
  background: rgba(74,222,128,0.2);
  border-color: var(--ms-green);
  color: var(--ms-green);
}

/* ── Hide everything we don't want inside the popup ── */
/* Images (structure photo) */
#map-context-popup-content img,
#map-context-popup-content [class*="image"],
#map-context-popup-content [class*="Image"],
#map-context-popup-content picture { display: none !important; }

/* Wiki / external links */
#map-context-popup-content a[href*="wiki"],
#map-context-popup-content a[href*="minecraft.net"],
#map-context-popup-content a[href*="mcseedmap"],
#map-context-popup-content [class*="wiki"],
#map-context-popup-content [class*="Wiki"] { display: none !important; }

/* ============================================================
   HIDE MCSEEDMAP.NET BRANDING
   ============================================================ */
.mantine-AppShell-main > .mantine-Container-root > .mantine-Text-root:first-child { display: none !important; }
.mantine-AppShell-main > .mantine-Container-root > .mantine-Title-root { display: none !important; }
.mantine-AppShell-main > .mantine-Container-root > .mantine-Grid-root { display: none !important; }
.mantine-AppShell-main > .mantine-Container-root > aside { display: none !important; }
.mantine-AppShell-main footer#footer { display: none !important; }

a[href*="mcseedmap.net"] { display: none !important; }
img[src*="mcseedmap"] { display: none !important; }
[title*="mcseedmap"] { display: none !important; }

/* ============================================================
   FULLSCREEN — hide chrome
   ============================================================ */
body.fullscreen .ms-header,
body.fullscreen .ms-footer,
body.fullscreen .fullscreen-hidden { display: none !important; }

/* ============================================================
   SELECTION & FOCUS
   ============================================================ */
::selection { background: rgba(74,222,128,0.3); color: var(--ms-text); }
:focus-visible {
  outline: 2px solid var(--ms-green) !important;
  outline-offset: 3px !important;
  border-radius: var(--ms-radius);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .ms-nav { height: 52px; padding: 0 1rem; }
  .ms-logo-text { font-size: 0.5rem; }
}

/* ============================================================
   GLOBAL SITE FOOTER (From style.css)
   ============================================================ */
.site-footer {
  background: var(--ms-bg-2);
  border-top: 1px solid var(--ms-border);
  margin-top: auto;
}
.footer-inner-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  gap: 3rem;
  padding: 3rem 0 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.footer-brand {
  display: flex; flex-direction: column; gap: 0.85rem;
}
.footer-brand .footer-logo {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.65rem; color: var(--ms-green); letter-spacing: 0.1em;
}
.footer-brand p {
  font-size: 0.84rem; color: var(--ms-text-3); line-height: 1.7; max-width: 280px; margin: 0;
}
.footer-col h4 {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.44rem; color: var(--ms-text-2); letter-spacing: 0.12em; margin: 0 0 0.9rem;
}
.footer-col ul {
  list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0;
}
.footer-col a {
  font-size: 0.84rem; color: var(--ms-text-3); text-decoration: none; transition: color 0.18s;
}
.footer-col a:hover { color: var(--ms-green); }
.footer-bottom-bar {
  border-top: 1px solid var(--ms-border); padding: 1rem 0;
}
.footer-bottom-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
}
.footer-bottom-inner small {
  font-size: 0.76rem; color: var(--ms-text-3);
}
.back-to-top {
  font-size: 0.72rem; color: var(--ms-text-3); text-decoration: none; letter-spacing: 0.1em;
  border: 1px solid var(--ms-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(--ms-green); border-color: var(--ms-green); }
@media (max-width: 860px) {
  .footer-inner-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .footer-brand { align-items: center; }
  .footer-brand p { max-width: 100%; }
  .footer-col ul { align-items: center; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 540px) {
  .footer-inner-grid { padding: 2rem 1.5rem 1.5rem; gap: 1.5rem; }
  .footer-brand .footer-logo { font-size: 0.58rem; }
  .footer-col h4 { font-size: 0.42rem; }
  .footer-col a { font-size: 0.8rem; }
}