:root{
  --accent:#2563eb;
  --bg: #0b1220;
  --panel: #0f1724;
  --muted: #9aa4b2;
  --accent: #7c9cff;
  --accent-2: #7ee4b8;
  --card: #0b1320;
  --text: #e6eef8;
  --muted-2: #98a2b3;
  --glass: rgba(255,255,255,0.02);
  --border: rgba(255,255,255,0.06);
  --control-bg: rgba(255,255,255,0.06);
}

/* Custom scrollbars: modern, subtle, and themed. Supports WebKit (Chromium/Safari)
   and Firefox where possible. Keeps a thin footprint and a rounded thumb with
   a soft gradient that matches the site's accent colors. */
:root{
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(124,156,255,0.9) transparent; /* Firefox thumb track */
}

/* WebKit browsers */
*::-webkit-scrollbar{ width:12px; height:12px }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  border: 3px solid rgba(0,0,0,0); /* create padding so thumb doesn't touch track */
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
*::-webkit-scrollbar-thumb:hover{ filter:brightness(0.95); }

/* Slightly different, more muted variant for large scrollable panes */
.sidebar::-webkit-scrollbar-thumb, .main-content::-webkit-scrollbar-thumb{ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); }
.sidebar{ scrollbar-width: thin; scrollbar-color: rgba(124,156,255,0.9) transparent }
.main-content{ scrollbar-width: thin; scrollbar-color: rgba(124,156,255,0.9) transparent }


*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,system-ui,Arial,Helvetica,sans-serif;margin:0;background:var(--bg);color:var(--text);line-height:1.6}
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;background:linear-gradient(180deg, var(--glass), transparent);backdrop-filter: blur(6px);border-bottom:1px solid var(--border)}
  .topbar .brand h1{margin:0;font-size:18px;color:var(--accent-2)}
  .topbar .brand .subtitle{font-size:12px;color:var(--muted)}
  .topbar .controls{display:flex;gap:10px;align-items:center}
  .topbar input{padding:8px 10px;border-radius:8px;border:1px solid var(--border);min-width:220px;background:transparent;color:var(--text)}
  .topbar input::placeholder{color:var(--muted-2)}
  .topbar button{padding:8px 12px;border-radius:8px;border:0;background:var(--accent);color:#071428}

  .docs-layout{display:grid;grid-template-columns:260px 1fr 260px;gap:20px;padding:22px;align-items:start}
    /* Constrain the overall docs area so sidebars can be independently scrollable
      and won't grow the page taller than the viewport. The topbar occupies
      some vertical space; we reserve room for it here. */
    .docs-layout{min-height:calc(100vh - 64px)}
    .sidebar{background:linear-gradient(180deg, var(--glass), transparent);border-radius:12px;padding:12px;border:1px solid var(--border);position:sticky;top:18px;max-height:calc(100vh - 112px);overflow:auto}
  .sidebar.left{padding:10px}
  .sidebar.right{padding:14px}
  .nav-inner input#search{width:100%;padding:8px;border-radius:8px;border:1px solid var(--border);margin-bottom:10px;background:transparent;color:var(--text)}
    /* Ensure the nav contents scroll internally when large so the aside stays
      within the viewport. Reserve vertical space for the search box and other
      controls by capping the nav list height. */
      .nav-inner{display:flex;flex-direction:column}
      /* Only make the top-level nav list scrollable; nested .nav-children should
        expand naturally so individual groups don't show their own scrollbars. */
      .nav-inner > ul{list-style:none;padding:6px 4px;margin:0;overflow:auto;max-height:calc(100vh - 220px)}
      /* Ensure nested group lists don't create their own scrollbars. When
        collapsed we remove them from layout entirely so nothing leaves a
        gap; this avoids accidental empty-space clicks and guarantees items
        below move up immediately. Note: this disables the height animation
        for collapsed lists but yields correct layout behavior. */
      /* Allow the JS to control the child list display; avoid forcing
        `display` with `!important` which can override inline styles and
        cause nested groups to behave unpredictably across browsers. Keep
        transform/opacity rules for the collapse animation but do not
        force `display` here. */
      .nav-inner .nav-children{ overflow: visible; max-height: none }
      .nav-group.collapsed > .nav-children{ max-height: 0; opacity: 0; transform: translateY(-6px) scaleY(.98); padding: 0; margin: 0; overflow: hidden; }
      .nav-group:not(.collapsed) > .nav-children{ max-height: 1000px; opacity: 1; transform: none; padding-left: 10px; margin: 6px 0 }
      /* Forcefully remove any leftover spacing for collapsed groups so
        they consume no vertical layout space. Use higher-specificity
        selectors and !important to override earlier rules. */
      .nav-inner .nav-group.collapsed{ border-bottom: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: auto !important; }
      .nav-inner .nav-group.collapsed .group-title{ margin: 0 !important; padding: 0 !important; }
      .nav-inner .nav-group.collapsed .group-toggle{ padding: 6px 8px !important; }
      /* ensure adjacent groups don't maintain top spacing */
      .nav-inner .nav-group.collapsed + .nav-group{ margin-top: 0 !important; }
      /* stronger selector for immediate top-level groups to avoid specificity issues */
      .nav-inner > ul > .nav-group.collapsed{ border-bottom: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
      .nav-inner > ul > .nav-group.collapsed > .group-title{ margin: 0 !important; padding: 0 !important; }
      /* Top-level collapsed groups should not occupy layout space. The JS
        sets inline `display:none` on initial render and toggles it on
        user interaction; the CSS here avoids forcing display via
        `!important` so the inline style can take precedence when needed. */
  .nav-inner li{margin:6px 0}
    /* Make only the actionable controls inside list items interactive.
      This prevents clicks on empty gaps inside the nav from activating
      toggles or links. */
    .nav-inner li{ pointer-events: none }
    .nav-inner li a, .nav-group .group-toggle{ pointer-events: auto }
  .nav-inner a{display:block;padding:8px 10px;border-radius:8px;color:var(--muted);text-decoration:none;transition:all .12s ease}
  /* Grouped nav */
  .nav-group{margin:6px 0}
  /* subtle separator between groups to help distinguish folders */
  .nav-group:not(:last-child){
    border-bottom:1px solid rgba(124,156,255,0.04);
    padding-bottom:8px;
    margin-bottom:8px;
  }
  .nav-group .group-title{padding:0 6px}
  .group-toggle{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 10px;border-radius:8px;background:transparent;border:0;color:var(--muted);cursor:pointer;font-weight:600;font-size:0.95rem}
  /* chevron: rotate + slide for expanded state; also subtle fade via opacity */
  .group-toggle::before{content:'▸';display:inline-block;transform:translateX(0) rotate(0deg);transition:transform .18s cubic-bezier(.2,.9,.2,1), opacity .14s ease;opacity:0.9;font-size:0.9em}
  /* rotate and slide chevron when expanded */
  .nav-group:not(.collapsed) > .group-title > .group-toggle::before{transform:translateX(4px) rotate(90deg);opacity:1}
  .group-toggle:hover{background:rgba(124,156,255,0.04);color:var(--text)}
  /* make module links match group font size for consistent hierarchy */
  .nav-inner a{font-size:0.95rem}
  .nav-children{list-style:none;padding-left:10px;margin:6px 0;overflow:hidden;transform-origin:top;transition:transform .18s ease,opacity .18s ease, max-height .18s ease, padding .18s ease, margin .18s ease}
  /* smooth collapse: remove height, padding and margin so items below move up. */
  .nav-group.collapsed > .nav-children{display:block !important; max-height:0; opacity:0; transform:translateY(-6px) scaleY(.98); padding:0; margin:0; overflow:hidden}
  .nav-group:not(.collapsed) > .nav-children{max-height:1000px; opacity:1; transform:none; padding-left:10px; margin:6px 0}
  .nav-inner a:hover{background:rgba(124,156,255,0.06);color:var(--text);transform:translateX(4px)}
  .nav-inner a.active{background:rgba(124,156,255,0.12);color:var(--accent-2);box-shadow:inset 0 0 0 1px var(--border)}

  .main-content{background:linear-gradient(180deg, var(--glass), transparent);border-radius:12px;padding:28px;border:1px solid var(--border);min-height:60vh;color:var(--text)}
  .main-content .hero{color:var(--muted)}
  .main-content h1, .main-content h2{color:var(--accent-2);margin-top:0}
  .main-content h3, .main-content h4{color:var(--text)}
  .main-content p{color:var(--muted-2)}

  /* Heading anchor (link) styling: subtle, hidden until hover */
  .main-content .heading-link{ 
    margin-left:8px; 
    font-size:0.85em; 
    color:var(--accent-2); 
    text-decoration:none; 
    background:transparent; 
    padding:2px 6px; 
    border-radius:6px; 
    border:0; 
    opacity:0; 
    transform:translateY(0); 
    transition:opacity .16s ease, transform .12s ease, background .12s ease; 
    vertical-align:middle;
  }
  .main-content h1:hover .heading-link,
  .main-content h2:hover .heading-link,
  .main-content h3:hover .heading-link,
  .main-content h4:hover .heading-link,
  .main-content h5:hover .heading-link,
  .main-content h6:hover .heading-link{
    opacity:0.95; 
    background: rgba(124,156,255,0.06);
    transform:translateY(-2px);
  }
  .main-content .heading-link:focus{ outline:2px solid rgba(124,156,255,0.14); opacity:1 }

  .taglist{display:flex;flex-wrap:wrap;gap:8px}
  .tag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:transparent;color:var(--muted);font-size:13px;border:1px solid var(--border);cursor:pointer;transition:all .12s ease}
  .tag:hover{background:var(--glass);color:var(--text)}
  .tag.active{background:linear-gradient(90deg,var(--accent) 0%, var(--accent-2) 100%);color:#071428;border:0;box-shadow:0 4px 18px rgba(0,0,0,0.45)}

  .cmd-block{background:#071426;color:#dbeefd;padding:12px;border-radius:8px;font-family:monospace;overflow:auto}
  .cmd-row{display:flex;gap:8px;align-items:center;margin-top:12px}
  .copy-btn{background:var(--control-bg);color:var(--text);padding:6px 8px;border-radius:6px;border:0}

  /* smaller screens */
  @media (max-width:1000px){
    .docs-layout{grid-template-columns:1fr;}
    .sidebar{position:relative;height:auto}
  }

  @media print{
    .topbar,.sidebar,button,input{display:none}
    body{background:#fff}
  }

/* responsive */
@media (max-width:1000px){
  .docs-layout{grid-template-columns:1fr;}
  .sidebar{position:relative;height:auto}
}

@media print{
  .topbar,.sidebar,button,input{display:none}
  body{background:#fff}
}

/* Theme variants: light overrides for users who prefer it */
:root[data-theme='light']{
  --bg: #f7fafc;
  --panel: #ffffff;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-2: #3b82f6;
  --card: #ffffff;
  --text: #0f1720;
  --muted-2: #475569;
  --glass: rgba(15,23,32,0.04);
  --border: rgba(15,23,32,0.12);
  --control-bg: rgba(15,23,32,0.06);
}

/* Animations */
.main-content, .sidebar{transition:background-color .22s ease, color .18s ease, border-color .18s ease, transform .12s ease}
.fade-in{animation:fadeIn .28s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Theme toggle button */
#themeToggle{background:transparent;border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:8px;cursor:pointer;transition:all .12s ease}
#themeToggle:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.35)}

/* small helpers */
.muted{color:var(--muted-2)}

/* Content link styling: use a consistent accent color and don't change on :visited/:active */
.main-content a{
  color: var(--accent-2);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.main-content a:visited,
.main-content a:active,
.main-content a:focus{
  color: var(--accent-2);
}
.main-content a:hover{
  color: var(--accent-2);
  text-decoration: underline;
}

/* Code block and highlight.js overrides — use theme variables so code matches site theme */
.main-content pre, .main-content pre code, .cmd-block {
  background: var(--card);
  color: var(--text);
  border-radius: 8px;
  padding: 12px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
  font-size: 0.95rem;
}
.main-content pre code { background: transparent; color: inherit; }

/* Highlight.js applies its own background — make it inherit so themes align */
.hljs, .hljs * { background: transparent !important; color: inherit !important; }

/* Selection tint for code */
.main-content pre ::selection, .main-content code ::selection { background: rgba(124,156,255,0.12); }

/* Ensure copy button remains visible on both themes */
.copy-btn{background:var(--control-bg);color:var(--text);border-radius:6px}

/* Crafting UI styles */
.crafting-trigger{display:inline-block;margin:10px 0;padding:8px 10px;border-radius:8px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%);color:#071428;border:0;cursor:pointer}
.crafting-modal{position:fixed;inset:0;background:rgba(3,6,12,0.6);display:flex;align-items:center;justify-content:center;z-index:1200}
.crafting-panel{background:var(--panel);padding:18px;border-radius:12px;border:1px solid var(--border);width:min(680px,95%);max-width:680px}
.craft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.craft-cell{background:var(--card);border:1px dashed var(--border);min-height:56px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:6px;font-family:ui-monospace,monospace;color:var(--text);cursor:pointer}
.craft-cell.empty{opacity:0.6;color:var(--muted)}
.craft-controls{display:flex;gap:8px;justify-content:space-between;align-items:center}
.craft-output{background:var(--card);padding:8px 10px;border-radius:8px;border:1px solid var(--border);min-height:40px;display:flex;align-items:center}
.craft-btn{padding:8px 12px;border-radius:8px;border:0;background:var(--accent-2);color:#071428;cursor:pointer}
.craft-secondary{background:transparent;border:1px solid var(--border);color:var(--text)}

/* Crafting preview (non-interactive) */
.craft-preview{margin:14px 0;padding:12px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.craft-preview{margin:14px 0;padding:12px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.craft-preview .grid{display:grid;grid-template-columns:repeat(3, var(--tile-size,72px));gap:8px;justify-content:start}
.craft-preview .cell{width:var(--tile-size,72px);height:var(--tile-size,72px);border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);display:flex;align-items:center;justify-content:center;color:var(--text);font-family:ui-monospace,monospace;cursor:default;border:1px solid rgba(255,255,255,0.03);position:relative;overflow:hidden}
.craft-preview .cell.empty{opacity:0.5;color:var(--muted)}
.craft-preview .legend{margin-top:8px;color:var(--muted);font-size:0.9rem}

/* Visual crafting mockup (preview and modal output) */
.crafting-visual{display:flex;align-items:center;gap:12px}
.crafting-visual{display:flex;align-items:center;gap:12px}
.crafting-visual .grid-small{display:grid;grid-template-columns:repeat(3, var(--tile-small,40px));gap:6px}
.crafting-visual .grid-small .cell{width:var(--tile-small,40px);height:var(--tile-small,40px);border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);display:flex;align-items:center;justify-content:center;color:var(--text);font-family:ui-monospace,monospace;border:1px solid rgba(255,255,255,0.03);position:relative;overflow:hidden}
.crafting-visual .grid-small .cell.empty{opacity:0.5;color:var(--muted)}
.crafting-visual .arrow{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px}
.crafting-visual .output-slot{width:56px;height:56px;border-radius:8px;background:var(--panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:6px}
.crafting-visual .output-slot .name{margin-top:6px;font-size:0.8rem;color:var(--muted);text-align:center}

/* Slightly larger variant for modal */
.crafting-modal .crafting-visual .grid-small .cell{width:56px;height:56px}
.crafting-modal .crafting-visual .arrow{font-size:22px}
.crafting-modal .crafting-visual .output-slot{width:72px;height:72px}

/* Upscale small pixel-art item images for preview and output while preserving crisp edges */
.crafting-visual img,
.craft-preview .grid img {
  /* Let layout control size; use pixelated scaling for crisp pixels */
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-pixelated;
  image-rendering: -webkit-optimize-contrast;
  display: block;
}

/* Make the preview grid images a bit larger in the standalone preview (non-modal) */
.craft-preview .grid .cell img { width: 80%; height: 80%; }

/* Make the output image larger and more prominent */
.crafting-visual .output-slot img { width: 90%; height: 90%; }

/* Optional: when in modal, give the output an even larger scale */
.crafting-modal .crafting-visual .output-slot img { width: 72px; height: 72px; }

/* add a subtle inset to the output slot to mimic an icon tile */
.crafting-visual .output-slot{box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 6px 18px rgba(0,0,0,0.35)}

/* Decorative tile frame for tiles (gives them an in-game icon plate feel) */
.visual-tile::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 6px 18px rgba(0,0,0,0.35);
  pointer-events: none;
}
.visual-tile .tile-overlay{
  position:absolute;right:6px;top:6px;width:18px;height:18px;opacity:0.95;display:flex;align-items:center;justify-content:center;pointer-events:none
}
.tile-icon{width:18px;height:18px;display:block}

/* Upgrader / Crafter icon styling */
.icon-gear{filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5));}
.icon-hammer{filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5));}

/* Small textual label inside tiles to indicate block/type (e.g. "Crafting Table") */
.visual-label{
  position:absolute;
  left:8px;
  top:8px;
  background: rgba(0,0,0,0.45);
  color: var(--text);
  font-size: 11px;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  pointer-events: none;
  white-space: nowrap;
}
/* Ensure label sits above image and overlays */
.visual-label{ z-index: 6; font-weight:600; text-shadow: 0 1px 0 rgba(0,0,0,0.6); }
.tile-overlay{ z-index: 5; }
.visual-tile img{ position: relative; z-index: 1; }

/* Make empty tiles visible: faint inset and subtle grid hint */
.visual-tile.empty{ background: linear-gradient(180deg, rgba(255,255,255,0.005), transparent); opacity: 0.95; }
.visual-tile.empty::after{ content: ''; position: absolute; inset: 10%; border-radius:6px; border: 1px dashed rgba(255,255,255,0.03); }
/* small central hint for empty tiles to match the screenshots */
.tile-empty{ width:40%; height:40%; border-radius:4px; background: rgba(255,255,255,0.02); box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); }
/* prevent label overflow and ensure legibility on small tiles */
.visual-label{ max-width: calc(var(--tile-output,64px) - 14px); overflow:hidden; text-overflow:ellipsis; }

/* Caption under previews (always visible, outside the tile) */
.visual-caption{
  margin-top:8px;
  display:block;
  text-align:center;
  font-size:13px;
  color:var(--muted-2);
  background: rgba(0,0,0,0.02);
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.03);
}

.craft-preview, .upgrade-preview{ display:inline-block; }

/* Right-side visuals panel for module (crafting mockup + GIF) */
.module-visuals{float:right;width:420px;max-width:44%;margin-left:20px;display:flex;flex-direction:column;gap:14px}
.module-visuals .craft-preview, .module-visuals .crafting-visual{width:100%}
.module-visuals .big-media{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.45);object-fit:cover}

/* When an aside contains a preview that should sit under the image, use
  stacked layout: visuals span full width (no float) and stack vertically. */
.module-visuals.stacked{ float:none; width:100%; max-width:100%; margin-left:0; display:flex; flex-direction:column; gap:14px }

/* Ensure videos and iframes fill the visuals area nicely */
.module-visuals video, .module-visuals iframe, .module-visuals picture { width:100%; height:auto; display:block; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.45); }

/* Upgrade UI preview */
.upgrade-preview{margin:8px 0;padding:10px;border-radius:8px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(0,0,0,0.04), transparent);}
.upgrade-ui{display:flex;align-items:center;gap:10px;padding:6px}
.upgrade-inputs{display:flex;gap:8px}
.up-slot{width:var(--tile-small,40px);height:var(--tile-small,40px);border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.03);position:relative;overflow:hidden}
.up-slot.empty{opacity:0.45}
.up-arrow{color:var(--muted);font-size:18px}
.up-output{width:var(--tile-output,64px);height:var(--tile-output,64px);border-radius:10px;background:var(--panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.upgrade-preview img{image-rendering: pixelated; image-rendering: -moz-crisp-edges;}

/* Hide visuals container when empty */
.module-visuals:empty{display:none}

/* Responsive: stack visuals under content on small screens */
@media (max-width:1000px){
  .module-visuals{float:none;width:100%;max-width:100%;margin-left:0}
  .crafting-visual .grid-small .cell{width:48px;height:48px}
  .crafting-visual .output-slot img{width:72px;height:72px}
}

/* Large GIF styling - reusable class */
.large-gif {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Apply the same sizing to all GIF images site-wide so existing markdown doesn't need edits */
img[src$=".gif"] {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Page navigation (previous / next) shown at the end of module pages */
.page-nav{ display:flex; gap:12px; justify-content:space-between; margin-top:24px }
.page-nav button{ flex:1; padding:10px 14px; border-radius:8px; border:1px solid var(--border); background:var(--control-bg); color:var(--text); cursor:pointer; font-weight:600 }
.page-nav button:disabled{ opacity:0.45; cursor:default }
.page-nav .btn-prev{ text-align:left }
.page-nav .btn-next{ text-align:right }