/* D3 Games — Log in / Sign up */
.au-top__alt {
  justify-self: end;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mute);
  white-space: nowrap;
  transition: border-color 0.25s, background 0.25s;
}
.au-top__alt b { color: var(--a); }
.au-top__alt:hover { border-color: var(--a); background: rgba(39, 183, 230, 0.08); }

/* ---------- Layout ---------- */
.au-main {
  position: relative;
  display: grid;
  grid-template-areas: "hero" "card" "perks";
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 40px) 40px;
}
.au-hero { grid-area: hero; position: relative; min-width: 0; }
.au-card { grid-area: card; min-width: 0; }
.au-perks { grid-area: perks; }
@media (min-width: 1000px) {
  .au-main {
    grid-template-columns: minmax(0, 1fr) 440px;
    grid-template-areas: "hero card" "perks card";
    grid-template-rows: auto 1fr;
    column-gap: 64px;
    row-gap: 26px;
    align-items: start;
    padding-top: 56px;
  }
  .au-card { position: sticky; top: 90px; }
}
.au-main--solo { grid-template-columns: minmax(0, 460px); grid-template-areas: "card"; justify-content: center; }
@media (min-width: 1000px) {
  .au-main--solo { grid-template-columns: 460px; grid-template-areas: "card"; grid-template-rows: auto; padding-top: 48px; }
  .au-main--solo .au-card { position: static; }
}

/* ---------- Hero ---------- */
.au-title {
  margin-top: 10px !important;
  font-size: clamp(52px, 14vw, 104px) !important;
  line-height: 0.88 !important;
}
.au-title span { color: transparent; -webkit-text-stroke: 1.5px var(--a); }
.au-lede { max-width: 440px; margin-top: 14px !important; font-size: 14px; line-height: 1.6; color: var(--mute); }
.au-bonus {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(39, 183, 230, 0.4);
  border-radius: 999px;
  background: rgba(39, 183, 230, 0.08);
  font-size: 13px;
  font-weight: 700;
}
.au-bonus i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--a); color: var(--ink); }
.au-bonus svg { width: 15px; height: 15px; }
.au-bonus b { color: var(--a); }

/* ---------- Sky (decorative round) ---------- */
.au-sky {
  position: relative;
  height: 118px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(90% 130% at 0% 100%, rgba(39, 183, 230, 0.16), transparent 60%),
    repeating-linear-gradient(0deg, rgba(238, 244, 248, 0.035) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(238, 244, 248, 0.035) 0 1px, transparent 1px 24px),
    #070d15;
}
.au-sky__plot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.au-sky__area { fill: url(#auSkyFill); transition: opacity 0.4s; }
.au-sky__line {
  fill: none;
  stroke: var(--a);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(39, 183, 230, 0.7));
  transition: stroke 0.3s;
}
.au-sky__plane {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  color: var(--paper);
  filter: drop-shadow(0 0 8px rgba(39, 183, 230, 0.9));
  transition: opacity 0.35s;
}
.au-sky__cap {
  position: absolute;
  left: 16px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}
.au-sky__cap i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); }
.au-sky__cap em { font-style: normal; }
.au-sky__cap [data-gone], .au-sky.is-gone .au-sky__cap [data-fly] { display: none; }
.au-sky.is-gone .au-sky__cap [data-gone] { display: inline; color: var(--bad); }
.au-sky.is-gone .au-sky__cap i { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.au-sky__mult {
  position: absolute;
  right: 16px;
  top: 10px;
  font-family: var(--display);
  font-size: 40px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(39, 183, 230, 0.45);
  transition: color 0.3s;
}
.au-sky__mult b { font-weight: 400; }
.au-sky__mult small { margin-left: 2px; font-size: 0.55em; color: var(--a); }
.au-sky__tag {
  position: absolute;
  right: 16px;
  bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(238, 244, 248, 0.45);
}
.au-sky.is-gone .au-sky__mult { color: var(--bad); text-shadow: 0 0 24px rgba(255, 107, 122, 0.45); }
.au-sky.is-gone .au-sky__mult small { color: var(--bad); }
.au-sky.is-gone .au-sky__line { stroke: var(--bad); filter: none; }
.au-sky.is-gone .au-sky__area { opacity: 0; }
.au-sky.is-gone .au-sky__plane { opacity: 0; }
@media (min-width: 1000px) {
  .au-sky { height: 250px; margin-top: 30px; border-radius: 28px; }
  .au-sky__mult { right: 24px; top: 20px; font-size: 76px; }
  .au-sky__cap { left: 24px; top: 24px; }
  .au-sky__tag { right: 24px; bottom: 20px; font-size: 13px; }
  .au-sky__plane { width: 34px; height: 34px; margin: -3px 0 0 -3px; }
}

/* ---------- Card ---------- */
.au-card { padding: clamp(20px, 5vw, 30px); }
.au-card__head :is(h1, h2) { font-size: clamp(32px, 8.5vw, 42px) !important; line-height: 0.9 !important; }
.au-card__head :is(h1, h2) span { color: var(--a); }
.au-card__head p { margin-top: 8px !important; font-size: 13px; line-height: 1.5; color: var(--mute); }

.au-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 18px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(6, 10, 16, 0.55);
}
.au-seg button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #b9c6d2;
  transition: background 0.25s, color 0.25s;
}
.au-seg button svg { width: 16px; height: 16px; }
.au-seg button:hover { color: var(--paper); }
.au-seg button.is-on { background: var(--a); color: var(--ink); }

.au-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; }
.au-form .au-seg { margin-top: 2px; }
.au-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.au-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.au-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.au-field__top a { font-size: 12px; font-weight: 700; color: var(--a); }
.au-field__top a:hover { text-decoration: underline; }
.au-field__label { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.au-field__label em { margin-left: 6px; font-style: normal; font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: rgba(132, 150, 168, 0.7); }

.au-box {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 8px 0 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #070d15;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.au-box:focus-within { border-color: var(--a); box-shadow: 0 0 0 4px rgba(39, 183, 230, 0.12); }
.au-box.is-bad { border-color: var(--bad); box-shadow: 0 0 0 4px rgba(255, 107, 122, 0.12); }
.au-box > svg { flex: none; width: 19px; height: 19px; color: var(--mute); transition: color 0.25s; }
.au-box:focus-within > svg { color: var(--a); }
.au-cc {
  position: relative;
  flex: none;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  height: 40px;
  margin: 0 6px 0 -8px;
  padding: 0 8px !important;
  border-radius: 11px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  transition: background 0.2s;
}
.au-cc::after { content: ""; position: absolute; right: -7px; top: 9px; bottom: 9px; width: 1px; background: var(--line); }
.au-cc:hover, .au-cc[aria-expanded="true"] { background: rgba(39, 183, 230, 0.1) !important; }
.au-cc img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.au-cc svg { width: 14px; height: 14px; color: var(--mute); transition: transform 0.25s var(--ease); }
.au-cc[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--a); }

.au-field { position: relative; }
.au-cc-pop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  padding: 8px;
  border: 1px solid rgba(39, 183, 230, 0.35);
  border-radius: 18px;
  background: #0a121c;
  box-shadow: 0 28px 60px -12px rgba(0, 0, 0, 0.9);
  animation: au-pop 0.25s var(--ease);
}
.au-cc-pop__search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #070d15;
  transition: border-color 0.2s;
}
.au-cc-pop__search:focus-within { border-color: var(--a); }
.au-cc-pop__search svg { flex: none; width: 17px; height: 17px; color: var(--mute); }
.au-cc-pop__search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: 16px;
}
.au-cc-pop__search input::placeholder { color: #4d5d6e; }
.au-cc-pop__search input::-webkit-search-cancel-button { filter: invert(1) opacity(0.5); }
.au-cc-pop__list { position: relative; max-height: 264px; margin-top: 6px; overflow-y: auto; overscroll-behavior: contain; }
.au-cc-pop__list li {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.au-cc-pop__list li:hover, .au-cc-pop__list li.is-active { background: rgba(39, 183, 230, 0.1); }
.au-cc-pop__list li[aria-selected="true"] { color: var(--a); }
.au-cc-pop__list li[data-iso="IN"] { margin-bottom: 7px; }
.au-cc-pop__list li[data-iso="IN"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -4px; height: 1px; background: var(--line); }
.au-cc-pop__list img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.au-cc-pop__list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-cc-pop__list b { font-size: 13px; font-weight: 700; color: var(--mute); font-variant-numeric: tabular-nums; }
.au-cc-pop__none { padding: 18px 10px 10px; font-size: 13px; text-align: center; color: var(--mute); }
@keyframes au-pop { from { opacity: 0; transform: translateY(-6px); } }

.au-box input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
}
.au-box input::placeholder { color: #4d5d6e; font-weight: 500; }
.au-box input:focus-visible, .au-cc-pop__search input:focus-visible { outline: none; }
.au-box input:-webkit-autofill {
  -webkit-text-fill-color: var(--paper);
  -webkit-box-shadow: 0 0 0 40px #070d15 inset;
  caret-color: var(--a);
  transition: background-color 9999s;
}
.au-box--ref input { letter-spacing: 0.12em; text-transform: uppercase; }
.au-box--ref input::placeholder { letter-spacing: 0; text-transform: none; }

.au-eye {
  display: grid !important;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px !important;
  color: var(--mute) !important;
  transition: color 0.2s, background 0.2s;
}
.au-eye:hover { color: var(--a) !important; background: rgba(39, 183, 230, 0.08) !important; }
.au-eye svg { width: 19px; height: 19px; }
.au-eye .au-eye__off, .au-eye.is-on .au-eye__on { display: none; }
.au-eye.is-on .au-eye__off { display: block; }

.au-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 2px; }
.au-meter i { height: 4px; border-radius: 2px; background: rgba(238, 244, 248, 0.1); transition: background 0.3s; }
.au-meter[data-s="1"] i:first-child { background: var(--bad); }
.au-meter[data-s="2"] i:nth-child(-n+2) { background: var(--warn); }
.au-meter[data-s="3"] i:nth-child(-n+3) { background: var(--a); }
.au-meter[data-s="4"] i { background: var(--good); }
.au-hint { font-size: 12px; color: var(--mute); }

/* invite code */
.au-ref { display: grid; gap: 12px; }
.au-ref__toggle {
  justify-self: start;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--a) !important;
}
.au-ref__toggle svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.au-ref__toggle[aria-expanded="true"] svg { transform: rotate(45deg); }
.au-ref__chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 12px;
  border: 1px dashed rgba(39, 183, 230, 0.5);
  border-radius: 16px;
  background: rgba(39, 183, 230, 0.07);
}
.au-ref__chip i { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--a); color: var(--ink); }
.au-ref__chip i svg { width: 19px; height: 19px; }
.au-ref__chip span { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--mute); }
.au-ref__chip b { display: block; overflow: hidden; margin-top: 2px; font-size: 15px; font-weight: 800; letter-spacing: 0.12em; color: var(--paper); text-overflow: ellipsis; white-space: nowrap; }
.au-ref__chip button { flex: none; padding: 8px 12px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; color: var(--a) !important; }
.au-ref__chip button:hover { background: rgba(39, 183, 230, 0.12) !important; }

.au-err {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 107, 122, 0.35);
  border-radius: 14px;
  background: rgba(255, 107, 122, 0.08);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: #ffc6cc;
  animation: au-shake 0.4s var(--ease);
}
.au-err svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--bad); }
.au-err a { margin-left: 4px; font-weight: 800; color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
@keyframes au-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

.au-submit {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 58px;
  margin-top: 2px;
  border-radius: 18px !important;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(255, 255, 255, 0.3), transparent 60%),
    linear-gradient(160deg, #5fd4f6, var(--a) 55%, var(--a2)) !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 18px 36px -16px rgba(39, 183, 230, 0.85) !important;
  transition: transform 0.25s var(--ease), filter 0.25s, background 0.3s;
}
.au-submit svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.au-submit:hover svg { transform: translateX(4px); }
.au-submit:active { transform: scale(0.98); }
.au-submit__spin {
  display: none;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(6, 10, 16, 0.25);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: au-spin 0.8s linear infinite;
}
.au-submit.is-busy { pointer-events: none; filter: saturate(0.85) brightness(0.95); }
.au-submit.is-busy .au-submit__spin { display: block; }
.au-submit.is-busy svg { display: none; }
.au-submit.is-done { background: var(--good) !important; }
@keyframes au-spin { to { transform: rotate(360deg); } }

.au-safe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px !important;
  font-size: 12px;
  color: var(--mute);
  text-align: center;
}
.au-safe svg { flex: none; width: 16px; height: 16px; color: var(--good); }
.au-legal { margin-top: 14px !important; font-size: 12px; line-height: 1.55; text-align: center; color: var(--mute); }
.au-legal a { font-weight: 700; color: var(--paper); }
.au-legal a:hover { color: var(--a); }
.au-switch {
  margin-top: 18px !important;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  text-align: center;
  color: var(--mute);
}
.au-switch a { margin-left: 4px; font-weight: 800; color: var(--a); }
.au-switch a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Perks ---------- */
.au-perks { display: grid; gap: 10px; }
.au-perk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--glass);
}
.au-perk i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(39, 183, 230, 0.1); color: var(--a); }
.au-perk i svg { width: 20px; height: 20px; }
.au-perk b { display: block; font-size: 15px; font-weight: 800; }
.au-perk span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--mute); }
@media (min-width: 640px) {
  .au-perks { grid-template-columns: repeat(3, 1fr); }
  .au-perk { grid-template-columns: 1fr; align-content: start; gap: 12px; padding: 16px; }
}

@media (max-width: 640px) {
  .au-lede { display: none; }
}
@media (max-width: 440px) {
  .au-top__alt span { display: none; }
}
@media (max-width: 380px) {
  .au-sky__mult { font-size: 34px; }
}
@media (max-width: 340px) {
  .au-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .au-err, .au-submit__spin, .au-cc-pop { animation: none !important; }
}