/* ============================================================================
   GOLASO AUTH UPGRADE — additive polish for the existing GM2040 auth design.
   Keeps the current city hero, presenter, light panels and aurora palette.
   ========================================================================== */

:root {
  --auth-up-cyan: #43d8ff;
  --auth-up-violet: #8054ff;
  --auth-up-magenta: #df3b9d;
  --auth-up-ink: #0d2440;
  --auth-up-line: rgba(88, 190, 225, .30);
}

/* Existing cards, now with a cleaner premium rim and a little more depth. */
#ldstage .ld-panel {
  background:
    radial-gradient(120% 64% at 50% 100%, rgba(89, 205, 237, .08), transparent 67%),
    linear-gradient(180deg, rgba(255, 255, 255, .985), rgba(248, 251, 255, .975)) !important;
  border-color: rgba(113, 176, 207, .28) !important;
  box-shadow:
    0 22px 58px rgba(20, 45, 90, .20),
    0 0 0 1px rgba(255, 255, 255, .68),
    inset 0 1px 0 rgba(255, 255, 255, .90) !important;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
  will-change: transform;
}

#ldstage #ldSign {
  box-shadow:
    0 22px 58px rgba(20, 45, 90, .20),
    0 0 52px rgba(67, 216, 255, .15),
    0 0 0 1px rgba(255,255,255,.68),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

#ldstage #ldClub {
  box-shadow:
    0 22px 58px rgba(20, 45, 90, .20),
    0 0 52px rgba(128, 84, 255, .13),
    0 0 0 1px rgba(255,255,255,.68),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

#ldstage .ld-panel:hover {
  transform: translateY(-3px);
  border-color: rgba(78, 194, 228, .44) !important;
}

/* Preserve the existing aurora header, add a broadcast status light and scan edge. */
#ldstage .ld-ph {
  position: relative !important;
  overflow: hidden;
  isolation: isolate;
}

#ldstage .ld-ph::before {
  content: "";
  position: absolute;
  inset-inline-start: 18px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9df065;
  box-shadow: 0 0 0 4px rgba(157,240,101,.12), 0 0 15px rgba(157,240,101,.72);
  transform: translateY(-50%);
  animation: authUpLive 2.2s ease-in-out infinite;
}

#ldstage .ld-ph::after {
  content: "";
  position: absolute;
  left: -35%;
  bottom: 0;
  width: 34%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), var(--auth-up-cyan), transparent);
  filter: drop-shadow(0 0 5px rgba(67,216,255,.7));
  animation: authUpHeaderScan 5.8s ease-in-out infinite;
}

@keyframes authUpLive {
  0%,100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50% { opacity: .58; transform: translateY(-50%) scale(.82); }
}

@keyframes authUpHeaderScan {
  0%,64% { left: -35%; }
  88%,100% { left: 112%; }
}

/* Real game-looking preview windows living in the unused lower half of each card. */
.auth-panel-shot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  overflow: hidden;
  border: 1px solid rgba(69, 175, 215, .30);
  border-radius: 13px;
  background-color: #091a2b;
  background-repeat: no-repeat;
  background-size: 108% auto;
  background-position: 50% 52%;
  box-shadow:
    0 12px 26px rgba(19, 52, 88, .18),
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -22px 32px rgba(2,10,22,.42);
  isolation: isolate;
  pointer-events: none;
  transition: background-size .7s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  animation: authUpCamera 14s ease-in-out infinite alternate;
}

.auth-panel-shot-signin {
  background-image:
    linear-gradient(180deg, rgba(3,15,29,.02), rgba(3,13,26,.08) 42%, rgba(3,10,21,.70) 100%),
    url('../img/ui/auth-signin-gameplay-v1.webp');
}

.auth-panel-shot-career {
  background-image:
    linear-gradient(180deg, rgba(3,15,29,.02), rgba(3,13,26,.10) 42%, rgba(3,10,21,.72) 100%),
    url('../img/ui/auth-career-gameplay-v1.webp');
  border-color: rgba(133, 104, 230, .30);
}

.auth-panel-shot::before {
  position: absolute;
  inset-inline-start: 11px;
  bottom: 8px;
  z-index: 2;
  padding: 5px 8px 4px 20px;
  border: 1px solid rgba(142, 218, 241, .20);
  border-radius: 6px;
  background: rgba(4, 14, 27, .72);
  color: #d9f5ff;
  font: 800 8px/1 'Saira Semi Condensed', sans-serif;
  letter-spacing: 1.7px;
  text-shadow: 0 1px 5px rgba(0,0,0,.8);
  direction: ltr;
  unicode-bidi: isolate;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.auth-panel-shot-signin::before { content: "MATCHDAY  •  TACTICS LAB"; }
.auth-panel-shot-career::before { content: "SCOUTING  •  CLUB BUILDING"; }

.auth-panel-shot::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -20%;
  bottom: -20%;
  left: -32%;
  width: 24%;
  transform: skewX(-17deg);
  background: linear-gradient(90deg, transparent, rgba(138, 235, 255, .20), transparent);
  animation: authUpShotSweep 7.2s 1.4s ease-in-out infinite;
}

@keyframes authUpCamera {
  from { background-position: 48% 51%; }
  to { background-position: 53% 54%; }
}

@keyframes authUpShotSweep {
  0%,70% { left: -32%; }
  94%,100% { left: 120%; }
}

#ldstage .ld-panel:hover .auth-panel-shot {
  background-size: 113% auto;
  border-color: rgba(72, 202, 236, .50);
  box-shadow: 0 15px 30px rgba(19,52,88,.23), 0 0 20px rgba(67,216,255,.10), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -22px 32px rgba(2,10,22,.42);
}

#ldstage #ldClub:hover .auth-panel-shot { border-color: rgba(133,104,230,.50); }

/* Status/error messages take priority over decorative imagery. */
.ld-body:has(.ld-msg:not(:empty)) .auth-panel-shot {
  opacity: .15;
  filter: blur(1px);
}

/* Fine interaction polish — same controls, more tactile response. */
#ldstage .ld-f,
#ldstage .ld-inp,
#ldstage .ld-ddtrig,
#ldstage .ld-cselsearch {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

#ldstage .ld-f:hover,
#ldstage .ld-inp:hover,
#ldstage .ld-ddtrig:hover,
#ldstage .ld-cselsearch:hover {
  border-color: rgba(81, 177, 211, .42) !important;
}

#ldstage .ld-f:focus-within,
#ldstage .ld-inp:focus,
#ldstage .ld-ddtrig:focus,
#ldstage .ld-cselsearch:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(67,216,255,.12), 0 8px 18px rgba(43,96,140,.12) !important;
}

#ldstage .ld-btn {
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease, box-shadow .22s ease !important;
}

#ldstage .ld-btn:hover { transform: translateY(-2px); }
#ldstage .ld-btn:active { transform: translateY(1px) scale(.994); }

#ldstage .ld-socials .social {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

#ldstage .ld-socials .social:hover { transform: translateY(-2px); }

#ldstage .ld-cselopt { transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important; }
#ldstage .ld-cselopt:hover { transform: translateY(-1px); }

/* On phones the preview becomes an actual in-flow game window. */
html.mob #mob .auth-mobile-shot {
  position: relative;
  height: 112px;
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid rgba(76, 182, 218, .30);
  border-radius: 13px;
  background-color: #081929;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 53%;
  box-shadow: 0 12px 26px rgba(20,45,90,.16), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -30px 38px rgba(3,10,22,.45);
  isolation: isolate;
  animation: authUpMobileCamera 15s ease-in-out infinite alternate;
}

html.mob #mob .auth-mobile-shot-signin {
  background-image:
    linear-gradient(180deg, transparent 28%, rgba(3,10,22,.68) 100%),
    url('../img/ui/auth-signin-gameplay-v1.webp');
}

html.mob #mob .auth-mobile-shot-career {
  background-image:
    linear-gradient(180deg, transparent 28%, rgba(3,10,22,.70) 100%),
    url('../img/ui/auth-career-gameplay-v1.webp');
  border-color: rgba(133,104,230,.30);
}

html.mob #mob .auth-mobile-shot::before {
  position: absolute;
  inset-inline-start: 10px;
  bottom: 8px;
  z-index: 2;
  padding: 5px 8px;
  border: 1px solid rgba(142,218,241,.22);
  border-radius: 6px;
  background: rgba(4,14,27,.72);
  color: #e6f8ff;
  font: 800 8px/1 'Saira Semi Condensed', sans-serif;
  letter-spacing: 1.5px;
  direction: ltr;
  unicode-bidi: isolate;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html.mob #mob .auth-mobile-shot-signin::before { content: "MATCHDAY • TACTICS LAB"; }
html.mob #mob .auth-mobile-shot-career::before { content: "SCOUTING • CLUB BUILDING"; }

html.mob #mob .auth-mobile-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(139,226,246,.028) 5px 6px);
  pointer-events: none;
}

@keyframes authUpMobileCamera {
  from { background-position: 47% 52%; }
  to { background-position: 54% 56%; }
}

html.mob #mob .m-card.m-auth {
  box-shadow: 0 20px 48px rgba(20,45,90,.14), 0 0 30px rgba(67,216,255,.08), inset 0 1px 0 rgba(255,255,255,.55) !important;
}

html.mob #mob .m-field,
html.mob #mob .ld-inp,
html.mob #mob .ld-ddtrig,
html.mob #mob .ld-cselsearch {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

html.mob #mob .m-field:focus-within,
html.mob #mob .ld-inp:focus,
html.mob #mob .ld-ddtrig:focus,
html.mob #mob .ld-cselsearch:focus { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  #ldstage .ld-ph::before,
  #ldstage .ld-ph::after,
  .auth-panel-shot,
  .auth-panel-shot::after,
  html.mob #mob .auth-mobile-shot { animation: none !important; }
  #ldstage .ld-panel,
  #ldstage .ld-btn,
  #ldstage .ld-socials .social,
  #ldstage .ld-cselopt { transition: none !important; }
}