/* Club branding: crest, club palette, dot-grid texture and the sign-in hero.
   Club colors from the crest: navy #0D223F, steel blue #A9BBD7, column gray #8B8D8E, white. */
:root {
  --club-navy: #0D223F; --club-navy-2: #16315A; --club-navy-3: #081629;
  --club-steel: #A9BBD7; --club-gray: #8B8D8E;
  --navy: var(--club-navy); --navy-2: var(--club-navy-2);
  --dot: rgba(13, 34, 63, .07);
  /* club colors replace the old orange: navy for primary actions, a deeper steel blue for highlights */
  --accent: #2B5797; --accent-ink: #FFFFFF; --danger: #B3261E; --primary: var(--club-navy); --primary-hover: var(--club-navy-2); --primary-ink: #FFFFFF;
}
@media (prefers-color-scheme: dark) { :root { --dot: rgba(169, 187, 215, .07); --accent: #A9BBD7; --accent-ink: #0D223F; --danger: #FF8A7A; --primary: #A9BBD7; --primary-hover: #C3D1E6; --primary-ink: #0D223F; } }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.warn { border-color: var(--danger); color: var(--danger); }
.err { color: var(--danger); }
/* selections on the pitch use steel blue, which reads on green in both light and dark mode */
.pitch-box { --accent: var(--club-steel); }
.avatar { background: var(--club-steel); color: var(--club-navy); }

/* ---------- app background: a quiet dot grid, fixed so content scrolls over it ---------- */
body { background-color: var(--paper); background-image: radial-gradient(var(--dot) 1px, transparent 1.4px); background-size: 18px 18px; background-attachment: fixed; }

/* ---------- masthead: crest, deeper navy, dot texture fading to the right ---------- */
.masthead { position: relative; overflow: hidden; background: linear-gradient(115deg, var(--club-navy-3) 0%, var(--club-navy) 45%, var(--club-navy-2) 100%); box-shadow: 0 1px 0 rgba(169, 187, 215, .25), 0 6px 18px -10px rgba(8, 22, 41, .6); }
.masthead::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(169, 187, 215, .32) 1.1px, transparent 1.5px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 85%); mask-image: linear-gradient(90deg, transparent 15%, #000 85%); }
.masthead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--club-steel), rgba(169, 187, 215, 0) 70%); opacity: .7; }
.mast-in { position: relative; }
.wordmark { grid-template-columns: auto auto; column-gap: 12px; align-items: center; }
.wordmark::before { content: ""; grid-row: 1 / span 3; width: 40px; height: 42px; background: url("../img/crest.png") center / contain no-repeat; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.wordmark .wm-bot { color: var(--club-steel); }

/* ---------- sign-in page: layout and spacing ---------- */
.login { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: auto minmax(0, 420px); justify-content: center; gap: clamp(48px, 8vw, 140px); align-items: center;
  padding-block: clamp(32px, 8vh, 96px); padding-left: max(clamp(24px, 6vw, 96px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(24px, 6vw, 96px), env(safe-area-inset-right, 0px));
  max-width: none; background: radial-gradient(1100px 800px at 40% 45%, #193863 0%, var(--club-navy) 55%, var(--club-navy-3) 100%); }
.login > * { position: relative; z-index: 1; }
.login-brand { padding: 0; gap: 0; justify-items: start; max-width: 520px; justify-self: start; }
.login-brand::before { content: ""; width: 168px; height: 177px; margin-bottom: 32px; background: url("../img/crest.png") center / contain no-repeat; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.login-brand .wm-top, .login-brand .wm-bot { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; letter-spacing: .38em; margin-right: -.38em; }
.login-brand .wm-bot { color: var(--club-steel); }
.login-brand .wm-sub { margin-top: 14px; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--club-steel); opacity: 1; }
.login-brand p { margin: 20px 0 0; font-size: 17px; line-height: 1.5; max-width: 34ch; opacity: .85; }
.login-card { margin: 0; justify-self: start; width: 100%; padding: 32px; gap: 0; border: 0; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(4, 12, 26, .55), 0 0 0 1px rgba(169, 187, 215, .18); }
.login-card .acc-mode { margin-bottom: 24px; }
.login-card form.stack { gap: 16px; }
.login-card h1 { font-size: 28px; line-height: 1.1; margin: 0; }
.login-card h1 + .fine, .login-card h1 + .note { margin-top: -8px; }
.login-card .fld { gap: 6px; }
.login-card .two { gap: 12px; }
.login-card .err:empty { display: none; }
.login-card .btn.wide { padding-block: 11px; font-size: 16px; }
.login-card #authFoot { text-align: center; }
.gate-card { display: grid; gap: 16px; }

/* ---------- sign-in background: drifting dot grid with a soft spotlight; a glint passes over the dots only ---------- */
.login::before { content: ""; position: absolute; inset: -60px; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(169, 187, 215, .5) 1.3px, transparent 1.8px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(60% 55% at 40% 50%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 80%); mask-image: radial-gradient(60% 55% at 40% 50%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 80%);
  animation: brand-drift 48s linear infinite; }
/* the glint is a brighter copy of the same dots, drifting in step, revealed through a narrow moving band */
.login::after { content: ""; position: absolute; inset: -60px; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(214, 225, 240, .9) 1.3px, transparent 1.8px); background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(115deg, transparent 42%, rgba(0, 0, 0, .55) 50%, transparent 58%); mask-image: linear-gradient(115deg, transparent 42%, rgba(0, 0, 0, .55) 50%, transparent 58%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: brand-drift 48s linear infinite, brand-glint 14s ease-in-out infinite; }
@keyframes brand-drift { to { transform: translate(24px, 24px); } }
@keyframes brand-glint { 0%, 100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 50% { -webkit-mask-position: 0 0; mask-position: 0 0; } }

@media (max-width: 820px) {
  .login { grid-template-columns: 1fr; justify-content: stretch; align-content: start; gap: 28px; padding-block: 32px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .login-brand { justify-self: stretch; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; max-width: none; }
  .login-brand::before { grid-row: 1 / span 3; width: 64px; height: 67px; margin: 0; }
  .login-brand .wm-top, .login-brand .wm-bot { font-size: 24px; letter-spacing: .3em; }
  .login-brand .wm-sub { margin-top: 8px; font-size: 13px; }
  .login-brand p { display: none; }
  .login-card { padding: 24px 20px; justify-self: stretch; }
  .wordmark::before { width: 32px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .login::before { animation: none; } .login::after { display: none; } }