/* ============================================================
   MINESITE — about.css
   Theme: Neon-Cyber Minecraft | Dark Mode | Fully Responsive
   ============================================================ */

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

   /* ── Variables ── */
   :root {
     /* Backgrounds */
     --bg:           #060b06;
     --bg-2:         #0d160d;
     --bg-3:         #131f13;
     --bg-card:      #0f1a0f;
     --bg-elevated:  #172417;
   
     /* Borders */
     --border:       #1f3320;
     --border-2:     #2e5030;
     --border-focus: #4ade80;
   
     /* Brand palette */
     --green:        #4ade80;
     --green-dim:    #34c265;
     --green-muted:  #2a9e52;
     --green-glow:   rgba(74, 222, 128, 0.18);
     --green-soft:   rgba(74, 222, 128, 0.08);
   
     /* Accent colours */
     --gold:         #f59e0b;
     --gold-soft:    rgba(245, 158, 11, 0.1);
     --cyan:         #06b6d4;
     --cyan-soft:    rgba(6, 182, 212, 0.08);
   
     /* Text */
     --text:         #e2f0e2;
     --text-2:       #9dbe9d;
     --text-3:       #5e7e5e;
   
     /* Typography */
     --sans:   'DM Sans', system-ui, -apple-system, sans-serif;
     --mono:   'DM Mono', 'Courier New', monospace;
     --pixel:  'Press Start 2P', cursive;
   
     /* Layout */
     --radius:    6px;
     --radius-lg: 12px;
   
     /* Motion */
     --dur-base:   0.22s;
     --ease:       cubic-bezier(0.22, 1, 0.36, 1);
     --transition: all var(--dur-base) var(--ease);
   }
   
   /* ── Reduced Motion ── */
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
       animation-duration: 0.01ms !important;
       transition-duration: 0.01ms !important;
       scroll-behavior: auto !important;
     }
   }
   
   /* ── Reset & Base ── */
   *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
   html { scroll-behavior: smooth; font-size: 16px; }
   
   body {
     font-family: var(--sans);
     background: var(--bg);
     color: var(--text);
     line-height: 1.7;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     -webkit-font-smoothing: antialiased;
     overflow-x: hidden;
   }
   
   ::selection { background: var(--green); color: var(--bg); }
   :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: var(--radius); }
   
   /* ── Utilities ── */
   .pixel     { font-family: var(--pixel); letter-spacing: 0.05em; }
   .container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; width: 100%; }
   
   .skip-link {
     position: absolute; top: -60px; left: 1rem;
     background: var(--green); color: var(--bg);
     padding: 10px 20px; font-weight: 700; font-size: 0.9rem;
     text-decoration: none; z-index: 9999;
     border-radius: 0 0 var(--radius) var(--radius);
     transition: top 0.2s;
   }
   .skip-link:focus { top: 0; }
   
   img { max-width: 100%; height: auto; display: block; }
   
   /* ============================================================
      HEADER
      ============================================================ */
   .site-header {
     position: sticky; top: 0; z-index: 200;
     background: rgba(6, 11, 6, 0.9);
     backdrop-filter: blur(20px) saturate(1.4);
     border-bottom: 1px solid var(--border);
   }
   .nav-container {
     display: flex; align-items: center;
     justify-content: space-between;
     height: 68px; gap: 1rem;
   }
   
   .logo {
     display: flex; align-items: center; gap: 0.7rem;
     text-decoration: none; flex-shrink: 0;
   }
   .logo-icon-svg {
     width: 34px; height: 34px; flex-shrink: 0;
     border-radius: 8px; border: 1px solid var(--border-2);
     object-fit: cover;
   }
   .logo-text {
     font-family: var(--pixel); font-size: 0.65rem;
     color: var(--green); letter-spacing: 0.1em;
     text-shadow: 0 0 16px rgba(74, 222, 128, 0.55);
     transition: color var(--dur-base) var(--ease);
   }
   .logo:hover .logo-text { color: #b9f5d0; }
   
   .main-nav ul { display: flex; gap: 1.5rem; list-style: none; align-items: center; }
   .main-nav a {
     font-size: 0.875rem; font-weight: 500; color: var(--text-2);
     text-decoration: none; transition: color var(--dur-base) var(--ease);
     position: relative; padding-bottom: 2px;
   }
   .main-nav a::after {
     content: ''; position: absolute; bottom: 0; left: 0;
     width: 0; height: 2px; background: var(--green);
     transition: width var(--dur-base) var(--ease);
   }
   .main-nav a:hover { color: var(--text); }
   .main-nav a:hover::after { width: 100%; }
   
   .nav-cta {
     background: var(--green-soft) !important;
     border: 1px solid var(--border-2) !important;
     border-radius: 999px !important;
     padding: 0.42rem 1.1rem !important;
     color: var(--green) !important;
     font-weight: 600 !important;
   }
   .nav-cta:hover {
     background: rgba(74, 222, 128, 0.14) !important;
     color: #b9f5d0 !important;
   }
   .nav-cta::after { display: none !important; }
   
   /* Hamburger - Hidden on Desktop */
   .mobile-menu-toggle {
     display: none; flex-direction: column; gap: 5px;
     background: none; border: 1px solid transparent; cursor: pointer;
     padding: 0.5rem; border-radius: var(--radius);
   }
   .burger-line {
     display: block; width: 22px; height: 2px;
     background: var(--text-2); border-radius: 2px;
     transition: var(--transition);
   }
   /* Hamburger Animation */
   .mobile-menu-toggle.active .burger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
   .mobile-menu-toggle.active .burger-line:nth-child(2) { opacity: 0; }
   .mobile-menu-toggle.active .burger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
   
   /* ============================================================
      PAGE HERO
      ============================================================ */
   .page-hero {
     position: relative;
     background: var(--bg-2);
     border-bottom: 1px solid var(--border);
     padding: 4.5rem 0 3.5rem;
     overflow: hidden;
   }
   
   .page-hero::before { /* Grid Pattern */
     content: ''; position: absolute; inset: 0;
     background-image: 
       linear-gradient(var(--border) 1px, transparent 1px),
       linear-gradient(90deg, var(--border) 1px, transparent 1px);
     background-size: 40px 40px;
     opacity: 0.15;
     mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%);
     pointer-events: none;
   }
   
   .page-hero::after { /* Glow */
     content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
     width: 140%; height: 300px;
     background: radial-gradient(ellipse at center top, rgba(74, 222, 128, 0.08) 0%, transparent 60%);
     pointer-events: none;
   }
   
   .breadcrumb {
     display: flex; align-items: center; gap: 0.5rem;
     font-family: var(--mono); font-size: 0.75rem;
     color: var(--text-3); margin-bottom: 1.5rem;
   }
   .breadcrumb a { color: var(--text-2); text-decoration: none; transition: color var(--dur-base); }
   .breadcrumb a:hover { color: var(--green); }
   .breadcrumb-sep { opacity: 0.5; }
   
   .page-tag {
     display: inline-block;
     font-size: 0.65rem; color: var(--cyan);
     letter-spacing: 0.1em; margin-bottom: 1rem;
     background: var(--cyan-soft);
     padding: 0.3rem 0.8rem;
     border: 1px solid rgba(6, 182, 212, 0.3);
     border-radius: 999px;
   }
   
   .page-title {
     font-size: clamp(1.5rem, 5vw, 2.5rem);
     color: #fff; line-height: 1.3; margin-bottom: 1.25rem;
     text-shadow: 0 0 40px rgba(74, 222, 128, 0.3);
     position: relative; z-index: 1;
   }
   
   .page-sub {
     font-size: 1.05rem;
     color: var(--text-2); line-height: 1.8;
     max-width: 640px; margin-bottom: 1.5rem;
   }
   
   .hero-stats {
     display: flex; gap: 1rem; flex-wrap: wrap;
     margin-bottom: 1.5rem;
   }
   .hero-stats span {
     font-family: var(--mono); font-size: 0.75rem;
     color: var(--text-2);
     background: var(--bg-card);
     border: 1px solid var(--border);
     padding: 0.4rem 0.8rem; border-radius: var(--radius);
   }
   
   .page-meta {
     font-family: var(--mono); font-size: 0.72rem;
     color: var(--text-3); letter-spacing: 0.05em;
   }
   
   /* ============================================================
      CONTENT LAYOUT (Sidebar + Article)
      ============================================================ */
   .content-wrap {
     display: grid;
     grid-template-columns: 240px 1fr;
     gap: 4rem;
     padding: 4rem 0;
   }
   
   /* SIDEBAR (TOC) */
   .toc {
     position: sticky;
     top: 100px; /* Below header */
     align-self: start;
   }
   .toc-title {
     font-family: var(--mono); font-size: 0.7rem;
     color: var(--text-3); letter-spacing: 0.1em;
     text-transform: uppercase; margin-bottom: 1rem;
   }
   .toc ul { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
   .toc a {
     display: block; font-size: 0.85rem; color: var(--text-2);
     text-decoration: none; padding: 0.4rem 0 0.4rem 1rem;
     border-left: 2px solid var(--border);
     transition: var(--transition);
   }
   .toc a:hover, .toc a.active {
     color: var(--green); border-color: var(--green);
     background: var(--green-soft);
   }
   
   /* ARTICLE */
   .article { min-width: 0; }
   
   .policy-section {
     margin-bottom: 3.5rem;
     padding-bottom: 2.5rem;
     border-bottom: 1px solid var(--border);
   }
   .policy-section:last-child { border-bottom: none; margin-bottom: 0; }
   
   .section-label {
     display: inline-block;
     font-family: var(--mono); font-size: 0.7rem;
     color: var(--green); letter-spacing: 0.15em;
     margin-bottom: 0.75rem;
     background: var(--green-soft);
     padding: 0.2rem 0.6rem;
     border-radius: var(--radius);
   }
   
   .section-heading {
     font-size: 1.1rem; line-height: 1.6;
     margin-bottom: 1.5rem;
     text-shadow: 0 2px 12px rgba(74, 222, 128, 0.15);
   }
   
   .article p { margin-bottom: 1.25rem; font-size: 0.95rem; line-height: 1.85; color: var(--text-2); }
   .article strong { color: var(--text); font-weight: 600; }
   
   .article ul { margin: 1.5rem 0 1.5rem 1.5rem; list-style: none; }
   .article ul li { position: relative; margin-bottom: 0.75rem; color: var(--text-2); padding-left: 1.25rem; }
   .article ul li::before { content: '»'; position: absolute; left: 0; top: 0; color: var(--green); font-weight: bold; }
   
   .article a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(6, 182, 212, 0.3); text-underline-offset: 3px; transition: var(--transition); }
   .article a:hover { color: #fff; text-decoration-color: var(--cyan); }
   
   /* DATA TABLE */
   .data-table {
     width: 100%; border-collapse: collapse;
     margin: 2rem 0; font-size: 0.85rem;
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     overflow: hidden;
   }
   .data-table th, .data-table td { padding: 0.9rem 1.25rem; text-align: left; border-bottom: 1px solid var(--border); }
   .data-table th { background: var(--bg-3); color: var(--text); font-family: var(--mono); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; }
   .data-table td { color: var(--text-2); }
   .data-table tbody tr:last-child td { border-bottom: none; }
   .data-table tbody tr:hover { background: rgba(74, 222, 128, 0.03); }
   
   /* WARN BOX */
   .warn-box { background: var(--gold-soft); border: 1px solid rgba(245, 158, 11, 0.25); border-left: 4px solid var(--gold); padding: 1.25rem 1.5rem; border-radius: var(--radius); margin: 1.5rem 0; }
   .warn-box p { margin: 0; color: var(--text); }
   .warn-box strong { color: var(--gold); display: block; margin-bottom: 0.3rem; }
   
   /* CONTACT CARD */
   .contact-card { display: flex; align-items: center; gap: 1rem; background: var(--bg-card); border: 1px solid var(--border); padding: 1rem 1.5rem; border-radius: var(--radius-lg); text-decoration: none; transition: var(--transition); max-width: 400px; }
   .contact-card:hover { border-color: var(--green-muted); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
   .contact-card span { display: block; font-size: 0.7rem; color: var(--text-3); font-family: var(--mono); }
   .contact-card strong { display: block; font-size: 1rem; color: var(--text); margin-top: 0.25rem; }
   
   /* ============================================================
      FOOTER
      ============================================================ */
   .site-footer { margin-top: auto; background: var(--bg-2); border-top: 1px solid var(--border); }
   .footer-inner-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; padding: 3.5rem 0 2.5rem; }
   .footer-brand .footer-logo { font-family: var(--pixel); font-size: 0.65rem; color: var(--green); display: block; margin-bottom: 0.85rem; text-shadow: 0 0 12px rgba(74, 222, 128, 0.45); }
   .footer-brand p { font-size: 0.875rem; color: var(--text-3); line-height: 1.85; max-width: 280px; }
   .footer-col h4 { font-family: var(--pixel); font-size: 0.5rem; color: var(--text-2); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; }
   .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
   .footer-col li { margin-bottom: 0; }
   .footer-col a { font-size: 0.875rem; color: var(--text-3); text-decoration: none; transition: color var(--dur-base) var(--ease); }
   .footer-col a:hover { color: var(--green); }
   
   .footer-bottom-bar { border-top: 1px solid var(--border); background: rgba(6,11,6,0.6); }
   .footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 1rem 0; }
   .footer-bottom-inner small { font-size: 0.78rem; color: var(--text-3); }
   
   
   /* ============================================================
      RESPONSIVE: TABLET (Max 1024px)
      ============================================================ */
   @media (max-width: 1024px) {
     .content-wrap {
       /* Reduce gap on smaller screens */
       gap: 3rem;
     }
     
     .footer-inner-grid {
       grid-template-columns: 1fr 1fr;
       gap: 2.5rem;
     }
     
     /* Hide brand description text on tablet to save space if needed, or keep */
     .footer-brand {
       grid-column: 1 / -1; /* Brand takes full width */
     }
   }
   
   /* ============================================================
      RESPONSIVE: TABLET / SMALL DESKTOP (Max 960px)
      ============================================================ */
   @media (max-width: 960px) {
     .mobile-menu-toggle { display: flex; }
     .main-nav {
       position: fixed; top: 68px; left: 0; right: 0;
       background: rgba(6, 11, 6, 0.98); backdrop-filter: blur(20px);
       padding: 1.5rem; visibility: hidden; opacity: 0; pointer-events: none;
       transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease);
       border-bottom: 1px solid var(--border); z-index: 199;
     }
     .main-nav.open { visibility: visible; opacity: 1; pointer-events: auto; }
     body.menu-open { overflow: hidden; }
     
     .main-nav ul {
       flex-direction: column; padding: 2rem;
       gap: 1.5rem; align-items: center;
     }
     .main-nav a { font-size: 1rem; }
     .nav-cta { padding: 0.6rem 1.5rem !important; }
   
     /* --- Layout Shift: Sidebar to Top --- */
     .content-wrap {
       grid-template-columns: 1fr;
       gap: 0; /* Remove gap */
     }
   
     /* TOC becomes horizontal scrollable bar */
     .toc {
       position: relative; top: 0;
       margin-bottom: 2.5rem;
       border-bottom: 1px solid var(--border);
       padding-bottom: 1.5rem;
     }
     
     .toc-title { 
       display: block; 
       margin-bottom: 1rem; 
       text-align: center; 
     }
   
     .toc ul {
       flex-direction: row;
       flex-wrap: nowrap;
       overflow-x: auto;
       justify-content: flex-start;
       gap: 0.75rem;
       padding-bottom: 0.5rem; /* Space for scrollbar */
       /* Hide scrollbar aesthetic */
       -ms-overflow-style: none;  
       scrollbar-width: none;  
     }
     .toc ul::-webkit-scrollbar { display: none; }
   
     .toc a {
       border-left: none;
       border: 1px solid var(--border);
       border-radius: 999px;
       padding: 0.5rem 1.2rem;
       white-space: nowrap;
       font-size: 0.8rem;
       flex-shrink: 0; /* Prevent crushing */
     }
     .toc a.active {
       border-color: var(--green);
       background: var(--green-soft);
     }
   }
   
   /* ============================================================
      RESPONSIVE: MOBILE (Max 640px)
      ============================================================ */
   @media (max-width: 640px) {
     .container { padding: 0 1rem; }
     
     /* Hero Adjustments */
     .page-hero { padding: 3rem 0 2.5rem; }
     .page-title { font-size: 1.45rem; }
     .page-sub { font-size: 1rem; }
     
     .hero-stats {
       flex-direction: column;
       align-items: flex-start;
       gap: 0.5rem;
     }
     
     /* Article Typography */
     .article p { font-size: 0.9rem; }
     .section-heading { font-size: 0.95rem; }
     
     /* Table Responsive: Scrollable */
     .data-table {
       display: block;
       overflow-x: auto;
       white-space: nowrap;
       border-radius: var(--radius); /* Smaller radius on mobile */
     }
     .data-table th, .data-table td {
       padding: 0.75rem 1rem;
       font-size: 0.8rem;
     }
     
     /* Footer Stack */
     .footer-inner-grid {
       grid-template-columns: 1fr;
       text-align: center;
       gap: 2rem;
     }
     .footer-brand p { margin: 0 auto; max-width: 100%; }
     .footer-col h4 { margin-top: 1rem; }
     .footer-bottom-inner { flex-direction: column; text-align: center; }
     
     /* Contact Card full width */
     .contact-card { max-width: 100%; }
   }
   
   /* ── High contrast / forced colors ── */
   @media (forced-colors: active) {
     .contact-card, .warn-box { border: 1px solid ButtonText; }
   }
/* ═══════════════════════════════════════════════════
   MOBILE OVERFLOW — FINAL GUARD
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  img, video, iframe, canvas {
    max-width: 100% !important;
  }
}