*{
  /* সব element-এর sizing predictable করা। */
  box-sizing:border-box;
  /* browser-এর default margin সরানো। */
  margin:0;
  /* browser-এর default padding সরানো। */
  padding:0;
}

html,body{
  /* পুরো viewport ব্যবহার করা। */
  width:100%;
  height:100%;
  /* page scroll বন্ধ করা। */
  overflow:hidden;
  /* sky fallback। */
  background:#35bde9;
  /* clean game font। */
  font-family:Arial,Helvetica,sans-serif;
  /* text selection বন্ধ করা। */
  user-select:none;
  /* mobile gestures বন্ধ করা। */
  touch-action:none;
}

button{
  /* সব button-এ pointer cursor। */
  cursor:pointer;
  /* tap highlight বন্ধ। */
  -webkit-tap-highlight-color:transparent;
}

#game{
  /* canvas block করা। */
  display:block;
  /* AI environment-এর উপর gameplay render হবে। */
  position:fixed;
  inset:0;
  /* viewport width। */
  width:100%;
  /* viewport height। */
  height:100%;
}

.hidden{
  /* সম্পূর্ণ hide। */
  display:none!important;
}

/* ---------------- HUD ---------------- */

#hud{
  /* gameplay-এর উপর বসানো। */
  position:fixed;
  /* top/side spacing। */
  top:12px;
  left:14px;
  right:14px;
  /* highest layer। */
  z-index:20;
  /* horizontal layout। */
  display:flex;
  /* top alignment। */
  align-items:flex-start;
  /* spacing। */
  gap:10px;
  /* input only buttons-এ যাবে। */
  pointer-events:none;
}

.hudIcon{
  /* pointer enable। */
  pointer-events:auto;
  /* compact square। */
  width:58px;
  height:58px;
  /* rounded। */
  border-radius:16px;
  /* dark glossy border। */
  border:3px solid #ffffff44;
  /* deep blue glass। */
  background:linear-gradient(#1b5d8b,#0b3555);
  /* white icon। */
  color:#fff;
  /* icon size। */
  font-size:28px;
  /* strong shadow। */
  box-shadow:0 6px 0 #062d49,0 12px 22px #00385a66;
}

.timerPanel{
  /* timer dark pill। */
  min-width:175px;
  /* dark background। */
  background:linear-gradient(#194e73,#092e4b);
  /* rounded corners। */
  border-radius:14px;
  /* white border। */
  border:2px solid #ffffff22;
  /* padding। */
  padding:7px 13px;
  /* white text। */
  color:#fff;
  /* shadow। */
  box-shadow:0 6px 0 #062d49;
}

.timerMain{
  /* large timer। */
  font-size:22px;
  /* bold। */
  font-weight:1000;
}

.bestLine{
  /* best line। */
  color:#ffd82e;
  /* small size। */
  font-size:11px;
  /* bold। */
  font-weight:900;
  /* margin۔ */
  margin-top:2px;
}

.topProgress{
  /* central flexible panel। */
  flex:1;
  /* maximum width। */
  max-width:620px;
  /* center। */
  margin:0 auto;
  /* text center। */
  text-align:center;
}

.levelCaption{
  /* dark blue title। */
  display:inline-block;
  /* background। */
  background:linear-gradient(#16537c,#0a3555);
  /* white text। */
  color:#fff;
  /* rounded۔ */
  border-radius:13px;
  /* padding। */
  padding:8px 20px;
  /* font। */
  font-size:18px;
  /* bold। */
  font-weight:1000;
  /* shadow। */
  box-shadow:0 5px 0 #062d49;
}

.progressTrack{
  /* track position। */
  position:relative;
  /* width। */
  width:100%;
  /* height। */
  height:16px;
  /* margin। */
  margin-top:8px;
  /* track color۔ */
  background:#c4d4dc;
  /* dark outline۔ */
  border:3px solid #123d5c;
  /* rounded। */
  border-radius:20px;
  /* shadow। */
  box-shadow:0 4px 0 #062d49;
}

#progressFill{
  /* initial progress। */
  width:0%;
  /* full height। */
  height:100%;
  /* green gradient। */
  background:linear-gradient(90deg,#32d34c,#b8ef32);
  /* rounded। */
  border-radius:20px;
}

#progressTruck{
  /* progress truck position। */
  position:absolute;
  /* above track। */
  top:-23px;
  /* left controlled by JS। */
  left:0;
  /* icon। */
  font-size:20px;
  /* transition। */
  transition:left .08s linear;
}

.flag{
  /* finish flag। */
  position:absolute;
  /* right edge। */
  right:-19px;
  /* top। */
  top:-23px;
  /* size। */
  font-size:21px;
}

.coinPanel{
  /* coin panel। */
  background:linear-gradient(#195b83,#0a3452);
  /* white text। */
  color:#fff;
  /* rounded। */
  border-radius:14px;
  /* padding। */
  padding:12px 18px;
  /* bold। */
  font-size:18px;
  /* shadow। */
  box-shadow:0 6px 0 #062d49;
  /* no wrapping। */
  white-space:nowrap;
}

/* ---------------- COMMON SCREENS ---------------- */

.screen{
  /* full-screen overlay। */
  position:fixed;
  /* cover screen। */
  inset:0;
  /* highest UI layer। */
  z-index:50;
  /* center child content by default। */
  display:flex;
  /* center horizontal। */
  justify-content:center;
  /* center vertical। */
  align-items:center;
}

/* ---------------- MAIN MENU ---------------- */

#mainMenu{
  /* vibrant sky। */
  background:linear-gradient(#1bb4ee,#77dded 62%,#0da8d0);
  /* hide overflow। */
  overflow:hidden;
}

#mainMenu:before{
  /* Real jagged mountain silhouette (দূরের range) — আগের বিচ্ছিরি diagonal-cross gradient সরিয়ে clip-path দিয়ে আসল পাহাড়ের আকৃতি বানানো হলো। */
  content:"";
  /* full layer। */
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#1d78bd 0%,#0f588f 55%,#083d68 100%);
  clip-path:polygon(0% 63%,7% 49%,13% 58%,20% 40%,27% 55%,35% 45%,41% 59%,48% 42%,55% 57%,62% 46%,69% 60%,76% 41%,83% 56%,90% 47%,96% 58%,100% 50%,100% 100%,0% 100%);
  opacity:.96;
  z-index:0;
}

/* সামনের (কাছের) পাহাড়ের range — আলাদা shade আর আলাদা shape দিয়ে depth তৈরি করছে। */
#mainMenu .menuAtmosphere:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#3ea0e0 0%,#1c7fc4 50%,#0e5a95 100%);
  clip-path:polygon(0% 80%,9% 67%,18% 77%,28% 62%,38% 75%,48% 64%,58% 77%,68% 66%,78% 79%,88% 68%,100% 77%,100% 100%,0% 100%);
  z-index:1;
}

#mainMenu:after{
  /* water foreground। */
  content:"";
  /* bottom layer। */
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:22%;
  /* deep-to-shallow water gradient, less flat/solid। */
  background:
    repeating-linear-gradient(100deg,rgba(255,255,255,.10) 0 3px,transparent 3px 46px),
    linear-gradient(180deg,#3fd4e6 0%,#12aede 28%,#0a86c4 62%,#04568f 100%);
  /* soft foam line at the waterline instead of a flat hard border। */
  border-top:0;
  box-shadow:inset 0 9px 0 -3px rgba(255,255,255,.85),inset 0 18px 14px -12px rgba(255,255,255,.35);
  /* gentle drifting shimmer। */
  background-size:220px 100%,100% 100%;
  animation:mainWaterDrift 7s linear infinite;
  /* layer behind UI, কিন্তু পাহাড়ের পায়ের সামনে। */
  z-index:2;
}

/* Rolling foam ripples riding along the waterline। */
#mainMenu .menuAtmosphere:after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:22%;
  height:26px;
  z-index:4;
  background-repeat:repeat-x;
  background-size:130px 26px;
  background-image:radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.85) 0 5px,transparent 6px),
    radial-gradient(ellipse at 75% 55%,rgba(255,255,255,.65) 0 4px,transparent 5px);
  opacity:.8;
  animation:mainWaterDrift 4.5s linear infinite reverse;
  pointer-events:none;
}

@keyframes mainWaterDrift{
  from{background-position:0 0,0 0;}
  to{background-position:220px 0,0 0;}
}

.menuAtmosphere{
  /* atmospheric glow। */
  position:absolute;
  inset:0;
  /* radial highlights। */
  background:
    radial-gradient(circle at 75% 25%,#ffffff66,transparent 20%),
    radial-gradient(circle at 18% 72%,#65ed7c66,transparent 25%);
  /* above background, below UI। */
  z-index:3;
}

.brand{
  /* logo position। */
  position:absolute;
  /* top left। */
  top:7%;
  left:6%;
  /* z-index। */
  z-index:5;
  /* slight tilt। */
  transform:rotate(-3deg);
  /* strong shadow। */
  filter:drop-shadow(0 7px 0 #0d3d60);
}

.brandSmall{
  /* subtitle। */
  color:#fff;
  /* dark outline। */
  -webkit-text-stroke:2px #173f5e;
  /* bold। */
  font-weight:1000;
  /* spacing। */
  letter-spacing:4px;
  /* size। */
  font-size:clamp(14px,2vw,24px);
}

.brandHill{
  /* HILL text। */
  color:#fff;
  /* huge। */
  font-size:clamp(50px,8vw,95px);
  /* heavy। */
  font-weight:1000;
  /* italic। */
  font-style:italic;
  /* outline। */
  -webkit-text-stroke:5px #16405e;
  /* tight। */
  line-height:.8;
}

.brandRush{
  /* RUSH text। */
  color:#ffd01a;
  /* huge। */
  font-size:clamp(58px,9vw,108px);
  /* heavy। */
  font-weight:1000;
  /* italic। */
  font-style:italic;
  /* orange outline। */
  -webkit-text-stroke:6px #a64500;
  /* line। */
  line-height:.86;
}

.brandTag{
  /* tagline। */
  color:#fff;
  /* dark outline۔ */
  -webkit-text-stroke:2px #153d59;
  /* bold۔ */
  font-weight:1000;
  /* spacing। */
  letter-spacing:2px;
  /* size۔ */
  font-size:clamp(11px,1.5vw,18px);
}

.menuVehicle{
  /* decorative vehicle। */
  position:absolute;
  /* lower left۔ */
  left:9%;
  bottom:17%;
  /* size। */
  font-size:clamp(100px,17vw,220px);
  /* flip and tilt। */
  transform:scaleX(-1) rotate(-8deg);
  /* shadow। */
  filter:drop-shadow(0 20px 10px #073b5755);
  /* above background। */
  z-index:4;
}

.mainActions{
  /* right action stack। */
  position:absolute;
  /* center-ish। */
  right:8%;
  top:42%;
  /* width। */
  width:min(330px,35vw);
  /* column। */
  display:flex;
  flex-direction:column;
  /* gap। */
  gap:13px;
  /* above background। */
  z-index:6;
}

.actionBtn{
  /* button background। */
  border:0;
  /* rounded। */
  border-radius:17px;
  /* padding। */
  padding:14px 20px;
  /* font। */
  font-size:18px;
  /* bold। */
  font-weight:1000;
  /* white text। */
  color:#fff;
  /* blue gradient। */
  background:linear-gradient(#287ab1,#104c79);
  /* border highlight। */
  box-shadow:inset 0 0 0 2px #ffffff33,0 6px 0 #062f4d,0 12px 25px #06385244;
  /* transition। */
  transition:transform .12s,filter .12s;
}

.actionBtn:hover{
  /* lift on hover। */
  transform:translateY(-2px);
  /* brighter। */
  filter:brightness(1.12);
}

.actionBtn:active{
  /* press। */
  transform:translateY(4px);
  /* remove shadow depth। */
  box-shadow:inset 0 0 0 2px #ffffff33,0 2px 0 #062f4d;
}

.actionBtn.primary{
  /* green primary। */
  background:linear-gradient(#82ee2d,#36cb18);
}

.menuCoin{
  /* coin display। */
  position:absolute;
  /* top right۔ */
  top:5%;
  right:5%;
  /* dark pill۔ */
  background:linear-gradient(#1a5c86,#0a3554);
  /* white। */
  color:#fff;
  /* padding۔ */
  padding:12px 19px;
  /* rounded। */
  border-radius:15px;
  /* bold۔ */
  font-weight:1000;
  /* z-index। */
  z-index:8;
  /* shadow। */
  box-shadow:0 6px 0 #062f4d;
}

.version{
  /* bottom version। */
  position:absolute;
  /* bottom۔ */
  bottom:18px;
  /* center। */
  left:50%;
  transform:translateX(-50%);
  /* text। */
  color:#fff;
  /* opacity। */
  opacity:.8;
  /* size। */
  font-size:11px;
  /* z-index। */
  z-index:8;
}

/* ---------------- LEVEL MENU ---------------- */

#levelMenu{
  /* menu gradient। */
  background:linear-gradient(#0d8bd8,#43caeb);
  /* vertical screen। */
  flex-direction:column;
  /* top aligned। */
  justify-content:flex-start;
  /* scroll enabled inside this screen only। */
  overflow:auto;
  /* padding। */
  padding:16px 18px 25px;
}

.levelHeader{
  /* sticky header। */
  position:sticky;
  /* top। */
  top:0;
  /* width। */
  width:min(1250px,96vw);
  /* row। */
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* padding। */
  padding:4px 0 13px;
  /* background behind header। */
  z-index:10;
}

.levelHeader:before{
  /* header backdrop। */
  content:"";
  /* absolute backdrop। */
  position:absolute;
  /* stretch。 */
  inset:-16px -18px 0;
  /* gradient। */
  background:linear-gradient(#0d8bd8 70%,transparent);
  /* behind text。 */
  z-index:-1;
}

.backBtn{
  /* dark blue। */
  border:0;
  /* text。 */
  color:#fff;
  /* background۔ */
  background:linear-gradient(#287ab1,#104c79);
  /* rounded۔ */
  border-radius:14px;
  /* padding। */
  padding:12px 18px;
  /* bold। */
  font-weight:1000;
  /* shadow। */
  box-shadow:0 5px 0 #062f4d;
}

.headerTitle{
  /* title color। */
  color:#fff;
  /* text center। */
  text-align:center;
  /* display column। */
  display:flex;
  flex-direction:column;
}

.headerTitle span{
  /* yellow small title। */
  color:#ffe03a;
  /* spacing। */
  letter-spacing:3px;
  /* bold۔ */
  font-weight:1000;
}

.headerTitle strong{
  /* white title۔ */
  font-size:clamp(22px,3vw,38px);
  /* dark shadow۔ */
  text-shadow:0 4px 0 #0d4164;
}

.headerCoin{
  /* coin pill۔ */
  color:#fff;
  /* background۔ */
  background:#123e60;
  /* padding۔ */
  padding:11px 16px;
  /* rounded۔ */
  border-radius:14px;
  /* bold۔ */
  font-weight:1000;
  /* shadow۔ */
  box-shadow:0 5px 0 #062f4d;
}

.rangeTabs{
  /* tab row। */
  width:min(1250px,96vw);
  /* flex۔ */
  display:flex;
  /* wrap۔ */
  flex-wrap:wrap;
  /* gap। */
  gap:8px;
  /* margin۔ */
  margin-bottom:12px;
}

.rangeTab{
  /* dark tab۔ */
  border:2px solid #ffffff33;
  /* color۔ */
  color:#fff;
  /* background۔ */
  background:#123e60;
  /* padding। */
  padding:9px 14px;
  /* rounded। */
  border-radius:12px;
  /* bold۔ */
  font-weight:1000;
}

.rangeTab.active{
  /* active yellow। */
  background:#ffd01c;
  /* dark text। */
  color:#153a54;
}

.levelGrid{
  /* 5 column grid। */
  width:min(1250px,96vw);
  /* responsive columns। */
  display:grid;
  grid-template-columns:repeat(5,minmax(150px,1fr));
  /* gap। */
  gap:12px;
}

.levelCard{
  /* card background। */
  background:linear-gradient(#3d5667,#1f3443);
  /* border। */
  border:2px solid #ffffff55;
  /* rounded۔ */
  border-radius:18px;
  /* padding। */
  padding:11px;
  /* minimum height। */
  min-height:154px;
  /* text। */
  color:#fff;
  /* shadow۔ */
  box-shadow:0 6px 0 #092c42,0 10px 18px #06334d44;
  /* position। */
  position:relative;
  /* hover। */
  transition:transform .12s;
}

.levelCard:hover{
  /* lift। */
  transform:translateY(-2px);
}

.levelCard.current{
  /* yellow highlight। */
  border-color:#ffe03b;
  /* glow। */
  box-shadow:0 0 0 3px #ffe03b44,0 6px 0 #092c42;
}

.levelNumber{
  /* big number। */
  font-size:29px;
  /* bold। */
  font-weight:1000;
}

.cardStars{
  /* yellow stars। */
  color:#ffd83a;
  /* size۔ */
  font-size:15px;
  /* spacing۔ */
  letter-spacing:2px;
}

.cardScene{
  /* thumbnail height। */
  height:67px;
  /* rounded۔ */
  border-radius:10px;
  /* overflow। */
  overflow:hidden;
  /* position। */
  position:relative;
  /* sky। */
  background:linear-gradient(#60d5f0 0 55%,#16b4d4 55%);
  /* margin۔ */
  margin:7px 0;
}

.cardScene:before{
  /* mountain। */
  content:"";
  /* position। */
  position:absolute;
  /* mountain shape। */
  left:0;
  right:0;
  top:8px;
  height:40px;
  /* blue mountain। */
  background:linear-gradient(145deg,transparent 0 35%,#1676c2 35% 60%,transparent 60%);
}

.cardScene:after{
  /* road。 */
  content:"";
  /* position۔ */
  position:absolute;
  /* road location। */
  left:-10%;
  right:-10%;
  bottom:12px;
  height:17px;
  /* dirt۔ */
  background:#efc9ad;
  /* grass। */
  border-top:7px solid #3fc956;
  /* hill angle। */
  transform:rotate(-7deg);
}

.cardTruck{
  /* thumbnail truck। */
  position:absolute;
  /* above road۔ */
  z-index:3;
  /* size। */
  font-size:29px;
  /* location۔ */
  left:13px;
  bottom:17px;
  /* mirror। */
  transform:scaleX(-1);
}

.lock{
  /* lock — কার্ডের নাম-এর সাথে overlap না করে top-right corner badge হিসেবে বসানো হচ্ছে। */
  position:absolute;
  right:10px;
  top:10px;
  left:auto;
  bottom:auto;
  font-size:19px;
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(4,20,32,.55);
  box-shadow:0 2px 0 rgba(0,0,0,.3);
}

.levelPager{
  /* pager। */
  display:flex;
  align-items:center;
  gap:14px;
  /* margin۔ */
  margin:14px 0 0;
  /* white text۔ */
  color:#fff;
  /* bold۔ */
  font-weight:1000;
}

.roundNav{
  /* circle۔ */
  width:48px;
  height:48px;
  /* border۔ */
  border:0;
  /* rounded۔ */
  border-radius:50%;
  /* blue۔ */
  background:#123e60;
  /* white۔ */
  color:#fff;
  /* size۔ */
  font-size:33px;
  /* shadow۔ */
  box-shadow:0 5px 0 #062f4d;
}

/* ---------------- GARAGE ---------------- */

#garageMenu,#storeMenu{
  /* rich blue background। */
  background:linear-gradient(#0b8bd8,#55d6ef);
  /* header ও content সবসময় vertically stack হবে—row হয়ে পাশাপাশি বসবে না। */
  flex-direction:column;
  /* top alignment। */
  justify-content:flex-start;
  align-items:center;
  /* vertical scroll। */
  overflow-y:auto;
  overflow-x:hidden;
  /* padding۔ */
  padding:18px;
  gap:6px;
}

.garageHeader,.storeHeader{
  /* width۔ */
  width:min(1250px,96vw);
  /* row। */
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* color۔ */
  color:#fff;
  /* margin۔ */
  margin-bottom:18px;
}

.garageHeader>div:nth-child(2),.storeHeader>div:nth-child(2){
  /* title center। */
  text-align:center;
  /* column۔ */
  display:flex;
  flex-direction:column;
}

.garageHeader span,.storeHeader span{
  /* yellow small title। */
  color:#ffe03a;
  /* spacing۔ */
  letter-spacing:3px;
  /* bold۔ */
  font-weight:1000;
}

.garageHeader strong,.storeHeader strong{
  /* large heading۔ */
  font-size:clamp(28px,4vw,45px);
  /* dark shadow۔ */
  text-shadow:0 4px 0 #0d4164;
}

.garageLayout{
  /* main garage width। */
  width:min(1250px,96vw);
  /* grid। */
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(420px,1.5fr);
  /* gap। */
  gap:18px;
}

.vehiclePreview{
  /* white-ish card। */
  background:#f6ffff;
  /* rounded। */
  border-radius:24px;
  /* padding۔ */
  padding:28px;
  /* center۔ */
  text-align:center;
  /* shadow۔ */
  box-shadow:0 14px 35px #06344e55;
}

.garageVehicle{
  /* huge vehicle۔ */
  font-size:clamp(110px,14vw,190px);
  /* mirror। */
  transform:scaleX(-1);
  /* shadow। */
  filter:drop-shadow(0 15px 7px #06334d55);
}

.vehicleName{
  /* title। */
  color:#123c59;
  /* font۔ */
  font-size:28px;
  /* bold۔ */
  font-weight:1000;
}

.vehicleDesc{
  /* description۔ */
  color:#557080;
  /* margin۔ */
  margin:5px 0 15px;
}

.vehicleList{
  /* list grid। */
  display:grid;
  grid-template-columns:repeat(2,1fr);
  /* gap। */
  gap:12px;
}

.vehicleCard{
  /* dark card। */
  background:linear-gradient(#3d5667,#1f3443);
  /* border। */
  border:2px solid #ffffff44;
  /* rounded। */
  border-radius:18px;
  /* padding۔ */
  padding:15px;
  /* white text۔ */
  color:#fff;
  /* shadow۔ */
  box-shadow:0 6px 0 #092c42;
}

.vehicleCard.selected{
  /* selected outline। */
  border-color:#ffe03a;
  /* glow। */
  box-shadow:0 0 0 3px #ffe03a44,0 6px 0 #092c42;
}

.vehicleEmoji{
  /* vehicle icon। */
  font-size:56px;
  /* mirror। */
  transform:scaleX(-1);
}

.vehicleCard h3{
  /* name۔ */
  font-size:18px;
}

.vehicleCard p{
  /* stats۔ */
  font-size:12px;
  /* opacity। */
  opacity:.8;
  /* margin۔ */
  margin:5px 0 9px;
}

.vehicleCard button{
  /* full button۔ */
  width:100%;
  /* no border। */
  border:0;
  /* rounded۔ */
  border-radius:10px;
  /* padding۔ */
  padding:9px;
  /* bold। */
  font-weight:1000;
  /* blue। */
  background:#2c81b7;
  /* white। */
  color:#fff;
}

.upgradePanel{
  /* width۔ */
  width:min(1250px,96vw);
  /* white card। */
  background:#f5ffff;
  /* rounded। */
  border-radius:22px;
  /* padding। */
  padding:17px;
  /* margin। */
  margin-top:18px;
  /* shadow। */
  box-shadow:0 14px 35px #06344e55;
}

.upgradeTitle{
  /* title। */
  color:#123c59;
  /* font। */
  font-size:23px;
  /* bold। */
  font-weight:1000;
  /* margin۔ */
  margin-bottom:12px;
}

.upgradeGrid{
  /* 4 columns। */
  display:grid;
  grid-template-columns:repeat(4,1fr);
  /* gap। */
  gap:10px;
}

.upgradeCard{
  /* card। */
  border:0;
  /* rounded۔ */
  border-radius:16px;
  /* dark background। */
  background:linear-gradient(#31576e,#173a50);
  /* white। */
  color:#fff;
  /* padding۔ */
  padding:13px;
  /* flex column। */
  display:flex;
  flex-direction:column;
  /* gap। */
  gap:4px;
  /* shadow। */
  box-shadow:0 5px 0 #092c42;
}

.upgradeCard span{
  /* icon। */
  font-size:29px;
}

.upgradeCard b{
  /* title۔ */
  font-size:14px;
}

.upgradeCard small{
  /* level। */
  opacity:.8;
}

.upgradeCard em{
  /* cost۔ */
  color:#ffd92e;
  /* italic off। */
  font-style:normal;
  /* bold۔ */
  font-weight:1000;
}

/* ---------------- STORE ---------------- */

.storeGrid{
  /* store width। */
  width:min(1100px,94vw);
  /* 3 cards। */
  display:grid;
  grid-template-columns:repeat(3,1fr);
  /* gap। */
  gap:18px;
}

.storeCard{
  /* white card। */
  background:#f5ffff;
  /* rounded۔ */
  border-radius:24px;
  /* padding۔ */
  padding:26px;
  /* center۔ */
  text-align:center;
  /* shadow۔ */
  box-shadow:0 14px 35px #06344e55;
}

.storeIcon{
  /* icon size। */
  font-size:70px;
}

.storeCard h3{
  /* dark title। */
  color:#123c59;
  /* font। */
  font-size:23px;
  /* margin۔ */
  margin:6px 0;
}

.storeCard p{
  /* description। */
  color:#607786;
  /* min height। */
  min-height:40px;
  /* margin۔ */
  margin-bottom:15px;
}

/* ---------------- MODALS ---------------- */

.modalCard{
  /* white modal। */
  width:min(440px,90vw);
  /* background। */
  background:#f5ffff;
  /* rounded। */
  border-radius:26px;
  /* padding۔ */
  padding:28px;
  /* center। */
  text-align:center;
  /* shadow۔ */
  box-shadow:0 25px 70px #04354f88;
  /* column। */
  display:flex;
  flex-direction:column;
  /* gap। */
  gap:13px;
}

.modalIcon{
  /* giant icon۔ */
  font-size:60px;
}

.modalCard h2{
  /* heading۔ */
  color:#123c59;
  /* size। */
  font-size:31px;
}

.modalCard p{
  /* description। */
  color:#607786;
}

.resultTime{
  /* timer। */
  color:#123c59;
  /* large। */
  font-size:32px;
  /* bold। */
  font-weight:1000;
}

.resultStars{
  /* stars। */
  color:#ffd020;
  /* size। */
  font-size:35px;
}

/* ---------------- CONTROLS ---------------- */

#controls{
  /* fixed controls। */
  position:fixed;
  /* bottom۔ */
  left:0;
  right:0;
  bottom:15px;
  /* z-index۔ */
  z-index:25;
  /* row۔ */
  display:flex;
  justify-content:space-between;
  /* padding۔ */
  padding:0 22px;
  /* pointer only buttons। */
  pointer-events:none;
}

.controlSide{
  /* control group۔ */
  display:flex;
  /* gap۔ */
  gap:12px;
  /* pointer। */
  pointer-events:auto;
}

.driveControl{
  /* circular control। */
  width:102px;
  height:92px;
  /* rounded। */
  border-radius:50%;
  /* dark glossy。 */
  border:4px solid #ffffff77;
  background:linear-gradient(#274a63,#0d293e);
  /* white icon। */
  color:#fff;
  /* icon size। */
  font-size:35px;
  /* bold۔ */
  font-weight:1000;
  /* shadow। */
  box-shadow:inset 0 0 0 3px #00000033,0 8px 0 #06283e,0 13px 22px #002d4666;
  /* flex। */
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  /* transition। */
  transition:transform .08s;
}

.driveControl span{
  /* button label। */
  font-size:12px;
  /* margin। */
  margin-top:2px;
  /* white। */
  color:#fff;
}

.driveControl:active{
  /* press। */
  transform:translateY(5px);
  /* shadow reduced। */
  box-shadow:inset 0 0 0 3px #00000033,0 3px 0 #06283e;
}

.brakeControl{
  /* brake red। */
  background:linear-gradient(#b95d52,#74362f);
}

.gasControl{
  /* gas green। */
  background:linear-gradient(#69e94a,#159c2b);
  /* gas pedal-কে clearly interactive করা হচ্ছে। */
  border-color:#d9ffd0;
}

/* ---------------- RESPONSIVE ---------------- */

@media(max-width:900px){

  /* HUD compact। */
  #hud{
    gap:5px;
    top:7px;
    left:7px;
    right:7px;
  }

  /* timer smaller। */
  .timerPanel{
    min-width:130px;
    padding:6px 9px;
  }

  .timerMain{
    font-size:16px;
  }

  /* title smaller। */
  .levelCaption{
    font-size:11px;
    padding:8px 10px;
  }

  /* hide progress on narrow screens। */
  .progressTrack{
    max-width:250px;
  }

  /* garage 1 column। */
  .garageLayout{
    grid-template-columns:1fr;
  }

  /* vehicle list 2 columns। */
  .vehicleList{
    grid-template-columns:repeat(2,1fr);
  }

  /* upgrades 2 columns। */
  .upgradeGrid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:650px){

  /* main menu buttons smaller। */
  .mainActions{
    width:45vw;
    right:5%;
  }

  /* logo smaller। */
  .brand{
    left:4%;
    top:5%;
  }

  /* level grid 3 columns। */
  .levelGrid{
    grid-template-columns:repeat(3,1fr);
  }

  /* store 1 column। */
  .storeGrid{
    grid-template-columns:1fr;
  }

  /* controls smaller। */
  .driveControl{
    width:74px;
    height:74px;
    font-size:25px;
  }

  /* labels smaller। */
  .driveControl span{
    font-size:9px;
  }

  /* coin compact। */
  .coinPanel{
    padding:9px;
    font-size:14px;
  }

  /* settings compact। */
  .hudIcon{
    width:46px;
    height:46px;
    font-size:21px;
  }
}

@media(max-width:480px){

  /* level grid 2 columns। */
  .levelGrid{
    grid-template-columns:repeat(2,1fr);
  }

  /* level header compact। */
  .headerCoin{
    padding:8px;
  }

  /* hide best to preserve space। */
  .bestLine{
    display:none;
  }

  /* main action width। */
  .mainActions{
    width:52vw;
  }

  /* control groups compact। */
  #controls{
    padding:0 10px;
  }

  /* smaller controls। */
  .driveControl{
    width:68px;
    height:68px;
  }
}


/* =========================================================
   REFERENCE UI V7 — compact Hill Rush style
   ========================================================= */

/* Screenshot-এর মতো clean rounded gameplay viewport feel। */
body{
  background:#f4f7f8;
}

/* Canvas-এর corners reference-এর মতো rounded রাখা। */
#game{
  border-radius:0;
}

/* Gameplay HUD compact এবং balanced করা। */
#hud{
  top:10px;
  left:10px;
  right:10px;
  height:70px;
  gap:7px;
  align-items:flex-start;
}

/* Pause/settings button reference-এর মতো dark blue compact। */
.hudIcon{
  width:54px;
  height:54px;
  min-width:54px;
  border-radius:14px;
  border:2px solid #75a6c5;
  background:linear-gradient(180deg,#175b8e,#0a3455);
  box-shadow:0 4px 0 #062b45,0 7px 15px #00385a55;
  font-size:25px;
  font-weight:1000;
}

/* Timer panel ছোট ও screenshot-এর মতো compact। */
.timerPanel{
  min-width:135px;
  height:54px;
  border-radius:11px;
  border:2px solid #2e729c;
  background:linear-gradient(180deg,#184c70,#0a2f4b);
  padding:4px 9px;
  box-shadow:0 4px 0 #062b45;
}

/* Timer number। */
.timerMain{
  font-size:18px;
  line-height:21px;
  white-space:nowrap;
}

/* Timer icon। */
.timerIcon{
  font-size:16px;
}

/* Best time compact। */
.bestLine{
  font-size:10px;
  line-height:13px;
  white-space:nowrap;
}

/* Crown icon। */
.crownIcon{
  color:#ffd52d;
  font-size:12px;
}

/* Center progress area। */
.topProgress{
  flex:1;
  max-width:560px;
  min-width:180px;
  margin:0 auto;
  padding-top:0;
}

/* Screenshot-এর blue level title। */
.levelCaption{
  padding:7px 18px;
  min-width:245px;
  border-radius:9px;
  font-size:16px;
  line-height:18px;
  background:linear-gradient(180deg,#17618e,#0a3656);
  border:1px solid #2d78a6;
  box-shadow:0 4px 0 #062b45;
}

/* Progress bar reference-এর মতো thin। */
.progressTrack{
  height:13px;
  margin-top:5px;
  border:3px solid #163e5c;
  background:#d7e0e5;
  box-shadow:0 3px 0 #062b45;
}

/* Green progress। */
#progressFill{
  background:linear-gradient(90deg,#1dd83f,#9ce62a);
}

/* Tiny progress truck। */
#progressTruck{
  top:-22px;
  font-size:18px;
}

/* Finish flag। */
.flag{
  top:-22px;
  font-size:18px;
}

/* Coin HUD reference style। */
.coinPanel{
  height:54px;
  min-width:118px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:4px 5px 4px 10px;
  border-radius:12px;
  border:2px solid #2e729c;
  background:linear-gradient(180deg,#184f74,#0a3150);
  box-shadow:0 4px 0 #062b45;
  font-size:18px;
}

/* Gold coin circle। */
.coinIcon{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff4a5;
  font-size:17px;
  font-weight:1000;
  background:radial-gradient(circle at 35% 30%,#ffe979 0 18%,#ffc51d 20% 65%,#d88b00 68% 100%);
  border:2px solid #fff0a0;
  box-shadow:0 1px 0 #9d5e00;
}

/* Green plus button। */
.coinPlus{
  width:30px;
  height:30px;
  border:2px solid #168c27;
  border-radius:7px;
  background:linear-gradient(#6be52e,#25a82a);
  color:#fff;
  font-size:24px;
  line-height:22px;
  font-weight:1000;
  box-shadow:0 2px 0 #0c6319;
}

/* Bottom controls reference-এর মতো বড় circular buttons। */
#controls{
  left:18px;
  right:18px;
  bottom:14px;
  align-items:flex-end;
  justify-content:space-between;
  pointer-events:none;
}

/* দুই side-এ buttons পাশাপাশি থাকবে। */
.controlSide{
  gap:9px;
  pointer-events:none;
}

/* Button size। */
.driveControl{
  width:82px;
  height:82px;
  min-width:82px;
  border-radius:50%;
  border:3px solid #7e8e9c;
  background:radial-gradient(circle at 38% 30%,#29435b,#101e2d 70%);
  box-shadow:0 5px 0 #08131f,0 7px 16px #00131f66;
  color:#fff;
  font-size:35px;
  font-weight:1000;
  pointer-events:auto;
}

/* Button label। */
.driveControl span{
  display:block;
  margin-top:-3px;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.2px;
}

/* Brake-এর red accent। */
.brakeControl{
  background:radial-gradient(circle at 38% 30%,#34495c,#152636 72%);
}

/* Gas button green accent। */
.gasControl{
  background:radial-gradient(circle at 38% 25%,#4ee046,#168b27 70%);
  border-color:#d8ffd1;
}

/* Mobile UI scaling। */
@media(max-width:700px){
  #hud{
    top:6px;
    left:6px;
    right:6px;
    gap:4px;
  }

  .hudIcon{
    width:44px;
    min-width:44px;
    height:44px;
    border-radius:11px;
    font-size:21px;
  }

  .timerPanel{
    min-width:105px;
    height:44px;
    padding:3px 6px;
  }

  .timerMain{
    font-size:14px;
    line-height:17px;
  }

  .bestLine{
    font-size:8px;
  }

  .topProgress{
    min-width:125px;
  }

  .levelCaption{
    min-width:0;
    width:max-content;
    max-width:100%;
    padding:5px 9px;
    font-size:11px;
    line-height:13px;
  }

  .progressTrack{
    height:9px;
    border-width:2px;
  }

  #progressTruck,.flag{
    top:-17px;
    font-size:14px;
  }

  .coinPanel{
    min-width:79px;
    height:44px;
    font-size:14px;
    gap:3px;
  }

  .coinIcon{
    width:23px;
    height:23px;
    font-size:13px;
  }

  .coinPlus{
    width:23px;
    height:23px;
    font-size:18px;
  }

  #controls{
    left:10px;
    right:10px;
    bottom:8px;
  }

  .controlSide{
    gap:5px;
  }

  .driveControl{
    width:66px;
    height:66px;
    min-width:66px;
    font-size:28px;
    border-width:2px;
  }

  .driveControl span{
    font-size:8px;
  }
}

/* =========================================================
   AZIZUL & HABIBA — TITLE SCREEN CREDIT
   ========================================================= */

/* Credit footer। */
.devCredit{
  position:fixed;
  left:50%;
  bottom:7px;
  transform:translateX(-50%);
  z-index:50;
  text-align:center;
  color:rgba(255,255,255,.72);
  font-size:10px;
  line-height:13px;
  letter-spacing:1.1px;
  text-shadow:0 2px 5px rgba(0,0,0,.55);
  pointer-events:none;
  user-select:none;
}

/* Developer name একটু বেশি visible। */
.devCredit span{
  display:inline-block;
  margin-top:2px;
  color:rgba(255,255,255,.9);
  font-size:11px;
  letter-spacing:.7px;
}

/* Name highlight। */
.devCredit b{
  color:#fff4a2;
  font-weight:900;
}

/* Title screen-এর play button যেন অবশ্যই clickable থাকে। */
#playBtn{
  position:relative;
  z-index:100;
  cursor:pointer;
  touch-action:manipulation;
  pointer-events:auto;
}

/* Play press feedback। */
#playBtn:active{
  transform:translateY(3px) scale(.985);
}

/* Mobile credit। */
@media(max-width:700px){
  .devCredit{
    bottom:4px;
    font-size:8px;
    line-height:10px;
  }
  .devCredit span{
    font-size:9px;
  }
}

/* V9: title menu clickable এবং canvas-এর উপর সঠিক layer। */
.menu,.titleScreen,.startScreen,#menu,#mainMenu,.homeScreen{
  position:relative;
  z-index:200;
}
#playBtn{
  position:relative;
  z-index:300;
  pointer-events:auto !important;
  touch-action:manipulation;
  cursor:pointer;
}

/* =========================================================
   V11 — RESTORE FULL UI / CANVAS LAYERING
   ========================================================= */

/* Canvas is the game render layer only. */
#game{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  z-index:0 !important;
  display:block !important;
}

/* Every menu/screen must render above the canvas. */
.screen{
  position:fixed !important;
  inset:0 !important;
  z-index:100 !important;
}

/* HUD must be above the canvas while playing. */
#hud{
  position:fixed !important;
  z-index:200 !important;
}

/* Driving controls must be above the canvas. */
#controls{
  position:fixed !important;
  z-index:210 !important;
}

/* Modal overlays above gameplay. */
.modal,.overlay,.pauseOverlay,.menuOverlay{
  z-index:500 !important;
}

/* Hidden means genuinely hidden. */
.hidden{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Main menu background must not disappear. */
#mainMenu{
  display:flex;
  visibility:visible;
  pointer-events:auto;
}

/* Menu actions stay clickable. */
#mainMenu .mainActions,
#mainMenu .actionBtn{
  position:relative;
  z-index:300;
  pointer-events:auto !important;
}

/* Title screen decorative layers stay behind buttons. */
#mainMenu .menuAtmosphere,
#mainMenu .brand,
#mainMenu .menuVehicle{
  z-index:110;
}

/* Credit stays visible but never blocks clicks. */
.devCredit{
  z-index:250 !important;
  pointer-events:none !important;
}

/* =========================================================
   V12 — RESTORE ORIGINAL MENU LAYOUT
   ========================================================= */

/* Main menu full-screen container। */
#mainMenu{
  position:fixed !important;
  inset:0 !important;
  display:block !important;
  overflow:hidden !important;
}

/* Logo exactly back to top-left। */
#mainMenu .brand{
  position:absolute !important;
  top:7% !important;
  left:6% !important;
  z-index:120 !important;
}

/* Buttons back to right-side vertical stack। */
#mainMenu .mainActions{
  position:absolute !important;
  right:8% !important;
  top:42% !important;
  left:auto !important;
  bottom:auto !important;
  width:min(330px,35vw) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:13px !important;
  z-index:300 !important;
}

/* Button sizing back to original। */
#mainMenu .actionBtn{
  position:relative !important;
  width:100% !important;
  display:block !important;
  z-index:301 !important;
}

/* Main-menu truck back to lower-left। */
#mainMenu .menuVehicle{
  position:absolute !important;
  left:9% !important;
  right:auto !important;
  top:auto !important;
  bottom:17% !important;
  z-index:120 !important;
}

/* Coin back to upper-right। */
#mainMenu .menuCoin{
  position:absolute !important;
  top:5% !important;
  right:5% !important;
  left:auto !important;
  bottom:auto !important;
  z-index:320 !important;
}

/* Version stays at very bottom and does not collide with credit। */
#mainMenu .version{
  position:absolute !important;
  bottom:8px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:120 !important;
}

/* Developer credit slightly below version without overlap। */
#mainMenu .devCredit{
  bottom:28px !important;
  z-index:121 !important;
}

/* Mobile: right-side stack remains right-side, but becomes narrower। */
@media(max-width:700px){
  #mainMenu .mainActions{
    right:6% !important;
    top:40% !important;
    width:min(290px,42vw) !important;
    gap:9px !important;
  }

  #mainMenu .menuVehicle{
    left:5% !important;
    bottom:12% !important;
    font-size:clamp(80px,20vw,160px) !important;
  }

  #mainMenu .brand{
    left:5% !important;
    top:5% !important;
    transform:scale(.82) rotate(-3deg) !important;
    transform-origin:top left !important;
  }
}


/* =========================================================
   V13 — FINAL MENU + DEVELOPER CREDIT FIX
   ========================================================= */

/* Main menu visible থাকলে normal flex screen হিসেবে থাকবে। */
#mainMenu:not(.hidden){
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  position:fixed !important;
  inset:0 !important;
  z-index:100 !important;
  overflow:hidden !important;
}

/* Atmospheric background শুধু decoration; UI ঢাকবে না। */
#mainMenu .menuAtmosphere{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
}

/* Logo। */
#mainMenu .brand{
  position:absolute !important;
  left:4.5% !important;
  top:5% !important;
  z-index:20 !important;
  pointer-events:none !important;
}

/* Truck। */
#mainMenu .menuVehicle{
  position:absolute !important;
  left:8% !important;
  bottom:16% !important;
  z-index:20 !important;
  pointer-events:none !important;
}

/* Right-side menu buttons। */
#mainMenu .mainActions{
  position:absolute !important;
  top:40% !important;
  right:7% !important;
  left:auto !important;
  bottom:auto !important;
  width:min(360px,34vw) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  z-index:40 !important;
  pointer-events:auto !important;
}

/* Buttons। */
#mainMenu .actionBtn{
  width:100% !important;
  min-height:68px !important;
  position:relative !important;
  z-index:41 !important;
  pointer-events:auto !important;
}

/* Coin। */
#mainMenu .menuCoin{
  position:absolute !important;
  top:5% !important;
  right:5% !important;
  z-index:45 !important;
}

/* Old overlapping credit hidden; new plaque used instead। */
#mainMenu .version{
  left:50% !important;
  bottom:7px !important;
  transform:translateX(-50%) !important;
  z-index:30 !important;
  font-size:10px !important;
  opacity:.7 !important;
}

/* সুন্দর visible developer sign। */
#mainMenu .developerPlaque{
  position:absolute !important;
  left:5% !important;
  bottom:4.5% !important;
  z-index:35 !important;
  min-width:245px !important;
  padding:12px 24px 13px !important;
  text-align:center !important;
  border:3px solid #8b4e22 !important;
  border-radius:14px !important;
  background:
    linear-gradient(180deg,#c77a35 0%,#9c5527 45%,#713718 100%) !important;
  box-shadow:
    0 6px 0 #3b2114,
    0 12px 25px #002d4555,
    inset 0 1px 0 #ffe1a066 !important;
  transform:rotate(-1deg) !important;
  pointer-events:none !important;
}

/* Plaque-এর ছোট heading। */
#mainMenu .developerSmall{
  color:#fff7df !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:2px !important;
  text-shadow:0 2px 2px #3d1e0e !important;
}

/* Developer name বড়, পরিষ্কার ও visible। */
#mainMenu .developerName{
  margin-top:3px !important;
  color:#ffe45c !important;
  font-size:22px !important;
  line-height:25px !important;
  font-weight:1000 !important;
  letter-spacing:.3px !important;
  text-shadow:
    0 3px 0 #6b2608,
    0 4px 8px #35170b99 !important;
}

/* Mobile layout। */
@media(max-width:700px){
  #mainMenu .brand{
    left:5% !important;
    top:5% !important;
    transform:scale(.75) rotate(-3deg) !important;
    transform-origin:top left !important;
  }

  #mainMenu .mainActions{
    top:39% !important;
    right:5% !important;
    width:42vw !important;
    min-width:220px !important;
    gap:8px !important;
  }

  #mainMenu .actionBtn{
    min-height:54px !important;
  }

  #mainMenu .menuVehicle{
    left:4% !important;
    bottom:13% !important;
  }

  #mainMenu .developerPlaque{
    left:4% !important;
    bottom:4% !important;
    min-width:190px !important;
    padding:8px 13px 9px !important;
  }

  #mainMenu .developerSmall{
    font-size:9px !important;
  }

  #mainMenu .developerName{
    font-size:16px !important;
    line-height:18px !important;
  }
}


/* PLAY / LEVEL start-এর সময় screen controller-এর hidden state-কে সর্বোচ্চ priority। */
#mainMenu.hidden{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* =========================================================
   V15 — GAMEPLAY CANVAS + HUD HARD VISIBILITY FIX
   ========================================================= */

/* Game canvas সবসময় render layer হিসেবে দৃশ্যমান। */
#game{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:0 !important;
}

/* Gameplay HUD। */
#hud{
  position:fixed !important;
  z-index:200 !important;
}

/* Gameplay controls। */
#controls{
  position:fixed !important;
  z-index:210 !important;
}

/* সব gameplay modal-এর hidden state। */
#pauseMenu.hidden,
#crashMenu.hidden,
#completeMenu.hidden{
  display:none !important;
}


/* =========================================================
   V17/V19 — MANUAL DEVELOPER CREDIT
   ========================================================= */

/* কাঠের signboard manually CSS দিয়ে তৈরি করা হচ্ছে। */
#mainMenu .developerPlaque{
  position:absolute !important;
  left:5% !important;
  bottom:4% !important;
  width:310px !important;
  height:118px !important;
  min-width:0 !important;
  padding:16px 22px 13px !important;
  box-sizing:border-box !important;
  border:3px solid #71330f !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#d88336 0%,#a95322 52%,#7d3819 100%) !important;
  box-shadow:0 8px 0 #55280f,0 12px 22px rgba(0,35,50,.35),inset 0 2px 0 rgba(255,226,153,.55) !important;
  transform:none !important;
  overflow:visible !important;
  pointer-events:none !important;
  text-align:center !important;
}

/* উপরে আগের মতো ঘাসের decorative strip। */
#mainMenu .developerPlaque::before{
  content:"" !important;
  position:absolute !important;
  left:-4px !important;
  right:-4px !important;
  top:-10px !important;
  height:14px !important;
  border-radius:9px 9px 4px 4px !important;
  background:repeating-linear-gradient(90deg,#3fbf45 0 9px,#69dc52 9px 16px,#2e9e3a 16px 21px) !important;
  border:2px solid #287b35 !important;
  box-shadow:0 3px 0 rgba(28,88,37,.55) !important;
}

/* sign-এর ছোট কাঠের highlight। */
#mainMenu .developerPlaque::after{
  content:"" !important;
  position:absolute !important;
  inset:7px !important;
  border:1px solid rgba(255,224,169,.32) !important;
  border-radius:12px !important;
  pointer-events:none !important;
}

#mainMenu .developerPlaque .developerSmall{
  display:block !important;
  position:relative !important;
  z-index:2 !important;
  color:#fff4dc !important;
  font:800 14px/1.1 Arial,sans-serif !important;
  letter-spacing:4px !important;
  margin:4px 0 10px !important;
  text-shadow:0 2px 2px rgba(72,27,7,.65) !important;
}

#mainMenu .developerPlaque .developerName{
  display:block !important;
  position:relative !important;
  z-index:2 !important;
  color:#ffd84a !important;
  font:900 27px/1 Arial,sans-serif !important;
  letter-spacing:.3px !important;
  text-shadow:0 3px 0 #87350e,0 5px 8px rgba(65,23,4,.55) !important;
}

#mainMenu .developerPlaque .amp{ color:#ffe99a !important; }

@media(max-width:700px){
  #mainMenu .developerPlaque{
    left:4% !important;
    bottom:3% !important;
    width:235px !important;
    height:89px !important;
    padding:12px 12px 9px !important;
  }
  #mainMenu .developerPlaque .developerSmall{font-size:10px !important;letter-spacing:2.5px !important;margin:2px 0 7px !important;}
  #mainMenu .developerPlaque .developerName{font-size:21px !important;}
}


/* =========================================================
   V18 — DRIVE / GAS RIGHT-SIDE CONTROL
   ========================================================= */

/* ডান পাশে Drive এবং Gas পাশাপাশি থাকবে। */
#controls .controlRight{
  display:flex !important;
  align-items:flex-end !important;
  gap:18px !important;
}

/* Drive-এর জন্য আলাদা visual priority। */
#controls .controlRight .driveControl:not(.gasControl){
  order:1 !important;
}

/* Gas ডানদিকে থাকবে। */
#controls .controlRight .gasControl{
  order:2 !important;
}

/* নতুন BOOST/NITRO বাটন—Drive আর Gas-এর পাশে, আলাদা বেগুনি/নীল রঙে যাতে বোঝা যায় এটা special। */
#controls .controlRight .boostControl{
  order:0 !important;
}
#controls .boostControl{
  background:radial-gradient(circle at 38% 25%,#c07bff,#5a1fa8 72%) !important;
  box-shadow:0 0 0 3px #7a3fd6,0 6px 14px rgba(90,31,168,.55) !important;
}
#controls .boostControl.pressed{
  filter:brightness(1.35);
  transform:scale(.94);
}

/* বাম পাশে শুধু Brake। */
#controls .controlLeft{
  display:flex !important;
  align-items:flex-end !important;
}

/* =========================================================
   V20 — SCREEN LAYER + SETTINGS + CREDIT GRASS
   ========================================================= */
.settingsOverlay{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(4,24,40,.48) !important;
  backdrop-filter:blur(7px) !important;
  pointer-events:auto !important;
}
.settingsOverlay.hidden{display:none !important;pointer-events:none !important;}
.settingsCard{position:relative !important;z-index:10000 !important;}

/* Developer plaque-এর উপরে আগের grass/leaf decoration ফিরিয়ে আনা হচ্ছে। */
#mainMenu .developerPlaque::before{
  content:"" !important;
  position:absolute !important;
  left:-5px !important; right:-5px !important; top:-13px !important;
  height:17px !important;
  border-radius:10px 10px 5px 5px !important;
  background:
    radial-gradient(ellipse 7px 11px at 16% 35%,#62d84d 0 55%,transparent 58%),
    radial-gradient(ellipse 6px 10px at 25% 65%,#3cab3e 0 55%,transparent 58%),
    radial-gradient(ellipse 7px 11px at 72% 38%,#6fe055 0 55%,transparent 58%),
    repeating-linear-gradient(90deg,#3fbf45 0 8px,#68db50 8px 15px,#2e9e3a 15px 21px) !important;
  border:2px solid #287b35 !important;
  box-shadow:0 3px 0 rgba(28,88,37,.55) !important;
}

/* Menu/level/garage/store screen কখনো gameplay controls-এর নিচে থাকবে না। */
.screen{z-index:300 !important;}
#hud{z-index:200 !important;}
#controls{z-index:210 !important;}

/* Level cards-এ content যেন card-এর বাইরে overlap না করে। */
.levelCard,.vehicleCard,.storeCard{overflow:hidden !important;}


/* =========================================================
   V21 — FINAL UI / AUDIO / CONTROL REPAIR
   ========================================================= */

/* Settings: right-side compact game panel, never top-left. */
.settingsOverlay{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
  padding:88px 24px 24px !important;
  background:rgba(3,24,42,.34) !important;
  backdrop-filter:blur(5px) !important;
  pointer-events:auto !important;
}
.settingsOverlay.hidden{display:none !important;pointer-events:none !important;}
.settingsCard{
  position:relative !important;
  width:350px !important;
  max-width:calc(100vw - 32px) !important;
  padding:24px 22px 20px !important;
  border-radius:22px !important;
  background:linear-gradient(145deg,#f9ffff 0%,#d9eff5 100%) !important;
  border:3px solid rgba(255,255,255,.95) !important;
  box-shadow:0 14px 0 rgba(4,48,74,.28),0 24px 55px rgba(0,25,45,.38) !important;
  color:#123a58 !important;
  animation:settingsIn .16s ease-out !important;
}
@keyframes settingsIn{from{transform:translateX(24px);opacity:0}to{transform:translateX(0);opacity:1}}
.settingsTitle{
  font-size:24px !important;
  font-weight:1000 !important;
  letter-spacing:.5px !important;
  text-align:left !important;
  padding-right:42px !important;
  margin-bottom:18px !important;
}
.settingsCloseBtn{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  width:40px !important;
  height:40px !important;
  border:2px solid #6d8491 !important;
  border-radius:12px !important;
  background:linear-gradient(#294f68,#122d41) !important;
  color:#fff !important;
  font-size:28px !important;
  line-height:34px !important;
  font-weight:900 !important;
  box-shadow:0 4px 0 #071c2b !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}
.settingsRow{font-size:15px !important;margin-bottom:9px !important;}
#volumeValue{color:#168c2b !important;font-size:18px !important;}
.volumeSlider{
  width:100% !important;
  height:34px !important;
  accent-color:#54df18 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}
.muteRow{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:15px 0 0 !important;
  padding:12px 14px !important;
  border-radius:12px !important;
  background:#ffffffaa !important;
  border:1px solid #9fc0cc !important;
  font-weight:900 !important;
  cursor:pointer !important;
}
.muteRow input{width:20px !important;height:20px !important;}

/* Bottom controls: Brake + Reverse left, Drive + Gas right. */
#controls{z-index:600 !important;pointer-events:none !important;}
#controls .controlSide{pointer-events:auto !important;}
#controls .driveControl{pointer-events:auto !important;touch-action:none !important;}
#controls .controlLeft,
#controls .controlRight{display:flex !important;align-items:flex-end !important;gap:12px !important;}
#controls .controlLeft{justify-content:flex-start !important;}
#controls .controlRight{justify-content:flex-end !important;}
#controls .driveControl.pressed,
#controls .driveControl:active{
  transform:translateY(5px) scale(.97) !important;
  filter:brightness(1.18) !important;
}
#controls .reverseControl{background:radial-gradient(circle at 38% 28%,#38556d,#132839 72%) !important;}
#controls .driveButton{background:radial-gradient(circle at 38% 28%,#38556d,#132839 72%) !important;}
#controls .gasControl{background:radial-gradient(circle at 38% 25%,#55e64b,#148d28 70%) !important;}

/* Back/Menu buttons: cleaner, clearly clickable. */
.backBtn,
.menuBackAction{
  border:3px solid #ffffff66 !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,#2c7eb0,#125079) !important;
  color:#fff !important;
  font-weight:1000 !important;
  box-shadow:0 6px 0 #062d49,0 10px 18px rgba(0,35,55,.25) !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  transition:transform .08s,filter .12s !important;
}
.backBtn{min-width:122px !important;padding:12px 18px !important;font-size:16px !important;}
.menuBackAction{min-height:58px !important;}
.backBtn:hover,.menuBackAction:hover{filter:brightness(1.12) !important;}
.backBtn:active,.menuBackAction:active{transform:translateY(4px) !important;box-shadow:0 2px 0 #062d49 !important;}

/* Main-menu developer sign: manual CSS, with grass + leaves + wood posts. */
#mainMenu .developerPlaque{
  width:325px !important;
  height:124px !important;
  left:5% !important;
  bottom:5% !important;
  padding:17px 22px 12px !important;
  border:3px solid #6c3515 !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#d98a3b 0%,#a95a28 48%,#773819 100%) !important;
  box-shadow:0 8px 0 #4b2614,0 15px 28px rgba(0,35,50,.34),inset 0 2px 0 #ffe2a655 !important;
  transform:none !important;
  overflow:visible !important;
}
#mainMenu .developerPlaque::before{
  content:"" !important;
  position:absolute !important;
  left:-6px !important;right:-6px !important;top:-15px !important;
  height:20px !important;
  border-radius:11px 11px 4px 4px !important;
  background:
    radial-gradient(ellipse 8px 13px at 10% 70%,#4caf3e 0 55%,transparent 58%),
    radial-gradient(ellipse 7px 12px at 23% 35%,#6bda4e 0 55%,transparent 58%),
    radial-gradient(ellipse 8px 13px at 39% 70%,#42a83a 0 55%,transparent 58%),
    radial-gradient(ellipse 8px 12px at 66% 35%,#6bda4e 0 55%,transparent 58%),
    radial-gradient(ellipse 8px 13px at 83% 68%,#42a83a 0 55%,transparent 58%),
    repeating-linear-gradient(90deg,#39b943 0 9px,#67d74f 9px 16px,#2e9638 16px 21px) !important;
  border:2px solid #277d32 !important;
  box-shadow:0 3px 0 rgba(28,88,37,.55) !important;
}
#mainMenu .developerPlaque::after{
  content:"" !important;
  position:absolute !important;
  left:13px !important;right:13px !important;bottom:-10px !important;
  height:11px !important;
  background:linear-gradient(90deg,#5c2d16 0 7%,transparent 7% 93%,#5c2d16 93% 100%) !important;
  border-radius:4px !important;
  opacity:.9 !important;
}
#mainMenu .developerSmall{font-size:14px !important;letter-spacing:4px !important;margin:3px 0 10px !important;}
#mainMenu .developerName{font-size:28px !important;line-height:1 !important;}

/* Settings must never be overridden by generic screen rules. */
#settingsMenu{z-index:9999 !important;}
#settingsMenu *{pointer-events:auto;}

@media(max-width:700px){
  .settingsOverlay{padding:60px 10px 10px !important;}
  .settingsCard{width:min(330px,calc(100vw - 20px)) !important;padding:20px 17px 16px !important;}
  .settingsTitle{font-size:21px !important;}
  .settingsCloseBtn{width:36px !important;height:36px !important;font-size:24px !important;}
  #controls{left:8px !important;right:8px !important;bottom:8px !important;}
  #controls .controlLeft,#controls .controlRight{gap:5px !important;}
  #controls .driveControl{width:66px !important;height:66px !important;min-width:66px !important;}
  #mainMenu .developerPlaque{width:245px !important;height:94px !important;left:4% !important;bottom:4% !important;padding:12px 12px 9px !important;}
  #mainMenu .developerSmall{font-size:10px !important;letter-spacing:2.5px !important;}
  #mainMenu .developerName{font-size:21px !important;}
}

/* =========================================================
   V22 — GARAGE / MAPS / PREMIUM UI
   ========================================================= */

/* Main menu-তে MAPS button ঢোকার পর action stack compact রাখা। */
#mainMenu .mainActions{gap:10px !important;}
#mainMenu .mainActions .actionBtn{min-height:54px !important;}

/* Map selector full-screen layout। */
#mapsMenu{overflow:auto !important;padding-bottom:30px !important;flex-direction:column !important;justify-content:flex-start !important;align-items:center !important;padding-top:16px !important;}
.mapHeader{position:sticky !important;top:0 !important;z-index:5 !important;}
.mapGrid{
  width:min(1180px,94vw) !important;
  margin:22px auto 40px !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
}
.mapCard{
  position:relative !important;
  min-height:220px !important;
  padding:0 !important;
  overflow:hidden !important;
  border:3px solid #ffffff66 !important;
  border-radius:22px !important;
  background:linear-gradient(180deg,#285d7d,#112f44) !important;
  color:#fff !important;
  box-shadow:0 7px 0 #071f31,0 14px 28px #00223544 !important;
  cursor:pointer !important;
  transition:transform .14s,filter .14s !important;
}
.mapCard:hover{transform:translateY(-4px) !important;filter:brightness(1.08) !important;}
.mapCard:active{transform:translateY(2px) !important;}
.mapThumb{height:130px !important;position:relative !important;overflow:hidden !important;background:#39bfe8 !important;}
.mapThumb::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#43c8f2,#a4eaf2 70%,#14a9cf);}
.mapThumb .mount{position:absolute;bottom:18px;width:0;height:0;border-left:95px solid transparent;border-right:95px solid transparent;border-bottom:115px solid #1577c8;opacity:.95;}
.mapThumb .mount.m2{left:100px;bottom:18px;border-left-width:75px;border-right-width:75px;border-bottom-color:#2a93df;}
.mapThumb .mount.m3{right:-10px;bottom:10px;border-left-width:85px;border-right-width:85px;border-bottom-color:#0c68b6;}
.mapThumb .ground{position:absolute;left:-5%;right:-5%;bottom:0;height:45px;background:linear-gradient(180deg,#6be64e,#25ad42);transform:skewY(-4deg);}
.mapThumb .sun{position:absolute;right:24px;top:18px;width:32px;height:32px;border-radius:50%;background:#ffe45c;box-shadow:0 0 25px #fff0a8;}
.mapThumb .snow{position:absolute;left:8%;right:8%;bottom:0;height:58%;background:linear-gradient(145deg,transparent 0 40%,#eefaff 41% 47%,transparent 48%),linear-gradient(180deg,#7bd7ff,#eafaff);clip-path:polygon(0 65%,20% 28%,36% 48%,53% 12%,71% 40%,100% 5%,100% 100%,0 100%);opacity:.9;}
.mapThumb .sand{position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(#f8d989,#d98d3b);clip-path:polygon(0 55%,20% 20%,40% 52%,64% 10%,82% 42%,100% 22%,100% 100%,0 100%);}
.mapThumb .tree{position:absolute;bottom:30px;width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:44px solid #188944;}
.mapThumb .tree.t1{left:18%;}.mapThumb .tree.t2{left:70%;transform:scale(.8);}.mapThumb .tree.t3{left:84%;transform:scale(.6);}
.mapThumb .city{position:absolute;left:0;right:0;bottom:32px;height:62px;background:repeating-linear-gradient(90deg,#344f63 0 26px,#253d4e 26px 48px);clip-path:polygon(0 55%,8% 40%,8% 10%,17% 10%,17% 48%,26% 48%,26% 22%,34% 22%,34% 62%,45% 62%,45% 4%,54% 4%,54% 55%,65% 55%,65% 17%,73% 17%,73% 48%,84% 48%,84% 8%,93% 8%,93% 58%,100% 58%,100% 100%,0 100%);}
.mapCardBody{padding:13px 15px 15px !important;text-align:left !important;}
.mapCardBody h3{font-size:18px !important;margin-bottom:4px !important;}
.mapCardBody p{font-size:12px !important;opacity:.82 !important;margin-bottom:9px !important;}
.mapBadge{display:inline-block !important;padding:5px 9px !important;border-radius:999px !important;background:#0b2336 !important;font-weight:900 !important;font-size:11px !important;}
.mapCard.selected{border-color:#8fff38 !important;box-shadow:0 7px 0 #1d6218,0 0 25px #75ff4a55 !important;}
.mapCard.locked{filter:saturate(.65) brightness(.75) !important;}
.mapLock{position:absolute !important;right:12px !important;top:105px !important;background:#071e31dd !important;border-radius:12px !important;padding:8px 10px !important;font-weight:1000 !important;}

/* Garage-এ actual CSS monster truck preview। */
.garageVehicle{font-size:0 !important;position:relative !important;width:270px !important;height:150px !important;display:flex !important;align-items:center !important;justify-content:center !important;}
.miniTruck{position:relative;width:235px;height:115px;filter:drop-shadow(0 14px 8px #001c2d55);transform:rotate(-2deg);}
.miniTruck .miniBody{position:absolute;left:35px;top:39px;width:170px;height:48px;border-radius:20px 30px 13px 15px;border:4px solid #402508;background:linear-gradient(180deg,color-mix(in srgb,var(--truck-color) 75%,#fff) 0%,var(--truck-color) 45%,color-mix(in srgb,var(--truck-color) 75%,#000) 100%);box-shadow:inset 0 7px #ffffff28;}
.miniTruck .miniCab{position:absolute;left:77px;top:8px;width:88px;height:48px;border:4px solid #402508;border-bottom:0;border-radius:22px 22px 0 0;background:var(--truck-color);}
.miniTruck .miniWindow{position:absolute;left:89px;top:15px;width:31px;height:26px;border:3px solid #2e4250;border-radius:6px;background:linear-gradient(135deg,#dff8ff,#63b8db);}
.miniTruck .miniWindow.w2{left:124px;}
.miniTruck .miniBumper{position:absolute;right:10px;top:68px;width:25px;height:12px;border-radius:5px;background:#1b2228;}
.miniTruck .miniWheel{position:absolute;bottom:0;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,#dce5ea 0 12%,#59666e 13% 27%,#182028 28% 53%,#090e12 54%);border:5px solid #0b1015;box-shadow:inset 0 0 0 4px #303b43;}
.miniTruck .w1{left:43px;}.miniTruck .w2{right:25px;}
.vehicleStats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0 16px;}
.statBar{background:#0c2c40;border-radius:8px;padding:7px 5px;color:#fff;font-size:10px;font-weight:900;}
.statBar i{display:block;height:5px;margin-top:5px;border-radius:5px;background:linear-gradient(90deg,#45e53c var(--stat),#ffffff25 var(--stat));}

/* Vehicle cards premium layout। */
.vehicleCard{min-height:190px !important;}
.vehicleEmoji{font-size:0 !important;height:88px !important;position:relative !important;background:linear-gradient(145deg,#1d5f83,#0d3046) !important;}
.vehicleCard .vehicleMini{transform:scale(.65);transform-origin:center center;position:absolute;left:50%;top:-6px;}
.vehicleCard h3{margin-top:8px !important;}
.vehicleCard p{font-size:11px !important;line-height:1.4 !important;}

/* Water এখন gradient + foam + reflection style। */
#game{image-rendering:auto !important;}

/* Settings-এর right-side panel। */
.settingsCard{width:370px !important;}

@media(max-width:1000px){
  .mapGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:620px){
  .mapGrid{grid-template-columns:1fr !important;width:94vw !important;}
  #mainMenu .mainActions .actionBtn{min-height:48px !important;}
}

/* V22 developer sign — screenshot-এর মতো manual wood + leaves + rocks। */
#mainMenu .developerPlaque{z-index:8 !important;}
#mainMenu .devLeaf{position:absolute;z-index:3;bottom:6px;width:46px;height:72px;border-radius:80% 10% 80% 10%;background:linear-gradient(135deg,#a5ef37,#2b9b36);border:2px solid #207a2b;filter:drop-shadow(0 4px 2px #153c2544);}
#mainMenu .devLeafL{left:-28px;transform:rotate(-34deg);}
#mainMenu .devLeafR{right:-28px;transform:scaleX(-1) rotate(-34deg);}
#mainMenu .devRock{position:absolute;z-index:4;bottom:-1px;width:62px;height:31px;border-radius:55% 45% 45% 40%;background:linear-gradient(145deg,#dce4e7,#7c8a92);border:2px solid #65747c;box-shadow:inset 0 5px #fff8;}
#mainMenu .devRockL{left:-10px;transform:rotate(-8deg);}
#mainMenu .devRockR{right:-10px;transform:rotate(8deg);}
#mainMenu .developerSmall,#mainMenu .developerName{position:relative;z-index:6 !important;}
#mainMenu .developerPlaque::before{z-index:2 !important;}
#mainMenu .developerPlaque::after{z-index:1 !important;}

/* Map thumbnail-এ আলাদা scenario color apply। */
.mapThumb{background:linear-gradient(180deg,var(--map-a),var(--map-b)) !important;}
.mapThumb::before{background:linear-gradient(180deg,var(--map-a),var(--map-b)) !important;}

/* Garage preview যেন সবসময় visible থাকে। */
.garageLayout{position:relative !important;z-index:2 !important;}
.vehicleList,.upgradePanel{position:relative !important;z-index:4 !important;}

/* Settings panel সব gameplay UI-এর ওপরে থাকবে। */
#settingsMenu{z-index:99999 !important;}


/* =========================================================
   V23 — CLICK / MENU / DEVELOPER CREDIT HARD FIX
   ========================================================= */

/* Main menu-র decorative layer কখনো button-এর click আটকাবে না। */
#mainMenu .menuAtmosphere,
#mainMenu::before,
#mainMenu::after,
#mainMenu .brand,
#mainMenu .menuVehicle,
#mainMenu .version,
#mainMenu .developerPlaque{
  pointer-events:none !important;
}

/* Main menu নিজে সবসময় interaction গ্রহণ করবে। */
#mainMenu:not(.hidden){
  pointer-events:auto !important;
}

/* Button stack সব decorative layer-এর উপরে থাকবে। */
#mainMenu .mainActions{
  z-index:900 !important;
  pointer-events:auto !important;
}
#mainMenu .mainActions .actionBtn{
  z-index:901 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  cursor:pointer !important;
}

/* Truck-কে developer sign থেকে আলাদা করা হলো। */
#mainMenu .menuVehicle{
  left:7% !important;
  bottom:17% !important;
  z-index:110 !important;
  transform:scaleX(-1) scale(.92) !important;
}

/* Developer plaque — screenshot-এর মতো আলাদা নিচের দিকে centered sign। */
#mainMenu .developerPlaque{
  left:50% !important;
  bottom:2.8% !important;
  transform:translateX(-50%) !important;
  width:360px !important;
  height:126px !important;
  padding:18px 24px 14px !important;
  box-sizing:border-box !important;
  z-index:500 !important;
  border:4px solid #74370f !important;
  border-radius:20px !important;
  background:
    linear-gradient(180deg,#dc8b42 0%,#b55f2a 43%,#7d381a 100%) !important;
  box-shadow:
    0 9px 0 #4d2513,
    0 18px 30px rgba(0,25,40,.38),
    inset 0 3px 0 rgba(255,226,169,.5),
    inset 0 -4px 0 rgba(67,25,7,.22) !important;
  overflow:visible !important;
}

/* Sign-এর ওপর সবুজ grass strip। */
#mainMenu .developerPlaque::before{
  left:-5px !important;
  right:-5px !important;
  top:-13px !important;
  height:18px !important;
  border-radius:10px 10px 5px 5px !important;
  z-index:1 !important;
  background:
    repeating-linear-gradient(90deg,#35aa39 0 10px,#65d84e 10px 17px,#2a8f34 17px 23px) !important;
  border:2px solid #26752e !important;
}

/* Sign-এর text clear ও centered। */
#mainMenu .developerPlaque .developerSmall{
  position:relative !important;
  z-index:10 !important;
  margin:2px 0 11px !important;
  font:900 15px/1 Arial,sans-serif !important;
  letter-spacing:4px !important;
  color:#fff8e7 !important;
  text-shadow:0 2px 2px rgba(65,25,7,.7) !important;
}
#mainMenu .developerPlaque .developerName{
  position:relative !important;
  z-index:10 !important;
  font:900 30px/1 Arial,sans-serif !important;
  letter-spacing:.2px !important;
  color:#ffd84b !important;
  text-shadow:0 3px 0 #7b2d08,0 6px 8px rgba(58,20,5,.55) !important;
}

/* Leaves/rocks sign-এর দুই পাশে থাকবে, text-এর ওপর নয়। */
#mainMenu .devLeaf{z-index:4 !important;pointer-events:none !important;}
#mainMenu .devRock{z-index:5 !important;pointer-events:none !important;}

/* Desktop-এ sign যেন truck-এর নিচে/উপরে overlap না করে। */
@media(min-width:1001px){
  #mainMenu .developerPlaque{left:50% !important;}
}

/* Small screen-এ menu button সবসময় visible এবং click-able। */
@media(max-width:1000px){
  #mainMenu .mainActions{
    top:34% !important;
    right:4% !important;
    width:min(300px,44vw) !important;
    min-width:220px !important;
    gap:8px !important;
  }
  #mainMenu .mainActions .actionBtn{min-height:52px !important;}
  #mainMenu .menuVehicle{left:3% !important;bottom:18% !important;transform:scaleX(-1) scale(.72) !important;transform-origin:left bottom !important;}
  #mainMenu .developerPlaque{width:300px !important;height:108px !important;bottom:2.5% !important;padding:15px 15px 11px !important;}
  #mainMenu .developerPlaque .developerSmall{font-size:12px !important;letter-spacing:3px !important;margin-bottom:9px !important;}
  #mainMenu .developerPlaque .developerName{font-size:24px !important;}
}

@media(max-width:620px){
  #mainMenu .mainActions{
    top:30% !important;
    right:3% !important;
    width:48vw !important;
    min-width:190px !important;
  }
  #mainMenu .menuVehicle{left:2% !important;bottom:22% !important;transform:scaleX(-1) scale(.55) !important;}
  #mainMenu .developerPlaque{width:270px !important;height:96px !important;bottom:2% !important;padding:12px 10px 9px !important;}
  #mainMenu .developerPlaque .developerSmall{font-size:10px !important;letter-spacing:2.4px !important;margin-bottom:7px !important;}
  #mainMenu .developerPlaque .developerName{font-size:21px !important;}
}

/* সব screen-এর interactive elements-এর ওপর hard interaction rule। */
.screen:not(.hidden) button,
.screen:not(.hidden) .mapCard,
.screen:not(.hidden) .vehicleCard,
.screen:not(.hidden) .upgradeCard,
#settingsMenu:not(.hidden) button,
#settingsMenu:not(.hidden) input{
  pointer-events:auto !important;
  touch-action:manipulation !important;
  cursor:pointer !important;
}

/* ============================================================
   V24 — FINAL MAIN MENU LAYOUT + DEVELOPER SIGN
   (এই section-টাই শেষ কথা বলে — এর আগের সব positioning override
   করে দেওয়া হচ্ছে, যাতে main menu সব screen size-এ পরিষ্কার,
   সুবিন্যস্ত ও non-overlapping থাকে।)
   ============================================================ */

/* ---- Developer sign: বাম পাশে, reference ছবির মতো bolt+leaf+rock design, কখনো বাটনের সাথে overlap করবে না ---- */
#mainMenu .developerPlaque{
  position:absolute !important;
  left:2.6% !important;
  right:auto !important;
  top:auto !important;
  bottom:3.2% !important;
  transform:none !important;
  z-index:6 !important;
  background:
    radial-gradient(circle 5px at 14px 14px,#3a2110 55%,transparent 58%),
    radial-gradient(circle 5px at calc(100% - 14px) 14px,#3a2110 55%,transparent 58%),
    radial-gradient(circle 5px at 14px calc(100% - 14px),#3a2110 55%,transparent 58%),
    radial-gradient(circle 5px at calc(100% - 14px) calc(100% - 14px),#3a2110 55%,transparent 58%),
    linear-gradient(180deg,#e0904a 0%,#a95322 52%,#7d3819 100%) !important;
  box-shadow:0 8px 0 #4a2410,0 14px 26px rgba(0,25,40,.45),inset 0 2px 0 rgba(255,226,153,.5) !important;
}
#mainMenu .developerPlaque .developerName{
  background:linear-gradient(180deg,#ffe27a 0%,#ffb43a 55%,#e2601f 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  text-shadow:0 1px 0 rgba(255,240,200,.4),0 3px 6px rgba(120,20,0,.55) !important;
}

/* ---- Desktop / tablet: mainActions ডান পাশে, plaque বাম পাশে — কখনো একে অপরের সাথে মেশে না ---- */
@media(min-width:901px){
  #mainMenu .developerPlaque{width:300px !important;height:112px !important;}
}

/* ---- Mobile: সব element একটাই পরিষ্কার vertical column-এ সাজানো হচ্ছে, বাটনগুলো উপরের দিকে ---- */
@media(max-width:900px){
  #mainMenu{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:env(safe-area-inset-top,0) 14px 0 !important;
    padding-top:18px !important;
    gap:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  #mainMenu .menuAtmosphere{position:absolute !important;inset:0 !important;z-index:0 !important;}
  #mainMenu .brand{
    position:static !important;
    left:auto !important;top:auto !important;transform:none !important;
    text-align:center !important;
    margin:2px 0 0 !important;
    z-index:2 !important;
  }
  #mainMenu .menuVehicle{
    position:static !important;
    left:auto !important;bottom:auto !important;
    transform:scaleX(-1) !important;
    font-size:56px !important;
    margin:2px 0 !important;
    z-index:2 !important;
  }
  /* মূল fix: PLAY/LEVELS/MAPS/GARAGE/STORE বাটনগুলো home page-এর উপরের দিকে, developer sign/water থেকে অনেক উপরে ---- */
  #mainMenu .mainActions{
    position:static !important;
    left:auto !important;right:auto !important;top:auto !important;
    display:flex !important;
    flex-direction:column !important;
    width:min(320px,84vw) !important;
    margin:6px 0 8px !important;
    gap:9px !important;
    z-index:2 !important;
  }
  #mainMenu .actionBtn{min-height:44px !important;font-size:15px !important;}
  #mainMenu .menuCoin{
    position:static !important;
    left:auto !important;bottom:auto !important;
    margin:0 0 4px !important;
    z-index:2 !important;
  }
  #mainMenu .version{
    position:static !important;
    left:auto !important;bottom:auto !important;
    margin:0 0 92px !important;
    opacity:.65 !important;
    font-size:10px !important;
    z-index:2 !important;
  }
  /* Developer plaque ছোট করে বাম-নিচে বসানো হচ্ছে, বাটনের flow-এর সাথে যেন কখনো না মেশে। */
  #mainMenu .developerPlaque{
    width:180px !important;
    height:74px !important;
    padding:9px 9px 6px !important;
    left:3% !important;
    bottom:2.6% !important;
  }
  #mainMenu .developerPlaque .developerSmall{font-size:8px !important;letter-spacing:1.6px !important;margin:1px 0 4px !important;}
  #mainMenu .developerPlaque .developerName{font-size:16px !important;}
}

@media(max-width:380px){
  #mainMenu .mainActions{width:88vw !important;}
  #mainMenu .menuVehicle{font-size:46px !important;}
  #mainMenu .developerPlaque{width:150px !important;height:64px !important;}
  #mainMenu .developerPlaque .developerName{font-size:13px !important;}
  #mainMenu .developerPlaque .developerSmall{font-size:7px !important;}
}

/* ============================================================
   V25 — MOBILE HUD FIX (গেমপ্লে HUD ছোট screen-এ যেন কখনো screen-এর
   বাইরে চলে না যায়—coin panel ও settings বাটন সবসময় দেখা যাবে)
   ============================================================ */
@media(max-width:480px){
  #hud{
    gap:4px !important;
    top:6px !important;
    left:6px !important;
    right:6px !important;
    height:auto !important;
    flex-wrap:wrap !important;
    align-items:flex-start !important;
  }
  .hudIcon{width:40px !important;height:40px !important;min-width:40px !important;font-size:18px !important;border-radius:10px !important;}
  .timerPanel{min-width:0 !important;height:40px !important;padding:3px 7px !important;}
  .timerMain{font-size:13px !important;line-height:15px !important;}
  .bestLine{display:none !important;}
  .topProgress{min-width:0 !important;flex:1 1 100% !important;order:3 !important;margin-top:4px !important;max-width:none !important;}
  .levelCaption{font-size:10px !important;padding:4px 8px !important;min-width:0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  .coinPanel{min-width:0 !important;height:40px !important;padding:3px 4px 3px 8px !important;font-size:13px !important;gap:4px !important;}
  .coinIcon{width:22px !important;height:22px !important;font-size:12px !important;}
  .coinPlus{width:22px !important;height:22px !important;font-size:14px !important;}
}

/* ============================================================
   V26 — GARAGE: ONE-SCREEN COMPACT LAYOUT (no scrollbar)
   ============================================================ */
#garageMenu{overflow-y:auto !important;overflow-x:hidden !important;}
#garageMenu .garageHeader{margin-bottom:8px !important;}
#garageMenu .garageLayout{
  width:min(1250px,96vw) !important;
  grid-template-columns:minmax(230px,270px) 1fr !important;
  gap:12px !important;
  max-height:calc(100vh - 110px) !important;
}
#garageMenu .vehiclePreview{padding:16px !important;}
#garageMenu .garageVehicle{font-size:clamp(70px,7.5vw,98px) !important;}
#garageMenu .vehicleName{font-size:21px !important;margin:3px 0 !important;}
#garageMenu .vehicleDesc{font-size:13px !important;margin-bottom:7px !important;}
#garageMenu .vehicleStats{margin:7px 0 11px !important;gap:6px !important;}
#garageMenu .statBar{padding:5px 4px !important;font-size:11px !important;}
#garageMenu #selectVehicleBtn{min-height:38px !important;font-size:15px !important;padding:0 14px !important;}
#garageMenu .vehicleList{
  grid-template-columns:repeat(4,1fr) !important;
  gap:10px !important;
  align-content:start !important;
}
#garageMenu .vehicleCard{min-height:0 !important;padding:10px !important;border-radius:13px !important;}
#garageMenu .vehicleEmoji{height:68px !important;overflow:hidden !important;}
#garageMenu .vehicleCard .vehicleMini{transform:scale(.46) !important;transform-origin:top center !important;top:4px !important;left:50% !important;margin-left:-117.5px !important;}
#garageMenu .vehicleCard h3{font-size:14px !important;margin:4px 0 3px !important;}
#garageMenu .vehicleCard p{font-size:10.5px !important;line-height:1.3 !important;margin:2px 0 !important;}
#garageMenu .vehicleCard button{min-height:30px !important;font-size:12px !important;padding:0 6px !important;}
#garageMenu .upgradePanel{width:min(1250px,96vw) !important;margin-top:10px !important;padding:12px 16px !important;}
#garageMenu .upgradeTitle{font-size:16px !important;margin-bottom:8px !important;}
#garageMenu .upgradeGrid{gap:10px !important;}
#garageMenu .upgradeCard{padding:9px !important;gap:2px !important;}
#garageMenu .upgradeCard span{font-size:21px !important;}
#garageMenu .upgradeCard b{font-size:12px !important;}
#garageMenu .upgradeCard small,#garageMenu .upgradeCard em{font-size:10px !important;}
#garageMenu::-webkit-scrollbar{display:none !important;}
#garageMenu{scrollbar-width:none !important;}
@media(max-width:900px){
  #garageMenu .garageLayout{grid-template-columns:1fr !important;max-height:none !important;}
  #garageMenu .vehicleList{grid-template-columns:repeat(3,1fr) !important;}
}

/* ============================================================
   V27 — DEVELOPER SIGN: reference ছবির মতো matching redesign
   (rounder plank, ৪ কোণায় 3D bolt, layered leaf cluster, rock pile)
   ============================================================ */
#mainMenu .developerPlaque::before{content:none !important;} /* উপরের পুরনো ঘাসের strip সরানো হলো—reference-এ এটা নেই */
#mainMenu .developerPlaque{
  border-radius:26px !important;
  border:3px solid #5a2c10 !important;
  padding:14px 24px 20px !important;
}
#mainMenu .developerPlaque .developerSmall{
  color:#fff !important;
  font-weight:900 !important;
}
#mainMenu .developerPlaque .developerName{
  font-weight:900 !important;
}

/* leaf cluster — box-shadow দিয়ে একাধিক পাতার overlap তৈরি করা হচ্ছে */
#mainMenu .developerPlaque .devLeaf{
  position:absolute !important;
  bottom:14px !important;
  width:34px !important;
  height:22px !important;
  border-radius:0 100% 0 100% !important;
  background:linear-gradient(135deg,#7be558,#2f9e35) !important;
  border:2px solid #1f7a28 !important;
  z-index:1 !important;
}
#mainMenu .developerPlaque .devLeafL{left:-16px !important;transform:rotate(-8deg) !important;box-shadow:14px -14px 0 -2px #57c745,-6px 10px 0 -4px #2f9e35 !important;}
#mainMenu .developerPlaque .devLeafR{right:-16px !important;transform:scaleX(-1) rotate(-8deg) !important;box-shadow:14px -14px 0 -2px #57c745,-6px 10px 0 -4px #2f9e35 !important;}

/* rock pile — একাধিক pebble box-shadow দিয়ে তৈরি করা হচ্ছে */
#mainMenu .developerPlaque .devRock{
  position:absolute !important;
  bottom:-10px !important;
  width:26px !important;
  height:18px !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 35% 30%,#f4f8fa 0%,#c7d2d8 45%,#8b98a1 80%,#6c7981 100%) !important;
  border:1px solid #5c6870 !important;
  z-index:2 !important;
}
#mainMenu .developerPlaque .devRockL{left:6px !important;box-shadow:22px 3px 0 -2px #b7c2c9,-14px 5px 0 -4px #9aa6ad !important;}
#mainMenu .developerPlaque .devRockR{right:6px !important;box-shadow:-22px 3px 0 -2px #b7c2c9,14px 5px 0 -4px #9aa6ad !important;}

/* ============================================================
   V28 — STORE: ONE-SCREEN COMPACT LAYOUT (no scrollbar)
   ============================================================ */
#storeMenu{overflow-y:auto !important;overflow-x:hidden !important;}
#storeMenu::-webkit-scrollbar{display:none !important;}
#storeMenu{scrollbar-width:none !important;}
#storeMenu .storeHeader{margin-bottom:14px !important;}
#storeMenu .storeGrid{
  width:min(1250px,96vw) !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:20px !important;
  max-height:calc(100vh - 100px) !important;
}
#storeMenu .storeCard{
  padding:22px 16px 20px !important;
  border-radius:20px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  border-top:5px solid var(--card-accent,#2e9ee0) !important;
  box-shadow:0 12px 28px #06344e44 !important;
}
#storeMenu .storeCard:nth-child(1){--card-accent:#3ddc55;}
#storeMenu .storeCard:nth-child(2){--card-accent:#ffc93d;}
#storeMenu .storeCard:nth-child(3){--card-accent:#a25bff;}
#storeMenu .storeCard:nth-child(4){--card-accent:#2ec6d6;}
#storeMenu .storeCard:nth-child(5){--card-accent:#4a90ff;}
#storeMenu .storeCard:nth-child(6){--card-accent:#ff9f2e;}
#storeMenu .storeIcon{
  font-size:46px !important;
  line-height:1 !important;
  width:74px !important;height:74px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 35% 30%,#ffffff,#e4f3fb) !important;
  box-shadow:inset 0 0 0 3px var(--card-accent,#2e9ee0),0 4px 10px #06344e33 !important;
  margin-bottom:6px !important;
}
#storeMenu .storeCard h3{font-size:18px !important;margin:6px 0 3px !important;color:#123c59 !important;letter-spacing:.5px !important;}
#storeMenu .storeCard p{font-size:13px !important;min-height:0 !important;margin-bottom:10px !important;line-height:1.35 !important;color:#4a6373 !important;}
#storeMenu .storeCard .actionBtn{min-height:42px !important;font-size:14px !important;padding:0 14px !important;background:linear-gradient(180deg,var(--card-accent,#2e9ee0),#0a3150) !important;}
#storeMenu .storeCard:nth-child(1) .actionBtn{background:linear-gradient(180deg,#4be566,#1a9c33) !important;}
@media(max-width:900px){
  #storeMenu .storeGrid{grid-template-columns:repeat(2,1fr) !important;max-height:none !important;}
}
@media(max-width:560px){
  #storeMenu .storeGrid{grid-template-columns:1fr !important;}
}

/* ============================================================
   V29 — TOAST NOTIFICATION ("Not enough balance!" ইত্যাদি)
   ============================================================ */
.toast{
  position:fixed;
  left:50%;
  bottom:90px;
  transform:translateX(-50%) translateY(20px);
  background:linear-gradient(180deg,#ff5a4d,#c62c22);
  color:#fff;
  font-weight:900;
  font-size:15px;
  letter-spacing:.3px;
  padding:14px 26px;
  border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.35),0 0 0 3px rgba(255,255,255,.25) inset;
  z-index:99999;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
  white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.hidden{display:none;}
@media(max-width:600px){
  .toast{font-size:13px;padding:11px 18px;bottom:120px;white-space:normal;text-align:center;max-width:82vw;}
}

/* =========================================================
   V30 — FINAL ADVANCED PATCH
   (মাউস-ফার্স্ট control panel + HUD status badges +
   Missions/Achievements screen + Garage repair/condition bar)
   ========================================================= */

/* ---------- Control panel উপরের mini row: PAUSE / RESTART / MUTE ---------- */
#controls .controlTop{
  position:absolute !important;
  right:14px !important;
  bottom:168px !important;
  display:flex !important;
  gap:10px !important;
  pointer-events:auto !important;
  z-index:610 !important;
}
#controls .iconControl{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  border-radius:50% !important;
  font-size:19px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:radial-gradient(circle at 38% 28%,#4a5a66,#1c262d 72%) !important;
  box-shadow:0 0 0 3px #2c3942,0 6px 12px rgba(0,0,0,.4) !important;
  color:#fff !important;
  touch-action:manipulation !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}
#controls .iconControl span{display:none !important;}
#controls .iconControl.pressed,
#controls .iconControl:active{transform:scale(.92) !important;filter:brightness(1.3) !important;}
#controls .iconControl.muteIcon.muted{background:radial-gradient(circle at 38% 28%,#7a3f3f,#3a1c1c 72%) !important;}

@media(max-width:700px){
  #controls .controlTop{right:8px !important;bottom:150px !important;gap:7px !important;}
  #controls .iconControl{width:40px !important;height:40px !important;min-width:40px !important;font-size:16px !important;}
}

/* ---------- HUD status: Weather badge + Damage bar ---------- */
.hudStatus{
  position:fixed !important;
  top:70px !important;
  right:18px !important;
  z-index:205 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  background:#0b2336cc !important;
  border:2px solid #ffffff33 !important;
  border-radius:999px !important;
  padding:6px 12px !important;
  pointer-events:none !important;
}
.weatherBadge{font-size:18px !important;line-height:1 !important;}
.damageWrap{
  width:70px !important;
  height:9px !important;
  border-radius:6px !important;
  background:#00000055 !important;
  overflow:hidden !important;
  border:1px solid #ffffff44 !important;
}
.damageBar{
  height:100% !important;
  width:100% !important;
  border-radius:6px !important;
  background:linear-gradient(90deg,#4ae55a,#2fae3e) !important;
  transition:width .25s ease,background .25s ease !important;
}
.damageBar.warn{background:linear-gradient(90deg,#ffcf3a,#e0a51e) !important;}
.damageBar.crit{background:linear-gradient(90deg,#ff5a4d,#c62c22) !important;}
@media(max-width:700px){
  .hudStatus{top:58px !important;right:8px !important;padding:4px 9px !important;gap:5px !important;}
  .weatherBadge{font-size:14px !important;}
  .damageWrap{width:48px !important;height:7px !important;}
}

/* ---------- MISSIONS / ACHIEVEMENTS স্ক্রিন ---------- */
#missionsMenu{overflow:auto !important;flex-direction:column !important;align-items:center !important;padding-top:16px !important;padding-bottom:40px !important;}
.missionsHeader{position:sticky !important;top:0 !important;z-index:5 !important;}
.missionsBody{width:min(760px,94vw) !important;margin:18px auto !important;color:#fff !important;}
.missionsSubTitle{font-size:16px !important;letter-spacing:1px !important;margin:18px 0 10px !important;opacity:.9 !important;}
.missionsList,.achievementsList{display:flex !important;flex-direction:column !important;gap:10px !important;}
.missionItem,.achItem{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  background:linear-gradient(180deg,#1e5572,#0d2f44) !important;
  border:2px solid #ffffff33 !important;
  border-radius:14px !important;
  padding:12px 14px !important;
}
.missionItem.claimed,.achItem.done{opacity:.55 !important;filter:grayscale(.3) !important;}
.missionInfo,.achInfo{flex:1 1 auto !important;min-width:0 !important;}
.missionDesc,.achDesc{font-size:13px !important;font-weight:800 !important;margin-bottom:6px !important;}
.missionProgressTrack{height:8px !important;border-radius:6px !important;background:#00000055 !important;overflow:hidden !important;}
.missionProgressFill{height:100% !important;background:linear-gradient(90deg,#55e64b,#148d28) !important;border-radius:6px !important;}
.missionReward{font-size:11px !important;opacity:.75 !important;margin-top:4px !important;}
.claimBtn{
  flex:0 0 auto !important;
  padding:9px 14px !important;
  border-radius:10px !important;
  border:none !important;
  font-weight:1000 !important;
  cursor:pointer !important;
  background:#2e2e2e !important;
  color:#aaa !important;
}
.claimBtn.ready{
  background:linear-gradient(180deg,#ffd34e,#e0a51e) !important;
  color:#201400 !important;
  box-shadow:0 0 0 2px #fff6cc55,0 0 14px #ffd34e88 !important;
}
@media(prefers-reduced-motion:no-preference){
  .claimBtn.ready{animation:claimPulse 1.4s ease-in-out infinite;}
}
@keyframes claimPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
.achIcon{font-size:26px !important;flex:0 0 auto !important;}

/* ---------- Garage: condition/damage bar + Repair বাটন ---------- */
.garageCondition{margin:4px 0 14px !important;}
.garageCondition .condLabel{font-size:11px !important;font-weight:900 !important;color:#cfe6f2 !important;margin-bottom:5px !important;display:flex !important;justify-content:space-between !important;}
.garageCondition .condTrack{height:10px !important;border-radius:7px !important;background:#07223399 !important;overflow:hidden !important;border:1px solid #ffffff33 !important;}
.garageCondition .condFill{height:100% !important;border-radius:7px !important;background:linear-gradient(90deg,#4ae55a,#2fae3e) !important;transition:width .25s ease,background .25s ease !important;}
.garageCondition .condFill.warn{background:linear-gradient(90deg,#ffcf3a,#e0a51e) !important;}
.garageCondition .condFill.crit{background:linear-gradient(90deg,#ff5a4d,#c62c22) !important;}
.repairBtn{
  margin-top:8px !important;
  width:100% !important;
  padding:10px !important;
  border-radius:10px !important;
  border:none !important;
  font-weight:1000 !important;
  cursor:pointer !important;
  background:linear-gradient(180deg,#3bb6e0,#1c7ea3) !important;
  color:#fff !important;
}
.repairBtn:disabled{background:#2e3a42 !important;color:#7a8a93 !important;cursor:default !important;}

/* Supervisor credit (main menu) */
#mainMenu .supervisedBy{
  margin-top:4px;
  font-size:11px;
  letter-spacing:1.5px;
  color:#fff6d6;
  opacity:.9;
  text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
#mainMenu .supervisedBy strong{ color:#ffe99a; letter-spacing:.5px; }
@media(max-width:700px){ #mainMenu .supervisedBy{ font-size:9px; } }

/* v4: HILL RUSH BANGLADESH নাম */
.brandBD{display:inline-flex;align-items:center;gap:8px;margin:6px 0 4px;padding:3px 16px 3px 10px;background:#0a7a3a;color:#fff;font-weight:1000;font-style:italic;letter-spacing:3px;font-size:clamp(16px,2.6vw,30px);transform:skewX(-8deg);border-radius:4px;box-shadow:0 4px 0 #064d24;}
.brandBD .bdDot{width:.9em;height:.9em;border-radius:50%;background:#e8112d;display:inline-block;}


/* ============================================================
   V10 — HOME PAGE: Hill Rush Bangladesh ব্যানার ছবি + তিনজনের নামের বক্স
   ছবির পুরোটাই সবসময় দেখা যায় (কোনো স্ক্রিনে নিচের ফিচার-স্ট্রিপ কাটে না):
   .menuStage = ছবির সমান 3:2 মাপের বক্স, স্ক্রিনের মাঝখানে ফিট হয়;
   বাটন ও credit box ওই বক্সের ভেতরে, তাই ছবির সাথে সবসময় একই জায়গায় থাকে।
   ছবির দুই পাশের বাড়তি জায়গা ঝাপসা করা একই ছবি দিয়ে ভরা।
   (এই section সবার শেষে—আগের সব main menu rule override করে।)
   ============================================================ */
#mainMenu{
  background:#0c2d44 !important;
  overflow:hidden !important;
}
#mainMenu:before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:-30px !important;
  width:auto !important;height:auto !important;
  clip-path:none !important;
  background:url("home_bg.jpg") center/cover no-repeat !important;
  filter:blur(16px) brightness(.8) !important;
  opacity:1 !important;
  animation:none !important;
  box-shadow:none !important;border:0 !important;
  z-index:0 !important;
}
#mainMenu:after,#mainMenu .menuAtmosphere,#mainMenu .brand,#mainMenu .menuVehicle,#mainMenu .version{
  display:none !important;
}

#mainMenu .menuStage{
  position:absolute !important;
  top:50% !important;left:50% !important;
  width:min(100vw,150vh) !important;
  height:min(100vh,66.667vw) !important;
  transform:translate(-50%,-50%) !important;
  background:url("home_bg.jpg") center/100% 100% no-repeat !important;
  --sw:min(100vw,150vh);
  z-index:2 !important;
}

#mainMenu .menuStage .mainActions{
  min-width:0 !important;max-width:none !important;
  position:absolute !important;
  top:25% !important;
  right:3% !important;
  left:auto !important;
  bottom:auto !important;
  width:max(130px,calc(var(--sw)*0.22)) !important;
  padding:max(6px,calc(var(--sw)*0.012)) !important;
  gap:max(4px,calc(var(--sw)*0.008)) !important;
  background:rgba(6,30,48,.58) !important;
  border:2px solid rgba(255,255,255,.28) !important;
  border-radius:22px !important;
  backdrop-filter:blur(5px);
  box-shadow:0 12px 30px rgba(0,20,35,.5) !important;
  z-index:300 !important;
}
#mainMenu .menuStage .mainActions .actionBtn{
  min-height:0 !important;height:auto !important;line-height:1.2 !important;
  padding:max(5px,calc(var(--sw)*0.009000000000000001)) 12px !important;
  font-size:max(10px,calc(var(--sw)*0.013000000000000001)) !important;
  border-radius:14px !important;
}
/* কয়েন ব্যালেন্স: বাটন-প্যানেলের মাথায় */
#mainMenu .menuStage .mainActions .menuCoin{
  position:static !important;
  margin:0 0 2px !important;
  padding:max(4px,calc(var(--sw)*0.006999999999999999)) 10px !important;
  font-size:max(11px,calc(var(--sw)*0.013999999999999999)) !important;
  text-align:center !important;
  background:rgba(255,255,255,.12) !important;
  box-shadow:none !important;
  border-radius:12px !important;
  transform:none !important;
}

body #mainMenu .menuStage .developerPlaque{
  font-size:max(7px,calc(var(--sw)*0.012)) !important;
  position:absolute !important;
  top:auto !important;
  left:1.2% !important;
  bottom:13.5% !important;
  right:auto !important;
  width:17em !important;
  height:auto !important;
  padding:1.1em 1.4em 1.5em !important;
  border-radius:1.6em !important;
  text-align:center !important;
  z-index:8 !important;
}
body #mainMenu .developerPlaque .developerSmall{
  font-size:.82em !important;letter-spacing:.3em !important;
  margin:0 0 .45em !important;line-height:1.2 !important;
}
body #mainMenu .developerPlaque .developerName{
  font-size:1.5em !important;line-height:1.1 !important;white-space:nowrap !important;
}
body #mainMenu .developerPlaque .supervisedBy{
  display:block !important;
  margin:.7em auto .25em !important;
  padding-top:.6em !important;
  border-top:1px solid rgba(255,235,190,.45) !important;
  width:80% !important;
  font-size:.78em !important;letter-spacing:.3em !important;
  color:#fff !important;font-weight:900 !important;opacity:1 !important;
  text-shadow:0 1px 2px rgba(60,20,0,.7) !important;
}
body #mainMenu .developerPlaque .supervisorName{
  font-size:1.1em !important;font-weight:900 !important;line-height:1.15 !important;
  white-space:nowrap !important;color:#ffe99a !important;
  text-shadow:0 1px 0 rgba(255,240,200,.35),0 2px 4px rgba(90,25,0,.7) !important;
}

@media(max-height:520px){
  #mainMenu .menuStage .mainActions{top:15% !important;right:2% !important;width:max(100px,calc(var(--sw)*0.18)) !important;padding:4px !important;gap:3px !important;border-radius:12px !important;}
  #mainMenu .menuStage .mainActions .actionBtn{padding:3px 6px !important;font-size:9px !important;min-width:0 !important;border-radius:8px !important;box-shadow:inset 0 0 0 1px #ffffff33,0 2px 0 #062f4d !important;}
  #mainMenu .menuStage .mainActions .menuCoin{padding:2px 6px !important;font-size:9px !important;}
  body #mainMenu .menuStage .developerPlaque{bottom:15% !important;}
}

@media(orientation:portrait){
  #mainMenu .menuStage{
    top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;
    transform:none !important;
    --sw:100vw;
    background:url("home_bg.jpg") top center/100% auto no-repeat !important;
  }
  #mainMenu .menuStage .mainActions{
    top:calc(66.667vw + 14px) !important;right:auto !important;left:50% !important;
    transform:translateX(-50%) !important;width:min(300px,76vw) !important;
  }
  #mainMenu .menuStage .mainActions .actionBtn{font-size:14px !important;padding:9px 12px !important;}
  body #mainMenu .menuStage .developerPlaque{
    font-size:10px !important;left:50% !important;transform:translateX(-50%) !important;bottom:2.5% !important;
  }
}

/* ============================================================
   V12 — ওয়াইড স্ক্রিনে ছবি পুরো স্ক্রিন জুড়ে
   home_bg_wide.jpg = মূল ব্যানার ঠিক মাঝখানে, দুই পাশে ছবিরই স্বাভাবিক বাড়ানো অংশ।
   ফলে ওয়াইড স্ক্রিনে দুই পাশে আর ফাঁকা/ঝাপসা বক্স দেখা যায় না, আর মাঝের ছবি কাটাও পড়ে না।
   ============================================================ */
@media(orientation:landscape){
  #mainMenu:after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:auto !important;height:auto !important;
    background:url("home_bg_wide.jpg") center/auto 100% no-repeat !important;
    opacity:1 !important;animation:none !important;
    clip-path:none !important;border:0 !important;box-shadow:none !important;
    pointer-events:none !important;
    z-index:1 !important;
  }
}

/* V12b — চওড়া স্ক্রিনে ছবি পুরো স্ক্রিন জুড়ে (কোনো ঝাপসা পাশ নেই)।
   ছবি ১২% বড় করে নিচ থেকে বসানো; স্ক্রিন যত চওড়া, ছবিও তত একটু চওড়া হয়ে পুরো স্ক্রিন ভরে।
   বাটন, নামের বক্স আর সব লেখা কিন্তু স্বাভাবিক মাপেই থাকে (চওড়া হয় না)। */
@media(orientation:landscape) and (min-aspect-ratio:17/10){
  #mainMenu:after{display:none !important;}
  #mainMenu .menuStage{
    width:min(100vw,calc(1.5*1.35*112vh)) !important;
    height:112vh !important;
    top:auto !important;bottom:0 !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    --sw:calc(1.5*112vh);
    background:url("home_bg.jpg") center/100% 100% no-repeat !important;
  }
  #mainMenu:before{
    background:url("home_bg.jpg") center bottom/cover no-repeat !important;
  }
}

/* V12c — বাটনগুলো স্বচ্ছ (পতাকা দেখা যায়), তার চারপাশে হালকা বক্স + বর্ডার;
   কয়েন ব্যালেন্স আলাদা হয়ে বক্সের ঠিক উপরে। */
@media(orientation:landscape){
  #mainMenu .menuStage .mainActions{
    background:rgba(6,30,48,.10) !important;
    border:2px solid rgba(255,255,255,.6) !important;
    box-shadow:0 6px 18px rgba(0,0,0,.22) !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  }
  #mainMenu .menuStage .mainActions .actionBtn{opacity:.82 !important;}
  #mainMenu .menuStage .mainActions .menuCoin{
    position:absolute !important;
    left:0 !important;right:0 !important;top:auto !important;
    bottom:calc(100% + max(6px,calc(var(--sw)*0.010))) !important;
    margin:0 !important;
    background:rgba(6,30,48,.62) !important;
    border:2px solid rgba(255,255,255,.45) !important;
    border-radius:16px !important;
  }
}

/* V12d — কয়েন ব্যালেন্স বাটন থেকে আলাদা, স্ক্রিনের একদম উপরে (ডান দিকে)। */
@media(orientation:landscape){
  #mainMenu .menuStage .mainActions .menuCoin{
    bottom:calc(100% + max(6px,calc(min(100vh,66.667vw)*0.25 - 52px))) !important;
  }
}
@media(orientation:landscape) and (max-height:520px){
  #mainMenu .menuStage .mainActions .menuCoin{
    bottom:calc(100% + max(4px,calc(min(100vh,66.667vw)*0.15 - 30px))) !important;
  }
}
@media(orientation:landscape) and (min-aspect-ratio:17/10){
  #mainMenu .menuStage .mainActions .menuCoin{
    bottom:calc(100% + max(6px,calc(16vh - 52px))) !important;
  }
}
@media(orientation:landscape) and (min-aspect-ratio:17/10) and (max-height:520px){
  #mainMenu .menuStage .mainActions .menuCoin{
    bottom:calc(100% + max(4px,calc(4.8vh - 30px))) !important;
  }
}

/* V12e — বাটন প্যানেল একটু নিচে নামানো; কয়েন আগের মতো একদম উপরেই থাকে। */
@media(orientation:landscape) and (min-height:521px){
  #mainMenu .menuStage .mainActions{top:31% !important;}
  #mainMenu .menuStage .mainActions .menuCoin{
    bottom:calc(100% + max(6px,calc(min(100vh,66.667vw)*0.31 - 52px))) !important;
  }
}
@media(orientation:landscape) and (min-height:521px) and (min-aspect-ratio:17/10){
  #mainMenu .menuStage .mainActions .menuCoin{
    bottom:calc(100% + max(6px,calc(22.72vh - 52px))) !important;
  }
}
@media(orientation:landscape) and (max-height:520px){
  #mainMenu .menuStage .mainActions{top:19% !important;}
  #mainMenu .menuStage .mainActions .menuCoin{
    bottom:calc(100% + max(4px,calc(min(100vh,66.667vw)*0.19 - 30px))) !important;
  }
}
@media(orientation:landscape) and (max-height:520px) and (min-aspect-ratio:17/10){
  #mainMenu .menuStage .mainActions .menuCoin{
    bottom:calc(100% + max(4px,calc(9.28vh - 30px))) !important;
  }
}

/* ===== V15: বাংলাদেশি যানবাহনের sprite, customization, records ===== */
.v15Sprite{display:block;height:auto;margin:0 auto;pointer-events:none;image-rendering:auto;}
.garageVehicle .v15Sprite{height:148px !important;width:auto !important;max-width:none !important;transform:scaleX(-1);}
.vehicleCard .v15Sprite.vehicleMini{position:absolute !important;left:50% !important;top:-14px !important;height:96px !important;width:auto !important;transform:translateX(-50%) !important;}
.garageCustom{margin:8px auto;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.18);max-width:340px;}
.gcTitle{font-weight:800;font-size:12px;letter-spacing:.08em;margin-bottom:6px;opacity:.9;}
.gcSwatches{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.gcSwatch{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.55);cursor:pointer;padding:0;color:#fff;font-size:14px;line-height:1;background:#444;}
.gcSwatch.on{border-color:#ffe14a;box-shadow:0 0 0 2px #ffe14a;}
.gcPlate{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;font-size:12px;font-weight:700;}
.gcPlate input{width:92px;padding:4px 6px;border-radius:6px;border:2px solid #222;background:#fffdf2;color:#111;font:700 13px monospace;text-align:center;text-transform:uppercase;}
.recordsList{padding:10px 14px 24px;overflow-y:auto;max-height:calc(100% - 70px);}
.recSummary{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;margin:6px 0 10px;font-weight:700;}
.recH{margin:12px 0 6px;font-size:15px;}
.recGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.recCard{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.16);}
.recCard b{font-size:12px;opacity:.9;}
.recCard span{font-size:16px;font-weight:800;color:#ffe14a;}
.recCard.locked{opacity:.5;}
.recEmpty{grid-column:1/-1;opacity:.8;padding:6px;}
#recordsMenu{background:linear-gradient(#0d8bd8,#43caeb);flex-direction:column !important;justify-content:flex-start !important;align-items:center !important;overflow:auto !important;padding:16px 18px 30px !important;}
.recordsList{width:min(900px,96vw);max-height:none !important;color:#fff;overflow:visible !important;}
/* V15: ছোট (ল্যান্ডস্কেপ ফোন) স্ক্রিনে crash মেনু কমপ্যাক্ট, যাতে ৩টা বাটন control-এর পেছনে না যায় */
@media (max-height:480px){
  #crashMenu .modalCard{padding-top:10px !important;padding-bottom:10px !important;max-height:calc(100vh - 110px) !important;overflow:auto !important;}
  #crashMenu .modalIcon{display:none !important;}
  #crashMenu h2{margin:2px 0 !important;font-size:26px !important;}
  #crashMenu p{margin:2px 0 6px !important;}
  #crashMenu .actionBtn{min-height:40px !important;height:40px !important;margin:5px auto !important;font-size:15px !important;}
}