:root {
  --green: #2ecc40;
  --blue: #0074d9;
  --yellow: #ffdc00;
  --red: #ff4136;
  --black: #000;
  --white: #fff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #444;
  color: #eee;
  font-family: system-ui, sans-serif;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
  text-align: center;
}

h1 { letter-spacing: 0.3em; }

section { margin: 1.5rem 0; }

#countdown {
  font-family: ui-monospace, monospace;
  font-size: clamp(2rem, 9vw, 4rem);
  font-weight: bold;
  background: none !important;
  border: none !important;
}

#zone-label { text-transform: uppercase; letter-spacing: 0.2em; }

#zone-bar {
  position: relative;
  display: flex;
  height: 14px;
  margin: 0.75rem auto;
  border: 1px solid #222;
}
#zone-bar span { flex: 1 1 0; }
#zone-marker {
  position: absolute;
  top: -6px;
  width: 3px;
  height: 26px;
  background: #f0f;
  transition: left 0.2s linear;
}

#the-button {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  font-size: 1.6rem;
  font-weight: bold;
  cursor: pointer;
  border: 6px solid #222;
  box-shadow: 0 8px 0 #222;
  transition: transform 0.05s;
}
#the-button:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 2px 0 #222; }
#the-button:disabled { cursor: not-allowed; opacity: 0.5; }

.zone-green  { background: var(--green);  color: #000; }
.zone-blue   { background: var(--blue);   color: #fff; }
.zone-yellow { background: var(--yellow); color: #000; }
.zone-red    { background: var(--red);    color: #fff; }
.zone-black  { background: var(--black);  color: #fff; border-color: #888 !important; }
.zone-white  { background: var(--white);  color: #000; }

#countdown.zone-green  { color: var(--green); }
#countdown.zone-blue   { color: var(--blue); }
#countdown.zone-yellow { color: var(--yellow); }
#countdown.zone-red    { color: var(--red); }
#countdown.zone-black  { color: var(--black); }
#countdown.zone-white  { color: var(--white); }

.swatch {
  display: inline-block;
  padding: 0 0.4em;
  margin: 0 0.15em;
  border: 1px solid #222;
  border-radius: 3px;
}

table {
  margin: 0.5rem auto;
  border-collapse: collapse;
  min-width: 60%;
}
th, td { padding: 0.3rem 0.6rem; border-bottom: 1px solid #555; }

input, form button {
  font-size: 1rem;
  padding: 0.4rem 0.8rem;
}

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

#rules { text-align: left; font-size: 0.9rem; color: #ccc; }