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

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --cc-side: clamp(24px, 9.28vw, 88px);

  --cc-navy: #071b63;
  --cc-muted: #64769e;
  --cc-field: #91a3ca;
  --cc-border: rgba(148, 176, 215, 0.52);
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: #eaf5ff;
}

html {
  color-scheme: light;
}

body {
  min-height: 100dvh;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

.auth-page {
  position: relative;

  width: 100%;
  min-height: 100dvh;

  overflow: hidden;

  color: var(--cc-navy);

  background:
    radial-gradient(
      circle at -2% -3%,
      rgba(32, 91, 172, 0.90) 0 10%,
      rgba(104, 169, 230, 0.50) 10.2% 18.5%,
      rgba(182, 216, 246, 0.27) 18.8% 25%,
      transparent 25.3%
    ),
    linear-gradient(
      180deg,
      #eef8ff 0%,
      #ebf6ff 58%,
      #deeffb 75%,
      #c9e4f7 100%
    );
}

.auth-orbit {
  position: absolute;

  pointer-events: none;

  border-radius: 50%;
}

.auth-orbit--top {
  top: -14%;
  left: -27%;

  width: min(72vw, 680px);
  aspect-ratio: 1;

  border:
    clamp(45px, 8vw, 92px)
    solid
    rgba(135, 193, 241, 0.24);
}

.auth-orbit--side {
  top: 40%;
  right: -18%;

  width: min(50vw, 470px);
  aspect-ratio: 1;

  border:
    clamp(32px, 6vw, 70px)
    solid
    rgba(155, 207, 246, 0.17);
}

.auth-safe-shell {
  position: relative;
  z-index: 3;

  min-height: 100dvh;

  padding:
    calc(var(--safe-top) + 10px)
    max(var(--cc-side), var(--safe-right))
    calc(var(--safe-bottom) + 128px)
    max(var(--cc-side), var(--safe-left));
}

.auth-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  min-height: 44px;
}

.auth-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 44px;
  min-height: 44px;

  color: #075de8;

  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 800;

  text-decoration: none;
}

.auth-brand-zone {
  text-align: center;
}

.auth-brand {
  display: block;

  width: clamp(230px, 42vw, 390px);
  max-width: 74%;

  height: auto;

  margin:
    clamp(10px, 1.5dvh, 24px)
    auto
    0;
}

.auth-heading {
  margin:
    clamp(30px, 3dvh, 48px)
    0
    0;

  color: var(--cc-navy);

  font-size: clamp(34px, 5.5vw, 54px);
  line-height: 0.98;

  font-weight: 850;
  letter-spacing: -0.04em;

  text-align: center;
}

.auth-subheading {
  max-width: 760px;

  margin:
    clamp(10px, 1.1dvh, 18px)
    auto
    0;

  color: var(--cc-muted);

  font-size: clamp(16px, 2.8vw, 28px);
  line-height: 1.18;

  text-align: center;
}

.auth-content {
  position: relative;
  z-index: 4;

  width: min(100%, 752px);

  margin:
    clamp(28px, 3.1dvh, 52px)
    auto
    0;
}

.auth-stack {
  display: grid;

  gap: clamp(14px, 1.18dvh, 20px);
}

.auth-provider {
  display: grid;

  grid-template-columns:
    clamp(42px, 6vw, 58px)
    minmax(0, 1fr)
    clamp(42px, 6vw, 58px);

  align-items: center;

  width: 100%;

  min-height: clamp(64px, 5.85dvh, 97px);

  padding:
    0
    clamp(18px, 3vw, 28px);

  border:
    1px
    solid
    rgba(255, 255, 255, 0.90);

  border-radius:
    clamp(16px, 2.2vw, 22px);

  background:
    rgba(255, 255, 255, 0.86);

  color: var(--cc-navy);

  text-decoration: none;

  box-shadow:
    0 12px 30px rgba(42, 92, 151, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.auth-provider--disabled {
  opacity: 0.92;
  cursor: not-allowed;
}

.provider-google,
.provider-facebook {
  display: grid;
  place-items: center;

  width: clamp(34px, 5vw, 50px);
  aspect-ratio: 1;

  border-radius: 50%;

  font-weight: 900;
}

.provider-google {
  border: 5px solid #4285f4;

  background: white;
  color: #4285f4;

  font-family: Arial, sans-serif;
  font-size: clamp(20px, 3vw, 32px);
}

.provider-facebook {
  background: #1769ea;
  color: white;

  font-family: Arial, sans-serif;
  font-size: clamp(27px, 4vw, 42px);
}

.provider-label {
  min-width: 0;

  text-align: center;

  font-size: clamp(18px, 3vw, 29px);
  line-height: 1.06;

  font-weight: 780;
}

.provider-arrow {
  justify-self: end;

  color: #53678f;

  font-size: clamp(34px, 5vw, 48px);
  font-weight: 300;
}

.provider-soon {
  justify-self: end;

  color: #7182a5;

  font-size: 11px;
  font-weight: 850;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.auth-divider {
  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: clamp(16px, 3vw, 26px);

  margin:
    clamp(15px, 2dvh, 28px)
    0;

  color: #7283a8;

  font-size: clamp(14px, 2vw, 19px);
  font-weight: 750;
}

.auth-divider::before,
.auth-divider::after {
  content: "";

  height: 1px;

  background: #afc1dd;
}

.auth-form {
  display: grid;

  gap: clamp(14px, 1.18dvh, 20px);
}

.auth-field {
  display: grid;

  grid-template-columns:
    clamp(38px, 5vw, 52px)
    minmax(0, 1fr)
    clamp(38px, 5vw, 52px);

  align-items: center;

  width: 100%;

  min-height: clamp(62px, 5.55dvh, 92px);

  padding:
    0
    clamp(18px, 3vw, 28px);

  border:
    2px
    solid
    var(--cc-border);

  border-radius:
    clamp(16px, 2vw, 21px);

  background:
    rgba(255, 255, 255, 0.50);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.field-icon {
  display: grid;
  place-items: center;

  color: #536b99;
}

.field-icon svg,
.password-toggle svg {
  width: clamp(24px, 3vw, 32px);
  height: clamp(24px, 3vw, 32px);

  fill: none;

  stroke: currentColor;
  stroke-width: 1.9;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-field input {
  width: 100%;
  min-width: 0;

  border: 0;
  outline: 0;

  background: transparent;

  color: var(--cc-navy);

  font-size:
    max(
      16px,
      clamp(17px, 2.6vw, 26px)
    );

  font-weight: 550;
}

.auth-field input::placeholder {
  color: var(--cc-field);

  opacity: 1;
}

.password-toggle {
  display: grid;
  place-items: center;

  justify-self: end;

  width: 44px;
  height: 44px;

  padding: 0;

  border: 0;

  background: transparent;

  color: #536b99;
}

.auth-status {
  margin: 0;

  padding:
    12px
    16px;

  border:
    1px
    solid
    rgba(70, 119, 184, 0.18);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.62);

  color: #425983;

  font-size: 14px;
  line-height: 1.4;

  text-align: center;
}

.auth-primary {
  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  width: 100%;

  min-height:
    clamp(66px, 6.03dvh, 100px);

  margin-top:
    clamp(3px, 0.6dvh, 10px);

  padding:
    0
    clamp(20px, 3vw, 30px);

  border: 0;

  border-radius:
    clamp(17px, 2.1vw, 22px);

  color: white;

  background:
    linear-gradient(
      100deg,
      #086af7 0%,
      #004fe9 48%,
      #09baf2 100%
    );

  box-shadow:
    0 13px 32px rgba(0, 99, 241, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.auth-primary-label {
  grid-column: 2;

  font-size:
    clamp(19px, 3.2vw, 30px);

  font-weight: 800;
}

.auth-primary-arrow {
  grid-column: 3;

  justify-self: end;

  font-size:
    clamp(29px, 4vw, 42px);

  font-weight: 300;
}

.auth-legal {
  width: min(76%, 620px);

  margin:
    clamp(8px, 1.3dvh, 20px)
    auto
    0;

  color: #334f83;

  font-size:
    clamp(13px, 2vw, 18px);

  line-height: 1.35;

  text-align: center;
}

.auth-legal-link {
  color: #005de7;

  font-weight: 700;
}

.auth-photo {
  position: absolute;
  z-index: 0;

  left: 0;
  right: 0;
  bottom: 0;

  height: 33%;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #dceefa 0%,
      rgba(220, 238, 250, 0.84) 11%,
      rgba(220, 238, 250, 0.28) 29%,
      rgba(4, 44, 95, 0.08) 52%,
      rgba(2, 54, 112, 0.20) 100%
    ),
    url("/assets/opt/athlete-pickleball-600.webp")
      89%
      bottom /
      auto
      98%
      no-repeat,
    linear-gradient(
      180deg,
      #c6e1f4 0%,
      #83b9df 54%,
      #4b91ca 100%
    );
}

.auth-photo-fade {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(220, 238, 250, 1) 0%,
      rgba(220, 238, 250, 0.72) 15%,
      transparent 39%
    );
}

.auth-photo-message {
  position: absolute;

  left: max(28px, 5%);

  bottom:
    calc(
      var(--safe-bottom) +
      104px
    );

  display: grid;

  color: white;

  font-family:
    "Snell Roundhand",
    "Segoe Script",
    cursive;

  font-size:
    clamp(18px, 3.5vw, 34px);

  line-height: 0.9;

  transform: rotate(-4deg);

  text-shadow:
    0 2px 8px
    rgba(0, 30, 75, 0.30);
}

.auth-photo-mark {
  position: absolute;

  right: max(24px, 7%);

  bottom:
    calc(
      var(--safe-bottom) +
      112px
    );

  width:
    clamp(52px, 8vw, 82px);

  opacity: 0.62;
}

.auth-mode-pill {
  position: absolute;
  z-index: 5;

  left: 50%;

  transform:
    translateX(-50%);

  bottom:
    calc(
      var(--safe-bottom) +
      clamp(18px, 2dvh, 34px)
    );

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  width: min(56%, 540px);
  min-width: min(88%, 300px);

  min-height:
    clamp(56px, 4.7dvh, 78px);

  padding:
    8px
    18px;

  border:
    1px
    solid
    rgba(255, 255, 255, 0.80);

  border-radius: 999px;

  background:
    rgba(238, 248, 255, 0.88);

  color: var(--cc-navy);

  box-shadow:
    0 8px 24px
    rgba(6, 44, 99, 0.10);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  font-size:
    clamp(13px, 2vw, 18px);
}

.auth-mode-action {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  min-height: 44px;

  padding: 0;

  border: 0;

  background: transparent;

  color: #075de8;

  font-weight: 800;
}

.auth-skip:focus-visible,
.auth-provider:focus-visible,
.auth-primary:focus-visible,
.password-toggle:focus-visible,
.auth-mode-action:focus-visible {
  outline:
    3px
    solid
    rgba(3, 102, 245, 0.34);

  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;

  clip: rect(0 0 0 0);
  clip-path: inset(50%);

  white-space: nowrap;
}

@media (max-width: 600px) {
  :root {
    --cc-side: 24px;
  }

  .auth-safe-shell {
    padding-left:
      max(24px, var(--safe-left));

    padding-right:
      max(24px, var(--safe-right));

    padding-bottom:
      calc(
        var(--safe-bottom) +
        118px
      );
  }

  .auth-brand {
    width: min(74%, 290px);

    max-width: none;
  }

  .auth-heading {
    font-size:
      clamp(31px, 8.7vw, 43px);
  }

  .auth-subheading {
    font-size: 17px;
  }

  .provider-label {
    font-size: 17px;
  }

  .auth-mode-pill {
    width:
      calc(
        100% -
        max(
          48px,
          calc(
            var(--safe-left) +
            var(--safe-right) +
            48px
          )
        )
      );
  }
}

@media (max-height: 780px) {
  .auth-brand {
    width: min(60%, 240px);
  }

  .auth-heading {
    margin-top: 17px;

    font-size:
      clamp(29px, 7vw, 38px);
  }

  .auth-content {
    margin-top: 20px;
  }

  .auth-stack,
  .auth-form {
    gap: 10px;
  }

  .auth-provider,
  .auth-field {
    min-height: 58px;
  }

  .auth-divider {
    margin: 8px 0;
  }

  .auth-primary {
    min-height: 60px;
  }

  .auth-photo {
    height: 28%;
  }
}

@media (orientation: landscape) {
  .auth-page {
    overflow: auto;
  }

  .auth-safe-shell {
    padding-left:
      max(28px, var(--safe-left));

    padding-right:
      max(28px, var(--safe-right));
  }

  .auth-photo {
    opacity: 0.46;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


html[data-google-state="verified"] .auth-provider[href="/api/auth/google"] {
  border-color: rgba(34, 139, 94, 0.42);
  background: rgba(236, 252, 244, 0.94);
  box-shadow:
    0 12px 30px rgba(34, 139, 94, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

html[data-google-state="verified"] .auth-provider[href="/api/auth/google"] .provider-label::after {
  content: " · Verified";
  color: #16784d;
  font-weight: 800;
}

html[data-google-state="verified"] .auth-status {
  color: #135f43;
  background: rgba(232, 250, 241, 0.92);
  border: 1px solid rgba(34, 139, 94, 0.28);
  border-radius: 14px;
  padding: 12px 14px;
}

/* CourtCast auth Google GSI 2026-09-22 */

.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: WHITE;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: Roboto, arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  max-width: 400px;
  min-width: min-content;
  margin-inline: auto;
  text-decoration: none;
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 10px;
  min-width: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-icon svg {
  display: block;
  height: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-family: Roboto, arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #303030;
  opacity: 8%;
}

.auth-stack > .gsi-material-button {
  width: 100%;
  max-width: 400px;
}

html[data-google-state="verified"] .gsi-material-button {
  border-color: rgba(34, 139, 94, .42);
  background-color: rgba(236, 252, 244, .94);
}

html[data-google-state="verified"] .gsi-material-button .provider-label::after {
  content: " · Verified";
  color: #16784d;
  font-weight: 800;
}

/* Google GSI Facebook-card sizing -- 2026-09-22 */

.auth-stack > .gsi-material-button {
  width: 100%;
  max-width: none;
  min-width: 0;

  min-height: clamp(64px, 5.85dvh, 97px);
  height: auto;

  padding:
    0
    clamp(18px, 3vw, 28px);

  border:
    1px
    solid
    rgba(255, 255, 255, 0.90);

  border-radius:
    clamp(16px, 2.2vw, 22px);

  background:
    rgba(255, 255, 255, 0.86);

  box-shadow:
    0 12px 30px rgba(42, 92, 151, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.auth-stack > .gsi-material-button .gsi-material-button-content-wrapper {
  display: grid;
  grid-template-columns:
    clamp(42px, 6vw, 58px)
    minmax(0, 1fr)
    clamp(42px, 6vw, 58px);

  align-items: center;
  width: 100%;
}

.auth-stack > .gsi-material-button .gsi-material-button-icon {
  display: grid;
  place-items: center;

  width: clamp(34px, 5vw, 50px);
  height: clamp(34px, 5vw, 50px);

  margin-right: 0;
}

.auth-stack > .gsi-material-button .gsi-material-button-icon svg {
  width: clamp(24px, 3.4vw, 34px);
  height: clamp(24px, 3.4vw, 34px);
}

.auth-stack > .gsi-material-button .gsi-material-button-contents {
  min-width: 0;
  text-align: center;

  font-family: inherit;
  font-size: clamp(18px, 3vw, 29px);
  line-height: 1.06;
  font-weight: 780;

  color: var(--cc-navy);
}

.auth-stack > .gsi-material-button::after {
  content: '›';

  justify-self: end;

  color: #53678f;

  font-family: inherit;
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 300;
  line-height: 1;
}

html[data-google-state="verified"] .auth-stack > .gsi-material-button::after {
  color: #16784d;
}