/* The web account's sign-in form (signin.js). Colours come from the game's current theme through --si-* (set by the
   script); the fallbacks are the dark theme's. Fields stay at 16px or more: smaller makes iOS Safari zoom the page. */
.signin {
  position: fixed; inset: 0; z-index: 1000;
  display: flex;
  box-sizing: border-box;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(0, 0, 0, 0.6);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* A scroll container of its own: a phone in landscape shows less than the sheet, and the page around it forbids
     panning (style.css). Centred by the sheet's auto margins, not by align-items, which would push the top out of reach. */
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  /* The page switches the callout off for the game (style.css) and the property is inherited: without this iOS may not
     offer the paste menu on the code field or the link previews. */
  -webkit-touch-callout: default;
}
.signin[hidden] { display: none; }
.signin__panel {
  position: relative; box-sizing: border-box; width: 100%; max-width: 400px; margin: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px 20px 20px; border-radius: 16px;
  background: var(--si-bg, #1f1f26); color: var(--si-text, #f2f2f5);
}
/* The page switches text selection off for the game; a field that cannot be selected cannot be typed in on iOS Safari. */
.signin__input {
  -webkit-user-select: text; user-select: text;
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box; width: 100%; padding: 12px 14px; font: inherit; font-size: 16px;
  border: 1px solid var(--si-muted, #9a9aa6); border-radius: 10px;
  background: transparent; color: inherit;
}
.signin__input:focus { outline: none; border-color: var(--si-accent, #4f7cff); box-shadow: 0 0 0 1px var(--si-accent, #4f7cff); }
/* The code while it is checked: read-only rather than disabled (that would close the iOS keyboard), so dimmed by hand. */
.signin__input[readonly] { opacity: 0.6; }
.signin__title { margin: 0 32px 0 0; font-size: 20px; font-weight: 700; }
.signin__lead { margin: 0; font-size: 15px; line-height: 1.4; }
.signin__note, .signin__privacy, .signin__consent { font-size: 13px; line-height: 1.4; color: var(--si-muted, #9a9aa6); }
.signin__note { margin: 0; }
.signin__code { font-size: 24px; letter-spacing: 8px; text-align: center; }
/* The big spaced digits are for the code; the hint at that size is cut to «Код из пись» at 320px. */
.signin__code::placeholder { font-size: 16px; letter-spacing: normal; }
.signin__consent { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.signin__consent input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--si-accent, #4f7cff); }
.signin a { color: var(--si-accent, #4f7cff); }
.signin__error { margin: 0; min-height: 1.2em; font-size: 14px; color: #ff6b6b; }
.signin__primary {
  padding: 14px; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 700;
  background: var(--si-accent, #4f7cff); color: var(--si-on-accent, #ffffff);
}
.signin__primary:disabled { opacity: 0.4; cursor: default; }
.signin__link {
  align-self: flex-start; padding: 10px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; text-align: left; color: var(--si-accent, #4f7cff);
}
.signin__link:disabled { color: var(--si-muted, #9a9aa6); cursor: default; }
.signin__close {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px;
  border: 0; border-radius: 18px; background: none; color: inherit; cursor: pointer;
  font: inherit; font-size: 24px; line-height: 36px;
}