/* Rockstar X authentication — isolated from the shared member theme.
   The host should load this after app.css and all shared theme sheets. */
@layer rockstar-cards {
:where(body#x-login, body#x-register) {
  --x-ink: #0b0b0a;
  --x-panel: #11110f;
  --x-panel-raised: #171714;
  --x-field: #0c0e0e;
  --x-gold: #f6b529;
  --x-gold-soft: #d99d28;
  --x-ivory: #f4f1eb;
  --x-muted: #aaa9a4;
  --x-line: rgba(232, 225, 210, .34);
  --x-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --x-body: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  color-scheme: dark;
}

body#x-login,
body#x-register {
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: clip !important;
  background: var(--x-ink) !important;
  color: var(--x-ivory) !important;
  font-family: var(--x-body) !important;
  font-size: 15px !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-x: none;
}

body#x-login::before,
body#x-register::before,
body#x-login::after,
body#x-register::after {
  content: none !important;
  display: none !important;
}

body#x-login *,
body#x-register * {
  box-sizing: border-box;
}

body#x-login :is(button, a, input),
body#x-register :is(button, a, input) {
  font-family: var(--x-body) !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body#x-login :is(button, a, input):focus-visible,
body#x-register :is(button, a, input):focus-visible {
  outline: 2px solid var(--x-gold) !important;
  outline-offset: 3px !important;
}

body#x-login .auth-media,
body#x-register .auth-media {
  display: none !important;
}

body#x-login .page,
body#x-register .page {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: min(100%, 650px) !important;
  max-width: 650px !important;
  min-height: 100dvh !important;
  margin: 0 auto !important;
  padding: 0 20px max(26px, env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

body#x-login .promo,
body#x-register .promo {
  position: relative !important;
  display: block !important;
  align-self: stretch !important;
  flex: 0 0 auto !important;
  width: calc(100% + 40px) !important;
  height: 292px !important;
  min-height: 292px !important;
  margin: 0 -20px !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #23160d !important;
  box-shadow: none !important;
  color: var(--x-ivory) !important;
  text-shadow: none !important;
}

body#x-register .promo {
  height: 234px !important;
  min-height: 234px !important;
}

body#x-login .promo-media,
body#x-register .promo-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 57% 43% !important;
  filter: saturate(.83) contrast(1.06) !important;
}

body#x-register .promo-media {
  object-position: 55% 39% !important;
}

body#x-login .promo::before,
body#x-register .promo::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(7, 7, 7, .79) 0%, rgba(7, 7, 7, .48) 42%, rgba(7, 7, 7, .04) 82%),
    linear-gradient(0deg, rgba(9, 9, 8, .86) 0%, rgba(9, 9, 8, .12) 46%, rgba(9, 9, 8, .08) 100%) !important;
}

body#x-login .promo::after {
  content: none !important;
  display: none !important;
}

body#x-register .promo::before {
  background:
    linear-gradient(90deg, rgba(7, 7, 7, .77) 0%, rgba(7, 7, 7, .38) 48%, rgba(7, 7, 7, .08) 100%),
    linear-gradient(0deg, rgba(9, 9, 8, .75), transparent 60%) !important;
}

body#x-login .auth-brand {
  position: absolute;
  z-index: 2;
  top: max(22px, env(safe-area-inset-top));
  left: clamp(18px, 4.5vw, 30px);
  display: flex;
  align-items: center;
  gap: 17px;
}

body#x-login .auth-back {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(246, 181, 41, .72) !important;
  border-radius: 5px !important;
  background: rgba(8, 8, 7, .62) !important;
  color: var(--x-gold) !important;
  cursor: pointer;
}

body#x-login .auth-back svg {
  width: 22px;
  height: 22px;
}

body#x-login .brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--x-ivory);
  font: 700 24px/.9 var(--x-display) !important;
  letter-spacing: .025em;
}

body#x-login .brand-star { color: var(--x-gold); }

body#x-login .brand-lockup small {
  color: rgba(244, 241, 235, .75);
  font: 500 8px/1 var(--x-body) !important;
  letter-spacing: .31em;
}

body#x-login .promo-main,
body#x-register .promo-main {
  position: absolute !important;
  z-index: 1 !important;
  top: 98px !important;
  left: clamp(26px, 6vw, 34px) !important;
  width: auto !important;
  max-width: min(75%, 390px) !important;
  margin: 0 !important;
  color: var(--x-ivory) !important;
  font: 700 clamp(43px, 10vw, 56px)/.88 var(--x-display) !important;
  letter-spacing: -.045em !important;
  text-transform: none !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .68) !important;
}

body#x-login .promo-script,
body#x-register .script {
  display: block !important;
  width: fit-content !important;
  margin: 5px 0 0 !important;
  color: var(--x-gold) !important;
  font: italic 700 1.04em/.88 var(--x-display) !important;
  letter-spacing: -.025em !important;
}

body#x-login .promo-script::after,
body#x-register .script::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: -5px !important;
  bottom: -12px !important;
  height: 3px !important;
  border-radius: 0 !important;
  background: var(--x-gold) !important;
  box-shadow: none !important;
  transform: none !important;
}

body#x-login .promo-small,
body#x-register .promo-small {
  position: absolute !important;
  z-index: 1 !important;
  left: clamp(28px, 6vw, 36px) !important;
  bottom: 57px !important;
  margin: 0 !important;
  color: rgba(244, 241, 235, .88) !important;
  font: 500 8px/1.55 var(--x-body) !important;
  letter-spacing: .24em !important;
  text-shadow: 0 2px 12px #000 !important;
}

body#x-register .promo-main {
  top: 58px !important;
  font-size: clamp(42px, 9vw, 55px) !important;
}

body#x-register .promo-small {
  bottom: 22px !important;
}

body#x-login .login-card,
body#x-register .card {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: none !important;
  margin: -4px auto 0 !important;
  padding: 27px clamp(23px, 5vw, 34px) 27px !important;
  overflow: visible !important;
  border: 1px solid rgba(231, 177, 66, .67) !important;
  border-top: 2px solid var(--x-gold) !important;
  border-radius: 3px !important;
  background: linear-gradient(145deg, rgba(18, 18, 16, .985), rgba(9, 10, 9, .99)) !important;
  box-shadow: 0 17px 45px rgba(0, 0, 0, .54), inset 0 1px rgba(255,255,255,.035) !important;
  color: var(--x-ivory) !important;
  animation: x-auth-enter .36s ease-out both;
}

body#x-login .login-card::before,
body#x-register .card header::before {
  content: "ROCKSTAR · ESPACE PRIVÉ" !important;
  display: block !important;
  margin: 0 0 19px !important;
  color: #e5bd64 !important;
  font: 500 10px/1.2 var(--x-body) !important;
  letter-spacing: .24em !important;
}

body#x-login .login-card::after {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  inset: -3px !important;
  border: 1px solid rgba(246,181,41,.58) !important;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 12px 100%, 0 calc(100% - 12px)) !important;
  pointer-events: none !important;
}

body#x-login .login-card {
  border-color: transparent !important;
  box-shadow: 0 17px 45px rgba(0,0,0,.54), inset 0 1px rgba(255,255,255,.035), 0 0 14px rgba(246,181,41,.08) !important;
}

body#x-login .welcome {
  margin: 0 0 2px !important;
  color: var(--x-gold) !important;
  font: 600 17px/1.2 var(--x-body) !important;
}

body#x-login h1,
body#x-register h1 {
  margin: 0 !important;
  color: var(--x-ivory) !important;
  font: 700 clamp(32px, 7vw, 39px)/1 var(--x-display) !important;
  letter-spacing: -.018em !important;
}

body#x-login .subtitle,
body#x-register .subtitle {
  margin: 7px 0 25px !important;
  color: var(--x-muted) !important;
  font: 400 14px/1.45 var(--x-body) !important;
}

body#x-login .field-group { margin: 0 0 16px !important; }

body#x-login .field-label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 9px !important;
  color: #e2ded6 !important;
  font: 600 12px/1.3 var(--x-body) !important;
}

body#x-login .field-label svg {
  width: 17px !important;
  height: 17px !important;
  color: var(--x-gold) !important;
}

body#x-login .field,
body#x-register .field {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 51px !important;
  overflow: visible !important;
  border: 1px solid rgba(202, 204, 200, .4) !important;
  border-radius: 5px !important;
  background: var(--x-field) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}

body#x-login .field:focus-within,
body#x-register .field:focus-within {
  border-color: var(--x-gold) !important;
  background: #0d0e0d !important;
  box-shadow: 0 0 0 2px rgba(246,181,41,.16) !important;
}

body#x-login input[type="tel"],
body#x-login input[type="password"],
body#x-login input[type="text"],
body#x-register input:not([type="hidden"]) {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--x-ivory) !important;
  caret-color: var(--x-gold) !important;
  font: 500 14px/1.25 var(--x-body) !important;
}

body#x-login input::placeholder,
body#x-register input::placeholder {
  color: #888a86 !important;
  opacity: 1 !important;
}

body#x-login .country {
  display: flex !important;
  flex: 0 0 137px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 137px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-right: 1px solid rgba(202,204,200,.26) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--x-ivory) !important;
  font: 700 14px/1 var(--x-body) !important;
  cursor: pointer;
}

body#x-login .country .flag,
body#x-register .phone-prefix .flag {
  width: 24px !important;
  height: 17px !important;
  flex: 0 0 24px !important;
}

body#x-login .country-chevron {
  width: 14px !important;
  height: 14px !important;
  color: #dbd1b9 !important;
}

body#x-login .country-popover,
body#x-register .country-popover {
  z-index: 30 !important;
  border: 1px solid rgba(246,181,41,.42) !important;
  border-radius: 4px !important;
  background: #131411 !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.8) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body#x-login .country-options,
body#x-register .country-options {
  max-height: min(246px, 40dvh) !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: touch;
}

body#x-login .country-option,
body#x-register .country-option {
  display: grid !important;
  grid-template-columns: 31px minmax(0, 1fr) auto 22px !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 43px !important;
  height: auto !important;
  padding: 5px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(235,230,218,.1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #e8e4dc !important;
  font: 500 13px/1.2 var(--x-body) !important;
  text-align: left !important;
  cursor: pointer;
}

body#x-login .country-option:hover,
body#x-register .country-option:hover,
body#x-login .country-option:focus-visible,
body#x-register .country-option:focus-visible {
  background: rgba(246,181,41,.09) !important;
}

body#x-login .country-option.selected,
body#x-register .country-option.selected {
  border-color: rgba(246,181,41,.38) !important;
  background: rgba(246,181,41,.12) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body#x-login .country-option .dial,
body#x-register .country-option .dial { color: #b4b2ab !important; }

body#x-login .country-option .check,
body#x-register .country-option .check {
  display: none !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: var(--x-gold) !important;
  color: #17130b !important;
  font-size: 12px !important;
}

body#x-login .country-option.selected .check,
body#x-register .country-option.selected .check { display: grid !important; }

body#x-login .icon-button,
body#x-register .toggle,
body#x-register .info {
  display: grid !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 100% !important;
  min-height: 0 !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid rgba(202,204,200,.26) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--x-gold) !important;
  cursor: pointer;
}

body#x-login .icon-button svg,
body#x-register .toggle svg,
body#x-register .info svg {
  width: 20px !important;
  height: 20px !important;
}

body#x-login .password-field input { padding-right: 10px !important; }
body#x-login .options {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 3px 0 18px !important;
  color: #c9c6bf !important;
  font: 400 11px/1.3 var(--x-body) !important;
}

body#x-login .remember {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  color: #c9c6bf !important;
  cursor: pointer;
}

body#x-login .remember input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 19px !important;
  width: 19px !important;
  min-width: 19px !important;
  height: 19px !important;
  min-height: 19px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(232,225,210,.65) !important;
  border-radius: 3px !important;
  background: #111210 !important;
  box-shadow: none !important;
}

body#x-login .remember input[type="checkbox"]:checked {
  border-color: var(--x-gold) !important;
  background: var(--x-gold) !important;
  box-shadow: inset 0 0 0 4px #111210 !important;
}

body#x-login .forgot {
  min-height: 40px !important;
  padding: 5px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #e4bd64 !important;
  font: 500 11px/1.3 var(--x-body) !important;
  white-space: nowrap;
  cursor: pointer;
}

body#x-login .primary-button,
body#x-register .submit {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 55px 0 25px !important;
  border: 1px solid #ffd16a !important;
  border-radius: 4px !important;
  background: linear-gradient(110deg, #f4ae23, #ffc447 54%, #f7b32c) !important;
  box-shadow: 0 7px 21px rgba(218,145,23,.17), inset 0 1px rgba(255,255,255,.32) !important;
  color: #17130c !important;
  font: 700 16px/1 var(--x-body) !important;
  cursor: pointer;
  transition: filter .16s ease, transform .16s ease !important;
}

body#x-login .primary-button:hover,
body#x-register .submit:hover { filter: brightness(1.06) !important; }

body#x-login .primary-button:active,
body#x-register .submit:active { transform: translateY(1px) !important; }

body#x-login .button-arrow,
body#x-register .arrow {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  display: grid !important;
  width: 39px !important;
  height: 39px !important;
  min-height: 0 !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 50% !important;
  background: #171714 !important;
  box-shadow: none !important;
  color: var(--x-gold) !important;
  transform: translateY(-50%) !important;
}

body#x-login .button-arrow svg,
body#x-register .arrow svg { width: 20px !important; height: 20px !important; }

body#x-login .divider,
body#x-register .divider {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 18px 0 14px !important;
  color: #a7a49d !important;
  font: 400 10px/1 var(--x-body) !important;
}

body#x-login .divider::before,
body#x-login .divider::after,
body#x-register .divider::before,
body#x-register .divider::after {
  content: "" !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: rgba(226,220,209,.31) !important;
}

body#x-login .signup {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 11px !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 7px 39px 7px 14px !important;
  border: 1px solid rgba(230,184,78,.7) !important;
  border-radius: 4px !important;
  background: rgba(24,23,19,.85) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
  color: #d3d0c8 !important;
  text-align: center !important;
  text-decoration: none !important;
  font: 400 12px/1.3 var(--x-body) !important;
}

body#x-login .signup > svg {
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 21px !important;
  color: var(--x-gold) !important;
}

body#x-login .signup strong,
body#x-login .signup .chevron {
  color: var(--x-gold) !important;
}

body#x-login .signup .chevron {
  position: absolute !important;
  right: 13px !important;
  width: 17px !important;
  height: 17px !important;
}

body#x-register .card {
  margin-top: 15px !important;
  padding: 31px clamp(19px, 4.5vw, 30px) 30px !important;
}

body#x-register .card header::before { margin-bottom: 16px !important; }

body#x-register .subtitle {
  margin: 7px 0 20px !important;
  font-size: 15px !important;
}

body#x-register #registration-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
}

body#x-register .field { height: 66px !important; }
body#x-register .field-icon {
  display: grid !important;
  flex: 0 0 67px !important;
  width: 67px !important;
  height: 100% !important;
  place-items: center !important;
  border-right: 1px solid rgba(202,204,200,.18) !important;
  color: var(--x-gold) !important;
}

body#x-register .field-icon svg { width: 21px !important; height: 21px !important; }

body#x-register .phone-prefix {
  display: flex !important;
  flex: 0 0 154px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 154px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-right: 1px solid rgba(202,204,200,.26) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--x-ivory) !important;
  font: 700 14px/1 var(--x-body) !important;
  cursor: pointer;
}

body#x-register .phone-prefix svg { width: 14px !important; height: 14px !important; color: var(--x-gold) !important; }
body#x-register .phone-prefix + input { padding-left: 17px !important; }
body#x-register .field .toggle,
body#x-register .field .info {
  flex-basis: 69px !important;
  width: 69px !important;
  border-left: 1px solid rgba(202,204,200,.2) !important;
}

body#x-register .field .toggle { color: var(--x-gold) !important; }
body#x-register .field .info { color: var(--x-gold) !important; }

body#x-register .error {
  display: none;
  margin: -3px 2px 0 !important;
  color: #e8b963 !important;
  font: 500 12px/1.4 var(--x-body) !important;
}

body#x-register .error.show { display: block !important; }
body#x-register .submit { height: 72px !important; min-height: 72px !important; margin-top: 5px !important; }
body#x-register .divider { margin: 6px 0 0 !important; }
body#x-register .login {
  margin: 0 !important;
  color: #c9c6bf !important;
  text-align: center !important;
  font: 400 14px/1.4 var(--x-body) !important;
}

body#x-register .login a {
  color: var(--x-gold) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body#x-login .country-error.show { color: #e8b963 !important; }
body#x-login .app-toast,
body#x-register .app-toast {
  position: fixed !important;
  z-index: 1000 !important;
  inset: auto 14px max(16px, env(safe-area-inset-bottom)) !important;
  width: fit-content !important;
  max-width: calc(100vw - 28px) !important;
  margin: auto !important;
  border: 1px solid rgba(246,181,41,.6) !important;
  border-radius: 2px !important;
  background: #191813 !important;
  color: var(--x-ivory) !important;
}

body#x-login .app-toast-error,
body#x-register .app-toast-error { border-color: #bd6248 !important; }

@keyframes x-auth-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 430px) {
  body#x-login .page,
  body#x-register .page {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }

  body#x-login .promo,
  body#x-register .promo {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
  }

  body#x-login .promo { height: 292px !important; min-height: 292px !important; }
  body#x-register .promo { height: 234px !important; min-height: 234px !important; }
  body#x-login .promo-main { top: 98px !important; left: 28px !important; }
  body#x-register .promo-main { top: 58px !important; left: 25px !important; }
  body#x-login .promo-small { left: 29px !important; bottom: 56px !important; }
  body#x-register .promo-small { left: 25px !important; }
  body#x-login .login-card { padding: 25px 22px 23px !important; }
  body#x-login input[type="tel"],
  body#x-login input[type="password"],
  body#x-login input[type="text"] { font-size: 16px !important; }
  body#x-register .card { margin-top: 14px !important; padding: 27px 19px 27px !important; }
  body#x-register .field { height: 57px !important; }
  body#x-register .submit { height: 58px !important; min-height: 58px !important; }
  body#x-register #registration-form { gap: 11px !important; }
  body#x-register input:not([type="hidden"]) { font-size: 16px !important; }
  body#x-register .field-icon { flex-basis: 52px !important; width: 52px !important; }
  body#x-register .phone-prefix { flex-basis: 118px !important; width: 118px !important; gap: 6px !important; }
  body#x-register .field .toggle,
  body#x-register .field .info { flex-basis: 52px !important; width: 52px !important; }
  body#x-register .field input::placeholder { font-size: 13px !important; }
}

@media (max-width: 380px) {
  body#x-login .page,
  body#x-register .page {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  body#x-login .promo,
  body#x-register .promo {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
  }

  body#x-login .promo { height: 280px !important; min-height: 280px !important; }
  body#x-register .promo { height: 225px !important; min-height: 225px !important; }
  body#x-login .promo-main { top: 94px !important; left: 25px !important; }
  body#x-register .promo-main { top: 56px !important; left: 22px !important; }
  body#x-login .promo-small { left: 26px !important; bottom: 51px !important; }
  body#x-register .promo-small { left: 22px !important; bottom: 19px !important; }
  body#x-login .login-card { padding-inline: 18px !important; }
  body#x-register .card { margin-top: 13px !important; padding: 23px 15px 24px !important; }
  body#x-register .field { height: 54px !important; }
  body#x-register .submit { height: 56px !important; min-height: 56px !important; }
  body#x-login .country { flex-basis: 119px !important; width: 119px !important; gap: 7px !important; }
  body#x-login .phone-country-wrap .field input[type="tel"] { padding-inline: 10px !important; }
  body#x-register .phone-prefix { flex-basis: 103px !important; width: 103px !important; gap: 5px !important; }
  body#x-register .field-icon { flex-basis: 44px !important; width: 44px !important; }
  body#x-register .field .toggle,
  body#x-register .field .info { flex-basis: 44px !important; width: 44px !important; }
  body#x-register .field input:not([type="hidden"]) { padding-inline: 10px !important; }
  body#x-register .field input::placeholder { font-size: 12px !important; }
  body#x-login .options { gap: 6px !important; }
  body#x-login .forgot { white-space: normal; text-align: right; }
}

@media (max-width: 340px) {
  body#x-login .auth-brand { gap: 12px; }
  body#x-login .brand-lockup { font-size: 21px !important; }
  body#x-login .promo-main,
  body#x-register .promo-main { font-size: 39px !important; }
  body#x-login .signup { gap: 7px !important; font-size: 11px !important; }
  body#x-register .field-icon { flex-basis: 42px !important; width: 42px !important; }
  body#x-register .phone-prefix { flex-basis: 98px !important; width: 98px !important; }
}

@media (min-width: 768px) {
  body#x-login,
  body#x-register { padding: 24px 0 !important; }

  body#x-login .page,
  body#x-register .page {
    min-height: calc(100dvh - 48px) !important;
    justify-content: center !important;
    padding: 0 22px !important;
  }

  body#x-login .promo,
  body#x-register .promo {
    width: 100% !important;
    height: 278px !important;
    min-height: 278px !important;
    margin: 0 !important;
    border: 1px solid rgba(231,177,66,.44) !important;
  }

  body#x-login .promo { height: 310px !important; min-height: 310px !important; }
  body#x-login .login-card { margin-top: -8px !important; }
  body#x-register .promo { height: 278px !important; min-height: 278px !important; }
  body#x-register .card { margin-top: 15px !important; }
}

@media (orientation: landscape) and (max-height: 560px) {
  body#x-login .promo { height: 230px !important; min-height: 230px !important; }
  body#x-register .promo { height: 190px !important; min-height: 190px !important; }
  body#x-login .promo-main { top: 105px !important; }
  body#x-register .promo-main { top: 62px !important; }
  body#x-login .login-card,
  body#x-register .card { padding-block: 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body#x-login *,
  body#x-register *,
  body#x-login *::before,
  body#x-register *::before,
  body#x-login *::after,
  body#x-register *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Final reference-match pass: cinematic sunset art, brighter gold structure,
   and roomier mobile controls without changing the existing form behavior. */
body#x-login,
body#x-register {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(147, 77, 26, .19), transparent 42%),
    linear-gradient(180deg, #100e0b 0%, #080908 70%, #050605 100%) !important;
}

body#x-login .promo,
body#x-register .promo {
  background: #25150c !important;
  border: 1px solid rgba(246, 181, 41, .48) !important;
  box-shadow: inset 0 1px rgba(255, 229, 171, .22), 0 12px 35px rgba(0, 0, 0, .42) !important;
}

body#x-login .promo-media,
body#x-register .promo-media {
  z-index: -2 !important;
  filter: saturate(1.08) contrast(1.07) !important;
}

body#x-login .promo-media { object-position: 58% 48% !important; }
body#x-register .promo-media { object-position: 58% 42% !important; }

body#x-login .promo::before,
body#x-register .promo::before {
  z-index: -1 !important;
  background:
    linear-gradient(90deg, rgba(8, 8, 7, .78) 0%, rgba(8, 8, 7, .39) 39%, rgba(8, 8, 7, .02) 78%),
    linear-gradient(0deg, rgba(8, 8, 7, .7), transparent 58%) !important;
}

body#x-login .promo-main,
body#x-register .promo-main {
  font-family: var(--x-display) !important;
  font-size: clamp(42px, 10vw, 56px) !important;
  line-height: .9 !important;
}

body#x-login .promo-script,
body#x-register .script {
  color: #ffbd35 !important;
  font-style: italic !important;
}

body#x-login .promo-script::after,
body#x-register .script::after {
  bottom: -14px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #ffd46a, #e59c20) !important;
  box-shadow: 0 0 12px rgba(255, 180, 45, .55) !important;
}

body#x-login .login-card,
body#x-register .card {
  border: 1px solid rgba(247, 190, 73, .8) !important;
  border-top: 2px solid #ffc247 !important;
  border-radius: 5px !important;
  background:
    radial-gradient(ellipse at 50% -15%, rgba(112, 73, 25, .16), transparent 48%),
    linear-gradient(145deg, rgba(18, 18, 16, .985), rgba(8, 9, 8, .99)) !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .67),
    inset 0 1px rgba(255, 245, 221, .08),
    0 0 24px rgba(246, 181, 41, .12) !important;
}

body#x-login .login-card::after,
body#x-register .card::after {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  inset: 0 !important;
  border: 1px solid rgba(255, 193, 67, .68) !important;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 12px 100%, 0 calc(100% - 12px)) !important;
  box-shadow: inset 0 0 12px rgba(248, 180, 53, .06) !important;
  pointer-events: none !important;
}

body#x-login .login-card::before,
body#x-register .card header::before {
  color: #e8bf69 !important;
  letter-spacing: .25em !important;
}

body#x-login .welcome,
body#x-login .field-label,
body#x-register .field-icon,
body#x-register .phone-prefix,
body#x-login .field-label svg {
  color: #ffc247 !important;
}

body#x-login .field,
body#x-register .field {
  min-height: 54px !important;
  border-color: rgba(210, 207, 198, .48) !important;
  border-radius: 5px !important;
  background: linear-gradient(100deg, #0d1010, #090b0b) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 4px 14px rgba(0, 0, 0, .22) !important;
}

body#x-login .field:focus-within,
body#x-register .field:focus-within {
  border-color: #f6b529 !important;
  box-shadow: 0 0 0 2px rgba(246, 181, 41, .19), inset 0 1px rgba(255, 255, 255, .04) !important;
}

body#x-login .primary-button,
body#x-register .submit {
  min-height: 58px !important;
  height: 58px !important;
  border-color: #ffd16a !important;
  background: linear-gradient(105deg, #f2a91f 0%, #ffc13a 52%, #f4ab22 100%) !important;
  box-shadow: 0 8px 22px rgba(223, 145, 22, .23), inset 0 1px rgba(255, 255, 255, .4) !important;
}

body#x-login .button-arrow,
body#x-register .arrow {
  background: #151512 !important;
  color: #ffc247 !important;
  border-color: rgba(255, 245, 221, .22) !important;
}

body#x-login .signup,
body#x-register .field .toggle,
body#x-register .field .info {
  border-color: rgba(239, 187, 77, .68) !important;
}

body#x-register .promo::after {
  content: "IMAGES DE JEU · CRÉDIT AUX AYANTS DROIT" !important;
  position: absolute !important;
  z-index: 2 !important;
  right: 16px !important;
  bottom: 11px !important;
  color: rgba(255, 240, 207, .78) !important;
  font: 500 7px/1.4 var(--x-body) !important;
  letter-spacing: .12em !important;
  text-align: right !important;
  pointer-events: none !important;
}

@media (max-width: 430px) {
  body#x-login .promo-main,
  body#x-register .promo-main {
    max-width: calc(100% - 48px) !important;
    font-size: clamp(40px, 11vw, 51px) !important;
  }

  body#x-login .login-card,
  body#x-register .card {
    padding-right: clamp(16px, 5vw, 22px) !important;
    padding-left: clamp(16px, 5vw, 22px) !important;
  }

  body#x-register .field { height: 57px !important; }
  body#x-register .phone-prefix {
    flex-basis: clamp(96px, 27vw, 118px) !important;
    width: clamp(96px, 27vw, 118px) !important;
    gap: 5px !important;
  }
  body#x-register .field-icon {
    flex-basis: 48px !important;
    width: 48px !important;
  }
  body#x-register .field .toggle,
  body#x-register .field .info {
    flex-basis: 48px !important;
    width: 48px !important;
  }
}

@media (max-width: 340px) {
  body#x-login .country {
    flex-basis: 108px !important;
    width: 108px !important;
    gap: 5px !important;
  }
  body#x-login .field-group { margin-bottom: 13px !important; }
  body#x-register .phone-prefix {
    flex-basis: 94px !important;
    width: 94px !important;
    padding-inline: 6px !important;
  }
  body#x-register .field-icon {
    flex-basis: 42px !important;
    width: 42px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body#x-login .login-card,
  body#x-register .card { animation: none !important; }
}
}