:root {
  color-scheme: light;
  --ink: #090d3d;
  --muted: #555b7b;
  --paper: #fffdf5;
  --paper-deep: #f9efd7;
  --surface: #ffffff;
  --surface-strong: #111a48;
  --line: #d9d1e9;
  --pink: #ee0089;
  --pink-deep: #b60065;
  --yellow: #fff21c;
  --blue: #5355f2;
  --cyan: #00cfc7;
  --warning: #ff9f1c;
  --danger: #ef276b;
  --shadow: 7px 8px 0 rgb(9 13 61 / .94);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--paper-deep); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 7% 12%, rgb(83 85 242 / .12) 0 2px, transparent 2.6px) 0 0 / 17px 17px,
    radial-gradient(circle at 88% 8%, rgb(238 0 137 / .08) 0 1px, transparent 1.6px) 0 0 / 13px 13px,
    linear-gradient(135deg, rgb(255 242 28 / .16), transparent 28%),
    var(--paper);
  font-family: Inter, Avenir Next, Avenir, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.app-shell { position: relative; width: min(1240px, 100%); margin: 0 auto; padding: clamp(18px, 3vw, 42px); }
.app-shell::before, .app-shell::after { position: absolute; z-index: -1; content: ""; pointer-events: none; }
.app-shell::before { top: 84px; left: -38px; width: 135px; height: 22px; border-radius: 999px; background: var(--yellow); transform: rotate(-12deg); }
.app-shell::after { right: -24px; bottom: 135px; width: 108px; height: 20px; border-radius: 999px; background: var(--pink); transform: rotate(13deg); }
.screen[hidden], .modal[hidden], .toast[hidden] { display: none; }

.topbar, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.topbar { position: relative; margin-bottom: clamp(24px, 3vw, 42px); padding-bottom: 15px; }
.topbar::after { position: absolute; right: 0; bottom: 0; left: 0; height: 5px; content: ""; background: linear-gradient(90deg, var(--blue) 0 30%, var(--pink) 30% 70%, var(--yellow) 70%); transform: skewX(-18deg); }
.topbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(2rem, 5vw, 3.8rem); line-height: .98; letter-spacing: -.065em; }
h2 { margin-bottom: 0; font-size: clamp(1.25rem, 2.6vw, 1.65rem); letter-spacing: -.035em; }
.event-wordmark { display: flex; align-items: baseline; gap: .12em; font-weight: 900; }
.event-wordmark > span { color: var(--blue); }
.event-wordmark strong { color: var(--pink); font-style: italic; letter-spacing: -.1em; text-shadow: 3px 3px 0 var(--ink); }
.wordmark-x { display: inline-block; color: var(--blue); font-weight: 950; transform: rotate(-12deg) scale(1.17); }
.eyebrow { margin-bottom: 8px; color: var(--pink-deep); font-size: .72rem; font-weight: 900; letter-spacing: .15em; }
.muted, .config-message { color: var(--muted); }

.status { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 11px; border: 2px solid currentColor; border-radius: 999px; font-size: .72rem; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.status-idle { color: var(--blue); background: rgb(83 85 242 / .08); }
.status-running { color: var(--pink-deep); background: rgb(238 0 137 / .1); }
.status-paused { color: #9a5a00; background: rgb(255 159 28 / .16); }
.status-finished { color: #bf1251; background: rgb(239 39 107 / .12); }

.race-board {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 550px;
  padding: clamp(32px, 6vw, 70px) 26px clamp(28px, 4vw, 48px);
  border: 3px solid var(--ink);
  border-radius: 28px;
  color: #f9fbff;
  text-align: center;
  background:
    radial-gradient(circle at 90% 14%, rgb(83 85 242 / .44), transparent 26%),
    radial-gradient(circle at 8% 80%, rgb(0 207 199 / .19), transparent 27%),
    linear-gradient(145deg, #18255b, #0c1239 64%, #080c2c);
  box-shadow: var(--shadow), 15px 16px 0 var(--pink), 23px 24px 0 var(--yellow);
}
.race-board > * { position: relative; z-index: 1; }
.race-board::before { position: absolute; z-index: 2; top: 0; right: 0; left: 0; height: 11px; content: ""; background: linear-gradient(90deg, var(--blue) 0 31%, var(--pink) 31% 69%, var(--yellow) 69%); }
.race-board::after { position: absolute; z-index: 0; right: -45px; bottom: 18%; width: 210px; height: 30px; border: 4px solid var(--pink); border-right: 0; border-left: 0; content: ""; opacity: .72; transform: rotate(-18deg); }
.race-board.state-running::before { background: linear-gradient(90deg, var(--cyan), var(--pink) 52%, var(--yellow)); }
.race-board.state-warning::before { background: var(--warning); }
.race-board.state-danger::before, .race-board.state-finished::before { background: var(--danger); }

.loop-label { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: clamp(8px, 1.7vw, 20px); }
.loop-kicker { color: #d4d9ef; font-size: clamp(.82rem, 1.6vw, 1.1rem); font-weight: 900; letter-spacing: .25em; }
.loop-count { display: flex; align-items: baseline; justify-content: center; gap: clamp(7px, 1.3vw, 15px); font-variant-numeric: tabular-nums; line-height: .95; }
.loop-count strong:first-child { color: var(--yellow); font-size: clamp(2.8rem, 7vw, 5.7rem); font-weight: 950; letter-spacing: -.09em; text-shadow: 3px 3px 0 var(--pink); }
.loop-count strong:last-child { color: #f8fbff; font-size: clamp(2rem, 4.8vw, 3.7rem); font-weight: 900; letter-spacing: -.08em; }
.loop-count > span { color: var(--pink); font-size: clamp(2.1rem, 5.3vw, 4.1rem); font-weight: 900; }

.timer { color: #fff; font-variant-numeric: tabular-nums; font-size: clamp(5rem, 17vw, 13rem); font-weight: 900; letter-spacing: -.105em; line-height: .8; text-shadow: 0 6px 0 rgb(0 0 0 / .14), 0 12px 30px rgb(0 0 0 / .32); }
.state-warning .timer { color: var(--yellow); }
.state-danger .timer { color: #ff5b98; }
.state-finished .timer { color: var(--yellow); font-size: clamp(2.55rem, 7.2vw, 5.5rem); line-height: 1; letter-spacing: -.06em; }
.timer-caption { margin: clamp(20px, 3vw, 30px) 0 0; color: #d4d9ef; font-size: .78rem; font-weight: 900; letter-spacing: .19em; }
.time-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(720px, 100%); margin: clamp(24px, 4vw, 42px) auto 0; border: 2px solid rgb(255 255 255 / .22); background: rgb(4 8 35 / .28); }
.time-detail { padding: 17px 12px 16px; }
.time-detail + .time-detail { border-left: 2px solid rgb(255 255 255 / .22); }
.time-detail span { display: block; margin-bottom: 6px; color: #d4d9ef; font-size: .67rem; font-weight: 900; letter-spacing: .12em; }
.time-detail strong { color: #fff; font-size: clamp(1.2rem, 3vw, 1.82rem); font-variant-numeric: tabular-nums; }
.completed-summary { margin: 24px 0 0; color: var(--yellow); font-size: 1.05rem; font-weight: 900; }
.announcement { min-height: 25px; margin: 27px 4px 0; color: var(--muted); font-weight: 700; text-align: center; }

.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; margin: 25px 0 46px; }
.button { min-height: 48px; padding: 11px 17px; border: 2px solid var(--ink); border-radius: 8px; color: var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--ink); font-size: .9rem; font-weight: 850; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.button:hover:not(:disabled) { background: var(--paper-deep); box-shadow: 5px 5px 0 var(--ink); transform: translate(-2px, -2px); }
.button:active:not(:disabled) { box-shadow: 1px 1px 0 var(--ink); transform: translate(1px, 1px); }
.button:disabled { cursor: not-allowed; opacity: .43; }
.button-primary { background: var(--yellow); }
.button-primary:hover:not(:disabled) { background: #fff76b; }
.button-warning { background: #ffba4e; }
.button-danger { color: #fff; background: var(--pink); }
.button-quiet { color: var(--ink); background: transparent; box-shadow: none; }
.button-danger-quiet { border-color: var(--pink); color: var(--pink-deep); background: #fff; box-shadow: none; }
.button-wide { padding-right: clamp(20px, 6vw, 54px); padding-left: clamp(20px, 6vw, 54px); }

.timeline-panel { padding: clamp(18px, 3vw, 28px); border: 3px solid var(--ink); border-radius: 18px; background: rgb(255 255 255 / .84); box-shadow: 5px 6px 0 var(--blue); }
.section-heading { margin-bottom: 16px; }
.section-heading .eyebrow { margin-bottom: 5px; }
.section-heading > .muted { margin: 0; text-align: right; }
.table-wrap { overflow-x: auto; border: 2px solid var(--ink); border-radius: 8px; background: #fff; }
table { width: 100%; border-collapse: collapse; min-width: 570px; }
th, td { padding: 13px 15px; border-bottom: 1px solid var(--line); text-align: left; }
tr:last-child td { border-bottom: none; }
th { color: var(--ink); background: var(--yellow); font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
td { font-size: .92rem; }
.timeline-table td:nth-child(1), .timeline-table td:nth-child(2), .timeline-table td:nth-child(3) { font-variant-numeric: tabular-nums; }
.row-current { background: rgb(238 0 137 / .1); }
.row-finished { color: var(--muted); }
.timeline-state { display: inline-block; font-size: .72rem; font-weight: 900; letter-spacing: .05em; }
.timeline-state.current { color: var(--pink-deep); }.timeline-state.done { color: var(--muted); }.timeline-state.future { color: var(--blue); }

.config-message { margin: -14px 0 22px; font-weight: 650; }
.config-table-wrap { max-height: min(63vh, 680px); }
.program-table th:first-child, .program-table td:first-child { width: 22%; }
.program-table th:last-child, .program-table td:last-child { width: 32%; text-align: right; }
.program-table td:nth-child(2) { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.program-table .button { min-height: 38px; padding: 7px 12px; }
.config-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.config-actions .button-primary { margin-left: auto; }
.unavailable { color: var(--muted); font-size: .82rem; font-style: italic; }

.modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(9 13 61 / .78); backdrop-filter: blur(5px); }
.modal-card { width: min(570px, 100%); padding: clamp(24px, 5vw, 38px); border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 9px 10px 0 var(--pink), 17px 18px 0 var(--yellow); }
.modal-card-small { width: min(480px, 100%); }
.modal-card h2 { margin-bottom: 10px; }
.modal-description { margin-bottom: 24px; color: var(--muted); line-height: 1.5; }
.field-label { display: block; margin-bottom: 8px; font-size: .83rem; font-weight: 900; }
.duration-input { width: 100%; padding: 13px 15px; border: 2px solid var(--ink); border-radius: 8px; color: var(--ink); background: #fff; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.form-error { margin: 10px 0 0; color: #b90049; font-size: .88rem; font-weight: 700; }
.change-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; padding: 15px; border: 2px solid var(--pink); border-radius: 8px; color: var(--muted); background: rgb(238 0 137 / .06); font-size: .88rem; }
.change-preview span { display: flex; flex-direction: column; gap: 3px; }.change-preview strong { color: var(--ink); font-size: 1.02rem; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 25px; }

.toast { position: fixed; z-index: 30; bottom: 24px; left: 50%; max-width: min(92vw, 600px); transform: translateX(-50%); padding: 12px 18px; border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); font-weight: 850; text-align: center; }

.race-board:fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  padding: clamp(46px, 8vh, 110px) clamp(28px, 7vw, 160px) clamp(36px, 6vh, 80px);
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 86% 11%, rgb(83 85 242 / .32), transparent 25%),
    radial-gradient(circle at 8% 89%, rgb(0 207 199 / .15), transparent 23%),
    linear-gradient(145deg, #142157, #0a1034 66%, #070a27);
  box-shadow: none;
}
.race-board:fullscreen::after { display: none; }
.race-board:fullscreen .loop-label { margin-bottom: clamp(12px, 2.5vh, 28px); }
.race-board:fullscreen .loop-kicker { font-size: clamp(1rem, 2.2vw, 1.85rem); }
.race-board:fullscreen .loop-count strong:first-child { font-size: clamp(4rem, 9vw, 8.5rem); }
.race-board:fullscreen .loop-count strong:last-child { font-size: clamp(3rem, 6.4vw, 5.8rem); }
.race-board:fullscreen .loop-count > span { font-size: clamp(3.1rem, 7vw, 6.4rem); }
.race-board:fullscreen .timer { font-size: clamp(7.6rem, 22vw, 23rem); }
.race-board:fullscreen .timer-caption { margin-top: clamp(22px, 3.5vh, 42px); font-size: clamp(.78rem, 1.5vw, 1.2rem); }
.race-board:fullscreen .time-details { width: min(880px, 100%); margin-top: clamp(30px, 5vh, 64px); }
.race-board:fullscreen .time-detail { padding: clamp(15px, 2vw, 24px) 16px; }
.race-board:fullscreen .time-detail span { font-size: clamp(.66rem, 1.25vw, .95rem); }
.race-board:fullscreen .time-detail strong { font-size: clamp(1.4rem, 3.2vw, 2.5rem); }

@media (max-width: 620px) {
  .app-shell { padding: 18px 14px 34px; }
  .app-shell::before, .app-shell::after { display: none; }
  .topbar { align-items: flex-start; }.topbar-actions { justify-content: flex-start; }
  .topbar, .section-heading { flex-direction: column; }.topbar-actions, .section-heading > .muted { text-align: left; }.section-heading { align-items: flex-start; }
  .race-board { min-height: 0; padding: 36px 16px 27px; border-radius: 20px; box-shadow: 5px 6px 0 var(--ink), 10px 11px 0 var(--pink), 15px 16px 0 var(--yellow); }
  .controls { display: grid; grid-template-columns: 1fr 1fr; }.controls .button { width: 100%; padding: 10px 8px; font-size: .81rem; }.controls .button-wide { grid-column: 1 / -1; }
  .config-actions { display: grid; grid-template-columns: 1fr; }.config-actions .button-primary { margin-left: 0; }
  .time-details { grid-template-columns: 1fr; }.time-detail + .time-detail { border-top: 2px solid rgb(255 255 255 / .22); border-left: 0; }
  .change-preview { grid-template-columns: 1fr; }
  .modal-card { box-shadow: 6px 7px 0 var(--pink), 12px 13px 0 var(--yellow); }
}

@media (max-height: 620px) and (min-width: 621px) {
  .race-board:fullscreen { padding-top: 30px; padding-bottom: 24px; }
  .race-board:fullscreen .timer { font-size: min(18vw, 12rem); }
  .race-board:fullscreen .time-details { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }