/* Continue with Apple / Continue with Google (19 Oct). Each follows its company's rules: Apple's is black with the
   white Apple logo and the system font; Google's is the light style, white with a grey edge, the four-colour G and
   Roboto Medium 14px (the system sans when Roboto is not on the device). Same height and width, phone friendly. */
.sso { display: grid; gap: 10px; max-width: 380px; margin: 0 0 14px; }
.sso-button {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 16px; border-radius: 8px; box-sizing: border-box; width: 100%;
  text-decoration: none; cursor: pointer; font-size: 17px; line-height: 1;
}
.sso-button img { flex: none; display: block; }
.sso-apple {
  background: #000; color: #fff; border: 1px solid #000;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; font-weight: 500;
}
.sso-apple:hover { background: #1a1a1a; color: #fff; }
.sso-google {
  background: #fff; color: #1f1f1f; border: 1px solid #747775;
  font-family: Roboto, Arial, sans-serif; font-weight: 500; font-size: 14px; letter-spacing: .25px;
}
.sso-google:hover { background: #f8f9fa; color: #1f1f1f; }
.sso-button:focus-visible { outline: 3px solid #4285f4; outline-offset: 2px; }
.sso-or { display: flex; align-items: center; gap: 10px; color: #6b6b6b; font-size: max(14px, var(--fine-min, 0px)); margin: 4px 0 12px; max-width: 380px; }
.sso-or::before, .sso-or::after { content: ""; flex: 1; border-top: 1px solid #d6d0c4; }
.sso-fine { font-size: max(13px, var(--fine-min, 0px)); color: #6b6b6b; margin: 0 0 10px; max-width: 380px; }
.sso-problem { background: #fff4e5; border: 1px solid #e8b04b; border-radius: 8px; padding: 10px 14px; max-width: 520px; }
@media (max-width: 480px) { .sso, .sso-or, .sso-fine { max-width: none; } }
/* the buttons keep their own colors wherever they are dropped (28 Oct: inside the coins box after a game, the box's
   gold underlined link style won, gold on white, about 1.4 to 1; dark grey on white is 16 to 1, white on black 21 to 1) */
.sso a.sso-button, .sso .sso-button.sso-google, .sso .sso-button.sso-apple { text-decoration: none; }
.sso .sso-button.sso-google, .sso .sso-button.sso-google:hover { color: #1f1f1f; font-weight: 500; }
.sso .sso-button.sso-apple, .sso .sso-button.sso-apple:hover { color: #fff; font-weight: 500; }