/* default theme is "Terraria Blue" — see [data-theme="blue"] below.
     :root itself carries the "Ember" theme's colors so the page still
     renders correctly for the brief moment before Alpine hydrates and
     sets data-theme on .app. */
  :root{
    --bg: #17110d;
    --bg-panel: #1f1712;
    --stone: #3a322a;
    --stone-light: #524635;
    --ember: #e8763c;
    --ember-dim: #a0512a;
    --copper: #c98a4a;
    --gold: #e0b84a;
    --text: #ede2d0;
    --text-dim: #a89a84;
    --line: #6b5a3e;
    --danger: #c0453a;
    --node-bg: #26201a;
    --node-border: #5a4a34;
    --custom-bg: #251c33;
    --custom-border: #8a5fd6;
    /* "terraria" nodes (the built-in catalog + terraria.wiki imports) are
       meant to read as native, unremarkable items — so instead of a
       hand-picked color per theme, blend that theme's own node/accent
       colors. A custom property's var() refs resolve using whichever
       element the property is actually *declared* on (inheritance just
       copies the already-resolved result down, it doesn't re-substitute
       per descendant) — so this formula has to be repeated in every
       [data-theme] block below rather than declared once, or it'd be stuck
       tinting with this block's (Ember's) colors everywhere. */
    --terraria-border: color-mix(in srgb, var(--node-border), var(--ember) 45%);
    --terraria-bg: color-mix(in srgb, var(--node-bg), var(--ember) 12%);
    --calamity-border: #d1453a;
    --calamity-bg: #2a1210;
  }

  /* "Terraria Blue" — inspired by the game's inventory/HUD panel color. Default theme. */
  [data-theme="blue"]{
    --bg: #0c1220;
    --bg-panel: #121a2c;
    --stone: #263455;
    --stone-light: #34456d;
    --ember: #6fb2e8;
    --ember-dim: #3d7bbd;
    --copper: #7fd1c9;
    --gold: #f2d675;
    --text: #e7edf7;
    --text-dim: #8ea0c2;
    --line: #3c4c73;
    --danger: #e05a5a;
    --node-bg: #16203a;
    --node-border: #34456d;
    --custom-bg: #251c40;
    --custom-border: #b07fe8;
    --terraria-border: color-mix(in srgb, var(--node-border), var(--ember) 45%);
    --terraria-bg: color-mix(in srgb, var(--node-bg), var(--ember) 12%);
    --calamity-border: #e2525a;
    --calamity-bg: #241014;

    .item-name{
      font-family: 'Andy Pro';
      font-size: 1.4em;
    }

    .item-name.name{ font-size: 1.0em; }
  }

  /* "Terraria Wiki" — inspired by terraria.wiki.gg's brown page chrome,
     gold section headers and blue wiki-link text */
  [data-theme="wiki"]{
    --bg: #241c16;
    --bg-panel: #33281f;
    --stone: #4a3c2e;
    --stone-light: #6b5842;
    --ember: #1e9648;
    --ember-dim: #157632;
    --copper: #c9a227;
    --gold: #e8d840;
    --text: #ded0ba;
    --text-dim: #a89478;
    --line: #6b5842;
    --danger: #c0453a;
    --node-bg: #2c2319;
    --node-border: #6b5842;
    --custom-bg: #292931;
    --custom-border: #34456d;
    --terraria-border: color-mix(in srgb, var(--node-border), var(--ember) 45%);
    --terraria-bg: color-mix(in srgb, var(--node-bg), var(--ember) 12%);
    --calamity-border: #e2482f;
    --calamity-bg: #2a120f;
  }

  /* "Calamity Red" — inspired by the Calamity mod's blood-red, rage-fueled palette */
  [data-theme="calamity"]{
    --bg: #0a0605;
    --bg-panel: #150a09;
    --stone: #3a1414;
    --stone-light: #551c1c;
    --ember: #ff2e2e;
    --ember-dim: #a11c1c;
    --copper: #7a2020;
    --gold: #ff8c3a;
    --text: #f0d8d0;
    --text-dim: #a87d7d;
    --line: #6b2626;
    --danger: #ff3b3b;
    --node-bg: #200c0c;
    --node-border: #6b2626;
    --custom-bg: #1f0a18;
    --custom-border: #7a2a6b;
    --terraria-border: color-mix(in srgb, var(--node-border), var(--ember) 45%);
    --terraria-bg: color-mix(in srgb, var(--node-bg), var(--ember) 12%);
    --calamity-border: #ff5a3c;
    --calamity-bg: #26080a;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    background:
      radial-gradient(ellipse at top left, var(--stone) 0%, var(--bg) 55%),
      var(--bg);
    transition: background .2s ease;
    color:var(--text);
    font-family:'Space Mono', monospace;
    overflow:hidden;
  }
  ::selection{ background:var(--ember-dim); color:#fff; }

  .app{ display:flex; height:100vh; }

  /* ---------- PALETTE ---------- */
  .palette{
    width:260px;
    min-width:260px;
    background:var(--bg-panel);
    border-right:3px solid var(--stone);
    display:flex;
    flex-direction:column;
    box-shadow: inset -6px 0 12px -8px rgba(0,0,0,.6);
  }
  .palette-header{
    padding:16px 14px 10px;
    border-bottom:2px solid var(--stone);
  }
  .brand{
    font-family:'Press Start 2P', monospace;
    font-size:0.6875em;
    color:var(--ember);
    letter-spacing:1px;
    line-height:1.6;
    text-shadow: 0 0 8px rgba(232,118,60,.35);
  }
  .brand small{ display:block; font-family:'Space Mono',monospace; color:var(--text-dim); font-size:0.625em; margin-top:6px; letter-spacing:0; text-shadow:none;}
  .search{
    margin:12px 14px 6px;
    padding:8px 10px;
    background:#120d09;
    border:1px solid var(--stone-light);
    color:var(--text);
    font-family:inherit;
    font-size:0.78125em;
    width:calc(100% - 28px);
    border-radius:2px;
  }
  .search:focus{ outline:none; border-color:var(--ember); }
  .wiki-import{
    display:flex;
    gap:6px;
    margin:0 14px 12px;
  }
  .wiki-import input{
    flex:1;
    min-width:0;
    padding:8px 10px;
    background:#120d09;
    border:1px solid var(--stone-light);
    color:var(--text);
    font-family:inherit;
    font-size:0.71875em;
    border-radius:2px;
  }
  .wiki-import input:focus{ outline:none; border-color:var(--ember); }
  .wiki-import input:disabled{ opacity:.6; }
  .wiki-import .btn{ flex:none; }
  .palette-list{
    flex:1;
    overflow-y:auto;
    padding:6px 10px 16px;
  }
  .palette-group-label{
    font-size:0.625em;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--text-dim);
    margin:14px 6px 6px;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .palette-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 10px;
    margin:3px 0;
    background:var(--node-bg);
    border:1px solid var(--node-border);
    border-radius:3px;
    cursor:grab;
    font-size:0.78125em;
    transition:transform .08s ease, border-color .15s ease, background .15s ease;
    user-select:none;
  }
  .palette-item:hover{
    border-color:var(--ember);
    background:#2e2418;
  }
  .palette-item:active{ cursor:grabbing; transform:scale(.97); }
  .palette-item .icon-wrap{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; flex:none; }
  .palette-item .icon-img{ width:20px; height:20px; object-fit:contain; image-rendering:pixelated; }
  .palette-item .icon-emoji{ font-size:1em; line-height:1; }
  .palette-item .qty-hint{ margin-left:auto; font-size:0.59375em; color:var(--text-dim); }

  /* ---------- CONTENT / CANVAS ---------- */
  .content{
    flex:1;
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
  }
  .toolbar{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    background:var(--bg-panel);
    border-bottom:2px solid var(--stone);
    z-index:5;
    flex-wrap:wrap;
  }
  .toolbar-group{ display:flex; align-items:center; gap:6px; }
  .toolbar-sep{ width:1px; align-self:stretch; margin:2px 2px; background:var(--stone-light); }
  .toolbar-spacer{ margin-left:auto; }
  .btn.icon{ padding:7px 9px; }
  .btn.icon svg{ display:block; }
  .theme-select{
    background:var(--stone);
    color:var(--text);
    border:1px solid var(--stone-light);
    padding:7px 10px;
    font-family:'Space Mono', monospace;
    font-size:0.71875em;
    border-radius:3px;
    cursor:pointer;
  }
  .theme-select:hover{ border-color:var(--ember-dim); }
  .theme-select:focus{ outline:none; border-color:var(--ember); }
  .btn{
    background:var(--stone);
    color:var(--text);
    border:1px solid var(--stone-light);
    padding:7px 12px;
    font-family:'Space Mono', monospace;
    font-size:0.71875em;
    border-radius:3px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    transition:all .12s ease;
  }
  .btn:hover{ background:var(--stone-light); border-color:var(--ember-dim); }
  .btn.accent{ background:var(--ember-dim); border-color:var(--ember); color:#fff2e6; }
  .btn.accent:hover{ background:var(--ember); }
  .btn.active{ background:var(--ember); border-color:var(--gold); color:#1a1006; box-shadow:0 0 0 2px rgba(232,118,60,.35); }
  .btn.danger{ border-color:var(--danger); }
  .btn.danger:hover{ background:var(--danger); color:#fff; }
  .btn:disabled{ opacity:.4; cursor:not-allowed; }

  /* split button (e.g. Export PNG + a caret opening a JSON export/import menu) */
  .btn-group{ display:flex; position:relative; }
  .btn-group .btn{ border-radius:0; }
  .btn-group .btn:first-child{ border-radius:3px 0 0 3px; }
  .btn-group .btn.caret{ border-radius:0 3px 3px 0; padding:7px 8px; border-left:1px solid rgba(0,0,0,.2); }
  .dropdown-menu{
    position:absolute; top:calc(100% + 4px); right:0; z-index:20;
    background:var(--bg-panel); border:1px solid var(--stone-light); border-radius:3px;
    min-width:190px; padding:4px; display:flex; flex-direction:column; gap:2px;
    box-shadow:0 8px 20px rgba(0,0,0,.4);
  }
  .dropdown-item{
    background:none; border:none; color:var(--text); text-align:left;
    padding:8px 10px; font-family:'Space Mono', monospace; font-size:0.71875em;
    border-radius:3px; cursor:pointer;
  }
  .dropdown-item:hover{ background:var(--stone-light); }
  .dropdown-item:disabled{ opacity:.4; cursor:not-allowed; }

  .statusbar{
    padding:6px 16px;
    background:var(--bg-panel);
    border-top:2px solid var(--stone);
    color:var(--text-dim);
    font-size:0.65625em;
    letter-spacing:.2px;
  }

  .canvas-wrap{
    flex:1;
    position:relative;
    overflow:auto;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 28px 28px;
    background-color:var(--bg);
    transition: background-color .2s ease;
  }
  .canvas{
    position:relative;
    /* width/height set inline via canvasSize() — grows to fit whatever's
       been placed/dragged onto it, so nothing ever ends up unreachably
       past the scrollable edge */
  }
  .canvas.drop-hover::after{
    content:"";
    position:absolute; inset:0;
    background:rgba(232,118,60,.05);
    outline:2px dashed var(--ember-dim);
    outline-offset:-8px;
    pointer-events:none;
  }
  .canvas{ cursor:grab; }
  .canvas.panning{ cursor:grabbing; }
  .canvas.connect-mode{ cursor:crosshair; }

  svg.edges{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
  .edge-path{ stroke:var(--line); stroke-width:2; fill:none; stroke-linejoin:round; stroke-linecap:round; }
  .edge-path.custom{ stroke:var(--custom-border); stroke-dasharray:5 4; }
  .edge-path.selected{ stroke:var(--gold); stroke-width:3; }
  .edge-path.preview{ stroke:var(--gold); stroke-dasharray:4 4; stroke-width:2; }
  .edge-qty{ fill:var(--text-dim); font-size:0.625em; font-family:'Space Mono',monospace; }

  /* wide invisible stroke so a thin connection line is still easy to
     click; the visible delete button only fades in on hover/selection
     (same pattern as .node .del-btn) so the canvas doesn't get busy */
  .edge-hit{ stroke:transparent; stroke-width:14; fill:none; pointer-events:stroke; cursor:pointer; }
  .edge-del{ opacity:0; pointer-events:none; transition:opacity .1s; cursor:pointer; }
  .edge-group:hover .edge-del, .edge-group.selected .edge-del{ opacity:1; pointer-events:auto; }
  .edge-del circle{ fill:var(--danger); stroke:#2a1a17; stroke-width:1; }
  .edge-del text{ fill:#fff; font-size:11px; font-family:'Space Mono',monospace; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }

  svg.align-guides{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:5; }
  .align-guide{ stroke:var(--gold); stroke-width:1; stroke-dasharray:4 3; opacity:0.85; }

  .selection-rect{
    position:absolute; pointer-events:none; z-index:6;
    border:1px solid var(--gold);
    background:color-mix(in srgb, var(--gold) 15%, transparent);
  }

  .node{
    position:absolute;
    width:150px;
    background:var(--node-bg);
    border:2px solid var(--node-border);
    border-radius:5px;
    padding:9px 10px 8px;
    box-shadow:0 3px 0 rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.35);
    cursor:grab;
    user-select:none;
  }
  .node:active{ cursor:grabbing; }
  .node.station{ border-color:var(--copper); background:#2b2115; }
  .node.custom{ background:var(--custom-bg); border-color:var(--custom-border); }
  .node.terraria{ background:var(--terraria-bg); border-color:var(--terraria-border); }
  .node.calamity{ background:var(--calamity-bg); border-color:var(--calamity-border); }
  .node.selected{ box-shadow:0 0 0 2px var(--gold), 0 6px 14px rgba(0,0,0,.4); border-color:var(--gold); }

  .node .port{
    position:absolute;
    left:50%;
    width:12px; height:12px;
    margin-left:-6px;
    border-radius:50%;
    background:var(--ember);
    border:2px solid var(--bg-panel);
    cursor:crosshair;
    opacity:0;
    transform:scale(.6);
    transition:opacity .12s ease, transform .12s ease;
    z-index:3;
  }
  .node:hover .port,
  .node .port:hover{ opacity:1; transform:scale(1); }
  .node .port:hover{ background:var(--gold); box-shadow:0 0 0 4px rgba(224,184,74,.25); }
  .node .port-top{ top:-6px; }
  .node .port-bottom{ bottom:-6px; }
  .canvas.connect-mode .node .port{ opacity:1; }
  .node .row1{ display:flex; align-items:center; gap:8px; }
  .node .icon-wrap{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; flex:none; }
  .node .icon-img{ width:22px; height:22px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
  .node .icon-emoji{ font-size:1.1875em; line-height:1; }
  .node .name{
    font-size:0.75em;
    font-weight:700;
    color:var(--text);
    line-height:1.25;
    flex:1;
    word-break:break-word;
  }
  .node .name-input{
    background:#120d09;
    border:1px solid var(--ember-dim);
    color:var(--text);
    font-family:inherit;
    font-size:0.75em;
    font-weight:700;
    width:100%;
    padding:2px 4px;
    border-radius:2px;
  }
  .node .station-tag{
    margin-top:5px;
    font-size:0.59375em;
    color:var(--copper);
    letter-spacing:.4px;
    text-transform:uppercase;
  }
  .node .del-btn{
    position:absolute;
    top:-8px; right:-8px;
    width:18px; height:18px;
    border-radius:50%;
    background:var(--danger);
    color:#fff;
    border:1px solid #2a1a17;
    font-size:0.6875em;
    line-height:16px;
    text-align:center;
    cursor:pointer;
    display:none;
  }
  .node:hover .del-btn{ display:block; }

  /* ---------- INSPECTOR ---------- */
  .inspector{
    width:280px;
    min-width:280px;
    background:var(--bg-panel);
    border-left:3px solid var(--stone);
    display:flex;
    flex-direction:column;
    box-shadow: inset 6px 0 12px -8px rgba(0,0,0,.6);
  }
  .inspector-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 14px;
    border-bottom:2px solid var(--stone);
    font-family:'Press Start 2P', monospace;
    font-size:0.625em;
    color:var(--ember);
    letter-spacing:1px;
  }
  .inspector-close{
    background:none;
    border:none;
    color:var(--text-dim);
    font-size:1.2em;
    line-height:1;
    cursor:pointer;
    padding:0;
  }
  .inspector-close:hover{ color:var(--text); }
  .inspector-body{
    padding:16px 14px;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
  }
  .inspector-label{
    font-size:0.625em;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--text-dim);
    margin:14px 0 6px;
  }
  .inspector-label:first-child{ margin-top:0; }
  .inspector-desc{
    font-size:0.8125em;
    color:var(--text);
    line-height:1.5;
  }
  .inspector-input{
    padding:8px 10px;
    background:#120d09;
    border:1px solid var(--stone-light);
    color:var(--text);
    font-family:inherit;
    font-size:0.8125em;
    border-radius:2px;
  }
  .inspector-input:focus{ outline:none; border-color:var(--ember); }

  .image-drop{
    border:2px dashed var(--stone-light);
    border-radius:6px;
    min-height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    text-align:center;
    color:var(--text-dim);
    font-size:0.75em;
    line-height:1.6;
    padding:10px;
    background:#120d09;
    transition:border-color .15s ease, background .15s ease;
  }
  .image-drop:hover{ border-color:var(--ember-dim); }
  .image-drop.over{ border-color:var(--ember); background:rgba(232,118,60,.08); }
  .image-drop-preview{ max-width:100%; max-height:110px; object-fit:contain; image-rendering:pixelated; border-radius:4px; pointer-events:none; }
  .image-drop-hint{ pointer-events:none; }

  .inspector-actions{ margin-top:10px; display:flex; gap:8px; }
  .btn.small{ padding:5px 10px; font-size:0.65625em; }

  .empty-hint{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:var(--text-dim);
    font-size:0.8125em;
    line-height:2;
    pointer-events:none;
    width:340px;
  }
  .empty-hint .big{
    font-family:'Press Start 2P', monospace;
    font-size:0.8125em;
    color:var(--stone-light);
    display:block;
    margin-bottom:14px;
  }

  .toast{
    position:fixed;
    bottom:22px; left:50%;
    transform:translateX(-50%);
    background:var(--stone);
    border:1px solid var(--ember-dim);
    color:var(--text);
    padding:9px 16px;
    border-radius:4px;
    font-size:0.75em;
    z-index:50;
    max-width:70vw;
    box-shadow:0 6px 18px rgba(0,0,0,.5);
  }

  ::-webkit-scrollbar{ width:11px; height:11px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{ background:var(--stone-light); border-radius:6px; border:2px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover{ background:var(--ember-dim); }