/* GEARS match timers. Colors from the official FIRST CANOPY 2026-27 style guides. */
:root {
  --ink: #111921;          /* near-black used in BIOBUZZ/BIOGLOW artwork */
  --navy: #043a49;         /* FIRST CANOPY wallpaper frame */
  --ftc-bg: #eee89c;       /* BIOBUZZ wallpaper base */
  --ftc-accent: #f7e326;   /* BIOBUZZ yellow (PMS 102 C) */
  --ftc-gold: #bba13e;     /* BIOBUZZ gold (PMS 7753 C) */
  --fll-bg: #c0de8a;       /* BIOGLOW wallpaper base */
  --fll-accent: #6abf4b;
  --alert: #b3001b;
  --font: "Arial Black", "Helvetica Neue", Arial, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--ink); }
kbd {
  font-family: inherit; padding: .05em .45em; border-radius: .3em;
  border: 2px solid currentColor;
}

/* ---------- Chooser ---------- */
.chooser-page {
  background: var(--navy);
  color: #fff;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3vh; padding: 3vh 3vw;
}
.chooser-page h1 { margin: 0; font-size: clamp(24px, 4.5vh, 56px); letter-spacing: .02em; }
.choices {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3vw;
  width: min(96vw, 2000px);
}
.choice {
  display: flex; flex-direction: column; align-items: center; gap: 1.5vh;
  text-decoration: none; color: #fff;
  border-radius: 2vw; padding: 1.2vw;
  outline: none;
  transition: transform .15s ease, background-color .15s ease;
}
.choice img { width: 100%; height: auto; display: block; border-radius: 1.2vw; }
.choice:hover, .choice:focus-visible { transform: scale(1.03); background: rgba(255,255,255,.12); }
.choice:focus-visible { box-shadow: 0 0 0 6px #fff; }
.choice-label { font-size: clamp(22px, 4.5vh, 64px); text-align: center; line-height: 1.1; }
.choice-label small { display: block; font-size: .5em; opacity: .8; margin-top: .3em; }
.hint { margin: 0; font-family: Arial, sans-serif; font-size: clamp(14px, 2vh, 24px); opacity: .75; }
@media (max-aspect-ratio: 1/1) { .choices { grid-template-columns: 1fr; width: min(90vw, 900px); } }

/* Shared bee: on top of page content, never captures clicks. */
.gears-bee {
  position: fixed; top: 0; left: 0;
  width: 6vh; height: auto;
  overflow: visible;
  z-index: 10;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
}
.gears-bee .wing {
  transform-box: fill-box;
  transform-origin: 50% 90%;
}
.gears-bee .wing-front { animation: bee-flap .16s ease-in-out infinite alternate; }
.gears-bee .wing-back { animation: bee-flap .18s ease-in-out infinite alternate-reverse; }
@keyframes bee-flap {
  from { transform: rotate(-10deg) scaleY(1); }
  to { transform: rotate(24deg) scaleY(.28); }
}
@media (prefers-reduced-motion: reduce) {
  .gears-bee .wing-front,
  .gears-bee .wing-back { animation: none; }
}

/* ---------- Timer ---------- */
.timer-page {
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  height: 100vh;
}
.prog-ftc { background-color: var(--ftc-bg); background-image: url("images/ftc-biobuzz-background.png"); }
.prog-fll { background-color: var(--fll-bg); background-image: url("images/fll-bioglow-background.png"); }
/* Narrower than the 1.56:1 artwork (e.g. 4:3 projectors): keep the logos in view. */
@media (max-aspect-ratio: 1563/1000) { .timer-page { background-size: 100% auto; } }

.stage {
  position: absolute; inset: 24vh 0 10vh 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.phase {
  font-size: min(10vh, 8vw);
  line-height: 1; letter-spacing: .04em;
  padding: .18em .6em .14em;
  border-radius: .3em;
  background: var(--ink); color: #fff;
  white-space: nowrap;
}
.prog-ftc .phase { color: var(--ftc-accent); }
.prog-fll .phase { color: var(--fll-bg); }
.clock {
  font-size: min(46vh, 34vw);
  line-height: .95;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 1vh 0 0;
}
.note {
  min-height: 1.2em;
  font-size: min(6.5vh, 5vw);
  line-height: 1.2;
  text-align: center;
}

/* Phase colours */
body[data-phase="transition"] .phase { background: #e86a10; color: #fff; }
body[data-phase="teleop"] .phase { background: var(--ink); color: #fff; }
body[data-state="starting"] .phase { background: var(--ink); color: #fff; }
body[data-state="paused"] .phase { background: #5a6570; color: #fff; }
body[data-state="paused"] .clock { opacity: .55; }
body[data-state="ended"] .phase { background: var(--alert); color: #fff; }
body.urgent .clock, body.urgent .note { color: var(--alert); }
body.urgent .phase { background: var(--alert); color: #fff; }

/* Controls */
.controls {
  position: fixed; left: 0; right: 0; bottom: 4.5vh;
  display: flex; align-items: center; justify-content: center; gap: 22px;
  transition: opacity .4s ease;
}
.ctl {
  width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid var(--ink); background: rgba(255,255,255,.75); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.ctl:hover, .ctl:focus-visible { background: #fff; }
.ctl.primary { width: 80px; height: 80px; background: var(--ink); color: #fff; }
.ctl svg { width: 55%; height: 55%; }
.ctl .icon-pause { display: none; }
.ctl[aria-pressed="true"] .icon-play { display: none; }
.ctl[aria-pressed="true"] .icon-pause { display: block; }
.keys { font-family: Arial, sans-serif; font-weight: 700; font-size: 15px; opacity: .7; margin-left: 10px; }

.back {
  position: fixed; top: 4.5vh; right: 4vw; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px 8px 10px; border-radius: 999px;
  background: rgba(255,255,255,.7); color: var(--ink);
  border: 3px solid var(--ink);
  font-family: Arial, sans-serif; font-weight: 800; font-size: 18px; text-decoration: none;
  transition: opacity .4s ease;
}
.back svg { width: 22px; height: 22px; }
/* The back link sits over the season icon at top-right; hide it when idle. */
body.idle .controls, body.idle .back { opacity: 0; pointer-events: none; }
body.idle { cursor: none; }

/* GEARS logo, lower right (white artwork on a dark panel) */
.gears-logo {
  position: fixed; right: 4vw; bottom: 4.5vh; z-index: 1;
  background: rgba(0,0,0,.78); border-radius: 14px; padding: 10px 16px;
  line-height: 0; pointer-events: none;
}
.gears-logo img { height: clamp(28px, 4.5vh, 56px); width: auto; display: block; }