:root{
  --green: #00ff00;
  --green-dim: #9fe89f;
  --bg: #050505;
  --panel-bg: #0a0f0a;
}
*, *::before, *::after { box-sizing: border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--green);
  font-family:"Courier New", monospace;
  padding:24px;
}
.app{
  max-width:840px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}
h1{
  text-align:center;
  font-size:20px;
  letter-spacing:3px;
  text-shadow:0 0 8px rgba(0,255,0,0.4);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.subtitle{
  font-size:10px;
  letter-spacing:1px;
  color:var(--green-dim);
  opacity:0.7;
}

.hud{
  display:flex;
  justify-content:center;
  gap:20px;
  font-size:12px;
  letter-spacing:1px;
  background:var(--panel-bg);
  border:1px solid var(--green);
  padding:8px;
}

.arena-wrap{
  position:relative;
  display:flex;
  justify-content:center;
}
#arena-canvas{
  border:1px solid var(--green);
  box-shadow:0 0 14px rgba(0,255,0,0.15);
  background:#000;
  max-width:100%;
}

.overlay{
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:800px;
  height:100%;
  background:rgba(0,0,0,0.9);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  border:1px solid var(--green);
}
.overlay-title{
  font-size:16px;
  letter-spacing:2px;
  text-shadow:0 0 8px rgba(0,255,0,0.4);
}
.upgrade-choices{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  padding:0 20px;
}
.upgrade-card{
  background:var(--panel-bg);
  border:1px solid var(--green);
  padding:16px;
  width:200px;
  cursor:pointer;
  transition:all 0.15s ease;
}
.upgrade-card:hover{ background:rgba(0,255,0,0.1); box-shadow:0 0 10px rgba(0,255,0,0.3); }
.upgrade-card .u-name{ font-size:13px; margin-bottom:8px; letter-spacing:0.5px; }
.upgrade-card .u-desc{ font-size:11px; color:var(--green-dim); }

button{
  font-family:"Courier New", monospace;
  font-weight:bold;
  font-size:12px;
  letter-spacing:1px;
  background:transparent;
  color:var(--green);
  border:1px solid var(--green);
  padding:10px 18px;
  cursor:pointer;
}
button:hover{ background:var(--green); color:#050505; }

.log-panel{
  background:var(--panel-bg);
  border:1px solid var(--green);
  padding:12px;
  max-height:150px;
  overflow-y:auto;
}
.log-title{ font-size:11px; letter-spacing:2px; margin-bottom:8px; }
#run-log{ font-size:11px; line-height:1.7; color:var(--green-dim); }