@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/vt323-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/vt323-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/press-start-2p-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/press-start-2p-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: dark;
    --dirt-dark: #4a2f1c;
    --dirt: #6b4527;
    --dirt-light: #8a5a36;
    --cave-dark: #1c1a17;
    --cave: #2b2722;
    --cave-mid: #3a352e;
    --cave-light: #55503f;
    --rock-dark: #4a4a4a;
    --rock: #6e6e6e;
    --rock-light: #9a9a9a;
    --lava-dark: #8a1a0c;
    --lava: #d83920;
    --lava-glow: #ff6a2c;
    --moss: #4a6b2f;
    --moss-light: #7a9a4a;
    --bone: #e8dcc4;
    --ink: #f4ecd8;
    --ink-muted: #b8ad94;
    --line: #2a2620;
    --shadow: 0 2px 0 #00000040, 0 6px 18px #00000060;
    --pixel-font: "VT323", "Courier New", monospace;
    --display-font: "Press Start 2P", monospace;
    --body-font: "Inter", system-ui, sans-serif;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    height: 100%;
    background: var(--cave-dark);
    color: var(--ink);
    font-family: var(--body-font);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    background-image:
      radial-gradient(circle at 20% 30%, #3a352e55 0%, transparent 40%),
      radial-gradient(circle at 80% 70%, #3a352e55 0%, transparent 40%),
      repeating-linear-gradient(45deg, #1c1a17 0 8px, #15130f 8px 16px),
      repeating-linear-gradient(-45deg, transparent 0 12px, #0a0907 12px 24px);
    background-attachment: fixed;
  }

  /* --- layout --- */
  .app {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 280px 1fr 320px;
    grid-template-areas:
      "header header header"
      "sidebar tree inspector";
    height: 100vh;
    gap: 0;
  }

  /* mobile-only tab bar (hidden on desktop) */
  .m-tabs { display: none; }

  @media (max-width: 1024px) {
    .app {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto;
      grid-template-areas: "header" "tree" "sidebar" "inspector";
      height: auto;
      min-height: 100vh;
    }
    html, body { overflow: auto; }
    /* tree gets a real height on mobile — was collapsing to 0px */
    .tree-area { height: 62vh; min-height: 380px; }
    .sidebar { max-height: 46vh; min-height: 0; }
    .inspector { max-height: 56vh; min-height: 0; }
    /* mobile: list & info jadi tab (ITEMS / INFO) — info card gak ketimbun di bawah 199 item */
    .m-tabs {
      display: flex;
      position: sticky;
      top: 0;
      z-index: 6;
      background: var(--cave-mid);
      border-bottom: 3px solid var(--line);
      box-shadow: 0 4px 0 #00000040;
    }
    .m-tab {
      flex: 1;
      font-family: var(--display-font);
      font-size: 10px;
      letter-spacing: 1px;
      padding: 12px 8px;
      background: transparent;
      border: none;
      border-right: 2px solid var(--line);
      color: var(--ink-muted);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .m-tab:last-child { border-right: none; }
    .m-tab.is-active {
      background: var(--cave);
      color: var(--bone);
      box-shadow: inset 0 -3px 0 var(--lava);
    }
    .inspector { display: none; }
    .app.view-info .sidebar { display: none; }
    .app.view-info .inspector { display: block; }

    /* tidy two-row header: brand + actions on top, search full-width below.
       Selectors are scoped (.app > header etc.) because the BASE header/search
       rules in this file come LATER in source order — plain .search-wrap /
       header / #search here would lose the cascade and silently revert. */
    .app > header { flex-wrap: wrap; row-gap: 12px; padding: 12px 16px; }
    .app > header .brand { flex: 1; min-width: 0; }
    .app > header .header-actions { margin-left: auto; }
    .app > header .search-wrap {
      order: 3; flex-basis: 100%; max-width: 100%; margin: 0;
    }
    .app > header #search { padding: 11px 14px 11px 40px; font-size: 17px; }
    .tree-hint { display: none; }
  }

  /* --- header --- */
  header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    background: linear-gradient(180deg, var(--cave-mid) 0%, var(--cave) 100%);
    border-bottom: 3px solid var(--line);
    box-shadow: 0 4px 0 #00000040;
    z-index: 5;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .brand h1 {
    font-family: var(--display-font);
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--bone);
    text-shadow: 2px 2px 0 #000;
  }

  .search-wrap {
    flex: 1;
    max-width: 480px;
    margin: 0 24px;
    position: relative;
  }
  .search-wrap svg {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-muted);
    width: 18px; height: 18px;
  }
  #search {
    width: 100%;
    padding: 10px 14px 10px 40px;
    background: var(--cave-dark);
    border: 2px solid var(--cave-light);
    color: var(--ink);
    font-family: var(--pixel-font);
    font-size: 18px;
    outline: none;
    transition: border-color 150ms;
  }
  #search:focus { border-color: var(--lava); }

  .header-actions { display: flex; align-items: center; gap: 12px; }

  .back-link {
    font-family: var(--pixel-font);
    font-size: 16px;
    color: var(--ink-muted);
    text-decoration: none;
    border: 2px solid var(--cave-light);
    padding: 6px 10px;
    transition: color 120ms, border-color 120ms;
  }
  .back-link:hover { color: var(--bone); border-color: var(--lava); }

  :focus-visible { outline: 2px solid var(--lava); outline-offset: 2px; }

  /* --- buttons --- */
  .btn {
    font-family: var(--display-font);
    font-size: 10px;
    letter-spacing: 0.5px;
    padding: 10px 14px;
    border: 2px solid;
    cursor: pointer;
    text-transform: uppercase;
    transition: transform 100ms, box-shadow 100ms;
    box-shadow: 0 3px 0 #00000060;
  }
  .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #00000060; }

  .btn-secondary {
    background: var(--cave-light);
    color: var(--bone);
    border-color: var(--rock-dark);
  }
  .btn-secondary:hover { background: var(--rock); }

  .btn-ghost {
    background: transparent;
    color: var(--ink-muted);
    border-color: var(--cave-light);
  }

  /* --- sidebar --- */
  .sidebar {
    grid-area: sidebar;
    background: linear-gradient(180deg, var(--cave) 0%, var(--cave-dark) 100%);
    border-right: 3px solid var(--line);
    overflow-y: auto;
    padding: 16px;
  }
  .sidebar h2 {
    font-family: var(--display-font);
    font-size: 9px;
    color: var(--ink-muted);
    margin-bottom: 12px;
    letter-spacing: 1px;
  }

  /* --- sidebar filter dropdown --- */
  .sidebar-filter {
    width: 100%;
    padding: 7px 10px;
    background: var(--cave-dark);
    border: 2px solid var(--cave-light);
    color: var(--ink-muted);
    font-family: var(--pixel-font);
    font-size: 15px;
    outline: none;
    margin-bottom: 6px;
    cursor: pointer;
  }
  .sidebar-filter:focus { border-color: var(--lava); }

  /* --- sidebar sort dropdown --- */
  .sidebar-sort {
    width: 100%;
    padding: 7px 10px;
    background: var(--cave-dark);
    border: 2px solid var(--cave-light);
    color: var(--ink-muted);
    font-family: var(--pixel-font);
    font-size: 15px;
    outline: none;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .sidebar-sort:focus { border-color: var(--lava); }
  .item-list { list-style: none; }
  .item-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background 120ms, border-color 120ms;
    font-family: var(--pixel-font);
    font-size: 17px;
    color: var(--bone);
  }
  .item-list li:hover {
    background: var(--cave-mid);
    border-color: var(--cave-light);
  }
  .item-list li.active {
    background: var(--dirt);
    border-color: var(--lava);
    color: var(--bone);
  }
  /* scrollbar hidden — see global rule below */

  /* --- tree --- */
  .tree-area {
    grid-area: tree;
    position: relative;
    overflow: hidden;
    background: var(--cave-dark);
    background-image:
      radial-gradient(circle at 30% 40%, #4a3a2a40 0%, transparent 35%),
      radial-gradient(circle at 70% 60%, #d8392015 0%, transparent 30%);
  }
  #tree-svg {
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
  }
  #tree-svg:active { cursor: grabbing; }

  .tree-controls {
    position: absolute;
    bottom: 18px; left: 18px;
    display: flex;
    gap: 6px;
    background: var(--cave);
    border: 2px solid var(--line);
    padding: 6px;
    box-shadow: var(--shadow);
  }
  .tree-controls button {
    width: 32px; height: 32px;
    background: var(--cave-mid);
    border: 1px solid var(--cave-light);
    color: var(--bone);
    cursor: pointer;
    font-family: var(--pixel-font);
    font-size: 18px;
  }
  .tree-controls button:hover { background: var(--dirt); }

  .tree-hint {
    position: absolute;
    top: 18px; right: 18px;
    font-family: var(--pixel-font);
    font-size: 16px;
    color: var(--ink-muted);
    background: var(--cave);
    padding: 6px 12px;
    border: 2px solid var(--line);
  }

  .empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    text-align: center;
    padding: 20px;
  }
  .empty-state h3 {
    font-family: var(--display-font);
    font-size: 11px;
    color: var(--bone);
    margin-bottom: 10px;
  }
  .empty-state p {
    font-family: var(--pixel-font);
    font-size: 17px;
    max-width: 320px;
  }

  /* --- inspector --- */
  .inspector {
    grid-area: inspector;
    background: linear-gradient(180deg, var(--cave) 0%, var(--cave-dark) 100%);
    border-left: 3px solid var(--line);
    overflow-y: auto;
    padding: 20px;
  }
  .inspector h2 {
    font-family: var(--display-font);
    font-size: 9px;
    color: var(--ink-muted);
    margin-bottom: 14px;
    letter-spacing: 1px;
  }
  .field {
    margin-bottom: 14px;
  }
  .field label {
    display: block;
    font-family: var(--pixel-font);
    font-size: 15px;
    color: var(--ink-muted);
    margin-bottom: 6px;
  }
  .field input, .field select, .field textarea {
    width: 100%;
    padding: 8px 10px;
    background: var(--cave-dark);
    border: 2px solid var(--cave-light);
    color: var(--ink);
    font-family: var(--pixel-font);
    font-size: 16px;
    outline: none;
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--lava);
  }

  .ing-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    margin-bottom: 6px;
  }
  .ing-grid select, .ing-grid input { width: 100%; }
  .ing-grid .combo { width: 100%; }
  .ing-remove {
    background: var(--lava-dark);
    color: var(--bone);
    border: 2px solid var(--lava);
    cursor: pointer;
    font-family: var(--pixel-font);
    font-size: 18px;
    width: 36px;
  }

  .inspector-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
  }
  .inspector-actions .btn { flex: 1; padding: 12px; font-size: 9px; }

  /* --- node styling (SVG) --- */
  .node-rect {
    stroke: var(--cave-dark);
    stroke-width: 3;
    filter: drop-shadow(0 3px 0 #00000080);
    cursor: pointer;
    transition: filter 120ms;
  }
  .node-rect:hover { filter: drop-shadow(0 0 8px var(--lava-glow)) drop-shadow(0 3px 0 #00000080); }
  .node-selected .node-rect { stroke: var(--lava-glow); stroke-width: 4; }

  .node-text {
    font-family: var(--pixel-font);
    font-size: 18px;
    fill: var(--bone);
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: middle;
  }
  .node-sub {
    font-family: var(--pixel-font);
    font-size: 12px;
    fill: var(--ink-muted);
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: middle;
  }
  .edge-line {
    stroke: var(--rock);
    stroke-width: 3;
    fill: none;
  }
  .edge-arrow {
    fill: var(--rock);
  }

  /* --- toast --- */
  .toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--cave);
    color: var(--bone);
    padding: 12px 22px;
    border: 2px solid var(--lava);
    font-family: var(--pixel-font);
    font-size: 17px;
    box-shadow: var(--shadow);
    transition: transform 250ms;
    z-index: 100;
  }
  .toast.show { transform: translateX(-50%) translateY(0); }

  /* ─── Tools button ────────────────────────────────── */
  .tools-btn {
    font-family: var(--pixel-font);
    font-size: 14px;
    color: var(--bone);
    background: transparent;
    border: 2px solid var(--cave-light);
    padding: 6px 10px;
    cursor: pointer;
    transition: color 120ms, border-color 120ms;
  }
  .tools-btn:hover { color: var(--bone); border-color: var(--lava); }

  .pm-bg {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 16px;
  }
  .pm-bg.show { display: flex; }
  .pm-modal {
    width: 100%;
    max-width: 460px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--cave);
    border: 3px solid var(--line);
    box-shadow: var(--shadow);
    padding: 22px;
  }
  .pm-actions { display: flex; gap: 8px; }

  .pm-toolbar { display: flex; gap: 8px; margin-bottom: 8px; }
  .pm-search {
    flex: 1;
    padding: 7px 10px;
    background: var(--cave-dark);
    border: 2px solid var(--cave-light);
    color: var(--ink-muted);
    font-family: var(--pixel-font);
    font-size: 15px;
    outline: none;
  }
  .pm-cl-meta { font-family: var(--pixel-font); font-size: 14px; color: var(--ink-muted); margin-bottom: 8px; }
  .pm-list { max-height: 50vh; overflow-y: auto; }
  .pm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-family: var(--pixel-font);
    font-size: 16px;
    color: var(--bone);
    border-bottom: 1px solid var(--line);
  }
  .pm-row.clickable { cursor: pointer; }
  .pm-row.clickable:hover { background: var(--cave-mid); }
  .pm-row.done { color: var(--ink-muted); text-decoration: line-through; }
  .pm-check { width: 16px; color: var(--moss-light); }
  .pm-empty { font-family: var(--pixel-font); font-size: 15px; color: var(--ink-muted); padding: 12px; text-align: center; }
  .pm-tag { font-family: var(--display-font); font-size: 7px; color: var(--ink-muted); border: 1px solid var(--cave-light); padding: 2px 4px; margin-left: auto; }
  .pm-rar { color: var(--ink-muted); font-size: 14px; }
  .pm-cl-progress { height: 14px; background: var(--cave-dark); border: 2px solid var(--line); margin-bottom: 6px; }
  .pm-cl-bar { height: 100%; background: linear-gradient(90deg, #4a6b2f, #7a9a4a); width: 0%; transition: width 200ms; }

  /* --- rarity badge (inspector) --- */
  .rarity-badge {
    display: inline-block;
    padding: 3px 10px;
    font-family: var(--pixel-font);
    font-size: 15px;
    border: 2px solid;
    margin-bottom: 14px;
  }

  /* --- tree info card (top-left overlay) --- */
  .tree-info-card {
    position: absolute;
    top: 18px; left: 18px;
    background: var(--cave);
    border: 2px solid var(--line);
    box-shadow: var(--shadow);
    padding: 14px 18px;
    z-index: 4;
    min-width: 200px;
  }
  .tree-info-name {
    font-family: var(--display-font);
    font-size: 11px;
    color: var(--bone);
    margin-bottom: 10px;
  }
  .tree-info-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .tree-info-meta .meta-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--pixel-font);
    font-size: 15px;
  }
  .tree-info-meta .meta-label {
    color: var(--ink-muted);
  }
  .tree-info-meta .meta-val {
    color: var(--bone);
    text-align: right;
  }

  /* --- pin star (sidebar + inspector) --- */
  .pin-star {
    cursor: pointer;
    color: var(--ink-muted);
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color 120ms;
    user-select: none;
  }
  .pin-star:hover { color: var(--lava-glow); }
  .pin-star.pinned { color: var(--lava); }

  /* item label in sidebar — takes remaining space, aligned center */
  .item-label {
    flex: 1;
    min-width: 0;
    line-height: 1;
    display: flex;
    align-items: center;
  }

  /* --- farmable indicator dot --- */
  .farm-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border: 1px solid;
    border-radius: 50%;
  }
  .farm-dot.yes { background: var(--moss-light); border-color: var(--moss); }
  .farm-dot.no { background: transparent; border-color: var(--rock); }

  /* --- inspector small tags --- */
  .ins-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-family: var(--pixel-font);
    font-size: 14px;
    border: 1px solid;
    white-space: nowrap;
  }

  /* --- used-in clickable chips --- */
  .used-in-chip {
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
  }
  .used-in-chip:hover {
    background: var(--dirt) !important;
    border-color: var(--lava) !important;
    color: var(--bone) !important;
  }

  /* --- hidden scrollbars (keep scroll, hide native UI) --- */
  .sidebar, .inspector {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sidebar::-webkit-scrollbar,
  .inspector::-webkit-scrollbar { display: none; }