:root {
  --bg: #0b0d12;
  --fg: #e6e9f0;
  --muted: #7d8597;
  --accent: #4ade80;
  --panel: #161a23;
  --border: #2a3040;
  --error: #f87171;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

main {
  text-align: center;
  padding: 16px;
}

.label {
  margin: 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.counter {
  margin: 8px 0;
  /* Najdłuższa liczba (np. 9.77e999,999,999) ma 16 znaków po ok. 0.6em, czyli ok. 9.6em. Mieści się
     w jednym wierszu, gdy czcionka to najwyżej 1/10 szerokości ekranu bez marginesów strony (2 × 16px) */
  font-size: min(6rem, (100vw - 32px) / 10);
  font-weight: 700;
  overflow-wrap: anywhere;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(74, 222, 128, 0.35);
}

.controls {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

button,
input {
  font: inherit;
  font-size: 1.1rem;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 18px;
}

button {
  cursor: pointer;
  border-color: var(--accent);
}

button:hover {
  background: #1d2a22;
}

button:active {
  transform: translateY(1px);
}

.multiplier {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.multiplier input {
  width: 8ch;
  padding: 10px;
}

button.secondary {
  border-color: var(--border);
  color: var(--muted);
}

input[aria-invalid="true"] {
  border-color: var(--error);
  color: var(--error);
}

.counter.paused {
  color: var(--muted);
  text-shadow: none;
}

.message {
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.error {
  min-height: 1.2em;
  color: var(--error);
}

/* Puste komunikaty nie zajmują miejsca – poza błędem, żeby kontrolki nie skakały przy pisaniu */
.message:empty:not(.error) {
  display: none;
}

.reset {
  margin-top: 24px;
  padding: 6px 12px;
  font-size: 0.9rem;
}

.reset.armed {
  border-color: var(--error);
  color: var(--error);
}

/* Na wąskim ekranie podpis mnożnika idzie nad pole, a przyciski są węższe –
   ×10, mnożnik i pauza mieszczą się wtedy w jednej linii nawet przy 320px */
@media (max-width: 480px) {
  .controls {
    gap: 8px;
  }

  button,
  input {
    padding: 8px 12px;
  }

  .multiplier {
    flex-direction: column;
    gap: 2px;
    font-size: 0.75rem;
  }

  .multiplier input {
    width: 7ch;
    padding: 8px;
  }
}