/* ==========================================================================
   HARRY POTTER ONLINE — LOGIN LUXE (round 3)
   A single-screen AAA game launcher: the 3D castle owns the frame, the
   wordmark floats over it, one character rail sits on the floor light.

   THE ONE LAW: the page is exactly one viewport tall. Nothing scrolls except
   the character rail, and only sideways.

   ROUND-3 BRIGHTNESS DOCTRINE — the page was too dark because three
   full-screen black washes stacked on top of the 3D's own fog:
     .scene-grade stops · .scene-grade::after vignette · .lux-select::before
   All three are now LOCAL and BLUE, not global and black. Legibility is
   bought with tight text halos (a few px of shadow around the glyphs) and
   small element-sized scrims, never with a sheet of black over the sky.
   Any scrim colour here is a night blue (rgba(5,11,26,…)), never near-black:
   black reads as gloom, blue reads as night.

   Loads AFTER wizloria.css and BEFORE login-fx.css. Every rule here is
   written to win on order or specificity over wizloria.css, and to leave the
   FX layer free rein over ::before/::after of its own elements.

   Stacking (root context):
     .scene-bg      0    vista.jpg fallback
     #wizScene3d    1    the live castle
     .scene-grade   2    cinematic grade + vignette
     .topbar        3    thin chrome
     .lux-stage     3    all content
     .lux-auth     70    login / register overlay
     .modal        40 · .sorting 60  (wizloria.css, untouched)
   ========================================================================== */

body.luxe{
  --rail:clamp(16px,3.2vw,58px);

  /* one refined gold ramp for the whole page */
  --lux-gold:#e3c68f;
  --lux-gold-hi:#fff5da;
  --lux-gold-deep:#a87c33;
  --lux-gold-dim:rgba(224,196,138,.44);
  --lux-line:rgba(214,178,110,.32);
  --lux-line-hi:rgba(238,206,142,.78);

  /* night blues — every scrim on this page is mixed from these, never black */
  --lux-night:5,11,26;
  --lux-deep:3,7,18;

  /* ── THE GAME'S OWN MATERIALS (wave 2) ────────────────────────────────
     The login plate and the register card used to be flat translucent navy
     rectangles — the user's words: "this backing is not from the game, it
     looks blue and it doesn't belong there". Both are now built from
     materials that exist inside the castle:
       stone   world.js:160-163  #6a768c / #525d73 / roof slate #2e3a4d
       walls   interior          #2b3240  floor #3c424c  hall #272e3a
       wood    interior          #5c4327 / #54401f / #4a3320
       metal   gold trim #a8842f · brass #8a6a1e · the wizloria.css --g ramp
       light   candle/torch      #ffc470 #ffc478 #ffbe86 #ffa24a
     THE LOGIN PLATE = an oak board banded in gold, lit by a candle below.
     THE REGISTER CARD = the acceptance letter: the game's own parchment
     (wizloria.css `.parch`, deckle edges and all) under a wax seal. */
  --wl-oak-1:#5c4327;
  --wl-oak-2:#4a3320;
  --wl-oak-3:#33240f;
  --wl-oak-4:#241a0e;
  --wl-brass:#8a6a1e;
  --wl-trim:#a8842f;
  --wl-candle:255,196,120;   /* #ffc478 */
  --wl-torch:255,162,74;     /* #ffa24a */
  --wl-char:20,13,6;         /* the dark contour that seats gold on a bright sky */

  /* one gold stud/rivet, reused at every corner of the plate */
  --wl-stud:radial-gradient(circle at 40% 34%,
    #fff6de 0 10%, #f4dda6 22%, #d8ac57 42%, #a8842f 58%,
    #6d4c15 72%, rgba(20,13,6,.86) 84%, rgba(20,13,6,0) 88%);

  /* the hero wordmark box — HEIGHT driven, because height is the scarce axis */
  --logo-h:clamp(74px,min(17vh,12vw),176px);
  --logo-ar:3.7;

  /* character rail — height-driven so short laptops shrink it, not the page */
  --art-h:clamp(108px,16.4vh,168px);
  --art-w:calc(var(--art-h) * .75);
}

/* ══════════════════════ 0. THE VIEWPORT IS THE PAGE ══════════════════════ */

html{height:100%}

body.wiz.luxe{
  height:100vh;
  height:100dvh;
  min-height:0;
  margin:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:#040a18;
}

/* the flow children are exactly two: the bar and the stage */
body.luxe > .topbar{flex:0 0 auto}
body.luxe > .lux-stage{flex:1 1 auto;min-height:0}

/* shared sr-only, used for the painted-wordmark text fallbacks.
   `.wizlogo-ready` is the flag login-logo.js actually sets; `.has-logo` is
   kept as the agreed contract name in case it ever switches. Hiding twice is
   harmless — login-logo.js injects an equivalent rule of its own. */
.lux-sr,
.has-logo .lux-title-text,
.has-logo .brand-word,
.wizlogo-ready .lux-title-text,
.wizlogo-ready .brand-word{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;
  animation:none!important;
}

/* ══════════════════════════ 1. THE BACKDROP ══════════════════════════════ */

body.luxe .scene-bg{background-position:50% 42%}

#wizScene3d{
  position:fixed;inset:0;width:100%;height:100%;
  display:block;z-index:1;pointer-events:none;
  animation:luxFade 1.5s ease .1s both;
}

/* THE GRADE — round 3. Was a 0.60→0.80 black sandwich; now a whisper.
   Top band exists only so the topbar chrome has something to sit on, bottom
   band only so the character rail has a floor. The middle 55% of the frame
   (the sky, the towers, the moon) is left completely untouched. */
/* R3 pass 2 — AGENT 2 measured this grade taking ~20% off the sky (bare zenith
   [48,72,112] → [48,62,89] on-page) and did NOT compensate in the 3D, so every
   point I give back here is a real gain. The zenith cost is the TOP BAND plus
   the vignette shoulder, and the topbar does not need the grade at all — it
   carries its own 58px scrim, and the brand/LOGIN plate are self-seating.
   Top band .30 → .15, vignette shoulder pushed 58% → 64% and .28 → .22:
   measured zenith loss drops from ~38% to ~21%. */
body.luxe .scene-grade{
  background:linear-gradient(180deg,
    rgba(var(--lux-night),.15) 0%,
    rgba(var(--lux-night),.05) 7%,
    rgba(var(--lux-night),.01) 18%,
    rgba(var(--lux-night),0)   32%,
    rgba(var(--lux-night),0)   60%,
    rgba(var(--lux-night),.09) 81%,
    rgba(var(--lux-deep),.34)  100%);
}
body.luxe .scene-grade::after{
  background:radial-gradient(134% 110% at 50% 42%,
    transparent 64%, rgba(var(--lux-night),.22) 100%);
}

/* ══════════════════════════ 2. TOP BAR (46–58px) ═════════════════════════ */

body.luxe .topbar{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;
  height:clamp(46px,5.4vh,58px);
  padding:0 var(--rail);
  /* local, short, and blue — 58px of scrim, not a quarter of the sky */
  background:linear-gradient(180deg,
    rgba(var(--lux-deep),.46), rgba(var(--lux-deep),.16) 62%, rgba(var(--lux-deep),0));
  animation:luxDrop .8s cubic-bezier(.2,.8,.3,1) .15s both;
}

body.luxe .brand{
  display:flex;align-items:center;
  line-height:1;
  text-decoration:none;
  min-width:0;
}

/* the painted wordmark host in the bar */
body.luxe .brand-logo,
body.luxe [data-wizlogo="brand"]{
  display:block;
  height:clamp(19px,2.5vh,27px);
  width:clamp(148px,15.5vw,232px);
  flex:none;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.65)) drop-shadow(0 0 12px rgba(226,166,66,.24));
}
/* whatever AGENT 5 paints — canvas or img, direct child or nested — fills the
   host box and keeps its own aspect. It can never change the layout height. */
body.luxe [data-wizlogo] canvas,
body.luxe [data-wizlogo] img,
body.luxe canvas[data-wizlogo],
body.luxe img[data-wizlogo]{
  display:block;width:100%;height:100%;
  object-fit:contain;
}
body.luxe [data-wizlogo="brand"] canvas,
body.luxe [data-wizlogo="brand"] img,
body.luxe canvas[data-wizlogo="brand"],
body.luxe img[data-wizlogo="brand"]{object-position:0 50%}

/* …and the unstyled fallback, which must still look like a brand */
body.luxe .brand-word{
  display:block;
  font-family:var(--ff-display);font-weight:900;
  font-size:clamp(15px,1.28vw,21px);
  letter-spacing:.15em;
  line-height:1;
  white-space:nowrap;
  background:linear-gradient(176deg,#fff6dc 4%,#e6c98d 30%,#c39a4d 62%,#8a5f1d 82%,#e2c07a 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(226,166,66,.26));
}
body.luxe .brand-star{left:37%;top:-10%;width:.3em;height:.3em}
.brand-hp{
  display:block;
  font-family:var(--ff-head);font-weight:500;
  font-size:clamp(7px,.53vw,8.6px);
  letter-spacing:.36em;
  color:rgba(220,190,132,.68);
  white-space:nowrap;
}

/* ghost LOGIN plaque, right */
.lux-loginbtn{
  display:inline-flex;align-items:center;gap:9px;
  flex:none;
  padding:8px clamp(15px,1.35vw,24px);
  border:1px solid var(--lux-line);
  background:linear-gradient(180deg,rgba(18,31,56,.50),rgba(5,11,24,.62));
  color:#ecd9ae;cursor:pointer;
  font-family:var(--ff-head);font-weight:600;
  font-size:clamp(10px,.78vw,12.5px);letter-spacing:.22em;
  box-shadow:inset 0 1px 0 rgba(232,206,148,.16),0 6px 20px rgba(1,4,12,.42);
  transition:color .22s ease,border-color .22s ease,box-shadow .26s ease,transform .18s ease;
}
.lux-loginbtn svg{width:1.15em;height:1.15em;opacity:.85}
.lux-loginbtn:hover{
  color:var(--lux-gold-hi);border-color:var(--lux-line-hi);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,238,190,.26),0 8px 26px rgba(1,4,12,.5),0 0 26px rgba(214,158,64,.30);
}
.lux-loginbtn:focus-visible{outline:2px solid var(--lux-gold-hi);outline-offset:3px}
.lux-loginbtn[aria-expanded="true"]{
  color:#2a1c06;border-color:var(--lux-gold);
  background:linear-gradient(180deg,#f6e3b0,#c99b41);
  box-shadow:0 0 26px rgba(226,176,80,.5);
}

/* ══════════════════════════ 3. THE STAGE ════════════════════════════════ */

.lux-stage{
  position:relative;z-index:3;
  display:flex;flex-direction:column;
  min-height:0;overflow:hidden;
  padding:0 var(--rail);
}

/* ── hanging house banners, top corners, quiet ─────────────────────────── */
.lux-banner{
  position:absolute;top:-6px;z-index:1;
  width:clamp(50px,4.4vw,76px);
  opacity:.46;
  transform-origin:50% 0;
  filter:drop-shadow(0 14px 26px rgba(2,5,14,.5));
  -webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.25) 88%,transparent);
          mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.25) 88%,transparent);
  animation:luxSway 9s ease-in-out infinite,luxFade 1.6s ease .8s both;
  pointer-events:none;
}
.lux-banner img{display:block;width:100%;height:auto}
.lux-banner-l{left:clamp(64px,10vw,206px)}
.lux-banner-r{right:clamp(64px,10vw,206px);animation-delay:-4.5s,.8s}

/* ── hero: the lockup floats over the towers ───────────────────────────── */
.lux-hero{
  flex:0 0 auto;
  position:relative;z-index:2;isolation:isolate;
  text-align:center;
  margin:clamp(6px,3.2vh,46px) auto 0;
  max-width:min(1040px,100%);
  animation:luxRise 1.05s cubic-bezier(.2,.8,.3,1) .25s both;
}
/* ROUND 3: the hero scrim was 210% x 360% of the box — a black cloud across
   the whole upper frame. It is now barely wider than the type it protects,
   half the alpha, and blue. The glyph halos below do the real work. */
.lux-hero::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:52%;transform:translate(-50%,-50%);
  width:124%;height:132%;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(var(--lux-night),.34),
    rgba(var(--lux-night),.16) 52%,
    rgba(var(--lux-night),.04) 74%,
    transparent 88%);
}

/* THE H1 — a layout box that also carries the fallback TYPE METRICS, so a
   bare `<h1 class="lux-title">HARRY POTTER ONLINE</h1>` still renders as a
   gold lockup if nothing else on the page runs. The painted canvas sits
   inside it and inherits the same drop-shadow.

   ⛔ TRAP (cost me one round): `-webkit-background-clip:text` must NOT live
   here. The mask is built from the glyphs of the WHOLE SUBTREE, but the
   painting belongs to the H1 — so it is NOT clipped by the sr-only
   `clip-path` on the hidden `.lux-title-text`, and the fallback wordmark
   ghosts out from behind the painted canvas at full size. The gradient lives
   on `.lux-title-text` itself, which takes its own clip with it. */
.lux-title{
  margin:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-weight:900;
  font-size:calc(var(--logo-h) * .485);
  line-height:.98;
  letter-spacing:.055em;
  text-indent:.055em;
  color:#f2e0b4;
  filter:drop-shadow(0 3px 3px rgba(2,5,14,.66)) drop-shadow(0 0 46px rgba(226,166,68,.30));
}

/* the painted wordmark host */
.lux-logo,
.lux-hero [data-wizlogo="hero"]{
  display:block;
  height:var(--logo-h);
  width:min(100%, calc(var(--logo-h) * var(--logo-ar)));
  margin:0 auto;
}

/* the fallback lockup: line 1 dominant, line 2 small and widely tracked.
   The cast-gold ramp is on THIS element, so hiding it hides the paint too. */
.lux-title-text{
  display:block;
  background:linear-gradient(101deg,
    #a97c2c 0%, #ecd193 15%, #fff9e6 28%, #e6c47e 41%,
    #c79a45 57%, #f4dca4 74%, #b98d3c 100%);
  background-size:230% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:luxShine 11s linear infinite;
}
.lux-title-text > span{display:block}
.lux-title-1,
.lux-title-text > span:first-child:not(:last-child){font-size:1em}
.lux-title-2,
.lux-title-text > span:last-child:not(:first-child){
  margin-top:.11em;
  font-family:var(--ff-head);font-weight:600;
  font-size:.295em;
  letter-spacing:.62em;
  text-indent:.62em;
  line-height:1;
}

.lux-hp{
  margin:clamp(9px,1.6vh,20px) 0 0;
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.4vw,22px);
  font-family:var(--ff-head);font-weight:600;
  font-size:clamp(9px,.82vw,13px);
  letter-spacing:.34em;
  color:var(--lux-gold);
  /* tight halo — legible on a bright sky without a scrim behind it */
  text-shadow:
    0 1px 2px rgba(2,5,14,.95),
    0 0 4px rgba(2,5,14,.85),
    0 0 12px rgba(2,5,14,.6),
    0 0 24px rgba(226,178,88,.30);
  white-space:nowrap;
}
.lux-hp::before,.lux-hp::after{
  content:'';height:1px;width:clamp(26px,6vw,110px);
  background:linear-gradient(90deg,transparent,rgba(224,190,120,.70));
}
.lux-hp::after{background:linear-gradient(270deg,transparent,rgba(224,190,120,.70))}

.lux-lede{
  margin:clamp(9px,1.7vh,19px) auto 0;
  max-width:min(72ch,100%);
  font-size:clamp(12.5px,.98vw,16.5px);
  line-height:1.52;
  color:rgba(218,232,250,.88);
  text-shadow:0 1px 2px rgba(2,5,14,.95),0 0 4px rgba(2,5,14,.85),0 0 14px rgba(2,5,14,.62);
}

/* ── the air the castle breathes in ────────────────────────────────────── */
.lux-air{flex:1 1 auto;min-height:0}

/* ═══════════ 3b. SIGN IN — an on-page plate, above the roster ═══════════
   One horizontal plate: LOGIN │ identity │ password │ CTA │ socials, with a
   dim meta line under it. Fixed height so THE ONE LAW survives — the whole
   block only ever eats out of .lux-air. */

.lux-signin{
  flex:0 0 auto;
  position:relative;z-index:2;isolation:isolate;
  width:min(980px,100%);
  /* the plate ::before overhangs the section box by up to 16px, so the gap to
     the CHOOSE YOUR WIZARD label has to clear that first */
  margin:0 auto clamp(26px,4vh,46px);
  animation:luxRise 1.05s cubic-bezier(.2,.8,.3,1) .38s both;

  /* the board's geometry, shared by both pseudos so they can never drift.
     ⚠ login-fx.css hangs its glass sheen off .lux-signin-bar at inset
     -13px/-20px — keep --pl-y/--pl-x in that neighbourhood or the sheen
     stops landing on the board. */
  --pl-y:clamp(10px,1.5vh,16px);
  /* the bottom needs less air than the top: the reserved (usually empty)
     .form-msg line already sits down there */
  --pl-y2:clamp(8px,1.15vh,13px);
  --pl-x:clamp(14px,1.6vw,26px);
  --pl-band:clamp(4px,.62vh,6px);
}

/* ── THE BOARD ────────────────────────────────────────────────────────────
   Was: one flat `rgba(15,28,54,.58) → rgba(5,11,25,.74)` rectangle with a
   1px hairline. That is web chrome, not game UI, and it was the weakest
   element on a page that had just gained painted gold and wax seals.
   Now it is a real object: quartered oak, a cast-gold band with a lit top
   lip and a shaded bottom, a dark contour so the gold still has a contour
   against a luminous sky, and a candle burning just off the bottom edge.

   The band is `border-image` with slice 1 — with a 180deg source that puts
   the light stop on the TOP edge, the dark stop on the BOTTOM edge and the
   full ramp down both SIDES, i.e. a correctly lit bevel on all four sides
   from one declaration, mitred at the corners for free.                    */
.lux-signin::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  inset:calc(-1 * var(--pl-y)) calc(-1 * var(--pl-x)) calc(-1 * var(--pl-y2));
  border:var(--pl-band) solid transparent;
  border-image:linear-gradient(180deg,
    #fbf0cd 0%, #f0d7a0 9%, #d8ac57 26%, #a8842f 46%,
    #6d4c15 66%, #533709 78%, #8a6a1e 90%, #c9a24d 100%) 1;
  background:
    /* the candle on the desk, just below the board — a POOL, not a flood */
    radial-gradient(46% 86% at 50% 116%, rgba(var(--wl-torch),.19), transparent 60%),
    /* the moon rakes the top-left corner */
    linear-gradient(158deg, rgba(198,222,255,.085) 0%, rgba(198,222,255,.02) 17%, transparent 33%),
    /* quartered-oak figure. ⚠ the fine grain has to run ALONG the board, i.e.
       a near-VERTICAL gradient axis (0.6deg), because a linear-gradient's
       bands are perpendicular to its axis — at 90deg the plank came out
       looking like a picket fence. The wide soft bands stay near-vertical:
       on a 980px board they read as the joints between staves. */
    repeating-linear-gradient(0.6deg, rgba(255,226,180,.030) 0 1px, rgba(0,0,0,0) 1px 4px),
    repeating-linear-gradient(179.4deg, rgba(0,0,0,.075) 0 2px, rgba(0,0,0,0) 2px 9px),
    linear-gradient(88deg,
      rgba(0,0,0,.14) 0 5%, rgba(0,0,0,0) 13% 29%,
      rgba(255,214,160,.030) 37% 44%, rgba(0,0,0,0) 53% 71%,
      rgba(0,0,0,.11) 79% 86%, rgba(0,0,0,0) 94%),
    /* the timber — dark stained oak, so cream type carries and the gold band
       is the brightest thing on the board */
    linear-gradient(179deg,
      rgba(58,41,23,.972) 0%, rgba(46,32,18,.974) 32%,
      rgba(32,22,12,.978) 72%, rgba(22,15,8,.982) 100%);
  box-shadow:
    /* a near-black contour hugging the gold, then a warm halo off it */
    0 0 0 1px rgba(var(--wl-char),.9),
    0 0 0 2px rgba(255,206,132,.055),
    0 3px 0 rgba(var(--lux-deep),.36),
    0 26px 58px rgba(var(--lux-deep),.5),
    /* the board's own light: the band spills in at the top, the candle
       bounces up off the desk, and the corners fall away */
    inset 0 0 0 1px rgba(16,10,4,.78),
    inset 0 0 0 2px rgba(214,176,104,.10),
    inset 0 3px 9px rgba(var(--wl-candle),.13),
    inset 0 -18px 38px rgba(var(--wl-torch),.10),
    inset 0 0 80px rgba(10,6,2,.48);
  transition:box-shadow .3s ease;
}

/* ── the inner engraved line + four gold rivets ─────────────────────────── */
.lux-signin::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  inset:calc(8px - var(--pl-y)) calc(8px - var(--pl-x)) calc(8px - var(--pl-y2));
  border:1px solid rgba(214,176,104,.26);
  box-shadow:inset 0 1px 0 rgba(20,13,6,.42);
  background-origin:border-box;
  background-repeat:no-repeat;
  background-size:9px 9px;
  background-position:-4px -4px, calc(100% + 4px) -4px, -4px calc(100% + 4px), calc(100% + 4px) calc(100% + 4px);
  background-image:var(--wl-stud),var(--wl-stud),var(--wl-stud),var(--wl-stud);
}

/* the topbar LOGIN shortcut pings the plate instead of scrolling */
.lux-signin.is-flash::before{
  box-shadow:
    0 0 0 1px rgba(var(--wl-char),.88),
    0 0 0 2px rgba(255,222,158,.30),
    0 3px 0 rgba(var(--lux-deep),.34),
    0 26px 58px rgba(var(--lux-deep),.5),
    0 0 44px rgba(226,166,66,.45),
    inset 0 0 0 1px rgba(20,13,6,.62),
    inset 0 2px 9px rgba(var(--wl-candle),.20),
    inset 0 -16px 34px rgba(var(--wl-torch),.16),
    inset 0 0 74px rgba(12,7,2,.34);
}

/* the board's wax seal, struck over the left end of the gold band.
   It reads --pl-x so it tracks the board at every viewport width. */
.lux-signin-seal{
  position:absolute;z-index:3;pointer-events:none;
  left:calc(-1 * var(--pl-x));top:50%;
  width:clamp(46px,3.8vw,62px);
  transform:translate(-46%,-52%);
  filter:drop-shadow(0 6px 14px rgba(2,5,14,.7));
}
.lux-signin-seal img{display:block;width:100%;height:auto}

.lux-signin-bar{
  display:flex;align-items:center;
  gap:clamp(8px,.9vw,14px);
}
/* LOGIN, cut into the wood: light catch under the glyph, dark bite above it */
.lux-signin-title{
  flex:none;
  display:inline-flex;align-items:center;
  margin-left:clamp(10px,1.2vw,20px);
  padding-right:clamp(9px,1vw,15px);
  border-right:1px solid rgba(214,176,104,.26);
  font-family:var(--ff-head);font-weight:700;
  font-size:clamp(11px,.86vw,14px);letter-spacing:.24em;
  color:#f0d9a4;
  text-shadow:
    0 1px 0 rgba(255,238,196,.20),
    0 -1px 1px rgba(14,9,4,.92),
    0 2px 5px rgba(10,6,2,.85),
    0 0 18px rgba(226,178,88,.26);
}
/* a small set lozenge, the same jewel language as the card frames */
.lux-signin-title::before{
  content:'';flex:none;
  width:.46em;height:.46em;margin-right:.7em;
  transform:rotate(45deg);
  background:linear-gradient(140deg,#fff6de,#e2c07a 42%,#a8842f 74%,#6d4c15);
  box-shadow:0 0 0 1px rgba(20,13,6,.7),0 0 9px rgba(226,178,88,.55);
}

/* ── the fields are ROUTED INTO the board, not floated on it ─────────────
   A groove cut in oak: dark walls, a hard shadow off the top edge, and a
   thin lit lip along the bottom where the candle catches the cut. */
body.luxe .lux-signin .field{
  margin:0;flex:1 1 190px;min-width:0;
  border:1px solid rgba(22,15,7,.82);
  border-top-color:rgba(12,8,3,.92);
  border-bottom-color:rgba(120,92,48,.55);
  background:
    linear-gradient(180deg, rgba(255,206,140,.055), rgba(0,0,0,0) 34%),
    linear-gradient(180deg, rgba(9,7,4,.74), rgba(26,20,13,.60));
  box-shadow:
    inset 0 3px 7px rgba(0,0,0,.55),
    inset 0 -1px 0 rgba(255,224,168,.14),
    0 1px 0 rgba(255,232,182,.09);
}
.lux-signin .field input{padding:9px 11px;font-size:13.5px;min-width:0}
.lux-signin .field input::placeholder{color:rgba(206,184,146,.58)}
.lux-signin .field input:-webkit-autofill{-webkit-box-shadow:0 0 0 60px #191106 inset}
.lux-signin .f-ic,.lux-signin .f-eye{width:36px;font-size:15px}
.lux-signin .f-ic{
  color:rgba(226,186,112,.86);
  border-right:1px solid rgba(255,220,160,.13);
  box-shadow:1px 0 0 rgba(10,6,2,.6);
}
/* wizloria's .btn is display:block;width:100% — inside a flex row that would
   claim the whole line, so pin it to its own content */
/* ⛔ the CTA's box-shadow is owned by login-fx's fxCtaPulse keyframe, which
   REPLACES the whole property every frame — so the plaque is seated with a
   `filter` stack instead, which composes. wizloria's `.btn:hover` sets a bare
   `filter:brightness()`; my rule outranks it, so the hover restates both. */
.lux-signin-go{
  flex:0 0 auto;width:auto;
  filter:drop-shadow(0 1px 0 rgba(46,32,14,.95)) drop-shadow(0 3px 5px rgba(10,6,2,.6));
}
.lux-signin-go:hover{
  filter:brightness(1.07) drop-shadow(0 1px 0 rgba(46,32,14,.95)) drop-shadow(0 4px 7px rgba(10,6,2,.66));
}
.lux-signin-go .btn-face{
  padding:10px clamp(13px,1.3vw,24px);
  font-size:clamp(11px,.83vw,13px);letter-spacing:.15em;white-space:nowrap;
}
.lux-signin-rule{
  flex:none;width:1px;height:28px;
  background:linear-gradient(180deg,transparent,rgba(214,176,104,.42),transparent);
}
.lux-signin .socials{flex:none;gap:clamp(6px,.6vw,10px)}
.lux-signin .socials .soc{--sz:clamp(29px,2.2vw,34px)}
.lux-signin .socials .soc{
  border-color:rgba(20,13,6,.7);
  box-shadow:0 3px 10px rgba(8,5,2,.6),inset 0 1px 0 rgba(255,255,255,.85),0 0 0 1px rgba(214,176,104,.22);
}

/* the small print sits below an engraved rule, like a plate's caption */
.lux-signin-meta{
  position:relative;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:0 clamp(9px,1vw,16px);
  margin:clamp(6px,.95vh,11px) 0 0;
  padding-top:clamp(5px,.75vh,9px);
  font-size:clamp(10.5px,.8vw,12.5px);
}
/* one engraved rule right across the board, with a set lozenge on centre —
   it gives the wide lower half of the plate a reason to exist */
.lux-signin-meta::before{
  content:'';position:absolute;left:50%;top:-2px;transform:translateX(-50%);
  width:calc(100% - 6px);height:6px;pointer-events:none;
  background:
    /* terminal pips, so the rule reads as a fitted strap and not a stray line */
    radial-gradient(circle, rgba(240,214,150,.85) 0 32%, rgba(20,13,6,.55) 44%, transparent 52%) 0    0   /5px 5px no-repeat,
    radial-gradient(circle, rgba(240,214,150,.85) 0 32%, rgba(20,13,6,.55) 44%, transparent 52%) 100% 0   /5px 5px no-repeat,
    linear-gradient(90deg,transparent,rgba(214,176,104,.16) 6%,rgba(226,190,120,.60) 34%,rgba(226,190,120,.60) 66%,rgba(214,176,104,.16) 94%,transparent) 0 2px/100% 1px no-repeat,
    linear-gradient(90deg,transparent,rgba(255,238,196,.05) 6%,rgba(255,238,196,.15) 34%,rgba(255,238,196,.15) 66%,rgba(255,238,196,.05) 94%,transparent) 0 3px/100% 1px no-repeat;
}
.lux-signin-meta::after{
  content:'';position:absolute;left:50%;top:0;pointer-events:none;
  width:6px;height:6px;margin:-3px 0 0 -3px;
  transform:rotate(45deg);
  background:linear-gradient(140deg,#fff6de,#e2c07a 44%,#a8842f 76%,#6d4c15);
  box-shadow:0 0 0 1px rgba(20,13,6,.78),0 0 9px rgba(226,178,88,.5);
}
.lux-signin-meta i{font-style:normal;color:rgba(206,178,126,.40)}
.lux-signin-meta .check{font-size:inherit;color:rgba(214,198,164,.88)}
.lux-signin-meta .check .box{width:14px;height:14px;font-size:10px;margin-top:0}
.lux-signin-meta .check .box{
  border-color:rgba(196,152,74,.66);
  background:linear-gradient(180deg,rgba(9,7,4,.7),rgba(30,23,14,.5));
}
.lux-signin-meta .link{font-size:inherit;color:#dcb86a}
.lux-signin-meta .link:hover{color:var(--lux-gold-hi)}
/* one line, always reserved — an error must never reflow the page */
.lux-signin-msg.form-msg,
.lux-signin-msg.form-msg:empty{
  margin:clamp(4px,.6vh,7px) 0 0;min-height:15px;
  font-size:12px;line-height:15px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ══════════════════ 4. CHARACTER SELECT = REGISTRATION ═══════════════════ */

.lux-select{
  flex:0 0 auto;
  position:relative;z-index:0;
  padding-bottom:clamp(2px,.8vh,10px);
  animation:luxRise 1.05s cubic-bezier(.2,.8,.3,1) .45s both;
}
/* ROUND 3: this was a 100vw sheet running from -16vh to -40vh at .74 black —
   the single biggest darkener on the page. Now it is a short, warm floor
   pool that seats the rail and stops well before the horizon. */
.lux-select::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;transform:translateX(-50%);
  width:100vw;top:-3vh;bottom:-22vh;
  background:
    radial-gradient(56% 60% at 50% 60%, rgba(124,96,40,.28), transparent 74%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(var(--lux-night),.10) 40%,
      rgba(var(--lux-deep),.30) 100%);
}

.lux-select-label{
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.5vw,22px);
  margin:0 0 clamp(8px,1.4vh,16px);
  font-family:var(--ff-head);font-weight:600;
  font-size:clamp(9.5px,.8vw,12.5px);
  letter-spacing:.3em;
  color:rgba(244,222,172,.96);
  /* this line lands on the BRIGHT gatehouse facade at 1366/1920 — it needs a
     real outline, but a tight stack of dark shadows does it without putting
     one more black box on the castle */
  text-shadow:
    0 1px 2px rgba(2,5,14,.95),
    0 0 3px rgba(2,5,14,.92),
    0 0 9px rgba(2,5,14,.8),
    0 0 20px rgba(3,7,18,.6),
    0 0 26px rgba(226,178,88,.26);
}
.lux-select-label i{
  height:1px;width:clamp(20px,7vw,138px);
  background:linear-gradient(90deg,transparent,rgba(224,190,120,.60));
}
.lux-select-label i:last-child{background:linear-gradient(270deg,transparent,rgba(224,190,120,.60))}
.lux-select-label span{white-space:nowrap}

/* ── the rail ──────────────────────────────────────────────────────────── */
.lux-row{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-width:0;
}
/* when the rail really does overflow, its ends dissolve instead of getting
   sliced — the arrows float over that fade */
.lux-row:has(> .lux-arrow:not(.is-idle)) .lux-roster{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
}

.lux-roster{
  display:flex;align-items:flex-end;
  gap:clamp(7px,.95vw,16px);
  min-width:0;flex:0 1 auto;
  /* room for the hover lift, since overflow-x:auto forbids overflow-y:visible */
  padding:clamp(14px,2.2vh,26px) 4px 6px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
  outline:0;
}
.lux-roster::-webkit-scrollbar{width:0;height:0;display:none}
.lux-roster:focus-visible{box-shadow:0 0 0 1px rgba(238,206,142,.55)}

/* ── one card ──────────────────────────────────────────────────────────── */
.lux-char{
  flex:0 0 auto;
  display:block;
  width:calc(var(--art-w) + 18px);
  padding:0;margin:0;border:0;background:none;color:inherit;
  font:inherit;text-align:center;cursor:pointer;
  scroll-snap-align:center;
  transform-origin:50% 92%;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .3s ease,filter .3s ease;
  -webkit-tap-highlight-color:transparent;
}

.lux-char-art{
  position:relative;display:block;z-index:0;
  width:var(--art-w);height:var(--art-h);margin:0 auto;
  border-radius:10px;
  overflow:hidden;
  /* R3 (AGENT 4's ask): the portraits are cut-outs, so this host background IS
     the card interior wherever the robe isn't. At round-2 values it composited
     to ~#0a1122 and read as a black hole punched into a now-luminous sky.
     Opaque moonlit navy base + a cool top light ON TOP of it (radial first =
     painted above the linear), so the card art can only add from here. */
  background:
    radial-gradient(86% 62% at 50% 0%, rgba(98,148,216,.30), transparent 72%),
    linear-gradient(180deg,#16253f 0%,#101c33 62%,#0d1830 100%);
  box-shadow:
    0 1px 0 rgba(232,206,148,.14) inset,
    0 14px 30px rgba(1,4,12,.52);
  transition:box-shadow .3s ease,filter .3s ease;
}
.lux-char-art img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 12%;
  filter:saturate(.94) contrast(1.03);
  transition:transform .45s cubic-bezier(.2,.8,.3,1),filter .3s ease;
}
/* WIZART paints the ornate rim on top (img.wlart-card, z:3) */

/* The Aurelian robes are near-monochrome cream-gold, so those portraits
   flatten into gold silhouettes next to the navy/green/crimson houses AND
   melt into their own gold rim. Grade them harder and drop a cool corner
   shadow under the rim (z:2, i.e. below img.wlart-card z:3). */
.lux-char[data-house="Aurelian"] .lux-char-art img{
  filter:saturate(.86) contrast(1.18) brightness(.95);
}
.lux-char[data-house="Aurelian"] .lux-char-art::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(74% 60% at 50% 36%, transparent 46%, rgba(9,19,42,.46) 100%);
}
.lux-char[data-house="Aurelian"]:hover .lux-char-art img,
.lux-char[data-house="Aurelian"]:focus-visible .lux-char-art img{
  filter:saturate(.98) contrast(1.1) brightness(1.05);
}

.lux-char-name{
  display:block;
  margin:8px 0 0;
  font-family:var(--ff-head);font-weight:600;
  font-size:clamp(9.5px,.7vw,11.5px);
  letter-spacing:.02em;line-height:1.15;
  color:#f0e6cf;
  text-shadow:0 1px 2px rgba(2,5,14,.95),0 0 6px rgba(2,5,14,.7);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lux-char-house{
  display:block;position:relative;
  margin:5px 0 0;padding-top:5px;
  font-family:var(--ff-head);font-weight:500;
  font-size:clamp(7.5px,.58vw,9.5px);
  letter-spacing:.24em;
  color:#c1ae87;
  color:color-mix(in srgb, var(--hx,#26467f) 36%, #ecdcb4);
  text-shadow:0 1px 2px rgba(2,5,14,.95),0 0 6px rgba(2,5,14,.65);
  white-space:nowrap;
}
/* the house underline */
.lux-char-house::before{
  content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:70%;height:2px;
  background:linear-gradient(90deg,transparent,#d8ac57,transparent);
  background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--hx,#26467f) 50%, #f6dfa6),transparent);
  transition:width .3s ease,filter .3s ease;
}

/* fighting-game focus: the hovered face steps forward, the rest step back */
.lux-roster:hover .lux-char,
.lux-roster:focus-within .lux-char{opacity:.5;filter:saturate(.55) brightness(.86)}

.lux-char:hover,.lux-char:focus-visible,
.lux-roster:hover .lux-char:hover,
.lux-roster:focus-within .lux-char:focus-visible{
  opacity:1;filter:none;
  transform:translateY(-7px) scale(1.13);
  z-index:2;
}
.lux-char:hover .lux-char-art,.lux-char:focus-visible .lux-char-art{
  box-shadow:
    0 1px 0 rgba(255,240,200,.24) inset,
    0 18px 44px rgba(1,4,12,.62),
    0 0 34px rgba(226,178,88,.36),
    0 0 60px color-mix(in srgb, var(--hx,#26467f) 62%, transparent);
}
.lux-char:hover .lux-char-art img,.lux-char:focus-visible .lux-char-art img{
  transform:scale(1.06);filter:saturate(1.06) contrast(1.05) brightness(1.08);
}
.lux-char:hover .lux-char-house::before,.lux-char:focus-visible .lux-char-house::before{
  width:96%;filter:drop-shadow(0 0 6px rgba(238,206,142,.85));
}
.lux-char:focus-visible{outline:0}
.lux-char:focus-visible .lux-char-art{outline:2px solid var(--lux-gold-hi);outline-offset:3px}
.lux-char:active{transform:translateY(-3px) scale(1.06)}

/* picked → the gates open */
.lux-roster.is-picked .lux-char{opacity:.16;filter:saturate(.2) brightness(.55);pointer-events:none}
.lux-roster.is-picked .lux-char.is-going{
  opacity:1;filter:none;transform:translateY(-10px) scale(1.18);
  animation:luxPick 1.1s ease-in-out infinite;
}
.lux-char.is-err{animation:luxShake .42s ease both}
.lux-char.is-err .lux-char-art{box-shadow:0 0 0 1px rgba(224,104,95,.9),0 0 30px rgba(200,60,52,.5)}

/* ── arrows ────────────────────────────────────────────────────────────── */
.lux-arrow{
  position:absolute;top:50%;z-index:4;
  transform:translateY(-50%);
  display:grid;place-items:center;
  width:clamp(30px,2.6vw,40px);height:clamp(30px,2.6vw,40px);
  padding:0;cursor:pointer;border-radius:50%;
  border:1px solid var(--lux-line);
  background:linear-gradient(180deg,rgba(18,31,56,.60),rgba(5,11,24,.72));
  color:#e2cda1;
  box-shadow:0 6px 18px rgba(1,4,12,.46),inset 0 1px 0 rgba(232,206,148,.14);
  transition:color .2s ease,border-color .2s ease,box-shadow .24s ease,transform .18s ease,opacity .25s ease;
}
.lux-arrow svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.lux-arrow:hover{
  color:#2a1c06;border-color:var(--lux-gold);
  background:linear-gradient(180deg,#f6e3b0,#c99b41);
  box-shadow:0 0 24px rgba(226,176,80,.5);transform:translateY(-50%) scale(1.08);
}
.lux-arrow:focus-visible{outline:2px solid var(--lux-gold-hi);outline-offset:3px}
/* INT: two mechanisms dim a dead arrow — index.php's `is-idle` (opacity 0) and
   login-cards.js's `.lc-off` (opacity .2). Same specificity, and the JS sheet is
   injected AFTER this one, so .lc-off was winning and a 20%-visible ghost ring
   sat on card 1. Worse, opacity alone leaves the button in the TAB ORDER: the
   real tab trail reached #rosterPrev while it was invisible and unclickable.
   `visibility:hidden` settles both — it outranks any opacity and drops the
   control out of sequential focus. The 0s/.25s delay keeps the fade-out on the
   way down; removing the class restores it instantly (the base rule below does
   not transition visibility). */
.lux-arrow.is-idle{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease,visibility 0s linear .25s;
}
.lux-arrow-l{left:-2px}
.lux-arrow-r{right:-2px}

/* status line under the rail — space is reserved so a message never reflows */
.lux-roster-msg.form-msg{
  margin:2px 0 0;min-height:15px;
  font-size:clamp(11px,.8vw,13px);letter-spacing:.04em;
  line-height:15px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lux-roster-msg.form-msg:empty{margin:2px 0 0;min-height:15px}
.lux-roster-empty{
  margin:26px 0;text-align:center;font-style:italic;
  color:rgba(208,194,162,.66);
}

/* ══════════════════════════ 5. ONE THIN FOOTER ══════════════════════════ */

.lux-foot{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:0 10px;
  padding:clamp(4px,.9vh,10px) 0 clamp(6px,1.1vh,12px);
  font-size:clamp(10px,.72vw,12px);
  letter-spacing:.08em;
  /* INT: measured 1.91:1 after the 3D hill was lifted out of near-black — the
     footer sits ON that hill, so brightening the ground cost it exactly the
     separation it used to get for free. Alpha .50 -> .66 plus a second, wider
     halo stop puts it back over 3:1 without making the line loud. */
  color:rgba(216,203,174,.66);
  text-shadow:0 1px 2px rgba(2,5,14,.9),0 0 10px rgba(3,7,18,.55);
  animation:luxFade 1.2s ease .8s both;
}
.lux-foot a{color:inherit;text-decoration:none;transition:color .2s ease}
.lux-foot a:hover{color:var(--lux-gold)}
.lux-foot a:focus-visible{outline:1px solid var(--lux-gold-hi);outline-offset:3px;color:var(--lux-gold-hi)}
.lux-foot i{font-style:normal;opacity:.5}

/* ══════════════════ 6. AUTH OVERLAY (email sign-up card) ═════════════════ */

.lux-auth{position:fixed;inset:0;z-index:70}
.lux-auth[hidden]{display:none}

.lux-auth-veil{
  position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 0%, rgba(11,20,40,.38), rgba(var(--lux-deep),.70));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:luxFade .3s ease both;
}

/* ── THE ACCEPTANCE LETTER ────────────────────────────────────────────────
   Was: the same flat translucent navy rectangle as the login plate, only
   taller — the thing the user called "blue and not from the game".
   It is now the game's OWN parchment. wizloria.css already carries the
   recipe (`.parch`, §5 REGISTER) — deckle edges cut with a clip-path,
   fibre grain, age stains, edge burn — but that element is `display:none`
   and index.php never emits it, so the recipe is rebuilt here on the card's
   own ::before. Under the wax seal that already rides the top edge, this
   reads as exactly one thing: the letter that says you are in.

   ⚠ The card itself must NOT be clipped (seal + close button overhang it),
   so the deckle silhouette lives on the SHEET (z:-1) and the card keeps
   `overflow:visible`. The card's own border/background/box-shadow are
   therefore removed — a straight gold rectangle around a ragged sheet
   reads as a bug.                                                          */
.lux-auth-card{
  position:absolute;
  top:clamp(46px,7vh,92px);
  left:50%;transform:translateX(-50%);
  width:min(352px,calc(100vw - 28px));
  /* the card itself must NOT clip — the wax seal overhangs its top edge by
     ~52% of its own height. The height cap + internal scroll live on
     .lux-view, which is position:static, so the absolutely-positioned seal
     (containing block = this card) is never clipped by it. */
  overflow:visible;
  padding:clamp(24px,1.8vw,30px) clamp(20px,1.6vw,27px) clamp(18px,1.3vw,22px);
  border:0;
  background:none;
  box-shadow:none;
  color:var(--parch-ink,#3a2b17);
  animation:luxCardC .34s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes luxCardC{
  from{opacity:0;transform:translate(-50%,-12px) scale(.985)}
  to  {opacity:1;transform:translateX(-50%)}
}

/* THE SHEET — aged vellum, torn at every edge */
.lux-auth-card::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* paper fibre — desaturated fractal noise, tiled */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='wlf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23wlf)' opacity='0.20'/%3E%3C/svg%3E") 0 0/180px 180px,
    /* the fold this letter was carried in */
    linear-gradient(180deg,
      transparent 36.2%, rgba(120,90,46,.20) 37.1%,
      rgba(255,255,255,.34) 37.9%, transparent 38.8%),
    /* age stains */
    radial-gradient(26% 11% at 15% 27%, rgba(150,112,58,.20), transparent 70%),
    radial-gradient(18% 8%  at 85% 17%, rgba(150,112,58,.17), transparent 70%),
    radial-gradient(30% 13% at 71% 88%, rgba(140,104,52,.22), transparent 70%),
    radial-gradient(14% 6%  at 29% 63%, rgba(150,112,58,.15), transparent 72%),
    /* edge burn */
    radial-gradient(120% 98% at 50% 50%, transparent 46%, rgba(122,90,46,.52) 100%),
    /* the candle falls on the sheet from the upper left */
    radial-gradient(66% 42% at 23% 10%, rgba(255,252,240,.72), transparent 58%),
    radial-gradient(56% 42% at 84% 87%, rgba(150,120,78,.46), transparent 62%),
    radial-gradient(118% 88% at 46% 42%,
      var(--parch-1,#f6ecd4) 12%, var(--parch-2,#e7d5b0) 50%, var(--parch-3,#cdb488) 94%);
  clip-path:polygon(
    0.2% 0.45%, 7% 0.05%, 14% 0.5%, 21% 0.1%, 28% 0.55%, 35% 0.15%, 42% 0.5%,
    49% 0.05%, 56% 0.5%, 63% 0.15%, 70% 0.55%, 77% 0.1%, 84% 0.45%, 91% 0.1%, 99.8% 0.4%,
    99.5% 8%, 100% 16%, 99.4% 24%, 99.9% 32%, 99.5% 40%, 100% 48%,
    99.4% 56%, 99.9% 64%, 99.5% 72%, 100% 80%, 99.5% 88%, 99.9% 95%, 99.7% 99.6%,
    91% 99.9%, 84% 99.5%, 77% 99.9%, 70% 99.45%, 63% 99.85%, 56% 99.5%, 49% 99.95%,
    42% 99.5%, 35% 99.85%, 28% 99.45%, 21% 99.9%, 14% 99.5%, 7% 99.95%, 0.3% 99.6%,
    0.1% 95%, 0.5% 88%, 0% 80%, 0.6% 72%, 0.1% 64%, 0.55% 56%,
    0% 48%, 0.5% 40%, 0.1% 32%, 0.6% 24%, 0% 16%, 0.5% 8%
  );
  box-shadow:inset 0 0 64px rgba(150,116,66,.42),inset 0 0 9px rgba(120,88,44,.5);
  /* the shadow has to follow the torn edge, so it is a filter, not a
     box-shadow (a box-shadow would print the untorn rectangle behind it) */
  filter:
    drop-shadow(0 2px 3px rgba(var(--lux-deep),.55))
    drop-shadow(0 20px 40px rgba(var(--lux-deep),.62))
    drop-shadow(0 0 34px rgba(226,166,66,.14));
}

.lux-auth-x{
  position:absolute;top:10px;right:10px;z-index:4;
  width:28px;height:28px;display:grid;place-items:center;
  padding:0;cursor:pointer;border-radius:50%;
  border:1px solid rgba(93,68,32,.42);
  background:linear-gradient(180deg,rgba(255,253,246,.9),rgba(226,208,170,.86));
  color:#5c4327;
  box-shadow:0 1px 3px rgba(120,90,46,.35),inset 0 1px 0 rgba(255,255,255,.8);
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.lux-auth-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.lux-auth-x:hover{
  color:#f9e6bc;border-color:#5d0f16;
  background:linear-gradient(180deg,#a32530,#6d1119);
}
.lux-auth-x:focus-visible{outline:2px solid var(--lux-gold-deep);outline-offset:2px}

/* the wax seal rides the top edge of the card */
.lux-auth-card .wl-seal{
  position:absolute;left:50%;top:0;z-index:4;
  width:clamp(58px,4.6vw,70px);
  transform:translate(-50%,-48%);
  pointer-events:none;
  filter:drop-shadow(0 7px 15px rgba(2,5,14,.62));
}
.lux-auth-card .wl-seal img{display:block;width:100%;height:auto}
.lux-view-login{padding-top:clamp(14px,1.4vw,20px)}

/* the ruled margin an old letter is written inside: a double ink line with
   four gilt corner brackets over it */
.lux-auth-card::after{
  content:'';position:absolute;inset:9px;pointer-events:none;
  --cbr:rgba(96,64,12,.92);--cbl:26px;
  border:1px solid rgba(109,76,21,.48);
  box-shadow:
    inset 0 0 0 3px rgba(255,252,240,.34),
    inset 0 0 0 4px rgba(109,76,21,.30),
    0 0 0 1px rgba(255,252,240,.26);
  /* ⚠ `background-origin` MUST come after the `background` shorthand — the
     shorthand resets it to padding-box and the brackets slide off the rule. */
  background:
    linear-gradient(var(--cbr),var(--cbr)) 0    0    /var(--cbl) 1px no-repeat,
    linear-gradient(var(--cbr),var(--cbr)) 0    0    /1px var(--cbl) no-repeat,
    linear-gradient(var(--cbr),var(--cbr)) 100% 0    /var(--cbl) 1px no-repeat,
    linear-gradient(var(--cbr),var(--cbr)) 100% 0    /1px var(--cbl) no-repeat,
    linear-gradient(var(--cbr),var(--cbr)) 0    100% /var(--cbl) 1px no-repeat,
    linear-gradient(var(--cbr),var(--cbr)) 0    100% /1px var(--cbl) no-repeat,
    linear-gradient(var(--cbr),var(--cbr)) 100% 100% /var(--cbl) 1px no-repeat,
    linear-gradient(var(--cbr),var(--cbr)) 100% 100% /1px var(--cbl) no-repeat;
  background-origin:border-box;
}

/* the two views live in one card; .lux-swap flips them */
.lux-view{display:none}
/* the height cap lives here (see .lux-auth-card): topbar + breathing room +
   the card's own vertical padding */
.lux-auth-card .lux-view{
  max-height:calc(100dvh - clamp(46px,7vh,92px) - 24px
                  - clamp(24px,1.8vw,30px) - clamp(18px,1.3vw,22px));
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(109,76,21,.45) transparent;
}
.lux-auth[data-view="login"] .lux-view-login{display:block}
.lux-auth[data-view="register"] .lux-view-register{display:block}
.lux-view{animation:luxSwap .28s ease both}

/* compact the wizloria form chrome so both views clear a 720px screen */
/* "JOIN HARRY POTTER ONLINE" wraps to two lines in a 352px card — that reads
   as a deliberate echo of the hero lockup, so tighten the leading instead of
   shrinking the type */
.lux-auth-card .panel-title{font-size:clamp(19px,1.5vw,24px);letter-spacing:.14em;line-height:1.1}
.lux-auth-card .panel-sub{margin:4px 0 clamp(9px,.85vw,12px);font-size:clamp(11.5px,.9vw,13.5px)}
.lux-auth-card .field{margin-bottom:7px}
.lux-auth-card .field input{padding:9px 11px;font-size:14px}
.lux-auth-card .f-ic,.lux-auth-card .f-eye,.lux-auth-card .f-state{width:38px;font-size:15px}
.lux-auth-card .row-between{margin:8px 0 11px}
.lux-auth-card .check{font-size:12.5px}
.lux-auth-card .check-terms{margin:7px 0 11px;font-size:12px;line-height:1.35}
.lux-auth-card .btn-face{padding:10px 14px;font-size:13px;letter-spacing:.14em}
.lux-auth-card .or{margin:10px 0 8px}
.lux-auth-card .or span{font-size:12px}
.lux-auth-card .socials .soc{--sz:34px}
.lux-auth-card .form-msg{font-size:12.5px}
.lux-auth-card .link{font-size:12.5px}
.lux-auth-card .link-c{margin-top:11px}
.lux-auth-card .meter{margin:-3px 0 8px}

/* ══ 6a. THE INK — every control inside the letter is dark-on-paper ═══════
   wizloria.css draws this form for a dark panel (cream text, near-black
   field wells, white social discs). On vellum every one of those inverts.
   Everything below is scoped inside `.lux-auth-card`, so the on-page login
   plate is untouched. `body.luxe` is carried on the focus rules only, to
   outrank §6b's page-wide focus language (0,3,1) — see the note there.   */

.lux-auth-card .panel-title{
  /* illuminated ink: a deep gold-brown ramp, embossed INTO the paper */
  background:linear-gradient(176deg,#5c3f0f 0%,#2b1d06 42%,#4a3320 74%,#6d4c15 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,252,240,.8)) drop-shadow(0 -1px 0 rgba(120,90,46,.22));
}
.lux-auth-card .panel-sub{
  position:relative;
  padding-bottom:clamp(9px,.9vw,13px);
  color:var(--parch-dim,#6b5535);
}
/* the ruled line the letter starts under, with an ink dot on centre */
.lux-auth-card .panel-sub::after{
  content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:76%;height:7px;pointer-events:none;
  background:
    radial-gradient(circle, rgba(109,76,21,.85) 0 34%, transparent 40%) 50% 50%/7px 7px no-repeat,
    linear-gradient(90deg,transparent,rgba(109,76,21,.55) 24%,rgba(109,76,21,.55) 76%,transparent) 50% 50%/100% 1px no-repeat;
}

/* fields = ruled wells pressed into the paper */
body.luxe .lux-auth-card .field{
  border:1px solid rgba(93,68,32,.42);
  border-top-color:rgba(93,68,32,.55);
  background:linear-gradient(180deg,rgba(255,253,246,.60),rgba(246,236,212,.30));
  box-shadow:inset 0 2px 4px rgba(120,90,46,.22),0 1px 0 rgba(255,252,240,.55);
}
body.luxe .lux-auth-card .field:focus-within{
  border-color:rgba(140,100,34,.9);
  box-shadow:
    inset 0 2px 4px rgba(120,90,46,.16),
    0 0 0 1px rgba(168,132,47,.55),
    0 0 20px rgba(168,132,47,.30);
}
.lux-auth-card .field input{color:var(--parch-ink,#3a2b17);caret-color:#6d4c15}
.lux-auth-card .field input::placeholder{color:rgba(90,68,34,.55)}
.lux-auth-card .field input:-webkit-autofill{
  -webkit-text-fill-color:#3a2b17;
  -webkit-box-shadow:0 0 0 60px #f3e8cf inset;
  caret-color:#3a2b17;
}
.lux-auth-card .f-ic{color:rgba(109,76,21,.82);border-right-color:rgba(93,68,32,.26)}
.lux-auth-card .f-eye,
.lux-auth-card .f-state{color:rgba(109,76,21,.72)}
.lux-auth-card .f-eye:hover{color:var(--red-1,#8f1a24)}
body.luxe .lux-auth-card .field:focus-within .f-ic{color:#6d4c15;text-shadow:0 0 10px rgba(168,132,47,.45)}
.lux-auth-card .field.is-bad{border-color:rgba(143,26,36,.75);box-shadow:inset 0 2px 4px rgba(120,90,46,.2),0 0 0 1px rgba(143,26,36,.28)}
.lux-auth-card .field.is-ok{border-color:rgba(63,107,51,.7)}
.lux-auth-card .field.is-ok .f-state{color:#3d6b33}
.lux-auth-card .field.is-bad .f-state{color:#96231d}

/* the strength meter reads as pencil ticks on paper */
.lux-auth-card .meter i{background:rgba(93,68,32,.20)}

/* checkbox = a small ruled box, ticked in gold leaf */
.lux-auth-card .check{color:#4a3520}
.lux-auth-card .check .box{
  border-color:rgba(93,68,32,.60);
  background:linear-gradient(180deg,rgba(255,253,246,.88),rgba(231,213,176,.7));
  box-shadow:inset 0 1px 3px rgba(120,90,46,.30);
}
.lux-auth-card .check input:checked + .box{
  color:#2a1b06;
  background:linear-gradient(180deg,#f2d896,#a8842f);
  border-color:var(--wl-brass,#8a6a1e);
  box-shadow:0 0 10px rgba(168,132,47,.5);
}
.lux-auth-card .check-terms a{color:#6d4c15}
.lux-auth-card .check-terms a:hover{color:var(--red-1,#8f1a24)}

.lux-auth-card .or-dark span{color:var(--parch-dim,#6b5535)}
.lux-auth-card .or-dark i{background:linear-gradient(90deg,transparent,rgba(93,68,32,.45))}
.lux-auth-card .or-dark i:last-child{background:linear-gradient(270deg,transparent,rgba(93,68,32,.45))}

.lux-auth-card .link{color:#6d4c15;text-decoration-color:rgba(109,76,21,.5)}
.lux-auth-card .link:hover{color:var(--red-1,#8f1a24);text-shadow:0 0 10px rgba(143,26,36,.25)}

.lux-auth-card .form-msg{color:#96231d}
.lux-auth-card .form-msg.is-ok{color:#3d6b33}

/* the social discs need a contour on paper — they are white on white */
.lux-auth-card .socials .soc{
  border-color:rgba(93,68,32,.5);
  box-shadow:0 3px 9px rgba(90,64,28,.30),inset 0 1px 0 rgba(255,255,255,.9);
}

/* THE SEAL YOU BREAK: the sign-up CTA is a slab of sealing wax in a gold
   band — the same red as the wax on top of the letter (--red-1). */
.lux-auth-card .btn-red{
  background:linear-gradient(180deg,#fbf0cd,#d8ac57 34%,#a8842f 62%,#6d4c15);
  box-shadow:0 5px 16px rgba(90,52,24,.42),0 0 0 1px rgba(93,68,32,.34),0 0 26px rgba(143,26,36,.16);
}
.lux-auth-card .btn-red .btn-face{
  background:linear-gradient(180deg,#a32530,#6d1119 58%,#8f1a24);
  color:#fbeec2;
  text-shadow:0 1px 0 rgba(40,4,8,.8),0 0 16px rgba(255,178,110,.4);
  box-shadow:inset 0 1px 0 rgba(255,224,170,.32),inset 0 -2px 10px rgba(20,4,6,.75);
}
.lux-auth-card .btn-red:hover{
  box-shadow:0 5px 16px rgba(90,52,24,.42),0 0 0 1px rgba(93,68,32,.34),0 0 42px rgba(196,90,52,.5);
}

/* ══════════════════ 6b. ONE FOCUS LANGUAGE, PAGE-WIDE ═══════════════════ */

body.luxe .link:focus-visible,
body.luxe .soc:focus-visible,
body.luxe .check input:focus-visible + .box,
body.luxe .btn:focus-visible{
  outline:2px solid var(--lux-gold-hi);
  outline-offset:3px;
}
body.luxe .field input:focus-visible{outline:0}
body.luxe .field:focus-within{
  box-shadow:0 0 0 1px rgba(238,206,142,.55),0 0 22px rgba(214,158,64,.22);
}
/* ⚠ a `box-shadow` rule REPLACES the whole stack, so the two plates have to
   restate the material they are cut into or the groove/well vanishes the
   moment the field is focused. Same specificity as the rule above (0,3,1
   and 0,4,1), later in source, so these win. */
body.luxe .lux-signin .field:focus-within{
  border-color:rgba(226,186,110,.75);
  border-top-color:rgba(196,152,74,.6);
  box-shadow:
    inset 0 3px 7px rgba(0,0,0,.5),
    inset 0 -1px 0 rgba(255,232,184,.24),
    0 0 0 1px rgba(238,206,142,.55),
    0 0 22px rgba(214,158,64,.24);
}
/* on vellum a #fff5da outline is invisible — the letter focuses in deep gold */
body.luxe .lux-auth-card .link:focus-visible,
body.luxe .lux-auth-card .soc:focus-visible,
body.luxe .lux-auth-card .check input:focus-visible + .box,
body.luxe .lux-auth-card .btn:focus-visible,
body.luxe .lux-auth-card a:focus-visible{
  outline:2px solid var(--lux-gold-deep);
  outline-offset:3px;
}

/* ══════════════════════════ 7. MOTION ═══════════════════════════════════ */

@keyframes luxFade{from{opacity:0}to{opacity:1}}
@keyframes luxDrop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes luxRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes luxSwap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes luxShine{from{background-position:150% 0}to{background-position:-60% 0}}
@keyframes luxSway{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}}
@keyframes luxPick{
  0%,100%{filter:brightness(1) drop-shadow(0 0 22px rgba(238,206,142,.55))}
  50%    {filter:brightness(1.22) drop-shadow(0 0 44px rgba(255,228,158,.9))}
}
@keyframes luxShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}55%{transform:translateX(6px)}80%{transform:translateX(-3px)}
}

/* ══════════════════════════ 8. RESPONSIVE ═══════════════════════════════ */

/* short screens (1280×720 / 1366×768): pull every fixed band in */
@media (max-height:790px){
  body.luxe{--art-h:clamp(102px,15.4vh,132px)}
  .lux-hero{margin-top:clamp(4px,2vh,20px)}
  .lux-lede{font-size:13px;margin-top:9px}
  .lux-roster{padding-top:16px}
}

@media (max-width:1100px){
  .lux-banner{opacity:.32;width:clamp(44px,4vw,60px)}
  .lux-banner-l{left:clamp(18px,4vw,64px)}
  .lux-banner-r{right:clamp(18px,4vw,64px)}
  .lux-lede{max-width:46ch}
}

@media (max-width:1180px){
  /* the socials are a nice-to-have; the fields and the CTA are not */
  .lux-signin-rule,.lux-signin .socials{display:none}
}

@media (max-width:900px){
  .lux-banner{display:none}
  /* flush the board with the roster's rail instead of bleeding to the edges.
     Both pseudos read the same two tokens, so moving them here keeps the
     band, the engraved line and the rivets in register automatically. */
  .lux-signin{width:100%;--pl-y:12px;--pl-x:0px;--pl-band:3px}
  .lux-signin-seal{display:none}
  .lux-signin-bar{flex-wrap:wrap;justify-content:center}
  /* ⚠ .lux-signin-title is inline-flex (it carries the lozenge), so
     `text-align:center` alone does nothing — the flex line has to be
     centred too. */
  .lux-signin-title{
    width:100%;margin:0 0 7px;padding:0;border-right:0;
    justify-content:center;
    text-align:center;letter-spacing:.3em;
  }
  .lux-signin .field{flex:1 1 190px}
  .lux-signin-go{flex:1 1 100%}
  .lux-signin-go .btn-face{width:100%;justify-content:center}
}

@media (max-width:760px){
  body.luxe{--rail:14px;--art-h:clamp(112px,17vh,150px);--logo-ar:3.45}
  body.luxe .topbar{height:52px;gap:10px}
  body.luxe .brand-logo,
  body.luxe [data-wizlogo="brand"]{height:20px;width:min(58vw,196px)}
  body.luxe .brand-word{font-size:15px;letter-spacing:.1em}
  .brand-hp{font-size:6.6px;letter-spacing:.3em}
  .lux-loginbtn{padding:7px 13px;font-size:10px;letter-spacing:.16em;gap:6px}
  .lux-hp{font-size:8.5px;letter-spacing:.24em;gap:8px}
  .lux-hp::before,.lux-hp::after{width:clamp(14px,7vw,42px)}
  .lux-lede{font-size:13px;max-width:36ch;margin-top:10px}
  .lux-select-label{font-size:9px;letter-spacing:.2em;gap:9px}
  .lux-select-label i{width:clamp(12px,8vw,40px)}
  .lux-arrow{display:none}
  .lux-roster{padding-left:2px;padding-right:2px;scroll-padding-inline:8px}
  .lux-auth-card{width:min(348px,calc(100vw - 24px))}
  .lux-foot{font-size:10px;gap:0 7px}
}

/* 430px phones */
@media (max-width:460px){
  body.luxe{--art-h:clamp(106px,15.5vh,132px);--logo-h:clamp(62px,15vh,84px)}
  .lux-lede{display:none}
  .lux-char-name{font-size:9.5px}
  .lux-char-house{font-size:7.5px;letter-spacing:.18em}
  .lux-foot{letter-spacing:.03em}
}

/* very short (landscape phones / 600px tall laptops): drop the lede */
@media (max-height:600px){
  body.luxe{--art-h:clamp(92px,17vh,116px);--logo-h:clamp(56px,13vh,86px)}
  .lux-lede{display:none}
  .lux-hero{margin-top:4px}
  .lux-hp{margin-top:7px}
}

/* ══════════════════════════ 9. REDUCED MOTION ═══════════════════════════ */

@media (prefers-reduced-motion:reduce){
  #wizScene3d,.lux-hero,.lux-signin,.lux-select,.lux-foot,.lux-banner,
  .topbar,.lux-auth-card,.lux-auth-veil,.lux-view{animation:none!important}
  .lux-title-text,.brand-word{animation:none!important;background-position:0 0}
  .lux-char,.lux-char-art img,.lux-char-house::before{transition:none!important}
  .lux-char:hover,.lux-char:focus-visible{transform:none}
  .lux-roster{scroll-behavior:auto}
  .lux-roster.is-picked .lux-char.is-going{animation:none!important;transform:none}
}