:root{color-scheme:dark;--bg:#101313;--ink:#f0f5f1;--muted:#8d9c96;--line:#303936;--green:#b7fa76;--blue:#65c9ff;--red:#ff7f86;--gold:#ffd473}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;letter-spacing:0}
button,select,input{font:inherit}button,select{color:inherit}button{cursor:pointer}button:disabled{cursor:default}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.game{max-width:1120px;margin:auto;padding:26px 32px 20px}.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand,.eyebrow,.event-tag,.timeline-head,.track-top,.track-bottom,.phases,.control-footer,.equipment,.page-footer,.result-tag{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px}
.brand{color:var(--green)}h1{font-size:28px;margin:7px 0 0;font-weight:800;line-height:1.15}.event-tag{display:inline-block;color:var(--muted);margin-left:16px;font-weight:400;vertical-align:middle}
.event-nav{display:flex;gap:24px;margin-top:12px;font:11px ui-monospace,SFMono-Regular,Consolas,monospace}.event-nav a{color:var(--muted);text-decoration:none;padding:7px 0;border-bottom:2px solid transparent}.event-nav a[aria-current=page]{color:var(--green);border-color:var(--green)}.event-nav a:hover{color:var(--ink)}
.sound-toggle{display:flex;gap:9px;align-items:center;font-size:12px;color:var(--muted)}.sound-toggle input{appearance:none;width:32px;height:18px;border:1px solid #52635b;border-radius:18px;margin:0;background:#202824;position:relative;cursor:pointer}.sound-toggle input:before{content:"";position:absolute;left:3px;top:3px;width:10px;height:10px;border-radius:50%;background:#8d9c96;transition:transform .15s}.sound-toggle input:checked:before{transform:translateX(14px);background:var(--green)}
.scoreboard{display:flex;align-items:flex-end;gap:48px;padding:27px 0 22px}.eyebrow{display:block;color:var(--muted);margin-bottom:8px}.clock{display:flex;gap:8px;align-items:baseline}.clock output{font:600 46px/1 ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums}.clock span,.metric div>span{font-size:12px;color:var(--muted)}.metric div{display:flex;gap:8px;align-items:baseline}.metric output{font:500 26px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.best{margin-left:auto}
.timeline-head{display:flex;justify-content:space-between;color:var(--muted);margin-bottom:9px}.timeline-head span:first-child{color:var(--green)}.timeline{height:5px;background:#2c3431;position:relative}.timeline #progress{height:100%;width:0;background:var(--green);box-shadow:0 0 12px #b7fa7622}.marker{position:absolute;width:2px;height:11px;top:-3px;background:#87938c}.fifteen{left:15%;background:var(--blue)}.finish{left:98.5%;background:var(--gold)}
.track{position:relative;height:300px;overflow:hidden;background:#151c19}.track canvas{width:100%;height:100%;display:block}.track-top,.track-bottom{position:absolute;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.track-top{top:16px;color:var(--muted)}.track-bottom{bottom:16px;color:var(--green)}.lane b{font-size:16px;color:var(--ink);margin-left:8px}.live-label{display:flex;align-items:center;gap:7px}.live-label i{width:5px;height:5px;border-radius:50%;background:var(--green)}.race-call{position:absolute;top:40px;left:0;right:0;text-align:center;font-size:28px;line-height:1;font-weight:800;color:var(--ink);pointer-events:none}.race-call.flash{color:var(--gold);text-shadow:0 0 30px #ffd47355}.race-call.fail{color:var(--red)}
.interaction{border-bottom:1px solid var(--line);padding:18px 0 13px}.phases{list-style:none;display:flex;justify-content:center;gap:48px;padding:0;margin:0;color:#626f69}.phases li{display:flex;gap:8px;align-items:center}.phases li span{font-size:10px}.phases li b{font-weight:500}.phases .active{color:var(--green)}.phases [data-phase=boost].active{color:var(--blue)}.phases [data-phase=line].active{color:var(--gold)}
.control-row{display:grid;grid-template-columns:1fr 174px 1fr;gap:30px;align-items:center;max-width:640px;margin:16px auto 12px}.control-stat{min-width:0}.control-stat strong{font:500 25px/1 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}.control-stat strong span{font:11px Arial,sans-serif;color:var(--muted);margin-left:5px}.control-stat.right{text-align:right}
.trigger{--accent:var(--green);--charge:0%;width:174px;height:174px;padding:0;border:0;border-radius:50%;background:none;position:relative;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;isolation:isolate;color:var(--accent)}.trigger-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--accent) var(--charge),#34413a 0);padding:3px;pointer-events:none}.trigger-ring:after{content:"";position:absolute;inset:3px;background:var(--bg);border-radius:50%}.trigger-core{position:absolute;inset:12px;display:flex;flex-direction:column;justify-content:center;gap:6px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:50%;background:color-mix(in srgb,var(--accent) 8%,var(--bg));pointer-events:none;transition:background .12s}.trigger-core small{font:10px ui-monospace,SFMono-Regular,Consolas,monospace}.trigger-core strong{font-size:28px;line-height:1.1}.trigger.is-held .trigger-core{background:color-mix(in srgb,var(--accent) 23%,var(--bg));box-shadow:0 0 36px color-mix(in srgb,var(--accent) 12%,transparent)}.trigger[data-mode=boost]{--accent:var(--blue)}.trigger[data-mode=line]{--accent:var(--gold)}.trigger[data-mode=line]:not(:disabled) .trigger-core{animation:dip-pulse .25s alternate infinite}.trigger:disabled{opacity:.5}.trigger[data-mode=drive]{--accent:#83958a}
@keyframes dip-pulse{to{background:#ffd47340;box-shadow:0 0 22px #ffd47340}}
.control-footer{display:flex;align-items:center;justify-content:space-between;color:var(--muted);min-height:22px}.text-button{background:none;border:0;padding:5px 0 5px 12px;color:var(--muted);font:inherit}.text-button:hover{color:var(--ink)}
.equipment{border-bottom:1px solid var(--line)}.equipment summary{display:flex;gap:15px;align-items:center;cursor:pointer;list-style:none;padding:17px 0;color:var(--ink)}.equipment summary::-webkit-details-marker{display:none}.equipment summary #kit-label{margin-left:auto;color:var(--muted);font-size:10px}.chevron{font-size:18px;color:var(--green)}.equipment[open] .chevron{transform:rotate(45deg)}fieldset{margin:0;padding:0 0 18px;border:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}fieldset label{display:grid;gap:9px;font-size:10px;color:var(--muted)}fieldset select{width:100%;min-width:0;background:#18211c;border:1px solid #3c4e42;padding:10px 6px;border-radius:3px;font:12px Arial,sans-serif}fieldset output{color:var(--green);font-size:10px}fieldset:disabled{opacity:.5}
.page-footer{display:flex;justify-content:space-between;padding-top:16px;font-size:10px;color:#6e7a73}.page-footer a{color:var(--muted);text-decoration:none}.page-footer a:hover{color:var(--green)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pause-panel{position:absolute;inset:0;background:#101313ee;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px}.pause-panel[hidden]{display:none}.pause-panel strong{font-size:24px}.pause-panel button{border:1px solid var(--green);background:#1f3223;color:var(--green);padding:12px 22px}
dialog{width:min(430px,calc(100% - 32px));border:1px solid #4c5b51;border-radius:6px;padding:30px;background:#151d18;color:var(--ink);box-shadow:0 24px 120px #0008}dialog::backdrop{background:#070c0bce;backdrop-filter:blur(4px)}.result-tag{color:var(--green)}dialog h2{font-size:28px;margin:14px 0}.result-time{font:600 54px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace}.result-time span{font-size:16px;color:var(--muted);margin-left:8px}dialog p{color:var(--muted);font-size:13px;line-height:1.5}dialog dl{margin:24px 0;display:grid;gap:0}dialog dl div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line);font-size:13px}dialog dt{color:var(--muted)}dialog dd{margin:0;text-align:right}.primary-button{width:100%;padding:14px;border:0;border-radius:3px;background:var(--green);color:#17210e;font-weight:700}
@media(max-width:650px){.game{padding:20px 16px 16px}h1{font-size:24px}.event-tag{display:none}.scoreboard{gap:22px;padding:23px 0 18px}.clock output{font-size:36px}.metric output{font-size:20px}.metric .eyebrow{font-size:9px}.clock-block .eyebrow{font-size:9px}.track{height:260px}.track-top,.track-bottom{left:12px;right:12px;font-size:10px}.race-call{font-size:25px;top:48px}.phases{gap:22px;font-size:10px}.control-row{grid-template-columns:1fr 144px 1fr;gap:8px;margin:16px auto}.trigger{width:144px;height:144px}.trigger-core{inset:10px}.trigger-core strong{font-size:24px}.trigger-core small{font-size:9px}.control-stat .eyebrow{font-size:8px;line-height:1.5;max-width:85px}.control-stat.right .eyebrow{margin-left:auto}.control-stat strong{font-size:20px}.control-stat strong span{display:block;margin:6px 0 0}.equipment fieldset{grid-template-columns:1fr 1fr;gap:16px}.sound-toggle span{font-size:11px}.control-footer{font-size:10px}.page-footer{font-size:9px}}
@media(max-width:360px){.game{padding-left:12px;padding-right:12px}.scoreboard{gap:12px}.clock output{font-size:30px}.metric output{font-size:17px}.metric div{gap:3px}.clock span,.metric div>span{font-size:10px}.phases{gap:13px}.control-row{grid-template-columns:1fr 134px 1fr}.trigger{width:134px;height:134px}}
.track-bottom{bottom:0;left:0;right:0;min-height:26px;padding:7px 18px;background:#151817;gap:12px}
@media(max-width:650px){.track-bottom{left:0;right:0;padding:7px 12px}.race-call{left:auto;right:14px;max-width:50%;text-align:right;font-size:22px}}
@media(min-width:651px) and (max-height:800px){.game{padding-top:18px}.scoreboard{padding:20px 0 16px}.clock output{font-size:40px}.track{height:240px}.control-row{grid-template-columns:1fr 144px 1fr;margin:12px auto}.trigger{width:144px;height:144px}.trigger-core strong{font-size:24px}}
.track{height:340px}
.track-bottom #feedback{min-width:0}.track-bottom #zone-count{flex:none}
@media(max-width:650px){.track{height:300px}.track-bottom{font-size:9px}}
@media(min-width:651px) and (max-height:800px){.track{height:248px}}
.phases [data-phase=zone].active{color:var(--blue)}
.trigger[data-mode=zone]{--accent:var(--blue)}
.trigger{-webkit-tap-highlight-color:transparent}
.trigger[data-mode=zone][data-tier=perfect]{--accent:#dcfbff}
.trigger[data-mode=zone][data-tier=great]{--accent:#81f6b6}
.trigger[data-mode=zone][data-tier=good]{--accent:var(--gold)}
.trigger[data-mode=zone][data-tier=early],.trigger[data-mode=zone][data-tier=late],.trigger[data-mode=zone][data-tier=miss]{--accent:var(--red)}
.trigger[data-mode=zone] .trigger-core strong{white-space:pre-line;font-size:25px;line-height:1.05}
.race-call{right:auto;transform:translateX(-50%);width:154px;max-width:none;text-align:center;font-size:16px;line-height:20px}
.zone-marker{position:absolute;top:-3px;height:11px;background:var(--blue);opacity:.85;border:1px solid var(--bg)}
.zone-breakdown{margin-bottom:24px;font:11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}.zone-breakdown summary{cursor:pointer;color:var(--muted)}.zone-breakdown ol{list-style:none;margin:12px 0 0;padding:0;max-height:170px;overflow-y:auto}.zone-breakdown li{padding:8px 0;border-top:1px solid var(--line)}.zone-breakdown small{font-size:9px;color:var(--muted)}
@media(max-height:800px){dialog{padding:22px}.result-time{font-size:44px}dialog dl{margin:16px 0}dialog dl div{padding:8px 0}.zone-breakdown ol{max-height:120px}}
.race-call.flash{color:#e5fcff;text-shadow:0 0 24px #6de7ff77}
body[data-sport=swimming] .track-top{color:var(--ink);text-shadow:0 1px 3px #101313}
body[data-sport=swimming] .trigger[data-mode=line] .trigger-core strong{font-size:24px;max-width:110px;align-self:center;line-height:1.1}
@media(max-width:650px){.trigger[data-mode=zone] .trigger-core strong{font-size:22px}.race-call{font-size:12px}}
@media(min-width:651px) and (max-height:800px){.trigger[data-mode=zone] .trigger-core strong{font-size:22px}}
@media(prefers-reduced-motion:reduce){.trigger-core{animation:none!important;transition:none}}
.event-nav{flex-wrap:wrap}
.timing-guide{display:grid;grid-template-columns:82px minmax(0,1fr) 38px;align-items:center;gap:12px;max-width:440px;height:22px;margin:10px auto 0;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--blue)}
.timing-track{--marker:1%;--window:8%;position:relative;height:10px;background:#303d37;overflow:hidden;border-radius:2px}
.timing-track i{position:absolute;display:block;top:0;height:100%}.timing-zone{left:25%;width:50%;background:#1688b0}.timing-entry,.timing-exit{width:var(--window);transform:translateX(-50%);background:#d9fcff88}.timing-entry{left:25%}.timing-exit{left:75%}.timing-marker{left:var(--marker);width:3px;transform:translateX(-50%);background:#fff;box-shadow:0 0 6px #fff}
.timing-countdown{text-align:right;font-variant-numeric:tabular-nums}.timing-guide[data-state=idle],.timing-guide[data-state=paused]{opacity:.35}.timing-guide[data-state=prepare]{color:var(--gold)}.timing-guide[data-state=release],.timing-guide[data-state=press]{color:#e7fcff}.timing-guide[data-finish=true] .timing-zone{background:#92732d}
.trigger[data-cue=press],.trigger[data-cue=release]{--accent:#e7fcff}.trigger[data-cue=prepare]{--accent:var(--gold)}
.trigger[data-cue=press] .trigger-core,.trigger[data-cue=release] .trigger-core{border-color:#e7fcff;box-shadow:0 0 18px #8cecff33}
.trigger[data-mode=finish]{--accent:var(--green)}.trigger[data-mode=finish][data-tier=failed]{--accent:var(--red)}.trigger[data-mode=finish] .trigger-core strong{font-size:23px}.trigger[data-mode=finish]:disabled{opacity:.8}
@media(max-width:650px){.timing-guide{grid-template-columns:72px minmax(0,1fr) 30px;gap:8px;font-size:9px;margin-top:8px}}
@media(max-width:650px){.event-nav{gap:14px;row-gap:2px;font-size:10px}}
