/* ===== سباق الكنوز — Design System ===== */
:root{
  --bg:#070a12; --bg2:#0d1320; --panel:rgba(16,22,36,.78); --panel2:rgba(22,30,48,.7);
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --txt:#e9eefa; --mut:#93a2bd; --dim:#5d6b85;
  --cy:#22d3ee; --cy-d:#0e7490; --gold:#ffc53d; --gold-d:#b45309;
  --vi:#8b5cf6; --rose:#f43f5e; --grn:#34d399;
  --r:18px; --r-sm:12px; --r-lg:26px;
  --sh:0 18px 50px rgba(0,0,0,.55);
  --glass:blur(16px) saturate(140%);
  --f:"Cairo","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --fo:"Orbitron","Cairo",system-ui,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--f); color:var(--txt); background:var(--bg);
  overflow:hidden; -webkit-tap-highlight-color:transparent; user-select:none;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4{margin:0;line-height:1.25}
p{margin:0}
svg{width:100%;height:100%;display:block}
.hidden{display:none !important}
.muted{color:var(--mut)}

#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
#vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 42%,rgba(0,0,0,.35) 78%,rgba(0,0,0,.72) 100%)}
#flash{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;background:#fff;
  transition:opacity .35s ease}
#flash.on{opacity:.55;transition:opacity .06s ease}

/* ===== Screens ===== */
.screen{position:fixed;inset:0;z-index:5;overflow:hidden;
  background:linear-gradient(180deg,rgba(7,10,18,.72),rgba(7,10,18,.92));
  backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  opacity:0;visibility:hidden;transform:scale(1.015);transition:opacity .3s,transform .3s,visibility .3s}
.screen.active{opacity:1;visibility:visible;transform:none}
.screen--center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:28px;
  background:linear-gradient(180deg,rgba(7,10,18,.55),rgba(7,10,18,.86))}
.scroll-area{position:absolute;inset:78px 0 0;overflow-y:auto;padding:10px 18px 40px;
  -webkit-overflow-scrolling:touch}
.scroll-area::-webkit-scrollbar{width:8px}
.scroll-area::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px}

/* ===== Buttons ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:var(--r);font-weight:700;font-size:17px;letter-spacing:.2px;
  border:1px solid var(--line2);color:var(--txt);background:var(--panel2);
  transition:transform .16s cubic-bezier(.2,.9,.3,1.4),box-shadow .22s,background .22s,border-color .22s;
  box-shadow:0 6px 18px rgba(0,0,0,.32)}
.btn svg{width:21px;height:21px;flex:none}
.btn:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.5);box-shadow:0 14px 32px rgba(0,0,0,.45),0 0 0 1px rgba(34,211,238,.18)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:grayscale(.6)}
.btn--primary{background:linear-gradient(135deg,var(--cy),#3b82f6 60%,var(--vi));border-color:transparent;color:#04121a;
  box-shadow:0 10px 30px rgba(34,211,238,.32)}
.btn--primary:hover{box-shadow:0 16px 40px rgba(34,211,238,.45)}
.btn--ghost{background:rgba(255,255,255,.045)}
.btn--ghost:hover{background:rgba(255,255,255,.09)}
.btn--xl{padding:19px 52px;font-size:22px;border-radius:22px;min-width:290px}
.btn--danger{background:rgba(244,63,94,.14);border-color:rgba(244,63,94,.45);color:#ffd7de}
.btn--danger:hover{border-color:var(--rose);background:rgba(244,63,94,.24)}
.btn--gold{background:linear-gradient(135deg,var(--gold),#f59e0b);border-color:transparent;color:#2a1a00;font-weight:900}
.icon-btn{width:44px;height:44px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);
  display:grid;place-items:center;padding:10px;transition:background .2s,transform .2s,border-color .2s}
.icon-btn:hover{background:rgba(255,255,255,.1);transform:translateY(-2px);border-color:var(--line2)}
.icon-btn svg{width:22px;height:22px}

/* ===== Chips ===== */
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);font-weight:700;font-size:15px;backdrop-filter:var(--glass)}
.chip svg{width:19px;height:19px}
.chip--sm{padding:7px 13px;font-size:14px}
.chip--gold{color:#ffe6a8;border-color:rgba(255,197,61,.34);box-shadow:inset 0 0 22px rgba(255,197,61,.12)}
.chip--gold svg{color:var(--gold)}
.chip--money{color:#a9f0ff;border-color:rgba(34,211,238,.34)}
.pill{padding:4px 12px;border-radius:999px;font-size:13px;font-weight:700;
  background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.35);color:#d6c9ff}

/* ===== Brand / Menu ===== */
.brand{text-align:center;animation:fadeUp .7s cubic-bezier(.2,.8,.2,1) both}
.brand__wheel{width:76px;height:76px;margin:0 auto 12px;color:var(--cy);
  animation:spin 9s linear infinite;filter:drop-shadow(0 0 18px rgba(34,211,238,.45))}
@keyframes spin{to{transform:rotate(360deg)}}
.brand__title{font-size:clamp(42px,9vw,86px);font-weight:900;letter-spacing:-1px;
  background:linear-gradient(100deg,#fff 10%,var(--cy) 45%,var(--gold) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(34,211,238,.28))}
.brand__title span{background:linear-gradient(100deg,var(--gold),#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand__tag{margin-top:8px;color:var(--mut);font-size:clamp(14px,2.4vw,19px);font-weight:600;letter-spacing:2px}
.wallet--menu{position:absolute;top:20px;left:20px}
.menu-nav{display:flex;flex-direction:column;gap:13px;align-items:center;animation:fadeUp .8s .1s cubic-bezier(.2,.8,.2,1) both}
.menu-nav .btn{min-width:290px}
.menu-foot{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:var(--dim);font-size:12.5px}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* ===== Topbar ===== */
.topbar{position:absolute;top:0;left:0;right:0;height:74px;display:flex;align-items:center;gap:14px;
  padding:0 18px;border-bottom:1px solid var(--line);background:rgba(9,13,22,.6);backdrop-filter:var(--glass);z-index:6}
.topbar__titles{flex:1;min-width:0}
.topbar__titles h2{font-size:21px;font-weight:900}
.topbar__titles p{color:var(--mut);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== Levels ===== */
.levels-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  max-width:1180px;margin:0 auto;padding-bottom:30px}
.lvl{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(160deg,var(--panel2),rgba(11,16,27,.85));padding:18px;
  min-height:172px;display:flex;flex-direction:column;gap:9px;text-align:right;
  transition:transform .2s cubic-bezier(.2,.9,.3,1.3),box-shadow .25s,border-color .25s;
  animation:fadeUp .5s both;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.lvl:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.45);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.lvl::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(90% 70% at 100% 0,var(--glow,rgba(34,211,238,.22)),transparent 70%)}
.lvl--day{--glow:rgba(34,211,238,.24)}
.lvl--sunset{--glow:rgba(251,146,60,.26)}
.lvl--night{--glow:rgba(139,92,246,.26)}
.lvl__no{position:absolute;top:12px;left:14px;font-family:var(--fo);font-size:30px;font-weight:900;
  color:rgba(255,255,255,.11);letter-spacing:-1px}
.lvl__ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;padding:9px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--cy)}
.lvl__ic svg{width:22px;height:22px}
.lvl h3{font-size:19px;font-weight:800;position:relative}
.lvl__meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--mut);position:relative}
.lvl__meta b{color:var(--txt);font-family:var(--fo);font-weight:700}
.lvl__stars{display:flex;gap:4px;margin-top:auto;position:relative}
.stars i{font-style:normal;font-size:19px;color:rgba(255,255,255,.16);transition:color .3s,text-shadow .3s}
.stars i.on{color:var(--gold);text-shadow:0 0 14px rgba(255,197,61,.65)}
.lvl__go{position:absolute;inset-inline-start:16px;bottom:16px;padding:9px 20px;border-radius:12px;
  font-weight:800;font-size:14px;background:linear-gradient(135deg,var(--cy),var(--vi));color:#04121a}
.lvl--locked{filter:grayscale(.75) brightness(.6)}
.lvl__lock{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,9,16,.55);
  backdrop-filter:blur(2px)}
.lvl__lock div{width:52px;height:52px;padding:13px;border-radius:50%;background:rgba(0,0,0,.5);
  border:1px solid var(--line2);color:var(--mut)}
.lvl--done .lvl__ic{color:var(--grn);background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.35)}

/* ===== Garage ===== */
.garage{position:absolute;inset:74px 0 0;display:flex;gap:0;flex-direction:row}
.garage__panel{width:min(400px,42vw);flex:none;padding:22px;overflow-y:auto;
  background:linear-gradient(90deg,rgba(9,13,22,.9),rgba(9,13,22,.62));
  border-inline-start:1px solid var(--line);display:flex;flex-direction:column;gap:18px;z-index:6}
.garage__list{flex:1;min-width:0;padding:22px;overflow-y:auto;display:flex;align-items:flex-start}
.car-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.car-head h3{font-size:26px;font-weight:900}
.car-desc{color:var(--mut);font-size:14px;line-height:1.7}
.stats{display:flex;flex-direction:column;gap:12px}
.stat{display:grid;grid-template-columns:96px 1fr 42px;align-items:center;gap:10px;font-size:13px}
.stat label{color:var(--mut);font-weight:600}
.stat b{font-family:var(--fo);font-size:13px;color:var(--cy);text-align:left}
.bar{height:9px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:9px;
  background:linear-gradient(90deg,var(--cy),var(--vi));transition:width .45s cubic-bezier(.2,.8,.2,1)}
.paints label{font-size:13px;color:var(--mut);font-weight:600}
.paint-row{display:flex;gap:9px;margin-top:9px;flex-wrap:wrap}
.paint-row button{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.2);
  transition:transform .18s,border-color .18s;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.paint-row button:hover{transform:scale(1.14)}
.paint-row button.on{border-color:#fff;transform:scale(1.16);box-shadow:0 0 0 3px rgba(34,211,238,.45)}
.garage__cta{display:flex;gap:10px;margin-top:auto}
.garage__cta .btn{flex:1}
.own-badge{align-self:center;color:var(--grn);font-weight:800;font-size:14px}
.car-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));width:100%}
.car-card{border-radius:var(--r-sm);border:1px solid var(--line);padding:13px;background:var(--panel2);
  text-align:right;display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden;
  transition:transform .2s,border-color .2s,box-shadow .2s}
.car-card:hover{transform:translateY(-3px);border-color:var(--line2)}
.car-card.on{border-color:var(--cy);box-shadow:0 0 0 1px var(--cy),0 12px 30px rgba(34,211,238,.2)}
.car-card--locked{opacity:.62}
.car-card__sw{height:46px;border-radius:9px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(0,0,0,.25))}
.car-card__sw i{position:absolute;inset-inline:16px;bottom:6px;height:20px;border-radius:6px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.car-card b{font-size:15.5px;font-weight:800}
.car-card small{color:var(--mut);font-size:12px}
.car-card .price{font-family:var(--fo);font-size:14px;font-weight:800;color:var(--gold);display:flex;align-items:center;gap:6px}
.car-card .price svg{width:15px;height:15px;flex:none}
.car-card .badge{position:absolute;top:9px;inset-inline-end:9px;font-size:11px;font-weight:800;
  padding:3px 9px;border-radius:999px}
.badge--own{background:rgba(52,211,153,.2);color:#a7f3d0;border:1px solid rgba(52,211,153,.4)}
.badge--eq{background:rgba(34,211,238,.2);color:#cffafe;border:1px solid rgba(34,211,238,.45)}

/* ===== Settings ===== */
.settings-card,.credit-card{max-width:760px;margin:8px auto;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);padding:8px 20px;backdrop-filter:var(--glass)}
.credit-card{padding:18px 20px;text-align:center;color:var(--mut);font-size:14px;line-height:1.9}
.credit-card b{color:var(--txt)}
.setting{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 0;
  border-bottom:1px solid var(--line)}
.setting:last-child{border-bottom:0}
.setting h4{font-size:16px;font-weight:700}
.setting p{color:var(--mut);font-size:13px;margin-top:3px}
.switch{width:56px;height:31px;border-radius:999px;background:rgba(255,255,255,.12);
  border:1px solid var(--line2);position:relative;flex:none;transition:background .25s}
.switch i{position:absolute;top:3px;inset-inline-end:3px;width:23px;height:23px;border-radius:50%;background:#b8c4d8;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4),background .25s}
.switch[aria-checked="true"]{background:linear-gradient(135deg,var(--cy),#3b82f6);border-color:transparent}
.switch[aria-checked="true"] i{background:#fff;transform:translateX(-25px)}
[dir="rtl"] .switch[aria-checked="true"] i{transform:translateX(-25px)}
.seg{display:flex;border-radius:12px;overflow:hidden;border:1px solid var(--line2);flex:none}
.seg button{padding:10px 20px;font-weight:700;font-size:14px;background:rgba(255,255,255,.04);transition:background .2s}
.seg button.on{background:linear-gradient(135deg,var(--cy),var(--vi));color:#04121a}

/* ===== HUD ===== */
#hud{position:fixed;inset:0;z-index:4;pointer-events:none;font-family:var(--f)}
#hud button{pointer-events:auto}
.hud__top{position:absolute;top:0;inset-inline:0;display:flex;align-items:center;gap:14px;padding:14px 18px;
  background:linear-gradient(180deg,rgba(5,8,14,.75),transparent)}
.hud__level{display:flex;align-items:center;gap:12px;flex:1;min-width:0;font-weight:700;font-size:15px}
.hud__track{position:relative;flex:1;max-width:420px;height:10px;border-radius:9px;background:rgba(255,255,255,.13);overflow:hidden}
.hud__track i{position:absolute;inset-block:0;inset-inline-start:0;width:0;border-radius:9px;
  background:linear-gradient(90deg,var(--gold),#f97316);transition:width .18s linear}
.hud__goal{font-family:var(--fo);font-size:14px;color:var(--gold);white-space:nowrap;font-weight:800}
.hud__timer{font-family:var(--fo);font-size:clamp(22px,3.4vw,34px);font-weight:900;letter-spacing:1px;
  text-shadow:0 2px 16px rgba(0,0,0,.8);padding:4px 14px;border-radius:12px;background:rgba(5,8,14,.4)}
.hud__timer.warn{color:#ffb3c0;animation:pulseW .85s infinite}
@keyframes pulseW{50%{opacity:.45}}
.icon-btn--hud{width:42px;height:42px;background:rgba(5,8,14,.5)}
.hud__wallet{position:absolute;top:82px;inset-inline-start:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
#hud-combo-wrap{opacity:0;transition:opacity .25s}
#hud-combo-wrap.on{opacity:1}
#minimap{position:absolute;top:82px;inset-inline-end:18px;width:180px;height:110px;border-radius:14px;
  border:1px solid var(--line2);background:rgba(5,8,14,.5);backdrop-filter:blur(6px)}
.hud__dash{position:absolute;bottom:20px;inset-inline-end:20px;display:flex;align-items:flex-end;gap:16px}
.dash__bars{display:flex;flex-direction:column;gap:10px;padding-bottom:14px}
.mini-bar{display:flex;align-items:center;gap:9px}
.mini-bar__ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;padding:7px;
  background:rgba(5,8,14,.55);border:1px solid var(--line)}
.mini-bar__ic svg{width:17px;height:17px}
.mini-bar__ic--hp{color:var(--rose)}
.mini-bar__ic--nos{color:var(--cy)}
.mini-bar__t{width:118px;height:13px;border-radius:9px;background:rgba(0,0,0,.55);overflow:hidden;border:1px solid var(--line)}
.mini-bar__t i{display:block;height:100%;width:100%;transition:width .2s}
#bar-hp{background:linear-gradient(90deg,#f43f5e,#fb7185)}
#bar-nos{width:0;background:linear-gradient(90deg,#22d3ee,#8b5cf6)}

.gauge{position:relative;width:clamp(140px,17vw,196px);aspect-ratio:1}
.gauge svg{overflow:visible}
.gauge__bg{fill:none;stroke:rgba(255,255,255,.13);stroke-width:15;stroke-linecap:round}
.gauge__fill{fill:none;stroke:url(#gGrad);stroke-width:15;stroke-linecap:round;
  stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset .15s linear;
  filter:drop-shadow(0 0 8px rgba(34,211,238,.5))}
.gauge__needle{stroke:#fff;stroke-width:4;stroke-linecap:round;transform-origin:100px 100px;
  transition:transform .12s linear;filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}
.gauge__hub{fill:#e9eefa;stroke:rgba(0,0,0,.4);stroke-width:3}
.gauge__read{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-top:26%}
.gauge__read b{font-family:var(--fo);font-size:clamp(26px,4.4vw,44px);font-weight:900;line-height:1;
  text-shadow:0 2px 18px rgba(0,0,0,.85)}
.gauge__read span{font-size:11px;color:var(--mut);letter-spacing:2px;margin-top:3px}
.hud__msg{position:absolute;top:34%;inset-inline:0;text-align:center;font-size:clamp(24px,4.6vw,52px);
  font-weight:900;opacity:0;transition:opacity .3s,transform .3s;transform:scale(.8);
  text-shadow:0 4px 30px rgba(0,0,0,.9);pointer-events:none}
.hud__msg.on{opacity:1;transform:none}
.hud__msg.gold{color:var(--gold)}
.hud__msg.grn{color:var(--grn)}
.hud__msg.rose{color:var(--rose)}

/* ===== Touch ===== */
#touch{position:fixed;inset:0;z-index:4;pointer-events:none}
.touch__pad{position:absolute;bottom:22px;inset-inline-start:20px;display:flex;gap:14px}
.touch__pad--r{inset-inline-start:auto;inset-inline-end:20px;align-items:flex-end}
.tbtn{pointer-events:auto;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;padding:20px;
  background:rgba(10,15,26,.6);border:1.5px solid var(--line2);backdrop-filter:blur(8px);
  color:var(--txt);transition:transform .12s,background .12s}
.tbtn svg{width:30px;height:30px}
.tbtn:active,.tbtn.on{transform:scale(.93);background:rgba(34,211,238,.3);border-color:var(--cy)}
.tbtn--nos{background:rgba(34,211,238,.16);border-color:rgba(34,211,238,.5);color:#cffafe}
.tbtn--brake{background:rgba(244,63,94,.16);border-color:rgba(244,63,94,.5);color:#ffd7de}
.tbtn--gas{width:88px;height:88px;background:rgba(52,211,153,.16);border-color:rgba(52,211,153,.5);color:#bbf7d0}

/* ===== Modals ===== */
.modal{position:fixed;inset:0;z-index:9;display:grid;place-items:center;padding:20px;
  background:rgba(4,7,13,.72);backdrop-filter:blur(9px);animation:fadeUp .25s both}
.modal__card{width:min(520px,94vw);max-height:92vh;overflow-y:auto;border-radius:var(--r-lg);padding:28px;
  background:linear-gradient(165deg,rgba(24,32,52,.96),rgba(9,13,22,.98));border:1px solid var(--line2);
  box-shadow:var(--sh);text-align:center;display:flex;flex-direction:column;gap:16px}
.modal__card h2{font-size:28px;font-weight:900}
.modal__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin:4px 0}
.modal__stats div{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:11px}
.modal__stats span{display:block;color:var(--mut);font-size:12.5px;margin-bottom:4px}
.modal__stats b{font-family:var(--fo);font-size:20px;color:var(--cy)}
.modal__actions{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.modal__actions.row{flex-direction:row;flex-wrap:wrap}
.result__badge{font-size:56px;line-height:1;animation:pop .5s both}
.stars{display:flex;justify-content:center;gap:12px;font-size:40px}

.unlock-note{background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.4);color:#a7f3d0;
  padding:11px;border-radius:12px;font-weight:800;animation:pop .4s both}
.howto{display:flex;flex-direction:column;gap:9px;text-align:right}
.howto__row{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:12px;padding:9px 13px}
.howto__row p{margin-inline-start:auto;color:var(--mut);font-size:14px}
.key{min-width:40px;padding:6px 11px;border-radius:9px;font-family:var(--fo);font-size:13px;font-weight:800;
  background:rgba(34,211,238,.13);border:1px solid rgba(34,211,238,.34);color:#cffafe;text-align:center}
.howto__note{color:var(--mut);font-size:13.5px;line-height:1.85;text-align:right}

/* ===== Toast ===== */
#toast-wrap{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:20;
  display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
.toast{padding:12px 22px;border-radius:14px;font-weight:800;font-size:15px;background:rgba(16,22,36,.95);
  border:1px solid var(--line2);box-shadow:var(--sh);animation:fadeUp .3s both;display:flex;gap:9px;align-items:center}
.toast svg{width:19px;height:19px}
.toast--ok{border-color:rgba(52,211,153,.5);color:#a7f3d0}
.toast--err{border-color:rgba(244,63,94,.5);color:#ffd7de}
.toast--gold{border-color:rgba(255,197,61,.5);color:#ffe6a8}

/* ===== Loader ===== */
#loader{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:var(--bg);
  transition:opacity .5s,visibility .5s}
#loader.off{opacity:0;visibility:hidden}
.loader__inner{text-align:center;color:var(--mut)}
.loader__wheel{width:66px;height:66px;margin:0 auto 16px;color:var(--cy);animation:spin 1.5s linear infinite}
.loader__bar{width:210px;height:5px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;margin:16px auto 0}
.loader__bar i{display:block;height:100%;width:35%;border-radius:5px;background:linear-gradient(90deg,var(--cy),var(--vi));
  animation:loadslide 1.15s ease-in-out infinite}
@keyframes loadslide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* ===== Responsive ===== */
@media (max-width:860px){
  .garage{flex-direction:column-reverse}
  .garage__panel{width:100%;height:58%;border-inline-start:0;border-top:1px solid var(--line)}
  .garage__list{height:42%;padding:16px}
  .car-list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .btn--xl{min-width:0;width:min(340px,84vw);padding:17px 30px;font-size:19px}
  .menu-nav .btn{min-width:0;width:min(340px,84vw)}
  .hud__goal{font-size:12px}
  #minimap{width:124px;height:76px;top:74px}
  .hud__wallet{top:74px}
  .mini-bar__t{width:82px}
  .modal__card{padding:22px;border-radius:20px}
}
@media (max-width:520px){
  .hud__level span:first-child{display:none}
  .stat{grid-template-columns:80px 1fr 38px;font-size:12px}
}
@media (pointer:coarse){#touch:not(.hidden){display:block}}
@media (pointer:fine){#touch{display:none !important}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}
#gl{touch-action:none}
.tbtn{touch-action:none}
.modal,.screen{touch-action:pan-y}
.lvl,.car-card,.btn{cursor:pointer}