html,body{margin:0;height:100%;background:#0b1020;font-family:system-ui,Segoe UI,Arial}
#app{position:relative;height:100%;overflow:hidden;touch-action:none}
#game{width:100%;height:100%;display:block;background:#1c2442}

#hudTop{
  position:absolute;left:10px;top:10px;right:10px;
  display:flex;gap:10px;align-items:center;pointer-events:none
}
.pill{pointer-events:none;color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);
  padding:8px 12px;border-radius:14px;backdrop-filter: blur(6px)
}
.iconBtn{pointer-events:auto;margin-left:auto;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);
  color:#fff;border-radius:12px;padding:8px 10px
}

#bottomBar{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;gap:10px;align-items:center;justify-content:center;
  padding:10px;background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events:none
}
#towerTray,#skillsTray{display:flex;gap:10px;pointer-events:auto}
.cardBtn{
  width:72px;height:72px;border-radius:18px;
  background:rgba(20,25,40,.7);border:1px solid rgba(255,255,255,.14);
  color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;
  user-select:none;-webkit-user-select:none
}
.cardBtn small{opacity:.8}
.modal{position:absolute;inset:0;display:none;place-items:center;background:rgba(0,0,0,.55)}
.modal.show{display:grid}
.modalCard{width:min(380px,92vw);background:#111a35;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px;color:#fff}
.modalCard input{width:100%;padding:10px;margin:8px 0;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0b1020;color:#fff}
.row{display:flex;gap:10px}
.row button{flex:1;padding:10px;border-radius:10px;border:0;background:#2a66ff;color:#fff}
.err{color:#ff7070;min-height:20px}