body {
  min-height: 100vh;
  background: rgb(15, 23, 42);
  color: rgb(229, 238, 248);
  font-family: "Segoe UI", sans-serif;
}

.race-flags-page {
  min-height: 100vh;
  position: relative;
  padding: 24px;
  box-sizing: border-box;
}

.race-flags-controls {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 1;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  max-width: calc(100vw - 48px);
}

.flag-select {
  width: min(220px, calc(100vw - 48px));
  padding: 14px 16px;
  border: 1px solid rgb(51, 65, 85);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.82);
  color: inherit;
  font: inherit;
}

.flag-select:focus-visible {
  outline: 2px solid rgb(226, 232, 240);
  outline-offset: 2px;
}

.flag-display {
  width: 100%;
  height: calc(100vh - 48px);
  border-radius: 28px;
}

.flag-display[hidden] {
  display: none;
}

.flag-display[data-flag="safe"] {
  background: rgb(22, 163, 74);
}

.flag-display[data-flag="hazard"] {
  background: rgb(250, 204, 21);
}

.flag-display[data-flag="danger"] {
  background: rgb(220, 38, 38);
}

.flag-display[data-flag="finish"] {
  background:
    repeating-conic-gradient(
      rgb(17, 24, 39) 0deg 90deg,
      rgb(248, 250, 252) 90deg 180deg,
      rgb(17, 24, 39) 180deg 270deg,
      rgb(248, 250, 252) 270deg 360deg
    );
  background-size: 140px 140px;
}