:root{
  --ink:#0E1113;
  --panel:rgba(20,23,26,.93);
  --panel-solid:#14171A;
  --panel2:#191D21;
  --line:#3A4046;
  --text:#E8E5DE;
  --muted:#9AA0A6;
  --amber:#D9A227;
  --amber-soft:#F0C765;
  --red:#C4553B;
  --green:#7FA05A;
  --blue:#78A0C0;
  /* مقاسات أزرار التحكم — تتقلّص تلقائيًا حتى لا تخرج عن الشاشة */
  --steer-size:clamp(54px,16.5vw,86px);
  --gas-w:clamp(62px,19vw,98px);
  --gas-h:clamp(78px,22vw,112px);
  --brake-w:clamp(52px,16vw,80px);
  --brake-h:clamp(64px,18.5vw,92px);
  --hand-size:clamp(40px,12.5vw,62px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--text);
  font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;line-height:1.5;
  -webkit-user-select:none;user-select:none;
  overscroll-behavior:none;
}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;}
#app{position:fixed;inset:0;overflow:hidden;}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;}
.hidden{display:none !important;}
.muted{color:var(--muted);font-size:13px;margin:0 0 12px;}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ---------------- HUD ---------------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:10;}
#hud > *{pointer-events:none;}
#hud button{pointer-events:auto;}
.hud-top{
  position:absolute;inset-block-start:10px;inset-inline:10px;
  display:flex;gap:8px;align-items:flex-start;
}
.hud-side{display:flex;flex-direction:column;gap:6px;width:88px;flex:0 0 auto;}
.panel.mini{padding:4px;width:88px;height:88px;border-radius:14px;}
#minimap{width:80px;height:80px;display:block;border-radius:10px;}
.dmg-chip{
  pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:0;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:4px 2px;font-size:10px;line-height:1.25;color:var(--muted);
}
.chip-val{font-size:13px;font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums;}
.chip-val.bad{color:var(--red);}

.speedo{
  flex:1 1 auto;min-width:0;position:relative;
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:16px;
}
.tach{width:62px;height:62px;flex:0 0 auto;}
.tach-track{fill:none;stroke:#2A2F34;stroke-width:7;stroke-dasharray:171.9 257.6;stroke-linecap:round;}
.tach-fill{fill:none;stroke:var(--amber);stroke-width:7;stroke-dasharray:0 257.6;stroke-linecap:round;transition:stroke .2s;}
#needle line{stroke:#E8E5DE;stroke-width:2.6;stroke-linecap:round;}
.tach-hub{fill:#E8E5DE;}
.speedo-num{display:flex;flex-direction:column;line-height:1;min-width:0;}
.speedo-num b{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.speedo-num span{font-size:10px;color:var(--muted);margin-block-start:2px;}
.gear{
  margin-inline-start:auto;font-weight:700;font-size:17px;color:var(--amber);
  background:#20262b;border:1px solid var(--line);border-radius:9px;
  padding:4px 8px;font-variant-numeric:tabular-nums;min-width:34px;text-align:center;
}
.hud-col{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;}
.icobtn{
  width:44px;height:44px;border-radius:13px;background:var(--panel);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--text);
  transition:transform .12s ease,background .12s ease;
}
.icobtn.small{width:44px;height:36px;}
.icobtn:active{transform:scale(.93);background:#242a2f;}
.icobtn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;}

.dmg-panel{
  position:absolute;inset-block-start:150px;inset-inline-start:10px;width:min(280px,74vw);
  padding:12px;z-index:5;pointer-events:auto;
}
.dmg-head{font-size:12px;color:var(--muted);margin-block-end:8px;}
.dmg-list{display:flex;flex-direction:column;gap:7px;}
.dmg-row{display:grid;grid-template-columns:1fr 62px 30px;gap:6px;align-items:center;font-size:11.5px;}
.dmg-name{color:#C9C6BF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dmg-bar{height:6px;border-radius:3px;background:#2A2F34;overflow:hidden;}
.dmg-bar i{display:block;height:100%;width:100%;background:var(--green);border-radius:3px;transition:width .25s ease,background .25s ease;}
.dmg-val{text-align:end;font-variant-numeric:tabular-nums;color:var(--muted);}
.dmg-note{font-size:10.5px;color:#6C7378;margin-block-start:9px;line-height:1.4;}

.toast{
  position:absolute;inset-block-start:50%;inset-inline:auto;left:50%;transform:translate(-50%,-50%);
  background:rgba(20,23,26,.95);border:1px solid var(--line);color:var(--text);
  padding:10px 16px;border-radius:12px;font-size:13px;z-index:20;pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}

/* ---------------- CONTROLS ---------------- */
#controls{
  position:absolute;inset-block-end:0;inset-inline:0;
  display:flex;justify-content:space-between;align-items:flex-end;gap:8px;
  padding:0 10px 16px;pointer-events:none;direction:ltr;z-index:12;
}
#controls > *{pointer-events:auto;}
.ctrl-left{display:flex;align-items:flex-end;gap:8px;flex:0 0 auto;}
.ctrl-right{display:flex;align-items:flex-end;gap:8px;flex:0 0 auto;}
.steerbtn{
  width:var(--steer-size);height:var(--steer-size);flex:0 0 auto;
  border-radius:24px;display:grid;place-items:center;
  background:linear-gradient(180deg,#2C333A,#161B20);
  border:1px solid #4A535C;color:#DCE2E7;
  box-shadow:0 8px 22px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .08s ease,background .08s ease,border-color .08s ease,color .08s ease;
  touch-action:none;
}
.steerbtn svg{width:clamp(24px,7vw,38px);height:clamp(24px,7vw,38px);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.steerbtn.on{transform:scale(.93);background:linear-gradient(180deg,#454F3A,#26301C);border-color:var(--amber);color:var(--amber-soft);}
.pedal{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:var(--brake-w);height:var(--brake-h);flex:0 0 auto;border-radius:22px;
  background:linear-gradient(180deg,#2A3036,#171C21);
  border:1px solid #4A525A;color:#C9C6BF;font-size:11px;font-weight:600;
  box-shadow:0 8px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .08s ease,background .08s ease;
  touch-action:none;
}
.pedal svg{width:clamp(20px,5.6vw,26px);height:clamp(20px,5.6vw,26px);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pedal.gas{width:var(--gas-w);height:var(--gas-h);border-radius:24px;background:linear-gradient(180deg,#3B4A2E,#1D2816);border-color:#617846;color:#DCE8C6;}
.pedal.brake{background:linear-gradient(180deg,#4A2C26,#28180F);border-color:#7C4436;color:#F2C9BE;}
.pedal.hand{width:var(--hand-size);height:var(--hand-size);border-radius:50%;background:linear-gradient(180deg,#2A3036,#171C21);}
.pedal.hand svg{width:22px;height:22px;}
.pedal.on{transform:scale(.93);filter:brightness(1.4);}
.pedal.gas.on{background:linear-gradient(180deg,#67883F,#3B5226);}
.pedal.brake.on{background:linear-gradient(180deg,#8B4230,#4A221A);}

/* ---------------- GRADE / VIGNETTE ---------------- */
#grade{
  position:absolute;inset:0;pointer-events:none;z-index:5;
  background:
    radial-gradient(125% 92% at 50% 42%, rgba(255,246,220,.05) 0%, rgba(0,0,0,0) 46%, rgba(6,8,10,.44) 100%),
    linear-gradient(180deg, rgba(10,14,18,.16) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 76%, rgba(8,10,12,.32) 100%);
}

/* ------- ROTATE HINT (شريط صغير لا يغطي الشاشة ولا يمنع اللمس) ------- */
#rotateHint{
  position:absolute;inset-block-start:104px;inset-inline:0;z-index:22;
  display:flex;justify-content:center;padding:0 16px;
  pointer-events:none;
  animation:rotFade .3s ease-out;
}
#rotateHint.hidden{display:none !important;}
.rot-card{
  display:flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;
  font-size:12px;line-height:1.35;color:var(--text);
  max-width:min(330px,90vw);
}
.rot-card span{overflow:hidden;text-overflow:ellipsis;}
.rot-icon{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:rotHint 2.6s ease-in-out infinite;}
@keyframes rotHint{0%,38%{transform:rotate(0)}68%,100%{transform:rotate(-90deg)}}
@keyframes rotFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------------- SCREENS ---------------- */
.screen{position:absolute;inset:0;z-index:30;}
.screen.overlay{
  background:rgba(8,10,12,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;
}
.modal{
  width:100%;max-width:360px;padding:20px;display:flex;flex-direction:column;gap:10px;
  border-radius:22px;max-height:88vh;overflow:auto;
}
.modal.wide{max-width:420px;}
.modal h2{margin:0 0 2px;font-size:20px;font-weight:700;}
.modal p{margin:0 0 4px;}
.btn{
  min-height:50px;border-radius:14px;font-size:15px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;transition:transform .1s ease,filter .12s ease;
}
.btn:active{transform:scale(.985);filter:brightness(1.12);}
.btn.primary{background:linear-gradient(180deg,var(--amber-soft),var(--amber));color:#20180A;border-color:#E0B347;}
.btn.ghost{background:#1D2227;border-color:var(--line);color:var(--text);}
.linkbtn{background:none;color:var(--muted);font-size:12px;padding:8px;text-decoration:underline;text-underline-offset:3px;}

/* ---------------- GARAGE ---------------- */
#garage{pointer-events:none;}
#garage > *{pointer-events:auto;}
.g-head{
  position:absolute;inset-block-start:10px;inset-inline:14px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:19px;letter-spacing:.01em;}
.brand.big{font-size:26px;}
.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 14px var(--amber);}
.g-pb{font-size:11.5px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:5px 11px;}
.g-pb b{color:var(--amber);}

.garage-sheet{
  position:absolute;inset-inline:0;inset-block-end:0;
  max-height:62vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border-radius:24px 24px 0 0;padding:8px 14px 14px;
  display:flex;flex-direction:column;gap:12px;
  border-bottom:0;
}
.sheet-grip{width:38px;height:4px;border-radius:2px;background:#3F464D;margin:2px auto 4px;}
.g-block{display:flex;flex-direction:column;gap:8px;}
.g-title{font-size:12px;color:var(--muted);font-weight:500;}
.car-list{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.car-card{
  border:1px solid var(--line);background:#1A1F24;border-radius:13px;
  padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:border-color .15s,background .15s,transform .1s;
}
.car-card:active{transform:scale(.97);}
.car-card.sel{border-color:var(--amber);background:#252118;}
.car-card .cc-name{font-size:11.5px;font-weight:600;}
.car-card .cc-tag{font-size:9px;color:var(--muted);text-align:center;line-height:1.2;}
.car-card svg{width:34px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;color:#8A939A;}
.car-card.sel svg{color:var(--amber);}

.opt-row{display:flex;flex-direction:column;gap:6px;}
.opt-label{font-size:11.5px;color:var(--muted);}
.swatches{display:flex;gap:7px;flex-wrap:wrap;}
.sw{width:32px;height:32px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);}
.sw.sel{border-color:var(--amber);}
.chips{display:flex;gap:6px;flex-wrap:wrap;}
.chip{
  padding:7px 12px;border-radius:11px;background:#1A1F24;border:1px solid var(--line);
  font-size:12px;color:#C9C6BF;transition:all .14s;
}
.chip:active{transform:scale(.96);}
.chip.sel{background:#2A2418;border-color:var(--amber);color:var(--amber-soft);font-weight:600;}

.spec-strip{
  display:flex;gap:6px;flex-wrap:wrap;font-size:10.5px;color:var(--muted);
  border-top:1px solid #262C31;padding-block-start:9px;
}
.spec-strip span{background:#191E23;border:1px solid #2C3238;padding:4px 8px;border-radius:8px;font-variant-numeric:tabular-nums;}
.spec-strip b{color:#DCD8CF;}
.g-foot{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;}

.score-big{display:flex;flex-direction:column;align-items:center;gap:0;margin:6px 0 4px;}
.score-big b{font-size:44px;line-height:1;color:var(--amber);font-variant-numeric:tabular-nums;}
.score-big span{font-size:11.5px;color:var(--muted);}
.res-sub{text-align:center;font-size:12.5px;color:#C9C6BF;margin-block-end:6px;}
.board-body{max-height:44vh;overflow:auto;display:flex;flex-direction:column;gap:6px;}
.board-row{display:grid;grid-template-columns:34px 1fr auto;gap:8px;font-size:13px;align-items:center;
  padding:8px 10px;border-radius:10px;background:#191E23;border:1px solid #262C31;}
.board-row.you{border-color:var(--amber);background:#231F16;}
.board-row .rank{color:var(--muted);font-variant-numeric:tabular-nums;}
.board-row .sc{color:var(--amber);font-weight:700;font-variant-numeric:tabular-nums;}

/* ---------------- LOADING ---------------- */
#loading{background:radial-gradient(circle at 50% 40%,#1D2329,#0B0E10 70%);display:grid;place-items:center;z-index:60;}
.load-inner{display:flex;flex-direction:column;align-items:center;gap:10px;}
.load-bar{width:150px;height:3px;border-radius:2px;background:#242A30;overflow:hidden;}
.load-bar i{display:block;height:100%;width:40%;background:var(--amber);border-radius:2px;animation:ld 1s ease-in-out infinite;}
@keyframes ld{0%{transform:translateX(120%)}100%{transform:translateX(-260%)}}

/* ---------------- RESPONSIVE ---------------- */
@media (min-width:900px){
  .hud-top{inset-block-start:16px;inset-inline:18px;gap:12px;}
  .hud-side{width:118px;}
  .panel.mini{width:118px;height:118px;}
  #minimap{width:110px;height:110px;}
  .speedo{padding:10px 16px;gap:14px;}
  .tach{width:78px;height:78px;}
  .speedo-num b{font-size:40px;}
  .dmg-panel{inset-block-start:190px;inset-inline-start:18px;}
  #controls{padding:0 34px 26px;}
  .steerbtn{width:96px;height:96px;}
  .steerbtn svg{width:42px;height:42px;}
  .pedal.gas{width:104px;height:120px;}
  .pedal.brake{width:88px;height:100px;}
  .garage-sheet{
    inset-block-end:auto;inset-block-start:88px;inset-inline-start:auto;inset-inline-end:28px;
    inset-block:88px 28px;
    width:392px;max-height:none;border-radius:22px;border-bottom:1px solid var(--line);
    inset-inline:auto;
  }
  .g-head{inset-inline:28px;inset-block-start:24px;}
  .car-list{grid-template-columns:repeat(2,1fr);}
  .garage-sheet{padding:18px;}
}
@media (max-width:400px){
  .speedo-num b{font-size:26px;}
  .tach{width:54px;height:54px;}
  .hud-side{width:80px;}
  .panel.mini{width:80px;height:80px;}
  #minimap{width:72px;height:72px;}
  .g-pb{font-size:10.5px;padding:4px 9px;}
  #rotateHint{inset-block-start:88px;}
}
@media (max-height:700px){
  .garage-sheet{max-height:68vh;}
  #controls{padding-bottom:12px;}
}

/* ---------- وضع الجوال الأفقي ---------- */
@media (orientation:landscape) and (max-height:560px){
  .g-head{inset-block-start:8px;inset-inline:14px;}
  .brand{font-size:16px;}
  .brand.big{font-size:24px;}
  .garage-sheet{
    inset-block:50px 10px;inset-inline-start:auto;inset-inline-end:10px;
    width:min(400px,50vw);max-height:none;border-radius:18px;
    border-bottom:1px solid var(--line);padding:10px 12px 12px;
  }
  .sheet-grip{display:none;}
  .spec-strip{display:none;}
  .car-list{grid-template-columns:repeat(4,1fr);}
  .hud-top{inset-block-start:8px;inset-inline:8px;gap:6px;}
  .hud-side{width:64px;}
  .panel.mini{width:64px;height:64px;padding:3px;border-radius:12px;}
  #minimap{width:58px;height:58px;border-radius:8px;}
  .dmg-chip{font-size:9px;padding:3px 2px;}
  .speedo{padding:6px 10px;gap:8px;border-radius:14px;}
  .tach{width:50px;height:50px;}
  .speedo-num b{font-size:24px;}
  .icobtn{width:40px;height:40px;border-radius:11px;}
  .icobtn.small{width:40px;height:32px;}
  .dmg-panel{inset-block-start:78px;inset-inline-start:8px;}
  #controls{padding:0 14px 12px;}
  .steerbtn{width:80px;height:80px;}
  .pedal.gas{width:92px;height:102px;}
  .pedal.brake{width:76px;height:84px;}
  .pedal.hand{width:56px;height:56px;}
  .modal{max-height:94vh;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}