/****************************************/
/* common styles used for v1 through v4 */
/****************************************/

body          { font-family: Arial, Helvetica, sans-serif; }
#stats        { border: 2px solid black; }
#controls     { width: 28em; float: left; padding: 1em; font-size: 0.7em; }
#controls th  { text-align: right; vertical-align: middle; }
#instructions { clear: left; float: left; width: 17em; padding: 1em; border: 1px solid black; box-shadow: 0 0 5px black; }
#racer        { position: relative; z-index: 0; width: 640px; height: 480px; margin-left: 20em; border: 2px solid black; }
#canvas       { position: absolute; z-index: 0; width: 640px; height: 480px; z-index: 0; background-color: #72D7EE; }
#mute         { background-position:   0px 0px; width: 32px; height: 32px; background: url(images/mute.png); display: inline-block; cursor: pointer; position: absolute; margin-left: 20em; }
#mute.on      { background-position: -32px 0px; }

/**************************************************/
/* rudimentary heads up display (only used in v4) */
/**************************************************/

#hud                   { position: absolute; z-index: 1; width: 640px; padding: 5px 0; font-family: Verdana, Geneva, sans-serif; font-size: 0.8em; background-color: rgba(255,0,0,0.4); color: black; border-bottom: 2px solid black; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
#hud .hud              { background-color: rgba(255,255,255,0.6); padding: 5px; border: 1px solid black; margin: 0 5px; transition-property: background-color; transition-duration: 2s; -webkit-transition-property: background-color; -webkit-transition-duration: 2s; }
#hud #speed            { float: right; }
#hud #current_lap_time { float: left;  }
#hud #last_lap_time    { float: left; display: none;  }
#hud #fast_lap_time    { display: block; width: 12em;  margin: 0 auto; text-align: center; transition-property: background-color; transition-duration: 2s; -webkit-transition-property: background-color; -webkit-transition-duration: 2s; }
#hud .value            { color: black; font-weight: bold; }
#hud .fastest          { background-color: rgba(255,215,0,0.5); }

/* =========================
   Responsive / Fullscreen UI override (v4)
   ========================= */

html, body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #000;
}

/* game fullscreen */
#racer {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
}

/* canvas fullscreen */
#canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #72D7EE;
}

/* HUD full width */
#hud {
  width: 100%;
  left: 0;
  top: 0;
  box-sizing: border-box;
}

/* Loading label */
#loading {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 5;
  padding: 6px 10px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border-radius: 10px;
  font-size: 12px;
}

/* Menu button */
#btnUI {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

/* mute on game */
#mute {
  position: absolute;
  top: 64px;
  right: 12px;
  z-index: 20;
  margin-left: 0; /* neutralize old margin-left */
}

/* Overlay panel */
#uiPanel {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: flex-end;
}

#uiPanel.hidden {
  display: none;
}

#uiPanelInner {
  width: min(460px, 92vw);
  height: 100%;
  background: #111;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
  overflow: auto;
}

#uiHeader{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 10px;
}

#btnCloseUI{
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  cursor: pointer;
}

/* controls & instructions inside panel */
#controls {
  float: none;
  width: 100%;
  padding: 0;
  font-size: 0.85em;
}

#instructions {
  float: none;
  clear: none;
  width: auto;
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: none;
  background: rgba(255,255,255,0.06);
  color: #fff;
}

/* =========================
   Responsive / Fullscreen override (v4)
   ========================= */

html, body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #000;
}

#racer {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
}

#canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #72D7EE;
}

/* HUD full width + جا برای دکمه‌ها */
#hud {
  width: 100%;
  left: 0;
  top: 0;
  box-sizing: border-box;
  padding-right: 110px; /* تا با دکمه‌های سمت راست تداخل نکند */
}

/* دکمه منو و آیکن صدا کمی پایین‌تر از HUD */
#btnUI {
  position: absolute;
  right: 12px;
  top: calc(env(safe-area-inset-top) + 52px);
  z-index: 20;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

#mute {
  position: absolute;
  right: 12px;
  top: calc(env(safe-area-inset-top) + 104px);
  z-index: 20;
  margin-left: 0; /* خنثی کردن margin-left قدیمی */
}

/* پنل منو */
#uiPanel {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: flex-end;
}

#uiPanel.hidden { display: none; }

#uiPanel {
  /* FIX (اسکرول‌نشدن منوی تنظیمات روی موبایل - علت ریشه‌ای): #uiPanel
     داخل #racer قرار دارد و #racer قانون touch-action:none دارد (برای
     جلوگیری از gesture/اسکرول ناخواسته حین رانندگی). طبق مشخصات CSS این
     محدودیت به فرزندها هم می‌رسد مگر اینکه صریحاً override شوند - یعنی
     موبایل عملاً اجازه‌ی اسکرول لمسیِ عمودی داخل همین پنل را هم نمی‌داد و
     گزینه‌های پایینیِ جدول (رزولوشن به بعد، خصوصاً «حالت کنترل لمسی»)
     غیرقابل‌دسترس می‌ماندند. اینجا صریحاً pan-y (فقط اسکرول عمودی مجاز)
     برمی‌گردانیم.
  */
  touch-action: pan-y;
}
#uiPanelInner {
  width: min(460px, 92vw);
  height: 100%;
  background: #111;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
  overflow: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#controls {
  float: none;
  width: 100%;
  padding: 0;
  font-size: 0.85em;
}

#instructions {
  float: none;
  clear: none;
  width: auto;
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: none;
  background: rgba(255,255,255,0.06);
  color: #fff;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

#canvas {
  touch-action: none;              /* مهم: جلو gesture/scroll روی خود canvas */
  -webkit-user-select: none;
  user-select: none;
}

#touchControls {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  display: none;                 /* فقط موبایل */
  gap: 12px;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 9999;
  pointer-events: none;          /* خود container کلیک نگیره، فقط دکمه‌ها */
}

#touchControls .tc-left, #touchControls .tc-right {
  display: flex;
  gap: 12px;
  pointer-events: auto;
}

.tcBtn {
  min-width: 64px;
  min-height: 64px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 18px;
  -webkit-tap-highlight-color: transparent;
}

.tcWide { min-width: 92px; }

//---------------------------------------------------------------------------

setKeyListener: function(keys) {

  // ذخیره لیست کلیدها تا بتوانیم از بیرون (تاچ) هم همان اکشن‌ها را صدا بزنیم
  Game._keys = keys;

  Game._onkey = function(keyCode, mode) {
    var n, k;
    for(n = 0 ; n < Game._keys.length ; n++) {
      k = Game._keys[n];
      k.mode = k.mode || 'up';
      if ((k.key == keyCode) || (k.keys && (k.keys.indexOf(keyCode) >= 0))) {
        if (k.mode == mode) {
          k.action.call();
        }
      }
    }
  };

  Dom.on(document, 'keydown', function(ev) { Game._onkey(ev.keyCode, 'down'); } );
  Dom.on(document, 'keyup',   function(ev) { Game._onkey(ev.keyCode, 'up');   } );
},

// API برای تاچ (و هر ورودی دیگری)
keyDown: function(keyCode) {
  if (Game._onkey) Game._onkey(keyCode, 'down');
},

keyUp: function(keyCode) {
  if (Game._onkey) Game._onkey(keyCode, 'up');
},

//---------------------------------------------------------------------------

setKeyListener: function(keys) {

  // ذخیره لیست کلیدها تا بتوانیم از بیرون (تاچ) هم همان اکشن‌ها را صدا بزنیم
  Game._keys = keys;

  Game._onkey = function(keyCode, mode) {
    var n, k;
    for(n = 0 ; n < Game._keys.length ; n++) {
      k = Game._keys[n];
      k.mode = k.mode || 'up';
      if ((k.key == keyCode) || (k.keys && (k.keys.indexOf(keyCode) >= 0))) {
        if (k.mode == mode) {
          k.action.call();
        }
      }
    }
  };

  Dom.on(document, 'keydown', function(ev) { Game._onkey(ev.keyCode, 'down'); } );
  Dom.on(document, 'keyup',   function(ev) { Game._onkey(ev.keyCode, 'up');   } );
},

// API برای تاچ (و هر ورودی دیگری)
keyDown: function(keyCode) {
  if (Game._onkey) Game._onkey(keyCode, 'down');
},

keyUp: function(keyCode) {
  if (Game._onkey) Game._onkey(keyCode, 'up');
},

/* =========================
   Mobile/Touch hardening
   ========================= */

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

body {
  overflow: hidden; /* جلوگیری از اسکرول صفحه */
  -webkit-text-size-adjust: 100%;
}

/* روی ناحیه بازی اجازه اسکرول/ژست نده */
/* FIX (منوی تنظیمات هرگز اسکرول نمی‌شد - علت ریشه‌ای): #uiPanel/#uiPanelInner
   (منوی ☰) فرزند #racer هستند. طبق مشخصات CSS، اگر یک والد touch-action:none
   داشته باشد، هیچ فرزندی (حتی با touch-action:pan-y روی خودش، مثل
   #uiPanelInner) نمی‌تواند این محدودیت را خنثی کند - یعنی هر چقدر هم منو
   محتوای بیشتر از صفحه داشت (مثل ردیف «حالت کنترل لمسی» که همیشه ته لیست
   بود)، هیچ‌وقت با لمس/کشیدن انگشت قابل اسکرول نبود؛ فقط چیزی که داخل
   ارتفاع صفحه جا می‌شد دیده می‌شد - دقیقاً به همین دلیل هم گوشی‌های
   مختلف (با ارتفاع صفحه‌ی متفاوت) تعداد گزینه‌ی متفاوتی نشان می‌دادند.
   #racer از این لیست حذف شد؛ #canvas/#hud (که واقعاً باید حین رانندگی از
   ژست/اسکرول تصادفی محافظت شوند) دست‌نخورده ماندند. */
#canvas, #hud {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ریسپانسیو برای موبایل/تبلت */
@media (max-width: 900px) {
  /* FIX (منوی تنظیمات موبایل خالی به‌نظر می‌رسید - علت ریشه‌ای): این
     قانون کل جدول #controls (رزولوشن، تعداد خط، عرض جاده، ارتفاع دوربین،
     برد رندر، زاویه دید، چگالی مه، و مهم‌تر از همه «حالت کنترل لمسی») و
     #instructions را روی هر صفحه‌ی ≤900px (یعنی عملاً همه‌ی موبایل‌ها)
     کاملاً مخفی می‌کرد - فقط دکمه‌ی «بازنشانی به پیش‌فرض اتاق» (که بیرون
     از این جدول است) باقی می‌ماند، دقیقاً همان چیزی که در بازی دیده شد.
     این دو المان از قبل (در قوانین #uiPanelInner/#controls/#instructions
     پایین‌تر در همین فایل) کاملاً ریسپانسیو و داخل یک پنل قابل‌اسکرول
     هستند، پس نیازی به مخفی‌کردنشان روی موبایل نیست - دقیقاً موبایل همان
     جایی است که «حالت کنترل لمسی» (تعویض بین دکمه‌ای/کشیدنی) از همه جا
     کاربردی‌تر است. */

  #racer {
    width: 100vw;
    height: 100vh;
    margin-left: 0;
    border: 0;
  }

  #canvas {
    width: 100%;
    height: 100%;
  }

  #hud {
    width: 100%;
  }

  #mute {
    position: fixed;
    right: 12px;
    top: 12px;
    margin-left: 0;
    z-index: 10000;
  }
}

/* =========================
   Touch Controls UI
   ========================= */

#touchControls {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  display: none;               /* فقط وقتی لمس داریم روشن می‌کنیم */
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  z-index: 10001;
  pointer-events: none;        /* خود کانتینر کلیک نگیره */
}

#touchControls .tc-left,
#touchControls .tc-right {
  display: flex;
  gap: 12px;
  pointer-events: auto;
}

.tcBtn {
  min-width: 64px;
  min-height: 64px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.tcWide { min-width: 92px; }

/* یک لایه شفاف برای کنترل با کشیدن انگشت (gesture) */
#touchOverlay {
  position: fixed;
  inset: 0;
  display: none; /* فقط روی تاچ روشن */
  z-index: 10000;
  touch-action: none;
  background: transparent;
}

#leaderboard {
  position: absolute;
  top: 100px;
  left: 20px;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px;
  border-radius: 8px;
  color: #fff;
  font-family: 'Verdana', sans-serif;
  font-size: 14px;
  z-index: 100;
  min-width: 150px;
  pointer-events: none;
}

.rank-item {
  margin: 4px 0;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.rank-item.you {
  background: rgba(255, 215, 0, 0.3);
  border-radius: 4px;
  font-weight: bold;
  color: #ffd700;
}

#loginOverlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.login-box {
  background: #222;
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
  border: 1px solid #444;
  color: #fff;
  user-select: auto !important; /* اجازه کلیک و تایپ */
  pointer-events: auto !important;
}

.login-box h2 {
  margin-top: 0;
  color: #ffd700;
}

.login-box input {
  display: block;
  width: 100%;
  padding: 12px;
  margin: 20px 0;
  border-radius: 8px;
  border: 1px solid #555;
  background: #333;
  color: #fff;
  font-size: 18px;
  box-sizing: border-box;
}

.login-box button {
  background: #ffd700;
  color: #000;
  border: none;
  padding: 12px 30px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.login-box button:hover {
  transform: scale(1.05);
  background: #fff;
}
/* ==========================================================================
   ROBUST LANDSCAPE-FORCE SYSTEM (added)
   جایگزین/غالب بر تمام بلاک‌های چرخش/فول‌اسکرین قدیمی در بالای همین فایل.
   مستقل از Fullscreen API و Orientation Lock API کار می‌کند (که هر دو روی
   iOS Safari و اکثر WebViewها غیرقابل‌اعتماد یا اصلاً پشتیبانی‌نشده‌اند).
   کل <html> با CSS transform می‌چرخد؛ همیشه و روی هر دستگاهی کار می‌کند.
   ========================================================================== */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

/* FIX (چرخش/روتیت - علت ریشه‌ای اینکه همه‌چیز خراب به‌نظر می‌رسید): این
   بلوک قبلاً یک نسخه‌ی قدیمی/متروکِ رویکردِ چرخوندنِ بازی با CSS transform
   بود (html.force-landscape / force-landscape--active) که در تلاش‌های قبلی
   جایگزینِ رویکرد بهتر شده بود، اما موقع جایگزینی هرگز از common.css پاک
   نشد. نتیجه دو مشکل هم‌زمان بود:
     ۱) قانون `.portrait-warning { display: none !important; }` که اینجا
        باقی مانده بود، برای همیشه پیام «لطفاً بچرخانید» را - even وقتی
        جاوااسکریپت کلاس .visible را روی آن ست می‌کرد - مخفی نگه می‌داشت
        (چون هیچ‌جای دیگری !important قوی‌تری برای غلبه بر آن وجود نداشت).
     ۲) ماژول جاوااسکریپتِ واقعی (window.RallyOrientation در v4.final.html)
        اصلاً از این کلاس‌های force-landscape استفاده نمی‌کند؛ به‌جایش کلاس
        .visible (روی خودِ .portrait-warning) و body.rz-hidden-until-rotate
        را toggle می‌کند - اما تا امروز هیچ تعریف CSS ای برای این دو کلاس
        اینجا وجود نداشت، پس toggle کردنشان در JS هیچ اثر بصری‌ای نداشت.
   یعنی این پیام همیشه یا کاملاً پنهان بود (به‌خاطر !important بالا) یا حتی
   بدون آن، هیچ استایلی نداشت که نمایشش دهد. حالا این بلوک با استایل‌های
   واقعیِ مورد نیاز جایگزین شده است. */

/* ظاهر کامل پیام «لطفاً گوشی را بچرخانید» - پیش‌فرض مخفی، فقط با کلاس
   .visible (که خودِ window.RallyOrientation.apply() در v4.final.html ست
   می‌کند) نمایش داده می‌شود. */
.portrait-warning {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #05070a;
  color: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
  font-family: 'Vazir', Tahoma, sans-serif;
}
.portrait-warning.visible {
  display: flex !important;
}
.portrait-warning .rotate-icon {
  font-size: 56px;
  margin-bottom: 10px;
  animation: rzRotateIconSpin 1.8s ease-in-out infinite;
}
@keyframes rzRotateIconSpin {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}
.portrait-warning p {
  font-size: 16px;
  margin: 0;
  color: #fff;
}

/* FIX (نگذاشتن نمایش بازی تا افقی‌شدن واقعی): وقتی body این کلاس را دارد
   (یعنی موبایل + عمودی)، بازی/فرم ورود/پنل‌ها هم از نظر بصری و هم از نظر
   تعامل (کلیک/لمس/کیبورد) کاملاً غیرفعال می‌شوند، نه فقط زیر یک overlay
   پنهان بمانند - دقیقاً طبق درخواست: تا واقعاً افقی نشده، بازی نمایش داده
   نشود. */
body.rz-hidden-until-rotate #racer,
body.rz-hidden-until-rotate #loginOverlay,
body.rz-hidden-until-rotate #uiPanel,
body.rz-hidden-until-rotate #racePanel,
body.rz-hidden-until-rotate #racePanelBackdrop,
body.rz-hidden-until-rotate #touchControls,
body.rz-hidden-until-rotate #touchControlsMedium,
body.rz-hidden-until-rotate #touchControlsAdvanced,
body.rz-hidden-until-rotate #touchOverlay {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   کنترلرهای لمسیِ رانندگی - سه حالت:
     ۱) ساده (دکمه‌ای): #touchControls - چهار دکمه‌ی مجزا (بدون تغییر شکل).
     ۲) استاندارد (بدون شدت): #touchControlsMedium - همون قالبِ کشیدنیِ
        کنترلر آنالوگ، اما بدون سطح‌بندی؛ فقط ۰/۱ (مثل دکمه‌های ساده، فقط
        در قالب دو ناحیه‌ی لمسی).
     ۳) آنالوگ (۳ سطح شدت): #touchControlsAdvanced - همون دو ناحیه، با
        سطح‌بندیِ کم/متوسط/زیاد و هاله‌ی رنگیِ متناسب.
   حالت‌های ۲ و ۳ دقیقاً یک شکل/اندازه/موقعیت دارند (هر دو از همان کلاس‌های
   tc-drag-zone/tc-steer-zone/tc-throttle-zone استفاده می‌کنند) و فقط با
   جاوااسکریپت (setupDragZone با/بدون سطح‌بندی) رفتارشان فرق می‌کند.
   ========================================================================== */
#touchControlsAdvanced,
#touchControlsMedium {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  display: none; /* فقط با انتخاب کاربر روشن می‌شود */
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  /* FIX (روی منوی تنظیمات می‌افتادند): قبلاً z-index بسیار بالایی
     (۱۰۰۰۱) داشتند - خیلی بالاتر از منوی تنظیمات (#uiPanel: 2050) و پنل
     مسابقه (#racePanel: 2100)؛ حالا دقیقاً مثل کنترلر ساده (۹۰۰) زیرِ
     منوها می‌مانند. */
  z-index: 900;
  pointer-events: none;
}
.tc-drag-zone {
  position: relative;
  pointer-events: auto;
  background: rgba(0,0,0,0.30);
  border: none;
  border-radius: 16px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  transition: background 0.15s ease;
}
/* سمت چپ: فرمان (افقی). FIX (بازگشت به ابعاد قبلی): نسخه‌ی باریک‌شده
   (۷۴px، هم‌عرض با گاز/ترمز) در عمل بازخورد بدتری برای فرمان‌دهی داشت -
   فضای کافی برای حرکت افقی ظریفِ انگشت نمی‌داد. عرض ناحیه‌ی فرمان به
   همان مقدار قبلی (عریض‌تر، مثل یک مستطیل افقی) برگردانده شد؛ فقط
   کنترلر گاز/ترمز هم‌عرضِ ۷۴px باقی می‌ماند. */
.tc-steer-zone { width: 188px; height: 78px; }
/* سمت راست: گاز/ترمز (عمودی) */
.tc-throttle-zone { width: 74px; height: 220px; }

.tc-zone-line { position: absolute; background: rgba(255,255,255,0.45); pointer-events: none; }
.tc-zone-line-v { top: 6px; bottom: 6px; left: 50%; width: 2px; margin-left: -1px; }
.tc-zone-line-h { left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; }

/* نشانگر (handle) موقعیت فعلی انگشت داخل ناحیه */
.tc-zone-handle {
  position: absolute;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: background 0.15s ease;
}
/* رنگ نشانگر: خاکستری برای فرمان (هر دو جهت)، سبز برای گاز، قرمز برای ترمز.
   FIX (رنگ گاز/ترمز برعکس بود): ریشه‌ی این باگ در جاوااسکریپت بود - کلاس
   active-pos/active-neg بر اساس علامتِ خامِ موقعیتِ لمس (قبل از معکوس‌سازیِ
   محور Y) ست می‌شد نه معنای واقعیِ گاز/ترمز، پس این دو کلاس عملاً برعکس
   اعمال می‌شدند. در setupDragZone (v4.final.html) این باگ اصلاح شده؛ این
   قوانین رنگی خودشان از ابتدا درست بودند و نیازی به تغییر نداشتند. */
.tc-steer-zone .tc-zone-handle { background: rgba(220,220,220,0.9); }
.tc-throttle-zone.active-pos .tc-zone-handle { background: #22e07a; }
.tc-throttle-zone.active-neg .tc-zone-handle { background: #ff4d4d; }

/* --- حالت «استاندارد» (بدون شدت): رنگِ تختِ یکنواخت، بدون هاله/گرادیان.
   فرمان = آبی (هر دو جهت)، گاز = سبز، ترمز = قرمز. --- */
.tc-drag-zone.tc-steer-zone.active-pos,
.tc-drag-zone.tc-steer-zone.active-neg { background: rgba(0,140,255,0.38); }
.tc-drag-zone.tc-throttle-zone.active-pos { background: rgba(0,200,83,0.38); }
.tc-drag-zone.tc-throttle-zone.active-neg { background: rgba(225,6,0,0.38); }

/* FIX (درخواست: استروک برای کنترلرهای استاندارد/میانی): چون این حالت
   فقط رنگِ تختِ یکنواخت دارد (بدون هاله‌ی گرادیانِ حالت آنالوگ که خودش
   لبه‌ی بصری ایجاد می‌کند)، بدون یک خط‌دور مشخص کمی بی‌شکل به‌نظر
   می‌رسید. یک استروکِ نازکِ همیشه-حاضر به هر دو ناحیه‌ی کنترلر میانی
   اضافه شد تا لبه‌ی آن‌ها واضح بماند، مستقل از فعال/غیرفعال بودن. */
#touchControlsMedium .tc-drag-zone {
  border: 1px solid rgba(255,255,255,0.4);
}
#touchControlsMedium .tc-drag-zone.active-pos,
#touchControlsMedium .tc-drag-zone.active-neg {
  border-color: rgba(255,255,255,0.65);
}

/* --- حالت «آنالوگ» (۳ سطح شدت): هاله‌ی رنگی از مرکز که با افزایش سطح
   بزرگ‌تر/پررنگ‌تر می‌شود. این قوانین به‌خاطر داشتنِ کلاس tc-level-N اضافه،
   specificity بالاتری از قوانینِ تختِ بالا دارند و همیشه آن‌ها را
   override می‌کنند - یعنی وقتی کلاس سطح حاضر است (فقط در کنترلر آنالوگ)
   هاله دیده می‌شود، وگرنه (کنترلر استاندارد) همان رنگ تخت بالا می‌ماند.
   FIX (ظاهر هاله‌ی فرمان بعد از عریض‌کردن ناحیه بد شده بود): وقتی ناحیه‌ی
   فرمان مستطیلیِ کاملاً کشیده (۲۲۰×۷۸) شد، gradient با کلیدواژه‌ی
   "circle" یک دایره‌ی واقعی (نه بیضی) می‌سازد که اندازه‌اش بر مبنای
   دورترین گوشه محاسبه می‌شود - در یک مستطیل خیلی کشیده این دایره از
   بالا/پایین ناحیه بیرون می‌زند و بریده به‌نظر می‌رسد (بر خلاف هاله‌ی
   گاز که چون ارتفاعش بلند و باریک است، دایره در آن طبیعی جا می‌شود).
   با تغییر به "ellipse"، هاله متناسب با نسبت طول/عرض خودِ ناحیه کشیده
   می‌شود و دقیقاً مثل قبل، در چپ/راست به‌آرامی محو/پررنگ می‌شود - همان
   جلوه‌ی سطح‌بندی‌شده‌ی خاکستری که با گاز هم‌خانواده است. */
/* FIX (سطح‌بندی رنگی فرمان اصلاً دیده نمی‌شد - باگ specificity واقعی):
   قانونِ رنگِ تختِ حالت "استاندارد" برای فرمان
   (.tc-drag-zone.tc-steer-zone.active-pos/neg، چند خط بالاتر) با ۳ کلاس
   نوشته شده، اما این قوانینِ سطح‌بندیِ فرمان قبلاً فقط ۲ کلاس داشتند
   (.tc-steer-zone.tc-level-N) - یعنی specificity کمتر از قانون تخت، پس
   با هر شدتی، همیشه همان رنگ آبیِ تختِ حالت استاندارد روی فرمانِ
   کنترلر آنالوگ می‌ماند و هاله‌ی سه‌سطحی هیچ‌وقت واقعاً دیده نمی‌شد
   (برخلاف ادعای کامنت قبلی که این قوانین را "specificity بالاتر" فرض
   کرده بود - این فقط برای گاز/ترمز درست بود، نه برای فرمان). با اضافه
   کردن پیشوند .tc-drag-zone (دقیقاً مثل قوانین گاز/ترمز پایین‌تر)،
   specificity این قوانین به ۳ کلاس می‌رسد و چون در فایل بعد از قانونِ
   تخت آمده‌اند، طبق ترتیب منبع برنده می‌شوند - دقیقاً همان الگویی که
   گاز/ترمز از اول درست کار می‌کرد. */
.tc-drag-zone.tc-steer-zone.tc-level-1 { background: radial-gradient(circle at 50% 50%, rgba(200,200,200,0.20) 0%, rgba(200,200,200,0.20) 32%, rgba(0,0,0,0.30) 64%); }
.tc-drag-zone.tc-steer-zone.tc-level-2 { background: radial-gradient(circle at 50% 50%, rgba(200,200,200,0.32) 0%, rgba(200,200,200,0.32) 42%, rgba(0,0,0,0.30) 72%); }
.tc-drag-zone.tc-steer-zone.tc-level-3 { background: radial-gradient(circle at 50% 50%, rgba(200,200,200,0.46) 0%, rgba(200,200,200,0.46) 52%, rgba(0,0,0,0.30) 80%); }

.tc-throttle-zone.active-pos.tc-level-1 { background: radial-gradient(circle at 50% 50%, rgba(0,200,83,0.20) 0%, rgba(0,200,83,0.20) 32%, rgba(0,0,0,0.30) 64%); }
.tc-throttle-zone.active-pos.tc-level-2 { background: radial-gradient(circle at 50% 50%, rgba(0,200,83,0.34) 0%, rgba(0,200,83,0.34) 42%, rgba(0,0,0,0.30) 72%); }
.tc-throttle-zone.active-pos.tc-level-3 { background: radial-gradient(circle at 50% 50%, rgba(0,200,83,0.50) 0%, rgba(0,200,83,0.50) 52%, rgba(0,0,0,0.30) 80%); }

.tc-throttle-zone.active-neg.tc-level-1 { background: radial-gradient(circle at 50% 50%, rgba(225,6,0,0.20) 0%, rgba(225,6,0,0.20) 32%, rgba(0,0,0,0.30) 64%); }
.tc-throttle-zone.active-neg.tc-level-2 { background: radial-gradient(circle at 50% 50%, rgba(225,6,0,0.34) 0%, rgba(225,6,0,0.34) 42%, rgba(0,0,0,0.30) 72%); }
.tc-throttle-zone.active-neg.tc-level-3 { background: radial-gradient(circle at 50% 50%, rgba(225,6,0,0.50) 0%, rgba(225,6,0,0.50) 52%, rgba(0,0,0,0.30) 80%); }

@media (max-width: 480px) {
  .tc-steer-zone { width: 155px; height: 68px; }
  .tc-throttle-zone { width: 62px; height: 180px; }
}

/* ==========================================================================
   بازخورد رنگیِ دکمه‌های کنترلر ساده (دکمه‌ای): گاز=سبز، ترمز=قرمز،
   چپ/راست=آبی - با لمسِ هر دکمه کلاس tc-pressed اضافه می‌شود (در
   v4.final.html، تابع bindHold). همچنین عرض دکمه‌ها کمی کاهش یافته.
   FIX (نگه‌داشتن انگشت روی دکمه مثل راست‌کلیک/انتخاب متن عمل می‌کرد):
   بدون user-select:none و -webkit-touch-callout:none، لمسِ طولانیِ یک
   دکمه (که برای «نگه‌داشتن» گاز/فرمان لازم است) در بعضی مرورگرهای موبایل
   منوی کپی/انتخاب متن یا بزرگنمایی را باز می‌کرد و کنترل بازی را قطع
   می‌کرد. */
.tcBtn {
  min-width: 54px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.tcWide { min-width: 74px; }
#tcGas.tc-pressed { background: rgba(0,200,83,0.38) !important; border-color: rgba(34,224,122,0.8) !important; }
#tcBrake.tc-pressed { background: rgba(225,6,0,0.38) !important; border-color: rgba(255,77,77,0.8) !important; }
#tcLeft.tc-pressed, #tcRight.tc-pressed { background: rgba(0,150,255,0.38) !important; border-color: rgba(60,180,255,0.8) !important; }