:root {
  --bg: #0f1412;
  --surface: #1a211e;
  --border: #2c3631;
  --text: #e8efeb;
  --muted: #8a9a92;
  --ok: #16a34a;
  --warning: #f59e0b;
  --done: #ef4444;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 var(--sans);
}

main {
  padding: 16px;
}

.clock {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.clock[data-urgency="idle"] {
  color: var(--muted);
}
.clock[data-urgency="ok"] {
  color: var(--ok);
}
.clock[data-urgency="warning"] {
  color: var(--warning);
}
.clock[data-urgency="done"] {
  color: var(--done);
  animation: blink 1s steps(2, start) infinite;
}
.clock[data-status="paused"] {
  opacity: 0.6;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

/* Side panel */

#panel .clock {
  font-size: 64px;
  text-align: center;
}

.bonuses {
  min-height: 1.4em;
  text-align: center;
  color: var(--muted);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

button {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

button.primary {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
  font-weight: 600;
}

button:disabled {
  opacity: 0.4;
  cursor: default;
}

.error {
  color: var(--done);
}

details {
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
}

details ol {
  padding-left: 0;
  list-style: none;
  font-family: var(--mono);
  word-break: break-all;
}

/* Camera overlay: rendered off-screen at the camera's resolution (1280×720 by
   default) and composited over the presenter's video, so sizes are in px. */

html.transparent,
html.transparent body {
  background: transparent;
}

#camera {
  position: fixed;
  inset: 0;
  padding: 0;
}

.overlay {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  padding: 8px 48px;
  border-radius: 32px;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
}

#camera .clock {
  font-size: 220px;
  line-height: 1;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.bonus-flash {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -16px);
  padding: 8px 28px;
  border-radius: 999px;
  background: var(--warning);
  color: #000;
  font-size: 64px;
  font-weight: 800;
  white-space: nowrap;
}