:root{
  --bg:#141618;
  --panel:#1b1e21;
  --panel-2:#212528;
  --line:#2c3237;
  --amber:#ff9d1e;
  --amber-dim:#c47a18;
  --steel:#7d8890;
  --olive:#6a7645;
  --text:#d7dce0;
  --mono:'Share Tech Mono', monospace;
  --head:'Oswald', sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:
    repeating-linear-gradient(135deg, rgba(255,157,30,0.015) 0 12px, transparent 12px 24px),
    radial-gradient(circle at 50% -10%, #22262a 0%, var(--bg) 60%);
  color:var(--text);
  font-family:var(--head);
  -webkit-font-smoothing:antialiased;
}
#app{display:flex;flex-direction:column;min-height:100vh;}

/* ---- Header ---- */
#hud-header{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  padding:14px 22px;
  background:linear-gradient(180deg,#101214,#191c1f);
  border-bottom:2px solid var(--amber);
  box-shadow:0 4px 24px rgba(0,0,0,.6);
}
.hud-title-wrap h1{
  margin:0;font-weight:700;letter-spacing:3px;font-size:clamp(18px,3vw,30px);
  text-transform:uppercase;color:#fff;
  text-shadow:0 0 18px rgba(255,157,30,.35);
}
.hud-sub{font-family:var(--mono);font-size:11px;color:var(--steel);letter-spacing:1px;margin-top:2px;}
.hud-readout{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-family:var(--mono);}
#layer-readout{color:var(--amber);font-size:14px;letter-spacing:1px;}
.badge{
  font-size:11px;padding:3px 10px;border:1px solid var(--line);border-radius:3px;
  background:#0e0f10;color:var(--steel);letter-spacing:2px;
}
.diff-recruit{color:#8bc34a;border-color:#3f5228;}
.diff-regular{color:#4fc3f7;border-color:#245261;}
.diff-hardened{color:var(--amber);border-color:var(--amber-dim);}
.diff-veteran{color:#e23b3b;border-color:#6b2020;text-shadow:0 0 10px rgba(226,59,59,.5);}

/* ---- Layout ---- */
#layout{
  flex:1;display:grid;gap:16px;padding:18px;
  grid-template-columns:300px 1fr 320px;
  max-width:1500px;margin:0 auto;width:100%;
}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:16px;display:flex;flex-direction:column;
}
.panel-head{
  font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--amber-dim);
  margin:0 0 14px;font-weight:400;
}

/* ---- Input panel ---- */
#drop-zone{
  border:2px dashed var(--amber-dim);border-radius:6px;padding:26px 14px;text-align:center;
  cursor:pointer;transition:.15s;background:rgba(255,157,30,.03);
}
#drop-zone:hover{border-color:var(--amber);background:rgba(255,157,30,.07);}
#drop-zone.drag{border-color:var(--amber);background:rgba(255,157,30,.14);}
#drop-zone.flash{animation:flash .5s;}
@keyframes flash{0%,100%{border-color:var(--amber-dim);}50%{border-color:#e23b3b;background:rgba(226,59,59,.15);}}
.crosshair{font-size:26px;color:var(--amber);}
.dz-main{font-family:var(--mono);font-size:12px;letter-spacing:1px;margin-top:6px;color:var(--text);}
.dz-sub{font-family:var(--mono);font-size:10px;color:var(--steel);margin-top:4px;}
#preview-thumb{width:100%;margin-top:12px;border:1px solid var(--line);border-radius:4px;image-rendering:auto;}

.ghost-btn{
  margin-top:12px;background:transparent;border:1px solid var(--line);color:var(--steel);
  font-family:var(--mono);font-size:11px;letter-spacing:1px;padding:8px;border-radius:4px;cursor:pointer;transition:.15s;
}
.ghost-btn:hover{border-color:var(--amber);color:var(--amber);}

.ctrl{margin-top:18px;}
.ctrl label{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--text);display:block;}
.ctrl .val{color:var(--amber);float:right;}
.slider-ends{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:var(--steel);margin:4px 0 2px;}
input[type=range]{width:100%;accent-color:var(--amber);}
#shape-set{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin-top:8px;}
.chk{font-family:var(--mono);font-size:11px;color:var(--text);display:flex;align-items:center;gap:6px;cursor:pointer;}
.chk input{accent-color:var(--amber);}
.cursed{
  display:flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--mono);
  font-size:11px;letter-spacing:1px;color:#e2a03b;cursor:pointer;
}
.cursed input{accent-color:#e23b3b;}
.tip{color:var(--steel);cursor:help;}

.deploy-btn{
  margin-top:20px;background:linear-gradient(180deg,var(--amber),var(--amber-dim));
  border:none;color:#141618;font-family:var(--head);font-weight:700;font-size:16px;letter-spacing:3px;
  padding:12px;border-radius:5px;cursor:pointer;transition:.15s;
  box-shadow:0 0 0 rgba(255,157,30,0);
}
.deploy-btn:hover{box-shadow:0 0 22px rgba(255,157,30,.5);transform:translateY(-1px);}
.deploy-btn:active{transform:translateY(1px);}

/* ---- Canvas panel ---- */
#canvas-wrap{position:relative;width:100%;aspect-ratio:1/1;background:#0e0f10;border:1px solid var(--line);border-radius:4px;overflow:hidden;}
#canvas{width:100%;height:100%;display:block;image-rendering:auto;}
#empty-state{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--mono);font-size:13px;color:var(--steel);letter-spacing:1px;line-height:1.8;
  pointer-events:none;
}
.view-toggle{display:flex;gap:6px;margin-top:12px;}
.view-toggle button{
  flex:1;background:#0e0f10;border:1px solid var(--line);color:var(--steel);
  font-family:var(--mono);font-size:10px;letter-spacing:1px;padding:7px;border-radius:4px;cursor:pointer;transition:.15s;
}
.view-toggle button.active{border-color:var(--amber);color:var(--amber);background:rgba(255,157,30,.08);}
.timeline{display:flex;align-items:center;gap:8px;margin-top:12px;}
.timeline button{
  background:#0e0f10;border:1px solid var(--line);color:var(--amber);
  width:38px;height:34px;border-radius:4px;cursor:pointer;font-size:14px;transition:.15s;
}
.timeline button:hover{border-color:var(--amber);}
.timeline input[type=range]{flex:1;}
.scrub-label{font-family:var(--mono);font-size:11px;color:var(--steel);min-width:44px;text-align:right;}

/* ---- Guide panel ---- */
#panel-guide{max-height:calc(100vh - 60px);}
#guide-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px;}
#guide-list::-webkit-scrollbar{width:8px;}
#guide-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
.guide-empty{font-family:var(--mono);font-size:12px;color:var(--steel);padding:20px 0;text-align:center;}
.guide-card{
  background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:4px;padding:10px;cursor:pointer;transition:.15s;
}
.guide-card:hover{border-color:var(--steel);}
.guide-card.active{border-color:var(--amber);border-left-color:var(--amber);box-shadow:0 0 14px rgba(255,157,30,.2);animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 8px rgba(255,157,30,.15);}50%{box-shadow:0 0 18px rgba(255,157,30,.35);}}
.gc-top{display:flex;justify-content:space-between;align-items:center;}
.gc-num{font-family:var(--mono);font-size:10px;color:var(--amber);letter-spacing:1px;}
.gc-shape{font-family:var(--head);font-size:13px;color:var(--text);}
.gc-mid{display:flex;align-items:center;gap:8px;margin:6px 0;}
.swatch{width:20px;height:20px;border-radius:3px;border:1px solid var(--line);}
.hex{font-family:var(--mono);font-size:11px;color:var(--steel);}
.gc-stats{display:flex;flex-wrap:wrap;gap:4px 10px;font-family:var(--mono);font-size:9px;color:var(--steel);}
.copy-btn{
  margin-top:12px;background:var(--olive);border:none;color:#0e0f10;font-family:var(--head);font-weight:700;
  letter-spacing:2px;padding:11px;border-radius:5px;cursor:pointer;transition:.15s;font-size:13px;
}
.copy-btn:hover:not(:disabled){background:#7c8a52;box-shadow:0 0 16px rgba(106,118,69,.5);}
.copy-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ---- Footer ---- */
#hud-footer{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
  padding:12px 22px;background:#101214;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;color:var(--steel);
}
#hud-footer a{color:var(--amber);text-decoration:none;}
#hud-footer a:hover{text-decoration:underline;}

/* ---- Responsive ---- */
@media(max-width:960px){
  #layout{grid-template-columns:1fr;}
  #panel-canvas{order:-1;}
  #panel-guide{max-height:none;}
  #guide-list{max-height:400px;}
}