/* ============================================================
   CORE BREACH — Circuit Defense
   ============================================================ */

:root{
  --bg-0:#04070d;
  --bg-1:#080d17;
  --bg-2:#0d1522;
  --panel:#0b1220e6;
  --line:#1b2a3f;
  --line-hi:#27405e;

  --cyan:#3ff0d8;
  --cyan-dim:#1f8b7e;
  --blue:#4aa8ff;
  --magenta:#ff3d8b;
  --amber:#ffb347;
  --lime:#a8ff5e;
  --red:#ff4d5e;
  --violet:#a97bff;

  --txt:#d8e6f5;
  --txt-dim:#7e93ab;
  --txt-faint:#4c5f76;

  --cell:48px;
  --scale:1;
  --r:10px;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

body{
  background:
    radial-gradient(1200px 700px at 50% -10%, #12233a 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 110%, #1a1030 0%, transparent 55%),
    var(--bg-0);
  color:var(--txt);
  font-family:"Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;
}

/* subtle scanlines over everything */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}

#scaler{transform:scale(var(--scale));transform-origin:center center}

#app{
  position:relative;
  width:max-content;
  display:grid;
  grid-template-columns:960px 300px;
  grid-template-rows:auto auto;
  gap:14px;
  padding:14px;
  background:linear-gradient(160deg,#0a1220,#060a12 60%);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 0 0 1px #000a, 0 30px 90px -20px #000, inset 0 1px 0 #ffffff0d;
}

/* ---------------- TOP BAR ---------------- */
#topbar{
  grid-column:1/-1;
  display:flex;align-items:center;gap:18px;
  padding:10px 14px;
  background:linear-gradient(180deg,#0e1a2b,#0a1220);
  border:1px solid var(--line);border-radius:var(--r);
}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.brand-mark{color:var(--cyan);font-size:20px;text-shadow:0 0 14px var(--cyan);animation:pulseMark 3s ease-in-out infinite}
@keyframes pulseMark{50%{opacity:.55}}
.brand-text{font-weight:600;letter-spacing:.16em;font-size:14px;color:var(--txt-dim)}
.brand-text b{color:var(--cyan);font-weight:800}

.stats{display:flex;gap:8px;flex:1 1 auto;justify-content:center;flex-wrap:nowrap}
.stat{
  min-width:78px;padding:5px 11px;border-radius:8px;
  background:#0a121ec9;border:1px solid var(--line);
  display:flex;flex-direction:column;gap:1px;line-height:1.15;
}
.s-label{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-faint)}
.s-val{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:15px;font-weight:700;color:var(--txt)}
.stat.gold .s-val{color:var(--amber)}
.stat.life .s-val{color:var(--lime)}
.stat.life.low .s-val{color:var(--red)}
.stat.flash{animation:statFlash .45s ease-out}
@keyframes statFlash{0%{background:#2a3b52;transform:translateY(-2px)}100%{background:#0a121ec9}}

.ctrls{display:flex;gap:6px;flex:0 0 auto}
.ico{
  width:38px;height:34px;border-radius:8px;cursor:pointer;
  background:#101c2c;border:1px solid var(--line-hi);color:var(--txt-dim);
  font-size:13px;font-weight:700;font-family:inherit;
  transition:.14s;
}
.ico:hover{background:#17293e;color:var(--cyan);border-color:var(--cyan-dim)}
.ico.active{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px -2px var(--cyan-dim)}
.ico.off{color:var(--txt-faint);opacity:.55}

/* ---------------- STAGE ---------------- */
#stage{
  position:relative;
  width:960px;height:576px;
  border:1px solid var(--line-hi);border-radius:var(--r);
  overflow:hidden;
  box-shadow:inset 0 0 60px #000a, 0 0 40px -12px #0ff2;
  background:#04070d;
}
#game{display:block;width:960px;height:576px;cursor:crosshair}

#banner{
  position:absolute;left:0;right:0;top:64px;text-align:center;
  pointer-events:none;opacity:0;
}
#banner .b-in{
  display:inline-block;padding:9px 30px;
  background:#0b1524dd;border:1px solid var(--cyan-dim);border-radius:6px;
  font-size:19px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cyan);text-shadow:0 0 18px var(--cyan-dim);
  box-shadow:0 0 40px -8px var(--cyan-dim);
}
#banner.danger .b-in{color:var(--red);border-color:#803;text-shadow:0 0 18px #f26;box-shadow:0 0 40px -6px #f238}
#banner.show{animation:bannerIn 2.6s ease-out forwards}
@keyframes bannerIn{
  0%{opacity:0;transform:translateY(-14px) scale(.94)}
  12%{opacity:1;transform:translateY(0) scale(1)}
  75%{opacity:1}
  100%{opacity:0;transform:translateY(-8px)}
}

#toasts{position:absolute;left:12px;bottom:12px;display:flex;flex-direction:column-reverse;gap:6px;pointer-events:none}
.toast{
  padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;
  background:#0b1524ee;border-left:3px solid var(--cyan);color:var(--txt);
  animation:toastIn .3s ease-out, toastOut .4s ease-in 2.3s forwards;
  box-shadow:0 6px 20px -8px #000;
}
.toast.warn{border-left-color:var(--amber)}
.toast.bad{border-left-color:var(--red)}
.toast.good{border-left-color:var(--lime)}
@keyframes toastIn{from{opacity:0;transform:translateX(-16px)}}
@keyframes toastOut{to{opacity:0;transform:translateX(-16px)}}

#hint{
  position:absolute;right:12px;bottom:12px;
  font-size:11px;color:var(--txt-faint);letter-spacing:.05em;
  background:#060b14aa;padding:4px 9px;border-radius:5px;pointer-events:none;
  transition:opacity .3s;
}
#hint.hidden{opacity:0}

/* ---------------- SIDEBAR ---------------- */
#sidebar{display:flex;flex-direction:column;gap:10px;height:576px}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:9px 11px;
}
.panel h2{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-faint);
  margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;
}
#buildPanel{flex:0 0 auto}
#infoPanel{flex:1 1 auto;min-height:120px;display:flex;flex-direction:column;overflow:hidden}
#infoBody{flex:1 1 auto;overflow-y:auto;min-height:0;padding-right:2px}
#infoBody::-webkit-scrollbar{width:6px}
#infoBody::-webkit-scrollbar-thumb{background:#22364d;border-radius:3px}
#infoActions{flex:0 0 auto}
#infoActions:not(:empty){padding-top:7px;border-top:1px solid var(--line);margin-top:6px}
#wavePanel{flex:0 0 auto}

/* tower buttons */
#towerList{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tw{
  position:relative;display:flex;gap:7px;align-items:center;
  padding:4px 6px;border-radius:8px;cursor:pointer;text-align:left;
  background:#0d1727;border:1px solid var(--line);color:var(--txt);
  font-family:inherit;transition:.13s;
}
.tw:hover{background:#14243a;border-color:var(--line-hi);transform:translateY(-1px)}
.tw.sel{border-color:var(--cyan);background:#10283a;box-shadow:0 0 14px -4px var(--cyan-dim)}
.tw.poor{opacity:.42;cursor:not-allowed}
.tw canvas{flex:0 0 auto;width:26px;height:26px}
.tw-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.tw-name{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-cost{font-size:11px;font-family:ui-monospace,Menlo,monospace;color:var(--amber);font-weight:700}
.tw-key{position:absolute;top:3px;right:5px;font-size:8px;color:var(--txt-faint)}

/* info panel content */
.i-head{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.i-head canvas{width:40px;height:40px;flex:0 0 auto}
.i-name{font-size:14px;font-weight:800;letter-spacing:.03em}
.i-lvl{font-size:10px;color:var(--cyan);letter-spacing:.12em;text-transform:uppercase}
.i-desc{font-size:11px;color:var(--txt-dim);line-height:1.45;margin-bottom:7px}
.i-stats{display:grid;grid-template-columns:auto 1fr;gap:1px 10px;font-size:11px;line-height:1.4;margin-bottom:7px}
.i-stats dt{color:var(--txt-faint)}
.i-stats dd{font-family:ui-monospace,Menlo,monospace;font-weight:600;text-align:right}
.up{color:var(--lime)}
.i-special{
  font-size:10.5px;line-height:1.4;padding:5px 7px;border-radius:6px;margin-bottom:7px;
  background:#1a0f2a;border:1px solid #3d2a5c;color:var(--violet);
}
.i-special b{color:#d9c2ff}
.i-btns{display:flex;gap:6px}
.i-btns button{flex:1}
.mini-btn{
  padding:6px 6px;border-radius:7px;cursor:pointer;font-family:inherit;
  font-size:11px;font-weight:700;letter-spacing:.04em;
  background:#12253c;border:1px solid var(--line-hi);color:var(--txt);transition:.13s;
}
.mini-btn:hover{background:#1a3555;border-color:var(--cyan-dim)}
.mini-btn.up{background:#123a2c;border-color:#1d6b4f;color:var(--lime)}
.mini-btn.up:hover{background:#17513c}
.mini-btn.sell{background:#3a1620;border-color:#6b2333;color:#ff8fa0}
.mini-btn.sell:hover{background:#4d1c2a}
.mini-btn:disabled{opacity:.4;cursor:not-allowed}
.mini-btn.wide{width:100%;margin-bottom:6px}
.muted{color:var(--txt-faint);font-size:11.5px;line-height:1.5}
.tgt-row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--txt-faint);
  margin-bottom:5px;padding:4px 7px;border-radius:6px;background:#0d1727;border:1px solid var(--line)}
.tgt-row[role="button"]{cursor:pointer}
.tgt-row[role="button"]:hover{border-color:var(--cyan-dim);color:var(--txt)}
.tally{font-size:10.5px;color:var(--txt-faint);margin-bottom:7px;font-family:ui-monospace,Menlo,monospace}
.tgt-row b{color:var(--cyan);font-weight:700}

/* wave preview */
#wavePreview{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px;min-height:34px}
.wp{
  display:flex;align-items:center;gap:4px;padding:3px 7px 3px 4px;border-radius:20px;
  background:#0e1a2a;border:1px solid var(--line);font-size:11px;font-weight:700;
}
.wp canvas{width:18px;height:18px}
.wp.boss{border-color:#7a2338;background:#280f18;color:#ff7f96}
#waveTag{font-size:9px;padding:1px 6px;border-radius:20px;letter-spacing:.14em}
#waveTag.boss{background:#3d0f1e;color:var(--magenta);border:1px solid #7a2338}

.big-btn{
  width:100%;padding:11px 14px;border-radius:9px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  background:linear-gradient(180deg,#153048,#0e2135);
  border:1px solid var(--line-hi);color:var(--txt);
  transition:.14s;
}
.big-btn:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 20px -6px var(--cyan-dim);transform:translateY(-1px)}
.big-btn.primary{
  background:linear-gradient(180deg,#1c7f70,#0f5a4f);border-color:#2fd7bd;color:#001a16;
  text-shadow:0 1px 0 #fff3;
}
.big-btn.primary:hover{background:linear-gradient(180deg,#25a692,#147666);color:#00120f}
.big-btn.ghost{background:transparent;color:var(--txt-dim)}
.big-btn.danger:hover{border-color:var(--red);color:var(--red);box-shadow:0 0 20px -6px #f245}
.big-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
#btnNextWave.ready{animation:readyPulse 1.8s ease-in-out infinite}
@keyframes readyPulse{50%{box-shadow:0 0 26px -4px var(--cyan-dim)}}

/* ---------------- OVERLAYS ---------------- */
#overlay{
  position:absolute;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,#08111ff2,#020509fa 75%);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:16px;
}
#overlay.hidden{display:none}
.screen{
  width:min(760px,94%);max-height:94%;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:22px;text-align:center;
  animation:screenIn .32s cubic-bezier(.2,.9,.3,1);
}
.screen.hidden{display:none}
@keyframes screenIn{from{opacity:0;transform:translateY(14px) scale(.98)}}

.logo{display:flex;flex-direction:column;align-items:center;gap:4px}
.logo-mark{font-size:52px;color:var(--cyan);text-shadow:0 0 40px var(--cyan-dim);animation:spinMark 9s linear infinite}
@keyframes spinMark{to{transform:rotate(360deg)}}
.logo h1{font-size:52px;letter-spacing:.16em;font-weight:300;color:var(--txt-dim);line-height:1}
.logo h1 b{font-weight:800;color:var(--cyan);text-shadow:0 0 34px var(--cyan-dim)}
.tagline{color:var(--txt-faint);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.screen-title{font-size:30px;font-weight:200;letter-spacing:.2em;text-transform:uppercase;color:var(--txt)}
.screen-title b{color:var(--cyan)}
.menu-btns{display:flex;flex-direction:column;gap:9px;width:min(320px,90%)}
.credit{font-size:10px;color:var(--txt-faint);letter-spacing:.16em}

/* map cards */
.map-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.map-card{
  position:relative;padding:12px;border-radius:12px;cursor:pointer;text-align:left;
  background:#0b1524;border:1px solid var(--line);color:var(--txt);font-family:inherit;
  transition:.16s;overflow:hidden;
}
.map-card:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 14px 34px -14px var(--cyan-dim)}
.map-card canvas{width:100%;height:88px;border-radius:7px;background:#050a12;display:block;margin-bottom:9px}
.map-card h3{font-size:14px;font-weight:800;letter-spacing:.05em;margin-bottom:2px}
.map-card .mc-sub{font-size:10.5px;color:var(--txt-faint);line-height:1.4;min-height:29px}
.map-card .mc-meta{display:flex;justify-content:space-between;margin-top:7px;font-size:10px;color:var(--txt-dim);font-family:ui-monospace,Menlo,monospace}
.map-card.locked{opacity:.45;cursor:not-allowed}
.map-card.locked:hover{transform:none;border-color:var(--line);box-shadow:none}
.lock-badge{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:0 22px;text-align:center;line-height:1.6;border-radius:12px;
  background:#04070de8;backdrop-filter:blur(2px);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim);
}
.lock-badge::before{content:"🔒";margin-right:8px;filter:grayscale(1)}
.mc-stars{color:var(--amber);letter-spacing:2px;font-size:12px}

.diff-row{display:flex;align-items:center;gap:12px}
.seg{display:flex;border:1px solid var(--line-hi);border-radius:8px;overflow:hidden}
.seg button{
  padding:7px 16px;background:#0d1727;border:0;color:var(--txt-dim);cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:.13s;
}
.seg button:hover{background:#16293f;color:var(--txt)}
.seg button.on{background:var(--cyan-dim);color:#00110e}

/* help */
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;text-align:left}
.help-card{padding:11px 13px;border-radius:9px;background:#0b1524;border:1px solid var(--line)}
.help-card h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:5px}
.help-card p{font-size:12px;line-height:1.55;color:var(--txt-dim)}
.help-card b{color:var(--txt)}
.keys{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;font-size:11px;color:var(--txt-faint)}
kbd{
  display:inline-block;padding:1px 6px;border-radius:4px;
  background:#152438;border:1px solid var(--line-hi);border-bottom-width:2px;
  font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--txt);
}

/* settings */
.settings{display:flex;flex-direction:column;gap:2px;width:min(380px,92%)}
.settings .row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 13px;border-radius:8px;background:#0b1524;border:1px solid var(--line);
  font-size:12.5px;cursor:pointer;
}
.settings .row:hover{border-color:var(--line-hi)}
.settings input{width:17px;height:17px;accent-color:var(--cyan);cursor:pointer}

/* result */
.stars{font-size:38px;letter-spacing:8px;color:var(--amber);text-shadow:0 0 26px #ffb34766;min-height:44px}
.stars .off{color:#243347;text-shadow:none}
.res-stats{display:grid;grid-template-columns:auto auto;gap:5px 26px;font-size:13px}
.res-stats dt{color:var(--txt-faint);text-align:right}
.res-stats dd{font-family:ui-monospace,Menlo,monospace;font-weight:700;text-align:left}

/* small viewport nicety */
@media (max-width:520px){
  .help-grid,.map-list{grid-template-columns:1fr}
}