/* Auth / load / login / passport / profile screens */
@import url("profile-passport-layout.css");

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

:root {
  --tz-teal-dark: #1a3d3a;
  /* Fallbacks match data/main_screen_v2_layout.json — overridden at runtime by auth-screen-chrome.js */
  --tz-msv2-bg: url("/img/Background%20lake%20and%20sun-no-water.png");
  --tz-msv2-bg-water-a: url("/img/Background%20lake%20and%20sun-Just-water1.png");
  --tz-msv2-bg-water-b: url("/img/Background%20lake%20and%20sun-Just-water2.png");
  --tz-profile-art-w: 1418;
  --tz-profile-art-h: 2200;
  --tz-profile-display-pad: calc(
    max(8px, env(safe-area-inset-top, 0px))
    + max(8px, env(safe-area-inset-bottom, 0px))
  );
  --tz-profile-max-design-width: min(100%, calc(390px * var(--tz-frame-upscale, 1)));
  --tz-frame-upscale: 1;
}

html, body {
  margin: 0;
  min-height: 100dvh;
  background: var(--tz-teal-dark);
  color: #f4ecd8;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.auth-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

/* Game background — same layers as tilezilla-v2.html */
.auth-screen__bg.tz-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--tz-teal-dark);
}

.auth-screen__bg .tz-bg__sky {
  position: absolute;
  inset: 0;
  background-image: var(--tz-msv2-bg, url("/img/Background%20lake%20and%20sun-no-water.png"));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.auth-screen__bg .tz-bg__water {
  position: absolute;
  inset: 0;
}

.auth-screen__bg .tz-bg__water-layer {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  will-change: transform;
}

.auth-screen__bg .tz-bg__water-layer--a {
  background-image: var(--tz-msv2-bg-water-a, url("/img/Background%20lake%20and%20sun-Just-water1.png"));
  animation: auth-ripple-a var(--tz-ripple-duration-a, 14s) ease-in-out infinite;
}

.auth-screen__bg .tz-bg__water-layer--b {
  background-image: var(--tz-msv2-bg-water-b, url("/img/Background%20lake%20and%20sun-Just-water2.png"));
  animation: auth-ripple-b var(--tz-ripple-duration-b, 21s) ease-in-out infinite;
}

@keyframes auth-ripple-a {
  0% { transform: translateY(0); }
  50% { transform: translateY(calc(-1 * var(--tz-ripple-amplitude-a, var(--tz-ripple-amplitude, 8px)))); }
  100% { transform: translateY(0); }
}

@keyframes auth-ripple-b {
  0% { transform: translateY(0); }
  50% { transform: translateY(calc(-1 * var(--tz-ripple-amplitude-b, var(--tz-ripple-amplitude, 8px)))); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-screen__bg .tz-bg__water-layer--a,
  .auth-screen__bg .tz-bg__water-layer--b {
    animation: none;
  }
}

/* Load screen — plaque overlays background, centered on page (slightly low) */
.auth-screen--load {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 100dvh;
  padding: 0;
}

.auth-screen--login,
.auth-screen--create,
.auth-screen--profile {
  position: relative;
  display: block;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
}

/* Hide in-game hamburger while auth / passport flow is active */
body.auth-screen-chrome .tz-menu-btn,
body.auth-screen-chrome .tz-menu-root {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide misaligned inputs/stats until tuned layout JSON is applied (prevents login flash). */
body.auth-screen--layout-pending .auth-screen__stage > :not(.auth-screen__art) {
  visibility: hidden;
  pointer-events: none;
}

.auth-screen__viewport {
  position: relative;
  z-index: 1;
  width: min(100%, calc(390px * var(--tz-frame-upscale, 1)));
  margin: 0 auto;
  min-height: 100dvh;
  max-height: 100dvh;
}

.auth-screen__title {
  position: absolute;
  left: var(--auth-chrome-title-x, 20.51%);
  top: var(--auth-chrome-title-y, 0.47%);
  width: var(--auth-chrome-title-w, 58.99%);
  height: var(--auth-chrome-title-h, 6.65%);
  max-height: calc(var(--auth-chrome-title-h, 6.65%) * 1.05);
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
}

.auth-screen--login .auth-screen__stage,
.auth-screen--create .auth-screen__stage,
.auth-screen--profile .auth-screen__stage,
.auth-screen--verify-pending .auth-screen__stage {
  position: absolute;
  left: 50%;
  top: var(--auth-chrome-stage-top, 7.7%);
  transform: translateX(-50%);
  margin: 0;
  z-index: 2;
  --auth-passport-avail-h: calc(
    100dvh - 100dvh * var(--auth-chrome-stage-top-frac, 0.077) - max(8px, env(safe-area-inset-bottom, 0px))
  );
  max-height: var(--auth-passport-avail-h);
}

.auth-screen--load .auth-screen__stage--load {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: min(calc(100% - 24px), 390px);
  margin: 0;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.45));
}

.auth-screen__art {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.auth-screen__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.auth-screen__hit {
  position: absolute;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.auth-screen__hit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.auth-screen__input {
  position: absolute;
  border: none;
  background: rgba(255, 248, 230, 0.88);
  color: #3d2e1a;
  font: inherit;
  font-size: clamp(0.72rem, 2.8vw, 0.9rem);
  padding: 0 0.45em;
  line-height: 1;
  border-radius: 4px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

.auth-screen--login .auth-screen__input,
.auth-screen--create .auth-screen__input {
  display: flex;
  align-items: center;
  padding: 0 0.4em;
  font-size: clamp(0.65rem, 2.5vw, 0.82rem);
}

.auth-screen__input:focus {
  box-shadow: 0 0 0 2px rgba(196, 163, 90, 0.65);
}

.auth-screen__status {
  margin: 12px auto 0;
  max-width: 390px;
  text-align: center;
  font-size: 0.85rem;
  color: #f0dca8;
}

.auth-screen__stage {
  position: relative;
  width: min(100%, 390px);
  margin: 0 auto;
}

/* Passport frame — login / create / profile share art aspect ratio so % coords match tuners */
.auth-screen--login .auth-screen__stage,
.auth-screen--create .auth-screen__stage,
.auth-screen--profile .auth-screen__stage {
  width: var(--auth-passport-frame-width, min(100%, calc(390px * var(--tz-frame-upscale, 1))));
  height: var(--auth-passport-frame-height, auto);
  max-height: var(--auth-passport-avail-h, calc(100dvh - 100dvh * var(--auth-chrome-stage-top-frac, 0.077)));
  aspect-ratio: calc(var(--tz-profile-art-w) / var(--tz-profile-art-h));
}

.auth-screen--login .auth-screen__stage {
  width: var(
    --auth-passport-frame-width,
    min(
      100%,
      var(--auth-login-max-width, calc(390px * var(--tz-frame-upscale, 1))),
      calc(390px * var(--tz-frame-upscale, 1))
    )
  );
}

.auth-screen--create .auth-screen__stage {
  width: var(
    --auth-passport-frame-width,
    min(
      100%,
      var(--auth-create-max-width, calc(390px * var(--tz-frame-upscale, 1))),
      calc(390px * var(--tz-frame-upscale, 1))
    )
  );
}

.auth-screen--verify-pending .auth-screen__stage {
  --auth-verify-art-w: 1301;
  --auth-verify-art-h: 1120;
  width: min(
    100%,
    var(--tz-profile-max-design-width),
    var(--auth-verify-max-width, 420px),
    calc(var(--auth-verify-art-w) * 1px),
    calc(var(--auth-passport-avail-h) * var(--auth-verify-art-w) / var(--auth-verify-art-h))
  );
  aspect-ratio: calc(var(--auth-verify-art-w) / var(--auth-verify-art-h));
}

.auth-screen--verify-pending .auth-screen__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.auth-screen--verify-pending .verify-pending__email {
  position: absolute;
  left: var(--auth-verify-email-x, 16%);
  top: var(--auth-verify-email-y, 41.8%);
  width: var(--auth-verify-email-w, 68%);
  height: var(--auth-verify-email-h, 4.4%);
  margin: 0;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.74rem, 3.5vw, 1rem);
  font-weight: 700;
  line-height: 1.1;
  color: #1a4030;
  background: rgba(235, 216, 168, 0.94);
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.auth-screen--verify-pending .auth-screen__hit--verify-login {
  left: var(--auth-verify-login-x, 22%);
  top: var(--auth-verify-login-y, 73.8%);
  width: var(--auth-verify-login-w, 56%);
  height: var(--auth-verify-login-h, 7.2%);
}

.auth-screen--verify-pending .auth-screen__hit--verify-guest {
  left: var(--auth-verify-guest-x, 22%);
  top: var(--auth-verify-guest-y, 83.8%);
  width: var(--auth-verify-guest-w, 56%);
  height: var(--auth-verify-guest-h, 7.2%);
}

.auth-screen--profile .auth-screen__stage {
  width: var(
    --auth-passport-frame-width,
    min(
      100%,
      var(--auth-profile-max-width, calc(420px * var(--tz-frame-upscale, 1))),
      calc(390px * var(--tz-frame-upscale, 1))
    )
  );
}

.auth-screen--login .auth-screen__art,
.auth-screen--create .auth-screen__art,
.auth-screen--profile .auth-screen__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

/* Tuner preview chrome lives in auth-screen-tuner.css */

.auth-screen--load .auth-screen__hit--guest {
  left: 4.5%;
  top: 58.5%;
  width: 44%;
  height: 11.5%;
}

.auth-screen--load .auth-screen__hit--login {
  left: 51%;
  top: 58.5%;
  width: 44%;
  height: 11.5%;
}

.auth-screen--login .auth-screen__input--user {
  left: var(--auth-login-user-x, 28.7%);
  top: var(--auth-login-user-y, 18.5%);
  width: var(--auth-login-user-w, 43.1%);
  height: var(--auth-login-user-h, 4%);
}

.auth-screen--login .auth-screen__input--pass {
  left: var(--auth-login-pass-x, 29.1%);
  top: var(--auth-login-pass-y, 23.5%);
  width: var(--auth-login-pass-w, 35.9%);
  height: var(--auth-login-pass-h, 4%);
}

.auth-screen--login .auth-screen__hit--pass-reveal {
  left: var(--auth-login-passReveal-x, 65.8%);
  top: var(--auth-login-passReveal-y, 23.7%);
  width: var(--auth-login-passReveal-w, 10.3%);
  height: var(--auth-login-passReveal-h, 4.4%);
  z-index: 2;
}

.auth-screen--login .auth-screen__hit--submit {
  left: var(--auth-login-submit-x, 23.1%);
  top: var(--auth-login-submit-y, 28.8%);
  width: var(--auth-login-submit-w, 52.9%);
  height: var(--auth-login-submit-h, 5.7%);
}

.auth-screen--login .auth-screen__hit--forgot-password {
  left: var(--auth-login-forgotPassword-x, 77.4%);
  top: var(--auth-login-forgotPassword-y, 33%);
  width: var(--auth-login-forgotPassword-w, 9%);
  height: var(--auth-login-forgotPassword-h, 4.2%);
  z-index: 3;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.auth-screen--login .auth-screen__hit--secondary {
  left: var(--auth-login-secondary-x, 24.3%);
  top: var(--auth-login-secondary-y, 36.9%);
  width: var(--auth-login-secondary-w, 52.4%);
  height: var(--auth-login-secondary-h, 6.8%);
}

.auth-screen--login .auth-screen__hit--nav-daily {
  left: var(--auth-login-navDaily-x, 3.1%);
  top: var(--auth-login-navDaily-y, 94.2%);
  width: var(--auth-login-navDaily-w, 24.3%);
  height: var(--auth-login-navDaily-h, 5.4%);
}

.auth-screen--login .auth-screen__hit--nav-logout {
  left: var(--auth-login-navLogout-x, 71.2%);
  top: var(--auth-login-navLogout-y, 93.6%);
  width: var(--auth-login-navLogout-w, 26.8%);
  height: var(--auth-login-navLogout-h, 6.1%);
}

.auth-screen--create .auth-screen__input--name {
  left: var(--auth-create-name-x, 18%);
  top: var(--auth-create-name-y, 24.5%);
  width: var(--auth-create-name-w, 64%);
  height: var(--auth-create-name-h, 2.8%);
}

.auth-screen--create .auth-screen__input--email {
  left: var(--auth-create-email-x, 18%);
  top: var(--auth-create-email-y, 29.5%);
  width: var(--auth-create-email-w, 64%);
  height: var(--auth-create-email-h, 2.8%);
}

.auth-screen--create .auth-screen__input--pass {
  left: var(--auth-create-pass-x, 18%);
  top: var(--auth-create-pass-y, 34.5%);
  width: var(--auth-create-pass-w, 64%);
  height: var(--auth-create-pass-h, 2.8%);
}

.auth-screen--create .auth-screen__input--pass2 {
  left: var(--auth-create-pass2-x, 18%);
  top: var(--auth-create-pass2-y, 39.5%);
  width: var(--auth-create-pass2-w, 64%);
  height: var(--auth-create-pass2-h, 2.8%);
}

.auth-screen--create .auth-screen__hit--pass-reveal {
  left: var(--auth-create-passReveal-x, 78%);
  top: var(--auth-create-passReveal-y, 34.5%);
  width: var(--auth-create-passReveal-w, 8%);
  height: var(--auth-create-passReveal-h, 2.8%);
  z-index: 2;
}

.auth-screen--create .auth-screen__hit--pass2-reveal {
  left: var(--auth-create-pass2Reveal-x, 78%);
  top: var(--auth-create-pass2Reveal-y, 39.5%);
  width: var(--auth-create-pass2Reveal-w, 8%);
  height: var(--auth-create-pass2Reveal-h, 2.8%);
  z-index: 2;
}

.auth-screen--create .auth-screen__hit--submit {
  left: var(--auth-create-submit-x, 22%);
  top: var(--auth-create-submit-y, 45%);
  width: var(--auth-create-submit-w, 56%);
  height: var(--auth-create-submit-h, 4%);
}

.auth-screen--create .auth-screen__hit--secondary {
  left: var(--auth-create-secondary-x, 22%);
  top: var(--auth-create-secondary-y, 51%);
  width: var(--auth-create-secondary-w, 56%);
  height: var(--auth-create-secondary-h, 4%);
}

.auth-screen--create .auth-screen__hit--nav-daily {
  left: var(--auth-create-navDaily-x, 3%);
  top: var(--auth-create-navDaily-y, 92%);
  width: var(--auth-create-navDaily-w, 45%);
  height: var(--auth-create-navDaily-h, 5.5%);
}

.auth-screen--create .auth-screen__hit--nav-logout {
  left: var(--auth-create-navLogout-x, 52%);
  top: var(--auth-create-navLogout-y, 92%);
  width: var(--auth-create-navLogout-w, 45%);
  height: var(--auth-create-navLogout-h, 5.5%);
}

.auth-screen--profile .auth-screen__profile-name {
  position: absolute;
  left: var(--auth-profile-profileName-x, 15%);
  top: var(--auth-profile-profileName-y, 22.5%);
  width: var(--auth-profile-profileName-w, 70%);
  height: var(--auth-profile-profileName-h, 4%);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(
    0.42rem,
    calc(7.6cqw * var(--auth-profile-profileName-font-scale, 1)),
    calc(0.74rem * var(--auth-profile-profileName-font-scale, 1))
  );
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.05;
  container-type: inline-size;
  font-weight: 600;
  color: #3d2e1a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.auth-screen--profile .auth-screen__hit--nav-daily {
  left: var(--auth-profile-navDaily-x, 3%);
  top: var(--auth-profile-navDaily-y, 92%);
  width: var(--auth-profile-navDaily-w, 22%);
  height: var(--auth-profile-navDaily-h, 5.5%);
}

.auth-screen--profile .auth-screen__hit--nav-adventure {
  left: var(--auth-profile-navAdventure-x, 27%);
  top: var(--auth-profile-navAdventure-y, 92%);
  width: var(--auth-profile-navAdventure-w, 22%);
  height: var(--auth-profile-navAdventure-h, 5.5%);
}

.auth-screen--profile .auth-screen__hit--nav-random {
  left: var(--auth-profile-navRandom-x, 51%);
  top: var(--auth-profile-navRandom-y, 92%);
  width: var(--auth-profile-navRandom-w, 22%);
  height: var(--auth-profile-navRandom-h, 5.5%);
}

.auth-screen--profile .auth-screen__hit--nav-logout {
  left: var(--auth-profile-navLogout-x, 75%);
  top: var(--auth-profile-navLogout-y, 92%);
  width: var(--auth-profile-navLogout-w, 22%);
  height: var(--auth-profile-navLogout-h, 5.5%);
}

.auth-screen--profile .auth-screen__hit--back {
  left: var(--auth-profile-back-x, 2%);
  top: var(--auth-profile-back-y, 1.5%);
  width: var(--auth-profile-back-w, 10%);
  height: var(--auth-profile-back-h, 5%);
}

.auth-screen--profile .auth-screen__hit--close-x {
  left: var(--auth-profile-closeX-x, 86%);
  top: var(--auth-profile-closeX-y, 1.5%);
  width: var(--auth-profile-closeX-w, 10%);
  height: var(--auth-profile-closeX-h, 5%);
}

.auth-screen--profile .auth-screen__hit--back img,
.auth-screen--profile .auth-screen__hit--close-x img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.auth-screen__form {
  position: absolute;
  inset: 0;
}

.auth-screen__bottom-nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.auth-screen__profile-nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.auth-screen__bottom-nav .auth-screen__hit {
  pointer-events: auto;
}

.auth-screen__profile-nav .auth-screen__hit,
.auth-screen-tuner-page .auth-screen__profile-nav .tuner-box {
  pointer-events: auto;
}

/* ── Login / register error plaque ── */

body.auth-error-open {
  overflow: hidden;
}

.auth-error-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

.auth-error-root[hidden] {
  display: none !important;
}

.auth-error-root__backdrop {
  position: fixed;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.72);
  cursor: pointer;
}

.auth-error-dialog {
  position: relative;
  z-index: 1;
  width: min(
    100vw,
    calc(var(--auth-error-max-width, 390px) * var(--auth-error-width-scale, 0.92)),
    calc(var(--auth-error-art-w) * 1px),
    calc((100svh - 48px) * var(--auth-error-art-w) / var(--auth-error-art-h))
  );
  aspect-ratio: calc(var(--auth-error-art-w) / var(--auth-error-art-h));
  max-width: 100%;
}

.auth-error-dialog__frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.auth-error-dialog__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.auth-error__message {
  position: absolute;
  left: var(--auth-error-message-x, 14%);
  top: var(--auth-error-message-y, 47.5%);
  width: var(--auth-error-message-w, 72%);
  height: var(--auth-error-message-h, 14%);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.35em 0.5em;
  box-sizing: border-box;
  color: #fff8e8;
  font-size: calc(clamp(0.68rem, 2.6vw, 0.88rem) * var(--auth-error-message-font-scale, 1));
  font-weight: 600;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  overflow: hidden;
}

.auth-error__hit--ok {
  left: var(--auth-error-ok-x, 32%);
  top: var(--auth-error-ok-y, 76%);
  width: var(--auth-error-ok-w, 36%);
  height: var(--auth-error-ok-h, 9%);
}

.auth-error__hit--close {
  left: var(--auth-error-close-x, 86%);
  top: var(--auth-error-close-y, 2.5%);
  width: var(--auth-error-close-w, 10%);
  height: var(--auth-error-close-h, 8%);
}

.auth-error-tuner-page .auth-error__message.tuner-box {
  color: #fff;
  background: rgba(220, 60, 60, 0.35) !important;
  pointer-events: auto;
}

.auth-error-tuner-page .auth-error-dialog {
  margin: 0 auto;
}

/* ── Forgot password popup ── */

body.forgot-password-open {
  overflow: hidden;
}

.forgot-password-root {
  position: fixed;
  inset: 0;
  z-index: 205;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

.forgot-password-root[hidden] {
  display: none !important;
}

.forgot-password-root__backdrop {
  position: fixed;
  inset: 0;
  border: none;
  background: rgba(8, 20, 18, 0.72);
  cursor: pointer;
}

.forgot-password-dialog {
  position: relative;
  z-index: 1;
  width: min(
    100vw,
    calc(var(--forgot-password-max-width, 390px) * var(--forgot-password-width-scale, 0.92)),
    calc(var(--forgot-password-art-w) * 1px),
    calc((100svh - 48px) * var(--forgot-password-art-w) / var(--forgot-password-art-h))
  );
  aspect-ratio: calc(var(--forgot-password-art-w) / var(--forgot-password-art-h));
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5));
}

.forgot-password-dialog__frame {
  position: absolute;
  inset: 0;
}

.forgot-password-dialog__art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.forgot-password__input {
  position: absolute;
  left: var(--forgot-password-email-x, 22%);
  top: var(--forgot-password-email-y, 41%);
  width: var(--forgot-password-email-w, 56%);
  height: var(--forgot-password-email-h, 6.5%);
  margin: 0;
  padding: 0 8px;
  box-sizing: border-box;
  border: 1px solid rgba(72, 52, 32, 0.45);
  border-radius: 2px;
  background: rgba(255, 250, 235, 0.94);
  color: #2a2018;
  font-size: calc(clamp(0.68rem, 2.4cqi, 0.9rem) * var(--forgot-password-email-font-scale, 1));
  text-align: center;
  z-index: 2;
}

.forgot-password__input::placeholder {
  color: rgba(72, 52, 32, 0.45);
  font-style: italic;
}

.forgot-password__input:focus {
  outline: 2px solid rgba(232, 185, 35, 0.65);
  outline-offset: 1px;
}

.forgot-password__feedback {
  position: absolute;
  left: var(--forgot-password-feedback-x, 14%);
  top: var(--forgot-password-feedback-y, 58%);
  width: var(--forgot-password-feedback-w, 72%);
  height: var(--forgot-password-feedback-h, 8%);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(clamp(0.62rem, 2.2cqi, 0.82rem) * var(--forgot-password-feedback-font-scale, 1));
  line-height: 1.3;
  color: #2a4a42;
  z-index: 2;
  pointer-events: none;
}

.forgot-password__feedback[data-tone="error"] {
  color: #7a2020;
  font-weight: 600;
}

.forgot-password__feedback[hidden] {
  display: none !important;
}

.forgot-password__hit--send {
  left: var(--forgot-password-send-x, 8%);
  top: var(--forgot-password-send-y, 72%);
  width: var(--forgot-password-send-w, 42%);
  height: var(--forgot-password-send-h, 10%);
}

.forgot-password__hit--cancel {
  left: var(--forgot-password-cancel-x, 52%);
  top: var(--forgot-password-cancel-y, 72%);
  width: var(--forgot-password-cancel-w, 42%);
  height: var(--forgot-password-cancel-h, 10%);
}

.auth-screen--login .auth-screen__hit--forgot-password {
  z-index: 3;
}

.forgot-password-tuner-page .forgot-password__input.tuner-box,
.forgot-password-tuner-page .forgot-password__feedback.tuner-box {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: clamp(8px, 2.8cqi, 12px);
}

.forgot-password-tuner-page .forgot-password-dialog {
  margin: 0 auto;
}