/* ============================================================
   MechCraft v4 — Freies Zeichnen
   ============================================================ */

:root {
  --bg-deep:    #070a0f;
  --bg-base:    #0d1117;
  --bg-panel:   #111827;
  --bg-panel2:  #161e2e;
  --border:     #1e2d45;
  --border-l:   #253550;
  --accent:     #f5a623;
  --accent-dim: #f5a62322;
  --accent-glow:#f5a62355;
  --blue:       #3d9cf0;
  --green:      #22c55e;
  --green-dim:  #22c55e18;
  --red:        #ef4444;
  --red-dim:    #ef444418;
  --text:       #c8d8ec;
  --text-dim:   #6b8aad;
  --font-head:  'Orbitron', monospace;
  --font-body:  'Rajdhani', sans-serif;
  --font-mono:  'Share Tech Mono', monospace;
  --header-h:   56px;
  --parts-w:    215px;
  --mission-w:  265px;
  --radius:     6px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; background:var(--bg-deep); color:var(--text); font-family:var(--font-body); font-size:14px; line-height:1.4; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg-base); }
::-webkit-scrollbar-thumb { background:var(--border-l); border-radius:3px; }

/* HEADER */
#game-header {
  height:var(--header-h); background:var(--bg-panel); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; position:relative; z-index:100; box-shadow:0 2px 20px #00000060;
}
#game-header::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--accent),var(--blue),transparent); opacity:.4; }
.header-brand { display:flex; align-items:center; gap:9px; }
.brand-gear   { color:var(--accent); animation:spin 8s linear infinite; filter:drop-shadow(0 0 5px var(--accent-glow)); }
@keyframes spin { to{transform:rotate(360deg)} }
.brand-name   { font-family:var(--font-head); font-size:19px; font-weight:900; letter-spacing:.1em; }
.brand-name span { color:var(--accent); text-shadow:0 0 10px var(--accent-glow); }
.header-stats { display:flex; gap:8px; align-items:center; }
.stat-chip    { display:flex; align-items:center; gap:6px; background:var(--bg-base); border:1px solid var(--border); border-radius:20px; padding:5px 11px; font-family:var(--font-mono); font-size:12px; }
.chip-icon    { font-size:14px; }
.xp-wrap      { display:flex; flex-direction:column; gap:2px; }
.xp-bar       { width:55px; height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
#xp-bar-fill  { height:100%; background:linear-gradient(90deg,var(--accent),var(--blue)); transition:width .5s; }
.header-actions { display:flex; gap:7px; }

/* MAIN LAYOUT */
#game-main { display:grid; grid-template-columns:var(--parts-w) 1fr var(--mission-w); height:calc(100vh - var(--header-h)); overflow:hidden; }
aside { background:var(--bg-panel); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
#mission-panel { border-right:none; border-left:1px solid var(--border); overflow-y:auto; }
.panel-header  { padding:11px 13px 9px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.panel-header h2 { font-family:var(--font-head); font-size:10px; font-weight:700; letter-spacing:.12em; color:var(--accent); text-transform:uppercase; }
.panel-hint      { font-size:10px; color:var(--text-dim); font-family:var(--font-mono); }

/* PARTS PANEL */
#parts-categories { overflow-y:auto; flex:1; padding:6px; }
.part-category    { margin-bottom:8px; }
.cat-header { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--cat-color,var(--accent)); text-transform:uppercase; padding:3px 5px; margin-bottom:3px; border-left:2px solid var(--cat-color,var(--accent)); }
.cat-header.locked { color:var(--text-dim); border-left-color:var(--border); }
.role-hint  { font-size:10px; color:var(--accent); font-family:var(--font-mono); padding:2px 5px 4px; font-style:italic; opacity:.8; }
.parts-grid { display:flex; flex-direction:column; gap:3px; }
.part-card  { display:flex; align-items:center; gap:7px; padding:5px 7px; background:var(--bg-base); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:all .13s; }
.part-card:hover    { border-color:var(--blue); background:var(--bg-panel2); transform:translateX(2px); }
.part-card.selected { border-color:var(--accent); background:var(--accent-dim); box-shadow:inset 0 0 10px var(--accent-glow); }
.part-card.depleted { opacity:.38; cursor:not-allowed; }
.part-icon  { width:28px; height:28px; border-radius:4px; border:1px solid; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.part-info  { flex:1; min-width:0; }
.part-name  { font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.part-count { font-family:var(--font-mono); font-size:10px; color:var(--text-dim); }
.part-count.zero { color:var(--red); }
.part-cost  { font-family:var(--font-mono); font-size:10px; color:var(--accent); flex-shrink:0; }
.locked-hint { opacity:.55; }
.locked-parts-hint { display:flex; flex-wrap:wrap; gap:3px; padding:3px 5px; }
.locked-parts-hint span { font-size:10px; background:var(--bg-base); border:1px solid var(--border); border-radius:3px; padding:1px 4px; color:var(--text-dim); }

/* BUILD AREA */
#build-area { display:flex; flex-direction:column; background:var(--bg-base); overflow:hidden; position:relative; }
#build-header { display:flex; align-items:center; justify-content:space-between; padding:8px 13px; background:var(--bg-panel); border-bottom:1px solid var(--border); flex-shrink:0; }
.build-title-row { display:flex; flex-direction:column; gap:1px; }
.build-label { font-family:var(--font-head); font-size:10px; font-weight:700; letter-spacing:.12em; color:var(--accent); }
.build-info  { font-size:10px; color:var(--text-dim); font-family:var(--font-mono); }
.build-actions { display:flex; gap:6px; align-items:center; }

#build-mode-info { padding:5px 13px; background:var(--bg-panel2); border-bottom:1px solid var(--border); font-size:12px; font-family:var(--font-mono); flex-shrink:0; min-height:29px; display:flex; align-items:center; }
.bm-idle  { color:var(--text-dim); }
.bm-draw  { color:var(--accent); }
.bm-place { color:var(--blue); }

/* CANVAS */
#canvas-wrapper {
  flex:1; overflow:hidden; position:relative; background:var(--bg-deep);
  background-image:linear-gradient(rgba(30,45,69,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(30,45,69,.45) 1px,transparent 1px);
  background-size:30px 30px;
}
#canvas-wrapper::after { content:''; position:absolute; left:0; right:0; height:2px; pointer-events:none; background:linear-gradient(90deg,transparent,var(--accent-glow),transparent); animation:scan 6s linear infinite; opacity:.2; z-index:1; }
@keyframes scan { 0%{top:-2px} 100%{top:100%} }
#game-canvas { display:block; width:100%; height:100%; cursor:default; }
@keyframes canvas-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 60%{transform:translateX(8px)} }
#game-canvas.canvas-shake { animation:canvas-shake .5s ease; }

/* STATS BAR */
#machine-stats-bar { display:flex; background:var(--bg-panel); border-top:1px solid var(--border); flex-shrink:0; }
.mstat { flex:1; display:flex; align-items:center; gap:5px; padding:7px 9px; border-right:1px solid var(--border); }
.mstat:last-child { border-right:none; }
.mstat-icon  { font-size:14px; }
.mstat-body  { display:flex; flex-direction:column; }
.mstat-label { font-size:9px; color:var(--text-dim); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.07em; }
.mstat-val   { font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--text-dim); transition:color .3s; }
.mstat-unit  { font-size:9px; color:var(--text-dim); }
.mstat.stat-good .mstat-val { color:var(--green); }
.mstat.stat-warn .mstat-val { color:var(--accent); }

/* TEST ANIMATION */
#build-area.testing { pointer-events:none; }
#test-overlay { position:absolute; inset:0; background:rgba(7,10,15,.88); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:50; gap:14px; }
.test-gears  { display:flex; gap:7px; font-size:40px; }
.tg  { display:inline-block; filter:drop-shadow(0 0 8px var(--accent)); }
.tg1 { animation:spin .6s linear infinite; }
.tg2 { animation:spin .4s linear infinite reverse; font-size:28px; margin-top:6px; }
.tg3 { animation:spin .8s linear infinite; font-size:32px; }
.test-text { font-family:var(--font-head); font-size:13px; color:var(--accent); letter-spacing:.15em; animation:blink .7s ease infinite alternate; }
@keyframes blink { from{opacity:.6} to{opacity:1} }

/* MISSION PANEL */
.mission-badge { font-family:var(--font-mono); font-size:10px; color:var(--accent); background:var(--accent-dim); padding:2px 8px; border-radius:20px; border:1px solid var(--accent); }
#mission-card    { padding:11px 13px; border-bottom:1px solid var(--border); }
.mission-difficulty { font-size:10px; margin-bottom:3px; }
.mission-title   { font-family:var(--font-head); font-size:13px; font-weight:700; color:var(--accent); margin-bottom:3px; }
.mission-client  { font-size:11px; color:var(--text-dim); font-family:var(--font-mono); margin-bottom:5px; }
.mission-quote   { font-size:11px; color:var(--text-dim); font-style:italic; border-left:2px solid var(--accent); padding-left:7px; margin:0 0 7px; line-height:1.5; }
.mission-task-box { background:var(--bg-base); border:1px solid var(--border); border-radius:var(--radius); padding:8px 10px; margin-bottom:7px; }
.task-label { font-family:var(--font-mono); font-size:10px; color:var(--accent); text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; }
.task-text  { font-size:12px; color:var(--text); line-height:1.55; }
.machine-badge { display:flex; align-items:flex-start; gap:9px; padding:7px 9px; border:1px solid; border-radius:var(--radius); }
.mb-name  { font-family:var(--font-head); font-size:11px; font-weight:700; letter-spacing:.06em; margin-bottom:3px; }
.mb-roles { font-size:10px; color:var(--text-dim); font-family:var(--font-mono); line-height:1.6; }
.mb-roles span { margin-right:3px; }

/* REQUIREMENTS */
#mission-requirements { flex-shrink:0; }
.req-section      { padding:8px 13px 4px; border-bottom:1px solid var(--border); }
.req-section-title{ font-family:var(--font-mono); font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; }
.req-item  { display:flex; align-items:flex-start; gap:6px; margin-bottom:7px; }
.req-dot   { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.req-body  { flex:1; }
.req-label { font-size:11px; color:var(--text); margin-bottom:2px; }
.req-item.req-pass .req-label { color:var(--green); }
.req-cnt   { font-family:var(--font-mono); font-size:10px; background:var(--green-dim); color:var(--green); border-radius:3px; padding:0 4px; margin-left:3px; }
.req-ex    { font-size:10px; color:var(--text-dim); font-style:italic; font-family:var(--font-mono); }
.req-bar-wrap { height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin-bottom:2px; }
.req-bar   { height:100%; background:var(--red); border-radius:2px; transition:width .3s,background .3s; }
.req-bar[data-pass="true"] { background:var(--green); }
.req-actual { font-family:var(--font-mono); font-size:10px; color:var(--text-dim); }

/* REWARD & HISTORY */
#reward-preview { padding:9px 13px; border-bottom:1px solid var(--border); flex-shrink:0; }
.reward-header  { font-family:var(--font-mono); font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.1em; margin-bottom:5px; }
#reward-list    { display:flex; flex-wrap:wrap; gap:4px; }
.rw { display:inline-block; padding:2px 7px; border-radius:20px; font-size:10px; font-family:var(--font-mono); border:1px solid; }
.rw.money  { background:#ffd70015; border-color:#ffd70050; color:#ffd700; }
.rw.xp     { background:#3d9cf015; border-color:#3d9cf050; color:var(--blue); }
.rw.unlock { background:#22c55e15; border-color:#22c55e50; color:var(--green); }
.rw.part   { background:#f5a62315; border-color:#f5a62350; color:var(--accent); }
#mission-history { padding:9px 13px; flex:1; overflow-y:auto; }
.history-header  { font-family:var(--font-mono); font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.1em; margin-bottom:5px; }
.completed-item  { font-size:11px; color:var(--green); padding:2px 0; border-bottom:1px solid var(--border); }
.no-completed    { font-size:11px; color:var(--text-dim); font-style:italic; }
.all-done        { text-align:center; padding:20px 10px; }
.all-done-text   { font-family:var(--font-head); font-size:13px; color:var(--accent); }
.all-done-sub    { font-size:11px; color:var(--text-dim); margin-top:3px; }

/* BUTTONS */
.btn-primary,.btn-danger,.btn-ghost,.btn-icon { font-family:var(--font-head); font-size:11px; font-weight:700; letter-spacing:.07em; border:none; border-radius:var(--radius); cursor:pointer; transition:all .14s; display:inline-flex; align-items:center; gap:5px; padding:6px 12px; white-space:nowrap; }
.btn-primary { background:var(--accent); color:#000; box-shadow:0 0 12px var(--accent-dim); }
.btn-primary:hover { background:#ffbb44; box-shadow:0 0 18px var(--accent-glow); transform:translateY(-1px); }
.btn-danger  { background:var(--bg-panel2); color:var(--red); border:1px solid var(--red); opacity:.7; }
.btn-danger:hover { background:var(--red-dim); opacity:1; }
.btn-ghost   { background:transparent; color:var(--text-dim); border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn-icon    { background:var(--bg-panel2); color:var(--text); border:1px solid var(--border); font-size:11px; padding:5px 11px; }
.btn-icon:hover { border-color:var(--accent); color:var(--accent); }
@keyframes btn-pulse { 0%,100%{box-shadow:0 0 8px var(--accent-dim)} 50%{box-shadow:0 0 22px var(--accent-glow)} }
.pulse-btn { animation:btn-pulse 2.5s ease infinite; }

/* SHOP */
#shop-panel { position:fixed; top:var(--header-h); right:0; bottom:0; width:320px; background:var(--bg-panel); border-left:1px solid var(--border); z-index:200; display:flex; flex-direction:column; box-shadow:-10px 0 40px #00000080; }
#shop-panel.hidden { display:none; }
.shop-header { display:flex; align-items:center; justify-content:space-between; padding:13px 15px; border-bottom:1px solid var(--border); font-family:var(--font-head); font-size:11px; color:var(--accent); flex-shrink:0; }
.shop-close  { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:16px; }
.shop-close:hover { color:var(--red); }
.shop-items  { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:5px; }
.shop-item   { display:flex; align-items:flex-start; gap:9px; padding:8px; background:var(--bg-base); border:1px solid var(--border); border-radius:var(--radius); }
.shop-item:hover { border-color:var(--blue); }
.shop-item.cant-afford { opacity:.4; }
.shop-icon   { width:34px; height:34px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.shop-info   { flex:1; }
.shop-name   { font-size:12px; font-weight:600; margin-bottom:2px; }
.shop-inv    { font-family:var(--font-mono); font-size:10px; color:var(--text-dim); }
.shop-role   { font-size:10px; font-family:var(--font-mono); margin-bottom:2px; }
.shop-note   { font-size:10px; color:var(--text-dim); line-height:1.4; }
.shop-buy    { text-align:right; flex-shrink:0; }
.shop-price  { font-family:var(--font-mono); font-size:11px; color:var(--accent); margin-bottom:3px; }
.btn-buy     { background:var(--accent); color:#000; border:none; border-radius:4px; padding:4px 9px; font-size:11px; font-weight:700; cursor:pointer; font-family:var(--font-head); }
.btn-buy:hover    { background:#ffbb44; }
.btn-buy:disabled { opacity:.4; cursor:not-allowed; background:var(--border); color:#666; }

/* MODAL */
#modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.82); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:500; opacity:0; pointer-events:none; transition:opacity .3s; }
#modal-overlay.visible { opacity:1; pointer-events:all; }
#modal-overlay.hidden  { display:none; }
#modal-box { background:var(--bg-panel); border:1px solid var(--border-l); border-radius:10px; padding:28px; max-width:440px; width:90%; text-align:center; box-shadow:0 20px 60px #00000090,0 0 40px var(--accent-dim); transform:scale(.9); transition:transform .3s; }
#modal-overlay.visible #modal-box { transform:scale(1); }
.modal-icon  { font-size:48px; margin-bottom:10px; display:block; }
#modal-title { font-family:var(--font-head); font-size:15px; color:var(--accent); margin-bottom:10px; }
#modal-body  { font-size:13px; color:var(--text); line-height:1.6; margin-bottom:14px; text-align:left; }
#modal-body p { margin-bottom:8px; }
#modal-body pre.fail-lines { font-family:var(--font-mono); font-size:11px; color:var(--text-dim); white-space:pre-wrap; background:var(--bg-base); border:1px solid var(--border); border-radius:var(--radius); padding:8px 10px; margin:6px 0; }
.re-list   { display:flex; flex-direction:column; gap:6px; margin:8px 0 12px; }
.re-row    { display:flex; align-items:flex-start; gap:9px; padding:6px 9px; background:var(--bg-base); border:1px solid var(--border); border-radius:var(--radius); font-size:12px; text-align:left; }
.re-dot    { width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:3px; }
.re-ex     { font-size:10px; color:var(--text-dim); margin-top:2px; font-family:var(--font-mono); }
.re-hint   { font-size:11px; color:var(--accent); font-family:var(--font-mono); padding:7px 10px; background:var(--accent-dim); border-radius:var(--radius); border:1px solid var(--accent); text-align:left; }
#modal-rewards { margin-bottom:18px; }
.reward-chips  { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; }

/* TOAST */
#toast-container { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:1000; display:flex; flex-direction:column-reverse; gap:7px; align-items:center; pointer-events:none; }
.toast { background:var(--bg-panel); border:1px solid var(--border-l); border-radius:20px; padding:7px 16px; font-size:12px; font-family:var(--font-mono); color:var(--text); box-shadow:0 4px 18px #00000060; opacity:0; transform:translateY(10px); transition:all .28s; max-width:480px; text-align:center; }
.toast.show    { opacity:1; transform:translateY(0); }
.toast-success { border-color:var(--green); color:var(--green); }
.toast-warn    { border-color:var(--accent); color:var(--accent); }
.toast-info    { border-color:var(--blue);  color:var(--blue); }

/* TOOLTIP */
#tooltip { position:fixed; background:var(--bg-panel); border:1px solid var(--border-l); border-radius:var(--radius); padding:9px 11px; max-width:220px; z-index:800; pointer-events:none; box-shadow:0 4px 18px #00000060; font-size:11px; }
#tooltip.hidden { display:none; }
.tt-title { font-family:var(--font-head); font-size:11px; color:var(--accent); margin-bottom:3px; }
.tt-role  { font-family:var(--font-mono); font-size:10px; margin-bottom:4px; }
.tt-desc  { color:var(--text); margin-bottom:5px; line-height:1.4; }
.tt-stats { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:5px; }
.tt-stats span { font-family:var(--font-mono); font-size:10px; padding:1px 5px; border-radius:3px; background:var(--bg-base); }
.tt-meta  { display:flex; gap:9px; color:var(--text-dim); font-family:var(--font-mono); font-size:10px; border-top:1px solid var(--border); padding-top:4px; }

/* RESPONSIVE */
@media(max-width:1000px) { :root{--parts-w:180px;--mission-w:220px} }
@media(max-width:700px)  {
  html,body{overflow:auto}
  #game-main{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;height:auto}
  #parts-panel{border-right:none;border-bottom:1px solid var(--border);max-height:200px}
  #mission-panel{border-left:none;border-top:1px solid var(--border);max-height:55vh}
  #canvas-wrapper{min-height:300px}
}