/* "Who's playing?" login screen: heading, name field, PIN fields, message line. */

.login {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-3);
}

.login__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border: var(--border-width) solid var(--accent);
  background: var(--color-scrim);
  box-shadow:
    var(--shadow-pixel),
    0 0 36px color-mix(in srgb, var(--accent) var(--glow-alpha), transparent);
  animation: login-in 600ms ease;
}

.login__title {
  font-family: var(--font-title);
  font-weight: var(--font-title-weight);
  font-size: calc(clamp(24px, 7vw, 40px) * var(--font-title-scale));
  line-height: 1.15;
  letter-spacing: calc(0.05em + var(--font-title-tracking));
  color: var(--accent);
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent) var(--glow-alpha-strong), transparent);
}

.login__lead {
  font-family: var(--font-text);
  font-weight: var(--font-text-weight);
  font-size: calc(clamp(17px, 4.4vw, 21px) * var(--font-text-scale));
  line-height: var(--font-text-lh);
  color: var(--color-text-dim);
}

.login__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.login__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
}

.login__field[hidden] {
  display: none;
}

.login__label {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--color-text-dim);
}

.login__input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-text);
  font-weight: var(--font-text-weight);
  /* At least 16px so phones don't zoom the page when the field is focused. */
  font-size: max(16px, calc(22px * var(--font-text-scale)));
  line-height: 1.2;
  color: var(--color-text);
  background: var(--color-plum-deep);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 160ms ease, box-shadow 220ms ease;
}

.login__input::placeholder {
  color: var(--color-text-dim);
  opacity: 0.6;
}

.login__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) var(--glow-alpha), transparent);
}

/* The name stays visible, but locked, while the PIN is being entered. */
.login__input[readonly] {
  color: var(--accent);
  border-style: dashed;
}

.login__input--pin {
  text-align: center;
  letter-spacing: 0.5em;
  /* centre the dots: trailing letter-spacing otherwise nudges them left */
  padding-left: calc(var(--space-3) + 0.5em);
}

/* Reserve two lines so the buttons don't jump when a message appears. */
.login__message {
  min-height: calc(var(--font-text-lh) * 2em);
  font-family: var(--font-text);
  font-weight: var(--font-text-weight);
  font-size: calc(clamp(16px, 4vw, 19px) * var(--font-text-scale));
  line-height: var(--font-text-lh);
  color: var(--color-text-dim);
  text-align: left;
}

/* Errors are told apart by colour AND a leading marker, never colour alone. */
.login__message--error {
  color: var(--color-accent-error);
}

.login__message--error::before {
  content: '! ';
}

.login__message--notice {
  color: var(--color-accent-gold);
}

@keyframes login-in {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}