:root{
  --bg:#0b0e14;
  --panel:#111623;
  --arena:#0f1320;
  --border:#1f2740;
  --text:#e6eaf2;
  --muted:#9aa4b2;
  --accent:#5eb1ff;
  --good:#37d67a;
  --bad:#ff5c5c;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:1rem;
  padding:.5rem 1rem;
  background:linear-gradient(180deg, #0d1220 0%, #0b0e14 100%);
  border-bottom:1px solid var(--border);
}
.brand{ font-weight:700; letter-spacing:.5px; color:var(--accent); }
.hud{ display:flex; gap:1rem; flex-wrap:wrap; }
.hud-item{ display:flex; gap:.5rem; align-items:baseline; }
.hud-item .label{ color:var(--muted); font-size:.85rem; }
.hud-item .value{ font-size:clamp(1rem, 1.2vw + .8rem, 1.6rem); }

.container{
  max-width:1100px; margin:0 auto; padding:1rem;
  display:grid; gap:1rem;
}

.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1rem;
}
.lead{ color:var(--muted); }

#arena-wrapper{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1rem;
}
#arena{
  outline:none;
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:radial-gradient(1200px 600px at 30% 20%, #0f172a 0%, #0b0e14 60%);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  user-select:none;
  cursor: crosshair;
}
.overlay{
  position:relative;
  margin-top:.5rem;
  color:var(--muted);
}
.hidden{ display:none !important; }

.target{
  position:absolute;
  border:2px solid #e2e8f0;
  background:transparent;
  border-radius:50%;
  box-shadow:0 0 0 2px rgba(0,0,0,.3) inset;
  pointer-events:auto;
}
.target.small{ border-color:#ffd166; }
.target.medium{ border-color:#a0e7e5; }
.target.large{ border-color:#bdb2ff; }

.target::after{
  content:"";
  position:absolute; inset:50% auto auto 50%;
  width:2px; height:2px; background:#e2e8f0;
  transform:translate(-50%,-50%);
  border-radius:50%;
}

.top-right{
  position:absolute; right:1rem; top:1rem;
}

.settings .field{ margin:.5rem 0; display:flex; gap:.75rem; align-items:center; }
.settings label{ min-width:120px; color:var(--muted); }
.settings select{ background:#0e1424; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:.5rem .75rem; }
.actions{ display:flex; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; }

.btn{
  background:#151c2e;
  color:var(--text);
  border:1px solid var(--border);
  padding:.6rem 1rem;
  border-radius:12px;
  cursor:pointer;
}
.btn:hover{ border-color:#2b3556; }
.btn.primary{ background:var(--accent); color:#061221; border-color:transparent; font-weight:600; }
.btn.subtle{ background:transparent; color:var(--muted); }

/* toggle switch */
.switch{ position:relative; display:inline-block; width:44px; height:24px; }
.switch input{ display:none; }
.slider{
  position:absolute; cursor:pointer; inset:0;
  background:#26304a; border-radius:999px;
}
.slider:before{
  content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:white; border-radius:50%; transition:.2s;
}
.switch input:checked + .slider{ background:#63b3ff; }
.switch input:checked + .slider:before{ transform:translateX(20px); }

.results .grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:1rem;
}
.metrics-table{
  width:100%;
  border-collapse:collapse;
}
.metrics-table th, .metrics-table td{
  text-align:left; padding:.4rem .6rem; border-bottom:1px dashed var(--border);
}
.metrics-table th{ color:var(--muted); font-weight:500; }

.lb-caption{ color:var(--muted); margin:.25rem 0 .5rem; }
.lb-list{ margin:0; padding-left:1.2rem; }
.lb-list li{ padding:.2rem 0; }

.footer{
  text-align:center; color:var(--muted);
  padding:2rem 1rem;
}
@media (max-width: 900px){
  .results .grid{ grid-template-columns: 1fr; }
}