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

:root {
  --bg:       #121218;
  --surface:  #1D1D28;
  --surface2: #25253A;
  --border:   #33334A;
  --accent:   #7C6FFF;
  --accent2:  #FF6B6B;
  --text:     #E0E0F0;
  --textdim:  #888899;
  --topbar-h: 46px;
  --footer-h: 36px;
  --sidebar-w: 200px;
}

html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; font-size: 13px; }

/* ── App Shell ───────────────────────────────────────── */
#app { display: flex; flex-direction: column; width: 100vw; height: 100vh; }

/* ── Top Bar ─────────────────────────────────────────── */
#topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 12px;
  flex-shrink: 0;
  z-index: 10;
}

#logo {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
  user-select: none;
}
.logo-pix { color: var(--accent); }
.logo-als { color: var(--text); }

#top-controls { display: flex; gap: 6px; margin-left: 8px; }

.ctrl-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.ctrl-btn:hover  { background: var(--border); border-color: var(--accent); }
.ctrl-btn:active { background: var(--accent); color: #fff; }
.ctrl-btn.paused { background: #3a2020; border-color: var(--accent2); color: var(--accent2); }

#fps-counter {
  margin-left: auto;
  color: var(--textdim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-width: 52px;
  text-align: right;
}

/* ── Main Content ────────────────────────────────────── */
#main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Canvas Wrapper ──────────────────────────────────── */
#canvas-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0C0C12;
  position: relative;
  overflow: hidden;
  cursor: crosshair;
}

#sim-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  border: 1px solid #222233;
}

#canvas-overlay {
  position: absolute;
  bottom: 8px;
  left: 10px;
  pointer-events: none;
}
#coords-display {
  font-size: 10px;
  color: rgba(200,200,220,0.45);
  font-variant-numeric: tabular-nums;
}

/* ── Sidebar ─────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

#sidebar::-webkit-scrollbar { width: 5px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Brush Tools ─────────────────────────────────────── */
#brush-tools {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--textdim);
}

#brush-sizes { display: flex; gap: 4px; }

.brush-btn {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--textdim);
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  padding: 3px 0;
  transition: all 0.12s;
  line-height: 1.4;
}
.brush-btn:hover  { border-color: var(--accent); color: var(--text); }
.brush-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

#brush-slider {
  width: 100%;
  accent-color: var(--accent);
  height: 4px;
  cursor: pointer;
}
#brush-value { font-size: 11px; color: var(--textdim); text-align: right; }

/* ── Element Panel ───────────────────────────────────── */
#element-panel { flex: 1; padding: 4px 0 8px; }

.category { margin-bottom: 2px; }

.cat-header {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--textdim);
  padding: 6px 12px 3px;
}

.element-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 0 8px;
}

.elem-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  background: var(--surface2);
  border: 1.5px solid transparent;
  border-radius: 5px;
  color: var(--text);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.12s;
  overflow: hidden;
  white-space: nowrap;
}

.elem-btn::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--c, #888);
  flex-shrink: 0;
}

.elem-btn:hover  { background: #2C2C40; border-color: var(--c, var(--border)); }
.elem-btn.active { border-color: var(--c, var(--accent)); background: #2A2A44; box-shadow: 0 0 6px -1px var(--c, var(--accent)); }
.elem-btn.eraser-btn::before { background: transparent; border: 2px solid var(--c); content: '✕'; width: auto; height: auto; font-size: 8px; color: var(--c); display: flex; align-items: center; border-radius: 50%; }

/* ── Selected Info ───────────────────────────────────── */
#selected-info {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
}
#sel-name { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
#sel-desc { font-size: 10.5px; color: var(--textdim); line-height: 1.4; }

/* ── Status Bar ──────────────────────────────────────── */
#statusbar {
  height: var(--footer-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  font-size: 11px;
  color: var(--textdim);
  flex-shrink: 0;
}

#cell-count { margin-right: auto; font-variant-numeric: tabular-nums; }
#sim-speed-label { white-space: nowrap; }

#speed-slider {
  width: 90px;
  accent-color: var(--accent);
  cursor: pointer;
}
#speed-value { min-width: 22px; font-variant-numeric: tabular-nums; }

/* ── Weapons ─────────────────────────────────────────── */
.weapons-cat { margin-top: 4px; }

.weapons-header {
  color: #FF4444 !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.weapon-btn {
  border-color: #3A1A1A !important;
  background: #1E1010 !important;
}
.weapon-btn:hover {
  background: #2E1818 !important;
  border-color: var(--c) !important;
  box-shadow: 0 0 8px -2px var(--c);
}
.weapon-btn.active {
  background: #3A1212 !important;
  border-color: var(--c) !important;
  box-shadow: 0 0 10px -1px var(--c);
}
.weapon-btn::before {
  display: none !important;
}

/* weapon flash overlay */
#nuke-flash {
  position: fixed;
  inset: 0;
  background: white;
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  transition: opacity 0.05s;
}
#nuke-flash.flash { opacity: 1; transition: none; }

/* ── Scrollbar global ────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }