:root{
  --bg:#0b1020; --bg2:#121a33; --panel:#161f3d; --panel2:#1d2950;
  --ink:#e8eeff; --muted:#9fb0d6; --line:#2b3a6b;
  --wood:#c08a4a; --stone:#9aa6b8; --metal:#7fd0ff; --sp:#ffd35a;
  --hp:#46e08a; --core:#ff7a59; --xp:#7c9cff;
  --accent:#ffb23e; --accent2:#7c5cff; --good:#46e08a; --bad:#ff5d6c;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(1200px 700px at 50% -10%, #1a2550, #0b1020 60%);
  color:var(--ink); font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  display:flex; align-items:center; justify-content:center; min-height:100vh; padding:14px;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
#game-shell{
  width:min(1040px,100%); background:linear-gradient(180deg,#0e1530,#0b1020);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column;
}

/* ===== HUD ===== */
#hud{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  padding:10px 16px; background:linear-gradient(180deg,#15224a,#101936);
  border-bottom:1px solid var(--line);
}
.hud-left{display:flex; gap:10px; align-items:center}
.brand{font-weight:800; letter-spacing:1px; font-size:18px; color:#fff}
.brand span{color:var(--accent)}
.pill{font-size:12px; font-weight:700; padding:5px 10px; border-radius:999px; background:var(--panel2); border:1px solid var(--line); white-space:nowrap}
.pill.day{background:linear-gradient(90deg,#5a4a1f,#7a5a1f); border-color:#a17b2e; color:#ffe6a8}
.pill.night{background:linear-gradient(90deg,#2a1f5a,#3a2f7a); border-color:#6b5ce0; color:#d7ccff}
.pill.wave{color:var(--muted)}
.hud-bars{display:flex; gap:14px; justify-content:center}
.bar-group{min-width:150px}
.bar-group label{font-size:10px; letter-spacing:.5px; color:var(--muted); text-transform:uppercase; display:block; margin-bottom:3px}
.bar{position:relative; height:16px; background:#0a0f22; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.bar .fill{position:absolute; inset:0 auto 0 0; width:100%; transition:width .18s ease}
.bar.core .fill{background:linear-gradient(90deg,#ff5d3a,#ff9a59)}
.bar.hp .fill{background:linear-gradient(90deg,#2bbd6a,#5dffa0)}
.bar.xp .fill{background:linear-gradient(90deg,#5c79ff,#9ab0ff); width:0%}
.bar span{position:absolute; inset:0; display:grid; place-items:center; font-size:10px; font-weight:700; text-shadow:0 1px 2px #000}
.hud-right{display:flex; gap:8px; align-items:center}
.res{font-size:13px; font-weight:700; background:var(--panel); border:1px solid var(--line); padding:5px 9px; border-radius:8px}
.res.wood{color:var(--wood)} .res.stone{color:var(--stone)} .res.metal{color:var(--metal)} .res.sp{color:var(--sp)}

/* ===== Stage / canvas ===== */
#stage{position:relative; background:#0a0f22}
#game{display:block; width:100%; height:auto; image-rendering:auto; cursor:crosshair}

/* ===== Action bar ===== */
#actionbar{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px; background:#101936; border-top:1px solid var(--line)}
.build-bar{display:flex; gap:8px; flex-wrap:wrap}
.build-slot{display:flex; gap:8px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:6px 10px; cursor:pointer; transition:.12s; min-width:120px}
.build-slot:hover{border-color:var(--accent)}
.build-slot.active{border-color:var(--accent); background:linear-gradient(180deg,#2a2440,#1d2950); box-shadow:0 0 0 2px rgba(255,178,62,.25)}
.build-slot .key{width:20px; height:20px; display:grid; place-items:center; background:#0a0f22; border:1px solid var(--line); border-radius:5px; font-size:11px; font-weight:800}
.build-slot .bi{font-size:18px}
.build-slot .bmeta b{font-size:12px; display:block}
.build-slot .bmeta small{font-size:10px; color:var(--muted)}
.action-right{display:flex; gap:8px}

/* ===== Buttons ===== */
.btn{font:inherit; font-weight:700; cursor:pointer; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--ink); padding:9px 14px; transition:.12s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,#ffb23e,#f5922b); color:#241500; border-color:#ffcf7a}
.btn.ghost{background:transparent}
.btn.big{font-size:18px; padding:14px 26px}
.btn kbd,.btn kbd{font-size:10px; opacity:.7}
kbd{background:#0a0f22;border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:10px;margin-left:4px}

/* ===== Overlays / panels ===== */
.overlay{position:absolute; inset:0; display:grid; place-items:center; background:rgba(6,10,24,.72); backdrop-filter:blur(3px); z-index:20}
.overlay.hidden{display:none}
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:16px; padding:22px 24px; box-shadow:var(--shadow); width:min(520px,92%); max-height:88%; overflow:auto}
.panel.wide{width:min(760px,94%)}
.panel.start{text-align:center}
.panel.banner{text-align:center; width:min(420px,90%)}
.panel h1{font-size:30px; letter-spacing:1px}
.panel.start .tag{color:var(--accent); margin:8px 0 14px; font-weight:600}
.howto{list-style:none; text-align:left; display:inline-block; margin:0 auto 16px; font-size:13px; color:var(--muted); line-height:1.9}
.howto b{color:var(--ink)}
.micro{font-size:11px; color:var(--muted); margin-top:14px}
.panel-head{display:flex; justify-content:space-between; align-items:center}
.sub{color:var(--muted); font-size:13px; margin:6px 0 14px}
.section{margin:16px 0 8px; font-size:14px; color:var(--accent)}
.section small{color:var(--muted); font-weight:400}

/* ===== Skill tree ===== */
.tree{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.branch{background:#0e1530; border:1px solid var(--line); border-radius:12px; padding:12px}
.branch h3{font-size:14px; margin-bottom:10px; text-align:center}
.branch.soldier h3{color:#ff8d6b} .branch.constructor h3{color:#6bd0ff} .branch.ninja h3{color:#9affb0}
.node{background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:8px 10px; margin-bottom:8px; cursor:pointer; transition:.12s}
.node:hover{border-color:var(--accent)}
.node.maxed{opacity:.6; cursor:default}
.node .nrow{display:flex; justify-content:space-between; align-items:center}
.node b{font-size:12px}
.node small{font-size:11px; color:var(--muted); display:block; margin-top:2px}
.pips{display:flex; gap:3px; margin-top:6px}
.pip{flex:1; height:5px; border-radius:3px; background:#0a0f22; border:1px solid var(--line)}
.pip.on{background:var(--accent); border-color:var(--accent)}

/* ===== Mods ===== */
.mod-slots{display:flex; gap:10px}
.mod-slot{flex:1; min-height:74px; background:#0e1530; border:1px dashed var(--line); border-radius:11px; padding:8px; text-align:center; display:flex; flex-direction:column; justify-content:center; cursor:pointer}
.mod-slot.filled{border-style:solid; border-color:var(--accent2); background:linear-gradient(180deg,#241d4a,#1a1638)}
.mod-slot .sname{font-size:11px; color:var(--muted)}
.mod-slot b{font-size:13px}
.mod-slot small{font-size:10px; color:var(--muted)}
.mod-bench{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:9px}
.mod-card{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:9px 10px; cursor:pointer; transition:.12s}
.mod-card:hover{border-color:var(--accent2)}
.mod-card.locked{opacity:.45; cursor:not-allowed}
.mod-card.equipped{border-color:var(--accent2); box-shadow:0 0 0 2px rgba(124,92,255,.3)}
.mod-card b{font-size:12px; display:block}
.mod-card small{font-size:10px; color:var(--muted)}
.mod-card .tag2{font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:var(--accent2); font-weight:800}
.mod-card.locked .tag2{color:var(--muted)}

/* ===== Achievements ===== */
.ach-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:9px}
.ach{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:9px 11px}
.ach.done{border-color:var(--good)}
.ach .arow{display:flex; justify-content:space-between; align-items:center}
.ach b{font-size:12px}
.ach .chk{font-size:14px}
.ach small{font-size:10px; color:var(--muted); display:block; margin:2px 0 6px}
.ach .pbar{height:6px; background:#0a0f22; border:1px solid var(--line); border-radius:4px; overflow:hidden}
.ach .pbar i{display:block; height:100%; background:linear-gradient(90deg,#46e08a,#7c9cff)}

/* ===== Toasts ===== */
#toasts{position:absolute; top:14px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:30; pointer-events:none}
.toast{background:linear-gradient(180deg,#241d4a,#15224a); border:1px solid var(--accent2); border-radius:10px; padding:9px 16px; font-size:13px; font-weight:700; box-shadow:var(--shadow); animation:pop .3s ease, fade .4s ease 2.6s forwards}
.toast.good{border-color:var(--good)} .toast.warn{border-color:var(--accent)}
@keyframes pop{from{transform:translateY(-12px) scale(.95);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{to{opacity:0; transform:translateY(-8px)}}

@media (max-width:720px){
  #hud{grid-template-columns:1fr; gap:8px}
  .hud-bars{flex-wrap:wrap}
  .bar-group{min-width:110px; flex:1}
  #actionbar{flex-direction:column; align-items:stretch}
}