@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&family=Caveat:wght@700&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  --screen-padding: clamp(0px, 2.4vw, 24px);
}

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

body {
  font-family: 'Nunito', 'Kanit', sans-serif;
  background: #f0ebe0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--screen-padding);
}

/* Mobile frame */
.app {
  width: min(100%, 420px);
  min-height: 844px;
  min-height: min(844px, calc(100dvh - (var(--screen-padding) * 2)));
  background: #faf6ee;
  border-radius: 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Logo Center (Login page) */
.logo-center {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 32px; padding-bottom: 8px;
}
.logo-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

/* Logo Small (top-right) */
.logo-small {
  position: absolute;
  top: 10px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.logo-image-small {
  width: clamp(54px, 11vw, 84px);
  height: auto;
}

/* Nav Buttons */
.nav-btns {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  padding: 12px 20px 20px;
}
.btn-back, .btn-next {
  padding: 10px 28px; border-radius: 20px;
  font-size: 14px; font-weight: 800; cursor: pointer;
  font-family: 'Nunito', sans-serif; border: 2px solid #2a6db5;
  transition: transform .1s, box-shadow .1s;
}
.btn-back { background: #fff; color: #2a6db5; }
.btn-next { background: #2a6db5; color: #fff; box-shadow: 0 3px 8px rgba(42,109,181,0.3); }
.btn-back:disabled, .btn-next:disabled { cursor: not-allowed; opacity: .6; }
.btn-back:active, .btn-next:active { transform: scale(0.97); }

/* Court Bottom Art */
.court-bottom-art {
  margin-top: auto; width: 100%;
  background: transparent; pointer-events: none;
}

@media (max-width: 480px) {
  body {
    padding: 0;
  }

  .app {
    width: 100%;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (min-width: 1024px) {
  body[class^="page-"] {
    padding: 0;
    align-items: stretch;
  }

  body[class^="page-"] .app {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 380px) {
  .logo-small {
    top: 10px;
    right: 10px;
  }

  .nav-btns {
    gap: 10px;
    padding-inline: 14px;
  }

  .btn-back,
  .btn-next {
    flex: 1 1 140px;
    padding-inline: 18px;
  }
}