:root{
  --bg:#06060a; --card:rgba(22,22,32,.72); --line:rgba(255,255,255,.08);
  --accent:#ff5a1f; --accent2:#22d3ee; --pink:#ff2d75; --ok:#a3e635; --bad:#f43f5e; --gold:#fbbf24;
  --txt:#f5f5f7; --muted:#8b8b9a;
  --vh: var(--tg-viewport-stable-height, 100vh);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);margin:0}
body{color:var(--txt);font-family:-apple-system,"SF Pro Display",Roboto,Inter,system-ui,sans-serif;
  padding:0 14px calc(92px + env(safe-area-inset-bottom));min-height:100vh;overflow-x:hidden}
button{font-family:inherit;cursor:pointer}
.hidden{display:none !important}
.muted{color:var(--muted);font-size:12px}
.center{text-align:center}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}
b{font-weight:800}

/* ---------- Фон ---------- */
#bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(90px);opacity:.35}
.b1{background:var(--accent);top:-160px;left:-140px;animation:float1 14s ease-in-out infinite}
.b2{background:#7c3aed;top:30%;right:-200px;animation:float2 18s ease-in-out infinite}
.b3{background:var(--accent2);bottom:-220px;left:10%;opacity:.22;animation:float1 22s ease-in-out infinite reverse}
.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:32px 32px;
  mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
@keyframes float1{50%{transform:translate(80px,60px) scale(1.15)}}
@keyframes float2{50%{transform:translate(-90px,-40px) scale(.9)}}

/* ---------- Шапка ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  margin:0 -14px 12px;padding:12px 14px;background:rgba(6,6,10,.6);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{font-weight:900;font-size:18px;letter-spacing:2px;color:#fff;
  text-shadow:0 0 12px rgba(255,90,31,.8),0 0 28px rgba(255,90,31,.4);animation:flicker 6s infinite}
.logo span{display:block;font-size:10px;letter-spacing:6px;color:var(--accent);text-shadow:0 0 10px var(--accent)}
@keyframes flicker{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.55}}
.pills{display:flex;gap:6px;align-items:center}
.pill{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:999px;padding:6px 10px;font-size:14px;color:#fff}
.pill.lvl{background:linear-gradient(135deg,#7c3aed,#db2777);border:none}
.pill.lvl small{font-size:9px;opacity:.8}
.pill.icon{padding:6px 8px}
.pill.bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.25)}}
.coin-ico{width:16px;height:16px;border-radius:50%;display:inline-block;
  background:radial-gradient(circle at 35% 30%,#fff7c2,#fbbf24 45%,#b45309);box-shadow:0 0 8px rgba(251,191,36,.7)}

/* ---------- Карточки и кнопки ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px;margin-bottom:12px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.card-title{font-size:15px;margin:0 0 10px}
.section-title{font-size:15px;margin:18px 2px 10px}
.btn{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--accent),var(--pink));color:#fff;border:none;
  border-radius:14px;padding:13px 16px;font-weight:800;font-size:15px;width:100%;margin-top:8px;
  box-shadow:0 6px 20px rgba(255,60,60,.35);transition:transform .1s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;box-shadow:none}
.btn.small{width:auto;padding:8px 12px;font-size:13px;margin:0}
.btn.ghost{background:rgba(255,255,255,.08);box-shadow:none}
.btn.cyan{background:linear-gradient(135deg,#06b6d4,#3b82f6);box-shadow:0 6px 20px rgba(34,211,238,.3)}
.btn.gold{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.btn.shine::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);animation:shine 2.6s infinite}
@keyframes shine{60%,100%{left:130%}}
input,select{background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;border-radius:12px;
  padding:11px;width:100%;font-size:14px;margin-top:6px;font-family:inherit}
select option{background:#16161f}

.seg{display:flex;background:rgba(255,255,255,.05);border-radius:14px;padding:4px;gap:4px;margin-bottom:12px}
.seg button{flex:1;background:none;border:none;color:var(--muted);padding:9px;border-radius:10px;font-weight:700;font-size:13px}
.seg button.on{background:linear-gradient(135deg,var(--accent),var(--pink));color:#fff;box-shadow:0 4px 14px rgba(255,60,60,.3)}

.bar{height:10px;background:rgba(255,255,255,.07);border-radius:6px;overflow:hidden;margin-top:8px;position:relative}
.bar>i{display:block;height:100%;width:0;border-radius:6px;transition:width .6s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}
.bar>i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-100%);animation:shimmer 2.2s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.bar.energy>i{background:linear-gradient(90deg,#22d3ee,#a3e635)}

/* ---------- Вкладки ---------- */
.tab{animation:tabin .35s cubic-bezier(.2,.8,.2,1)}
@keyframes tabin{from{opacity:0;transform:translateY(12px)}}
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;justify-content:space-around;
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));background:rgba(10,10,16,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.tabs button{position:relative;flex:1;background:none;border:none;color:var(--muted);display:flex;flex-direction:column;
  align-items:center;gap:2px;font-size:10px;font-weight:700;padding:4px 0;transition:color .2s}
.tabs button b{font-size:20px;transition:transform .25s,filter .25s;filter:grayscale(.7)}
.tabs button.on{color:#fff}
.tabs button.on b{transform:translateY(-3px) scale(1.15);filter:drop-shadow(0 0 8px rgba(255,90,31,.9))}
.tabs button.on::before{content:"";position:absolute;top:-9px;width:26px;height:3px;border-radius:3px;
  background:var(--accent);box-shadow:0 0 12px var(--accent)}
.tabs .dot{position:absolute;top:2px;right:calc(50% - 16px);width:9px;height:9px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 8px var(--pink);animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:scale(1.4)}}

/* ---------- Байк SVG ---------- */
.bike-svg{width:100%;height:auto;display:block;overflow:visible}
.bike-svg .wheel{transform-box:fill-box;transform-origin:center}
.spin .bike-svg .wheel,.bike-svg.spin .wheel{animation:spin .3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bike-svg .smoke{transform-box:fill-box;transform-origin:center;opacity:0;animation:puff 2.4s ease-out infinite}
.bike-svg .smoke.s1{animation-delay:.8s}.bike-svg .smoke.s2{animation-delay:1.6s}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.3)}15%{opacity:.3}100%{opacity:0;transform:translate(-50px,-28px) scale(2.8)}}
.bike-svg .lamp-glow{animation:lamp 3s ease-in-out infinite}
@keyframes lamp{50%{opacity:.3}}
.bike-svg .underglow{animation:glow 2s ease-in-out infinite}
@keyframes glow{50%{opacity:.45}}
.bike-svg .beam{opacity:.0;transition:opacity .4s}
.stage .bike-svg .beam,.race-scene .bike-svg .beam{opacity:1}
.rev .bike-body{animation:shake .06s linear infinite}
.rev .bike-svg .smoke{animation-duration:.7s;fill:#a1a1aa}
@keyframes shake{25%{transform:translate(1px,-1px)}75%{transform:translate(-1px,1px)}}

/* ---------- Гонки: hero ---------- */
.hero{display:flex;align-items:center;gap:8px;padding:10px 14px;overflow:hidden;position:relative}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 80%,var(--hero-c,#ff5a1f) 0,transparent 60%);opacity:.25}
.hero-bike{flex:1.3;position:relative;animation:idle 1.6s ease-in-out infinite}
.hero-info{flex:1;position:relative;text-align:right}
.hero-name{font-size:18px;font-weight:900;margin:2px 0 8px;word-break:break-word;line-height:1.15}
@keyframes idle{50%{transform:translateY(-2px)}}
.rating-badge{display:inline-flex;flex-direction:column;align-items:center;padding:6px 12px;border-radius:12px;
  background:linear-gradient(135deg,rgba(255,90,31,.25),rgba(255,45,117,.25));border:1px solid rgba(255,90,31,.5)}
.rating-badge small{font-size:9px;color:var(--muted);letter-spacing:1px}
.rating-badge b{font-size:22px;color:#fff;text-shadow:0 0 12px var(--accent)}

.energy-title{font-size:14px}
.bolt{display:inline-block;animation:bolt 2s infinite}
@keyframes bolt{0%,90%,100%{transform:none}93%{transform:scale(1.4) rotate(-10deg)}}

.crate-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;color:#fff;font:inherit;
  background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(239,68,68,.12));border-color:rgba(251,191,36,.35)}
.crate-card:disabled{filter:saturate(.3);opacity:.75}
.crate-mini{font-size:34px}
.crate-card.ready .crate-mini{animation:wiggle 1.4s infinite}
@keyframes wiggle{0%,60%,100%{transform:none}70%{transform:rotate(-12deg) scale(1.1)}80%{transform:rotate(12deg) scale(1.1)}90%{transform:rotate(-6deg)}}
.crate-text{flex:1;display:flex;flex-direction:column;gap:2px}
.crate-cta{font-weight:800;font-size:13px;padding:8px 12px;border-radius:10px;background:linear-gradient(135deg,#f59e0b,#ef4444)}
.crate-card:disabled .crate-cta{background:rgba(255,255,255,.08)}

.tracks{display:flex;flex-direction:column;gap:10px}
.track{position:relative;overflow:hidden;border-radius:20px;padding:16px;border:1px solid var(--line);color:#fff;text-align:left;
  font:inherit;display:flex;align-items:center;gap:12px;min-height:88px;transition:transform .15s}
.track:active{transform:scale(.98)}
.track:disabled{opacity:.5}
.track::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 30px,rgba(255,255,255,.04) 30px 60px);
  animation:stripes 3s linear infinite}
@keyframes stripes{to{background-position:68px 0}}
.track.drag{background:linear-gradient(120deg,#7c2d12,#ea580c 60%,#facc15)}
.track.city{background:linear-gradient(120deg,#0c4a6e,#0891b2 60%,#22d3ee)}
.track.highway{background:linear-gradient(120deg,#1e1b4b,#6d28d9 60%,#db2777)}
.track .ti{font-size:38px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));position:relative;z-index:1}
.track .tt{flex:1;position:relative;z-index:1}
.track .tt b{font-size:17px;display:block}
.track .tt span{font-size:12px;opacity:.85}
.track .go{position:relative;z-index:1;background:rgba(0,0,0,.35);border-radius:12px;padding:10px 12px;font-weight:900}
.chance{display:inline-block;margin-top:4px;font-size:11px;padding:2px 8px;border-radius:8px;background:rgba(0,0,0,.35)}

/* ---------- Гараж ---------- */
.stage{position:relative;height:270px;border-radius:24px;overflow:hidden;margin-bottom:12px;border:1px solid var(--line)}
.stage .wall{position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 22px),
  repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 2px,transparent 2px 46px),
  linear-gradient(#1a1622,#0b0a10)}
.neon-sign{position:absolute;top:16px;left:0;right:0;text-align:center;font-weight:900;font-size:30px;letter-spacing:6px;
  color:#ffe4ec;text-shadow:0 0 6px #ff2d75,0 0 16px #ff2d75,0 0 36px #ff2d75,0 0 60px #ff2d75;animation:flicker 5s infinite}
.neon-sub{position:absolute;top:54px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:8px;
  color:#cffafe;text-shadow:0 0 6px #22d3ee,0 0 16px #22d3ee}
.spot{position:absolute;top:-20px;left:50%;width:340px;height:300px;transform:translateX(-50%);
  background:radial-gradient(ellipse at top,rgba(255,244,214,.28),rgba(255,244,214,.06) 55%,transparent 70%);
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);animation:spot 4s ease-in-out infinite}
@keyframes spot{50%{opacity:.75}}
.floor{position:absolute;left:0;right:0;bottom:0;height:86px;background:linear-gradient(#0e0d14,#040406);overflow:hidden}
.floor i{position:absolute;left:-50%;right:-50%;top:0;height:200%;transform:perspective(160px) rotateX(55deg);transform-origin:top;
  background-image:linear-gradient(rgba(34,211,238,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.35) 1px,transparent 1px);
  background-size:36px 36px}
.stage.rev .floor i{animation:floormove .25s linear infinite}
@keyframes floormove{to{background-position:0 36px}}
.stage-bike{position:absolute;left:0;right:0;margin:0 auto;bottom:26px;width:92%;max-width:420px;z-index:2;animation:idle 1.6s ease-in-out infinite}
.stage-refl{position:absolute;left:50%;bottom:-118px;width:92%;max-width:420px;transform:translateX(-50%) scaleY(-1);opacity:.18;
  filter:blur(1.5px);mask-image:linear-gradient(to top,#000,transparent 55%);-webkit-mask-image:linear-gradient(to top,#000,transparent 55%)}
.rev-btn{position:absolute;right:10px;top:84px;z-index:3;border:none;border-radius:12px;padding:8px 12px;font-weight:900;font-size:12px;
  color:#fff;background:rgba(239,68,68,.25);border:1px solid rgba(239,68,68,.6);box-shadow:0 0 16px rgba(239,68,68,.35);backdrop-filter:blur(6px)}
.stage.rev{animation:stageshake .08s linear infinite}
@keyframes stageshake{50%{transform:translate(1px,0)}}
.bike-name{font-size:20px;font-weight:900}
.perk{margin:10px 0 2px;font-size:12px;padding:8px 10px;border-radius:10px;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.25);color:#cffafe}

.stats{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.stat-row{display:grid;grid-template-columns:92px 1fr 34px;align-items:center;gap:8px;font-size:12px}
.stat-row .bar{margin:0;height:8px}
.stat-row b{text-align:right;font-size:13px}
.st-speed>i{background:linear-gradient(90deg,#f97316,#facc15)}
.st-accel>i{background:linear-gradient(90deg,#ef4444,#f472b6)}
.st-handling>i{background:linear-gradient(90deg,#06b6d4,#a3e635)}
.st-style>i{background:linear-gradient(90deg,#8b5cf6,#ec4899)}

.upg{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.upg:last-child{border:none}
.upg .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:rgba(255,255,255,.06)}
.upg .info{flex:1}
.upg .info b{font-size:14px}
.upg .lvlbar{height:4px;background:rgba(255,255,255,.07);border-radius:4px;margin-top:5px;overflow:hidden}
.upg .lvlbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--ok));transition:width .5s}
.upg button{min-width:86px;border:none;border-radius:12px;padding:9px 10px;font-weight:800;font-size:13px;color:#04222b;
  background:linear-gradient(135deg,#67e8f9,#22d3ee);box-shadow:0 4px 14px rgba(34,211,238,.3)}
.upg button:disabled{opacity:.35;box-shadow:none}
.upg.pop{animation:upgpop .5s}
@keyframes upgpop{30%{background:rgba(34,211,238,.15)}}

.hscroll{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory}
.hscroll::-webkit-scrollbar{display:none}
.mybike{flex:0 0 150px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:8px;color:#fff;text-align:left;font:inherit}
.mybike.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 20px rgba(255,90,31,.35)}
.mybike b{font-size:13px;display:block;margin-top:4px}
.mybike span{font-size:11px;color:var(--muted)}

.shop{display:flex;flex-direction:column;gap:12px}
.shop-item{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--card);padding:12px}
.shop-item::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,var(--c),transparent 65%);opacity:.18}
.shop-item .tier{position:absolute;top:10px;left:10px;z-index:2}
/* Редкость: базовый — серый, серебро, золото, легенда — переливается */
.tier-badge{display:inline-block;font-size:9px;font-weight:900;letter-spacing:1.2px;padding:3px 8px;border-radius:7px;vertical-align:middle}
.tier-badge.t1{background:#3f3f46;color:#d4d4d8}
.tier-badge.t2{background:linear-gradient(135deg,#f8fafc,#94a3b8 50%,#e2e8f0);color:#1e293b;box-shadow:0 0 10px rgba(226,232,240,.35)}
.tier-badge.t3{background:linear-gradient(135deg,#fde68a,#f59e0b 50%,#fcd34d);color:#451a03;box-shadow:0 0 12px rgba(251,191,36,.5)}
.tier-badge.t4{background:linear-gradient(90deg,#f43f5e,#a855f7,#22d3ee,#a3e635,#f43f5e);background-size:300% 100%;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 0 14px rgba(168,85,247,.7);animation:legend 3s linear infinite}
@keyframes legend{to{background-position:300% 0}}
.shop-item.tier-2{border-color:rgba(226,232,240,.3)}
.shop-item.tier-3{border-color:rgba(251,191,36,.45);box-shadow:0 0 18px rgba(251,191,36,.12)}
.shop-item.tier-4{border:1px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,
  linear-gradient(90deg,#f43f5e,#a855f7,#22d3ee,#a3e635,#f43f5e) border-box;background-size:auto,300% 100%;
  animation:legend 4s linear infinite;box-shadow:0 0 24px rgba(168,85,247,.25)}
.mybike.tier-3{border-color:rgba(251,191,36,.45)}
.mybike.tier-4{border-color:rgba(168,85,247,.6)}
.brand{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.bike-name small,.hero-name small{display:block;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.shop-seg{overflow-x:auto}
.shop-seg button{font-size:10px;letter-spacing:.5px;white-space:nowrap;padding:9px 6px}
.shop-seg button.on.t2{background:linear-gradient(135deg,#e2e8f0,#64748b);color:#0f172a}
.shop-seg button.on.t3{background:linear-gradient(135deg,#fcd34d,#d97706);color:#451a03}
.shop-seg button.on.t4{background:linear-gradient(90deg,#f43f5e,#a855f7,#22d3ee);background-size:200% 100%;animation:legend 3s linear infinite}
.shop-item .pic{position:relative;max-width:260px;margin:0 auto;padding:8px 0 0}
.shop-item.locked .pic{filter:brightness(.85)}
.shop-item .lock{white-space:nowrap;position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);font-size:13px;font-weight:800;padding:6px 12px;
  border-radius:10px;background:rgba(0,0,0,.65);border:1px solid var(--line);z-index:2}
.shop-item .meta{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.shop-item .meta b{font-size:16px}
.price{display:flex;align-items:center;gap:5px;font-weight:900;font-size:16px;color:var(--gold)}
.mini-stats{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin:8px 0}
.mini-stats div{font-size:10px;color:var(--muted)}
.mini-stats .bar{height:5px;margin-top:3px}

/* ---------- Игры ---------- */
.games{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.game{position:relative;overflow:hidden;border-radius:20px;padding:14px 12px;color:#fff;text-align:left;font:inherit;border:1px solid var(--line);min-height:160px;
  display:flex;flex-direction:column;justify-content:space-between}
.game::after{content:"";position:absolute;width:140px;height:140px;right:-50px;top:-50px;border-radius:50%;background:rgba(255,255,255,.12)}
.game .gi{font-size:40px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4));animation:idle 2s ease-in-out infinite}
.game b{font-size:15px;display:block}
.game .gd{font-size:11px;opacity:.85;margin:4px 0 6px;line-height:1.3}
.game .gbest{font-size:11px;font-weight:800;background:rgba(0,0,0,.3);border-radius:8px;padding:3px 8px;display:inline-block}
.game .gtop{position:absolute;top:10px;right:10px;z-index:1;border:none;background:rgba(0,0,0,.35);color:#fff;border-radius:10px;padding:5px 8px;font-size:12px}
.g-reaction{background:linear-gradient(135deg,#14532d,#16a34a 60%,#84cc16)}
.g-shift{background:linear-gradient(135deg,#1e3a8a,#2563eb 60%,#22d3ee)}
.g-traffic{background:linear-gradient(135deg,#7f1d1d,#dc2626 60%,#fb923c)}
.g-wheelie{background:linear-gradient(135deg,#581c87,#9333ea 60%,#ec4899)}

.duel{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.duel:last-child{border:none}
.duel .dt{flex:1}
.duel .win{color:var(--ok);font-weight:800}
.duel .lose{color:var(--bad);font-weight:800}

/* ---------- Райдер ---------- */
.rider-card{text-align:center;padding-top:20px;background:linear-gradient(180deg,rgba(124,58,237,.18),var(--card))}
.avatar-wrap{position:relative;width:120px;height:120px;margin:0 auto 8px}
.lvl-ring{position:absolute;inset:0;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:7}
.ring-fg{fill:none;stroke:url(#none);stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3;
  transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 6px var(--accent))}
.avatar{position:absolute;inset:12px;border-radius:50%;display:grid;place-items:center;font-size:44px;overflow:hidden;
  background:radial-gradient(circle at 30% 30%,#3b2a5c,#140f22)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-lvl{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#7c3aed,#db2777);
  border-radius:10px;padding:2px 10px;font-weight:900;font-size:13px;box-shadow:0 0 12px rgba(219,39,119,.6)}
.rider-name{font-size:20px;font-weight:900}
.rider-title{display:inline-block;margin:6px 0;font-size:12px;font-weight:800;letter-spacing:1px;padding:4px 12px;border-radius:999px;
  background:linear-gradient(135deg,rgba(251,191,36,.25),rgba(239,68,68,.25));border:1px solid rgba(251,191,36,.5);color:#fde68a}
.rider-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}
.rider-nums div{background:rgba(255,255,255,.04);border-radius:12px;padding:8px 2px}
.rider-nums b{display:block;font-size:17px}
.rider-nums span{font-size:10px;color:var(--muted)}
.points{font-weight:900;font-size:13px;padding:4px 10px;border-radius:10px;background:rgba(255,255,255,.06)}
.points.has{background:linear-gradient(135deg,var(--accent),var(--pink));animation:pulse 1.4s infinite}
.rstat{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.rstat:last-child{border:none}
.rstat .ico{font-size:24px;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.06)}
.rstat .info{flex:1}
.rstat .info b{font-size:14px}
.rstat .pips{display:flex;gap:2px;margin-top:5px}
.rstat .pips i{flex:1;height:5px;border-radius:2px;background:rgba(255,255,255,.08)}
.rstat .pips i.on{background:linear-gradient(90deg,#a855f7,#ec4899);box-shadow:0 0 6px rgba(236,72,153,.6)}
.rstat button{width:38px;height:38px;border-radius:12px;border:none;font-size:20px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#a855f7,#ec4899);box-shadow:0 4px 14px rgba(168,85,247,.4)}
.rstat button:disabled{opacity:.25;box-shadow:none}

/* ---------- Чат ---------- */
.chat-card{display:flex;flex-direction:column;height:calc(var(--vh) - 190px);min-height:340px;padding:10px}
.msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 2px}
.msg{max-width:84%;background:rgba(255,255,255,.07);border-radius:16px 16px 16px 4px;padding:7px 11px;font-size:14px;
  word-wrap:break-word;animation:msgin .25s ease-out}
@keyframes msgin{from{opacity:0;transform:translateY(8px) scale(.97)}}
.msg.mine{align-self:flex-end;background:linear-gradient(135deg,rgba(255,90,31,.45),rgba(255,45,117,.45));border-radius:16px 16px 4px 16px}
.msg.system{align-self:center;max-width:94%;text-align:center;font-size:12px;font-weight:700;border-radius:12px;
  background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(34,211,238,.2));border:1px solid rgba(124,58,237,.4)}
.msg .who{font-size:11px;color:var(--accent2);font-weight:800}
.msg .t{font-size:10px;color:var(--muted);margin-left:6px}
.chat-empty{margin:auto;text-align:center;color:var(--muted);font-size:13px}
.send{display:flex;gap:6px;margin-top:8px}
.send input{margin:0}
.send .btn{width:52px;margin:0;padding:0}

/* ---------- Топ ---------- */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:10px 0 14px;min-height:150px}
.pod{flex:1;max-width:120px;text-align:center}
.pod .pname{font-size:12px;font-weight:800;margin:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod .pblock{border-radius:14px 14px 4px 4px;display:grid;place-items:center;font-size:26px;font-weight:900;color:#fff;
  animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.pod.p1 .pblock{height:110px;background:linear-gradient(#fbbf24,#b45309);box-shadow:0 0 28px rgba(251,191,36,.45)}
.pod.p2 .pblock{height:80px;background:linear-gradient(#e5e7eb,#6b7280);animation-delay:.1s}
.pod.p3 .pblock{height:60px;background:linear-gradient(#fb923c,#9a3412);animation-delay:.2s}
@keyframes rise{from{transform:scaleY(0);transform-origin:bottom}}
.pod .pbike{width:90%;margin:0 auto}
.lb{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.lb:last-child{border:none}
.lb .pos{width:24px;text-align:center;font-weight:900;color:var(--muted)}
.lb .dotc{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.lb .nm{flex:1;min-width:0}
.lb .nm div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb .nm span{font-size:11px;color:var(--muted)}
.lb .duel-btn{border:none;border-radius:10px;padding:6px 8px;font-size:14px;background:rgba(239,68,68,.2);border:1px solid rgba(239,68,68,.5);color:#fff}
.lb.me{background:rgba(255,90,31,.1);border-radius:10px;padding-left:4px}

/* ---------- Оверлей ---------- */
#overlay{position:fixed;inset:0;z-index:50;background:rgba(3,3,6,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;flex-direction:column;animation:fadein .25s}
@keyframes fadein{from{opacity:0}}
.ov-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top))}
.ov-head b{font-size:17px}
.ov-close{border:none;background:rgba(255,255,255,.1);color:#fff;width:36px;height:36px;border-radius:12px;font-size:16px}
.ov-body{flex:1;position:relative;overflow:hidden}
.ov-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}
.modal{margin:auto;width:calc(100% - 32px);max-width:420px;background:#14141c;border:1px solid var(--line);border-radius:22px;padding:18px;
  animation:modalin .3s cubic-bezier(.2,.8,.2,1)}
@keyframes modalin{from{opacity:0;transform:translateY(30px) scale(.96)}}

.rays{position:absolute;left:50%;top:42%;width:900px;height:900px;margin:-450px 0 0 -450px;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,214,102,.16) 0 10deg,transparent 10deg 20deg);
  mask-image:radial-gradient(circle,#000 10%,transparent 60%);-webkit-mask-image:radial-gradient(circle,#000 10%,transparent 60%);
  animation:raysspin 14s linear infinite}
@keyframes raysspin{to{transform:rotate(360deg)}}
.big-title{font-size:38px;font-weight:900;letter-spacing:1px;margin:8px 0;animation:titlepop .6s cubic-bezier(.2,1.6,.4,1) both}
.big-title.win{background:linear-gradient(135deg,#fde047,#f97316,#ef4444);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(251,191,36,.55))}
.big-title.lose{color:#a1a1aa}
@keyframes titlepop{from{opacity:0;transform:scale(.3)}}
.reward-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.reward{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-weight:900;font-size:16px;
  animation:titlepop .5s cubic-bezier(.2,1.6,.4,1) both}
.reward small{display:block;font-size:10px;color:var(--muted);font-weight:700}
.reward.gold{border-color:rgba(251,191,36,.6);box-shadow:0 0 18px rgba(251,191,36,.3)}

/* Сцена гонки */
.race-scene{position:absolute;inset:0;overflow:hidden}
.race-scene .sky{position:absolute;inset:0}
.rs-drag .sky{background:linear-gradient(#1e1035,#7c2d12 55%,#f97316)}
.rs-city .sky{background:linear-gradient(#020617,#0c4a6e 60%,#0e7490)}
.rs-highway .sky{background:linear-gradient(#05030f,#2e1065 60%,#831843)}
.race-scene .orb{position:absolute;top:12%;right:14%;width:70px;height:70px;border-radius:50%}
.rs-drag .orb{background:radial-gradient(#fef3c7,#f59e0b);box-shadow:0 0 60px #f59e0b;top:38%;width:110px;height:110px}
.rs-city .orb{display:none}
.rs-highway .orb{background:radial-gradient(circle at 35% 35%,#fff,#c7d2fe);box-shadow:0 0 50px #a5b4fc}
.layer{position:absolute;left:0;right:0;background-repeat:repeat-x;animation:scrollx linear infinite}
@keyframes scrollx{to{background-position-x:-800px}}
.layer.far{bottom:42%;height:150px;opacity:.55;animation-duration:9s}
.layer.near{bottom:42%;height:110px;animation-duration:3.2s}
.road{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(#26262e,#0d0d12)}
.road::before{content:"";position:absolute;left:0;right:0;top:46%;height:5px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 60px,transparent 60px 120px);animation:dash .25s linear infinite}
.road::after{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(90deg,#ef4444 0 30px,#fafafa 30px 60px);
  animation:dash .25s linear infinite}
@keyframes dash{to{background-position-x:-120px}}
.race-scene.paused .layer,.race-scene.paused .road::before,.race-scene.paused .road::after{animation-play-state:paused}
.racer{position:absolute;width:52%;max-width:300px;transition:none}
.racer.rival{bottom:calc(42% - 30px);opacity:.92;filter:brightness(.85)}
.racer.me{bottom:calc(140px + env(safe-area-inset-bottom));z-index:2}
.racer .tag{position:absolute;top:-6px;left:30%;font-size:11px;font-weight:900;padding:3px 8px;border-radius:8px;background:rgba(0,0,0,.6);white-space:nowrap}
.racer.me .tag{background:var(--accent)}
.speedlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(255,255,255,.06) 22px 23px);
  mask-image:linear-gradient(90deg,#000,transparent 40%,transparent 60%,#000);-webkit-mask-image:linear-gradient(90deg,#000,transparent 40%,transparent 60%,#000)}
.race-hud{position:absolute;top:12px;left:0;right:0;text-align:center;z-index:5}
.race-hud .tname{font-weight:900;font-size:18px;text-shadow:0 2px 10px #000}
.race-lights{display:flex;gap:10px;justify-content:center;margin-top:10px}
.race-lights i{width:26px;height:26px;border-radius:50%;background:#1f1f27;border:2px solid #000}
.race-lights i.r{background:#ef4444;box-shadow:0 0 18px #ef4444}
.race-lights i.g{background:#22c55e;box-shadow:0 0 22px #22c55e}
.finish-line{position:absolute;bottom:0;height:42%;width:26px;right:-40px;z-index:1;
  background:repeating-conic-gradient(#fff 0 25%,#111 0 50%) 0 0/13px 13px}
.result-panel{position:absolute;left:0;right:0;top:calc(10px + env(safe-area-inset-top));z-index:10;padding:10px 16px;text-align:center;
  animation:slidedown .45s cubic-bezier(.2,.8,.2,1)}
.result-panel .rays{top:30%}
.result-panel .big-title,.result-panel .vs,.result-panel .reward-row{position:relative;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.result-actions{position:absolute;left:0;right:0;bottom:0;z-index:10;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,rgba(0,0,0,.85) 30%);animation:slideup .45s cubic-bezier(.2,.8,.2,1)}
.result-actions .btn{margin-top:6px}
@keyframes slideup{from{transform:translateY(100%)}}
@keyframes slidedown{from{transform:translateY(-60%);opacity:0}}
.vs{font-size:14px;color:#d4d4d8;margin-top:-4px}
.vs b{font-size:18px}

/* Ящик */
.crate{position:relative;width:170px;height:150px;margin:20px auto;cursor:pointer}
.crate .box{position:absolute;bottom:0;left:0;right:0;height:105px;border-radius:14px;
  background:linear-gradient(135deg,#f59e0b,#b45309);border:3px solid #78350f;box-shadow:0 20px 50px rgba(245,158,11,.4),inset 0 -12px 0 rgba(0,0,0,.2)}
.crate .box::before{content:"HESOYAM";position:absolute;z-index:1;top:34px;left:18px;right:18px;padding:5px 0;border-radius:8px;text-align:center;font-weight:900;letter-spacing:3px;color:#fde68a;background:#78350f;box-shadow:0 0 12px rgba(0,0,0,.4)}
.crate .band{position:absolute;top:0;bottom:0;left:50%;width:26px;margin-left:-13px;background:linear-gradient(#fde047,#ca8a04)}
.crate .lid{position:absolute;bottom:95px;left:-8px;right:-8px;height:40px;border-radius:12px;background:linear-gradient(135deg,#fbbf24,#d97706);
  border:3px solid #78350f;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s}
.crate .lid::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:26px;margin-left:-13px;background:linear-gradient(#fde047,#ca8a04)}
.crate.shake{animation:crateshake .5s}
@keyframes crateshake{20%{transform:rotate(-8deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(5deg)}}
.crate.open .lid{transform:translateY(-140px) rotate(-35deg);opacity:0}
.crate .burst{position:absolute;left:50%;top:40%;width:10px;height:10px;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 80px 50px #fde047}
.crate.open .burst{animation:burst .8s ease-out}
@keyframes burst{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(4)}}

/* Мини-игры: общий */
.game-host{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
.countdown{position:absolute;inset:0;display:grid;place-items:center;font-size:110px;font-weight:900;color:#fff;z-index:5;pointer-events:none;
  text-shadow:0 0 30px var(--accent)}
.countdown.pop{animation:cd .6s cubic-bezier(.2,1.6,.4,1)}
.countdown.go{color:var(--ok);text-shadow:0 0 40px var(--ok);animation:cd .45s}
@keyframes cd{from{transform:scale(2.4);opacity:0}}
.rx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transition:background .1s}
.game-host.go .rx{background:radial-gradient(circle,rgba(34,197,94,.35),transparent 70%)}
.gantry{display:flex;gap:10px;padding:14px;border-radius:16px;background:#0b0b0f;border:2px solid #27272a}
.lpod{display:flex;flex-direction:column;gap:8px;padding:6px;border-radius:10px;background:#18181b}
.lpod i{width:34px;height:34px;border-radius:50%;background:#27272a;transition:background .05s}
.lpod.red i{background:#ef4444;box-shadow:0 0 22px #ef4444}
.lpod.green i{background:#22c55e;box-shadow:0 0 26px #22c55e}
.rx-hint{font-size:26px;font-weight:900}
.rx-sub{color:var(--muted);font-size:13px}

/* ---------- Тосты и эффекты ---------- */
#toasts{position:fixed;top:calc(64px + env(safe-area-inset-top));left:0;right:0;z-index:60;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{background:rgba(20,20,28,.95);border:1px solid var(--line);border-radius:14px;padding:10px 16px;font-size:14px;font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.5);animation:toastin .35s cubic-bezier(.2,1.4,.4,1),toastout .3s 2.6s forwards;max-width:90%}
.toast.err{border-color:rgba(244,63,94,.6)}
.toast.good{border-color:rgba(163,230,53,.6)}
@keyframes toastin{from{opacity:0;transform:translateY(-20px) scale(.9)}}
@keyframes toastout{to{opacity:0;transform:translateY(-10px)}}
#fx{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.fx-coin{position:absolute;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff7c2,#fbbf24 45%,#b45309);box-shadow:0 0 10px rgba(251,191,36,.8)}
.fx-spark{position:absolute;width:6px;height:6px;border-radius:50%}
.confetti{position:absolute;top:-20px;width:9px;height:14px;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(var(--r))}}
.float-num{position:absolute;font-weight:900;font-size:18px;color:var(--ok);text-shadow:0 0 10px rgba(163,230,53,.7);animation:floatup 1s ease-out forwards}
@keyframes floatup{to{transform:translateY(-50px);opacity:0}}
.levelup{position:fixed;inset:0;z-index:65;display:grid;place-items:center;pointer-events:none}
.levelup div{font-size:46px;font-weight:900;text-align:center;line-height:1;background:linear-gradient(135deg,#fde047,#f472b6,#a855f7);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(244,114,182,.7));
  animation:lvlup 2.2s cubic-bezier(.2,1.4,.4,1) forwards}
.levelup small{display:block;font-size:18px;margin-top:6px}
@keyframes lvlup{0%{transform:scale(.2);opacity:0}20%{transform:scale(1.1);opacity:1}80%{transform:scale(1);opacity:1}100%{transform:scale(1.4);opacity:0}}

/* Карусель стартовых байков */
.starter{flex:1;display:flex;flex-direction:column;padding:10px 16px calc(16px + env(safe-area-inset-bottom));position:relative;overflow:hidden}
.starter h2{text-align:center;margin:6px 0 2px;font-size:22px}
.starter .stage{height:230px;margin:10px 0}
.starter .nav{display:flex;justify-content:space-between;align-items:center;gap:10px}
.starter .nav button{width:44px;height:44px;border-radius:14px;border:none;background:rgba(255,255,255,.08);color:#fff;font-size:22px}
.starter .dots{display:flex;gap:6px;justify-content:center}
.starter .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .3s}
.starter .dots i.on{width:22px;border-radius:4px;background:var(--accent)}
.slide-in{animation:slidein .35s cubic-bezier(.2,.8,.2,1)}
@keyframes slidein{from{opacity:0;transform:translateX(40px)}}

/* Реальные ТТХ */
.specs{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 8px;position:relative}
.specs span{font-size:11px;font-weight:700;color:#e4e4e7;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:8px;padding:3px 7px}
.perk .specs{margin-top:0}
.starter .specs{justify-content:center}

/* Картинки моделей (static/bikes/*) вместо векторного рисунка */
.bike-photo{position:relative;width:100%;aspect-ratio:400/230;display:flex;align-items:flex-end;justify-content:center}
.bike-photo img{position:relative;z-index:1;max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.55));user-select:none;-webkit-user-drag:none}
.bike-photo .photo-shadow{position:absolute;left:8%;right:8%;bottom:2%;height:8%;border-radius:50%;background:#000;opacity:.6;filter:blur(6px)}
.bike-photo .photo-glow{position:absolute;left:10%;right:10%;bottom:0;height:14%;border-radius:50%;background:var(--glow);filter:blur(14px);opacity:.85;animation:glow 2s ease-in-out infinite}
.rev .bike-photo img,.spin .bike-photo img{animation:shake .06s linear infinite}
.pill.off{opacity:.45}
.modal h4{margin:14px 0 4px;font-size:13px}
.modal a{color:var(--accent2);text-decoration:none}
/* Фото байка в гараже чуть меньше, чтобы неоновая вывеска оставалась видна */
.stage-bike:has(.bike-photo),.stage-refl:has(.bike-photo){width:84%}

/* ---------- Персонаж и гардероб ---------- */
.rider-svg{display:block;width:100%;height:100%}
.rider-stage-card{text-align:center;background:radial-gradient(ellipse at 50% 85%,rgba(255,90,31,.25),transparent 60%),
  linear-gradient(#1a1622,#0b0a10);overflow:hidden}
.rider-stage{height:300px;position:relative}
.rider-stage::before{content:"";position:absolute;left:15%;right:15%;bottom:0;height:36px;border-radius:50%;
  background:radial-gradient(rgba(34,211,238,.35),transparent 70%)}
.rider-stage .rider-svg{position:relative;animation:breathe 3s ease-in-out infinite}
.rider-stage.pop{animation:upgpop .6s}
@keyframes breathe{50%{transform:translateY(-2px) scale(1.01)}}
.outfit-bonus{font-size:12px;color:var(--muted)}
.wardrobe{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.ward-item{display:flex;flex-direction:column;gap:4px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:10px;font-size:13px}
.ward-item.on{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok),0 0 16px rgba(163,230,53,.25)}
.ward-item.tier-3{border-color:rgba(251,191,36,.45)}
.ward-item.tier-4{border-color:rgba(168,85,247,.6);box-shadow:0 0 18px rgba(168,85,247,.25)}
.ward-pic{width:100%;height:110px;border-radius:12px;background:radial-gradient(circle at 50% 60%,#2a2338,#121019);margin-bottom:4px}
.ward-item .btn{width:100%;margin-top:4px}
.stage-rider{position:absolute;left:2%;bottom:14px;width:22%;height:62%;z-index:3;pointer-events:none;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.6))}
.rider-svg .propeller{transform-box:fill-box;transform-origin:center;animation:spin .6s linear infinite}

/* ---------- Гараж: райдер рядом с байком ---------- */
#tab-garage .stage{height:340px}
#tab-garage .stage-bike:has(.bike-photo),#tab-garage .stage-refl:has(.bike-photo){width:74%;margin:0 0 0 auto;right:2%;left:auto}
#tab-garage .stage-bike:has(.bike-svg){width:74%;margin:0 0 0 auto;right:2%;left:auto}
.stage-rider{position:absolute;left:-4%;bottom:6px;width:50%;height:84%;z-index:3;cursor:pointer;pointer-events:auto;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.7));animation:none}
.stage-rider .rider-svg{animation:breathe 3s ease-in-out infinite}
.stage-rider::before{content:"";position:absolute;left:18%;right:18%;bottom:-4px;height:26px;border-radius:50%;
  background:radial-gradient(rgba(255,90,31,.55),transparent 70%);filter:blur(2px)}
.stage-rider-spot{position:absolute;left:2%;top:-10px;width:44%;height:100%;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at top,rgba(255,200,150,.22),transparent 65%);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%)}
.rider-tag{position:absolute;left:10px;top:12px;z-index:4;font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;
  background:rgba(0,0,0,.6);border:1px solid rgba(255,90,31,.6);box-shadow:0 0 12px rgba(255,90,31,.35);white-space:nowrap}
.rider-tag b{color:var(--accent)}
.stage-rider:active{transform:scale(.98)}

/* ---------- ТО: масло ---------- */
.bar.oil>i{background:linear-gradient(90deg,#a3e635,#22c55e)}
.bar.oil.low>i{background:linear-gradient(90deg,#f97316,#facc15)}
.bar.oil.dead>i{background:linear-gradient(90deg,#7f1d1d,#ef4444)}
.oil-ok{color:var(--ok)}.oil-low{color:#facc15}.oil-dead{color:var(--bad)}
.oil-warn-inline{margin-top:8px;font-size:12px;font-weight:700;padding:8px 10px;border-radius:10px}
.oil-warn-inline.low{background:rgba(250,204,21,.12);color:#fde68a}
.oil-warn-inline.dead{background:rgba(244,63,94,.15);color:#fecdd3}
.oil-warn{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 0;padding:10px 12px;border-radius:14px;
  font-size:13px;font-weight:700;border:1px solid}
.oil-warn.low{background:rgba(250,204,21,.1);border-color:rgba(250,204,21,.45);color:#fde68a}
.oil-warn.dead{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.5);color:#fecdd3;animation:pulse 1.6s infinite}
.oil-warn .btn{flex:0 0 auto}

/* ---------- Интерактивные гонки ---------- */
.race-play{position:absolute;inset:0;z-index:6}
.race-rule{margin:10px auto 0;max-width:300px;font-size:13px;font-weight:800;padding:8px 12px;border-radius:12px;background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.15);animation:tabin .4s}
.tap-zone{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:22%;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer}
.tap-big{font-size:54px;font-weight:900;color:#fff;text-shadow:0 0 24px var(--accent),0 0 48px var(--pink);animation:pulse .8s infinite}
.tap-big.hit{animation:taphit .12s}
@keyframes taphit{50%{transform:scale(1.18)}}
.tap-count{margin-top:6px;font-size:15px;font-weight:700;color:#e4e4e7;background:rgba(0,0,0,.5);padding:6px 12px;border-radius:10px}
.tap-count b{color:var(--gold);font-size:18px}
.tap-bar{width:70%;height:8px;border-radius:5px;background:rgba(255,255,255,.12);margin-top:10px;overflow:hidden}
.tap-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--gold))}
.ped-score{position:absolute;top:calc(64px + env(safe-area-inset-top));left:0;right:0;text-align:center;font-weight:900;font-size:16px;text-shadow:0 2px 8px #000}
.ped{position:absolute;left:70%;font-size:64px;z-index:7;filter:drop-shadow(0 0 10px #fde047) drop-shadow(0 4px 6px #000);animation-timing-function:linear;animation-fill-mode:forwards}
.ped span{display:inline-block;transform:scaleX(-1)}
.ped.from-bottom{bottom:40px}
.ped.from-top{bottom:calc(42% + 10px)}
.ped.from-bottom{animation-name:pedup}.ped.from-top{animation-name:peddown}
@keyframes pedup{0%{opacity:0;transform:translateY(40px) scale(.6)}20%{opacity:1}100%{transform:translateY(-130px) scale(1)}}
@keyframes peddown{0%{opacity:0;transform:translateY(-40px) scale(.6)}20%{opacity:1}100%{transform:translateY(120px) scale(1)}}
.ped.safe{animation:none!important;opacity:.35;transition:opacity .4s}
.ped.miss{animation:none!important;filter:drop-shadow(0 0 16px #ef4444)}
.ped-hint{position:absolute;left:0;right:0;text-align:center;font-size:26px;font-weight:900;z-index:8;animation:pulse .5s infinite;pointer-events:none}
.ped-hint.top{top:24%;color:#a3e635;text-shadow:0 0 18px #a3e635}
.ped-hint.bottom{bottom:16%;color:#22d3ee;text-shadow:0 0 18px #22d3ee}
.ped-msg{position:absolute;top:38%;left:0;right:0;text-align:center;font-size:28px;font-weight:900;opacity:0;transition:opacity .15s;pointer-events:none}
.ped-msg.show{opacity:1}.ped-msg.good{color:#a3e635;text-shadow:0 0 16px #a3e635}.ped-msg.bad{color:#f43f5e;text-shadow:0 0 16px #f43f5e}
.racer.me.swerve-up{animation:swup .55s ease-in-out}
.racer.me.swerve-down{animation:swdn .55s ease-in-out}
@keyframes swup{50%{transform:translateY(-46px) rotate(-4deg)}}
@keyframes swdn{50%{transform:translateY(34px) rotate(4deg)}}
.race-scene.brake{animation:stageshake .06s linear 6}
.ped::after{content:"!";position:absolute;top:-18px;right:-14px;width:26px;height:26px;border-radius:50%;background:#ef4444;color:#fff;
  font-size:18px;font-weight:900;display:grid;place-items:center;box-shadow:0 0 14px #ef4444;animation:pulse .4s infinite}
.ped.safe::after,.ped.miss::after{display:none}
.pill.fuel{gap:4px;padding:6px 9px;background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.35)}
.pill.fuel.empty{background:rgba(244,63,94,.15);border-color:rgba(244,63,94,.5);animation:pulse 1.4s infinite}
.pills{gap:5px}

/* ---------- Внешность и комплекты ---------- */
.look-card .row{flex-wrap:wrap}
.look-seg{margin:0;flex:1;max-width:260px}
.skins{display:flex;gap:10px;margin-top:10px;justify-content:center}
.skin{width:38px;height:38px;border-radius:50%;border:3px solid transparent;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.skin.on{border-color:var(--accent);box-shadow:0 0 0 2px #fff,0 0 14px var(--accent)}
.set-badge{display:inline-block;margin-left:4px;font-size:9px;font-weight:900;letter-spacing:.5px;padding:3px 7px;border-radius:7px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#e4e4e7;vertical-align:middle}
.set-badge.full{background:linear-gradient(135deg,#a3e635,#22c55e);color:#052e16;border:none;box-shadow:0 0 10px rgba(163,230,53,.5)}
.set-on{margin-top:6px;font-weight:900;color:#a3e635;text-shadow:0 0 10px rgba(163,230,53,.5)}
.shop-seg{flex-wrap:nowrap}
#wardrobe-seg button{font-size:10px;padding:8px 4px}
@media (max-width:400px){
  .logo{font-size:15px;letter-spacing:1px}
  .logo span{font-size:8px;letter-spacing:4px}
  .pills{gap:4px}
  .pill{padding:5px 7px;gap:4px;font-size:12px}
  .pill.icon{padding:5px 6px}
  .pill.fuel{padding:5px 7px}
}
.set-badge.s3{border-color:rgba(251,191,36,.6);color:#fde68a}
.set-badge.s4{border-color:rgba(168,85,247,.7);color:#e9d5ff}