:root {
  --ink: #2b1b3d;
  --tray-h: 132px;
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #8fe3ff;
  font-family: var(--font);
  color: var(--ink);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

.app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; }

/* ---------- top bar ---------- */
.hud {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
}

.progress { flex: 1; max-width: 560px; position: relative; display: flex; align-items: center; margin-left: auto; margin-right: 30px; }
.progress-track {
  flex: 1;
  height: 44px;
  border: 5px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 0 rgba(43, 27, 61, 0.35);
}
.progress-fill {
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(-45deg, #5ee06b 0 18px, #8cf08f 18px 36px);
  border-right: 5px solid var(--ink);
  transition: width 0.3s ease-out;
}
.progress-star { position: absolute; right: -34px; width: 72px; height: 72px; opacity: 0.55; transition: transform 0.4s, opacity 0.4s; }
.progress.done .progress-star { opacity: 1; transform: scale(1.3) rotate(144deg); }
.progress-pct { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 800; font-size: 20px; }
.progress-pct[hidden] { display: none; }

/* ---------- car ---------- */
.wash-area {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 3vh;
  cursor: crosshair;
}
.car-stage {
  position: relative;
  transform-origin: 50% 100%;
}
.car-stage::before { /* ground shadow, outside the dirt mask */
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: 2%;
  height: 7%;
  border-radius: 50%;
  background: rgba(43, 27, 61, 0.25);
}
.car-img { position: relative; display: block; width: 100%; height: auto; pointer-events: none; }
.car-shine {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.85) 50%, transparent 60%) no-repeat;
  background-size: 300% 100%;
  /* wash.js sets mask-image to the car's own SVG. */
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.car-stage.shining .car-shine { animation: sweep 1.1s ease-out; }
@keyframes sweep {
  0% { opacity: 1; background-position: 100% 0; }
  90% { opacity: 1; }
  100% { opacity: 0; background-position: 0 0; }
}

/* ---------- tools ---------- */
.tray {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 28px;
  height: var(--tray-h);
  padding: 12px 20px max(12px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.6);
  border-top: 5px solid var(--ink);
}
.tool-btn {
  position: relative;
  width: var(--tray-btn, 100px);
  height: var(--tray-btn, 100px);
  padding: 10px;
  border: 5px solid var(--ink);
  border-radius: 50%;
  background: var(--tool-color);
  box-shadow: 0 7px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.15s;
}
.tool-btn svg { width: 100%; height: 100%; display: block; }
.tool-btn.selected { transform: translateY(-10px) scale(1.12); box-shadow: 0 7px 0 var(--ink), 0 0 0 8px #fff, 0 0 26px 12px rgba(255, 255, 255, 0.9); }
.tool-btn.hint { animation: hint-pulse 1.2s ease-in-out infinite; }
@keyframes hint-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
/* Selected and hinted: pulse without dropping the selected lift. */
.tool-btn.selected.hint { animation-name: hint-pulse-selected; }
@keyframes hint-pulse-selected { 0%, 100% { transform: translateY(-10px) scale(1.12); } 50% { transform: translateY(-10px) scale(1.2); } }
/* Ordered stages: only the current stage's tool is usable; the rest are greyed and small. */
.tool-btn.locked { filter: grayscale(1); opacity: 0.45; transform: scale(0.85); box-shadow: 0 4px 0 var(--ink); cursor: default; }
.tool-btn.locked .tool-label { opacity: 0.6; }
/* Finished stage: a white tick badge on the greyed button. */
.tool-btn.locked.done::after {
  content: '\2713';
  position: absolute;
  top: -6px; right: -6px;
  width: 30px; height: 30px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font: 900 18px/22px sans-serif;
  text-align: center;
}
/* The next tool unlocks: pop up to the selected lift (beats .selected.hint until animationend). */
.tool-btn.unlock-pop, .tool-btn.selected.hint.unlock-pop { animation: unlock-pop 0.6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes unlock-pop {
  0% { transform: scale(0.85); }
  60% { transform: translateY(-10px) scale(1.35); }
  100% { transform: translateY(-10px) scale(1.12); }
}
/* A tap on a locked tool: a short "no" wobble at the locked size. */
.tool-btn.shake { animation: shake 0.35s; }
@keyframes shake {
  0%, 100% { transform: translateX(0) scale(0.85); }
  25%, 75% { transform: translateX(-6px) scale(0.85); }
  50% { transform: translateX(6px) scale(0.85); }
}
.tool-label {
  position: absolute;
  left: 50%; bottom: -8px;
  transform: translateX(-50%);
  padding: 0 8px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.float-tool {
  position: fixed;
  top: 0; left: 0;
  z-index: 5;
  pointer-events: none;
  display: none;
  filter: drop-shadow(0 6px 4px rgba(43, 27, 61, 0.35));
}
.float-tool.visible { display: block; }
.float-tool svg { width: 100%; height: 100%; animation: wiggle 0.25s ease-in-out infinite alternate; }
@keyframes wiggle { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

.fx { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 4; pointer-events: none; }

/* ---------- celebration ---------- */
.celebrate {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vh;
  background: radial-gradient(circle, rgba(255,255,255,0.25), rgba(43,27,61,0.15));
}
.celebrate.show { display: flex; }
.confetti { position: absolute; top: 45%; left: 50%; width: 0; height: 0; }
.piece { position: absolute; width: 18px; height: 12px; margin: -6px 0 0 -9px; border-radius: 3px; border: 2px solid var(--ink); }
.piece.star {
  width: 30px; height: 30px; margin: -15px 0 0 -15px; border: none;
  -webkit-clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.celebrate-title {
  position: relative;
  margin: 0;
  font-size: min(12vw, 110px);
  font-weight: 900;
  color: #ffe14d;
  -webkit-text-stroke: 4px var(--ink);
  text-shadow: 0 8px 0 var(--ink), 0 0 40px #fff;
  animation: pop 0.6s cubic-bezier(.3,1.6,.5,1) both;
}
@keyframes pop { from { transform: scale(0.2) rotate(-8deg); } to { transform: scale(1) rotate(-3deg); } }

@media (max-width: 700px), (max-height: 520px) {
  :root { --tray-h: 112px; }
  .tool-btn { width: calc(var(--tray-btn, 100px) * 0.84); height: calc(var(--tray-btn, 100px) * 0.84); }
  .tray { gap: 16px; }
}

/* ---------- Layers ---------- */
.layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Screens (root) ---------- */
.screen {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  opacity: 1; transition: opacity 250ms ease-in-out;
}
.screen.is-leaving, .screen.is-entering { opacity: 0; pointer-events: none; }
.screen button { font: inherit; color: inherit; touch-action: none; }
.screen-title {
  position: relative; z-index: 1;
  margin: 0 0 1vh;
  font-size: min(7vw, 52px); font-weight: 900;
  color: #fff;
  text-shadow: -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink), 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 7px 0 var(--ink);
}

/* ---------- Round buttons ---------- */
.round-btn {
  width: 88px; height: 88px; padding: 12px;
  display: flex; align-items: center; justify-content: center;
  border: 5px solid var(--ink); border-radius: 50%;
  background: var(--btn-color, #fff);
  box-shadow: 0 7px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.round-btn svg { width: 100%; height: 100%; display: block; }
.round-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }
.back-btn {
  position: absolute; z-index: 5;
  top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left));
  width: 76px; height: 76px;
}

/* ---------- Splash (same giar.dev splash as puzzle-web) ---------- */
.splash {
  background: linear-gradient(135deg, #80CCFF, #B3E6FF 50%, #CCF2FF);
  justify-content: space-between;
  padding-top: calc(env(safe-area-inset-top, 0px) + 24px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  cursor: pointer;
}
.splash__content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.splash__logo {
  display: block; line-height: 0;
  opacity: 0; transform: scale(0.5);
  transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms, opacity 800ms ease 200ms;
}
.splash__name {
  font-size: 42px; font-weight: 700; color: rgb(51, 77, 153);
  opacity: 0; transition: opacity 600ms ease-in 700ms;
}
.splash__credits {
  font-size: 11px; text-align: center; color: rgba(51, 77, 128, 0.55);
  padding: 0 24px; max-width: 600px; opacity: 0; transition: opacity 600ms ease-in 700ms;
}
.splash.is-animated .splash__logo { opacity: 1; transform: scale(1); }
.splash.is-animated .splash__name, .splash.is-animated .splash__credits { opacity: 1; }

/* ---------- Garage ---------- */
.garage {
  background: linear-gradient(#5cc8f5, #b8ecff 62%);
  justify-content: space-evenly;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.garage__sky { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.garage__sun { transform-origin: 860px 110px; animation: sun-spin 24s linear infinite; }
@keyframes sun-spin { to { transform: rotate(360deg); } }
.garage__cloud { animation: cloud-drift 9s ease-in-out infinite alternate; }
.garage__cloud--slow { animation-duration: 13s; }
@keyframes cloud-drift { to { transform: translateX(60px); } }
.garage__ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  border-top: 6px solid var(--ink);
  background: linear-gradient(#ddd8e8 0 22px, #c9c3d6 22px);
}
.garage__cards {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: var(--gap, 16px);
  width: 100%; padding: 0 var(--gap, 16px) 12px;
}
.car-card {
  position: relative;
  flex: 1 1 var(--card-min, 220px);
  min-width: var(--card-min, 220px); max-width: 320px;
  padding: 14px 14px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 5px solid var(--ink); border-radius: 28px;
  background: #fff;
  box-shadow: 0 8px 0 var(--ink), inset 0 -14px 0 var(--car-color);
  cursor: pointer;
  transition-property: transform, opacity;
  transition-timing-function: ease-in;
}
.car-card:active { transform: translateY(4px); }
.car-card__stage { position: relative; width: 100%; aspect-ratio: 2 / 1; }
.car-card__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.car-card__name { font-size: 22px; font-weight: 900; padding-bottom: 12px; }
.car-card.is-chosen { z-index: 3; }
.garage.has-choice .car-card:not(.is-chosen) { opacity: 0.4; transition-duration: 300ms; }
.garage__levels { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 28px; }
.level-btn { width: 84px; height: 84px; padding: 8px; transition: transform 0.2s cubic-bezier(.3,1.6,.5,1); }
.level-btn.is-selected { transform: scale(1.3); background: #ffe14d; box-shadow: 0 7px 0 var(--ink), 0 0 0 6px #fff; }
.level-btn.is-selected:active { transform: scale(1.25) translateY(4px); }

@media (orientation: portrait) {
  .car-card { flex-basis: calc(50% - var(--gap, 16px)); }
}
@media (orientation: portrait) and (max-width: 600px) {
  .car-card { min-width: 0; } /* two per row on a phone */
  .garage__sun { display: none; } /* it would sit behind the title */
  /* Phones only: when the cards do not fit, this box scrolls instead of hiding cars
     (top padding leaves room for the chosen card's scale-up inside the clip). */
  .garage__cards { padding-top: 12px; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
}
@media (orientation: landscape) and (max-width: 900px) {
  .car-card { min-width: 0; flex-basis: calc(25% - var(--gap, 16px)); } /* four in a row on a phone */
  .garage__cards { padding-top: 12px; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
}
@media (max-height: 560px) {
  .car-card__name { font-size: 17px; padding-bottom: 8px; }
  .level-btn { width: 64px; height: 64px; }
  .screen-title { font-size: 30px; }
}

/* ---------- Tunnel picker ---------- */
.tunnels {
  background: linear-gradient(#5cc8f5, #b8ecff 70%, #c9c3d6 70%);
  justify-content: space-evenly;
  padding-top: max(16px, env(safe-area-inset-top));
}
.tunnels__doors { display: flex; justify-content: center; gap: max(24px, 5vw); width: 100%; padding: 0 16px; }
.doorway {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0; border: 0; background: none; cursor: pointer;
  transition: transform 0.15s;
}
.doorway:active { transform: scale(0.96); }
.doorway__svg { display: block; width: min(34vw, 42vh, 340px); height: auto; filter: drop-shadow(0 8px 0 rgba(43, 27, 61, 0.35)); }
.doorway__name {
  padding: 6px 22px;
  border: 5px solid var(--ink); border-radius: 999px;
  background: #fff;
  font-size: min(5vw, 28px); font-weight: 900;
  box-shadow: 0 6px 0 rgba(43, 27, 61, 0.35);
}
.doorway__roll { animation: door-roll 0.6s linear infinite; }
@keyframes door-roll { from { transform: translateY(0); } to { transform: translateY(30px); } }
.doorway__bubble { animation: door-bubble 2.4s ease-in infinite; }
.doorway__bubble--late { animation-delay: 1.2s; }
@keyframes door-bubble { from { transform: translateY(60px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-30px); opacity: 0; } }
.doorway__vine { animation: door-vine 2.2s ease-in-out infinite alternate; transform: rotate(-6deg); }
.doorway__vine--late { animation-delay: -1.1s; }
@keyframes door-vine { to { transform: rotate(6deg); } }
.doorway__bulb { animation: blink 1s steps(1) infinite; }
.doorway__bulb--alt { animation-delay: 0.5s; }
.tunnels__car { width: min(40vw, 380px); }
.tunnels__car-img { display: block; width: 100%; height: auto; animation: car-idle 0.5s ease-in-out infinite alternate; }
@keyframes car-idle { to { transform: translateY(-3px); } }

/* ---------- Wash ---------- */
.screen.wash { padding: 0; align-items: stretch; justify-content: flex-start; }
.wash .hud { min-height: 92px; padding-left: calc(env(safe-area-inset-left) + 110px); }
.wash .progress { margin-left: auto; }
.wash-debug {
  position: absolute; top: 100%; right: max(20px, env(safe-area-inset-right));
  padding: 2px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  font: 700 14px/1.4 ui-monospace, Menlo, monospace;
}
.wash .wash-area { touch-action: none; }
.wash .car-stage {
  width: min(calc(var(--car-vw) * 1vw), calc(var(--car-max-vh) * 2vh));
  aspect-ratio: 2 / 1; /* sized before the car image decodes, so the layers never start at 0x0 */
}
@media (orientation: portrait) {
  .wash .car-stage { width: min(calc(var(--car-vw-portrait) * 1vw), calc(var(--car-max-vh) * 2vh)); }
}
/* Short screens (phones in landscape): the car must leave room for the top bar and the tray. */
.wash .car-stage { max-width: calc((100vh - var(--tray-h) - 100px) * 2); }
.wash .car-img { -webkit-user-drag: none; }
.wash .car-shine { z-index: 1; }
.wash .tray { flex: none; }

/* ---------- Celebration ---------- */
.wash .celebrate { pointer-events: none; }
.celebrate-msg { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; flex-direction: column; align-items: center; padding-top: max(13vh, env(safe-area-inset-top)); }
.celebrate.message .celebrate-msg { display: flex; }
.wash .celebrate-title { font-size: min(9vw, 88px); }
/* Buttons sit either side of the car so the bouncing car stays in view. */
.celebrate-actions {
  position: absolute; left: 0; right: 0; bottom: calc(var(--tray-h) + 10vh);
  display: flex; justify-content: space-between;
  padding: 0 max(3vw, env(safe-area-inset-right)) 0 max(3vw, env(safe-area-inset-left));
  pointer-events: none;
}
.celebrate-action {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: auto; animation: pop 0.6s 0.3s cubic-bezier(.3,1.6,.5,1) both;
}
.celebrate-action .round-btn { width: 112px; height: 112px; padding: 16px; }
.celebrate-caption {
  padding: 0 12px; border-radius: 999px;
  background: #fff; border: 3px solid var(--ink);
  font-size: 18px; font-weight: 900;
}