/* Login / register screen (ui/auth.js). Mobile first. Every color comes from the theme palette:
   ui/auth.js sets the --cp-* custom properties on .cp-auth from getTheme().palette; the values below
   are only the fallbacks (= default theme) for keys a theme does not define. Shadows and tints are
   derived from those properties with color-mix(), so a theme swap recolors them too. */

.cp-auth {
  --cp-accent: #f1976c; --cp-accent2: #6794d9; --cp-ok: #61cb8b; --cp-bad: #cf534f; --cp-text: #38383d;
  --cp-panel: #ffffff; --cp-ice: #d0e8ff; --cp-peri: #a0a8c9; --cp-slate: #4f5260; --cp-amber: #ffc044;
  --cp-cream: #fde4c7; --cp-green: #61cb8b; --cp-white: #ffffff;
  --cp-sky-top: #8ed1fc; --cp-sky-mid: #bfe5fd; --cp-sky-bottom: #e6f6ff; --cp-ink: #2f4f7a;
  --cp-link: #2f5ea8; --cp-error-bg: #fdeceb; --cp-error-text: #8a2b28; --cp-notice-text: #6b3a14;
  --cp-input-disabled: #f3f5fa;
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, var(--cp-sky-top) 0%, var(--cp-sky-mid) 45%, var(--cp-sky-bottom) 100%);
  color: var(--cp-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.cp-auth *, .cp-auth *::before, .cp-auth *::after { box-sizing: border-box; }
/* hidden must win over display rules (tabs are a grid; the add-email step hides them). */
.cp-auth [hidden] { display: none !important; }

/* ---------- sky ---------- */
.cp-auth__sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cp-auth__cloud {
  position: absolute;
  display: block;
  width: 120px;
  height: 36px;
  border-radius: 999px;
  background: var(--cp-white);
  opacity: 0.85;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--cp-accent2) 12%, transparent);
}
.cp-auth__cloud::before, .cp-auth__cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--cp-white);
}
.cp-auth__cloud::before { width: 54px; height: 54px; left: 18px; top: -26px; }
.cp-auth__cloud::after { width: 40px; height: 40px; left: 60px; top: -16px; }
.cp-auth__cloud--a { top: 31%; left: -46px; transform: scale(0.7); }
.cp-auth__cloud--b { top: 24%; right: -34px; transform: scale(0.6); }
.cp-auth__cloud--c { top: 34%; right: 6%; transform: scale(0.5); opacity: 0.7; }

@media (prefers-reduced-motion: no-preference) {
  .cp-auth__cloud--a { animation: cp-auth-drift 38s ease-in-out infinite alternate; }
  .cp-auth__cloud--b { animation: cp-auth-drift 46s ease-in-out infinite alternate-reverse; }
  .cp-auth__cloud--c { animation: cp-auth-drift 54s ease-in-out infinite alternate; }
}
@keyframes cp-auth-drift { from { translate: 0 0; } to { translate: 40px 0; } }

/* ---------- layout ---------- */
.cp-auth__layout {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:
    calc(env(safe-area-inset-top, 0px) + 20px)
    calc(env(safe-area-inset-right, 0px) + 16px)
    calc(env(safe-area-inset-bottom, 0px) + 20px)
    calc(env(safe-area-inset-left, 0px) + 16px);
}

.cp-auth__brand {
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.cp-auth__title {
  margin: 4px 0 0;
  font-size: 42px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--cp-white);
  /* Toy-block extrusion keeps white text readable on the light sky. */
  text-shadow:
    0 2px 0 var(--cp-accent2), 0 4px 0 var(--cp-accent2), 0 5px 0 var(--cp-accent2),
    2px 0 0 var(--cp-accent2), -2px 0 0 var(--cp-accent2), 0 -2px 0 var(--cp-accent2),
    0 9px 12px color-mix(in srgb, var(--cp-text) 25%, transparent);
}

/* Brand logo as the heading (default theme). The image carries its own diorama, so the sprite park
   (.cp-auth__iso) is only built for themes without a logo. */
.cp-auth__title--logo { width: 100%; max-width: 360px; margin: 0 auto; text-shadow: none; }
.cp-auth--logo .cp-auth__tagline { margin-top: 4px; }
.cp-auth--logo .cp-auth__brand { margin-bottom: 16px; }

.cp-auth__tagline {
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--cp-ink);
}

.cp-auth__iso {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 6px auto -14px;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 10px 10px color-mix(in srgb, var(--cp-ink) 18%, transparent));
}
.cp-auth__iso img { position: absolute; display: block; }

/* ---------- brand images (ui/brand.js) ----------
   Global on purpose: the loading overlay (app/boot.js) shows the same logo and index.html loads this
   file for every screen. The container sets the width, the height follows the aspect ratio. */
.cp-brand { display: block; width: 100%; margin: 0 auto; }
.cp-brand__img { display: block; width: 100%; height: auto; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.cp-brand--logo .cp-brand__img, .cp-brand--wordmark .cp-brand__img {
  filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--cp-ink, #2f4f7a) 20%, transparent));
}
/* Seasonal logos (docs/BRAND.md) sit on a 3:2 canvas, taller than the normal 1024x606 logo. At
   88.8 % of the container width (= (606/1024) / (1024/1536)) a seasonal logo is exactly as tall as
   the normal one in the same box, so the login form and the loading bar stay where they are. */
.cp-brand--logo.cp-brand--seasonal { width: 88.8%; }

/* ---------- card ---------- */
.cp-auth__column { width: 100%; max-width: 420px; }
.cp-auth__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 16px 18px 18px;
  border-radius: 22px;
  background: var(--cp-panel);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--cp-accent2) 35%, transparent), 0 18px 40px color-mix(in srgb, var(--cp-ink) 22%, transparent);
}

.cp-auth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--cp-ice);
}
.cp-auth__tab {
  min-height: 44px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--cp-slate);
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.cp-auth__tab[aria-selected="true"] {
  background: var(--cp-white);
  color: var(--cp-text);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--cp-accent2) 35%, transparent);
}

.cp-auth__form { margin-top: 14px; }
.cp-auth__heading { margin: 0; font-size: 22px; font-weight: 800; }
.cp-auth__intro { margin: 4px 0 12px; color: var(--cp-slate); font-size: 16px; }

.cp-auth__notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--cp-cream);
  color: var(--cp-notice-text);
  font-weight: 600;
}

.cp-auth__field { margin-bottom: 12px; }
.cp-auth__label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 16px; }
.cp-auth__input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--cp-peri);
  border-radius: 12px;
  background: var(--cp-white);
  color: var(--cp-text);
  font: inherit;
  font-size: 17px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cp-auth__input:focus { outline: none; border-color: var(--cp-accent2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cp-accent2) 30%, transparent); }
.cp-auth__input[aria-invalid="true"] { border-color: var(--cp-bad); }
.cp-auth__input:disabled { background: var(--cp-input-disabled); }

.cp-auth__pw { position: relative; }
.cp-auth__input--pw { padding-right: 92px; }
.cp-auth__reveal {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  min-width: 80px;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--cp-link);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.cp-auth__reveal:focus-visible { outline: 3px solid var(--cp-accent2); outline-offset: -3px; }

.cp-auth__hint { margin: 6px 2px 0; font-size: 16px; line-height: 1.3; color: var(--cp-slate); }

.cp-auth__error {
  margin: 4px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border-left: 5px solid var(--cp-bad);
  background: var(--cp-error-bg);
  color: var(--cp-error-text);
  font-weight: 600;
}

.cp-auth__submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  border: 0;
  border-radius: 14px;
  background: var(--cp-accent);
  color: var(--cp-text);
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--cp-text) 18%, transparent), 0 3px 0 color-mix(in srgb, var(--cp-text) 12%, transparent);
  transition: transform 0.08s, filter 0.15s;
}
.cp-auth__submit:hover { filter: brightness(1.04); }
.cp-auth__submit:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--cp-text) 18%, transparent); }
.cp-auth__submit:focus-visible, .cp-auth__tab:focus-visible, .cp-auth__link:focus-visible {
  outline: 3px solid var(--cp-accent2);
  outline-offset: 2px;
}
.cp-auth__submit:disabled { cursor: progress; filter: saturate(0.7); }

.cp-auth__spinner {
  display: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--cp-text) 25%, transparent);
  border-top-color: var(--cp-text);
}
.cp-auth.is-busy .cp-auth__spinner, .cp-auth__form.is-busy .cp-auth__spinner { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .cp-auth.is-busy .cp-auth__spinner, .cp-auth__form.is-busy .cp-auth__spinner { animation: cp-auth-spin 0.8s linear infinite; }
}
@keyframes cp-auth-spin { to { transform: rotate(360deg); } }

.cp-auth__switch {
  margin: 12px 0 0;
  text-align: center;
  color: var(--cp-slate);
}
.cp-auth__link {
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--cp-link);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- forgot password, consent, privacy ---------- */
.cp-auth__forgot-row { margin: 2px 0 0; text-align: right; }
.cp-auth__forgot { padding: 0 2px; font-size: 16px; }
.cp-auth__forgot-note {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--cp-ice);
  color: var(--cp-text);
  font-size: 16px;
  line-height: 1.4;
}
.cp-auth__consent { margin: 0 0 12px; color: var(--cp-slate); font-size: 15px; line-height: 1.35; }
/* Sign-up honeypot (ui/auth.js): moved off-screen, NOT display:none or [hidden] (some bots skip
   fields hidden that way). The card is position:relative and .cp-auth clips horizontal overflow. */
.cp-auth__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Cloudflare Turnstile slot (only when the robot check is on; the widget shows itself only when the
   player has to tick a box). size 'flexible' fills the card width (at least 300 px: fits at 375). */
.cp-auth__turnstile { display: flex; justify-content: center; margin: 0 0 4px; }
.cp-auth__inline-link { color: var(--cp-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.cp-auth__inline-link:focus-visible, .cp-auth__footer-link:focus-visible { outline: 3px solid var(--cp-accent2); outline-offset: 2px; border-radius: 4px; }
.cp-auth__footer { margin: 12px 0 0; text-align: center; }
.cp-auth__footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--cp-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cp-auth__later { font-weight: 700; }

/* ---------- add-email prompt over the game (createEmailPrompt) ---------- */
.cp-auth--prompt { z-index: 60; background: color-mix(in srgb, var(--cp-ink) 50%, transparent); }
.cp-auth__layout--prompt { justify-content: center; }
.cp-auth__layout--prompt .cp-auth__card { max-width: 420px; margin: auto 0; }

/* ---------- wider screens ---------- */
@media (min-width: 560px) {
  .cp-auth__iso { max-width: 440px; }
  .cp-auth__title--logo { max-width: 420px; }
  .cp-auth__card { padding: 22px 26px 24px; }
}

@media (min-width: 900px) {
  .cp-auth__layout {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 56px;
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .cp-auth__brand { max-width: 560px; flex: 0 1 560px; }
  .cp-auth__title { font-size: 60px; }
  .cp-auth__title--logo { max-width: 480px; }
  .cp-auth--logo .cp-auth__brand { margin-bottom: 0; }
  .cp-auth__tagline { font-size: 20px; }
  .cp-auth__iso { max-width: 560px; margin: 8px auto 0; }
  .cp-auth__column { flex: 0 0 400px; }
  .cp-auth__layout--prompt .cp-auth__card { flex: 0 0 420px; }
  .cp-auth__cloud--a { top: 12%; left: 4%; transform: scale(1); }
  .cp-auth__cloud--b { top: 6%; right: 8%; transform: scale(0.8); }
  .cp-auth__cloud--c { top: 70%; right: 3%; transform: scale(0.6); }
}

@media (min-width: 900px) and (max-height: 640px) {
  .cp-auth__iso { max-width: 440px; }
  .cp-auth__title--logo { max-width: 400px; }
}

/* Desktop with room (logo beside the card, centred): a seasonal logo takes the full 480 px width
   (480x320) instead of matching the normal logo's height. */
@media (min-width: 900px) and (min-height: 641px) {
  .cp-auth__title--logo .cp-brand--seasonal { width: 100%; }
}