/* =========================
   GLOBAL
   ========================= */
html, body{
  margin: 0;
  min-height: 100%;
  background: #0b1220;
  color: #fff;
  font-family: BagueSans, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================
   MAIN MODAL CARD (ONLY)
   ========================= */
div.ec0gssd0.css-3ckydh.efk7upz15{
  background: rgb(33, 39, 54) !important;
  color: #fff !important;

  width: 100% !important;
  max-width: 424px !important;

  box-sizing: border-box !important;
  padding: 20px 24px !important;

  text-align: center !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35) !important;

  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;

  overflow: visible !important;
}

/* =========================
   TOP "NEW HERE?"
   ========================= */
p[data-testid="assisted-login-page--account-creation-text"]{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;

  font-size: 13px !important;
  line-height: 22px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.92) !important;

  margin: 14px 0 12px !important;
}

p[data-testid="assisted-login-page--account-creation-text"]
button[data-testid="continue-with-account-creation"]{
  appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;

  font: inherit !important;
  font-weight: 600 !important;
  color: rgb(57,172,255) !important;
  cursor: pointer !important;
}

p[data-testid="assisted-login-page--account-creation-text"]
button[data-testid="continue-with-account-creation"]:hover{
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* =========================
   REMOVE DIVIDER
   ========================= */
div[data-testid="we"]{
  display: none !important;
}

/* =========================
   HERO TITLE (SLIGHTLY SMALLER)
   ========================= */
h1#page-heading[data-testid="BoxFlowM"],
h1#page-heading[data-testid="BoxFlowM"].css-75hhb8.efk7upz22{
  font-family: "PF Bague Sans Pro", BagueSans, Helvetica, Arial, sans-serif !important;

  width: 100% !important;
  max-width: none !important;
  height: auto !important;

  margin: 22px auto 12px !important;
  padding: 0 !important;

  text-align: center !important;
  font-weight: 300 !important;
  letter-spacing: normal !important;

  word-break: keep-all !important;
  overflow-wrap: normal !important;
  overflow: visible !important;
}

/* =========================
   SUBTITLE
   ========================= */
p[data-testid="le"]{
  font-size: 16px !important;
  line-height: 22px !important;
  color: rgba(255,255,255,.85) !important;

  margin: 0 0 22px !important;
  text-align: center !important;
}

/* =========================
   INPUTS
   ========================= */
input{
  font-size: 16px !important;
}

input::placeholder{
  color: rgba(255,255,255,.6) !important;
}

/* =========================
   CONTINUE BUTTON
   ========================= */
button[type="submit"]{
  width: 100% !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}

/* ==========================================================
   RUNESCAPE INFO PANEL
   ========================================================== */
div[data-testid="Jt"]{
  width: 100% !important;
  box-sizing: border-box !important;

  background: rgba(255,255,255,.06) !important;
  border-radius: 14px !important;

  padding: 18px 16px !important;
  margin-top: 18px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;

  position: static !important;
  transform: none !important;
  box-shadow: none !important;
}

div[data-testid="Jt"] h5[data-testid="Pt"]{
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.92) !important;
}

div[data-testid="Jt"] p[data-testid="le"]{
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 22px !important;
  color: rgba(255,255,255,.82) !important;
}

div[data-testid="Jt"] button[data-testid="find-out-more"]{
  appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 4px !important;

  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 500 !important;
  color: rgb(57,172,255) !important;
  cursor: pointer !important;
}

div[data-testid="Jt"] button[data-testid="find-out-more"]:hover{
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 480px){
  div.ec0gssd0.css-3ckydh.efk7upz15{
    max-width: calc(100vw - 32px) !important;
    padding: 20px 16px !important;
  }

  /* Mobile stays perfect */
  h1#page-heading[data-testid="BoxFlowM"]{
    font-size: 30px !important;   /* slightly smaller */
    line-height: 38px !important;
    max-width: 17ch !important;
    white-space: normal !important;
  }
}

/* =========================
   DESKTOP
   ========================= */
@media (min-width: 481px){
  div.ec0gssd0.css-3ckydh.efk7upz15{
    max-width: 480px !important;
    padding: 28px 32px !important;
    border-radius: 16px !important;
  }

  /* Desktop: one line, slightly smaller */
  h1#page-heading[data-testid="BoxFlowM"]{
    white-space: nowrap !important;
    font-size: clamp(28px, 2.2vw, 34px) !important;
    line-height: 42px !important;
  }

  p[data-testid="le"]{
    margin-bottom: 24px !important;
  }

  div[data-testid="Jt"]{
    padding: 20px 18px !important;
    gap: 10px !important;
  }
}