:root{color-scheme:dark;font-family:Avenir Next,Trebuchet MS,system-ui,sans-serif;background:#111313;color:#f4f1e8;--panel: #181b1a;--panel-strong: #202523;--line: #41443e;--muted: #a9ada3;--danger: #ff5b79;--ok: #21d4a8;--warning: #f5c542}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0 / 36px 36px,radial-gradient(circle at 50% 0%,rgba(245,197,66,.08),transparent 32rem),#101211}button,a{font:inherit}button{min-height:44px}.screen-page{min-height:100vh;padding:22px}.screen-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.eyebrow,.status-label{margin:0 0 5px;color:var(--warning);font-size:.76rem;font-weight:800;letter-spacing:0;text-transform:uppercase}h1{margin:0;max-width:900px;font-size:clamp(2.1rem,5vw,5.7rem);line-height:.92;letter-spacing:0}.connection-pill{display:inline-flex;align-items:center;justify-content:center;min-width:126px;border:1px solid var(--line);padding:9px 12px;color:var(--muted);font-size:.78rem;font-weight:800;text-transform:uppercase;background:#151716}.connection-pill.online{border-color:#21d4a8b3;color:var(--ok)}.connection-pill.offline{border-color:#ff5b79b3;color:var(--danger)}.screen-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:16px;min-height:calc(100vh - 150px)}.race-stage,.control-column,.join-panel,.event-log,.race-controls{border:1px solid var(--line);background:linear-gradient(180deg,#ffffff09,#ffffff03),var(--panel);box-shadow:inset 0 1px #ffffff0f}.race-stage{display:flex;flex-direction:column;min-width:0}.race-topline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border-bottom:1px solid var(--line);background:var(--line)}.race-topline>div{min-width:0;padding:14px;background:#171a19}.race-topline strong{display:block;overflow-wrap:anywhere;font-size:clamp(1rem,2vw,1.8rem);text-transform:uppercase}.machine{position:relative;display:grid;gap:14px;padding:18px;flex:1;overflow:hidden;background:radial-gradient(circle at var(--race-heat-position) 0%,rgba(245,197,66,.14),transparent 22rem),linear-gradient(180deg,#ffffff09,#fff0)}.machine-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.factory-grid{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.35;background:linear-gradient(90deg,rgba(244,241,232,.08) 1px,transparent 1px) 0 0 / 54px 54px,linear-gradient(rgba(244,241,232,.05) 1px,transparent 1px) 0 0 / 54px 54px;-webkit-mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent);mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent)}.overhead-crane{position:absolute;left:3%;right:8%;top:16px;height:10px;border-block:1px solid rgba(244,241,232,.16);background:repeating-linear-gradient(90deg,rgba(244,241,232,.12) 0 16px,transparent 16px 31px)}.pressure-line{position:absolute;left:-10%;width:120%;height:1px;background:linear-gradient(90deg,transparent,rgba(33,212,168,.28),transparent);transform:rotate(-1deg)}.pressure-line-one{top:34%}.pressure-line-two{top:68%;background:linear-gradient(90deg,transparent,rgba(245,197,66,.26),transparent)}.finish-column{position:absolute;top:18px;right:28px;bottom:18px;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:72px;border:1px dashed rgba(244,241,232,.2);color:#f4f1e875;text-transform:uppercase;font-size:.72rem;pointer-events:none}.finish-column strong{writing-mode:vertical-rl;padding-bottom:12px}.machine-lane{position:relative;z-index:1;display:grid;grid-template-columns:minmax(132px,180px) minmax(360px,1fr) minmax(126px,200px);--machine-stroke: 8;align-items:center;min-height:142px;border:1px solid color-mix(in srgb,var(--lane-color) 35%,var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--lane-color) 16%,transparent),transparent 42%),linear-gradient(180deg,#ffffff0e,#ffffff03),#141615;overflow:hidden;isolation:isolate}.machine-lane:before,.machine-lane:after{content:"";position:absolute;z-index:-1;pointer-events:none}.machine-lane:before{top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at var(--progress-position) 44%,color-mix(in srgb,var(--lane-color) 18%,transparent),transparent 9rem),repeating-linear-gradient(-8deg,rgba(244,241,232,.035) 0 1px,transparent 1px 16px);opacity:.86}.machine-lane:after{left:var(--progress-position);top:9px;width:84px;height:84px;border:1px solid color-mix(in srgb,var(--lane-color) 42%,transparent);border-radius:999px;opacity:.28;transform:translate(-50%);animation:sonarPulse 1s ease-out infinite}.machine-lane.winner{outline:3px solid var(--lane-color);box-shadow:0 0 34px color-mix(in srgb,var(--lane-color) 26%,transparent)}.machine-lane.failed,.machine-lane.running{animation:machinePulse 1.1s ease-in-out infinite alternate}.lane-meta{padding:16px;min-width:0}.lane-meta strong{display:block;margin-bottom:10px;color:var(--lane-accent);font-size:clamp(1.05rem,1.7vw,1.55rem)}.lane-meta span,.event-chip,.progress-readout{color:var(--muted);font-size:.83rem;overflow-wrap:anywhere;text-transform:uppercase}.track-shell{position:relative;min-width:0;padding:4px 0 12px}.track-svg{display:block;width:100%;aspect-ratio:16 / 9;height:auto;min-height:0;overflow:visible}.diagram-plate{fill:#f4f1e806;stroke:#f4f1e81f;stroke-width:2}.diagram-grid{fill:none;stroke:#f4f1e80e;stroke-width:1.5}.build-table{fill:none;stroke:#f4f1e847;stroke-linecap:round;stroke-width:9}.track-rail,.track-energy,.track-shadow,.secondary-rail,.secondary-energy{fill:none;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}.track-shadow{stroke:#090a0a7a;stroke-width:26;transform:translateY(12px)}.track-rail{stroke:#f4f1e83d}.track-energy{stroke-dasharray:1000;transition:stroke-dashoffset .45s ease;filter:drop-shadow(0 0 8px var(--lane-color))}.secondary-rail{stroke:#f4f1e81f;stroke-width:7}.secondary-energy{stroke:var(--lane-color);stroke-width:6;stroke-dasharray:1000;opacity:.55;transition:stroke-dashoffset .55s ease}.cup-rig path,.funnel-rig path,.toy-car path,.toy-car rect,.button-rig rect,.phone-rig path,.phone-body,.phone-screen,.phone-button,.domino,.lever-rig path,.seesaw-rig path,.gate-rig path{vector-effect:non-scaling-stroke}.cup-rig path,.funnel-rig path,.button-rig rect,.phone-body{fill:#101211;stroke:var(--lane-accent);stroke-linejoin:round;stroke-width:var(--machine-stroke)}.cup-rig circle{fill:var(--lane-color);stroke:#101211;stroke-width:var(--machine-stroke)}.cup-rig{transform:rotate(var(--cup-angle));transform-box:view-box;transform-origin:132px 78px;transition:transform .52s cubic-bezier(.18,.9,.28,1)}.ramp-rig path:not(.track-rail):not(.track-energy):not(.track-shadow),.lever-rig path,.seesaw-rig path,.gate-rig path,.phone-rig path{fill:none;stroke:var(--lane-color);stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--machine-stroke)}.domino{fill:#f4f1e8;stroke:#101211;stroke-width:var(--machine-stroke);transition:transform .42s cubic-bezier(.18,.9,.28,1)}.lever-rig{transform:rotate(var(--lever-angle));transform-box:view-box;transform-origin:500px 364px;transition:transform .52s cubic-bezier(.18,.9,.28,1)}.lever-rig circle,.seesaw-rig circle{fill:#101211;stroke:var(--lane-accent);stroke-width:var(--machine-stroke)}.cue-lever .lever-rig,.cue-marble .lever-rig,.cue-lights .lever-rig{animation:leverThrow .7s cubic-bezier(.3,1.6,.45,1)}.funnel-rig{transform:rotate(var(--funnel-angle));transform-box:view-box;transform-origin:653px 230px;transition:transform .52s cubic-bezier(.18,.9,.28,1)}.cue-spark .funnel-rig,.cue-warning .funnel-rig,.cue-recover .funnel-rig{animation:funnelKnock .64s ease-in-out 2}.seesaw-rig{transform:rotate(var(--seesaw-angle));transform-box:view-box;transform-origin:780px 410px;transition:transform .52s cubic-bezier(.18,.9,.28,1)}.pull-string{stroke-dasharray:12 10}.gate-door{transform:rotate(var(--gate-angle));transform-box:view-box;transform-origin:900px 332px;transition:transform .52s cubic-bezier(.18,.9,.28,1)}.car-track{stroke:#f4f1e861}.toy-car{transform:translate(var(--car-offset));transform-box:view-box;transition:transform .52s cubic-bezier(.18,.9,.28,1)}.toy-car path,.toy-car rect{fill:color-mix(in srgb,var(--lane-color) 28%,#101211);stroke:var(--lane-accent);stroke-linejoin:round;stroke-width:var(--machine-stroke)}.car-wheel{fill:#101211;stroke:var(--lane-accent);stroke-width:var(--machine-stroke);transform-box:fill-box;transform-origin:center;animation:wheelSpin .88s linear infinite}.button-cap{transform:translateY(calc(var(--button-depth) * 22px));transition:transform .36s cubic-bezier(.18,.9,.28,1)}.phone-rig{transform-origin:1202px 292px}.phone-body{fill-opacity:calc(.32 + var(--phone-energy) * .68);filter:drop-shadow(0 0 calc(var(--phone-energy) * 24px) var(--lane-color));transition:fill-opacity .36s ease,filter .36s ease}.phone-screen{fill:#101211;stroke:var(--lane-color);stroke-width:var(--machine-stroke)}.phone-button{fill:var(--lane-accent);stroke:#101211;stroke-width:5}.phone-glow{fill:var(--lane-color);opacity:calc(var(--phone-energy) * .2);transition:opacity .36s ease;animation:phonePulse 1.1s ease-in-out infinite}.phone-vibe,.phone-buzz{opacity:calc(.12 + var(--phone-energy) * .82);transition:opacity .36s ease}.marble{fill:var(--lane-accent);stroke:#101211;stroke-width:var(--machine-stroke);transition:cx .45s cubic-bezier(.22,.9,.28,1),cy .45s cubic-bezier(.22,.9,.28,1),opacity .26s ease}.marble-main{filter:drop-shadow(0 0 12px var(--lane-color))}.marble-shadow{fill:color-mix(in srgb,var(--lane-color) 65%,#111313);opacity:.42;stroke-width:0}.machine-lane.winner .phone-rig,.cue-bell .phone-rig,.cue-finish .phone-rig{animation:phoneVibrate .12s linear infinite}.station-marker{opacity:.55}.station-marker line{display:none}.station-marker circle{fill:var(--lane-color);stroke:#101211;stroke-width:3}.station-marker text{fill:#f4f1e8ad;font-size:23px;font-weight:900;text-anchor:middle;text-transform:uppercase}.machine-parts{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.spark{position:absolute;width:8px;height:8px;border-radius:999px;background:var(--lane-accent);box-shadow:0 0 18px 4px var(--lane-color);opacity:0}.spark-one{left:43%;top:46%}.spark-two{left:62%;top:58%}.spark-three{left:78%;top:38%}.cue-spark .spark,.cue-fault .spark,.cue-alarm .spark,.cue-recover .spark{animation:sparkPop .78s ease-out infinite}.cue-fault,.cue-alarm{border-color:color-mix(in srgb,var(--danger) 72%,var(--line))}.cue-fault .track-shell,.cue-alarm .track-shell{animation:dangerRattle .17s linear 5}.progress-readout{position:absolute;right:12px;bottom:-2px;display:flex;gap:10px}.event-chip{margin-right:14px;border-left:3px solid var(--lane-color);padding:10px 12px;background:#00000038;display:grid;gap:7px}.event-chip span,.event-chip strong{min-width:0;overflow-wrap:anywhere}.event-chip strong{color:#f4f1e8;font-size:.72rem;line-height:1.2;text-transform:none}.control-column{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:12px;min-height:0;border:none;background:transparent;box-shadow:none}.race-controls{display:grid;grid-template-columns:1fr;gap:10px;padding:12px}.control-button,.phone-test,.lane-choice{border:1px solid var(--line);color:#f4f1e8;font-weight:900;text-transform:uppercase;background:#181b1a;cursor:pointer}.control-button:hover,.phone-test:hover,.lane-choice:hover{border-color:var(--warning)}.control-button:disabled{color:#74786f;cursor:not-allowed}.control-button.primary,.phone-test{border-color:var(--ok);background:linear-gradient(180deg,#21d4a838,#21d4a814)}.control-button.danger{border-color:#ff5b798c}.control-button.warning{border-color:#f5c542b8;background:linear-gradient(180deg,#f5c54233,#f5c5420f)}.join-panel,.event-log{padding:12px}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;color:var(--muted);font-size:.82rem;font-weight:900;text-transform:uppercase}.panel-header strong{color:var(--warning);overflow-wrap:anywhere}.qr-code,.qr-placeholder{display:block;width:min(100%,220px);aspect-ratio:1;margin:0 auto 12px;background:#f8fbff}.phone-link{display:block;color:#f4f1e8;font-size:.78rem;overflow-wrap:anywhere}.event-log{min-height:0;overflow:hidden}.log-list{display:grid;gap:7px;max-height:100%;overflow:auto}.log-row{display:grid;grid-template-columns:52px minmax(120px,.75fr) minmax(0,1fr);gap:8px;align-items:center;border-left:3px solid var(--line);padding:8px;background:#ffffff09;font-size:.76rem}.log-row.success{border-left-color:var(--ok)}.log-row.warning{border-left-color:var(--warning)}.log-row.error{border-left-color:var(--danger)}.log-id{color:var(--warning);font-weight:900}.log-type{color:#f4f1e8;font-weight:800;overflow-wrap:anywhere}.log-label{color:var(--muted);overflow-wrap:anywhere}.phone-page{--lane-color: #21d4a8;--lane-accent: #a4ffe9;min-height:100vh;padding:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--lane-color) 26%,transparent),transparent 55%),#101211;transition:background .18s ease}.phone-page.pulse-1{background:linear-gradient(180deg,color-mix(in srgb,var(--lane-color) 52%,transparent),transparent 65%),#171a19}.phone-hero{display:grid;gap:16px;min-height:58vh;align-content:center}.phone-hero h1{color:var(--lane-accent);font-size:clamp(3rem,18vw,7rem)}.phone-event{margin:0;color:#f4f1e8;font-size:clamp(1.15rem,5vw,2rem);line-height:1.18}.phone-status-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;border:1px solid color-mix(in srgb,var(--lane-color) 45%,var(--line));padding:12px;background:#0000003d}.phone-status-grid span{color:var(--muted);text-transform:uppercase;font-size:.78rem}.phone-status-grid strong{overflow-wrap:anywhere}.phone-test{width:100%}.lane-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:14px}.lane-choice{border-color:color-mix(in srgb,var(--lane-color) 52%,var(--line));padding:10px;min-height:54px}.lane-choice.auto{grid-column:1 / -1}.lane-choice.selected{background:color-mix(in srgb,var(--lane-color) 24%,#111313)}@keyframes machinePulse{0%{box-shadow:inset 0 0 #fff0}to{box-shadow:inset 0 0 24px color-mix(in srgb,var(--lane-color) 16%,transparent)}}@keyframes sonarPulse{0%{opacity:.32;transform:translate(-50%) scale(.4)}to{opacity:0;transform:translate(-50%) scale(1.4)}}@keyframes leverThrow{0%,to{transform:rotate(var(--lever-angle))}45%{transform:rotate(-18deg)}70%{transform:rotate(10deg)}}@keyframes funnelKnock{0%,to{transform:translate(0) rotate(var(--funnel-angle))}35%{transform:translate(-6px) rotate(calc(var(--funnel-angle) - 2deg))}70%{transform:translate(5px) rotate(calc(var(--funnel-angle) + 2deg))}}@keyframes wheelSpin{to{transform:rotate(360deg)}}@keyframes sparkPop{0%{opacity:0;transform:scale(.4)}38%{opacity:1;transform:scale(1.4)}to{opacity:0;transform:translate(18px,-16px) scale(.2)}}@keyframes phonePulse{0%,to{transform:scale(.96)}50%{transform:scale(1.06)}}@keyframes phoneVibrate{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-4px,2px) rotate(-2deg)}50%{transform:translate(3px,-2px) rotate(2deg)}75%{transform:translate(4px,1px) rotate(1deg)}}@keyframes dangerRattle{0%,to{transform:translate(0)}50%{transform:translate(5px)}}@media(max-width:1020px){.screen-grid,.control-column{grid-template-columns:1fr}}@media(max-width:760px){.screen-page{padding:12px}.screen-header,.race-topline{grid-template-columns:1fr;display:grid}.machine{padding:10px}.machine-lane{grid-template-columns:1fr;gap:0;min-height:190px}.event-chip{margin:0 12px 12px}.log-row{grid-template-columns:48px minmax(0,1fr)}.log-label{grid-column:1 / -1}.finish-column{display:none}}
