* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height: 100%; }
body { overflow: hidden; font-family: 'Vazirmatn', system-ui, sans-serif; background: #07030f; color: #fff; user-select: none; -webkit-user-select: none; }
canvas { display: block; touch-action: none; width: 100%; height: 100%; }
button { font-family: inherit; cursor: pointer; }
.app { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); line-height: 1.7; }
.title { background-size: cover; background-position: center; justify-content: flex-end; gap: 18px; padding-bottom: 60px; }
.logo { text-align: center; margin-bottom: auto; margin-top: 12vh; }
.kicker { display: inline-block; color: #7fe9ff; font-size: 15px; padding: 2px 14px; border: 1px solid #7fe9ff66; border-radius: 99px; background: #05102088; }
.logo h1 { font-size: clamp(46px, 14vw, 78px); font-weight: 900; line-height: 1.3; text-shadow: 0 0 18px #ff2e88, 0 0 40px #7a2bff; }
.logo em { font-style: normal; color: #ff5fb0; display: block; }
.hint { opacity: .75; font-size: 14px; text-align: center; }
.btn { min-height: 46px; padding: 6px 22px; border-radius: 14px; border: 1px solid #ffffff33; background: linear-gradient(180deg, #2a1d55, #170f33); color: #fff; font-size: 16px; font-weight: 700; width: 100%; max-width: 320px; transition: transform .1s, filter .2s; }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .45; }
.btn.big { min-height: 58px; font-size: 20px; background: linear-gradient(90deg, #ff2e88, #7a2bff); border: none; box-shadow: 0 0 24px #ff2e8877, inset 0 1px 0 #fff5; }
.btn.buy { background: linear-gradient(90deg, #ffb000, #ff5f2e); box-shadow: 0 0 24px #ffb00066; }
.btn.ghost { background: #0008; }
.btn.sm { min-height: 38px; font-size: 14px; width: auto; padding: 4px 14px; }
.pulse { animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { transform: scale(1.04); box-shadow: 0 0 40px #ff2e88aa; } }
.bar { width: 100%; max-width: 480px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bar h2 { font-size: 22px; text-shadow: 0 0 12px #ff2e88; }
.coins { background: #000a; border: 1px solid #ffd23f66; color: #ffd23f; border-radius: 99px; padding: 2px 12px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.spacer { flex: 1; }
.garage { background: linear-gradient(180deg, #07031099, transparent 25%, transparent 45%, #070310ee 70%); }
.panel { width: 100%; max-width: 420px; padding: 22px 22px; border-radius: 22px; background: #0d0820cc center/100% 100% no-repeat; border: 1px solid #ffffff1f; display: flex; flex-direction: column; gap: 8px; align-items: center; backdrop-filter: blur(6px); }
.bike-nav { display: flex; align-items: center; gap: 10px; width: 100%; text-align: center; }
.bike-nav > div { flex: 1; min-width: 0; }
.bike-nav h3 { font-size: 34px; font-weight: 900; text-shadow: 0 0 16px currentColor; line-height: 1.4; }
.bike-nav p { font-size: 14px; opacity: .8; overflow-wrap: anywhere; }
.arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #fff4; background: #fff1; color: #fff; font-size: 28px; line-height: 1; }
.stat { display: flex; align-items: center; gap: 10px; width: 100%; font-size: 14px; }
.stat span { width: 50px; } .stat b { width: 22px; text-align: center; }
.meter { flex: 1; height: 8px; border-radius: 9px; background: #ffffff1a; overflow: hidden; }
.meter div { height: 100%; border-radius: 9px; transition: width .35s; box-shadow: 0 0 10px currentColor; }
.dots { display: flex; gap: 6px; margin: 4px 0; } .dots i { width: 8px; height: 8px; border-radius: 50%; background: #fff3; } .dots i.on { background: #ff2e88; box-shadow: 0 0 8px #ff2e88; }
.map { background: radial-gradient(ellipse at 50% 30%, #2a0f4ccc, #07030fef 70%); gap: 14px; }
.route { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 12px; flex: 1; justify-content: center; position: relative; }
.route::before { content: ''; position: absolute; inset-inline-start: 38px; top: 10%; bottom: 10%; border-inline-start: 3px dashed #ff2e8866; }
.node { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; border: 1px solid #ff2e8855; background: #12082acc center/cover; color: #fff; text-align: start; box-shadow: 0 0 20px #7a2bff33; transition: transform .15s; }
.node:active { transform: scale(.97); }
.node.locked { filter: grayscale(1) brightness(.6); }
.num { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 900; background: linear-gradient(135deg, #ff2e88, #7a2bff); box-shadow: 0 0 14px #ff2e88; }
.info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.info b { font-size: 18px; } .info small { font-size: 12px; opacity: .75; overflow-wrap: anywhere; line-height: 1.6; }
.stars i, .bigstars i { font-style: normal; color: #ffffff30; }
.stars i.on { color: #ffd23f; text-shadow: 0 0 8px #ffb000; }
.stars { font-size: 18px; white-space: nowrap; }
.legend { font-size: 12px; opacity: .65; text-align: center; }
.hud { position: absolute; inset: 0; pointer-events: none; padding: max(12px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; line-height: 1.5; }
.hud button { pointer-events: auto; }
.hud-top { display: flex; gap: 8px; align-items: stretch; }
.hud-chip { background: #0a0518b0; border: 1px solid #ffffff22; border-radius: 14px; padding: 4px 12px; display: flex; flex-direction: column; backdrop-filter: blur(4px); }
.hud-chip small { font-size: 11px; opacity: .7; } .hud-chip b { font-size: 20px; }
.place b { font-size: 26px; color: #ff5fb0; text-shadow: 0 0 10px #ff2e88; } .place b span { font-size: 15px; color: #fff9; }
.mono { font-variant-numeric: tabular-nums; }
.pause-btn { margin-inline-start: auto; width: 48px; border-radius: 14px; border: 1px solid #fff3; background: #0a0518b0; color: #fff; font-size: 16px; }
.progress { position: relative; height: 6px; background: #ffffff22; border-radius: 9px; margin-top: 10px; }
.progress div { height: 100%; background: linear-gradient(90deg, #00e5ff, #ff2e88); border-radius: 9px; }
.progress i { position: absolute; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #00e5ff; transform: translateX(50%); }
.countdown { position: absolute; top: 34%; inset-inline: 0; text-align: center; font-size: 110px; font-weight: 900; text-shadow: 0 0 30px #ff2e88; animation: pop .9s ease-out; }
.countdown.go { color: #00e5ff; text-shadow: 0 0 30px #00e5ff; font-size: 80px; }
@keyframes pop { from { transform: scale(1.8); opacity: 0; } 30% { transform: scale(1); opacity: 1; } }
.tip { position: absolute; top: 22%; inset-inline: 16px; text-align: center; background: #0008; border-radius: 12px; padding: 6px; font-size: 14px; }
.hud-bottom { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; }
.speedo { background: #0a0518b0; border: 1px solid #00e5ff44; border-radius: 18px; padding: 6px 16px; display: flex; flex-direction: column; align-items: center; }
.speedo b { font-size: 40px; line-height: 1.2; text-shadow: 0 0 12px #00e5ff; font-variant-numeric: tabular-nums; } .speedo small { font-size: 11px; opacity: .75; }
.nitro-btn { position: relative; width: 96px; height: 96px; border-radius: 50%; border: none; background: radial-gradient(circle, #1e7bffcc, #0a1a55dd); color: #fff; font-weight: 900; font-size: 17px; box-shadow: 0 0 26px #1e7bff99; }
.nitro-btn svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.nitro-btn circle { fill: none; stroke-width: 7; } .nitro-btn .bg { stroke: #ffffff22; } .nitro-btn .fg { stroke: #6fd0ff; stroke-dasharray: 276; stroke-linecap: round; transition: stroke-dashoffset .1s; filter: drop-shadow(0 0 6px #6fd0ff); }
.nitro-btn span { position: relative; }
.nitro-btn.on { animation: pulse .4s infinite; background: radial-gradient(circle, #6fd0ff, #1e7bff); }
.nitro-btn.empty { filter: saturate(.3) brightness(.7); }
.modal { position: absolute; inset: 0; background: #05020dcc; display: grid; place-items: center; padding: 16px; backdrop-filter: blur(5px); line-height: 1.7; animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.card { width: 100%; max-width: 360px; padding: 28px 22px; border-radius: 24px; background: #120a28ee center/100% 100% no-repeat; border: 1px solid #ff2e8855; box-shadow: 0 0 40px #7a2bff55; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; animation: rise .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes rise { from { transform: translateY(40px) scale(.9); opacity: 0; } }
.card h2 { font-size: 30px; font-weight: 900; } .card .sub { opacity: .75; font-size: 14px; overflow-wrap: anywhere; }
.card h2.win { color: #ffd23f; text-shadow: 0 0 20px #ffb000; } .card h2.lose { color: #ff8aa8; }
.bigstars { font-size: 52px; display: flex; gap: 6px; direction: ltr; }
.bigstars i.on { color: #ffd23f; text-shadow: 0 0 18px #ffb000; animation: star .5s backwards cubic-bezier(.2,1.6,.4,1); }
@keyframes star { from { transform: scale(0) rotate(-90deg); } }
.rows { width: 100%; display: flex; flex-direction: column; gap: 4px; background: #0006; border-radius: 14px; padding: 8px 14px; }
.rows div { display: flex; justify-content: space-between; } .gold { color: #ffd23f; }
.row2 { display: flex; gap: 8px; width: 100%; max-width: 320px; }