:root{
  --ink:#0c1020; --panel:rgba(13,17,32,.88); --line:#2b3350;
  --amber:#ffb03a; --gold:#ffd23f; --cyan:#41e0ff; --red:#ff5040;
  --text:#f2f5ff; --dim:#9aa3c0;
  --fd:'Vazirmatn','Tahoma',sans-serif;
  --fb:'Vazirmatn','Tahoma',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{position:fixed;inset:0;overflow:hidden;background:#05070f;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;direction:rtl}
#app{position:fixed;left:0;top:0;overflow:hidden;touch-action:none;font-family:var(--fb);color:var(--text)}
#stage{position:absolute;inset:0}
#stage canvas{display:block}

/* صفحه بارگذاری */
#loading{position:absolute;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,#101a2c 0%,#05070f 100%);transition:opacity .5s ease,visibility .5s;}
#loading.loaded{opacity:0;visibility:hidden;pointer-events:none}
.loadWrap{text-align:center}
.loadLogo{font-family:var(--fd);font-weight:900;font-size:36px;color:var(--gold);letter-spacing:2px;
  margin-bottom:24px;text-shadow:0 0 24px rgba(255,210,63,.35)}
.loadLogo span{display:block;font-size:13px;color:var(--dim);letter-spacing:5px;font-weight:700;margin-top:8px;direction:ltr}
.loadBar{width:220px;height:6px;border-radius:6px;background:#131b30;border:1px solid var(--line);overflow:hidden;margin:0 auto}
.loadBarFill{height:100%;width:35%;background:linear-gradient(90deg,var(--cyan),var(--gold));border-radius:6px;animation:loadSweep 1.1s ease-in-out infinite}
@keyframes loadSweep{0%{transform:translateX(-140%)}100%{transform:translateX(340%)}}
.loadHint{margin-top:16px;font-size:12px;color:var(--dim);letter-spacing:1px}

/* ── HUD پیشرفته ── */
#hud{position:absolute;inset:0;pointer-events:none;z-index:5}
.plate{background:var(--panel);border:1px solid var(--line);box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 20px rgba(255,176,58,.1);
  transform:skewX(8deg);padding:6px 16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.plate>span,.plate>b{display:inline-block;transform:skewX(-8deg)}
#hudTL{position:absolute;right:14px;top:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
#scoreBox b{font-family:var(--fd);font-size:30px;color:var(--gold);letter-spacing:1px;text-shadow:0 2px 10px rgba(0,0,0,.7),0 0 20px rgba(255,210,63,.5);font-weight:900}
#scoreBox i{font-style:normal;font-size:11px;color:var(--dim);margin-left:8px;letter-spacing:2px}
#comboBox{display:none;background:#3a1608e0;border-color:#8a4a12;transition:all .3s}
#comboBox b{font-family:var(--fd);color:var(--amber);font-size:16px;font-weight:700}
#comboBox.pop{animation:pop .3s ease}
@keyframes pop{40%{transform:skewX(8deg) scale(1.22)}}
#shieldBox{display:none;background:#062a38e0;border-color:#1c6e8a}
#shieldBox b{color:var(--cyan);font-size:14px}
#hudTR{position:absolute;left:14px;top:12px;display:flex;gap:8px;align-items:flex-start}
#hudTR .plate b{font-family:var(--fd);font-size:15px;color:var(--text);font-weight:700}
#hudTR .plate i{font-style:normal;font-size:10px;color:var(--dim);margin-left:6px}
.ibtn{pointer-events:auto;width:42px;height:42px;background:var(--panel);border:1px solid var(--line);
  color:var(--text);font-size:19px;box-shadow:0 4px 0 rgba(0,0,0,.35);cursor:pointer;
  transition:transform .1s,border-color .15s,color .15s;touch-action:manipulation;backdrop-filter:blur(8px)}
.ibtn:active{transform:translateY(3px)}

/* سرعت‌سنج پیشرفته */
#cluster{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);text-align:center}
#gauge{filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)),drop-shadow(0 0 10px rgba(255,176,58,.3))}
#spdRow{margin-top:-14px}
#spd{font-family:var(--fd);font-size:30px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8),0 0 15px rgba(255,255,255,.3);line-height:1;font-weight:900}
#spdRow small{color:var(--dim);font-size:10px;letter-spacing:2px;margin-right:4px}

/* نیترو پیشرفته */
#nitroWrap{position:absolute;left:16px;bottom:118px;width:132px}
#nitroBar{height:12px;border:1px solid #2b4a58;background:#0a1220;position:relative;overflow:hidden;border-radius:6px}
#nitroFill{height:100%;width:0%;background:linear-gradient(90deg,#41e0ff,#86d9ff);box-shadow:0 0 12px var(--cyan),inset 0 0 10px rgba(255,255,255,.3);transition:width .15s;border-radius:6px}
#nitroBar::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 9px,#0a1220 9px 11px)}
#nitroWrap label{font-size:10px;color:var(--cyan);letter-spacing:3px;font-family:var(--fd);font-weight:700;text-shadow:0 0 10px var(--cyan)}

/* دکمه‌های لمسی */
.tbtn{pointer-events:auto;position:absolute;width:78px;height:78px;border-radius:20px;
  background:rgba(18,24,46,.6);border:2px solid rgba(255,255,255,.28);color:#fff;
  font-size:30px;font-family:var(--fd);font-weight:900;display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 0 rgba(0,0,0,.4),0 0 15px rgba(255,255,255,.1);transition:transform .08s,background .08s,box-shadow .08s;z-index:10;touch-action:none;backdrop-filter:blur(8px)}
.tbtn:active,.tbtn.on{transform:scale(.93);background:rgba(255,176,58,.45);border-color:var(--amber);box-shadow:0 5px 0 rgba(0,0,0,.4),0 0 25px rgba(255,176,58,.5)}
#t-left{right:16px;bottom:16px}
#t-right{right:106px;bottom:16px}
#t-brake{left:126px;bottom:26px;width:58px;height:58px;font-size:20px;border-radius:50%}
#t-nitro{left:14px;bottom:14px;width:96px;height:96px;border-radius:50%;
  border-color:var(--cyan);color:var(--cyan);font-size:22px;text-shadow:0 0 10px var(--cyan)}
#t-nitro.ready{animation:npulse 1.1s infinite}
#t-nitro.empty{opacity:.35;animation:none}
#t-nitro:active,#t-nitro.on{background:rgba(65,224,255,.35);box-shadow:0 5px 0 rgba(0,0,0,.4),0 0 30px var(--cyan)}
@keyframes npulse{50%{box-shadow:0 0 26px var(--cyan),0 5px 0 rgba(0,0,0,.4),0 0 40px var(--cyan)}}

/* متن‌های شناور */
#floaters{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.fl{position:absolute;font-family:var(--fd);font-size:20px;font-weight:700;transform:translate(-50%,0);
  text-shadow:0 2px 6px rgba(0,0,0,.8),0 0 15px currentColor;animation:flUp .95s ease-out forwards;white-space:nowrap}
.fl.gold{color:var(--gold)} .fl.cyan{color:var(--cyan)} .fl.red{color:var(--red)} .fl.white{color:#fff}
@keyframes flUp{to{transform:translate(-50%,-72px);opacity:0}}
#toast{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:9;opacity:0;
  transition:opacity .25s;pointer-events:none;backdrop-filter:blur(10px)}
#toast.show{opacity:1}
#toast b{font-size:14px;font-weight:700}
#banner{position:absolute;top:110px;right:-420px;z-index:9;pointer-events:none;transition:right .5s cubic-bezier(.2,.9,.3,1)}
#banner.show{right:18px}
#banner .plate{border-right:6px solid var(--amber);backdrop-filter:blur(10px)}
#banner b{font-family:var(--fd);font-size:24px;color:#fff;font-weight:900;text-shadow:0 0 15px rgba(255,176,58,.5)}
#banner i{display:block;font-style:normal;font-size:10px;color:var(--dim);letter-spacing:3px}

/* شمارش معکوس */
#count{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:12;
  pointer-events:none;font-family:var(--fd);font-size:130px;color:var(--amber);font-weight:900;
  text-shadow:0 0 30px rgba(255,176,58,.6),0 6px 0 #7a4a08,0 0 60px rgba(255,176,58,.4)}
#count.go{color:#7dff8a;text-shadow:0 0 30px rgba(90,255,120,.6),0 6px 0 #1a6a28,0 0 60px rgba(90,255,120,.4)}
#count.zoom{animation:cz .75s ease}
@keyframes cz{0%{transform:scale(2.2);opacity:0}25%{opacity:1}80%{transform:scale(1)}}

/* افکت‌های بصری */
#vig{position:absolute;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(ellipse at center,transparent 58%,rgba(4,7,16,.5) 100%)}
#nitrofx{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .25s;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(65,224,255,.3) 100%)}
#nitrofx.on{opacity:1}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:11}
#flash.on{animation:fla .5s ease-out}
@keyframes fla{0%{opacity:.85}100%{opacity:0}}
#damage{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .3s;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(255,50,50,.4) 100%)}
#damage.on{opacity:1}

/* ماموریت */
#mission{position:absolute;right:14px;top:180px;width:200px;display:none}
#mission.show{display:block;animation:slideIn .5s ease}
@keyframes slideIn{from{transform:translateX(50px);opacity:0}to{transform:translateX(0);opacity:1}}
#mission .plate{border-right:4px solid var(--cyan);backdrop-filter:blur(10px)}
#mission b{font-family:var(--fd);font-size:12px;color:var(--cyan);font-weight:700}
#mission i{display:block;font-style:normal;font-size:10px;color:var(--dim);margin-top:4px}

/* اورلی‌ها */
.ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(5,8,18,.55);z-index:20;backdrop-filter:blur(5px)}
.hide{display:none!important}
.abtn{pointer-events:auto;font-family:var(--fd);font-size:18px;font-weight:700;letter-spacing:2px;cursor:pointer;
  background:var(--amber);color:#2a1804;border:2px solid #2a1804;padding:13px 30px;
  box-shadow:0 5px 0 #a8650e,0 10px 22px rgba(0,0,0,.45),0 0 20px rgba(255,176,58,.3);
  transition:transform .08s,box-shadow .08s,filter .15s;touch-action:manipulation;border-radius:8px}
.abtn:active{transform:translateY(4px);box-shadow:0 1px 0 #a8650e}
.abtn.cyan{background:var(--cyan);color:#03222c;border-color:#03222c;box-shadow:0 5px 0 #1a8aa8,0 10px 22px rgba(0,0,0,.45),0 0 20px rgba(65,224,255,.3)}
.abtn.cyan:active{box-shadow:0 1px 0 #1a8aa8}
.abtn.ghost{background:transparent;color:var(--text);border-color:var(--line);box-shadow:none}
.abtn.big{font-size:22px;padding:16px 40px}
@media(hover:hover){.abtn:hover{filter:brightness(1.12)}.ibtn:hover{border-color:var(--amber);color:var(--amber)}}

/* منوی شروع */
#menu .wrap{display:flex;gap:44px;align-items:center;padding:20px;direction:rtl}
.sign{position:relative;background:#0b7a45;border:3px solid #eef7f0;border-radius:14px;
  padding:34px 44px 30px;transform:rotate(2deg);box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 30px rgba(11,122,69,.3);text-align:center}
.sign::before{content:'';position:absolute;inset:7px;border:2px solid #eef7f0;border-radius:8px;pointer-events:none}
.sign .route{position:absolute;top:-20px;left:50%;transform:translateX(-50%);background:#c8322b;
  color:#fff;font-family:var(--fd);font-size:15px;font-weight:700;padding:4px 14px;border:2px solid #fff;border-radius:6px;box-shadow:0 0 15px rgba(200,50,43,.5)}
.sign h1{font-family:var(--fd);font-size:56px;color:#fff;letter-spacing:6px;line-height:1.1;
  text-shadow:0 4px 0 rgba(0,0,0,.28),0 0 30px rgba(255,255,255,.2);font-weight:900}
.sign .sub{font-family:var(--fd);color:var(--gold);font-size:15px;letter-spacing:5px;margin-top:8px;font-weight:700;text-shadow:0 0 15px rgba(255,210,63,.5)}
.sign .posts{position:absolute;left:50%;bottom:-52px;transform:translateX(-50%);width:150px;height:52px}
.sign .posts::before,.sign .posts::after{content:'';position:absolute;top:0;width:12px;height:100%;
  background:linear-gradient(#8a9099,#5a6068)}
.sign .posts::before{left:14px}.sign .posts::after{right:14px}
.mside{display:flex;flex-direction:column;gap:16px;align-items:flex-start;max-width:330px}
.mside .best{font-size:14px}
.mside .best b{font-family:var(--fd);color:var(--gold);font-size:20px;font-weight:900}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#151b30;border:1px solid var(--line);padding:6px 11px;font-size:12px;color:var(--dim);border-radius:4px;backdrop-filter:blur(5px)}
.chip b{color:var(--text);font-family:var(--fd);font-weight:700;margin-left:4px}
.hint{font-size:11px;color:var(--dim);line-height:1.7;text-align:right}

/* پنل‌ها */
.panel{background:#101528f2;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 40px rgba(0,0,0,.3);
  padding:30px 40px;min-width:340px;text-align:center;direction:rtl;border-radius:12px;backdrop-filter:blur(10px)}
.panel h2{font-family:var(--fd);font-size:34px;letter-spacing:3px;margin-bottom:4px;font-weight:900}
.panel h2.red{color:var(--red);text-shadow:0 0 20px rgba(255,80,64,.5)} .panel h2.amber{color:var(--amber);text-shadow:0 0 20px rgba(255,176,58,.5)}
.panel .tag{font-size:11px;color:var(--dim);letter-spacing:3px;margin-bottom:18px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;margin:14px 0 20px;text-align:right}
.stats div{display:flex;justify-content:space-between;border-bottom:1px dashed #232b47;padding:5px 0;font-size:13px;color:var(--dim)}
.stats b{font-family:var(--fd);color:var(--text);font-weight:700}
.bigscore{font-family:var(--fd);font-size:52px;color:var(--gold);text-shadow:0 0 24px rgba(255,210,63,.35),0 0 40px rgba(255,210,63,.2);line-height:1;font-weight:900}
.bigscore small{font-size:12px;color:var(--dim);letter-spacing:3px}
#newRec{display:none;color:var(--red);font-family:var(--fd);font-size:14px;letter-spacing:2px;margin-top:6px;animation:pop2 .6s infinite alternate;font-weight:700;text-shadow:0 0 15px rgba(255,80,64,.5)}
@keyframes pop2{to{transform:scale(1.15)}}
.row{display:flex;gap:12px;justify-content:center;margin-top:18px}
.keys{font-size:12px;color:var(--dim);line-height:2;margin-top:14px;text-align:right}
.keys b{color:var(--text);background:#1a2138;border:1px solid var(--line);padding:1px 7px;border-radius:4px;font-family:var(--fd);font-weight:700}
#err{color:var(--dim);font-size:14px;text-align:center;line-height:2}
#dbg{position:absolute;right:14px;bottom:104px;z-index:99;display:none;max-width:72%;
  font-size:11px;line-height:1.6;color:#ffb3ad;background:rgba(60,10,10,.88);
  border:1px solid #7a2a24;padding:6px 10px;pointer-events:none;border-radius:6px}
#dbg.show{display:block}
@media (max-height:420px){ .sign h1{font-size:42px} .sign{padding:24px 34px 22px} }

@font-face{font-family:Vazirmatn;src:url('../fonts/Vazirmatn.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--amber:#e7b97c;--gold:#edc998;--cyan:#94cbd5;--panel:rgba(13,23,31,.82);--line:rgba(196,216,230,.22)}
button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.plate{transform:none;border-radius:10px;box-shadow:0 5px 22px #0003;padding:8px 14px}.plate>span,.plate>b{transform:none}
.abtn{letter-spacing:0;border:none;box-shadow:none;border-radius:10px;font-size:16px}.abtn.big{font-size:20px;padding:15px 30px}.abtn.ghost{border:1px solid var(--line)}
.ov{background:linear-gradient(90deg,#09131ce8 0%,#09131c9c 45%,#09131c38);backdrop-filter:blur(2px)}
#menu .wrap{width:100%;justify-content:space-between;padding:6vw;gap:30px}.sign{background:none;border:0;transform:none;box-shadow:none;text-align:right;padding:0}.sign::before,.sign .posts{display:none}.sign h1{font-size:clamp(38px,7vw,94px);letter-spacing:-3px;text-shadow:0 6px 28px #0005}.sign .route{position:static;display:inline-block;transform:none;background:#ffffff0c;border:1px solid #ffffff40;padding:5px 14px;box-shadow:none;margin-bottom:22px}.sign .sub{font-size:13px;letter-spacing:4px;color:#d8e2e8;text-shadow:none}.mside{padding:26px;background:#0b1621c9;border:1px solid var(--line);border-radius:20px;max-width:365px}.eyebrow{color:var(--gold);font-size:13px}.sponsorNames{display:flex;gap:20px;border-top:1px solid var(--line);padding-top:16px;width:100%;font-size:15px;color:#edc998}.chip{font-size:12px;border-radius:7px}.hint{font-size:12px;line-height:1.9}.panel{border-radius:18px}.panel h2{font-size:26px;letter-spacing:0}.ibtn{border-radius:9px;box-shadow:none}
.utility{position:absolute;top:76px;left:14px;display:flex;gap:5px;z-index:10}.utility button,.musicbar button,.pickMusic{background:#111e2ad9;border:1px solid var(--line);border-radius:8px;color:var(--text);padding:8px 10px;font-size:12px}.utility button.active{border-color:var(--gold);color:var(--gold)}
.musicbar{position:absolute;left:14px;top:123px;display:flex;gap:8px;align-items:center;z-index:10;background:#101c28d9;border:1px solid var(--line);border-radius:12px;padding:9px;max-width:355px}.musicbar>div{display:flex;flex-direction:column;min-width:90px;max-width:150px}.musicbar small{color:var(--gold);font-size:11px}.musicbar span#trackName{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.musicIcon{font-size:24px;color:var(--gold)}.pickMusic{cursor:pointer}
#settings{z-index:40}.settingsPanel{width:min(720px,94%);min-width:0;max-height:94%;overflow:auto;text-align:right;padding:24px}.settingsPanel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.settingsPanel header small{color:var(--gold);letter-spacing:2px}.settingGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}.settingGrid label{font-size:14px;display:flex;flex-direction:column;gap:6px;color:#d5dfe7}.settingGrid input,.settingGrid select{width:100%;min-height:34px;accent-color:var(--gold)}.settingGrid select{background:#1b2936;color:#fff;border:1px solid var(--line);border-radius:7px;padding:5px}.settingGrid .checkLabel{flex-direction:row;align-items:center}.checkLabel input{width:20px}.settingGrid input[type=color]{background:#243442;border:0;padding:2px;border-radius:7px}
.tbtn{border-radius:16px;background:#13212c85;box-shadow:none;border:1px solid #ffffff44}.tbtn:active{box-shadow:none}#t-left{right:106px}#t-right{right:16px}#gauge{filter:drop-shadow(0 4px 8px #0008)}#nitroWrap label{letter-spacing:0}#scoreBox b{font-size:25px;text-shadow:none}#cluster{bottom:18px}#mission{top:115px}
@media(max-height:500px){#menu .wrap{padding:22px 40px}.mside{padding:15px;gap:9px}.sign h1{font-size:48px}.sign .route{margin-bottom:12px}.musicbar{top:109px}.utility{top:66px}.settingsPanel{padding:16px}.settingGrid{gap:8px 20px}.settingsPanel h2{font-size:22px}.tbtn{width:64px;height:64px}#t-nitro{width:76px;height:76px}#nitroWrap{bottom:97px}#t-left{right:90px}#cluster{bottom:4px}#hudTR .plate{padding:6px}.sponsorNames{padding-top:7px}.mside .hint{font-size:11px}}

/* پرداخت نهایی: عمق و ورود نرم منو */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
#menu .sign{animation:fadeUp .6s ease both}
#menu .mside{animation:fadeUp .6s .1s ease both}
.mside{position:relative}
.mside::before{content:'';position:absolute;inset:-1px;border-radius:20px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(237,201,152,.35),transparent 40%,transparent 60%,rgba(148,203,213,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.abtn.big{position:relative;overflow:hidden}
#btnStart:not(:disabled)::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-100%);animation:sheen 3.2s ease-in-out infinite}
@keyframes sheen{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}