/* ============================================
 * MENU SCENE
 * Re-extracted from old_style.css
 * Contains all menu-related styles
 * ============================================ */

#ojol-menu-root {
  position: relative;
  inset: 0;
  display: none; /* ditoggle dari MenuScene */
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 95;
  background: #020617;
  transition: background 0.4s ease;
}

#ojol-menu-root * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --ojol-green-light: #bafec3;
  --ojol-green: #63eb9d;
  --ojol-green-deep: #09de76;
  --ojol-dark: #00963e;

  --ojol-yellow: #ffc947;
  --ojol-orange: #ff9f1c;

  --text-main: #03352a;
  --text-light: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.78);

  --cbz-bouncy: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

body.mode-day {}
body.mode-night {}

.menu-scene {
  width: 100%;
  height: calc(100vh - 50px);
  padding: 40px 16px 40px!important;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background: radial-gradient(circle at top, #9edaff 0%, #5cc8ff 35%, #2b6dbc 100%);
  background-size: 100% 250%;
  background-position: 0% 5%;
  transition:
    background-position 0.9s var(--cbz-bouncy),
    background 0.9s var(--cbz-bouncy);
}

body.mode-night .menu-scene {
  background: linear-gradient(180deg, #020617 0%, #020617 60%, #052e16 100%);
  background-size: 100% 200%;
  background-position: 0% 0%;
}

body.mode-day.transition-sunset .menu-scene {
  background: linear-gradient(
    180deg,
    #020617 0%,
    #4b1d4f 15%,
    #fb923c 45%,
    #1f2937 75%,
    #020617 100%
  );
  background-position: 0% 40%;
}

body.mode-night.transition-sunrise .menu-scene {
  background: linear-gradient(
    180deg,
    #020617 0%,
    #0f172a 15%,
    #fb923c 45%,
    #38bdf8 65%,
    #1e293b 82%,
    #020617 100%
  );
  background-position: 0% 20%;
}

.night-stars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background-image:
    radial-gradient(2px 2px at 15% 25%, rgba(255,255,255,0.85) 0, transparent 60%),
    radial-gradient(2px 2px at 70% 10%, rgba(255,255,255,0.75) 0, transparent 60%),
    radial-gradient(2px 2px at 35% 40%, rgba(255,255,255,0.85) 0, transparent 60%),
    radial-gradient(2px 2px at 85% 35%, rgba(255,255,255,0.7) 0, transparent 60%);
}
body.mode-night .night-stars { opacity: 1; }
body.mode-day.transition-sunset .night-stars { opacity: 1; }
body.mode-night.transition-sunrise .night-stars { opacity: 0; }

.sky-orb {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sky-orb-sun,
.sky-orb-moon {
  position: absolute;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  transition:
    transform 0.6s var(--cbz-bouncy),
    opacity 0.6s ease,
    box-shadow 0.6s ease;
}

.sky-orb-sun {
  background:
    radial-gradient(circle at 45% 35%, #ffffff 0, #fffbe6 25%, #ffd659 45%, #ffb020 100%);
  box-shadow:
    0 0 25px rgba(255, 214, 89, 0.9),
    0 0 50px rgba(255, 214, 89, 0.9);
  animation: sunIdle 5s ease-in-out infinite;
}

@keyframes sunIdle {
  0%, 100% {
    box-shadow:
      0 0 22px rgba(255, 214, 89, 0.9),
      0 0 42px rgba(255, 214, 89, 0.8);
    transform: translateY(0) scale(1);
  }
  50% {
    box-shadow:
      0 0 30px rgba(255, 240, 170, 1),
      0 0 60px rgba(255, 223, 130, 1);
    transform: translateY(-2px) scale(1.05);
  }
}

.sky-orb-moon {
  background:
    radial-gradient(circle at 26% 71%, #ffffff 8%, #fff0 12%),
    radial-gradient(circle at 23% 75%, #d1d5db 0% 1%, #fff0 10%),
    radial-gradient(circle at 14% 42%, #fdfdfd 7%, #fff0 11%),
    radial-gradient(circle at 12% 45%, #9ca3af 0%, #fff0 7%),
    radial-gradient(circle at 23% 57%, #f9f9f9 2%, #fff0 6%),
    radial-gradient(circle at 22% 58%, #9ca3af -2%, #fff0 4%),
    radial-gradient(circle at 83% 25%, #fff0 16px, #e5edff 16px);
  box-shadow:
    0 0 18px rgba(148, 163, 184, 0.9),
    0 0 36px rgba(148, 163, 184, 0.7);
  animation: moonIdle 6s ease-in-out infinite;
}

@keyframes moonIdle {
  0%, 100% {
    box-shadow:
      0 0 14px rgba(148, 163, 184, 0.9),
      0 0 30px rgba(148, 163, 184, 0.6);
    transform: translateY(0) scale(1);
  }
  50% {
    box-shadow:
      0 0 22px rgba(226, 232, 240, 1),
      0 0 40px rgba(148, 163, 184, 1);
    transform: translateY(-2px) scale(1.03);
  }
}

body.mode-day .sky-orb-sun {
  opacity: 1;
  transform: translateY(0) scale(1);
}
body.mode-day .sky-orb-moon {
  opacity: 0;
  transform: translateY(-30px) scale(0.7);
}

body.mode-night .sky-orb-sun {
  opacity: 0;
  transform: translateY(30px) scale(0.7);
  box-shadow: none;
}
body.mode-night .sky-orb-moon {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes sunSetPath {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
    box-shadow:
      0 0 26px rgba(255, 214, 89, 0.9),
      0 0 52px rgba(255, 214, 89, 0.9);
  }
  40%, 55% {
    transform: translateY(90px) scale(0.9);
    opacity: 0.9;
    box-shadow:
      0 0 40px rgba(248, 113, 113, 1),
      0 0 80px rgba(248, 113, 113, 0.9);
  }
  100% {
    transform: translateY(-40px) scale(0.6);
    opacity: 0;
    box-shadow: none;
  }
}

@keyframes moonRiseFromTop {
  0% {
    transform: translateY(-40px) scale(0.6);
    opacity: 0;
  }
  55% {
    transform: translateY(-40px) scale(0.6);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes moonSetPath {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  40%, 55% {
    transform: translateY(90px) scale(0.9);
    opacity: 0.2;
  }
  100% {
    transform: translateY(-40px) scale(0.6);
    opacity: 0;
  }
}

@keyframes sunRiseFromBottom {
  0% {
    transform: translateY(90px) scale(0.6);
    opacity: 0;
  }
  55% {
    transform: translateY(90px) scale(0.6);
    opacity: 0.4;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

body.mode-day.transition-sunset .sky-orb-sun {
  animation: sunSetPath 1.6s var(--cbz-bouncy) forwards;
}
body.mode-day.transition-sunset .sky-orb-moon {
  animation: moonRiseFromTop 1.6s var(--cbz-bouncy) forwards;
}

body.mode-night.transition-sunrise .sky-orb-moon {
  animation: moonSetPath 1.6s var(--cbz-bouncy) forwards;
}
body.mode-night.transition-sunrise .sky-orb-sun {
  animation: sunRiseFromBottom 1.6s var(--cbz-bouncy) forwards;
}

.menu-header {
  position: relative;
  z-index: 2;
  color: var(--text-light);
}

.mode-label {
  font-size: 11px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px!important  ;
}

.mode-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: 12px!important;
}

.mode-toggle-pill {
  display: flex;
  min-width: 220px;
  border-radius: 999px;
  padding: 3px!imporant;
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(6px);
  box-shadow:
      0 3px 8px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

body.mode-night .mode-toggle-pill {
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 2px 10px 3px rgb(217 217 217 / 21%), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgb(255 255 255 / 15%);
}

.toggle-option {
  flex: 1;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-light);
  font-size: 13px;
  padding: 6px 0!important;
  cursor: pointer;
  text-transform: lowercase;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

.toggle-option.is-active {
  background: radial-gradient(circle at 20% 0, #ffefba 0, var(--ojol-yellow) 45%, var(--ojol-orange) 100%);
  color: #3a2300;
  box-shadow:
    0 3px 0 rgba(149, 88, 0, 0.95),
    0 6px 10px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.game-title {
  font-size: 44px;
  text-align: center;
  margin-bottom: 4px!important;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: #e5f9ff;
  text-shadow:
    0 0 18px rgba(0, 0, 0, 0.6),
    0 0 22px rgba(0, 255, 157, 0.8);
  transition: text-shadow 0.6s ease;
}

body.mode-night .game-title {
  text-shadow:
    0 0 18px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(111, 255, 190, 0.95);
}

.game-subtitle {
  font-size: 13px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 20px!important;
}

.city-wrapper {
  position: relative;
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 6px!important;
}

.cloud-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  opacity: 0.9;
  transition: opacity 0.6s ease;
}

.cloud {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
}
.cloud.cloud-long { width: 70px; }
.cloud.cloud-mid  { width: 50px; }
.cloud.cloud-short{ width: 30px; }

body.mode-night .cloud {
  background: rgba(255, 255, 255, 0.14);
}
body.mode-day.transition-sunset .cloud-row { opacity: 0.5; }
body.mode-night.transition-sunrise .cloud-row { opacity: 0.85; }

.city-skyline {
  position: absolute;
  bottom: 150px;
  left: 0;
  right: 0;
  height: 315px;
  display: flex;
  padding: 0 6px;
  align-items: flex-end;
  gap: 4px;
}

.building {
  flex: 1;
  border-radius: 6px 6px 0 0;
  background: rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
  transition: background 0.8s var(--cbz-bouncy);
}

.building.front {
  background: rgba(0, 0, 0, 0.22);
  flex: 1.2;
}

.building::before {
  content: "";
  position: absolute;
  top: 12%;
  left: 50%;
  width: 70%;
  height: 78%;
  transform: translateX(-50%);
  background-repeat: repeat;
  background-size: 22px 26px;
  opacity: 0;
  transition:
    opacity 0.8s var(--cbz-bouncy),
    background-image 0.8s ease,
    filter 0.8s ease;
  pointer-events: none;
}

.building.front::before {
  width: 72%;
  background-size: 18px 24px;
}

body.mode-day .building::before {
  background-image:
    radial-gradient(circle at 40% 30%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.0) 55%),
    linear-gradient(#a7d4ff, #72b6ff);
  opacity: 0.28;
  filter: blur(0.6px);
}

body.mode-night .building::before {
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,243,184,1) 0%, rgba(255,243,184,0) 65%),
    radial-gradient(circle at 50% 50%, rgba(255,255,210,1) 0%, rgba(255,255,210,0) 70%);
  opacity: var(--win-opacity, 0.9);
  filter: blur(0.8px) drop-shadow(0 0 8px rgba(251,191,36,0.7));
  transition-delay: var(--win-delay, 0s);
}

.building::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 22%;
  height: 18%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(
    180deg,
    rgba(148, 163, 184, 0.8),
    rgba(15, 23, 42, 0.95)
  );
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.2),
    0 -4px 6px rgba(0, 0, 0, 0.5);
  transition:
    background 0.7s ease,
    box-shadow 0.7s ease;
}

body.mode-night .building {
  background: rgba(15, 23, 42, 0.88);
}
body.mode-night .building.front {
  background: rgba(15, 23, 42, 1);
}

body.mode-night .building::after {
  background: radial-gradient(
    circle at 50% 0%,
    rgba(254, 243, 199, 1) 0,
    rgba(251, 191, 36, 0.95) 40%,
    rgba(15, 23, 42, 1) 90%
  );
  box-shadow:
    0 -2px 10px rgba(251, 191, 36, 0.9),
    0 -8px 22px rgba(251, 191, 36, 0.6);
}

body.mode-day.transition-sunset .building {
  background: rgba(30, 41, 59, 0.7);
}
body.mode-day.transition-sunset .building.front {
  background: rgba(15, 23, 42, 0.95);
}
body.mode-day.transition-sunset .building::before {
  opacity: 0.6;
}

body.mode-night.transition-sunrise .building {
  background: rgba(30, 64, 175, 0.25);
}
body.mode-night.transition-sunrise .building.front {
  background: rgba(30, 64, 175, 0.35);
}
body.mode-night.transition-sunrise .building::before {
  opacity: 0.4;
  filter: blur(0.5px);
}

.rider-wrap {
  position: relative;
  z-index: 2;
  margin-top: 30px!important;
  margin-bottom: 24px!important;
  display: flex;
  justify-content: center;
}

.rider-circle {
  width: 370px;
  height: 470px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rider-circle img {
  width: 250px;
  height: auto;
  display: block;
  position: absolute;
  bottom: 0px;
  z-index: 6;
  transform-origin: 50% 80%;
  animation: ojolRideBob 1.8s ease-in-out infinite;
}

@keyframes ojolRideBob {
  0% {
    transform: translate3d(-4px, 2px, 0) rotate(-1deg);
  }
  25% {
    transform: translate3d(2px, -3px, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(4px, 1px, 0) rotate(1.2deg);
  }
  75% {
    transform: translate3d(1px, -2px, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(-4px, 2px, 0) rotate(-1deg);
  }
}


body.mode-night .headlight { opacity: 1; }

.cta-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 10px!important;
  z-index: 10;
  position: relative;
}

.cta-button {
  border: none;
  border-radius: 999px;
  padding: 11px 40px!important;
  font-size: 15px;
  font-weight: 800;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  background: radial-gradient(circle at 20% 0, #ffefba 0, var(--ojol-yellow) 45%, var(--ojol-orange) 100%);
  color: #3a2300;
  box-shadow:
    0 4px 0 rgba(149, 88, 0, 0.95),
    0 9px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.info-text,
.best-score {
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  z-index: 10;
  position: relative;
}

.info-text { margin-bottom: 3px!important; }
.best-score { margin-bottom: 8px!important; }

.road-wrap {
  margin-top: 0px!important;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0px;
}

.road {
  height: 265px;
  border-radius: 0;
  background: #202637;
  position: relative;
  overflow: hidden;
  transition: background 0.9s var(--cbz-bouncy);
  overflow: hidden;
}

body.mode-night .road {
  background: #020617;
}

body.mode-day.transition-sunset .road {
  background: #111827;
}

body.mode-night.transition-sunrise .road {
  background: #111827;
}

.road-dash-row {
  position: absolute;
  top: 50%;
  left: -60px;
  right: -60px;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  gap: 24px;
  /* posisi awal: di tengah vertikal */
  transform: translate3d(0, -50%, 0);

  /* ini yang bikin efek jalan bergerak */
  animation: roadMove 0.2s linear infinite;
}

.road-dash {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: #ffc947;
}

@keyframes roadMove {
  from {
    transform: translate3d(0, -50%, 0);
  }
  to {
    /* geser ke kiri sebesar ±1 dash+gap (42 + 24 = 66) */
    transform: translate3d(-66px, -50%, 0);
  }
}


.footer-text {
  margin-top: 4px!important;
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  z-index: 10;
  position: relative;
}


@media (max-width: 720px) {
  .menu-scene { 
    min-height: 600px; 
  }
  .rider-circle {
    width: 300px;
    min-height: 300px;
    height: 310px;
  }
  .rider-wrap {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .city-wrapper {
    margin-top: 0px !important;
  }
  .rider-circle img { 
    width: 200px; 
    bottom: 5px;
  }
  .menu-header {
    margin-top: 0px !important;
  }
  .game-title {
    font-size: 36px;
  }
  .city-skyline {
    bottom: 95px;
    height: 210px;
  }
  .road {
    height: 350px;
  }
  .road-wrap {
    bottom: 0px;
  }
  .game-subtitle {
    margin-bottom: 0px !important;
  }
}
@media (max-width: 435px) {
    .road {
        height: 275px;
    }
}

@media (max-width: 375px) {
    .road {
        height: 215px;
    }
}

@media screen and (min-width: 355px) and (max-width: 360px) {
    .road {
        height: 255px;
    }
}

@media screen and (min-width: 388px) and (max-width: 395px) {
    .road {
        height: 300px;
    }
}

@media screen and (min-width: 405px) and (max-width: 413px) {
    .road {
        height: 340px;
    }
}

@media screen and (min-width: 413px) and (max-width: 415.98px) {
    .road {
        height: 325px;
    }
}

@media screen and (min-width: 430px) and (max-width: 432px) {
    .road {
        height: 270px;
    }
}

@media screen and (min-width: 425px) and (max-width: 430px) {
    .road {
        height: 345px;
    }
}




.leaderboard-list-users.lb-loading .list-lb-wrap-usr {
  pointer-events: none;
}

.skeleton-row {
  opacity: 0.8;
}

.skeleton-box,
.skeleton-avatar,
.skeleton-text,
.skeleton-circle {
  background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 40%, #e5e7eb 80%);
  background-size: 200% 100%;
  animation: lb-skeleton 1.2s infinite;
  border-radius: 999px;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
}

.skeleton-text {
  display: inline-block;
  height: 10px;
  border-radius: 999px;
}

.skeleton-circle {
  width: 14px;
  height: 14px;
  border-radius: 999px;
}

@keyframes lb-skeleton {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}