/* NEON DEFENSE — dark neon HUD (v4: anti-overlap layout) */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
html,body { height:100%; background:#05070d; overflow:hidden; touch-action:manipulation; }
body { font-family:'Segoe UI', system-ui, 'Noto Sans Thai', 'Leelawadee UI', Tahoma, sans-serif; color:#dfe9ff; user-select:none; }

#wrap { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }
#game { display:block; background:#070b16; box-shadow:0 0 80px #0af3 inset, 0 0 24px #000; touch-action:none; }

/* ---------- TOP HUD ---------- */
#hud-top { position:absolute; top:10px; left:12px; display:flex; gap:8px; flex-wrap:wrap; pointer-events:none; z-index:5; max-width:70vw; }
.stat { background:rgba(10,18,36,.82); border:1px solid #1f3a6e; border-radius:10px; padding:5px 12px 5px 8px;
  font-size:17px; font-weight:700; display:flex; align-items:center; gap:6px; box-shadow:0 0 12px rgba(40,120,255,.25); min-width:74px; }
.stat .ic { font-size:15px; filter:drop-shadow(0 0 4px #48f); }
.stat.dim { opacity:.75; font-size:14px; min-width:auto; }
#hud-topright { position:absolute; top:10px; right:12px; display:flex; gap:6px; z-index:5; }
.tbtn { background:rgba(10,18,36,.85); border:1px solid #2a4a8a; color:#bfe0ff; border-radius:10px; padding:6px 11px;
  font-size:14px; font-weight:700; cursor:pointer; transition:.15s; }
.tbtn:hover { border-color:#4d8dff; box-shadow:0 0 10px rgba(80,150,255,.5); color:#fff; }

/* ---------- BUILD BAR (bottom center) ---------- */
#buildbar { position:absolute; left:50%; transform:translateX(-50%); bottom:12px; display:flex; gap:8px; z-index:5; max-width:96vw; }
.bcard { width:78px; background:linear-gradient(180deg, rgba(16,28,54,.92), rgba(8,14,30,.92)); border:1px solid #24457f;
  border-radius:12px; padding:7px 4px 5px; text-align:center; cursor:pointer; transition:.15s; position:relative; flex-shrink:0; }
.bcard:hover { transform:translateY(-3px); border-color:#5aa2ff; box-shadow:0 4px 18px rgba(60,140,255,.35); }
.bcard.sel { border-color:#ffd166; box-shadow:0 0 16px rgba(255,209,102,.55); transform:translateY(-5px); }
.bcard.poor { opacity:.45; filter:grayscale(.6); }
.bcard .bic { font-size:22px; display:block; filter:drop-shadow(0 0 6px currentColor); }
.bcard .bnm { font-size:11px; font-weight:700; margin-top:2px; display:block; }
.bcard .bcost { font-size:12px; color:#ffd166; font-weight:800; }
.bcard .bkey { position:absolute; top:2px; left:6px; font-size:10px; color:#5f7bae; }

/* ---------- ABILITIES: vertical column, right edge — never shares the bottom strip ---------- */
#abilities { position:absolute; right:12px; bottom:12px; z-index:5; background:rgba(8,14,30,.88);
  border:1px solid #1f3a6e; border-radius:14px; padding:8px; box-shadow:0 0 18px rgba(40,120,255,.18); }
.ab-title { font-size:11px; color:#7fa8e8; letter-spacing:.5px; margin-bottom:6px; text-align:center; }
.ab-row { display:flex; flex-direction:column; gap:6px; }
.ab-btn { width:76px; padding:8px 2px 6px; background:linear-gradient(180deg,#13244a,#0a1330); border:1px solid #2a4a8a;
  border-radius:12px; color:#dfe9ff; cursor:pointer; text-align:center; position:relative; transition:.15s; }
.ab-btn:hover:not(.cding) { border-color:#7df; box-shadow:0 0 14px rgba(90,180,255,.5); transform:translateY(-2px); }
.ab-btn.armed { border-color:#ff5470; box-shadow:0 0 16px rgba(255,84,112,.7); animation:pulse .7s infinite alternate; }
.ab-btn.cding { opacity:.55; filter:grayscale(.7); cursor:default; }
.ab-ic { font-size:21px; display:block; filter:drop-shadow(0 0 5px currentColor); }
.ab-label { font-size:10.5px; font-weight:700; display:block; margin-top:2px; }
.ab-cd { position:absolute; inset:0; background:rgba(4,8,18,.72); border-radius:12px; display:flex;
  align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#9fc4ff; }
@keyframes pulse { from{box-shadow:0 0 8px rgba(255,84,112,.4)} to{box-shadow:0 0 22px rgba(255,84,112,.9)} }

/* ---------- TOWER PANEL ---------- */
#towerpanel { position:absolute; left:50%; transform:translateX(-50%); bottom:104px; z-index:6;
  background:rgba(8,16,34,.94); border:1px solid #2f5aa8; border-radius:14px; padding:10px 14px; min-width:250px;
  max-width:92vw; box-shadow:0 6px 30px rgba(0,0,0,.6), 0 0 18px rgba(70,140,255,.25); }
#tp-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; gap:10px; }
#tp-name { font-weight:800; font-size:15px; color:#fff; }
#tp-lvl { color:#ffd166; font-size:13px; letter-spacing:2px; }
#tp-stats { font-size:12.5px; color:#a9c4ee; line-height:1.55; margin-bottom:8px; white-space:pre-line; }
#tp-btns { display:flex; gap:6px; }
#tp-btns button { flex:1; padding:7px 4px; border-radius:9px; border:1px solid #2a4a8a; background:#122550;
  color:#dfe9ff; font-weight:700; font-size:12px; cursor:pointer; transition:.15s; font-family:inherit; }
#tp-btns button:hover:not(:disabled) { border-color:#6db2ff; box-shadow:0 0 10px rgba(90,160,255,.5); }
#tp-btns button:disabled { opacity:.4; cursor:default; }
#btn-up { border-color:#3fae6a !important; }
#btn-sell { border-color:#a8434f !important; }

/* ---------- WAVE PILL / BANNER ---------- */
#wavepill { position:absolute; top:52px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:8px; align-items:center;
  background:rgba(8,16,34,.9); border:1px solid #2f5aa8; border-radius:24px; padding:6px 8px 6px 16px; font-size:14px; white-space:nowrap; }
#btn-call { background:#1b3a2a; border:1px solid #3fae6a; color:#7dffb0; border-radius:16px; padding:4px 12px;
  font-weight:700; cursor:pointer; font-size:13px; font-family:inherit; }
#btn-call:hover { box-shadow:0 0 12px rgba(80,255,150,.4); }
#banner { position:absolute; top:34%; left:0; right:0; text-align:center; z-index:7; pointer-events:none; }
#banner-main { font-size:44px; font-weight:900; color:#fff; text-shadow:0 0 24px #48c6ff, 0 0 60px #1a7dff; animation:bann .95s ease-out; }
#banner-sub { font-size:17px; color:#9fd0ff; margin-top:4px; text-shadow:0 0 12px #148; animation:bann 1.15s ease-out; }
@keyframes bann { 0%{opacity:0; transform:scale(.6)} 18%{opacity:1; transform:scale(1.06)} 30%{transform:scale(1)} 78%{opacity:1} 100%{opacity:0; transform:scale(1.04)} }
#mergehint { position:absolute; top:52px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:10px; align-items:center;
  background:rgba(40,10,50,.92); border:1px solid #b06; border-radius:24px; padding:6px 8px 6px 16px; font-size:14px; color:#ffb3d9;
  box-shadow:0 0 16px rgba(255,80,160,.35); white-space:nowrap; }
#mergehint button { background:#2a0f22; color:#ff9dc9; border:1px solid #b06; border-radius:14px; padding:3px 10px; cursor:pointer; font-family:inherit; }

/* ---------- BOSS BAR ---------- */
#bossbar { position:absolute; top:88px; left:50%; transform:translateX(-50%); width:min(440px,72vw); z-index:5; text-align:center; }
#bossbar-name { font-size:13px; font-weight:800; color:#ff9db0; text-shadow:0 0 10px #f36; margin-bottom:3px; letter-spacing:1px; }
#bossbar-track { height:12px; background:rgba(20,6,12,.85); border:1px solid #722; border-radius:8px; overflow:hidden; }
#bossbar-fill { height:100%; width:100%; background:linear-gradient(90deg,#ff2d55,#ff7a45); box-shadow:0 0 12px #f35; transition:width .12s linear; }

/* ---------- OVERLAYS ---------- */
.overlay { position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background:rgba(3,6,14,.82); backdrop-filter:blur(4px); padding:10px; }
.panel { background:linear-gradient(180deg, rgba(14,26,52,.97), rgba(7,12,26,.97)); border:1px solid #2f5aa8;
  border-radius:20px; padding:26px 34px; text-align:center; max-width:min(560px, 92vw); max-height:88vh; overflow-y:auto;
  box-shadow:0 0 60px rgba(30,90,220,.35); }
.panel h1 { font-size:34px; text-shadow:0 0 26px #2af, 0 0 70px #16f; letter-spacing:1px; }
.panel .tag { color:#7fb2ff; margin:6px 0 14px; font-size:15px; letter-spacing:2px; }
.howto { text-align:left; list-style:none; margin:0 0 18px; font-size:14px; line-height:1.9; color:#c6d9f7; }
.howto b { color:#ffd166; }
.cta { font-size:19px; font-weight:800; padding:12px 42px; border-radius:14px; border:1px solid #35c4ff;
  background:linear-gradient(180deg,#123a6e,#0a1f44); color:#fff; cursor:pointer; letter-spacing:1px; transition:.2s; font-family:inherit; }
.cta:hover { box-shadow:0 0 30px rgba(60,190,255,.6); transform:translateY(-2px); }
.hint { margin-top:14px; font-size:11.5px; color:#6480ad; }
#over-stats { font-size:16px; line-height:2; margin:12px 0 20px; color:#cfe0ff; }
#over-stats b { color:#ffd166; }
#pausebox { position:absolute; inset:0; z-index:15; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(3,6,14,.6); pointer-events:none; }
#pausebox div { font-size:42px; font-weight:900; text-shadow:0 0 30px #2af; }
#pausebox span { color:#8fb2e8; margin-top:8px; }

#errbox { position:absolute; bottom:8px; left:8px; z-index:30; background:rgba(80,8,16,.92); border:1px solid #f45;
  border-radius:8px; padding:8px 12px; font-size:12px; max-width:70vw; color:#ffd6dc; white-space:pre-wrap; }

/* ---------- TABLET / SMALL DESKTOP ---------- */
@media (max-width: 1100px) {
  .stat { font-size:14px; padding:4px 9px 4px 7px; min-width:60px; }
  #hud-topright .tbtn { padding:5px 9px; font-size:13px; }
  .bcard { width:66px; padding:6px 2px 4px; }
  .bcard .bic { font-size:19px; } .bcard .bnm { font-size:10px; } .bcard .bcost { font-size:11px; }
  #abilities { right:8px; bottom:8px; transform:scale(.88); transform-origin:bottom right; }
  .ab-btn { width:62px; } .ab-ic { font-size:17px; }
  #towerpanel { bottom:96px; min-width:230px; }
}

/* ---------- MOBILE: abilities = full-width row ABOVE the build bar ---------- */
@media (max-width: 560px) {
  #hud-top { left:8px; top:8px; gap:4px; }
  #hud-topright { right:8px; top:8px; gap:4px; }
  .stat { font-size:12px; padding:3px 6px; min-width:0; gap:4px; border-radius:8px; }
  .stat .ic { font-size:12px; }
  .stat.dim { display:none; }
  .tbtn { padding:4px 7px; font-size:12px; border-radius:8px; }

  #buildbar { gap:4px; bottom:8px; }
  .bcard { width:52px; } .bcard .bkey { display:none; }
  .bcard .bic { font-size:17px; } .bcard .bnm { font-size:9px; } .bcard .bcost { font-size:10px; }

  #abilities { left:8px; right:8px; bottom:74px; padding:6px; transform:none; }
  .ab-title { display:none; }
  .ab-row { flex-direction:row; gap:6px; }
  .ab-btn { flex:1; width:auto; padding:6px 2px 5px; }
  .ab-ic { font-size:16px; }
  .ab-label { font-size:9px; }

  #towerpanel { bottom:138px; min-width:200px; padding:8px 10px; }
  #wavepill { font-size:12px; top:42px; }
  #banner-main { font-size:30px; }
  #bossbar { top:76px; }
  .panel { padding:16px 14px; } .panel h1 { font-size:24px; }
  .howto { font-size:12px; line-height:1.7; }
}

/* very short landscape screens: shrink column further */
@media (max-height: 520px) and (min-width: 561px) {
  #abilities { transform:scale(.72); transform-origin:bottom right; right:4px; bottom:4px; }
  .ab-title { display:none; }
}