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

body {
  background: #00000a;
  color: #78909c;
  font-family: 'Courier New', 'Menlo', monospace;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  user-select: none;
}

#universe {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  display: block;
}

#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 32px;
  pointer-events: none;
}

/* ── Header ── */
header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#title-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.title-main {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.45em;
  color: #e0f7fa;
  text-shadow: 0 0 24px rgba(77, 208, 225, 0.35);
}

.title-sub {
  font-size: 10px;
  letter-spacing: 0.25em;
  color: #37474f;
}

#stats-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: right;
}

.stat-row {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 14px;
}

.stat-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #455a64;
}

.stat-value {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #80cbc4;
  min-width: 64px;
  text-align: right;
}

/* ── Commentary ── */
#commentary-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 80px;
  min-height: 48px;
}

#commentary-text {
  font-size: 13px;
  letter-spacing: 0.18em;
  line-height: 2;
  color: #b0bec5;
  font-style: italic;
  text-align: center;
  opacity: 0;
  transition: opacity 0.9s ease;
  text-shadow: 0 0 20px rgba(176, 190, 197, 0.4);
}

/* ── Footer ── */
footer {
  display: flex;
  align-items: center;
  gap: 24px;
  pointer-events: all;
}

#controls {
  display: flex;
  gap: 10px;
}

.ctrl-btn {
  background: none;
  border: 1px solid #263238;
  color: #546e7a;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 5px 14px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  outline: none;
}

.ctrl-btn:hover {
  border-color: #4dd0e1;
  color: #e0f7fa;
  text-shadow: 0 0 8px rgba(77, 208, 225, 0.5);
}

#hint {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #263238;
}

/* ── Status color states ── */
#stat-status.state-dying {
  color: #ef9a9a;
  text-shadow: 0 0 8px rgba(239, 154, 154, 0.4);
}

#stat-status.state-nucleation {
  color: #ffe082;
}

/* ── Legend ── */
#legend {
  position: fixed;
  right: 32px;
  bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #37474f;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}