*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

/* Purple-to-white gradient that fades as you go down */
.page {
  min-height: 100vh;
  background: linear-gradient(
    to bottom,
    #4a1a8a 0%,
    #6b2fb5 20%,
    #8b50c8 45%,
    #b085e0 70%,
    #d4b8f0 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

/* Faded star field — bright white dots that glow against the purple */
.page::before,
.page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Larger glowing stars */
.page::before {
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    /* Top third */
     5vw   4vh 6px 2px rgba(255, 255, 255, 0.85),
    14vw   9vh 5px 1px rgba(255, 255, 255, 0.8),
    26vw   3vh 6px 2px rgba(255, 255, 255, 0.85),
    38vw  11vh 5px 1px rgba(255, 255, 255, 0.75),
    51vw   5vh 6px 2px rgba(255, 255, 255, 0.8),
    64vw  13vh 5px 1px rgba(255, 255, 255, 0.75),
    76vw   6vh 6px 2px rgba(255, 255, 255, 0.8),
    89vw   2vh 5px 1px rgba(255, 255, 255, 0.85),
    /* Middle third */
     8vw  38vh 6px 2px rgba(255, 255, 255, 0.75),
    22vw  45vh 5px 1px rgba(255, 255, 255, 0.7),
    35vw  32vh 6px 2px rgba(255, 255, 255, 0.75),
    49vw  50vh 5px 1px rgba(255, 255, 255, 0.65),
    62vw  36vh 6px 2px rgba(255, 255, 255, 0.7),
    75vw  48vh 5px 1px rgba(255, 255, 255, 0.65),
    91vw  40vh 6px 2px rgba(255, 255, 255, 0.7),
    /* Bottom third */
     4vw  62vh 5px 1px rgba(255, 255, 255, 0.6),
    18vw  75vh 6px 2px rgba(255, 255, 255, 0.55),
    33vw  68vh 5px 1px rgba(255, 255, 255, 0.6),
    47vw  82vh 6px 2px rgba(255, 255, 255, 0.5),
    61vw  70vh 5px 1px rgba(255, 255, 255, 0.55),
    74vw  88vh 6px 2px rgba(255, 255, 255, 0.5),
    87vw  65vh 5px 1px rgba(255, 255, 255, 0.55),
    96vw  78vh 6px 2px rgba(255, 255, 255, 0.5);
}

/* Smaller fill-in stars */
.page::after {
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    /* Top third */
    10vw   7vh 3px 1px rgba(255, 255, 255, 0.75),
    20vw  14vh 2px 0px rgba(255, 255, 255, 0.7),
    31vw   8vh 3px 1px rgba(255, 255, 255, 0.75),
    43vw  16vh 2px 0px rgba(255, 255, 255, 0.65),
    57vw  10vh 3px 1px rgba(255, 255, 255, 0.7),
    69vw  18vh 2px 0px rgba(255, 255, 255, 0.65),
    82vw  12vh 3px 1px rgba(255, 255, 255, 0.7),
    94vw  20vh 2px 0px rgba(255, 255, 255, 0.65),
    /* Middle third */
     2vw  28vh 3px 1px rgba(255, 255, 255, 0.65),
    16vw  42vh 2px 0px rgba(255, 255, 255, 0.6),
    29vw  55vh 3px 1px rgba(255, 255, 255, 0.6),
    42vw  35vh 2px 0px rgba(255, 255, 255, 0.65),
    55vw  58vh 3px 1px rgba(255, 255, 255, 0.55),
    68vw  43vh 2px 0px rgba(255, 255, 255, 0.6),
    80vw  52vh 3px 1px rgba(255, 255, 255, 0.55),
    93vw  30vh 2px 0px rgba(255, 255, 255, 0.6),
    /* Bottom third */
     7vw  72vh 3px 1px rgba(255, 255, 255, 0.55),
    21vw  85vh 2px 0px rgba(255, 255, 255, 0.5),
    36vw  78vh 3px 1px rgba(255, 255, 255, 0.55),
    50vw  92vh 2px 0px rgba(255, 255, 255, 0.45),
    65vw  80vh 3px 1px rgba(255, 255, 255, 0.5),
    78vw  95vh 2px 0px rgba(255, 255, 255, 0.45),
    90vw  85vh 3px 1px rgba(255, 255, 255, 0.5),
    98vw  68vh 2px 0px rgba(255, 255, 255, 0.5);
}

/* Centered rounded card */
.card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 28px;
  box-shadow:
    0 8px 32px rgba(124, 58, 237, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.7);
  width: 100%;
  max-width: 400px;
  padding: 48px 40px 40px;
}

.card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 36px;
}

.logo {
  margin-bottom: 16px;
}

.app-name {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

.tagline {
  font-size: 0.95rem;
  color: #6b7280;
  font-weight: 400;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Apple Sign In button wrapper */
.apple-button-container {
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  overflow: hidden;
}

.legal {
  font-size: 0.75rem;
  color: #9ca3af;
  text-align: center;
  line-height: 1.5;
}

.legal a {
  color: #7c3aed;
  text-decoration: none;
}

.legal a:hover {
  text-decoration: underline;
}

/* Dashboard */
.section-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #6b7280;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.activity-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.activity-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 22px;
  background: rgba(124, 58, 237, 0.06);
  border: 1.5px solid rgba(124, 58, 237, 0.18);
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  text-align: left;
}

.activity-btn:hover {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.4);
  transform: translateY(-1px);
}

.activity-btn:active {
  transform: translateY(0);
}

.activity-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.activity-text {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a2e;
}

/* Location page */
.card--wide {
  max-width: 520px;
}

.resort-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resort-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #7c3aed;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.park-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.park-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 18px;
  background: rgba(124, 58, 237, 0.05);
  border: 1.5px solid rgba(124, 58, 237, 0.15);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.park-btn:hover {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.4);
  transform: translateY(-1px);
}

.park-btn:active {
  transform: translateY(0);
}

.park-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.park-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a2e;
}

.back-btn {
  margin-top: 6px;
  background: none;
  border: none;
  color: #7c3aed;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
  text-align: left;
}

.back-btn:hover {
  text-decoration: underline;
}

.loading-state,
.error-state {
  text-align: center;
  color: #6b7280;
  font-size: 0.95rem;
  padding: 24px 0;
}

/* Responsive: smaller padding on mobile */
@media (max-width: 480px) {
  .card {
    padding: 36px 24px 28px;
    border-radius: 22px;
  }

  .app-name {
    font-size: 1.7rem;
  }
}