:root {
  --ink: #09274b;
  --blue: #0daef5;
  --yellow: #ffd71a;
  --green: #36d461;
  --white: #fff;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #06121e; }
body { font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; touch-action: none; user-select: none; -webkit-user-select: none; }
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
a { text-decoration: none; }

#stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #071827;
}

.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease;
}
.screen.active { opacity: 1; visibility: visible; pointer-events: auto; }

/* INTRO */
.intro-screen { display: block; background: #000; }
.intro-screen video {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center center;
  border-radius: 0;
}

/* MAIN MENU */
.menu-screen { overflow: hidden; }
.menu-bg {
  position: absolute;
  inset: -4%;
  background: url("assets/garage-v13.jpg") center center / cover no-repeat;
  filter: blur(11px) saturate(1.08) brightness(.86);
  transform: scale(1.08);
}
.menu-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 35%, rgba(255,255,255,.22), transparent 40%),
    linear-gradient(90deg, rgba(4,39,69,.36), rgba(3,30,55,.10) 55%, rgba(3,31,55,.28));
}
.menu-layout {
  position: relative;
  z-index: 2;
  width: min(1180px, 92vw);
  height: calc(100vh - clamp(82px, 14vh, 124px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(250px, .9fr) minmax(360px, 1.1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  padding: 3vh 0 1vh;
}
.menu-logo-wrap { display: grid; place-items: center; }
.main-logo {
  width: min(38vw, 48vh, 430px);
  max-height: 62vh;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.30));
}
.menu-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(10px, 1.5vh, 18px);
  max-width: 540px;
}
.menu-content h1 {
  margin: 0 0 clamp(8px, 1.2vh, 16px);
  color: white;
  font-size: clamp(36px, 5vw, 76px);
  line-height: .95;
  letter-spacing: -.04em;
  text-align: center;
  text-shadow: 0 5px 16px rgba(0,0,0,.42), 0 2px 0 rgba(0,60,115,.45);
}
.menu-button {
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 999px;
  color: white;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.24), inset 0 2px rgba(255,255,255,.34);
  text-shadow: 0 2px 4px rgba(0,0,0,.20);
  transition: transform .16s ease, filter .16s ease;
}
.menu-button:active { transform: scale(.97); }
.menu-button-primary {
  min-height: clamp(58px, 9vh, 92px);
  font-size: clamp(28px, 3.3vw, 52px);
  font-weight: 1000;
  background: linear-gradient(180deg, #2adcf1, #08aee9);
}
.menu-button-secondary {
  align-self: center;
  min-width: 52%;
  min-height: clamp(42px, 6.2vh, 62px);
  padding: 0 30px;
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 900;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(5,87,135,.55));
  backdrop-filter: blur(6px);
}
.social-row {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(1080px, 92vw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 2vw, 28px);
}
.social-button {
  min-height: clamp(46px, 6.5vh, 66px);
  padding: 0 16px;
  display: grid;
  place-items: center;
  border: 4px solid white;
  border-radius: 999px;
  color: white;
  font-size: clamp(15px, 1.55vw, 24px);
  font-weight: 1000;
  box-shadow: 0 7px 18px rgba(0,0,0,.23), inset 0 2px rgba(255,255,255,.24);
  text-shadow: 0 2px 4px rgba(0,0,0,.18);
}
.social-youtube { background: linear-gradient(180deg, #ff6e7e, #ff4e61); }
.social-facebook { background: linear-gradient(180deg, #70c8ff, #4aa8e6); }
.social-web { background: linear-gradient(180deg, #64efbd, #31d993); }

/* ABOUT */
.about-modal {
  position: absolute;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 4vh 5vw;
  background: rgba(3,18,31,.66);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease;
}
.about-modal.show { opacity: 1; visibility: visible; pointer-events: auto; }
.about-panel {
  position: relative;
  width: min(1360px, 94vw);
  max-height: 90vh;
  overflow: auto;
  padding: clamp(24px, 3vw, 48px);
  border-radius: 32px;
  background: rgba(255,255,255,.98);
  border: 5px solid #ffd82a;
  box-shadow: 0 22px 60px rgba(0,0,0,.38);
  color: #33445a;
  font-family: system-ui, sans-serif;
}
.about-panel h2 {
  margin: 0 0 2vh;
  text-align: center;
  color: #36a9f5;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  font-size: clamp(32px, 3.7vw, 58px);
}
.about-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 4vw, 66px);
}
.about-panel h3 { margin: 0 0 8px; color: #19aee9; font-size: clamp(20px, 1.8vw, 30px); }
.about-panel p { margin: 0 0 12px; font-size: clamp(14px, 1.28vw, 20px); line-height: 1.45; }
.about-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 18px 0 12px; }
.about-links a { color: white; background: #2cb9ea; padding: 10px 18px; border-radius: 999px; font-weight: 800; }
.about-ok {
  display: block;
  width: min(340px, 64%);
  min-height: 48px;
  margin: 10px auto 0;
  border: 0;
  border-radius: 999px;
  color: white;
  background: linear-gradient(180deg, #42e7e8, #21cbd8);
  font-size: clamp(18px, 1.7vw, 26px);
  font-weight: 1000;
  cursor: pointer;
}
.about-close {
  position: absolute;
  top: 10px;
  right: 15px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: #1c6b99;
  background: #e7f7ff;
  font-size: 30px;
  cursor: pointer;
}

/* VEHICLE SELECT */
.select-screen { overflow: hidden; }
.select-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.select-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1,27,49,.36), rgba(255,255,255,.05) 24%, rgba(1,23,42,.25));
}
.select-header {
  position: relative;
  z-index: 3;
  height: 15vh;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .7vh 9vw 0;
  color: white;
  text-align: center;
  text-shadow: 0 4px 12px rgba(0,0,0,.72), 0 0 2px #062b48;
}
.select-header h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 64px);
  line-height: .95;
  letter-spacing: -.035em;
}
.select-header p {
  margin: 6px 0 0;
  font-family: system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(14px, 1.6vw, 25px);
  opacity: .98;
}
.vehicle-grid {
  position: relative;
  z-index: 2;
  height: 85vh;
  padding: .1vh max(5px, .65vw) max(5px, .8vh);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: clamp(1px, .25vw, 5px);
}
.vehicle-card {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease;
  padding: 0 2px 1px;
  min-width: 0;
}
.vehicle-card.available::before {
  content: '';
  position: absolute;
  inset: 10% 8% 18%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.48), rgba(255,255,255,.13) 55%, transparent 75%);
  filter: blur(4px);
}
.vehicle-card.available:hover,
.vehicle-card.available:focus-visible { transform: translateY(-2px) scale(1.05); z-index: 5; }
.vehicle-card.available:active { transform: scale(.96); }
.vehicle-card.selected { transform: scale(1.28) !important; z-index: 20; filter: drop-shadow(0 0 14px #ffe22a) drop-shadow(0 15px 24px rgba(0,0,0,.35)); }
.vehicle-card img {
  width: 100%;
  height: 82%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 6px 5px rgba(0,0,0,.42)) drop-shadow(0 0 8px rgba(255,255,255,.65));
}
.vehicle-card .vehicle-name {
  width: 100%;
  text-align: center;
  color: white;
  font-size: clamp(10px, .92vw, 16px);
  font-weight: 1000;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 4px rgba(0,0,0,.95), 0 0 5px rgba(0,34,67,.95);
}
.vehicle-card.locked { cursor: default; opacity: .62; }
.vehicle-card.locked .vehicle-name { opacity: .9; }
.placeholder-vehicle { width: 82%; height: 65%; opacity: .58; filter: drop-shadow(0 5px 4px rgba(0,0,0,.35)); }
.lock-badge {
  position: absolute;
  top: 7px; right: 7px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(8,39,71,.84);
  color: white;
  font-family: system-ui, sans-serif;
  font-size: 12px;
  box-shadow: 0 2px 7px rgba(0,0,0,.25);
}
.round-back-button {
  position: absolute;
  z-index: 7;
  left: max(5px, 1vw);
  top: max(5px, 1.4vh);
  width: clamp(40px, 4vw, 58px);
  height: clamp(40px, 4vw, 58px);
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 50%;
  color: white;
  background: rgba(4,31,55,.58);
  box-shadow: 0 5px 13px rgba(0,0,0,.18);
  font-size: clamp(30px, 3vw, 46px);
  line-height: .7;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

/* GAME */
.game-screen { background: #1d6f9e; }
.garage-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
#gameCanvas, #celebrationCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#gameCanvas { z-index: 2; }
#celebrationCanvas { z-index: 9; pointer-events: none; }

.tool-panel {
  position: absolute;
  z-index: 7;
  right: 1.6vw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, .75vh, 11px);
  padding: clamp(7px, .65vw, 12px);
  border-radius: 30px;
  background: rgba(4, 31, 55, .55);
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 10px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(9px);
}
.tool-button {
  position: relative;
  width: clamp(74px, 8.3vh, 108px);
  height: clamp(74px, 8.3vh, 108px);
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}
.tool-button img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 5px 5px rgba(0,0,0,.2)); }
.tool-button.locked { opacity: .35; filter: grayscale(.7); cursor: default; }
.tool-button.done { opacity: .68; filter: saturate(.7); }
.tool-button.active { transform: scale(1.13); filter: drop-shadow(0 0 9px rgba(255,231,48,.95)); animation: activePulse 1.2s ease-in-out infinite; }
.tool-button.armed { transform: scale(1.11); filter: drop-shadow(0 0 12px rgba(69,226,126,.98)); }
.tool-button.armed::after {
  content: '';
  position: absolute; inset: 4%;
  border-radius: 50%;
  border: 4px solid rgba(84,238,143,.92);
  box-shadow: 0 0 13px rgba(84,238,143,.7);
  pointer-events: none;
}
@keyframes activePulse { 0%,100% { transform: scale(1.06); } 50% { transform: scale(1.16); } }
.done-mark, .lock-mark { position: absolute; display: none; place-items: center; border-radius: 50%; font-family: system-ui, sans-serif; font-weight: 1000; }
.done-mark { right: -2px; bottom: 1px; width: 31px; height: 31px; color: white; background: #20c95b; border: 3px solid white; box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.lock-mark { inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: 38px; height: 38px; background: rgba(4,31,55,.82); font-size: 19px; }
.tool-button.done .done-mark { display: grid; }
.tool-button.locked .lock-mark { display: grid; }

.step-title {
  position: absolute;
  z-index: 6;
  left: 50%; top: 2.2vh;
  transform: translateX(-50%);
  max-width: 70vw;
  padding: 9px 22px 10px;
  border-radius: 999px;
  color: white;
  background: rgba(4,31,55,.67);
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: 0 7px 20px rgba(0,0,0,.2);
  backdrop-filter: blur(7px);
  text-align: center;
  font-size: clamp(17px, 1.5vw, 29px);
  text-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.tip-bubble {
  position: absolute;
  z-index: 6;
  left: 43%; bottom: 6.2vh;
  transform: translateX(-50%) translateY(12px);
  color: var(--ink);
  background: rgba(255,255,255,.94);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: clamp(14px, 1.15vw, 21px);
  font-weight: 1000;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.tip-bubble.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.progress-area {
  position: absolute;
  z-index: 6;
  left: 22vw;
  right: 15vw;
  bottom: 2.2vh;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}
.progress-wrap {
  height: clamp(12px, 1.6vh, 20px);
  border-radius: 999px;
  background: rgba(4,31,55,.4);
  border: 2px solid rgba(255,255,255,.56);
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.2), 0 5px 12px rgba(0,0,0,.13);
}
.progress-bar {
  height: 100%; width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #24c8ff, #22e66f, #ffe229);
  box-shadow: inset 0 2px rgba(255,255,255,.45);
  transition: width .15s linear;
}
.progress-text {
  min-width: 58px;
  padding: 4px 10px;
  border-radius: 999px;
  color: white;
  background: rgba(4,31,55,.66);
  border: 2px solid rgba(255,255,255,.42);
  text-align: center;
  font-size: clamp(14px, 1.25vw, 20px);
  font-weight: 1000;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.success-card {
  position: absolute;
  z-index: 10;
  left: 45%; top: 45%;
  transform: translate(-50%,-50%) scale(.65) rotate(-3deg);
  padding: clamp(18px, 2vw, 30px) clamp(30px, 4vw, 70px);
  border-radius: 32px;
  background: linear-gradient(180deg,#fff,#fff5bd);
  color: #0b4d8c;
  border: 6px solid #ffd51d;
  box-shadow: 0 20px 50px rgba(0,0,0,.34), inset 0 3px 0 rgba(255,255,255,.9);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .36s cubic-bezier(.18,.9,.25,1.4);
}
.success-card.show { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(-2deg); }
.success-card strong { display: block; font-size: clamp(42px, 5.2vw, 88px); line-height: .92; }
.success-card span { display: block; margin-top: 6px; color: #18a84f; font-size: clamp(24px, 2.7vw, 48px); }

.back-button {
  position: absolute;
  z-index: 8;
  left: 1.5vw; top: 2vh;
  width: clamp(42px, 4vw, 62px); height: clamp(42px, 4vw, 62px);
  border: 2px solid rgba(255,255,255,.65);
  border-radius: 50%;
  color: white;
  background: rgba(4,31,55,.58);
  box-shadow: 0 5px 13px rgba(0,0,0,.18);
  font-size: clamp(32px, 3vw, 50px);
  line-height: .7;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.fade-layer { position: absolute; inset: 0; z-index: 100; background: #03090f; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.fade-layer.on { opacity: 1; }

.rotate-notice {
  display: none;
  position: absolute; inset: 0; z-index: 999;
  place-content: center;
  text-align: center;
  gap: 10px;
  padding: 30px;
  background: linear-gradient(160deg,#0b9cea,#173e72);
  color: white;
}
.rotate-icon { font-size: 70px; }
.rotate-notice strong { font-size: 30px; }
.rotate-notice span { font-family: system-ui, sans-serif; font-size: 17px; }

@media (orientation: portrait) and (max-width: 900px) { .rotate-notice { display: grid; } }

@media (max-height: 650px) {
  .menu-layout { height: calc(100vh - 74px); grid-template-columns: .82fr 1.18fr; padding-top: 1.5vh; }
  .main-logo { width: min(29vw, 48vh, 320px); }
  .menu-content h1 { font-size: clamp(30px, 4.5vw, 55px); }
  .menu-button-primary { min-height: 54px; font-size: clamp(24px, 3vw, 38px); }
  .menu-button-secondary { min-height: 40px; font-size: clamp(16px, 1.7vw, 23px); }
  .social-row { bottom: 5px; }
  .social-button { min-height: 42px; border-width: 3px; }

  .select-header { height: 13vh; min-height: 64px; padding-top: .2vh; }
  .select-header h1 { font-size: clamp(26px, 3.4vw, 42px); }
  .select-header p { font-size: clamp(12px, 1.35vw, 18px); margin-top: 3px; }
  .vehicle-grid { height: 87vh; padding: 0 5px 4px; gap: 1px; }
  .vehicle-card img { height: 82%; }
  .vehicle-card .vehicle-name { font-size: clamp(9px, .82vw, 12px); }
  .placeholder-vehicle { width: 84%; height: 68%; }
  .lock-badge { width: 19px; height: 19px; top: 2px; right: 2px; font-size: 9px; }
  .tool-panel { gap: 3px; }
  .tool-button { width: 64px; height: 64px; }
  .progress-area { left: 20vw; right: 14vw; gap: 8px; }
  .progress-text { min-width: 50px; padding: 2px 7px; }

  .about-modal { padding: 2vh 3vw; }
  .about-panel { padding: 20px 28px; max-height: 94vh; }
  .about-panel h2 { margin-bottom: 10px; }
  .about-panel p { margin-bottom: 8px; line-height: 1.32; }
  .about-links { margin: 10px 0 6px; }
}

/* =========================================================
   V1.4 — playful menu, swipe garage, centered wash feedback
   ========================================================= */

/* Hide Android/WebView's transient native video play overlay until playback is live. */
.intro-screen video {
  opacity: 0;
  transition: opacity .12s linear;
  pointer-events: none;
}
.intro-screen video.ready { opacity: 1; }
.intro-screen video::-webkit-media-controls,
.intro-screen video::-webkit-media-controls-panel,
.intro-screen video::-webkit-media-controls-play-button,
.intro-screen video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

/* MAIN MENU — scene first, UI second */
.menu-screen {
  overflow: hidden;
  background: #29bdf5;
}
.menu-bg {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(34,194,255,.10), rgba(0,84,150,.10)),
    url("assets/garage-v13.jpg") center 46% / cover no-repeat;
  filter: saturate(1.24) brightness(1.06);
  transform: none;
}
.menu-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,63,119,.12), transparent 34%, transparent 70%, rgba(0,63,119,.12)),
    linear-gradient(180deg, rgba(117,224,255,.08), rgba(255,255,255,.02) 55%, rgba(0,102,178,.10));
}
.menu-water {
  position: absolute;
  z-index: 1;
  left: -8vw;
  right: -8vw;
  bottom: -10vh;
  height: 31vh;
  opacity: .72;
  background:
    radial-gradient(ellipse at 18% 10%, rgba(255,255,255,.9) 0 5%, transparent 6%),
    radial-gradient(ellipse at 41% 23%, rgba(255,255,255,.8) 0 4%, transparent 5%),
    radial-gradient(ellipse at 68% 13%, rgba(255,255,255,.85) 0 5%, transparent 6%),
    radial-gradient(ellipse at 88% 26%, rgba(255,255,255,.74) 0 4%, transparent 5%),
    linear-gradient(180deg, rgba(108,224,255,.12), rgba(13,165,231,.42));
  border-radius: 50% 50% 0 0 / 16% 16% 0 0;
  filter: blur(.2px);
  pointer-events: none;
}
.menu-bubbles { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.menu-bubbles i {
  position:absolute;
  width: clamp(26px, 4vw, 70px);
  aspect-ratio:1;
  border-radius:50%;
  border: 3px solid rgba(255,255,255,.72);
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.92), rgba(191,238,255,.24) 28%, rgba(78,192,244,.12) 64%, rgba(255,255,255,.25));
  box-shadow: inset 0 0 10px rgba(255,255,255,.55), 0 5px 12px rgba(0,83,132,.12);
  animation: floatBubble 6s ease-in-out infinite alternate;
}
.menu-bubbles i:nth-child(1){left:5%;top:9%;animation-delay:-2s}.menu-bubbles i:nth-child(2){left:30%;top:15%;width:34px}.menu-bubbles i:nth-child(3){right:7%;top:12%;width:48px;animation-delay:-4s}.menu-bubbles i:nth-child(4){right:26%;top:34%;width:29px}.menu-bubbles i:nth-child(5){left:13%;bottom:22%;width:42px;animation-delay:-3s}.menu-bubbles i:nth-child(6){left:52%;bottom:20%;width:27px}.menu-bubbles i:nth-child(7){right:12%;bottom:20%;width:64px;animation-delay:-1s}.menu-bubbles i:nth-child(8){left:39%;top:42%;width:22px;animation-delay:-5s}
@keyframes floatBubble { from{transform:translateY(8px) scale(.96)} to{transform:translateY(-18px) scale(1.04)} }

.menu-hero {
  position: relative;
  z-index: 3;
  height: calc(100vh - clamp(74px, 12vh, 104px));
  width: min(1280px, 96vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(250px,.85fr) minmax(410px,1.15fr);
  align-items: center;
  gap: clamp(18px, 4vw, 72px);
  padding: 2vh 2vw 6vh;
}
.menu-logo-wrap { display:grid; place-items:center; }
.main-logo {
  width: min(35vw, 54vh, 440px);
  max-height: 66vh;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 16px 22px rgba(0,47,87,.28)) drop-shadow(0 0 10px rgba(255,255,255,.45));
}
.menu-action-area { display:flex; flex-direction:column; align-items:center; justify-content:center; gap: clamp(18px,3vh,34px); }
.playful-title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .12em .18em;
  font-size: clamp(40px, 6vw, 88px);
  line-height: .88;
  letter-spacing: -.055em;
  text-align:center;
  transform: rotate(-1deg);
  filter: drop-shadow(0 8px 8px rgba(0,50,95,.26));
}
.playful-title span {
  -webkit-text-stroke: clamp(1px,.18vw,3px) white;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 #0966ae, 0 7px 10px rgba(0,46,91,.30);
}
.word-mazsola { color:#ff503d; }
.word-klub { color:#ffd31c; }
.word-moso {
  flex-basis:100%;
  color:#38d9ff;
  font-size:1.18em;
  text-shadow: 0 5px 0 #0875c5, 0 8px 12px rgba(0,46,91,.3) !important;
}
.garage-cta {
  width: min(520px, 52vw);
  min-height: clamp(74px, 12vh, 112px);
  border: 5px solid rgba(255,255,255,.96);
  border-radius: 34px;
  display:grid;
  grid-template-columns: clamp(62px,7vw,92px) 1fr clamp(52px,6vw,80px);
  align-items:center;
  gap: 6px;
  padding: 4px 15px 4px 9px;
  color:white;
  background: linear-gradient(180deg,#6beb38 0%,#21c943 55%,#0aab35 100%);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.35), 0 9px 0 #087f2c, 0 18px 25px rgba(0,62,68,.26);
  cursor:pointer;
  text-shadow: 0 3px 0 rgba(0,83,42,.55);
  transition: transform .15s ease, filter .15s ease;
}
.garage-cta:active { transform: translateY(5px) scale(.985); box-shadow: inset 0 4px 0 rgba(255,255,255,.3), 0 4px 0 #087f2c, 0 10px 18px rgba(0,62,68,.23); }
.garage-cta-icon { width:100%; aspect-ratio:1; display:grid; place-items:center; filter:drop-shadow(0 3px 2px rgba(0,70,50,.2)); }
.garage-cta-icon svg { width:100%; height:100%; }
.garage-cta-label { font-size:clamp(30px,4vw,58px); font-weight:1000; }
.garage-cta-arrow { font-size:clamp(40px,5vw,70px); line-height:1; }

.menu-footer-buttons {
  position:absolute;
  z-index:4;
  left:50%;
  bottom:max(10px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(1180px, 95vw);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(6px,1.3vw,16px);
}
.footer-action {
  min-width:0;
  min-height:clamp(48px,8vh,70px);
  border:3px solid rgba(255,255,255,.95);
  border-radius:22px;
  padding: 4px clamp(7px,1.3vw,18px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(5px,.8vw,10px);
  color:white;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 6px 14px rgba(0,48,85,.24);
  text-shadow:0 2px 2px rgba(0,0,0,.17);
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  font-size:clamp(12px,1.55vw,22px);
  font-weight:1000;
}
.footer-action span { font-size:1.35em; flex:0 0 auto; }
.footer-action b { overflow:hidden; text-overflow:ellipsis; }
.social-youtube { background:linear-gradient(#ff6a68,#ed2e38); }
.social-facebook { background:linear-gradient(#63b9ff,#2779e8); }
.social-web { background:linear-gradient(#5ee99c,#19bc68); }
.social-about { background:linear-gradient(#ffd84b,#f6a414); border-color:white; }

/* VEHICLE CAROUSEL / DEPOT */
.select-screen { overflow:hidden; background:#68d3ff; }
.select-bg-image { display:none !important; }
.depot-scene { position:absolute; inset:0; overflow:hidden; background:linear-gradient(#3ec7ff 0 48%,#a7e7ff 48% 54%,#73cb5c 54% 70%,#b18b5c 70%); }
.depot-sun { position:absolute; width:clamp(60px,8vw,120px); aspect-ratio:1; border-radius:50%; background:#ffe55a; right:7vw; top:7vh; box-shadow:0 0 0 12px rgba(255,229,90,.18),0 0 35px rgba(255,230,74,.7); }
.depot-cloud { position:absolute; width:140px; height:42px; border-radius:999px; background:rgba(255,255,255,.84); filter:drop-shadow(0 4px 1px rgba(63,158,201,.16)); }
.depot-cloud::before,.depot-cloud::after{content:'';position:absolute;border-radius:50%;background:inherit}.depot-cloud::before{width:62px;height:62px;left:22px;bottom:4px}.depot-cloud::after{width:78px;height:78px;right:16px;bottom:1px}.cloud-a{left:7vw;top:12vh;transform:scale(.8)}.cloud-b{right:24vw;top:19vh;transform:scale(.6)}
.depot-hills { position:absolute; left:-4%; right:-4%; top:40%; height:30%; background:radial-gradient(ellipse at 12% 100%,#58bb52 0 37%,transparent 38%),radial-gradient(ellipse at 43% 110%,#76cf5b 0 43%,transparent 44%),radial-gradient(ellipse at 76% 105%,#4fb54d 0 42%,transparent 43%),radial-gradient(ellipse at 100% 100%,#6bc95c 0 40%,transparent 41%); }
.depot-building { position:absolute; left:50%; top:35%; transform:translateX(-50%); width:min(52vw,760px); height:25vh; min-height:145px; border:8px solid #286b9d; border-bottom:0; border-radius:18px 18px 0 0; background:linear-gradient(180deg,#ffe39b,#f8c665); box-shadow:0 12px 25px rgba(0,65,93,.18); }
.depot-building::before { content:''; position:absolute; left:-3%; right:-3%; top:-20px; height:28px; border-radius:12px 12px 5px 5px; background:linear-gradient(90deg,#25c96b 0 25%,#20a7ea 25% 50%,#ffd84d 50% 75%,#ff7659 75%); border:5px solid #1c6598; }
.depot-building span { position:absolute; bottom:0; width:25%; height:70%; border:5px solid #286b9d; border-bottom:0; background:linear-gradient(90deg,#c8ecff 0 46%,#4c99c3 47% 53%,#c8ecff 54%); }
.depot-building span:nth-child(1){left:7%}.depot-building span:nth-child(2){left:37.5%}.depot-building span:nth-child(3){right:7%}
.depot-trees { position:absolute; left:0; right:0; top:46%; height:19%; background:radial-gradient(circle at 4% 80%,#38a94c 0 4.5%,transparent 4.7%),radial-gradient(circle at 12% 72%,#2fa044 0 5%,transparent 5.2%),radial-gradient(circle at 91% 76%,#3bb14e 0 5.5%,transparent 5.7%),radial-gradient(circle at 98% 80%,#279842 0 5%,transparent 5.2%); }
.depot-rail { position:absolute; left:0; right:0; bottom:28%; height:12%; background:linear-gradient(#7f725f 0 19%,#d8d0bd 20% 33%,#3b4349 34% 42%,#bbb7aa 43% 55%,#3b4349 56% 64%,#d5c9b2 65%); border-top:4px solid rgba(255,255,255,.6); border-bottom:4px solid #675c4c; }
.depot-rail::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 28px,#6f583e 29px 42px,transparent 43px 70px); opacity:.85; }
.depot-road { position:absolute; left:0; right:0; bottom:0; height:29%; background:linear-gradient(#6f7d86,#4f5d66); border-top:6px solid #dce3e6; }
.depot-road::after { content:''; position:absolute; left:0; right:0; top:54%; height:8px; background:repeating-linear-gradient(90deg,#fff 0 58px,transparent 59px 112px); opacity:.82; }
.select-shade { background:linear-gradient(180deg,rgba(0,75,128,.08),rgba(255,255,255,0) 33%,rgba(5,57,82,.07)); }
.select-header { height:18vh; min-height:88px; padding-top:.4vh; text-shadow:none; }
.select-header h1 { font-size:clamp(34px,5vw,72px); color:#ff7b13; -webkit-text-stroke:clamp(1px,.18vw,3px) white; paint-order:stroke fill; text-shadow:0 4px 0 #0f72c7,0 7px 10px rgba(0,72,122,.3); transform:rotate(-1deg); }
.select-header p { color:#075893; background:rgba(255,255,255,.84); border:3px solid white; border-radius:999px; padding:5px 18px; box-shadow:0 5px 14px rgba(0,76,115,.13); font-size:clamp(13px,1.55vw,23px); }
.vehicle-grid { display:none !important; }
.vehicle-carousel { position:absolute; z-index:4; left:0; right:0; top:18vh; bottom:9vh; }
.carousel-viewport { position:absolute; inset:0 7vw; overflow:hidden; touch-action:none; }
.carousel-track { position:absolute; inset:0; }
.carousel-vehicle {
  position:absolute;
  left:50%; top:50%;
  width:min(62vw, 860px);
  height:min(62vh, 570px);
  transform:translate(-50%,-50%);
  border:0;
  padding:0;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .36s cubic-bezier(.2,.75,.23,1), opacity .28s ease, filter .28s ease;
  will-change:transform,opacity;
}
.carousel-vehicle img { width:100%; height:100%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 18px 12px rgba(0,49,71,.34)) drop-shadow(0 0 10px rgba(255,255,255,.75)); }
.carousel-vehicle.current { filter:drop-shadow(0 0 12px rgba(255,255,255,.35)); }
.carousel-vehicle.ready img { animation:vehicleReady .55s ease-in-out 2 alternate; filter:drop-shadow(0 0 16px #ffe847) drop-shadow(0 18px 12px rgba(0,49,71,.34)); }
@keyframes vehicleReady { from{transform:scale(1)} to{transform:scale(1.055)} }
.carousel-vehicle.departing { transition:transform .72s cubic-bezier(.56,.01,.82,.45),opacity .5s ease; opacity:.92 !important; }
.carousel-arrow { position:absolute; z-index:7; top:50%; transform:translateY(-50%); width:clamp(54px,6vw,86px); height:clamp(70px,9vh,104px); border:5px solid white; border-radius:25px; color:white; background:linear-gradient(#56c8ff,#148de8); box-shadow:0 7px 0 #0b67b8,0 12px 20px rgba(0,55,91,.22); font-size:clamp(54px,6vw,82px); line-height:.6; cursor:pointer; }
.carousel-prev{left:1.4vw}.carousel-next{right:1.4vw}.carousel-arrow:active{transform:translateY(-45%) scale(.96)}
.carousel-dots { position:absolute; z-index:5; left:50%; bottom:4.6vh; transform:translateX(-50%); display:flex; gap:8px; }
.carousel-dots i { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.62); border:2px solid rgba(6,72,112,.32); box-shadow:0 2px 4px rgba(0,0,0,.1); }
.carousel-dots i.active { width:16px; background:#ffd72c; border-color:white; }
.carousel-prompt { position:absolute; z-index:6; left:50%; bottom:1.1vh; transform:translateX(-50%); min-width:min(74vw,640px); padding:7px 18px; border-radius:999px; text-align:center; color:white; background:linear-gradient(180deg,#ff9d22,#ff6816); border:4px solid white; box-shadow:0 5px 0 #c94d0d,0 9px 14px rgba(0,62,83,.18); font-size:clamp(13px,1.55vw,22px); font-weight:1000; text-shadow:0 2px 1px rgba(126,47,0,.35); }
.carousel-prompt span { margin-right:7px; }
.round-back-button { background:linear-gradient(#ffd84b,#f6a414); color:#135987; border:4px solid white; box-shadow:0 5px 0 #c78100,0 8px 15px rgba(0,60,90,.2); }

/* GAME FEEDBACK */
.step-title { color:white; background:linear-gradient(180deg,rgba(15,166,239,.93),rgba(5,105,194,.93)); border:4px solid white; box-shadow:0 6px 0 rgba(4,75,143,.86),0 10px 18px rgba(0,0,0,.16); font-weight:1000; text-shadow:0 2px 0 rgba(0,56,121,.45); }
.tip-bubble { left:50%; bottom:6.2vh; transform:translateX(-50%) translateY(12px); min-width:min(62vw,620px); text-align:center; color:white; background:linear-gradient(180deg,#ff9e22,#ff6518); border:4px solid white; box-shadow:0 6px 0 #c94b0b,0 10px 18px rgba(0,0,0,.18); text-shadow:0 2px 0 rgba(130,48,0,.36); }
.tip-bubble.show { transform:translateX(-50%) translateY(0); }
.progress-area { left:18vw; right:16vw; bottom:2vh; }
.progress-text { color:#083a69; background:#fffbe0; border:3px solid #ffd329; text-shadow:none; box-shadow:0 4px 0 #d89f00; }
.success-card { left:50%; top:50%; background:linear-gradient(180deg,#ffffff,#fff8bb); border:7px solid #ffd51d; }
.success-card strong { color:#ff5a2c; -webkit-text-stroke:2px white; paint-order:stroke fill; text-shadow:0 4px 0 #176fc4,0 7px 8px rgba(0,0,0,.18); }
.success-card span { color:#21bb53; font-weight:1000; text-shadow:0 2px 0 white; }

/* Make About fit above the four bottom actions when opened on smaller landscape phones. */
.about-panel { max-height:88vh; }

@media (max-height: 620px) {
  .menu-hero { height:calc(100vh - 66px); padding-top:.8vh; padding-bottom:4vh; }
  .main-logo { width:min(30vw,46vh,300px); max-height:52vh; }
  .playful-title { font-size:clamp(30px,5vw,58px); }
  .garage-cta { min-height:62px; width:min(450px,50vw); }
  .garage-cta-label { font-size:clamp(25px,3.5vw,40px); }
  .menu-footer-buttons { bottom:max(10px,env(safe-area-inset-bottom)); }
  .footer-action { min-height:46px; font-size:clamp(11px,1.35vw,17px); }
  .select-header { height:20vh; }
  .select-header h1 { font-size:clamp(29px,4.3vw,50px); }
  .select-header p { margin-top:3px; padding:3px 14px; }
  .vehicle-carousel { top:20vh; bottom:10vh; }
  .carousel-vehicle { height:min(62vh,430px); width:min(58vw,720px); }
  .carousel-prompt { bottom:1vh; padding:4px 14px; }
  .carousel-dots { bottom:5.5vh; }
  .tip-bubble { bottom:7.4vh; }
}
.carousel-vehicle.rail-vehicle img { transform: translateY(-10vh); }
@media (max-height:620px) { .carousel-vehicle.rail-vehicle img { transform: translateY(-8vh); } }

/* =========================================================
   V1.5 — supplied menu/garage artwork + cleaner selection/wash UI
   ========================================================= */

/* Main menu uses the supplied final artwork. */
.menu-bg {
  background: url("assets/fomenu.jpg") center center / cover no-repeat !important;
  filter: none !important;
}
.menu-bg::after {
  background: linear-gradient(90deg, rgba(0,54,104,.10), transparent 30%, transparent 74%, rgba(0,54,104,.08)) !important;
}
.menu-water,
.menu-bubbles { display: none !important; }

/* Vehicle selector uses the supplied city/rail/road background. */
.depot-scene {
  inset: 0 !important;
  background: url("assets/garazs.jpg") center center / cover no-repeat !important;
}
.depot-scene > * { display: none !important; }
.select-shade { background: linear-gradient(180deg, rgba(3,63,105,.04), transparent 28%, rgba(1,41,66,.04)) !important; }

/* No instructional title/subtitle or bottom prompt in the selector. */
.select-header,
.carousel-prompt { display: none !important; }

/* True edge-to-edge carousel. Vehicles enter from the actual screen edge. */
.vehicle-carousel {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}
.carousel-viewport {
  inset: 0 !important;
  overflow: hidden !important;
}
.carousel-vehicle {
  top: 59% !important;
  width: min(68vw, 940px) !important;
  height: min(68vh, 610px) !important;
}
.carousel-vehicle.departing {
  transition: transform .84s cubic-bezier(.58,.02,.86,.42) !important;
  opacity: 1 !important;
}
.carousel-vehicle.rail-vehicle img { transform: none !important; }
.carousel-dots { bottom: 2.2vh !important; }

/* Selector back button is exactly the same grey button style as the wash screen. */
.select-back-button {
  left: 1.5vw !important;
  top: 2vh !important;
  background: rgba(4,31,55,.58) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.65) !important;
  box-shadow: 0 5px 13px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(6px) !important;
}

/* Wash screen: the four circular tools + progress are enough. */
.step-title,
.tip-bubble { display: none !important; }

/* With the vehicle truly centered, keep progress visually balanced too. */
.progress-area {
  left: 18vw !important;
  right: 18vw !important;
}

@media (max-height: 620px) {
  .vehicle-carousel { top: 0 !important; bottom: 0 !important; }
  .carousel-vehicle { top: 59% !important; width: min(66vw, 820px) !important; height: min(68vh, 500px) !important; }
  .carousel-dots { bottom: 2vh !important; }
}


/* =========================================================
   V1.6 — launcher alignment, animated bubbles, grounded carousel
   ========================================================= */

/* Klub uses the same red as Mazsola. */
.word-klub { color:#ff503d !important; }

/* Keep the supplied menu artwork, but bring back the floating soap bubbles. */
.menu-water { display:none !important; }
.menu-bubbles { display:block !important; }
.menu-bubbles i { animation: floatBubbleV16 5.6s ease-in-out infinite alternate !important; }
.menu-bubbles i:nth-child(2), .menu-bubbles i:nth-child(6) { animation-duration:6.8s !important; }
.menu-bubbles i:nth-child(3), .menu-bubbles i:nth-child(7) { animation-duration:7.4s !important; }
@keyframes floatBubbleV16 {
  0%   { transform:translate3d(0,14px,0) scale(.92); opacity:.58; }
  48%  { opacity:.95; }
  100% { transform:translate3d(8px,-30px,0) scale(1.08); opacity:.72; }
}

/* Vehicle chooser: use the full background without cover-cropping so the road/rail
   baseline is stable across landscape phones. */
.depot-scene { background-size:100% 100% !important; }

/* Ground the visible vehicle instead of centering its transparent source canvas.
   Road vehicles sit on the road at the rail line; rail vehicles use the same visual baseline. */
.carousel-vehicle {
  top:auto !important;
  bottom:23.8vh !important;
  width:min(66vw, 920px) !important;
  height:min(59vh, 540px) !important;
  align-items:end !important;
  transform-origin:50% 100% !important;
}
.carousel-vehicle img {
  object-position:center bottom !important;
  max-height:100% !important;
}

/* First tap: unmistakable continuous yellow pulse until the second tap. */
.carousel-vehicle.ready { animation: vehicleSelectGlowV16 .72s ease-in-out infinite alternate !important; }
.carousel-vehicle.ready img {
  animation: none !important;
  filter:drop-shadow(0 0 9px #fff7a8) drop-shadow(0 0 24px #ffd817) drop-shadow(0 18px 12px rgba(0,49,71,.34)) !important;
}
@keyframes vehicleSelectGlowV16 {
  from { filter:drop-shadow(0 0 5px rgba(255,221,32,.55)); }
  to   { filter:drop-shadow(0 0 25px rgba(255,215,0,1)); }
}

@media (max-height:620px) {
  .carousel-vehicle {
    top:auto !important;
    bottom:23.8vh !important;
    width:min(64vw,820px) !important;
    height:min(57vh,470px) !important;
  }
}

/* =========================================================
   V2.0 — all 30 vehicles + normalized rail-line carousel
   ========================================================= */

/* Every selector vehicle occupies the same full-width carousel lane. The
   visible PNG itself is independently sized, so cars, trucks, trains and
   machines keep believable relative proportions without clipping. */
.carousel-vehicle {
  left: 50% !important;
  top: auto !important;
  bottom: 26.2vh !important; /* aligns tyre/track contact with the rail line */
  width: 100vw !important;
  height: 58vh !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  transform-origin: 50% 100% !important;
  overflow: visible !important;
  filter: none !important;
}
.carousel-vehicle img {
  width: auto !important;
  height: auto !important;
  max-width: min(var(--vehicle-vw, 56vw), 1180px) !important;
  max-height: min(var(--vehicle-maxh, 48vh), 540px) !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: drop-shadow(0 6px 5px rgba(0,38,62,.20)) !important;
}

/* No glow merely for being the currently visible vehicle. */
.carousel-vehicle.current,
.carousel-vehicle.current img {
  filter: none !important;
}
.carousel-vehicle.current img {
  filter: drop-shadow(0 6px 5px rgba(0,38,62,.20)) !important;
}

/* First tap is the only state that receives the yellow pulse/glow. */
.carousel-vehicle.ready {
  animation: vehicleSelectGlowV20 .72s ease-in-out infinite alternate !important;
}
.carousel-vehicle.ready img {
  filter: drop-shadow(0 0 8px #fff6a0) drop-shadow(0 0 24px #ffd51b) drop-shadow(0 6px 5px rgba(0,38,62,.22)) !important;
}
@keyframes vehicleSelectGlowV20 {
  from { filter: drop-shadow(0 0 2px rgba(255,215,0,.25)); }
  to   { filter: drop-shadow(0 0 20px rgba(255,215,0,.95)); }
}

/* 30 page indicators must stay inside even on small landscape phones. */
.carousel-dots {
  max-width: 76vw !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
}
.carousel-dots i { width: 6px !important; height: 6px !important; border-width: 1px !important; }
.carousel-dots i.active { width: 11px !important; }

@media (max-height:620px) {
  .carousel-vehicle {
    bottom: 26.2vh !important;
    width: 100vw !important;
    height: 56vh !important;
  }
  .carousel-vehicle img {
    max-height: min(var(--vehicle-maxh, 46vh), 430px) !important;
  }
}


/* =========================================================
   V2.1 — normalized 1600x900 selector assets + pixel hit target
   ========================================================= */

/* Each supplied vehicle PNG is now exactly 1600x900, manually scaled by the
   artist and placed on the same Y=800 wheel/track baseline. Display the whole
   source canvas at one shared size: 84vh makes that baseline land at ~74.7vh,
   matching the rail line in garazs.jpg. */
.carousel-vehicle {
  left: 50% !important;
  top: 0 !important;
  bottom: auto !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: visible !important;
  display: block !important;
  filter: none !important;
  transform-origin: 50% 50% !important;
}
.carousel-vehicle img {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  width: auto !important;
  height: 84vh !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: translateX(-50%) !important;
  filter: none !important;
  pointer-events: none !important;
}

/* No default highlight at all; yellow pulse only appears after an actual
   vehicle hit on the first tap. */
.carousel-vehicle.current,
.carousel-vehicle.current img { filter: none !important; }
.carousel-vehicle.ready {
  animation: vehicleSelectGlowV21 .68s ease-in-out infinite alternate !important;
}
.carousel-vehicle.ready img {
  filter: drop-shadow(0 0 9px rgba(255,247,160,.95))
          drop-shadow(0 0 24px rgba(255,213,27,.98)) !important;
}
@keyframes vehicleSelectGlowV21 {
  from { filter: drop-shadow(0 0 2px rgba(255,215,0,.28)); }
  to   { filter: drop-shadow(0 0 22px rgba(255,215,0,1)); }
}

/* Arrows must always sit above the full-screen swipe/click lane. */
.carousel-arrow {
  z-index: 90 !important;
  width: clamp(78px, 8.2vw, 126px) !important;
  height: clamp(96px, 15vh, 150px) !important;
  border-width: 6px !important;
  border-radius: 30px !important;
  font-size: clamp(70px, 8vw, 112px) !important;
}
.carousel-prev { left: 1.2vw !important; }
.carousel-next { right: 1.2vw !important; }

.select-back-button { z-index: 100 !important; }

@media (max-height: 620px) {
  .carousel-vehicle img {
    height: 84vh !important;
    max-height: none !important;
  }
  .carousel-arrow {
    width: clamp(72px, 8vw, 106px) !important;
    height: clamp(88px, 15vh, 126px) !important;
    font-size: clamp(64px, 7.6vw, 96px) !important;
  }
}

/* =========================================================
   V2.2 — rail centering, moving clouds, bigger nav controls
   ========================================================= */

/* 20% larger Mazsola Klub logo on the main menu. */
.main-logo {
  width: min(42vw, 64.8vh, 528px) !important;
  max-height: 78vh !important;
}

/* The legacy rail rule in v1.5 had higher specificity and removed the
   translateX(-50%) centering. Restore the same centering as every other
   normalized 1600x900 vehicle. */
.carousel-vehicle.rail-vehicle img {
  left: 50% !important;
  transform: translateX(-50%) !important;
  object-position: center center !important;
}

/* Real cloud artwork drifting continuously behind the vehicle carousel. */
.selector-cloud-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.selector-cloud {
  position: absolute;
  left: -34vw;
  width: clamp(170px, 24vw, 430px);
  height: auto;
  opacity: .92;
  will-change: transform;
  filter: drop-shadow(0 4px 2px rgba(52,139,185,.08));
  animation: selectorCloudDrift linear infinite;
}
.selector-cloud-1 { top: 5vh;  width: clamp(190px, 25vw, 430px); animation-duration: 31s; animation-delay: -8s; }
.selector-cloud-2 { top: 17vh; width: clamp(125px, 18vw, 300px); animation-duration: 39s; animation-delay: -25s; opacity: .76; }
.selector-cloud-3 { top: 2vh;  width: clamp(110px, 15vw, 250px); animation-duration: 46s; animation-delay: -34s; opacity: .66; }
.selector-cloud-4 { top: 27vh; width: clamp(95px, 13vw, 220px);  animation-duration: 35s; animation-delay: -17s; opacity: .58; }
@keyframes selectorCloudDrift {
  from { transform: translate3d(-10vw,0,0); }
  to   { transform: translate3d(150vw,0,0); }
}

/* Bigger side arrows; glyphs are true flex-centered inside the rounded
   rectangular button instead of relying on font baseline/line-height. */
.carousel-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 0 .06em 0 !important;
  line-height: 1 !important;
  width: clamp(90px, 9vw, 138px) !important;
  height: clamp(106px, 17vh, 164px) !important;
  font-size: clamp(74px, 8.5vw, 120px) !important;
}
.carousel-arrow:active {
  transform: translateY(calc(-50% + 6px)) scale(.97) !important;
}

/* Unified 3D back buttons in selector + wash screen. */
.back-button,
.select-back-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 0 .08em 0 !important;
  line-height: 1 !important;
  width: clamp(54px, 5.2vw, 78px) !important;
  height: clamp(54px, 5.2vw, 78px) !important;
  border: 3px solid rgba(255,255,255,.88) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(72,108,137,.94) 0%, rgba(28,60,89,.96) 58%, rgba(16,43,69,.98) 100%) !important;
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.24),
    inset 0 -3px 0 rgba(0,0,0,.16),
    0 7px 0 rgba(7,30,51,.78),
    0 11px 18px rgba(0,0,0,.20) !important;
  font-size: clamp(39px, 4.2vw, 62px) !important;
  transition: transform .08s ease, box-shadow .08s ease, filter .08s ease !important;
}
.back-button:active,
.select-back-button:active {
  transform: translateY(5px) !important;
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,.19),
    inset 0 2px 0 rgba(255,255,255,.13),
    0 2px 0 rgba(7,30,51,.84),
    0 5px 9px rgba(0,0,0,.16) !important;
  filter: brightness(.96) !important;
}

@media (max-height: 620px) {
  .main-logo {
    width: min(36vw, 58vh, 390px) !important;
    max-height: 72vh !important;
  }
  .carousel-arrow {
    width: clamp(82px, 8.7vw, 116px) !important;
    height: clamp(94px, 16vh, 138px) !important;
    font-size: clamp(68px, 8vw, 102px) !important;
  }
}


/* =========================================================
   V2.3 — timer challenge, plane ambience, pink foam
   ========================================================= */

/* Main menu logo and title another 10% larger than v2.2 */
.main-logo {
  width: min(46.2vw, 71vh, 580px) !important;
  max-height: 84vh !important;
}
.playful-title {
  font-size: clamp(44px, 6.6vw, 97px) !important;
}

/* Best-time badge on selector screen */
.best-time-board {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 3px solid #fff;
  box-shadow: 0 5px 14px rgba(0,76,115,.13);
  color: #075893;
  font-weight: 1000;
}
.best-time-label {
  font-size: clamp(13px, 1.45vw, 22px);
}
#bestTimeValue {
  font-size: clamp(15px, 1.75vw, 26px);
  color: #ff5a2c;
}

/* Small looping plane in the far sky */
.selector-plane {
  position: absolute;
  top: 10.5vh;
  left: -20vw;
  width: clamp(90px, 10vw, 185px);
  height: auto;
  opacity: .95;
  transform: scaleX(-1);
  transform-origin: center center;
  filter: drop-shadow(0 2px 2px rgba(60,132,175,.12));
  animation: selectorPlaneFly 24s linear infinite;
  will-change: transform;
}
@keyframes selectorPlaneFly {
  from { transform: translate3d(-6vw, 0, 0) scaleX(-1); }
  48%  { transform: translate3d(78vw, -1.3vh, 0) scaleX(-1); }
  52%  { transform: translate3d(86vw, -1.0vh, 0) scaleX(-1); }
  to   { transform: translate3d(136vw, .5vh, 0) scaleX(-1); }
}

/* Blue selector glow instead of yellow */
.carousel-vehicle.ready {
  animation: vehicleSelectGlowV23 .68s ease-in-out infinite alternate !important;
}
.carousel-vehicle.ready img {
  filter: drop-shadow(0 0 8px rgba(185,244,255,.98))
          drop-shadow(0 0 24px rgba(37,178,255,.98)) !important;
}
@keyframes vehicleSelectGlowV23 {
  from { filter: drop-shadow(0 0 2px rgba(37,178,255,.28)); }
  to   { filter: drop-shadow(0 0 22px rgba(37,178,255,1)); }
}

/* Timer display top-center during wash */
.timer-display {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: max(8px, env(safe-area-inset-top));
  transform: translateX(-50%);
  min-width: min(40vw, 340px);
  padding: 10px 20px 11px;
  border-radius: 999px;
  border: 4px solid #fff;
  background: linear-gradient(180deg, rgba(21,88,145,.92), rgba(10,52,90,.96));
  box-shadow: inset 0 4px 0 rgba(255,255,255,.18), 0 7px 0 rgba(5,29,50,.78), 0 12px 18px rgba(0,0,0,.18);
  color: #fff;
  text-align: center;
  font-size: clamp(22px, 2.4vw, 38px);
  font-weight: 1000;
  letter-spacing: .04em;
  text-shadow: 0 2px 3px rgba(0,0,0,.25);
}

@media (max-height: 620px) {
  .main-logo {
    width: min(39.6vw, 63.8vh, 430px) !important;
    max-height: 78vh !important;
  }
  .playful-title {
    font-size: clamp(34px, 5.4vw, 72px) !important;
  }
  .best-time-board {
    margin-top: 5px;
    padding: 5px 14px;
  }
  .selector-plane {
    width: clamp(72px, 8vw, 140px);
    top: 11vh;
  }
  .timer-display {
    padding: 8px 16px 9px;
    font-size: clamp(18px, 2.2vw, 30px);
  }
}


/* =========================================================
   V2.4 — pink selector glow, reliable best time, narrower timer, balloon ambience
   ========================================================= */

/* Clearly visible pink highlight after the first tap. */
.carousel-vehicle.ready {
  animation: vehicleSelectGlowV24 .68s ease-in-out infinite alternate !important;
}
.carousel-vehicle.ready img {
  filter: drop-shadow(0 0 10px rgba(255,214,244,.98))
          drop-shadow(0 0 22px rgba(255,101,204,.98))
          drop-shadow(0 0 42px rgba(255,62,176,.82)) !important;
}
@keyframes vehicleSelectGlowV24 {
  from { filter: drop-shadow(0 0 3px rgba(255,83,188,.34)); }
  to   { filter: drop-shadow(0 0 26px rgba(255,74,194,1)); }
}

/* The saved fastest time must be easy to notice next to the label. */
.best-time-board {
  position: relative;
  z-index: 12;
  margin-top: 10px;
  gap: 12px;
  padding: 8px 18px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 6px 18px rgba(0,76,115,.18);
}
.best-time-label {
  color: #0b639e;
  font-size: clamp(13px, 1.42vw, 21px);
}
#bestTimeValue {
  display: inline-block;
  min-width: 6.1ch;
  color: #ff3d9a;
  text-shadow: none;
  font-size: clamp(18px, 1.95vw, 29px);
  line-height: 1;
}

/* Narrower stopwatch pill centered at the top of the wash scene. */
.timer-display {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  padding: 8px 16px 9px !important;
  font-size: clamp(20px, 2.2vw, 34px) !important;
  letter-spacing: .03em !important;
  font-variant-numeric: tabular-nums;
}

/* Small looping hot-air balloon in the distant sky. */
.selector-balloon {
  position: absolute;
  top: 7.5vh;
  right: -18vw;
  width: clamp(34px, 4.6vw, 84px);
  height: auto;
  opacity: .96;
  filter: drop-shadow(0 2px 3px rgba(73,118,158,.16));
  animation: selectorBalloonFloat 52s linear infinite;
  will-change: transform;
}
@keyframes selectorBalloonFloat {
  from { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-32vw, -1.2vh, 0); }
  50% { transform: translate3d(-64vw, .4vh, 0); }
  75% { transform: translate3d(-98vw, -1.1vh, 0); }
  to   { transform: translate3d(-132vw, .2vh, 0); }
}

@media (max-height: 620px) {
  .best-time-board { padding: 6px 14px; gap: 10px; }
  #bestTimeValue { font-size: clamp(16px, 1.75vw, 24px); }
  .timer-display { padding: 7px 14px 8px !important; font-size: clamp(17px, 2vw, 28px) !important; }
  .selector-balloon { width: clamp(28px, 4vw, 64px); top: 8.5vh; }
}


/* =========================================================
   V2.5 — white selected outline, fixed best-time display, version badge
   ========================================================= */

/* Small version indicator in the top-left corner of the main menu. */
.version-badge {
  position: absolute;
  z-index: 30;
  left: max(10px, env(safe-area-inset-left));
  top: max(8px, env(safe-area-inset-top));
  padding: 4px 9px;
  border-radius: 999px;
  color: rgba(255,255,255,.94);
  background: rgba(3,35,59,.42);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  font-family: system-ui, sans-serif;
  font-size: clamp(10px, .85vw, 14px);
  font-weight: 800;
  letter-spacing: .02em;
  pointer-events: none;
}

/* Keep the selector header, including the saved best time, above the
   full-screen carousel layer. This fixes the result being hidden behind it. */
.select-header {
  z-index: 120 !important;
  pointer-events: none !important;
}
.select-back-button { z-index: 140 !important; }
.best-time-board {
  z-index: 125 !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  margin-top: 7px !important;
  padding: 7px 16px !important;
  border: 3px solid rgba(255,255,255,.98) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 5px 15px rgba(0,62,102,.18) !important;
}
#bestTimeValue {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ff3d9a !important;
  min-width: 6.2ch !important;
}

/* Selected vehicle: thick crisp white outline, no pink/blue glow. */
.carousel-vehicle.ready {
  animation: none !important;
  filter: none !important;
}
.carousel-vehicle.ready img {
  filter:
    drop-shadow(5px 0 0 #fff)
    drop-shadow(-5px 0 0 #fff)
    drop-shadow(0 5px 0 #fff)
    drop-shadow(0 -5px 0 #fff)
    drop-shadow(4px 4px 0 #fff)
    drop-shadow(-4px 4px 0 #fff)
    drop-shadow(4px -4px 0 #fff)
    drop-shadow(-4px -4px 0 #fff) !important;
}

@media (max-height: 620px) {
  .version-badge { padding: 3px 7px; font-size: 10px; }
  .best-time-board { margin-top: 4px !important; padding: 5px 12px !important; }
  .carousel-vehicle.ready img {
    filter:
      drop-shadow(4px 0 0 #fff)
      drop-shadow(-4px 0 0 #fff)
      drop-shadow(0 4px 0 #fff)
      drop-shadow(0 -4px 0 #fff)
      drop-shadow(3px 3px 0 #fff)
      drop-shadow(-3px 3px 0 #fff)
      drop-shadow(3px -3px 0 #fff)
      drop-shadow(-3px -3px 0 #fff) !important;
  }
}