*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  user-select:none;
}

html,
body{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#0d1823;
  font-family:Arial,Helvetica,sans-serif;
  color:#fff;
}

button{
  font:inherit;
}

button:focus-visible{
  outline:3px solid rgba(95,217,255,.6);
  outline-offset:3px;
}

canvas#game{
  display:block;
  width:100vw;
  height:100vh;
  touch-action:none;
}

.hidden{
  display:none !important;
}

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

#gameHud{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:5;
}

.hud-left{
  position:absolute;
  top:18px;
  left:18px;
  width:240px;
  padding:14px 16px 12px;
  background:rgba(7,14,20,.86);
  border:1px solid rgba(255,255,255,.10);
  border-left:4px solid #54d4ff;
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}

.title-small{
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  color:#7be3ff;
  margin-bottom:5px;
}

.score-line{
  font-size:31px;
  font-weight:900;
  line-height:1;
}

.sub-line{
  margin-top:8px;
  font-size:11px;
  color:#9db0bf;
  letter-spacing:1px;
}

.sub-line span{
  color:#75f4c0;
  font-weight:800;
}

.hud-top{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
}

.pill{
  min-width:112px;
  text-align:center;
  background:rgba(7,14,20,.86);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px 12px;
  font-size:12px;
  font-weight:900;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}

.pill span{
  color:#75f4c0;
}

.power-wrap{
  position:absolute;
  right:18px;
  top:18px;
  width:180px;
  padding:11px 12px 12px;
  background:rgba(7,14,20,.86);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
}

.power-label{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  font-weight:800;
  color:#b7c5d1;
  margin-bottom:7px;
}

.power-label strong{
  color:#7be3ff;
}

.power-shell{
  height:12px;
  background:#182731;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}

#powerBar{
  height:100%;
  width:100%;
  background:linear-gradient(90deg,#4ed9ff,#76f0bf);
  border-radius:999px;
}

.small-menu-btn{
  position:absolute;
  right:18px;
  top:88px;
  pointer-events:auto;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(7,14,20,.82);
  color:#cbd7de;
  border-radius:9px;
  padding:9px 13px;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}

.small-menu-btn:hover{
  background:#152630;
  color:#fff;
}

/* -------------------------------------------------------
   COMMON SCREEN OVERLAY
------------------------------------------------------- */

.screen-overlay{
  position:fixed;
  inset:0;
  z-index:20;
  overflow:auto;
  pointer-events:auto;
  background:
    radial-gradient(circle at 72% 42%, rgba(62,139,177,.13), transparent 30%),
    linear-gradient(135deg, rgba(6,13,19,.96), rgba(11,24,35,.96));
}

.screen-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(105,165,193,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105,165,193,.14) 1px, transparent 1px);
  background-size:58px 58px;
}

.screen-topbar{
  position:relative;
  z-index:1;
  max-width:1220px;
  margin:0 auto;
  padding:26px 34px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brand-mark{
  width:46px;
  height:46px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#162832;
  border:1px solid rgba(255,255,255,.10);
  color:#72dcff;
  font-weight:900;
  letter-spacing:1px;
}

.diamond-badge{
  display:flex;
  gap:8px;
  align-items:center;
  background:#111f29;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px 15px;
  font-weight:900;
  color:#dce8ef;
}

.menu-layout{
  position:relative;
  z-index:1;
  max-width:1220px;
  min-height:calc(100vh - 80px);
  margin:0 auto;
  padding:42px 34px 60px;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(380px,1.12fr);
  gap:54px;
  align-items:center;
}

.eyebrow{
  color:#67dfff;
  font-size:12px;
  font-weight:900;
  letter-spacing:3px;
  margin-bottom:11px;
}

.menu-copy h1{
  font-size:clamp(62px,8vw,112px);
  line-height:.83;
  letter-spacing:-5px;
  margin-bottom:24px;
}

.menu-copy > p{
  max-width:480px;
  color:#9cb0bb;
  font-size:16px;
  line-height:1.55;
}

.progress-card{
  width:min(470px,100%);
  margin-top:30px;
  min-height:78px;
  padding:15px 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  background:rgba(17,31,41,.78);
  border:1px solid rgba(255,255,255,.09);
  border-radius:13px;
}

.progress-card > div:first-child{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.muted{
  color:#718894;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.5px;
}

#menuProgress{
  font-size:17px;
}

.complete-tag{
  border:1px solid rgba(117,244,192,.28);
  background:rgba(25,76,62,.52);
  color:#75f4c0;
  border-radius:999px;
  padding:8px 10px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.7px;
}

.menu-actions{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  max-width:520px;
}

.primary-btn,
.secondary-btn,
.diamond-btn,
.back-btn,
.vehicle-action{
  cursor:pointer;
  border-radius:11px;
  border:1px solid transparent;
  font-weight:900;
}

.primary-btn{
  min-width:175px;
  padding:14px 22px;
  background:linear-gradient(135deg,#50cdf6,#5ce2b5);
  color:#07141c;
}

.primary-btn:disabled{
  opacity:.38;
  cursor:default;
}

.secondary-btn{
  min-width:175px;
  padding:14px 22px;
  background:#162731;
  color:#dbe7ed;
  border-color:rgba(255,255,255,.10);
}

.diamond-btn{
  min-width:215px;
  padding:14px 22px;
  background:#261f37;
  color:#efe6ff;
  border-color:rgba(177,134,255,.24);
}

.diamond-btn span{
  color:#cdaeff;
  margin-left:6px;
}

.menu-notice{
  min-height:20px;
  margin-top:14px;
  color:#7de6bd;
  font-size:12px;
  font-weight:800;
}

.vehicle-showcase{
  min-height:500px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at center, rgba(64,152,193,.13), transparent 54%),
    rgba(13,28,38,.52);
  border-radius:24px;
  overflow:hidden;
}

.showcase-label{
  color:#748d99;
  font-size:10px;
  font-weight:900;
  letter-spacing:2px;
  margin-top:24px;
}

#menuVehiclePreview{
  width:min(90%,520px);
  height:auto;
}

.showcase-name{
  font-size:25px;
  font-weight:900;
}

.showcase-note{
  color:#76909b;
  font-size:11px;
  margin:6px 0 25px;
}

/* -------------------------------------------------------
   SHOP
------------------------------------------------------- */

.shop-shell{
  position:relative;
  z-index:1;
  max-width:1250px;
  margin:0 auto;
  padding:36px 34px 60px;
}

.shop-header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  margin-bottom:30px;
}

.shop-header > div:nth-child(2){
  text-align:center;
}

.shop-header h2{
  font-size:34px;
}

.back-btn{
  justify-self:start;
  padding:11px 16px;
  color:#c9d6dc;
  background:#14252e;
  border-color:rgba(255,255,255,.09);
}

.shop-diamonds{
  justify-self:end;
}

.vehicle-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.vehicle-card{
  background:rgba(15,31,40,.82);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  overflow:hidden;
  transition:transform .15s ease,border-color .15s ease;
}

.vehicle-card.equipped{
  border-color:rgba(91,225,180,.62);
}

.vehicle-preview-wrap{
  height:185px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at center,rgba(71,154,189,.16),transparent 60%),
    rgba(8,19,26,.52);
}

.vehicle-preview{
  width:100%;
  height:100%;
}

.vehicle-info{
  padding:15px;
}

.vehicle-name-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.vehicle-name-line h3{
  font-size:17px;
}

.vehicle-cost{
  color:#cdb0ff;
  font-size:12px;
  font-weight:900;
}

.vehicle-info p{
  min-height:34px;
  margin-top:7px;
  color:#8097a2;
  font-size:11px;
  line-height:1.45;
}

.vehicle-action{
  width:100%;
  margin-top:13px;
  padding:11px 12px;
  background:#18352f;
  color:#75f4c0;
  border-color:rgba(117,244,192,.15);
}

.vehicle-action.buy{
  background:#261f37;
  color:#dfceff;
  border-color:rgba(189,154,255,.18);
}

.vehicle-action:disabled{
  background:#202d33;
  color:#657780;
  cursor:default;
}

/* -------------------------------------------------------
   MESSAGES
------------------------------------------------------- */

#message{
  position:fixed;
  z-index:50;
  left:50%;
  top:82px;
  transform:translateX(-50%);
  pointer-events:none;
  color:#fff;
  font-weight:900;
  font-size:15px;
  text-shadow:0 2px 8px rgba(0,0,0,.85);
  opacity:0;
  transition:.18s;
}

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

@media (max-width:920px){
  .menu-layout{
    grid-template-columns:1fr;
    padding-top:30px;
  }

  .vehicle-showcase{
    min-height:380px;
  }

  .vehicle-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hud-left{
    width:190px;
  }

  .score-line{
    font-size:25px;
  }

  .power-wrap{
    width:150px;
  }

  .pill{
    min-width:92px;
    font-size:10px;
  }
}

@media (max-width:620px){
  .screen-topbar,
  .menu-layout,
  .shop-shell{
    padding-left:16px;
    padding-right:16px;
  }

  .menu-copy h1{
    letter-spacing:-3px;
  }

  .vehicle-grid{
    grid-template-columns:1fr;
  }

  .shop-header{
    grid-template-columns:1fr auto;
  }

  .shop-header > div:nth-child(2){
    grid-column:1/-1;
    grid-row:2;
  }

  .hud-left{
    top:10px;
    left:10px;
    width:165px;
    padding:10px 12px;
  }

  .title-small{
    font-size:9px;
  }

  .score-line{
    font-size:21px;
  }

  .sub-line{
    font-size:9px;
  }

  .hud-top{
    top:auto;
    bottom:10px;
    gap:5px;
  }

  .pill{
    min-width:auto;
    padding:8px 9px;
  }

  .power-wrap{
    top:10px;
    right:10px;
    width:138px;
  }

  .small-menu-btn{
    right:10px;
    top:80px;
  }
}


/* =======================================================
   V11.1 SIMPLIFIED MAIN MENU
======================================================= */

.menu-diamond-wrap{
  position:absolute;
  z-index:2;
  top:28px;
  right:max(28px,calc((100vw - 1180px)/2));
}

.menu-simple{
  position:relative;
  z-index:1;
  width:min(760px,calc(100% - 40px));
  min-height:100%;
  margin:0 auto;
  padding:110px 0 70px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.menu-title-block h1{
  margin:0;
  color:#f6f8fa;
  font-size:clamp(76px,10vw,138px);
  line-height:.78;
  letter-spacing:-7px;
  font-weight:900;
  text-shadow:0 14px 40px rgba(0,0,0,.25);
}

.progress-panel{
  width:min(650px,100%);
  margin-top:48px;
  padding:20px 22px 18px;
  background:rgba(14,29,39,.72);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  box-shadow:0 18px 55px rgba(0,0,0,.18);
}

.progress-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:15px;
}

.progress-head > span{
  color:#708895;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.8px;
}

.progress-head strong{
  color:#e5edf1;
  font-size:14px;
  letter-spacing:.5px;
}

.run-steps{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:7px;
}

.run-steps span{
  height:14px;
  border-radius:4px;
  background:#1d303b;
  border:1px solid rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease;
}

.run-steps span.done{
  background:linear-gradient(90deg,#4fcdef,#61deb7);
  border-color:rgba(101,237,194,.18);
  box-shadow:0 0 12px rgba(79,205,239,.16);
}

.run-steps span.current{
  background:#69e7bd;
  transform:scaleY(1.18);
  box-shadow:0 0 15px rgba(105,231,189,.25);
}

.progress-foot{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  color:#536c78;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.3px;
}

.progress-foot > span:first-child{
  text-align:left;
}

.progress-foot > span:last-child{
  text-align:right;
}

.progress-panel .complete-tag{
  justify-self:center;
}

.menu-simple .menu-actions{
  margin-top:22px;
  max-width:none;
  justify-content:center;
}

.menu-simple .primary-btn,
.menu-simple .secondary-btn{
  min-width:200px;
}

.menu-simple .menu-notice{
  text-align:center;
  min-height:22px;
}

/* Old preview/menu structures no longer used */
.screen-topbar,
.menu-layout,
.vehicle-showcase,
.showcase-label,
.showcase-name,
.showcase-note{
  display:none !important;
}

@media (max-width:620px){
  .menu-diamond-wrap{
    top:18px;
    right:16px;
  }

  .menu-simple{
    width:calc(100% - 28px);
    padding-top:90px;
    padding-bottom:40px;
  }

  .menu-title-block h1{
    font-size:clamp(62px,22vw,92px);
    letter-spacing:-4px;
  }

  .progress-panel{
    margin-top:34px;
    padding:17px 15px 15px;
  }

  .run-steps{
    gap:4px;
  }

  .run-steps span{
    height:12px;
  }

  .progress-head{
    gap:10px;
  }

  .menu-simple .menu-actions{
    width:100%;
    flex-direction:column;
  }

  .menu-simple .primary-btn,
  .menu-simple .secondary-btn,
  .menu-simple .diamond-btn{
    width:100%;
    min-width:0;
  }
}


/* =======================================================
   SOUND BUTTON
======================================================= */

.sound-btn{
  position:absolute;
  right:82px;
  top:88px;
  width:44px;
  height:36px;
  pointer-events:auto;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(7,14,20,.82);
  color:#d7e5eb;
  border-radius:9px;
  display:grid;
  place-items:center;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  transition:background .14s ease,transform .14s ease;
}

.sound-btn:hover{
  background:#152630;
  transform:translateY(-1px);
}

.sound-btn.muted{
  color:#71858e;
}

@media (max-width:620px){
  .sound-btn{
    right:74px;
    top:80px;
  }
}


/* =======================================================
   FINAL MOBILE LANDSCAPE / JOYSTICK PASS
======================================================= */

.joystick{
  display:none;
  position:absolute;
  right:20px;
  bottom:18px;
  width:132px;
  height:132px;
  pointer-events:auto;
  touch-action:none;
  z-index:8;
}

.joystick-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:rgba(7,14,20,.42);
  border:2px solid rgba(126,216,245,.22);
  box-shadow:
    inset 0 0 0 10px rgba(255,255,255,.018),
    0 10px 28px rgba(0,0,0,.18);
  backdrop-filter:blur(2px);
}

.joystick-ring::after{
  content:"";
  position:absolute;
  inset:22px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
}

.joystick-knob{
  position:absolute;
  left:50%;
  top:50%;
  width:58px;
  height:58px;
  margin-left:-29px;
  margin-top:-29px;
  border-radius:50%;
  background:linear-gradient(145deg,rgba(91,211,244,.92),rgba(73,164,195,.88));
  border:2px solid rgba(255,255,255,.20);
  box-shadow:
    inset 0 2px 8px rgba(255,255,255,.18),
    0 8px 18px rgba(0,0,0,.26);
  transform:translate(0px,0px);
  transition:transform .045s linear;
}

.joystick.active .joystick-ring{
  border-color:rgba(112,231,193,.38);
}

/* Phones and small tablets in landscape need the compact HUD even when
   their CSS width is greater than 620px. */
@media (max-width:780px), ((max-width:980px) and (max-height:600px)){
  .hud-left{
    top:10px;
    left:10px;
    width:170px;
    padding:9px 11px 8px;
  }

  .title-small{
    font-size:9px;
    letter-spacing:1.4px;
    margin-bottom:3px;
  }

  .score-line{
    font-size:22px;
  }

  .sub-line{
    margin-top:5px;
    font-size:9px;
    letter-spacing:.7px;
  }

  .power-wrap{
    top:10px;
    right:10px;
    width:142px;
    padding:8px 10px 9px;
  }

  .power-label{
    font-size:9px;
    margin-bottom:5px;
  }

  .power-shell{
    height:9px;
  }

  .small-menu-btn{
    top:68px;
    right:10px;
    height:36px;
    padding:8px 12px;
  }

  .sound-btn{
    top:68px;
    right:72px;
    width:42px;
    height:36px;
  }

  .hud-top{
    top:auto;
    bottom:10px;
    left:50%;
    transform:translateX(-58%);
    gap:5px;
  }

  .pill{
    min-width:76px;
    padding:7px 8px;
    border-radius:9px;
    font-size:9px;
  }

  .menu-diamond-wrap{
    top:14px;
    right:14px;
  }

  .menu-simple{
    width:min(620px,calc(100% - 32px));
    min-height:100%;
    padding:44px 0 22px;
    justify-content:center;
  }

  .menu-title-block h1{
    font-size:clamp(52px,11vw,78px);
    line-height:.80;
    letter-spacing:-4px;
  }

  .progress-panel{
    margin-top:20px;
    padding:13px 15px 12px;
  }

  .progress-head{
    margin-bottom:9px;
  }

  .run-steps{
    gap:5px;
  }

  .run-steps span{
    height:10px;
  }

  .progress-foot{
    margin-top:7px;
    font-size:8px;
  }

  .menu-simple .menu-actions{
    margin-top:13px;
    gap:8px;
  }

  .menu-simple .primary-btn,
  .menu-simple .secondary-btn,
  .menu-simple .diamond-btn{
    min-width:175px;
    padding:11px 17px;
    font-size:13px;
  }

  .menu-simple .menu-notice{
    margin-top:7px;
    min-height:14px;
  }

  .shop-shell{
    padding:18px 18px 34px;
  }

  .shop-header{
    margin-bottom:16px;
  }

  .shop-header h2{
    font-size:26px;
  }

  .vehicle-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
  }

  .vehicle-preview-wrap{
    height:135px;
  }

  .vehicle-info{
    padding:11px;
  }

  .vehicle-info p{
    min-height:29px;
  }
}

@media (hover:none) and (pointer:coarse){
  .joystick{
    display:block;
  }
}

@media (hover:none) and (pointer:coarse) and (orientation:landscape){
  .hud-top{
    /* leave comfortable space for the bottom-right joystick */
    max-width:calc(100vw - 180px);
  }
}

@media (hover:none) and (pointer:coarse) and (max-height:430px){
  .joystick{
    width:112px;
    height:112px;
    right:14px;
    bottom:12px;
  }

  .joystick-knob{
    width:50px;
    height:50px;
    margin-left:-25px;
    margin-top:-25px;
  }

  .hud-top{
    bottom:8px;
    transform:translateX(-64%);
  }

  .menu-simple{
    padding-top:26px;
    padding-bottom:14px;
  }

  .menu-title-block h1{
    font-size:54px;
  }

  .progress-panel{
    margin-top:14px;
  }

  .menu-simple .menu-actions{
    margin-top:10px;
  }
}