/* ========================================================================== 
   HARRY POTTER ONLINE — AUTHENTICATION, PREMIUM PASS

   This sheet is intentionally loaded after the main login/auth effects and
   immediately before login-mobile.css. It refines only the two authentication
   surfaces: the on-page sign-in board and the account-creation letter.
   ========================================================================== */

/* ── Sign in: clearer hierarchy without hiding the castle ─────────────── */
body.luxe .lux-stage{
  width:100%;
  min-width:0;
  max-width:100vw;
}

body.luxe .lux-signin{
  width:min(1060px,calc(100% - 48px));
}

body.luxe .lux-signin-bar{
  display:grid;
  grid-template-columns:auto minmax(190px,1fr) minmax(178px,.92fr) auto auto auto;
  align-items:center;
  gap:clamp(8px,.82vw,13px);
}

body.luxe .lux-signin-title{
  min-height:42px;
  margin-left:clamp(9px,1vw,16px);
}

body.luxe .lux-signin .field{
  width:100%;
  min-height:46px;
  overflow:visible;
  transition:box-shadow .22s ease,filter .22s ease;
}

body.luxe .lux-signin .field:hover{
  filter:brightness(1.06);
}

.lux-field-label{
  position:absolute;
  z-index:2;
  top:6px;
  left:49px;
  pointer-events:none;
  color:rgba(227,198,143,.66);
  font:700 7.5px/1 var(--ff-head,'Cinzel',serif);
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:color .18s ease,transform .18s ease;
}

body.luxe .lux-signin .field:focus-within .lux-field-label{
  color:#f6d994;
  transform:translateY(-1px);
}

body.luxe .lux-signin .field input{
  padding:16px 7px 3px;
  font-size:13px;
  line-height:1.1;
}

body.luxe .lux-signin .field input::placeholder{
  color:rgba(224,210,180,.68);
  font-size:12.5px;
}

body.luxe .lux-signin .f-ic,
body.luxe .lux-signin .f-eye{
  height:28px;
  align-self:center;
}

body.luxe .lux-signin-go .btn-face{
  min-height:44px;
  padding-top:0;
  padding-bottom:0;
}

body.luxe .lux-signin-meta{
  letter-spacing:.015em;
}

body.luxe .lux-signin-meta .link{
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}

/* ── Registration: a framed admission folio ───────────────────────────── */
body.luxe .lux-auth-veil{
  background:
    radial-gradient(70% 74% at 50% 42%,rgba(26,48,86,.30),transparent 70%),
    linear-gradient(180deg,rgba(4,9,22,.70),rgba(2,5,14,.90));
  -webkit-backdrop-filter:blur(7px) saturate(.78);
          backdrop-filter:blur(7px) saturate(.78);
}

body.luxe .lux-auth-card{
  isolation:isolate;
  top:50%;
  width:min(940px,calc(100vw - 56px));
  height:min(680px,calc(100dvh - 64px));
  min-height:560px;
  display:grid;
  grid-template-columns:minmax(290px,.88fr) minmax(470px,1.32fr);
  padding:0;
  border:22px solid transparent;
  border-image:var(--wl-frame) 80 stretch;
  background:
    radial-gradient(80% 76% at 15% 18%,rgba(92,132,192,.15),transparent 62%),
    radial-gradient(58% 54% at 50% 108%,rgba(255,174,82,.14),transparent 68%),
    var(--wl-ground) center/160px 160px repeat,
    #091222;
  background-origin:border-box;
  background-clip:border-box;
  box-shadow:0 34px 90px rgba(1,4,12,.76),0 0 58px rgba(206,150,52,.16);
  color:var(--parch-ink,#3a2b17);
  overflow:visible;
  animation:premiumAuthIn .42s cubic-bezier(.18,.82,.28,1) both;
}

@keyframes premiumAuthIn{
  from{opacity:0;transform:translate(-50%,calc(-50% - 18px)) scale(.975)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* The old single torn sheet becomes the folio's quiet inner foundation. */
body.luxe .lux-auth-card::before{
  inset:0;
  clip-path:none;
  background:
    linear-gradient(90deg,transparent 0 36%,rgba(11,19,34,.34) 36.1%,transparent 36.4%),
    var(--wl-ground) center/160px 160px repeat,
    #0a1322;
  box-shadow:none;
  filter:none;
}

body.luxe .lux-auth-card::after{
  z-index:5;
  inset:3px;
  border-color:rgba(235,203,137,.30);
  box-shadow:inset 0 0 0 1px rgba(5,9,17,.76),0 0 0 1px rgba(255,238,194,.08);
  --cbr:rgba(238,204,132,.58);
  --cbl:34px;
}

body.luxe .lux-auth-card .wl-seal{
  left:50%;
  top:-15px;
  width:78px;
  transform:translate(-50%,-42%);
  z-index:8;
}

body.luxe .lux-auth-x{
  top:14px;
  right:14px;
  z-index:9;
  width:34px;
  height:34px;
  border:1px solid rgba(225,194,129,.58);
  background:linear-gradient(180deg,#f8edcf,#d6ba80);
  color:#4f3512;
  box-shadow:0 5px 16px rgba(2,5,12,.36),inset 0 1px 0 rgba(255,255,255,.82);
}

/* Left page: game promise and a small cast of wizards. */
.lux-auth-story{
  position:relative;
  z-index:2;
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:clamp(42px,4vw,58px) clamp(24px,3vw,38px) 28px;
  overflow:hidden;
  color:#f5e9cc;
  border-right:1px solid rgba(235,202,134,.28);
  box-shadow:inset -1px 0 0 rgba(2,5,12,.72);
  background:
    linear-gradient(180deg,rgba(5,12,26,.14),rgba(4,9,20,.80)),
    radial-gradient(80% 48% at 50% 66%,rgba(173,116,45,.18),transparent 72%);
}

.lux-auth-story::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.34;
  background-image:
    radial-gradient(circle at 16% 11%,#fff4cf 0 1px,transparent 1.7px),
    radial-gradient(circle at 72% 18%,#e5bc66 0 1px,transparent 1.7px),
    radial-gradient(circle at 42% 34%,#fff 0 .8px,transparent 1.5px),
    radial-gradient(circle at 86% 44%,#fff1bf 0 .9px,transparent 1.6px);
  background-size:92px 86px,117px 108px,79px 97px,133px 119px;
}

.auth-story-kicker,
.auth-form-kicker{
  display:block;
  font:700 9px/1.2 var(--ff-head,'Cinzel',serif);
  letter-spacing:.28em;
  text-transform:uppercase;
}

.auth-story-kicker{
  color:#ddb86a;
  text-shadow:0 0 18px rgba(224,166,66,.30);
}

.lux-auth-story h2{
  margin:13px 0 11px;
  max-width:12ch;
  color:#fff4d8;
  font:700 clamp(25px,2.15vw,34px)/1.05 var(--ff-head,'Cinzel',serif);
  letter-spacing:.025em;
  text-wrap:balance;
  text-shadow:0 3px 18px rgba(1,4,12,.82),0 0 28px rgba(216,160,60,.16);
}

.lux-auth-story > p{
  margin:0;
  max-width:34ch;
  color:rgba(219,230,246,.78);
  font:400 14px/1.52 var(--ff-body,'EB Garamond',serif);
  text-wrap:pretty;
}

.auth-cast{
  position:relative;
  flex:1 1 auto;
  min-height:230px;
  margin:16px -4px 8px;
}

.auth-cast::after{
  content:'';
  position:absolute;
  z-index:0;
  left:4%;
  right:4%;
  bottom:2px;
  height:34px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(228,171,71,.30),rgba(6,11,22,.50) 58%,transparent 72%);
  filter:blur(6px);
}

.auth-cast-card{
  position:absolute;
  z-index:1;
  bottom:12px;
  width:42%;
  aspect-ratio:3/4;
  overflow:hidden;
  border:3px solid #a77d31;
  border-radius:54% 54% 9px 9px/20% 20% 9px 9px;
  background:linear-gradient(180deg,#172944,#070e1d);
  box-shadow:
    0 0 0 1px rgba(255,235,185,.72),
    0 0 0 4px rgba(41,27,9,.92),
    0 18px 28px rgba(1,4,11,.68),
    0 0 24px rgba(214,158,64,.14);
  transform-origin:50% 100%;
}

.auth-cast-card::after{
  content:'✦';
  position:absolute;
  left:50%;
  bottom:5px;
  transform:translateX(-50%);
  color:#f3d797;
  font-size:10px;
  text-shadow:0 0 8px #d8a543;
}

.auth-cast-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:50% 10%;
  filter:saturate(.92) contrast(1.04);
}

.auth-cast-l{left:0;transform:rotate(-8deg) scale(.91)}
.auth-cast-c{left:29%;z-index:3;transform:translateY(-8px)}
.auth-cast-r{right:0;transform:rotate(8deg) scale(.91)}

.auth-story-perks{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
}

.auth-story-perks span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border:1px solid rgba(220,184,111,.24);
  border-radius:999px;
  background:rgba(4,10,22,.58);
  color:rgba(239,229,206,.78);
  font:600 9px/1 var(--ff-head,'Cinzel',serif);
  letter-spacing:.05em;
  white-space:nowrap;
}

.auth-story-perks b{color:#e7c477;font-size:8px}

/* Right page: a warm, legible application form. */
body.luxe .lux-auth-card .lux-view-register{
  position:relative;
  z-index:2;
  min-width:0;
  height:100%;
  max-height:none;
  padding:clamp(38px,3.7vw,52px) clamp(30px,3.8vw,50px) 26px;
  overflow-y:auto;
  overflow-x:hidden;
  box-sizing:border-box;
  background:
    linear-gradient(180deg,transparent 38%,rgba(120,88,44,.10) 38.25%,rgba(255,255,255,.22) 38.6%,transparent 39%),
    radial-gradient(25% 14% at 12% 24%,rgba(146,104,50,.14),transparent 72%),
    radial-gradient(22% 12% at 88% 78%,rgba(146,104,50,.16),transparent 72%),
    radial-gradient(120% 98% at 50% 50%,transparent 48%,rgba(115,80,37,.34) 100%),
    linear-gradient(152deg,#fff8e8 0%,#f0dfbc 48%,#d6bd8f 100%);
  box-shadow:inset 1px 0 0 rgba(255,252,240,.58),inset 18px 0 34px rgba(85,55,19,.10);
  scrollbar-width:thin;
  scrollbar-color:rgba(109,76,21,.45) transparent;
}

.auth-form-kicker{
  margin-bottom:8px;
  color:#755219;
  text-align:center;
}

.auth-form-kicker i{
  display:inline-block;
  margin-left:7px;
  padding:3px 7px 2px;
  border-radius:999px;
  background:#7b1720;
  color:#fff0cf;
  font-style:normal;
  font-size:8px;
  letter-spacing:.16em;
  box-shadow:inset 0 1px 0 rgba(255,228,177,.24),0 2px 8px rgba(91,15,22,.24);
}

body.luxe .lux-auth-card .panel-title{
  font-size:clamp(23px,2vw,31px);
  letter-spacing:.11em;
  line-height:1.04;
}

body.luxe .lux-auth-card .panel-sub{
  margin-top:6px;
  margin-bottom:16px;
  padding-bottom:13px;
  font-size:14px;
}

.auth-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:14px;
  row-gap:3px;
}

.auth-control{
  min-width:0;
}

.auth-control-label{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin:0 2px 6px;
  color:#503713;
  font:700 9.5px/1 var(--ff-head,'Cinzel',serif);
  letter-spacing:.12em;
  text-transform:uppercase;
}

.auth-control-label small{
  color:rgba(91,65,31,.60);
  font:500 9px/1 var(--ff-body,'EB Garamond',serif);
  letter-spacing:.02em;
  text-transform:none;
  white-space:nowrap;
}

body.luxe .lux-auth-card .auth-control .field{
  min-height:46px;
  margin-bottom:calc(5px + var(--au-err-h));
  border-color:rgba(90,62,27,.45);
  background:linear-gradient(180deg,rgba(255,254,248,.82),rgba(231,213,177,.36));
}

body.luxe .lux-auth-card .auth-control .field:hover{
  border-color:rgba(132,92,32,.72);
}

body.luxe .lux-auth-card .auth-control .field input{
  padding:10px 9px;
  font-size:14px;
}

body.luxe .lux-auth-card .auth-control .field input::placeholder{
  color:rgba(84,60,28,.46);
}

body.luxe .lux-auth-card .auth-control .meter{
  height:4px;
  margin:-12px 2px 10px;
  gap:4px;
}

body.luxe .lux-auth-card .check-terms{
  margin:7px 0 12px;
  padding:8px 10px;
  border:1px solid rgba(103,73,35,.20);
  border-radius:4px;
  background:rgba(255,253,245,.26);
  font-size:12px;
}

body.luxe .lux-auth-card .btn-red{
  filter:drop-shadow(0 5px 9px rgba(78,37,16,.38));
}

body.luxe .lux-auth-card .btn-red .btn-face{
  min-height:48px;
  padding-top:0;
  padding-bottom:0;
  font-size:12.5px;
  letter-spacing:.17em;
}

body.luxe .lux-auth-card .form-msg,
body.luxe .lux-auth-card .form-msg:empty{
  min-height:16px;
  margin-top:5px;
  line-height:16px;
}

body.luxe .lux-auth-card .or{
  margin:8px 0 7px;
}

body.luxe .lux-auth-card .socials{
  gap:14px;
}

body.luxe .lux-auth-card .socials .soc{
  --sz:36px;
}

.auth-signin-prompt{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:11px;
  color:#5c4327;
  font-size:12.5px;
}

body.luxe .lux-auth-card .auth-signin-prompt .link{
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ── Responsive authentication surfaces ──────────────────────────────── */
@media (max-width:1180px){
  body.luxe .lux-signin-bar{
    grid-template-columns:auto minmax(180px,1fr) minmax(170px,.9fr) auto;
  }
}

@media (max-width:900px){
  body.luxe .lux-signin{
    width:100%;
  }

  body.luxe .lux-signin-bar{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 10px;
  }

  body.luxe .lux-signin-title{
    grid-column:1/-1;
    min-height:20px;
    justify-content:center;
    margin:0;
    padding:0 0 4px;
    border:0;
  }

  body.luxe .lux-signin-go{
    grid-column:1/-1;
    width:100%;
  }
}

@media (max-width:860px){
  body.luxe .lux-auth-card{
    left:12px;
    right:12px;
    width:auto;
    height:min(760px,calc(100dvh - 24px));
    min-height:0;
    grid-template-columns:minmax(0,1fr);
    border-width:15px;
    animation:premiumAuthMobile .38s cubic-bezier(.18,.82,.28,1) both;
  }

  .lux-auth-story{display:none}

  body.luxe .lux-auth-card .lux-view-register{
    width:100%;
    max-width:100%;
    padding:clamp(31px,6vw,46px) clamp(21px,6vw,38px) 20px;
  }

  body.luxe .lux-auth-card .form,
  body.luxe .lux-auth-card .auth-form-grid,
  body.luxe .lux-auth-card .auth-control,
  body.luxe .lux-auth-card .field{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  body.luxe .lux-auth-card .wl-seal{
    top:-8px;
    width:68px;
  }
}

@keyframes premiumAuthMobile{
  from{opacity:0;transform:translateY(calc(-50% - 14px)) scale(.982)}
  to{opacity:1;transform:translateY(-50%) scale(1)}
}

@media (max-width:520px){
  body.luxe .topbar .lux-loginbtn{display:none}

  body.luxe .lux-hp{
    max-width:100%;
    gap:6px;
    padding:0 2px;
    font-size:7.5px;
    letter-spacing:.15em;
    white-space:normal;
    text-wrap:balance;
  }

  body.luxe .lux-hp::before,
  body.luxe .lux-hp::after{
    width:12px;
  }

  body.luxe .lux-signin{
    width:calc(100% - 18px);
    max-width:calc(100vw - 46px);
    margin-bottom:clamp(16px,2.5vh,24px);
  }

  body.luxe .lux-signin-bar{
    gap:7px;
  }

  body.luxe .lux-signin .field{
    min-height:42px;
  }

  .lux-field-label{
    top:5px;
    left:43px;
    font-size:6.8px;
    letter-spacing:.13em;
  }

  body.luxe .lux-signin .field input{
    padding:14px 3px 2px;
    font-size:11.5px;
  }

  body.luxe .lux-signin .field input::placeholder{
    font-size:11px;
  }

  body.luxe .lux-signin .f-ic,
  body.luxe .lux-signin .f-eye{
    width:31px;
    font-size:13px;
  }

  body.luxe .lux-signin-go .btn-face{
    min-height:39px;
  }

  body.luxe .lux-signin-meta{
    gap:2px 9px;
    font-size:9.7px;
  }

  body.luxe .lux-signin-meta > i{display:none}

  body.luxe .lux-auth-card{
    left:7px;
    right:7px;
    width:auto;
    height:min(760px,calc(100dvh - 14px));
    border-width:11px;
  }

  body.luxe .lux-auth-x{
    top:9px;
    right:9px;
    width:32px;
    height:32px;
  }

  body.luxe .lux-auth-card .lux-view-register{
    padding:28px 15px 16px;
  }

  body.luxe .lux-auth-card .panel-title{
    padding:0 28px;
    max-width:100%;
    font-size:18px;
    line-height:1.12;
    letter-spacing:.075em;
    white-space:normal;
    overflow-wrap:normal;
    text-wrap:balance;
  }

  body.luxe .lux-auth-card .panel-sub{
    margin-bottom:12px;
  }

  .auth-form-grid{
    grid-template-columns:minmax(0,1fr);
    row-gap:0;
  }

  .auth-control-label{
    margin-bottom:5px;
  }

  body.luxe .lux-auth-card .auth-control .field{
    min-height:42px;
    margin-bottom:calc(4px + var(--au-err-h));
  }

  body.luxe .lux-auth-card .auth-control .field input{
    padding:8px;
    font-size:13px;
  }

  body.luxe .lux-auth-card .check-terms{
    margin-top:5px;
    padding:6px 7px;
    font-size:11.5px;
  }

  body.luxe .lux-auth-card .btn-red .btn-face{
    min-height:43px;
  }

  body.luxe .lux-auth-card .or{
    margin:6px 0;
  }

  .auth-signin-prompt{
    margin-top:8px;
  }
}

@media (max-width:360px){
  body.luxe .lux-signin-bar{
    grid-template-columns:minmax(0,1fr);
  }

  body.luxe .lux-signin-title,
  body.luxe .lux-signin-go{
    grid-column:1;
  }

  body.luxe .lux-auth-card .panel-title{
    font-size:18px;
  }

  .auth-control-label small{display:none}
}

@media (max-height:650px){
  body.luxe .lux-auth-card{
    height:calc(100dvh - 18px);
    min-height:0;
  }

  .lux-auth-story{
    padding-top:34px;
    padding-bottom:18px;
  }

  .auth-cast{min-height:180px}
}

@media (prefers-reduced-motion:reduce){
  body.luxe .lux-auth-card{animation:none;transform:translate(-50%,-50%)}
}

@media (max-width:860px) and (prefers-reduced-motion:reduce){
  body.luxe .lux-auth-card{transform:translateY(-50%)}
}