:root{--bg: #0d0d0d;--surface: #1a1a1a;--text: #ffffff;--muted: #999999;--gold: #c9a84c;--gold-hi: #e8c96a;--green: #2ecc71;--red: #ff3b30;--font-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;--font-head: "Poppins", "Arial Black", system-ui, sans-serif;--font-body: "Inter", system-ui, "Segoe UI", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-body);overflow:hidden;-webkit-font-smoothing:antialiased}.app{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:var(--bg)}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column}.zone{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:0}.zone--lb{flex:0 0 14%}.zone--hero,.zone--lineup{flex:0 0 41%}.zone--qr{flex:0 0 23%}.zone--quiet{flex:0 0 22%;gap:clamp(4px,.8vmin,14px)}.connecting{align-items:center;justify-content:center;gap:clamp(6px,1.2vmin,20px)}.connecting__brand{font-family:var(--font-display);font-size:clamp(44px,12vmin,220px);letter-spacing:.06em;line-height:1}.connecting__brand .r{color:var(--red)}.connecting__brand .g{color:var(--green)}.connecting__sub{color:var(--muted);letter-spacing:.28em;text-transform:uppercase;font-size:clamp(12px,2vmin,34px)}.lbstrip{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:clamp(10px,2.4vmin,40px);padding:0 clamp(16px,4vmin,60px);width:100%}.lbstrip__title{font-family:var(--font-display);color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:clamp(16px,3vmin,54px)}.lbstrip__list{display:flex;gap:clamp(10px,2.2vmin,38px);list-style:none;flex-wrap:wrap;justify-content:center}.lbstrip__item{display:flex;align-items:center;gap:clamp(4px,1vmin,12px)}.lbstrip__rank{font-size:clamp(14px,2.4vmin,40px)}.lbstrip__dot{width:clamp(8px,1.4vmin,22px);aspect-ratio:1;border-radius:50%}.lbstrip__time{font-family:var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:.05em;font-size:clamp(16px,2.9vmin,50px);color:#fff}.lbstrip__empty{color:var(--muted);font-size:clamp(12px,2vmin,32px)}.hero{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero__video{width:auto;height:100%;max-width:96%;max-height:100%;object-fit:contain;-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}.hero--css .hero__glow{position:absolute;width:62vmin;height:62vmin;border-radius:50%;filter:blur(6vmin);opacity:.45;z-index:0}.hero__glow--green{background:radial-gradient(circle,var(--green),transparent 68%);animation:heroPanG 15s ease-in-out infinite alternate}.hero__glow--red{background:radial-gradient(circle,var(--red),transparent 68%);animation:heroPanR 17s ease-in-out infinite alternate}.hero__type{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--font-display);line-height:.88}.hero__line{font-size:clamp(48px,13vmin,250px);letter-spacing:.04em}.hero__line--red{color:var(--red);text-shadow:0 0 clamp(16px,4vmin,60px) rgba(255,59,48,.45)}.hero__line--green{color:var(--green);text-shadow:0 0 clamp(16px,4vmin,60px) rgba(46,204,113,.45)}.qrcard{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vmin,16px)}.qrcard--breathe .qrcard__card{animation:breathe 3.6s ease-in-out infinite}.qrcard__card{background:#fff;padding:clamp(8px,1.4vmin,22px);border-radius:clamp(10px,1.6vmin,26px);line-height:0;box-shadow:0 0 clamp(20px,4vmin,64px) #c9a84c47}.qrcard__canvas,.qrcard__fallback{width:clamp(150px,23vmin,440px)!important;height:clamp(150px,23vmin,440px)!important;image-rendering:pixelated;display:block}.qrcard__fallback{display:flex;align-items:center;justify-content:center;color:#000;font-size:clamp(11px,1.4vmin,24px);word-break:break-all;text-align:center;padding:6px;line-height:1.3}.qrcard__title{font-family:var(--font-display);color:#fff;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(20px,3.4vmin,64px);text-align:center}.qrcard__room{color:var(--muted);letter-spacing:.12em;font-size:clamp(12px,1.8vmin,30px)}.qrcard__room b{color:var(--gold);font-family:var(--font-display);letter-spacing:.24em;font-size:clamp(16px,2.6vmin,46px)}.qrcard__sub{color:var(--muted);font-size:clamp(11px,1.6vmin,27px);text-align:center}.qrcard__url{color:#4a4a4a;font-size:clamp(10px,1.3vmin,22px)}.quiet__meta{color:var(--muted);font-size:clamp(13px,2vmin,34px)}.quiet__brand{font-family:var(--font-display);color:#333;letter-spacing:.3em;font-size:clamp(14px,2.4vmin,42px)}.quiet__wait{font-family:var(--font-display);color:var(--gold);letter-spacing:.1em;font-size:clamp(18px,3vmin,54px)}.lineup__title{font-family:var(--font-display);color:var(--muted);letter-spacing:.2em;text-transform:uppercase;font-size:clamp(14px,2.2vmin,38px);margin-bottom:clamp(6px,1.2vmin,18px)}.lineup{display:grid;grid-template-columns:repeat(var(--lanes, 6),1fr);gap:clamp(8px,1.6vmin,26px);width:92%;max-width:min(92vw,70vh)}.slot{aspect-ratio:3 / 4;background:var(--surface);border:1px solid #262626;border-radius:clamp(8px,1.4vmin,20px);display:flex;align-items:center;justify-content:center;position:relative}.slot--filled{border-color:#3a3a3a}.slot__ghost{color:#2c2c2c;font-family:var(--font-display);font-size:clamp(28px,7vmin,120px)}.slot__pop{position:relative;width:74%;height:74%;animation:pop .42s cubic-bezier(.2,1.4,.4,1)}.slot__host{position:absolute;top:-.5em;right:-.3em;background:var(--gold);color:#1a1400;font-family:var(--font-display);font-size:clamp(10px,1.6vmin,28px);padding:0 .4em;border-radius:.35em;letter-spacing:.06em}.avatar{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.avatar__glow{position:absolute;width:128%;height:128%;border-radius:50%;z-index:0;opacity:.55}.avatar__sprite{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.avatar__chip{position:relative;z-index:1;width:80%;aspect-ratio:1;border-radius:50%}.avatar__badge{position:absolute;z-index:2;bottom:-4%;left:50%;transform:translate(-50%);font-family:var(--font-display);font-size:clamp(11px,2.1vmin,40px);min-width:1.5em;text-align:center;padding:0 .22em;border-radius:.35em;line-height:1.25;box-shadow:0 .2vmin .6vmin #00000080}.avatar--dim{opacity:.4}.avatar__idle{position:absolute;top:-6%;right:0;z-index:3;font-size:clamp(12px,2vmin,34px);filter:drop-shadow(0 0 4px #000)}.avatar__crown{position:absolute;top:-34%;left:50%;transform:translate(-50%);z-index:3;font-size:clamp(16px,3vmin,56px);filter:drop-shadow(0 0 6px var(--gold))}.screen--race{overflow:hidden}.wash{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;transition:background .28s ease;animation:washBreathe 3.8s ease-in-out infinite}.light--green .wash{background:radial-gradient(circle at 50% 28%,#2ecc713d,#2ecc711a 58%,#2ecc7108);filter:brightness(calc(1 + var(--warn, 0) * .95))}.light--red .wash{background:radial-gradient(circle at 50% 28%,#ff3b3042,#ff3b301a 58%,#ff3b3008)}.light--idle .wash{background:transparent}.wash:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0}.light--green .wash:after,.light--red .wash:after{animation:flipFlash .22s ease-out}@keyframes flipFlash{0%{opacity:.5}to{opacity:0}}.race__top{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding-top:clamp(8px,2.2vmin,44px);flex:0 0 auto}.beacon__word{font-family:var(--font-display);font-size:clamp(62px,19vmin,380px);line-height:.9;letter-spacing:.06em;display:block}.beacon--green .beacon__word{color:var(--green);text-shadow:0 0 clamp(20px,5vmin,96px) rgba(46,204,113,calc(.6 + var(--warn, 0) * .4));filter:brightness(calc(1 + var(--warn, 0) * .45))}.beacon--red .beacon__word{color:var(--red);text-shadow:0 0 clamp(20px,5vmin,96px) rgba(255,59,48,.6)}.beacon--idle .beacon__word{color:var(--muted)}.race__body{position:relative;z-index:2;flex:1 1 auto;display:flex;align-items:stretch;justify-content:center;gap:clamp(6px,1.4vmin,22px);padding:clamp(8px,2vmin,34px) clamp(12px,3vmin,50px) clamp(18px,4vmin,70px);min-height:0}.rtimer{position:relative;flex:0 0 auto;width:clamp(6px,1.2vmin,18px);background:#191919;border-radius:999px;overflow:hidden;align-self:stretch;border:1px solid #262626}.rtimer__fill{position:absolute;bottom:0;left:0;right:0;height:0%;background:linear-gradient(to top,var(--gold),var(--red))}.grid{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;width:100%;max-width:min(90vw,66vh)}.grid__band{flex:0 0 auto;text-align:center;font-family:var(--font-display);letter-spacing:.24em;padding:clamp(4px,1vmin,14px) 0}.grid__band--finish{color:var(--gold);border-bottom:clamp(2px,.4vmin,6px) solid var(--gold);font-size:clamp(16px,2.6vmin,46px)}.grid__band--start{color:var(--muted);border-top:clamp(1px,.3vmin,4px) solid #333;font-size:clamp(14px,2.2vmin,38px)}.grid__band--photo{animation:photoPulse 1s ease-in-out infinite}.grid__lanes{flex:1 1 auto;display:grid;grid-template-columns:repeat(var(--lanes, 6),1fr);gap:clamp(4px,1vmin,16px);min-height:0;padding:clamp(4px,1vmin,14px) 0}.lane{position:relative;min-height:0}.lane__track{position:relative;width:100%;height:100%;border-radius:clamp(6px,1vmin,16px);border:1px solid #232323;overflow:hidden;background:repeating-linear-gradient(to top,#141414 0,#141414 calc(100% / var(--cells, 11) - 1px),#202020 calc(100% / var(--cells, 11) - 1px),#202020 calc(100% / var(--cells, 11)))}.lane__empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#2a2a2a;font-family:var(--font-display);font-size:clamp(22px,5vmin,90px)}.runner{position:absolute;left:6%;right:6%;bottom:0;height:calc(100% / var(--cells, 11));display:flex;align-items:center;justify-content:center;translate:0 calc(var(--r, 0) * -100%);transition:translate .12s ease;z-index:3}.runner__shake{position:relative;width:84%;height:84%;display:flex;align-items:center;justify-content:center}.runner__shake[data-hit="1"]{animation:shake .45s ease}.runner__flash{position:absolute;top:-12%;right:-12%;bottom:-12%;left:-12%;border-radius:50%;background:radial-gradient(circle,rgba(255,59,48,.85),transparent 70%);z-index:5;pointer-events:none;animation:flashRed .5s ease-out forwards}.hint{position:absolute;left:8%;right:8%;bottom:0;height:calc(100% / var(--cells, 11));translate:0 calc(var(--r, 1) * -100%);border:clamp(2px,.4vmin,5px) dashed;border-radius:clamp(4px,.8vmin,12px);z-index:2;animation:blink .9s ease-in-out infinite}.lane--terr-left .lane__track{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.lane--terr-right .lane__track{border-top-left-radius:0;border-bottom-left-radius:0}.lane__terrtint{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;opacity:.08;pointer-events:none}.lane__claimfill{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;border-radius:clamp(3px,.6vmin,8px);transition:height .12s ease;box-shadow:inset 0 0 clamp(6px,1.2vmin,16px) #00000047}.results__body{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 clamp(20px,5vmin,80px) clamp(8px,1.6vmin,26px);min-height:0}.results__head{font-family:var(--font-display);font-size:clamp(48px,12vmin,220px);color:var(--gold);margin-bottom:clamp(8px,1.4vmin,24px)}.results__list{list-style:none;width:100%;max-width:min(90vw,62vh);display:flex;flex-direction:column;gap:clamp(6px,1.2vmin,18px)}.rrow{display:grid;grid-template-columns:clamp(30px,5vmin,82px) clamp(16px,2.4vmin,40px) 1fr auto;align-items:center;gap:clamp(8px,1.6vmin,28px);background:var(--surface);border:1px solid #262626;border-radius:clamp(10px,1.6vmin,26px);padding:clamp(8px,1.4vmin,22px) clamp(14px,2.4vmin,40px)}.rrow--win{outline:clamp(2px,.4vmin,6px) solid var(--gold);background:#201c10}.rrow__place{font-family:var(--font-display);font-size:clamp(22px,3.6vmin,64px);text-align:center}.rrow__chip{width:clamp(16px,2.4vmin,40px);aspect-ratio:1;border-radius:50%}.rrow__name{font-family:var(--font-head);font-weight:700;font-size:clamp(18px,2.8vmin,52px)}.rrow__color{color:var(--muted);font-weight:400;font-size:.7em}.rrow__score{font-family:var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:.05em;font-size:clamp(20px,3.2vmin,58px);color:var(--gold)}.results__rotate{font-family:var(--font-display);color:var(--gold);letter-spacing:.14em;font-size:clamp(20px,3vmin,56px)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.overlay--countdown{z-index:25}.overlay--winner{z-index:22}.reconnect{position:absolute;top:0;right:0;bottom:0;left:0;z-index:60;background:#050505b8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}.reconnect__box{text-align:center}.reconnect__spinner{width:clamp(30px,6vmin,90px);aspect-ratio:1;border-radius:50%;border:clamp(3px,.6vmin,8px) solid #333;border-top-color:var(--gold);margin:0 auto clamp(10px,2vmin,30px);animation:spin .9s linear infinite}.reconnect__text{font-family:var(--font-display);font-size:clamp(28px,5vmin,90px);letter-spacing:.1em}.reconnect__sub{color:var(--muted);font-size:clamp(12px,2vmin,30px);margin-top:.4em}.notice{position:absolute;z-index:40;bottom:clamp(58px,10vmin,160px);left:50%;transform:translate(-50%);background:#141414eb;border:1px solid #333;border-radius:999px;padding:clamp(8px,1.4vmin,20px) clamp(16px,3vmin,44px);font-size:clamp(13px,2vmin,30px);color:#fff;white-space:nowrap}.sfx-toggle{position:absolute;z-index:45;bottom:clamp(12px,1.6vmin,34px);left:clamp(12px,1.6vmin,34px);background:#141414cc;border:1px solid #2a2a30;border-radius:999px;color:var(--muted);font-family:var(--font-body);font-weight:600;font-size:clamp(12px,1.4vmin,26px);padding:clamp(6px,1vmin,16px) clamp(12px,1.6vmin,30px);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.sfx-toggle.on{color:var(--gold);border-color:#c9a84c80}.debughud{position:absolute;z-index:70;top:8px;right:8px;max-width:48vw;background:#000000d1;border:1px solid #2a2a30;border-radius:8px;font-family:ui-monospace,Consolas,monospace;font-size:clamp(9px,1.1vmin,16px);color:#9fe;padding:6px 8px;white-space:pre-wrap;line-height:1.45;pointer-events:none}.debughud__players{color:#fc9}.debughud__log{color:#8ad;margin-top:4px;opacity:.85}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.035)}}@keyframes pop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.12)}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0) rotate(0)}20%{transform:translate(-8%) rotate(-6deg)}40%{transform:translate(8%) rotate(6deg)}60%{transform:translate(-6%) rotate(-4deg)}80%{transform:translate(5%) rotate(3deg)}}@keyframes flashRed{0%{opacity:.9}to{opacity:0}}@keyframes blink{0%,to{opacity:.14}50%{opacity:.62}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes photoPulse{0%,to{box-shadow:0 0 #c9a84c00;text-shadow:none}50%{box-shadow:0 0 clamp(20px,4vmin,60px) #c9a84cb3;text-shadow:0 0 clamp(10px,2vmin,30px) rgba(201,168,76,.9)}}@keyframes heroPanG{0%{transform:translate(-18%,-10%)}to{transform:translate(14%,12%)}}@keyframes heroPanR{0%{transform:translate(16%,10%)}to{transform:translate(-14%,-12%)}}@keyframes washBreathe{0%,to{opacity:.85}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.qrcard--breathe .qrcard__card,.hero__glow,.grid__band--photo,.hint,.wash,.slot__pop,.reconnect__spinner{animation:none!important}.runner{transition:none}}@media(min-aspect-ratio:5/4){.screen--attract,.screen--lobby{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,32vw,560px);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"lb   qr" "main qr" "main quiet";column-gap:clamp(8px,2vw,40px);padding:clamp(8px,2vmin,28px)}.screen--attract .zone--lb,.screen--lobby .zone--lb{grid-area:lb}.zone--hero,.zone--lineup{grid-area:main;min-height:0}.screen--attract .zone--qr,.screen--lobby .zone--qr{grid-area:qr;min-height:0}.screen--attract .zone--quiet,.screen--lobby .zone--quiet{grid-area:quiet}.race__top{padding-top:clamp(4px,1.2vmin,18px)}.grid{max-width:min(50vh,90vw)}.results__body{width:min(72vw,900px);margin-left:auto;margin-right:auto}}