:root {
  --dark: #111;
  --raised: #1d1d1d;
  --light: #f2f2f2;
  --edge: #8a8a8a;
  --alert: #c4281c;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--dark);
  color: var(--light);
  font-family: system-ui, sans-serif;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

[hidden] {
  display: none !important;
}

button {
  font: inherit;
  cursor: pointer;
}

/* Settings */

#settings {
  min-height: 100%;
  padding: 16px;
  display: flex;
  justify-content: center;
}

/* After OK, the settings screen fades to black while the keyboard goes away. */
#settings.leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}

#settings-form {
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

h1 {
  margin: 1em 0 0.6em 0;
  font-size: 3rem;
  text-align: center;
}

#settings label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#kind-help {
  margin: -6px 0 0;
  font-size: 0.9rem;
  color: var(--edge);
}

select,
input[type="number"] {
  font: inherit;
  padding: 8px;
  color: var(--light);
  background: var(--raised);
  border: 1px solid var(--edge);
  border-radius: 6px;
}

#ok {
  margin-top: 5px;
  padding: 14px;
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--dark);
  background: var(--light);
  border: 0;
  border-radius: 8px;
}

/* Clock */

/* Sized in px from app.js (fitClock), because Firefox on Android can leave the layout viewport wrong after the
   keyboard closes. Everything inside is therefore sized from this box, in container units, not from the viewport. */
#clock {
  --d: min(40cqw, 74cqh);
  position: fixed;
  inset: 0;
  container-type: size;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5cqh;
}

.disc {
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--light);
  background: var(--raised);
  border: calc(var(--d) * 0.02) solid var(--edge);
}

.disc.active {
  color: var(--dark);
  background: var(--light);
  border-color: var(--light);
}

.disc.flagged {
  color: var(--alert);
}

.time {
  font-size: calc(var(--d) * 0.228);
  font-variant-numeric: tabular-nums;
  font-weight: bold;
}

.extra {
  font-size: calc(var(--d) * 0.084);
}

/* STOP at the top, Settings at the bottom. */
.middle {
  height: 95cqh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

#stop {
  --s: min(16cqw, 28cqh);
  width: var(--s);
  height: var(--s);
  font-size: calc(var(--s) * 0.22);
  font-weight: bold;
  color: var(--light);
  background: var(--dark);
  border: calc(var(--s) * 0.02) solid var(--edge);
  border-radius: 50%;
}

#stop.frozen {
  color: var(--dark);
  background: var(--light);
  border-color: var(--light);
}

/* Not a button while it only tells how to start. */
#stop.hint {
  font-size: calc(var(--s) * 0.13);
  font-weight: normal;
  white-space: pre-line;
  color: var(--edge);
  border-style: dashed;
  cursor: default;
}

#back {
  --s: min(10cqw, 17cqh);
  width: var(--s);
  height: var(--s);
  padding: 0;
  font-size: calc(var(--s) * 0.22);
  color: var(--light);
  background: transparent;
  border: calc(var(--s) * 0.02) solid var(--edge);
  border-radius: 50%;
}

/* A phone held upright: the players sit above and below. */
@media (orientation: portrait) {
  #clock {
    --d: min(80cqw, 27cqh);
    flex-direction: column;
  }

  .middle {
    height: auto;
    justify-content: center;
    gap: 4cqh;
  }

  #stop {
    --s: min(30cqw, 14cqh);
  }

  #back {
    --s: min(18cqw, 8.5cqh);
  }
}