/* style.css — неоновый интерфейс гонки */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:#0b0620;color:#fff;font-family:-apple-system,"SF Pro Display",Inter,system-ui,sans-serif;touch-action:none}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0}canvas#fx{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#vig{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(10,0,30,.55) 100%)}
body[data-scr=welcome] #gl,body[data-scr=lobby] #gl{filter:blur(2px) brightness(.8)}
#top{position:fixed;top:calc(env(safe-area-inset-top) + 10px);left:12px;right:12px;display:flex;gap:8px;z-index:30}#top span{flex:1}
.ib{border:1px solid rgba(255,255,255,.2);background:rgba(20,10,50,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;font-weight:700;font-size:13px;font-family:inherit;padding:10px 13px;border-radius:14px;text-decoration:none;cursor:pointer}
.scr{position:fixed;inset:0;display:none;overflow:auto;padding:calc(env(safe-area-inset-top) + 64px) 16px calc(env(safe-area-inset-bottom) + 24px);z-index:5;touch-action:pan-y}.scr.on{display:block}
.wrap{max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:14px;text-align:center;min-height:100%;justify-content:center;animation:in .7s cubic-bezier(.22,1.4,.36,1) both}
@keyframes in{from{opacity:0;transform:translateY(40px) scale(.94);filter:blur(10px)}}
.logo{font-size:clamp(56px,17vw,84px);font-weight:900;font-style:italic;line-height:.88;letter-spacing:-3px;background:linear-gradient(180deg,#fff 10%,#ff5fa8 45%,#7a4dff 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(255,80,170,.6))}
h2{margin:0;font-size:28px;font-weight:900;font-style:italic}.sub{margin:0;opacity:.75;font-size:15px;line-height:1.4}.note{margin:0;opacity:.6;font-size:12.5px;line-height:1.4}
.card{background:rgba(20,10,50,.62);border:1px solid rgba(255,255,255,.18);border-radius:26px;padding:16px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);text-align:left;box-shadow:0 20px 60px rgba(0,0,0,.45)}.card.center{text-align:center}
.lab{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;opacity:.6;margin:2px 0 8px}.lab.sm{margin-top:14px}
input{width:100%;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);border-radius:18px;padding:15px 16px;color:#fff;font-weight:700;font-size:17px;font-family:inherit;outline:0;text-align:center;user-select:text}
input:focus{border-color:#ff5fa8;box-shadow:0 0 0 4px rgba(255,95,168,.25)}input.bad{border-color:#ff4d6d;animation:sk .4s}@keyframes sk{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.btn{position:relative;overflow:hidden;border:0;color:#fff;font-weight:900;font-size:18px;font-style:italic;font-family:inherit;padding:18px 26px;border-radius:20px;width:100%;background:linear-gradient(135deg,#2f8bff,#7a4dff);box-shadow:0 12px 30px rgba(100,80,255,.5),inset 0 1.5px 0 rgba(255,255,255,.45);cursor:pointer;transition:transform .25s cubic-bezier(.3,1.8,.5,1)}
.btn:active{transform:scale(.94)}.btn:disabled{opacity:.4;pointer-events:none}.btn.pk{background:linear-gradient(135deg,#ff3d81,#ff9a1f);box-shadow:0 12px 30px rgba(255,61,129,.5),inset 0 1.5px 0 rgba(255,255,255,.5)}.btn.alt{background:rgba(255,255,255,.12);box-shadow:none}.btn.sm{width:auto;padding:14px 20px;font-size:16px}
.btn:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-20deg);animation:sw 3.5s infinite}.btn.alt:after{display:none}@keyframes sw{60%,100%{left:130%}}
.row{display:flex;gap:10px;align-items:center}
.cars{display:flex;gap:10px}.cars div{flex:1;height:58px;border-radius:16px;background:var(--c);border:3px solid transparent;opacity:.55;transition:.3s cubic-bezier(.3,1.8,.5,1);display:grid;place-items:center;font-size:26px;cursor:pointer;box-shadow:inset 0 -10px 18px rgba(0,0,0,.25)}.cars div.on{opacity:1;border-color:#fff;transform:scale(1.1) rotate(-3deg);box-shadow:0 0 24px var(--c)}
.chips{display:flex;gap:8px;flex-wrap:wrap}.chips span{flex:1;text-align:center;padding:12px;border-radius:14px;background:rgba(255,255,255,.1);font-weight:800;cursor:pointer;transition:.25s}.chips span.on{background:linear-gradient(135deg,#ff3d81,#ff9a1f);transform:scale(1.05)}
.code{font:900 40px ui-monospace,"SF Mono",monospace;letter-spacing:10px;margin:6px -10px 10px 0;color:#ff7ab8;text-shadow:0 0 18px rgba(255,80,170,.7)}
.pl{display:flex;align-items:center;gap:12px;padding:8px 2px;font-weight:800;font-size:18px}.pl i{width:34px;height:20px;border-radius:7px;background:var(--c);box-shadow:0 0 14px var(--c);flex:none}.pl small{opacity:.6;font-weight:600}.pl.e{opacity:.45}
.res{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px dashed rgba(255,255,255,.2);font-weight:800;font-size:18px}.res:last-child{border:0}.res b{font-size:30px;font-style:italic;width:42px;color:#ffd24a}.res span{flex:1}.res em{font-style:normal;font-family:ui-monospace,monospace;opacity:.85}
/* HUD */
#hud{position:fixed;inset:0;z-index:6;pointer-events:none}
#hl{position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:14px;display:flex;flex-direction:column;gap:2px;text-shadow:0 2px 10px #000}#hl b{font-size:19px;font-weight:900;font-style:italic}#hl span{font:700 18px ui-monospace,monospace;opacity:.9}
#mm{position:absolute;top:calc(env(safe-area-inset-top) + 56px);right:12px;background:rgba(15,5,40,.5);border:1px solid rgba(255,255,255,.2);border-radius:14px}
#hb{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 118px);display:flex;flex-direction:column;align-items:center;gap:6px}
#pos{font-size:34px;font-weight:900;font-style:italic;text-shadow:0 0 20px rgba(255,255,255,.4)}#pos.first{color:#ffd24a;text-shadow:0 0 24px rgba(255,210,74,.8)}
#sp{display:flex;align-items:baseline;gap:6px;text-shadow:0 2px 12px #000}#sp b{font-size:56px;font-weight:900;font-style:italic;line-height:1}#sp small{opacity:.7;font-weight:700}
#bst{position:relative;width:190px;height:16px;border-radius:9px;background:rgba(255,255,255,.15);overflow:hidden;border:1px solid rgba(255,255,255,.25)}#bst i{display:block;height:100%;background:linear-gradient(90deg,#2f8bff,#7ad7ff);width:35%}#bst span{position:absolute;inset:0;font-size:10px;font-weight:900;letter-spacing:.2em;display:grid;place-items:center}#bst.on{box-shadow:0 0 18px #6fc8ff}
#cnt{position:absolute;left:0;right:0;top:26%;text-align:center;font-size:120px;font-weight:900;font-style:italic;color:#fff;text-shadow:0 0 40px #ff3d81,0 6px 0 #7a1b66}#cnt.pop{animation:pp .7s cubic-bezier(.3,1.8,.5,1)}@keyframes pp{from{transform:scale(2.5);opacity:0}}
#ctl{position:fixed;inset:0;z-index:7;pointer-events:none}
.cb{position:absolute;pointer-events:auto;touch-action:none;width:72px;height:72px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:30px;display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.4)}
.cb.d{transform:scale(.88);background:rgba(255,255,255,.4)}.cb small{position:absolute;bottom:-16px;font-size:10px;opacity:.6;font-weight:800}
[data-k=l]{left:12px;bottom:calc(env(safe-area-inset-bottom) + 32px)}[data-k=r]{left:96px;bottom:calc(env(safe-area-inset-bottom) + 32px)}
[data-k=s]{right:12px;bottom:calc(env(safe-area-inset-bottom) + 32px);width:86px;height:86px;background:rgba(80,160,255,.35);border-color:#7ad7ff;font-size:36px}
[data-k=d]{right:110px;bottom:calc(env(safe-area-inset-bottom) + 32px);background:rgba(255,95,168,.3)}[data-k=b]{right:12px;bottom:calc(env(safe-area-inset-bottom) + 132px);background:rgba(255,80,80,.3)}
@media (hover:hover) and (pointer:fine){#ctl{display:none}#hb{bottom:calc(env(safe-area-inset-bottom) + 28px)}}
#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 64px);transform:translate(-50%,-30px) scale(.8);opacity:0;z-index:90;background:#000;color:#fff;padding:12px 20px;border-radius:22px;font-weight:700;font-size:14px;max-width:88vw;text-align:center;transition:.4s cubic-bezier(.3,1.7,.5,1);pointer-events:none}#toast.on{transform:translate(-50%,0) scale(1);opacity:1}
body[data-scr=race] #top .ib:first-child,body[data-scr=race] #ql{display:none}

/* ===================== ДИЗАЙН v2 ===================== */
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spin-a{to{--a:360deg}}
.wrap{animation:none}
#aura{position:fixed;inset:-10%;z-index:2;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle at 18% 18%,rgba(255,60,140,.30),transparent 42%),radial-gradient(circle at 88% 28%,rgba(60,140,255,.28),transparent 44%),radial-gradient(circle at 50% 105%,rgba(150,70,255,.34),transparent 55%);animation:aura 16s ease-in-out infinite alternate}
@keyframes aura{to{transform:scale(1.12) rotate(5deg);filter:hue-rotate(50deg)}}
body[data-scr=race] #aura{opacity:0}
#flash{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;background:radial-gradient(circle,transparent 38%,rgba(255,50,90,.75))}
body.boosting #vig{background:radial-gradient(ellipse at center,transparent 45%,rgba(60,160,255,.5) 100%)}
body.boosting #gl{filter:saturate(1.35) contrast(1.1)}
.card{border:1.5px solid transparent;background:linear-gradient(rgba(18,9,46,.74),rgba(18,9,46,.74)) padding-box,conic-gradient(from var(--a),#ff3d81,#7a4dff,#00d4ff,#ff9a1f,#ff3d81) border-box;animation:spin-a 7s linear infinite;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 30px rgba(122,77,255,.18)}
.logo{filter:none;line-height:.86}
.logo span{display:block;position:relative;background:linear-gradient(180deg,#fff 6%,#ff5fa8 48%,#7a4dff 95%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(255,80,170,.65))}
.logo span:before,.logo span:after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;-webkit-text-fill-color:currentColor;mix-blend-mode:screen;pointer-events:none}
.logo span:before{color:#00f0ff;animation:gl1 3.2s infinite steps(1)}.logo span:after{color:#ff2d7a;animation:gl2 3.2s infinite steps(1)}
@keyframes gl1{0%,88%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}90%{clip-path:inset(12% 0 52% 0);transform:translate(-6px,1px)}94%{clip-path:inset(62% 0 8% 0);transform:translate(5px,-1px)}97%{clip-path:inset(30% 0 40% 0);transform:translate(-3px)}}
@keyframes gl2{0%,89%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}91%{clip-path:inset(55% 0 15% 0);transform:translate(6px)}95%{clip-path:inset(8% 0 70% 0);transform:translate(-5px,1px)}98%{clip-path:inset(40% 0 30% 0);transform:translate(3px)}}
.btn{letter-spacing:.4px}.btn.pk{animation:glowp 2.4s ease-in-out infinite}@keyframes glowp{50%{box-shadow:0 12px 44px rgba(255,61,129,.85),inset 0 1.5px 0 rgba(255,255,255,.5)}}
.ib{transition:transform .2s cubic-bezier(.3,1.8,.5,1)}.ib:active{transform:scale(.9)}
.cars div{position:relative;overflow:visible}.cars div.on:after{content:"";position:absolute;inset:-7px;border-radius:20px;border:2px solid var(--c);opacity:.6;animation:ring 1.4s ease-out infinite}@keyframes ring{to{transform:scale(1.18);opacity:0}}
.pl{animation:none}.res b{text-shadow:0 0 18px rgba(255,210,74,.7)}
/* HUD */
#hl b{text-shadow:0 0 16px rgba(255,255,255,.35),0 2px 10px #000}
#hb{gap:0}#sp{position:relative;width:260px;height:150px;display:block}#sp canvas{position:absolute;inset:0;filter:drop-shadow(0 0 10px rgba(255,100,180,.35))}
#spv{position:absolute;left:0;right:0;bottom:4px;text-align:center;display:flex;align-items:baseline;justify-content:center;gap:6px}#spv b{font-size:54px;font-weight:900;font-style:italic;line-height:1}#spv small{opacity:.7;font-weight:700}
#pos{margin-bottom:-6px;z-index:2}#bst{margin-top:2px}#bst.on i{animation:flame .35s linear infinite;background:linear-gradient(90deg,#2f8bff,#7ad7ff,#fff,#7ad7ff,#2f8bff);background-size:200%}@keyframes flame{to{background-position:200%}}
#ev{position:absolute;left:0;right:0;top:30%;text-align:center;font-size:clamp(36px,11vw,58px);font-weight:900;font-style:italic;letter-spacing:1px;pointer-events:none;z-index:3}
#cnt{text-shadow:0 0 50px #ff3d81,0 0 20px #fff,0 8px 0 #7a1b66}
#tl{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 12px);transform:translateX(-50%);z-index:60;opacity:0;background:rgba(10,5,30,.78);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(12px);padding:8px 16px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.06em;white-space:nowrap;pointer-events:none}
body[data-scr=race] #tl{bottom:auto;top:calc(env(safe-area-inset-top) + 90px)}
/* галерея */
.pv{position:relative;height:150px;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.25);box-shadow:0 14px 40px rgba(0,0,0,.4)}
.pvs{position:absolute;inset:0;display:none;place-items:center;font-size:70px}.pvs.on{display:grid}#pv1{background:linear-gradient(135deg,#ff3d81,#7a4dff)}#pv2{background:linear-gradient(135deg,#00d4ff,#2f8bff)}
#fxname{min-height:16px;text-align:center;color:#ffd24a;opacity:1}
.seg{display:flex;background:rgba(0,0,0,.35);border-radius:16px;padding:4px}.seg div{flex:1;text-align:center;padding:12px 4px;border-radius:12px;font-weight:800;font-size:14px;cursor:pointer;opacity:.65;transition:.3s}.seg div.on{background:linear-gradient(135deg,#ff3d81,#ff9a1f);opacity:1}
.fxgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.fxgrid button{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-weight:800;font-size:15px;font-family:inherit;padding:12px 0;border-radius:14px;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.8,.5,1)}
.fxgrid button:active{transform:scale(.88)}.fxgrid button.on{background:linear-gradient(135deg,#ff3d81,#7a4dff);border-color:transparent;transform:scale(1.08)}

/* поправки HUD */
#hb{bottom:calc(env(safe-area-inset-bottom) + 108px)}#sp{transform:scale(.8);transform-origin:50% 100%;margin-bottom:-4px}
#pos{position:fixed;top:calc(env(safe-area-inset-top) + 12px);left:50%;transform:translateX(-50%);margin:0;font-size:30px;padding:2px 16px;border-radius:14px;background:rgba(15,5,40,.5);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px)}
#hl{max-width:40vw}