:root {
  --bg: #f4efe6;
  --text: #4a4458;
  --muted: #8a8398;
  --accent: #2a8fa8;
  --overlay: rgba(244, 239, 230, 0.92);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1b22;
    --text: #e6e1ee;
    --muted: #8f889c;
    --accent: #5cc4dc;
    --overlay: rgba(29, 27, 34, 0.92);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: #5b3a22; /* desk wood, until the 3D desk renders */
  color: var(--text);
  font: 15px/1.5 system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}

/* Wooden desk behind everything */
#desk {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 16px;
}

.device {
  position: relative;
}

#screen {
  display: block;
  height: min(86vh, calc((100vw - 32px) * 816 / 634));
  width: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  /* Lying on the desk, lit by the lamp at the top left: tight contact shadow + soft cast shadow */
  filter: drop-shadow(3px 4px 3px rgba(20, 8, 0, 0.45)) drop-shadow(14px 20px 18px rgba(20, 8, 0, 0.35));
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--overlay);
  border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%;
}

.overlay[hidden] { display: none; }

.bar {
  width: 60%;
  height: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  overflow: hidden;
}

#catchup-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
}

.button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.error { color: #c0392b; }

footer {
  padding: 12px 16px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

footer a { color: inherit; }