:root {
  color-scheme: dark;
  --bg: #050609;
  --panel: #10131a;
  --line: rgba(255,255,255,.16);
  --text: #f7f6f0;
  --muted: #a8adb6;
  --red: #ff3530;
  --cyan: #18d5b9;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(circle at 50% 13%, #20242c 0, #0a0c11 43%, #030406 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
body.modalOpen { overflow: hidden; }
button, input { font: inherit; }
button { touch-action: manipulation; }

.app { width: min(1180px, 100%); margin: 0 auto; padding: 8px 10px max(30px, env(safe-area-inset-bottom)); }
.referenceClock {
  position: relative;
  width: min(100%, 1040px);
  aspect-ratio: 1350 / 1165;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 22px;
  filter: drop-shadow(0 42px 70px rgba(0,0,0,.66));
  isolation: isolate;
}
.clockPlate {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.timeCar {
  --angle: 0deg;
  --radius: 23%;
  --car-width: 16%;
  position: absolute;
  inset: 0;
  z-index: 5;
  transform: rotate(var(--angle));
  transform-origin: 50% 55.05%;
  pointer-events: none;
  will-change: transform;
}
.timeCar--hours { --radius: 22.6%; --car-width: 15.8%; z-index: 7; }
.timeCar--minutes { --radius: 30.3%; --car-width: 17.2%; z-index: 6; }
.timeCar--seconds { --radius: 38.4%; --car-width: 18.3%; z-index: 5; }
.carRig {
  position: absolute;
  top: 55.05%;
  left: calc(50% + var(--radius));
  width: var(--car-width);
  aspect-ratio: 1018 / 224;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 6px 5px rgba(0,0,0,.88));
}
.carBody { display: block; width: 100%; height: 100%; object-fit: contain; }
.carCrew {
  position: absolute;
  left: 47%;
  top: 49%;
  display: flex;
  align-items: center;
  gap: 1px;
  transform: translate(-50%,-50%);
}
.carCrew img, .wildHelmet {
  display: block;
  width: clamp(10px, 1.8vw, 21px);
  height: clamp(10px, 1.8vw, 21px);
  object-fit: contain;
  filter: drop-shadow(0 1px 1px #000);
}
.wildHelmet {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 50%;
  background: var(--team-color, #ff4fd8);
  color: #fff;
  font-size: clamp(6px, .85vw, 10px);
  font-weight: 950;
}
.carLabel {
  position: absolute;
  left: 50%;
  top: -27%;
  min-width: 76px;
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(4,5,7,.78);
  box-shadow: 0 2px 8px #000;
  color: white;
  font-size: clamp(6px, .75vw, 9px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: .03em;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%) rotate(calc(-90deg - var(--angle)));
  transform-origin: 50% 260%;
}

.clockHands {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.clockHand {
  --angle: 0deg;
  position: absolute;
  left: 50%;
  top: 55.05%;
  display: block;
  border-radius: 999px;
  box-shadow: 0 2px 5px rgba(0,0,0,.86);
  transform: translateY(-50%) rotate(var(--angle));
  transform-origin: 0 50%;
  will-change: transform;
}
.clockHand--hours {
  z-index: 1;
  width: 13.8%;
  height: clamp(5px,.78vw,9px);
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg,#3b3e42,#17191c 58%,#090a0c);
}
.clockHand--minutes {
  z-index: 2;
  width: 20.2%;
  height: clamp(4px,.62vw,7px);
  border: 1px solid rgba(129,231,219,.3);
  background: linear-gradient(180deg,#2e9f95,#17665f 58%,#0c3734);
}
.clockHand--seconds {
  z-index: 3;
  width: 25.6%;
  height: clamp(2px,.26vw,3px);
  background: #f12e37;
  box-shadow: 0 1px 4px rgba(0,0,0,.9),0 0 4px rgba(241,46,55,.34);
}
.clockHub {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 55.05%;
  width: clamp(17px,3.1%,32px);
  aspect-ratio: 1;
  border: 2px solid #050607;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,#696d72 0,#282b2f 42%,#090a0c 74%);
  box-shadow: 0 2px 8px #000,inset 0 1px 2px rgba(255,255,255,.35);
  transform: translate(-50%,-50%);
}

.raceCounter {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 82.5%;
  width: 29%;
  height: 12.4%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 4px #000;
}
.raceCounter__eyebrow { color: var(--red); font-size: clamp(6px, .88vw, 10px); font-weight: 950; letter-spacing: .19em; text-transform: uppercase; }
.raceCounter__name { max-width: 96%; margin-top: 2px; overflow: hidden; font-size: clamp(8px, 1.3vw, 15px); font-weight: 950; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.raceCounter__date { color: var(--muted); font-size: clamp(5px, .72vw, 8px); line-height: 1.3; }
.raceCounter__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(3px, .65vw, 8px); width: 90%; margin-top: 3px; }
.raceCounter__grid span { display: grid; }
.raceCounter__grid b { color: var(--cyan); font-size: clamp(10px, 1.85vw, 21px); font-variant-numeric: tabular-nums; line-height: 1; }
.raceCounter__grid small { color: #afb4bd; font-size: clamp(4px, .57vw, 7px); letter-spacing: .07em; text-transform: uppercase; }

.selector {
  position: relative;
  z-index: 11;
  width: min(96vw, 980px);
  margin: -3px auto 0;
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg,rgba(21,23,31,.94),rgba(8,9,13,.86));
  box-shadow: 0 30px 75px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
}
.selector__heading { text-align: center; }
.selector h1 { margin: 0; font-size: 14px; font-weight: 900; letter-spacing: .37em; text-transform: uppercase; }
.selector h1::after { content: ""; display: block; width: 34px; height: 2px; margin: 9px auto 0; background: var(--red); }
.selector__heading p { margin: 8px 0 15px; color: var(--muted); font-size: 12px; }
.cards { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
.card {
  --team-color: #777;
  position: relative;
  aspect-ratio: 342 / 229;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-bottom-color: var(--team-color);
  border-radius: 13px;
  background: #111;
  box-shadow: 0 8px 18px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.15);
}
.card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card.wild, .driver.wild { display: grid; place-items: center; background: radial-gradient(circle at 50% 32%, #4c5057, #17191d 72%); text-align: center; }
.card .wildCard__car, .driver .wildCard__car { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5%; filter: drop-shadow(0 8px 8px rgba(0,0,0,.72)); }
.wildCard__caption { position: absolute; z-index: 1; right: 6px; bottom: 6px; left: 6px; display: flex; align-items: center; gap: 6px; min-width: 0; border-radius: 999px; background: rgba(5,6,9,.76); box-shadow: 0 2px 8px rgba(0,0,0,.7); padding: 4px 8px; text-align: left; }
.driver.wild .wildCard__caption { right: 40px; }
.wildCard__number { flex: 0 0 auto; color: var(--team-color); font-size: clamp(12px, 1.7vw, 20px); font-weight: 950; }
.wildCard__name { overflow: hidden; color: #fff; font-size: clamp(8px, 1vw, 11px); font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.card.empty { display: grid; place-items: center; color: var(--muted); font-size: 28px; border-style: dashed; }

.panelBtn { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pickBtn, .close {
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  color: white;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .14em;
  padding: 10px 18px;
  text-transform: uppercase;
}
.pickBtn.primary { border-color: transparent; background: var(--cyan); color: #001612; }
.pickBtn:disabled { opacity: .35; cursor: not-allowed; }
.pickBtn:focus-visible, .close:focus-visible, .driver:focus-visible, .slot:focus-visible, .assignmentDriver:focus-visible { outline: 3px solid white; outline-offset: 2px; }

.modal, .tutorial, .wildcardEditor {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background: rgba(0,0,0,.84);
}
.modal.show, .tutorial.show, .wildcardEditor.show { display: flex; }
.dialog {
  width: min(1060px,100%);
  max-height: 92svh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 30px 90px #000;
}
.dialogTop { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.dialogTop h2, .wildcardEditor h2 { margin: 0; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.dialogTop h2 span { color: var(--cyan); }
.stepLabel { margin: 0 0 4px; color: var(--red); font-size: 10px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.pickerHelp, .assignment > p { margin: 6px 0 13px; color: var(--muted); font-size: 13px; }
.pool { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.driverWrap { position: relative; min-width: 0; }
.driver {
  --team-color: #777;
  position: relative;
  width: 100%;
  aspect-ratio: 342 / 229;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 15px;
  background: #111;
  color: white;
  cursor: pointer;
  padding: 0;
}
.driver img { display: block; width: 100%; height: 100%; object-fit: cover; }
.driver.selected { border-color: white; box-shadow: 0 0 0 2px var(--team-color), 0 0 24px rgba(255,255,255,.13); }
.driver.disabled { opacity: .34; filter: grayscale(.7); cursor: not-allowed; }
.star { position: absolute; right: 7px; bottom: 7px; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(0,0,0,.48); font-size: 17px; }
.editWild { position: absolute; z-index: 2; left: 7px; top: 7px; min-height: 30px; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; background: rgba(0,0,0,.7); color: white; cursor: pointer; font-size: 10px; font-weight: 850; padding: 4px 8px; }

.assignment { margin-top: 19px; padding-top: 16px; border-top: 1px solid var(--line); }
.assignment h3 { margin: 0; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }
.duos { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.slot {
  min-height: 116px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  color: white;
  cursor: pointer;
  padding: 11px;
  text-align: left;
}
.slot.active { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(24,213,185,.25); }
.slot__title { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.slot.active .slot__title { color: var(--cyan); }
.slot__content { display: grid; gap: 6px; }
.chip { display: flex; justify-content: space-between; gap: 8px; border-left: 4px solid var(--team-color); border-radius: 9px; background: rgba(255,255,255,.08); padding: 7px 9px; font-size: 12px; font-weight: 850; }
.slotHint { color: #7f858f; font-size: 12px; line-height: 1.35; }
.assignmentPool { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; margin-top: 11px; }
.assignmentDriver { position: relative; min-height: 52px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; background: #171a21; color: white; cursor: pointer; font-size: 11px; font-weight: 850; padding: 7px 6px 7px 10px; text-align: left; }
.assignmentDriver::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--team-color); }
.assignmentDriver.assigned { border-color: var(--team-color); opacity: .58; }
.assignmentDriver small { display: block; margin-top: 2px; color: var(--muted); }
.pickerStatus { min-height: 18px; margin: 12px 0 0; color: #ffd166; font-size: 12px; text-align: center; }
.pickerStatus.ready { color: var(--cyan); }
.panelBtn--dialog { position: sticky; bottom: -18px; margin-right: -18px; margin-left: -18px; padding: 12px 18px 18px; background: linear-gradient(transparent, var(--panel) 24%); }

.wildcardEditor { z-index: 70; }
.wildcardEditor__box { width: min(430px,100%); padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: 0 30px 90px #000; }
.wildcardEditor label { display: grid; gap: 6px; margin-top: 13px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wildcardEditor input { width: 100%; min-height: 45px; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; background: #080a0e; color: white; padding: 9px 11px; }

.tutorial { z-index: 80; }
.tutorialBox { width: min(520px,100%); overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #0c0e13; box-shadow: 0 30px 100px #000; }
.tutorialBox img { display: block; width: 100%; }
.tutorialText { display: grid; place-items: center; padding: 14px 18px 18px; text-align: center; }
.tutorialText p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.screenReaderOnly { position: absolute!important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
noscript { display: block; padding: 20px; text-align: center; }

@media (max-width: 760px) {
  .app { padding: 4px 4px 22px; }
  .referenceClock { width: 100%; border-radius: 0; }
  .selector { width: calc(100% - 12px); padding: 15px 11px 18px; }
  .selector h1 { letter-spacing: .28em; }
  .cards { display: flex; gap: 9px; overflow-x: auto; padding: 1px 1px 5px; scroll-snap-type: x mandatory; }
  .card { min-width: 122px; scroll-snap-align: start; }
  .pool { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .duos { grid-template-columns: 1fr; }
  .assignmentPool { grid-template-columns: repeat(2,1fr); }
  .dialog { padding: 14px 12px; border-radius: 19px; }
  .dialogTop h2 { font-size: 15px; }
  .panelBtn--dialog { bottom: -14px; margin-right: -12px; margin-left: -12px; padding-right: 12px; padding-left: 12px; }
  .carLabel { display: none; }
}

@media (orientation: landscape) and (max-height: 900px) {
  .app { width: min(88vh, 1040px); }
  .selector { width: min(92vw, 820px); padding-top: 14px; padding-bottom: 14px; }
  .selector__heading p { margin-bottom: 10px; }
  .cards { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .timeCar, .clockHand { will-change: auto; }
}