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

:root{
  --bg:#0d1117;
  --surface:#161b22;
  --border:#30363d;
  --text:#c9d1d9;
  --text-dim:#8b949e;
  --accent:#58a6ff;
  --fire:#f0883e;
  --fire-hover:#f5a623;
  --hit:#3fb950;
  --miss:#f85149;
  --font-mono:'JetBrains Mono','Fira Code','Cascadia Code',monospace;
}

html,body{height:100%;overflow:hidden;font-family:var(--font-mono);font-size:13px;color:var(--text);background:var(--bg)}

body{display:flex}

/* Sidebar */
#sidebar{
  width:360px;min-width:360px;height:100vh;overflow-y:auto;
  background:var(--surface);border-right:1px solid var(--border);
  padding:16px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}

#sidebar h1{font-size:18px;color:var(--accent);text-align:center;letter-spacing:2px;text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid var(--border)}
#sidebar h2{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);margin-bottom:8px}

.panel{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px}

/* Sliders */
label{display:flex;flex-direction:column;gap:4px}
label>span{display:flex;justify-content:space-between;font-size:12px}
label output{color:var(--accent);font-weight:700}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;
  background:var(--border);border-radius:3px;outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;
  border-radius:50%;background:var(--accent);cursor:pointer;
  border:2px solid var(--surface);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--accent);
  cursor:pointer;border:2px solid var(--surface);
}

/* Buttons */
.btn-fire{
  padding:12px;font-size:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  background:var(--fire);color:#fff;border:none;border-radius:8px;cursor:pointer;
  transition:background .15s,transform .1s;
}
.btn-fire:hover{background:var(--fire-hover)}
.btn-fire:active{transform:scale(.97)}
.btn-fire:disabled{opacity:.5;cursor:not-allowed}

.btn-secondary{
  padding:8px 12px;font-size:12px;background:var(--border);color:var(--text);
  border:1px solid var(--border);border-radius:6px;cursor:pointer;
  transition:background .15s;flex:1;
}
.btn-secondary:hover{background:var(--surface)}

.row{display:flex;gap:8px;align-items:center}
#input-random-count{
  width:70px;padding:6px 8px;background:var(--bg);color:var(--accent);
  border:1px solid var(--border);border-radius:6px;font-family:var(--font-mono);
  font-size:12px;text-align:center;
}

/* Progress bar */
#progress-container{
  height:20px;background:var(--bg);border:1px solid var(--border);
  border-radius:4px;position:relative;overflow:hidden;
}
#progress-bar{height:100%;background:var(--accent);width:0%;transition:width .1s}
#progress-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text)}
.hidden{display:none!important}

/* Stats */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stat-item{display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--surface);border-radius:4px}
.stat-label{font-size:10px;text-transform:uppercase;color:var(--text-dim)}
.stat-value{font-size:14px;font-weight:700;color:var(--accent)}

/* Toggles */
.toggles{display:flex;gap:12px;flex-wrap:wrap}
.toggle{flex-direction:row!important;align-items:center;gap:6px!important;cursor:pointer;font-size:12px}
.toggle input{accent-color:var(--accent)}

/* Chart */
#chart-container{height:180px;position:relative}
#chart-hist{width:100%!important;height:100%!important}

/* Viewport */
#viewport{flex:1;position:relative;overflow:hidden;background:#000}
#canvas3d{width:100%;height:100%;display:block}

#hud{
  position:absolute;top:12px;left:12px;
  background:rgba(13,17,23,.8);border:1px solid var(--border);
  border-radius:6px;padding:8px 14px;font-size:12px;
  pointer-events:none;
}

/* Responsive */
@media(max-width:900px){
  body{flex-direction:column}
  #sidebar{width:100%;min-width:0;height:auto;max-height:45vh;border-right:none;border-bottom:1px solid var(--border)}
  #viewport{flex:1;min-height:300px}
}

/* Actions panel */
.actions{gap:10px}