/* ============================================================
   Schiffbauer (Ship Builder)
   ============================================================ */
.sb-hero { padding: 3.2rem 0 1.5rem; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.sb-hero::before { content:""; position:absolute; inset:0; background: radial-gradient(560px 320px at 85% 20%, var(--red-glow), transparent 70%); opacity:.5; }
.sb-hero > .wrap { position: relative; }
.sb-hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; margin: .7rem 0 .6rem; }
.sb-hero .lead { color: var(--muted); max-width: 62ch; }
.sb-note { font-size:.82rem; color: var(--muted); background: var(--surface); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:10px; padding:.7rem 1rem; margin-top:1.3rem; }

.sb-main { padding: 2rem 1.25rem 5rem; display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .sb-main { grid-template-columns: minmax(0,1fr) 380px; align-items: start; } }

.sb-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; }
.sb-panel h2 { font-size: .95rem; letter-spacing:.03em; margin-bottom: 1rem; display:flex; align-items:center; gap:.5rem; }
.sb-panel h2::before { content:""; width:3px; height:15px; background:var(--red); border-radius:2px; }

/* Palette */
.sb-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px,1fr)); gap: .5rem; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.sb-palette::-webkit-scrollbar { width: 8px; }
.sb-palette::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.sb-mod { display:flex; align-items:center; gap:.55rem; padding:.55rem .6rem; border:1px solid var(--line); border-radius:9px; background:var(--bg); cursor:pointer; text-align:left; font-family:inherit; color:var(--text); transition:border-color .15s, background .15s; }
.sb-mod:hover { border-color:#3a3a44; }
.sb-mod.active { border-color: var(--red); box-shadow: 0 0 0 2px rgba(255,59,64,.18); }
.sb-swatch { flex:none; width:22px; height:22px; border-radius:6px; display:grid; place-items:center; font-size:.7rem; font-weight:800; color:#0a0a0c; }
.sb-mod .mn { font-size:.78rem; font-weight:600; line-height:1.15; }
.sb-mod .mm { font-size:.66rem; color:var(--muted); }
.sb-tools { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }

/* Grid */
.sb-grid-wrap { overflow-x:auto; padding-bottom:.4rem; }
.sb-grid { display:grid; gap:3px; background:var(--line); border:1px solid var(--line); border-radius:10px; padding:3px; width:max-content; margin:0 auto; }
.sb-cell { width:34px; height:34px; background:var(--bg); border-radius:5px; display:grid; place-items:center; cursor:pointer; font-size:.62rem; font-weight:800; color:#0a0a0c; user-select:none; transition:transform .05s; }
.sb-cell:hover { outline:2px solid var(--red); outline-offset:-2px; }
.sb-cell.filled:active { transform:scale(.92); }

/* Stats */
.sb-stats { }
.sb-stat { display:flex; justify-content:space-between; align-items:baseline; padding:.55rem 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.sb-stat:last-child { border-bottom:0; }
.sb-stat .k { color:var(--muted); }
.sb-stat .v { font-weight:700; font-variant-numeric: tabular-nums; }
.sb-stat .v.good { color:#6ee7a0; }
.sb-stat .v.bad { color:#ff6b70; }
.sb-bar { height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin:.5rem 0 1rem; border:1px solid var(--line); }
.sb-bar > div { height:100%; border-radius:99px; transition:width .25s var(--ease), background .25s; }
.sb-warn { font-size:.82rem; border-radius:9px; padding:.6rem .8rem; margin-top:.5rem; border:1px solid; }
.sb-warn.ok { background:#0e1f14; border-color:#1f5132; color:#6ee7a0; }
.sb-warn.warn { background:#241a10; border-color:#6e4a1f; color:#f5b942; }
.sb-warn.err { background:#241214; border-color:#6e2730; color:#ff8d92; }

.sb-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.sb-actions .btn { font-size:.72rem; padding:.55rem .9rem; }

.sb-saves { margin-top:1rem; display:flex; flex-direction:column; gap:.4rem; }
.sb-save-item { display:flex; align-items:center; justify-content:space-between; gap:.6rem; border:1px solid var(--line); border-radius:8px; padding:.5rem .7rem; font-size:.84rem; }
.sb-save-item .si-name { font-weight:600; }
.sb-save-item time { font-size:.66rem; color:var(--muted); }

.sb-presets { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.sb-legend { font-size:.74rem; color:var(--muted); margin-top:.8rem; line-height:1.7; }
.sb-left { display:flex; flex-direction:column; gap:1.4rem; }

/* ── 3D-Werft ────────────────────────────────────────────────── */
.sb-canvas {
  height: 540px; border: 1px solid var(--line); border-radius: 12px;
  position: relative; overflow: hidden; touch-action: none; cursor: grab;
  background: radial-gradient(620px 420px at 60% 25%, rgba(214,20,32,.10), transparent 70%), #08080b;
}
.sb-canvas:active { cursor: grabbing; }
.sb-canvas canvas { display:block; }
.sb-hint-overlay {
  position:absolute; left:12px; bottom:12px; z-index:2; pointer-events:none;
  font-size:.72rem; color:var(--muted); background:rgba(10,10,12,.6);
  border:1px solid var(--line); border-radius:8px; padding:.4rem .6rem; backdrop-filter:blur(6px);
}
.sb-mode.active { background:linear-gradient(135deg,var(--red),var(--red-deep)); color:#fff; border-color:transparent; }
.sb-group-label { grid-column:1/-1; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:.4rem 0 .1rem; }

/* ============================================================
   Bauteil-Planer (wie SpaceCraft.tools Ship Planner)
   ============================================================ */
.sb-toolbar { display:flex; gap:.6rem; margin-bottom:.9rem; flex-wrap:wrap; }
.sb-toolbar .input { flex:1; min-width:160px; }
.sb-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.sb-chip { font-size:.7rem; padding:.35rem .7rem; border:1px solid var(--line); border-radius:99px; background:var(--bg); color:var(--muted); cursor:pointer; font-family:inherit; transition:border-color .15s,color .15s,background .15s; }
.sb-chip:hover { color:var(--text); }
.sb-chip.active { border-color:var(--red); color:#fff; background:linear-gradient(135deg,var(--red),var(--red-deep)); }

.sb-list { max-height:600px; overflow-y:auto; display:flex; flex-direction:column; gap:.35rem; padding-right:4px; }
.sb-list::-webkit-scrollbar { width:8px; }
.sb-list::-webkit-scrollbar-thumb { background:var(--line); border-radius:8px; }
.sb-cat-head { font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:.7rem 0 .15rem; padding-left:.1rem; }
.sb-item { display:flex; align-items:center; gap:.7rem; padding:.5rem .65rem; border:1px solid var(--line); border-radius:9px; background:var(--bg); }
.sb-item:hover { border-color:#3a3a44; background:var(--surface-2); }
.sb-item .txt { display:flex; flex-direction:column; min-width:0; }
.sb-item .mn { font-weight:600; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-item .mm { font-size:.64rem; color:var(--muted); }
.sb-item .add { margin-left:auto; flex:none; width:30px; height:30px; border-radius:7px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); cursor:pointer; font-size:1.1rem; font-weight:700; line-height:1; }
.sb-item .add:hover { border-color:var(--red); color:var(--red); }

.sb-selected { display:flex; flex-direction:column; gap:.45rem; }
.sb-sel { display:flex; align-items:center; gap:.6rem; padding:.5rem .65rem; border:1px solid var(--line); border-left:3px solid var(--red); border-radius:8px; }
.sb-sel .sw { flex:none; }
.sb-sel .mn { font-weight:600; font-size:.84rem; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-qty { display:flex; align-items:center; gap:.25rem; flex:none; }
.sb-qty button { width:24px; height:24px; border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:6px; cursor:pointer; font-weight:700; line-height:1; }
.sb-qty button:hover { border-color:var(--red); }
.sb-qty .n { min-width:24px; text-align:center; font-variant-numeric:tabular-nums; font-size:.85rem; font-weight:700; }
.sb-sel .rm { flex:none; width:24px; height:24px; border:0; background:transparent; color:#ff6b70; cursor:pointer; font-size:1rem; }
.sb-empty2 { color:var(--muted); font-size:.86rem; text-align:center; padding:2rem 1rem; border:1px dashed var(--line); border-radius:10px; }

.sb-side { display:flex; flex-direction:column; gap:1.4rem; }

/* ============================================================
   In-Game-Editor-Look (SpaceCraft Schiffseditor)
   ============================================================ */
.scg {
  --teal:#43c6bd; --teal-dim:#2f8f8a; --gold:#f5a623; --ship-red:#e23a30;
  position:relative; border:1px solid #1c3a52; border-radius:14px; overflow:hidden;
  min-height:660px; margin-top:1.5rem;
  background:
    radial-gradient(130% 90% at 50% 125%, rgba(60,160,220,.45), transparent 60%),
    radial-gradient(120% 120% at 50% -10%, #103048, #08182a 70%);
}
.scg::before { /* Punkteraster */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(130,190,230,.14) 1.3px, transparent 1.4px);
  background-size:28px 28px; background-position:center;
  -webkit-mask-image:linear-gradient(to top, #000, transparent 78%);
          mask-image:linear-gradient(to top, #000, transparent 78%);
}

/* Tab-Leiste */
.scg-topbar { position:relative; z-index:3; display:flex; justify-content:center; padding:1.1rem 1rem .4rem; }
.scg-tabs { display:flex; gap:2px; padding:3px; background:#0b0b0c;
  border:3px solid transparent;
  border-image:repeating-linear-gradient(45deg,#111 0,#111 7px,#caa83a 7px,#caa83a 14px) 3; }
.scg-tab { font-family:inherit; font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.55rem 1.3rem; border:0; cursor:pointer; color:#9fb6c4; background:#10212e; transition:all .15s; }
.scg-tab[data-tab="module"].active { background:#f3f4f6; color:#0c0c0c; }
.scg-tab[data-tab="fertigung"].active { background:#a01c22; color:#fff; }
.scg-tab[data-tab="indiv"].active { background:var(--teal-dim); color:#fff; }
.scg-tab:not(.active):hover { color:#fff; background:#16303f; }

/* HUD oben rechts */
.scg-hud { position:absolute; top:1.1rem; right:1.1rem; z-index:4; display:flex; gap:.5rem; }
.scg-hud .chip { display:flex; align-items:center; gap:.45rem; background:rgba(8,22,34,.85);
  border:1px solid #1c3a52; border-radius:6px; padding:.35rem .65rem; color:#d6ecf5;
  font-size:.82rem; font-variant-numeric:tabular-nums; }
.scg-hud .chip .ic { display:grid; place-items:center; width:18px; height:18px; color:var(--teal); }
.scg-hud .chip b { font-weight:700; }
.scg-hud .chip small { color:#7fa6ba; font-size:.7em; margin-left:2px; }

/* Bühne mit Schiff + Modul-Kacheln */
.scg-stage { position:relative; z-index:2; min-height:420px; display:grid; place-items:center; padding:1rem; }
.scg-ship { position:absolute; width:min(300px,52%); opacity:.96; filter:drop-shadow(0 14px 34px rgba(226,58,48,.35)); z-index:1; }
.scg-tiles { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; justify-content:center; max-width:440px; }
.scg-tile { width:54px; height:54px; border-radius:13px; border:2px solid rgba(255,255,255,.9);
  background:rgba(9,20,30,.88); display:grid; place-items:center; position:relative; cursor:pointer;
  box-shadow:0 3px 12px rgba(0,0,0,.4); transition:transform .1s; }
.scg-tile:hover { transform:translateY(-2px); border-color:var(--teal); }
.scg-tile .sw { width:30px; height:30px; border-radius:7px; display:grid; place-items:center; font-weight:800; color:#08121c; font-size:.8rem; }
.scg-tile .q { position:absolute; bottom:-7px; right:-7px; background:var(--ship-red); color:#fff;
  border-radius:99px; min-width:19px; height:19px; font-size:.62rem; font-weight:700;
  display:grid; place-items:center; padding:0 4px; border:1.5px solid #fff; }
.scg-stage-empty { z-index:2; color:#9fb6c4; font-size:.86rem; background:rgba(8,22,34,.7);
  border:1px dashed #1c3a52; border-radius:10px; padding:1.4rem 1.6rem; }

/* SCHIFFSWERTE unten rechts */
.scg-values { position:absolute; right:0; bottom:0; z-index:4; width:min(320px,80%);
  background:rgba(7,18,28,.94); border-top:2px solid var(--teal-dim); border-left:2px solid var(--teal-dim); }
.scg-values .vtitle { display:flex; justify-content:space-between; align-items:center;
  padding:.5rem .85rem; background:rgba(47,143,138,.16); color:#cfe6f0;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.scg-values .vtitle .pts { color:var(--gold); font-weight:800; font-size:.95rem; letter-spacing:.04em; }
.scg-values .vsp { padding:.7rem .85rem .9rem; }
.scg-values .vsp .lbl { display:flex; justify-content:space-between; font-size:.78rem; color:#cfe6f0; margin-bottom:.4rem; }
.scg-values .vsp .lbl b { color:var(--gold); font-variant-numeric:tabular-nums; }
.scg-values .vbar { height:10px; background:#0a1a28; border:1px solid #1c3a52; border-radius:99px; overflow:hidden; }
.scg-values .vbar > div { height:100%; background:linear-gradient(90deg,var(--teal),var(--teal-dim)); transition:width .3s, background .3s; }

/* Tab-Inhalte */
.scg-tabbody { position:relative; z-index:2; }
.scg-panel { background:rgba(7,18,28,.86); border:1px solid #1c3a52; border-radius:12px; padding:1.1rem;
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.scg-panel h3 { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-bottom:.9rem; }
#tab-module { display:grid; grid-template-columns:330px 1fr; gap:1rem; padding:0 1rem 1rem; align-items:start; }
@media (max-width:820px){ #tab-module { grid-template-columns:1fr; } .scg-values{ position:static; width:auto; margin:1rem; } .scg-hud{ position:static; justify-content:center; margin-bottom:.5rem; } }
#tab-fertigung, #tab-indiv { padding:0 1rem 1.4rem; max-width:680px; margin:0 auto; }
.scg [hidden] { display:none !important; }
/* Katalog im Game-Look */
.scg .sb-chip.active { background:linear-gradient(135deg,var(--teal),var(--teal-dim)); border-color:var(--teal); }
.scg .sb-item .add:hover { border-color:var(--teal); color:var(--teal); }
.scg .sb-stat .v.good { color:var(--teal); }
.scg .cost-row { display:flex; justify-content:space-between; font-size:.84rem; padding:.35rem 0; border-bottom:1px solid #14283a; }
.scg .cost-row .c { color:var(--gold); font-variant-numeric:tabular-nums; }

/* 3D-Viewport in der Bühne */
.scg-stage { min-height:480px; }
.scg-3d { position:absolute; inset:0; cursor:grab; }
.scg-3d:active { cursor:grabbing; }
.scg-3d canvas { display:block; width:100%; height:100%; }

/* Modus-Leiste + Bau-Hinweis (3D) */
.scg-modebar { position:absolute; top:.8rem; left:.8rem; z-index:5; display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.scg-modebar .btn { font-size:.7rem; padding:.4rem .8rem; }
.scg-mode.active { background:linear-gradient(135deg,var(--teal,#43c6bd),var(--teal-dim,#2f8f8a)); color:#fff; border-color:transparent; }
.scg-buildhint { font-size:.72rem; color:#9fb6c4; background:rgba(8,22,34,.7); border:1px solid #1c3a52; border-radius:7px; padding:.3rem .55rem; }
/* Icon im Swatch */
.sb-swatch svg, .scg-tile .sw svg { display:block; }