/* Parking Mini v3.1 — Compact Cartoon Frontend */

/* Keep the approved illustrated background stationary */
body::before {
  background-position: center center;
  background-size: cover;
}

/* Give more room to the original background */
main {
  width: min(calc(100% - 28px), 1100px);
  margin: clamp(18px, 4vh, 40px) auto;
}

/* Compact translucent foreground */
.stage {
  width: min(100%, 740px);
  min-height: 0;
  margin-inline: auto;
  border-radius: 26px;
  background: rgba(255, 255, 255, .77);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 14px 45px rgba(19,75,42,.12);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.page {
  padding: 26px 24px 30px;
}

.logo {
  width: clamp(170px, 21vw, 240px);
  max-width: 72%;
  margin: 0 auto 8px;
}

h1 {
  margin: 0;
  font-size: clamp(32px, 4.3vw, 47px);
}

.page p {
  margin: 12px auto;
}

.actions {
  gap: 12px;
  margin: 22px auto 18px;
}

.action {
  min-width: 185px;
  padding: 13px 20px;
}

.note {
  max-width: 520px;
  margin: 12px auto 0;
  padding: 12px 16px;
  background: rgba(238, 255, 244, .88);
}

@media (max-width: 600px) {
  main {
    width: calc(100% - 20px);
    margin: 18px auto;
  }

  .stage {
    min-height: 0;
    border-radius: 22px;
    background: rgba(255,255,255,.84);
  }

  .page {
    padding: 22px 15px 26px;
  }

  .logo {
    width: min(200px, 65vw);
  }

  .actions {
    flex-direction: column;
  }

  .action {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .float-title {
    animation: none;
  }
}