:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0e1f2d;
  color: #f3e7d7;
  --mg-ink: #0e1f2d;
  --mg-red: #e24444;
  --mg-coral: #ff6b6b;
  --mg-cream: #f3e7d7;
  --mg-muted: #b5c5d0;
}

* { box-sizing: border-box; }

body {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  padding: clamp(28px, 7vh, 72px) 24px;
  background:
    url("/assets/images/identite/login-geometry.svg") right 4vw top 5vh / 220px 220px no-repeat,
    url("/assets/images/identite/login-geometry.svg") left 4vw bottom 5vh / 220px 220px no-repeat,
    radial-gradient(ellipse at 50% 42%, #173247 0%, #102739 40%, var(--mg-ink) 78%);
  color: var(--mg-cream);
}

/* Brush artwork cropped from the supplied MGamingCo asset board. */
body::before,
body::after {
  position: fixed;
  z-index: 0;
  width: clamp(390px, 56vw, 720px);
  aspect-ratio: 455 / 380;
  background: url("/assets/images/identite/login-brush-ring.png") center / contain no-repeat;
  content: "";
  pointer-events: none;
  opacity: .78;
}

body::before {
  top: -25vh;
  left: -22vw;
  transform: rotate(-19deg);
}

body::after {
  right: -23vw;
  bottom: -28vh;
  transform: rotate(161deg);
}

.login {
  position: relative;
  z-index: 1;
  width: min(100%, 660px);
  padding: clamp(36px, 6vw, 62px) clamp(24px, 7vw, 72px) clamp(38px, 6vw, 64px);
  border: 1px solid rgba(141, 171, 190, .38);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(28, 52, 71, .96), rgba(15, 34, 49, .97));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .07);
  text-align: center;
  backdrop-filter: blur(12px);
}

.login::before,
.login::after {
  position: absolute;
  z-index: -1;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background: var(--mg-red);
  content: "";
  box-shadow: 29px 22px 0 -2px var(--mg-cream), 56px -9px 0 2px rgba(34, 56, 77, .9);
  pointer-events: none;
}

.login::before { top: -38px; left: -34px; }
.login::after { right: -34px; bottom: -38px; transform: rotate(18deg); }

.logo {
  display: block;
  width: 142px;
  max-width: min(42vw, 180px);
  height: auto;
  margin: 0 auto 30px;
  border-radius: 50%;
  background: var(--mg-cream);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24), 0 0 0 1px rgba(243, 231, 215, .22);
}

h1 {
  margin: 0 0 16px;
  color: #fffaf4;
  font-size: clamp(1.8rem, 4vw, 2.55rem);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.14;
  text-wrap: balance;
}

p {
  max-width: 46ch;
  margin: 0 auto 30px;
  color: var(--mg-muted);
  font-size: clamp(.96rem, 2vw, 1.08rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.message { color: #ffe0d4; }
.actions { display: grid; gap: 14px; }
.actions form { margin: 0; }

.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
  padding: 16px 64px 16px 84px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 15px;
  background: linear-gradient(110deg, var(--mg-red), var(--mg-coral));
  box-shadow: 0 12px 24px rgba(226, 68, 68, .2), inset 0 1px rgba(255, 255, 255, .2);
  color: #fffaf6;
  font: inherit;
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

.button::before {
  position: absolute;
  top: 50%;
  left: 24px;
  display: grid;
  width: 40px;
  height: 34px;
  place-items: center;
  border-right: 1px solid rgba(255, 255, 255, .34);
  content: "›";
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-50%);
}

.button:hover {
  filter: brightness(1.06);
  box-shadow: 0 15px 30px rgba(226, 68, 68, .3), inset 0 1px rgba(255, 255, 255, .24);
  transform: translateY(-1px);
}
.button:active { transform: translateY(0); }

.secondary {
  justify-self: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(243, 231, 215, .42);
  border-radius: 12px;
  background: rgba(14, 31, 45, .32);
  color: var(--mg-cream);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.secondary::before { content: none; }

.status-banner ~ .login { margin-top: 56px; }

:focus-visible {
  outline: 3px solid #ffe0a6;
  outline-offset: 4px;
}

@media (max-width: 700px) {
  body {
    padding: 34px 20px;
    background-size: 128px 128px, 128px 128px, auto;
    background-position: right 2vw top 2vh, left 2vw bottom 2vh, center;
  }
  body::before,
  body::after { width: 300px; opacity: .43; }
  body::before { top: -90px; left: -150px; }
  body::after { right: -155px; bottom: -110px; }
  .login {
    width: min(100%, 520px);
    padding: 34px 24px 38px;
    border-radius: 23px;
  }
  .login::before,
  .login::after { transform: scale(.78); }
  .logo { width: 112px; margin-bottom: 24px; }
  h1 { font-size: clamp(1.65rem, 7vw, 2rem); }
  p { margin-bottom: 26px; font-size: .96rem; }
  .button { min-height: 60px; padding: 14px 46px 14px 70px; font-size: 1rem; }
  .button::before { left: 18px; width: 36px; }
  .status-banner ~ .login { margin-top: 68px; }
}

@media (max-width: 360px) {
  body { padding-right: 16px; padding-left: 16px; }
  .login { padding: 30px 18px 32px; }
  .login::before { left: -21px; }
  .login::after { right: -21px; }
  .logo { width: 100px; }
  .button { padding-right: 38px; padding-left: 62px; font-size: .96rem; }
  .button::before { left: 14px; width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}