/* ============================================================
   IRONWORKS FRONT — copper & steel industrial UI
   ============================================================ */
:root{
  --copper:#c67a3e; --copper-d:#7a4322; --copper-l:#e29a5b;
  --panel:#241a13; --panel-l:#3a2a1d; --panel-ll:#4c382650;
  --steel:#9aa3ad; --steel-d:#5b636c; --orange:#e8912e;
  --text:#f0e2cf; --text-d:#b8a488; --text-dim:#a08a70;
  --danger:#d64545; --ok:#6fbf5b; --gold:#e8c14a;
  --edge: #0d0906;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{width:100%; height:100%; overflow:hidden; background:#0d0906;
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif; color:var(--text);
  -webkit-font-smoothing:none; user-select:none;}
canvas#game{display:block; position:absolute; inset:0; image-rendering:pixelated;
  image-rendering:crisp-edges; cursor:crosshair; background:#101820;}
.hidden{display:none !important;}

/* ---------- Generic metal panels & buttons ---------- */
.panel{background:
    linear-gradient(180deg,#3a2a1d 0%, #241a13 100%);
  border:3px solid var(--edge); border-radius:8px;
  box-shadow: inset 0 0 0 2px #5a3c22, inset 0 3px 8px #00000080, 0 6px 18px #000000a0;
}
.metal-btn{
  font-family:inherit; font-weight:bold; letter-spacing:.5px; color:var(--text);
  background:linear-gradient(180deg,#8a5a2f,#5e3a1e);
  border:2px solid var(--edge); border-radius:6px;
  box-shadow: inset 0 1px 0 #e6a763, inset 0 -2px 4px #00000070, 0 2px 4px #0007;
  padding:10px 18px; font-size:15px; cursor:pointer; text-shadow:0 1px 1px #000;
  transition:filter .08s, transform .05s;
}
.metal-btn:hover{filter:brightness(1.15);}
.metal-btn:active{transform:translateY(1px); filter:brightness(.92);}
.metal-btn.small{padding:5px 10px; font-size:13px;}
.metal-btn.wide{width:100%; margin:5px 0;}
.metal-btn.ghost{background:linear-gradient(180deg,#3a2a1d,#241a13);}
.metal-btn:disabled{filter:grayscale(.7) brightness(.6); cursor:not-allowed;}
.metal-btn.danger{background:linear-gradient(180deg,#a83a3a,#6e2222);}

h1,h2,h3{font-family:"Impact","Arial Black",sans-serif; letter-spacing:2px;
  text-transform:uppercase; color:var(--orange); text-shadow:2px 2px 0 #000, 0 0 12px #e8912e55;}

/* ---------- Loading ---------- */
#loading{position:absolute; inset:0; z-index:100; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  background:radial-gradient(circle at 50% 40%, #2a1d12, #0d0906 70%);}
.load-logo{font-family:"Impact","Arial Black",sans-serif; font-size:54px; letter-spacing:6px;
  color:var(--copper-l); text-shadow:3px 3px 0 #000, 0 0 24px #c67a3e88;}
.load-sub{color:var(--text-dim); letter-spacing:2px;}
.load-bar{width:340px; height:20px; background:#000; border:2px solid var(--edge); border-radius:4px;
  overflow:hidden; box-shadow:inset 0 2px 6px #000;}
#load-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--copper),var(--orange));
  transition:width .2s; box-shadow:0 0 10px var(--orange);}
#load-detail{color:var(--text-dim); font-size:12px; height:16px;}

/* ---------- HUD ---------- */
#hud{position:absolute; inset:0; z-index:20; pointer-events:none;}
#hud > *{pointer-events:auto;}
#topbar{position:absolute; top:0; left:0; right:0; height:52px; display:flex; align-items:center;
  gap:14px; padding:0 12px;
  background:linear-gradient(180deg,#2a1d12ee,#1a120bcc); border-bottom:3px solid var(--edge);
  box-shadow:0 3px 10px #000a;}
#resbar{display:flex; gap:14px; align-items:center; flex:1;}
.res{display:flex; align-items:center; gap:6px; font-weight:bold; font-size:15px;
  background:#0006; border:1px solid #0008; border-radius:6px; padding:3px 10px 3px 4px;}
.res img,.res canvas{width:26px; height:26px; image-rendering:pixelated;}
.res .num{min-width:34px; text-align:right; text-shadow:0 1px 1px #000;}
.res.low .num{color:var(--danger);}
#wavebox{text-align:center; min-width:130px; background:#0006; border:1px solid #0008;
  border-radius:6px; padding:2px 12px;}
#wavelabel{font-size:12px; letter-spacing:2px; color:var(--orange); font-weight:bold;}
#wavetimer{font-size:20px; font-weight:bold; font-variant-numeric:tabular-nums;}
#wavebox.imminent{animation:pulse .6s infinite; border-color:var(--danger);}
@keyframes pulse{50%{background:#d6454540;}}
#mitbox{font-weight:bold; color:var(--gold); background:#0006; border:1px solid #0008;
  border-radius:6px; padding:6px 12px; letter-spacing:1px;}
#mitbox span{color:#fff;}

#buildbar{position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; padding:8px 10px; max-width:96vw; flex-wrap:wrap; justify-content:center;
  background:linear-gradient(180deg,#2a1d12ee,#140d07ee); border:3px solid var(--edge);
  border-bottom:none; border-radius:12px 12px 0 0; box-shadow:0 -4px 14px #000a;}
.bcard{width:74px; height:82px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:2px; padding:5px 2px; cursor:pointer; border-radius:8px; position:relative;
  background:linear-gradient(180deg,#3a2a1d,#241a13); border:2px solid var(--edge);
  box-shadow:inset 0 1px 0 #6a4626; transition:filter .1s, transform .05s;}
.bcard:hover{filter:brightness(1.2);}
.bcard.sel{border-color:var(--orange); box-shadow:0 0 0 2px var(--orange), 0 0 14px #e8912e88;}
.bcard.locked{filter:grayscale(1) brightness(.5); cursor:not-allowed;}
.bcard canvas{width:44px; height:44px; image-rendering:pixelated;}
.bcard .bname{font-size:10px; text-align:center; line-height:1.05; color:var(--text);}
.bcard .bcost{font-size:9px; color:var(--gold);}
.bcard .khint{position:absolute; top:2px; left:4px; font-size:9px; color:var(--text-dim);}
.bcard.tool{width:56px;}

#tip{position:absolute; top:58px; left:50%; transform:translateX(-50%); font-size:12px;
  color:var(--text-dim); background:#0007; padding:4px 12px; border-radius:12px; white-space:nowrap;
  pointer-events:none; opacity:.85;}
#toast{position:absolute; top:64px; left:50%; transform:translateX(-50%); display:flex;
  flex-direction:column; gap:6px; align-items:center;}
.toastmsg{background:#241a13ee; border:2px solid var(--edge); border-left:5px solid var(--orange);
  padding:8px 16px; border-radius:6px; font-weight:bold; box-shadow:0 4px 12px #000a;
  animation:toastin .3s ease-out;}
.toastmsg.bad{border-left-color:var(--danger);}
.toastmsg.good{border-left-color:var(--ok);}
@keyframes toastin{from{transform:translateY(-12px); opacity:0;}}

/* ---------- Building inspector / config panel ---------- */
#inspector{position:absolute; top:62px; right:10px; width:270px; max-height:calc(100vh - 180px);
  overflow:auto; padding:0; z-index:25;}
.insp-head{display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:2px solid var(--edge);
  background:linear-gradient(180deg,#4a3826,#2a1d12);}
.insp-head canvas{width:34px; height:34px; image-rendering:pixelated;}
.insp-head .it{flex:1;}
.insp-head .in-name{font-weight:bold; color:var(--copper-l); font-size:15px; line-height:1.1;}
.insp-head .in-sub{font-size:11px; color:var(--text-dim);}
.insp-close{cursor:pointer; color:var(--text-dim); font-size:20px; line-height:1; padding:0 4px;}
.insp-close:hover{color:var(--danger);}
.insp-body{padding:10px 12px; display:flex; flex-direction:column; gap:8px;}
.insp-lbl{font-size:11px; letter-spacing:1px; color:var(--orange); font-weight:bold; text-transform:uppercase;}
.recipe-opt{display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; cursor:pointer;
  background:linear-gradient(180deg,#3a2a1d,#241a13); border:2px solid var(--edge);}
.recipe-opt:hover{filter:brightness(1.18);}
.recipe-opt.active{border-color:var(--orange); box-shadow:0 0 0 1px var(--orange), 0 0 10px #e8912e66;}
.recipe-opt canvas{width:26px; height:26px; image-rendering:pixelated;}
.recipe-opt .ro-txt{flex:1; font-size:12px;}
.recipe-opt .ro-name{font-weight:bold; color:var(--text);}
.recipe-opt .ro-io{color:var(--text-dim); font-size:11px; display:flex; align-items:center; gap:2px; flex-wrap:wrap;}
.recipe-opt .ro-io canvas{width:14px; height:14px; vertical-align:middle;}
.insp-stat{display:flex; justify-content:space-between; font-size:12px; color:var(--text);}
.insp-stat b{color:var(--copper-l);}
.insp-store{display:flex; flex-wrap:wrap; gap:6px;}
.insp-store .si{display:flex; align-items:center; gap:3px; background:#0005; border:1px solid #0007;
  border-radius:5px; padding:2px 6px 2px 3px; font-size:12px; font-weight:bold;}
.insp-store .si canvas{width:20px; height:20px; image-rendering:pixelated;}
.insp-bar{height:8px; background:#000; border:1px solid var(--edge); border-radius:3px; overflow:hidden;}
.insp-bar > div{height:100%; background:linear-gradient(90deg,var(--copper),var(--orange));}
.insp-warn{color:var(--danger); font-size:12px; font-weight:bold;}

#spawn-arrows{position:absolute; inset:0; pointer-events:none;}
.sarrow{position:absolute; font-size:34px; color:var(--danger); text-shadow:0 0 8px #000,0 0 14px #d64545;
  animation:pulse .5s infinite; transform-origin:center;}

/* ---------- Overlay menus ---------- */
#overlay{position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, #1a120bcc, #0d0906ee);}
#overlay-inner{max-width:min(960px,94vw); max-height:92vh; overflow:auto; width:100%;}

.menu-card{padding:26px 30px;}
.menu-title{text-align:center; margin-bottom:6px; font-size:40px;}
.menu-tag{text-align:center; color:var(--text-dim); letter-spacing:3px; margin-bottom:22px; font-size:13px;}

.slots{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px;}
.slot{padding:16px; cursor:pointer; text-align:center; min-height:150px; display:flex;
  flex-direction:column; justify-content:center; gap:6px;}
.slot:hover{filter:brightness(1.15);}
.slot.active{box-shadow:inset 0 0 0 2px #5a3c22, 0 0 0 3px var(--orange), 0 0 18px #e8912e66;}
.slot .snum{font-size:12px; color:var(--orange); letter-spacing:2px;}
.slot .smit{font-size:26px; font-weight:bold; color:var(--gold);}
.slot .smeta{font-size:12px; color:var(--text-dim);}
.slot.empty .smit{color:var(--steel-d);}

.row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:10px;}
.center{text-align:center;}

/* shop */
.shopgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin:14px 0;}
.upg{padding:12px 14px; display:flex; flex-direction:column; gap:6px;}
.upg .un{font-weight:bold; color:var(--copper-l); font-size:15px;}
.upg .ud{font-size:12px; color:var(--text-dim); flex:1;}
.upg .pips{display:flex; gap:4px;}
.pip{width:16px; height:10px; background:#000; border:1px solid #6a4626; border-radius:2px;}
.pip.on{background:var(--orange); box-shadow:0 0 6px var(--orange);}
.upg .ubuy{display:flex; justify-content:space-between; align-items:center;}
.upg .ucost{color:var(--gold); font-weight:bold; font-size:13px;}

.settings-row{display:flex; align-items:center; gap:12px; margin:12px 0; justify-content:space-between;}
.settings-row label{font-weight:bold; letter-spacing:1px;}
input[type=range]{width:220px; accent-color:var(--copper);}

.resultbig{font-size:64px; text-align:center; margin:10px 0;}
.win{color:var(--ok); text-shadow:2px 2px 0 #000,0 0 24px #6fbf5b88;}
.lose{color:var(--danger); text-shadow:2px 2px 0 #000,0 0 24px #d6454588;}
.reward{text-align:center; font-size:22px; color:var(--gold); margin-bottom:16px;}

.kbd{display:inline-block; background:#000; border:1px solid #6a4626; border-radius:4px;
  padding:1px 6px; font-size:12px; color:var(--copper-l);}
.hr{height:2px; background:linear-gradient(90deg,transparent,#6a4626,transparent); margin:14px 0;}
.small-note{font-size:12px; color:var(--text-dim); text-align:center;}