/* ==========================================================================
   WIZLORIA — login / register front page
   Layer order:  scene canvas → grade → page chrome
   Everything is drawn in CSS/SVG; there are no bitmap assets to ship.
   ========================================================================== */

:root{
  /* gold ramp — light rim → mid leaf → deep shadow */
  --g-hi:#fbeec2;
  --g-1 :#f2d896;
  --g-2 :#d8ac57;
  --g-3 :#a97c2c;
  --g-4 :#6d4c15;
  --g-5 :#3a280b;

  --ink-0:#040711;
  --ink-1:#070d1c;
  --ink-2:#0c1528;
  --ink-3:#132038;

  --arc-1:#6fd0ff;      /* arcane blue, for the register call to action */
  --arc-2:#2f7fd6;
  --arc-3:#123a72;

  --red-1:#8f1a24;
  --red-2:#5d0f16;
  --red-3:#37070c;

  --parch-1:#f6ecd4;
  --parch-2:#e7d5b0;
  --parch-3:#cdb488;
  --parch-ink:#3a2b17;
  --parch-dim:#6b5535;

  --ok:#7fbf72;
  --bad:#e0685f;

  --ff-display:'Cinzel Decorative',Georgia,serif;
  --ff-head:'Cinzel',Georgia,'Times New Roman',serif;
  --ff-body:'EB Garamond',Georgia,serif;

  --panel-w:clamp(268px,20.2vw,372px);
  --reg-w:clamp(268px,20.2vw,372px);
  --rail:clamp(16px,2.2vw,36px);
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}
body.wiz{
  margin:0;
  min-height:100%;
  background:#040711;
  color:#e8dcc6;
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wiz-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* every icon instance inherits stroke styling from here */
svg[viewBox="0 0 24 24"]{
  width:1em;height:1em;display:block;
  fill:none;stroke:currentColor;stroke-width:1.55;
  stroke-linecap:round;stroke-linejoin:round;
  overflow:visible;
}

/* ══════════════════════════════ 1. SCENE ══════════════════════════════ */

/* the room itself - recovered from the concept render, no UI baked in */
.scene-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-color:#040711;
  background-image:url("../img/vista.jpg");
  background-image:image-set(url("../img/vista.webp") type("image/webp"),
                             url("../img/vista.jpg")  type("image/jpeg"));
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
}

/* drifting dust, embers and the candle flicker ride on top of the still */
#wizScene{
  position:fixed;inset:0;width:100%;height:100%;
  display:block;z-index:1;pointer-events:none;
}

/* just enough grade to seat the UI - the artwork already carries its own light */
.scene-grade{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(3,6,14,.10) 0%, rgba(3,6,14,.10) 44%, rgba(3,6,14,.52) 74%, rgba(3,6,14,.60) 100%),
    linear-gradient(180deg, rgba(3,6,14,.62) 0%, transparent 18%, transparent 62%, rgba(3,6,14,.78) 100%);
}
.scene-grade::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(132% 120% at 42% 50%, transparent 46%, rgba(2,4,10,.66) 100%);
}

/* portrait screens crop the 16:9 plate hard, so bias it onto the hat and candle */
@media (max-aspect-ratio:1/1){
  .scene-bg{background-position:34% 50%}
}

/* ══════════════════════════════ 2. PAGE ══════════════════════════════ */

.page{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  min-height:100vh;
  max-width:1680px;margin:0 auto;
  padding:0 var(--rail) 10px;
}

/* ── top bar ───────────────────────────────────────────────────────────── */
.topbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(16px,2.4vw,44px);
  padding:10px 0 2px;
  min-width:0;
}
.topbar > *{min-width:0}

.brand{text-decoration:none;display:block;line-height:1;flex:none}
.brand-word{
  position:relative;display:block;
  font-family:var(--ff-display);font-weight:900;
  font-size:clamp(30px,3.1vw,50px);
  letter-spacing:.055em;
  background:linear-gradient(178deg,#fff6dc 4%,var(--g-1) 26%,var(--g-2) 52%,#8a5f1d 76%,#e2c07a 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(226,166,66,.34));
}
.brand-star{
  position:absolute;left:38.5%;top:-6%;width:.34em;height:.34em;
  transform:translate(-50%,0);
}
.brand-star svg{width:100%;height:100%;fill:#ffeec0;
  filter:drop-shadow(0 0 8px rgba(255,214,130,.95));
  animation:twinkle 4.2s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.75;transform:scale(.86) rotate(0)}50%{opacity:1;transform:scale(1.12) rotate(28deg)}}

.brand-sub{
  display:flex;align-items:center;gap:9px;
  margin-top:9px;padding-left:.14em;
  font-family:var(--ff-head);font-weight:500;
  font-size:clamp(8.5px,.72vw,11.5px);
  letter-spacing:.3em;color:#c8a765;
}
.brand-sub i{flex:1;height:1px;max-width:26px;
  background:linear-gradient(90deg,transparent,rgba(200,167,101,.75))}
.brand-sub i:last-child{background:linear-gradient(270deg,transparent,rgba(200,167,101,.75))}

.nav{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(12px,2.1vw,40px);
}
.nav-link{
  position:relative;
  font-family:var(--ff-head);font-weight:500;
  font-size:clamp(11px,.88vw,14.5px);
  letter-spacing:.16em;
  color:#cbb488;text-decoration:none;
  padding:8px 2px;
  transition:color .22s ease,text-shadow .22s ease;
}
.nav-link:hover{color:var(--g-1);text-shadow:0 0 14px rgba(226,178,88,.55)}
.nav-link.is-active{color:var(--g-1);text-shadow:0 0 16px rgba(226,178,88,.5)}
.nav-link.is-active::after{
  content:'';position:absolute;left:-6px;right:-6px;bottom:-1px;height:6px;
  background:
    radial-gradient(50% 100% at 50% 100%,rgba(240,205,124,.95),transparent 70%),
    linear-gradient(90deg,transparent,rgba(216,172,87,.9) 30%,rgba(216,172,87,.9) 70%,transparent);
  background-size:100% 100%,100% 1px;
  background-position:center,center bottom;
  background-repeat:no-repeat;
}

/* PLAY NOW plaque */
.playnow{
  --pn-in:rgba(255,236,190,.9);
  position:relative;display:block;text-decoration:none;flex:none;
  padding:2px;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);
  background:linear-gradient(180deg,var(--g-1),var(--g-3) 48%,var(--g-4));
  box-shadow:0 0 26px rgba(214,158,64,.28);
  transition:filter .22s ease,box-shadow .22s ease,transform .22s ease;
}
.playnow:hover{filter:brightness(1.12);box-shadow:0 0 40px rgba(232,176,80,.5);transform:translateY(-1px)}
.playnow:active{transform:translateY(0)}
.playnow-in{
  display:block;text-align:center;
  padding:11px clamp(26px,3vw,52px);
  clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%,0 50%);
  background:
    linear-gradient(180deg,rgba(120,26,30,.96),rgba(46,9,12,.98) 62%,rgba(24,5,7,.99)),
    radial-gradient(90% 130% at 50% 0%,rgba(255,180,90,.22),transparent 62%);
}
.playnow strong{
  display:block;font-family:var(--ff-head);font-weight:700;
  font-size:clamp(13px,1.05vw,17px);letter-spacing:.2em;
  color:#ffeec5;text-shadow:0 1px 0 #000,0 0 16px rgba(255,192,96,.55);
}
.playnow small{
  display:block;margin-top:3px;
  font-family:var(--ff-body);font-size:clamp(9.5px,.72vw,12px);
  letter-spacing:.05em;color:#e2c48e;opacity:.9;
}

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

.stage{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(300px,1fr) var(--panel-w) var(--reg-w);
  align-items:start;
  gap:clamp(14px,1.5vw,24px);
  padding:clamp(2px,.5vw,8px) 0 clamp(8px,.9vw,12px);
  min-width:0;
}
.stage > *{min-width:0}

/* ── hero ──────────────────────────────────────────────────────────────── */
/* The artwork carries the left of the frame, so the copy lives in a glass
   card pinned to the inner edge of the art column - clear of the students. */
.hero{
  margin-left:auto;
  width:min(clamp(210px,17.2vw,292px),100%);
  margin-top:clamp(20px,2vw,32px);
  padding:clamp(16px,1.5vw,24px) clamp(14px,1.25vw,19px) clamp(12px,1.15vw,18px);
  border:1px solid rgba(198,152,72,.40);
  background:linear-gradient(180deg,rgba(9,18,36,.54),rgba(3,8,18,.70));
  box-shadow:0 24px 60px rgba(2,5,14,.55),inset 0 1px 0 rgba(190,220,255,.10);
  backdrop-filter:blur(7px);
}
.hero::before{
  content:'';position:absolute;inset:5px;pointer-events:none;
  border:1px solid rgba(186,142,68,.20);
}
.hero{position:relative}

.hero-title{
  margin:0;
  font-family:var(--ff-head);font-weight:600;
  font-size:clamp(21px,1.55vw,26px);
  line-height:1.12;letter-spacing:.005em;
}
.hero-title span{
  display:block;
  background:linear-gradient(176deg,#fff3d4 6%,var(--g-1) 34%,var(--g-2) 62%,#9c6d24 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(224,166,68,.26));
}
.hero-lede{
  margin:10px 0 0;max-width:none;
  font-size:clamp(11.5px,.82vw,13px);line-height:1.55;
  color:#c3d3e8;text-shadow:0 1px 3px rgba(0,0,0,.8);
}

.rule{display:flex;align-items:center;gap:10px;margin:14px 0 12px;max-width:none}
.rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(198,158,88,.7),transparent)}
.rule b{
  width:9px;height:9px;flex:none;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--g-1),var(--g-3));
  box-shadow:0 0 12px rgba(220,170,80,.65);
}

.hero-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.hero-list li{padding:clamp(9px,.95vw,13px) 0;border-bottom:1px solid rgba(186,142,68,.16)}
.hero-list li:last-child{border-bottom:0;padding-bottom:2px}
.hero-list li{display:flex;gap:13px;align-items:center}
.hero-list h3{
  margin:1px 0 3px;
  font-family:var(--ff-head);font-weight:600;
  font-size:clamp(10px,.72vw,11.5px);letter-spacing:.085em;
  color:var(--g-1);text-shadow:0 1px 2px rgba(0,0,0,.8);
}
.hero-list p{
  margin:0;max-width:none;
  font-size:clamp(10.5px,.76vw,12px);line-height:1.4;
  color:#a9bcd6;text-shadow:0 1px 3px rgba(0,0,0,.75);
}

/* hexagonal icon badge */
.hex{
  --hs:clamp(29px,2.1vw,34px);
  position:relative;flex:none;
  width:var(--hs);height:var(--hs);
  display:grid;place-items:center;
  color:var(--g-1);font-size:calc(var(--hs)*.42);
  clip-path:polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%);
  background:linear-gradient(180deg,rgba(216,172,87,.55),rgba(120,84,32,.45));
}
.hex::before{
  content:'';position:absolute;inset:1.4px;
  clip-path:inherit;
  background:
    radial-gradient(100% 100% at 50% 0%,rgba(30,54,96,.88),rgba(5,10,20,.96) 70%);
}
.hex::after{
  content:'';position:absolute;inset:5px;
  clip-path:inherit;
  border:0;
  background:linear-gradient(180deg,rgba(226,180,92,.35),transparent 55%);
  opacity:.7;
}
.hex svg{position:relative;z-index:1;filter:drop-shadow(0 0 6px rgba(224,172,78,.5))}
.hex-sm{--hs:clamp(32px,2.5vw,42px)}

/* ══════════════════════════════ 4. PANELS ══════════════════════════════ */

.panel{position:relative;isolation:isolate}

/* --- shared framed-card look (login + modal) --- */
.panel-login,.panel-register,.modal-card{
  margin-top:clamp(20px,2vw,32px);
  padding:clamp(40px,2.9vw,54px) clamp(16px,1.5vw,24px) clamp(14px,1.3vw,22px);
  border:1px solid rgba(198,152,72,.72);
  background:
    linear-gradient(180deg,rgba(13,24,45,.90),rgba(5,10,22,.94) 58%,rgba(8,15,30,.93)),
    radial-gradient(120% 60% at 50% 0%,rgba(58,96,158,.26),transparent 62%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 32px 70px rgba(2,5,14,.70),
    inset 0 1px 0 rgba(190,220,255,.12),
    inset 0 0 60px rgba(2,5,14,.55);
  backdrop-filter:blur(4px);
}
/* inner hairline */
.panel-login::before,.panel-register::before,.modal-card::before{
  content:'';position:absolute;inset:7px;pointer-events:none;
  border:1px solid rgba(186,142,68,.34);
}
/* soft outer aura */
.panel-login::after,.panel-register::after,.modal-card::after{
  content:'';position:absolute;inset:-14px;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%,rgba(214,158,64,.20),transparent 70%);
}

.corners{position:absolute;inset:0;pointer-events:none;color:var(--g-2)}
.corners .c{position:absolute;width:46px;height:46px;opacity:.85}
.corners .c svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4}
.corners .c1{left:4px;top:4px}
.corners .c2{right:4px;top:4px;transform:scaleX(-1)}
.corners .c3{right:4px;bottom:4px;transform:scale(-1)}
.corners .c4{left:4px;bottom:4px;transform:scaleY(-1)}

/* medallion seal on the login panel */
.seal{
  position:absolute;left:50%;top:0;
  width:clamp(76px,6.2vw,96px);aspect-ratio:1;
  transform:translate(-50%,-52%);
  z-index:3;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.8));
}
.seal svg{width:100%;height:100%;overflow:visible}
.seal .s-ring,.seal .s-ring2{
  fill:rgba(6,12,24,.94);
  stroke:var(--g-2);stroke-width:2.2;
}
.seal .s-ring{filter:drop-shadow(0 0 12px rgba(224,168,68,.6))}
.seal .s-ring2{fill:none;stroke:rgba(214,166,84,.55);stroke-width:1}
.seal .s-rays path{stroke:var(--g-2);stroke-width:2.6;stroke-linecap:round;opacity:.9}
.seal .s-w,.sorting-seal .s-w{
  font-family:var(--ff-display);font-weight:900;font-size:46px;
  fill:#f6dfa6;stroke:none;
}
.sorting-seal .s-ring{fill:rgba(6,12,24,.94);stroke:var(--g-2);stroke-width:2.2}
.sorting-seal .s-ring2{fill:none;stroke:rgba(214,166,84,.55);stroke-width:1}

.panel-title{
  margin:0;text-align:center;
  font-family:var(--ff-head);font-weight:600;
  font-size:clamp(24px,2.1vw,34px);letter-spacing:.13em;
  background:linear-gradient(176deg,#fff2d0,var(--g-1) 40%,var(--g-2) 78%,#a3731f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.75));
}
.panel-sub{
  margin:5px 0 clamp(14px,1.4vw,20px);text-align:center;
  font-size:clamp(13px,1vw,16px);color:#b9a682;
  font-style:italic;letter-spacing:.01em;
}

/* ── forms ─────────────────────────────────────────────────────────────── */
.form{display:block}

.field{
  position:relative;display:flex;align-items:center;
  margin-bottom:clamp(8px,.8vw,12px);
  border:1px solid rgba(176,134,64,.45);
  background:linear-gradient(180deg,rgba(2,6,14,.62),rgba(12,22,42,.46));
  box-shadow:inset 0 2px 8px rgba(1,3,9,.7),0 1px 0 rgba(190,220,255,.06);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.field:focus-within{
  border-color:rgba(232,186,96,.95);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.6),0 0 0 1px rgba(232,186,96,.22),0 0 22px rgba(216,160,60,.3);
}
.field.is-bad{border-color:rgba(224,104,95,.8);box-shadow:inset 0 2px 8px rgba(0,0,0,.6),0 0 18px rgba(200,70,60,.24)}
.field.is-ok{border-color:rgba(127,191,114,.6)}

.f-ic{
  flex:none;display:grid;place-items:center;
  width:clamp(38px,3vw,46px);height:100%;
  align-self:stretch;
  font-size:clamp(15px,1.2vw,18px);
  color:rgba(214,170,96,.85);
  border-right:1px solid rgba(176,134,64,.22);
}
.field input{
  flex:1 1 auto;min-width:0;
  padding:clamp(10px,.88vw,13px) 12px;
  border:0;background:transparent;outline:0;
  font-family:var(--ff-body);font-size:clamp(14px,1.05vw,16.5px);
  color:#f0e4cc;letter-spacing:.01em;
}
.field input::placeholder{color:rgba(196,175,140,.62);font-style:normal}
.field input:-webkit-autofill{
  -webkit-text-fill-color:#f0e4cc;
  -webkit-box-shadow:0 0 0 60px #0c1528 inset;
  caret-color:#f0e4cc;
}

.f-eye,.f-state{
  flex:none;display:grid;place-items:center;
  width:clamp(38px,3vw,46px);align-self:stretch;
  background:none;border:0;padding:0;cursor:pointer;
  color:rgba(214,170,96,.75);font-size:clamp(15px,1.2vw,18px);
  transition:color .18s ease;
}
.f-eye:hover{color:var(--g-1)}
.f-eye .i-off{display:none}
.f-eye.is-open .i-on{display:none}
.f-eye.is-open .i-off{display:block}
.f-state{cursor:default;font-size:14px;opacity:0;transition:opacity .2s ease}
.field.is-ok  .f-state{opacity:1;color:var(--ok)}
.field.is-bad .f-state{opacity:1;color:var(--bad)}

/* password strength meter */
.meter{display:flex;gap:5px;margin:-4px 0 9px;padding:0 1px;height:3px;opacity:0;transition:opacity .25s ease}
.meter[data-score]:not([data-score="0"]){opacity:1}
.meter i{flex:1;background:rgba(255,255,255,.09);transition:background .3s ease,box-shadow .3s ease}
.meter[data-score="1"] i:nth-child(-n+1),
.meter[data-score="2"] i:nth-child(-n+2),
.meter[data-score="3"] i:nth-child(-n+3),
.meter[data-score="4"] i:nth-child(-n+4){box-shadow:0 0 8px currentColor}
.meter[data-score="1"] i:nth-child(-n+1){background:#c9564c;color:#c9564c}
.meter[data-score="2"] i:nth-child(-n+2){background:#cf8b3c;color:#cf8b3c}
.meter[data-score="3"] i:nth-child(-n+3){background:#c9b04a;color:#c9b04a}
.meter[data-score="4"] i:nth-child(-n+4){background:#7fbf72;color:#7fbf72}

.row-between{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:clamp(7px,.8vw,11px) 0 clamp(11px,1.15vw,15px);
}

/* custom checkbox */
.check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;user-select:none;
  font-size:clamp(12.5px,.98vw,15px);color:#c3b192}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{
  flex:none;width:17px;height:17px;margin-top:1px;
  display:grid;place-items:center;font-size:12px;
  border:1px solid rgba(186,142,68,.7);
  background:linear-gradient(180deg,rgba(2,6,14,.62),rgba(14,26,48,.45));
  box-shadow:inset 0 1px 4px rgba(1,3,9,.75);
  color:transparent;transition:all .18s ease;
}
.check input:checked + .box{
  color:#1a1109;
  background:linear-gradient(180deg,var(--g-1),var(--g-3));
  border-color:var(--g-1);
  box-shadow:0 0 12px rgba(224,172,78,.55);
}
.check input:focus-visible + .box{outline:2px solid var(--g-1);outline-offset:2px}
.check-terms{margin:clamp(6px,.8vw,10px) 0 clamp(11px,1.15vw,15px)}
.check-terms a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.check-terms a:hover{color:var(--g-1)}

.link{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--ff-body);font-size:clamp(12.5px,.98vw,15px);
  color:var(--g-2);text-decoration:underline;text-underline-offset:3px;
  transition:color .18s ease,text-shadow .18s ease;
}
.link:hover{color:var(--g-1);text-shadow:0 0 12px rgba(226,178,88,.5)}
.link-c{display:block;margin:12px auto 0;text-align:center}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{
  position:relative;display:block;width:100%;
  padding:2px;border:0;cursor:pointer;
  background:linear-gradient(180deg,var(--g-hi),var(--g-2) 42%,var(--g-4));
  box-shadow:0 6px 20px rgba(0,0,0,.55);
  transition:filter .2s ease,transform .12s ease,box-shadow .25s ease;
  overflow:hidden;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--g-1);outline-offset:3px}
.btn[disabled]{opacity:.6;cursor:progress;filter:saturate(.5)}

.btn-face{
  position:relative;display:block;
  padding:clamp(11px,.95vw,14px) 16px;
  font-family:var(--ff-head);font-weight:600;
  font-size:clamp(13px,.95vw,16px);letter-spacing:.12em;
  text-align:center;
}
/* sheen sweep */
.btn::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);
  animation:sheen 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sheen{0%,72%{left:-60%}92%,100%{left:130%}}

.panel-login .field{margin-bottom:clamp(9px,.95vw,14px)}
.panel-login .field input{padding:clamp(10px,.9vw,14px) 12px}
.panel-login .btn-face{padding:clamp(11px,.95vw,15px) 16px}
.panel-login .socials .soc{--sz:clamp(38px,2.8vw,48px)}
.panel-login .or{margin:clamp(11px,1.2vw,17px) 0 clamp(9px,1vw,14px)}
.panel-register .field{margin-bottom:clamp(7px,.7vw,10px)}
.panel-register .or{margin:clamp(9px,.95vw,13px) 0 clamp(8px,.85vw,11px)}
.panel-login .row-between{margin:clamp(9px,1vw,14px) 0 clamp(13px,1.35vw,18px)}

.btn-gold{box-shadow:0 6px 22px rgba(0,0,0,.55),0 0 30px rgba(206,150,52,.28)}
.btn-gold .btn-face{
  background:linear-gradient(180deg,#f7e2ab 0%,#e0b662 22%,#c48f34 55%,#8f6118 82%,#c8a052 100%);
  color:#2a1a06;
  text-shadow:0 1px 0 rgba(255,240,200,.55);
  box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -2px 6px rgba(70,44,8,.55);
}
.btn-gold:hover{box-shadow:0 6px 22px rgba(0,0,0,.55),0 0 46px rgba(232,176,72,.55)}

.btn-red{
  background:linear-gradient(180deg,var(--arc-1),var(--arc-2) 52%,var(--arc-3));
  box-shadow:0 6px 22px rgba(2,6,16,.6),0 0 30px rgba(64,150,235,.32);
}
.btn-red .btn-face{
  background:linear-gradient(180deg,rgba(20,44,84,.96),rgba(9,22,48,.98) 60%,rgba(14,34,68,.97));
  color:#dff0ff;
  letter-spacing:.14em;
  text-shadow:0 1px 0 rgba(0,0,0,.6),0 0 18px rgba(110,200,255,.55);
  box-shadow:inset 0 1px 0 rgba(180,225,255,.34),inset 0 -2px 10px rgba(2,8,20,.8),
             inset 0 0 22px rgba(60,140,220,.30);
}
.btn-red:hover{box-shadow:0 6px 22px rgba(2,6,16,.6),0 0 46px rgba(96,190,255,.6)}

/* ── divider + socials ─────────────────────────────────────────────────── */
.or{display:flex;align-items:center;gap:12px;margin:clamp(11px,1.2vw,16px) 0 clamp(10px,1vw,14px)}
.or i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(186,146,80,.55))}
.or i:last-child{background:linear-gradient(270deg,transparent,rgba(186,146,80,.55))}
.or span{
  font-family:var(--ff-body);font-size:clamp(12px,.94vw,14.5px);
  color:#b09d7d;white-space:nowrap;
}
.or-dark span{color:var(--parch-dim)}
.or-dark i{background:linear-gradient(90deg,transparent,rgba(120,96,58,.5))}
.or-dark i:last-child{background:linear-gradient(270deg,transparent,rgba(120,96,58,.5))}

.socials{display:flex;justify-content:center;gap:clamp(12px,1.4vw,22px)}
.soc{
  --sz:clamp(38px,2.9vw,46px);
  width:var(--sz);height:var(--sz);border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  font-size:calc(var(--sz)*.44);
  border:1px solid rgba(198,152,72,.3);
  background:radial-gradient(120% 120% at 50% 0%,#fdfdfd,#e9e9ec 68%,#cdcdd3);
  color:#1b1b20;
  box-shadow:0 4px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .18s ease,box-shadow .22s ease,filter .22s ease;
}
.soc:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.6),0 0 22px rgba(224,172,78,.45)}
.soc:focus-visible{outline:2px solid var(--g-1);outline-offset:3px}
.soc svg{width:1em;height:1em}
.soc-discord{background:radial-gradient(120% 120% at 50% 0%,#8a9bff,#5865f2 62%,#3f4bd6);color:#fff;border-color:rgba(88,101,242,.5)}
.soc-steam{background:radial-gradient(120% 120% at 50% 0%,#3a4552,#171a21 68%,#05070a);color:#e6edf5;border-color:rgba(120,140,160,.35)}
.socials-sm .soc{--sz:clamp(35px,2.6vw,42px)}

/* status line under a form */
.form-msg{
  margin:9px 0 0;min-height:1.2em;
  font-size:clamp(12.5px,.96vw,15px);line-height:1.35;text-align:center;
  color:var(--bad);
}
.form-msg.is-ok{color:var(--ok)}
.form-msg:empty{margin:0;min-height:0}

/* ══════════════════════════ 5. REGISTER (parchment) ═════════════════════ */

.panel-register{ padding-bottom:clamp(14px,1.2vw,18px) }
.parch{display:none}

.panel-register{ padding-bottom:clamp(14px,1.2vw,18px) }
.parch{display:none}

.parch{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(72% 52% at 22% 12%, rgba(255,252,240,.85), transparent 60%),
    radial-gradient(60% 46% at 84% 84%, rgba(180,152,108,.4), transparent 62%),
    radial-gradient(120% 90% at 50% 50%, var(--parch-1) 32%, var(--parch-2) 74%, var(--parch-3) 100%);
  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 60px rgba(150,116,66,.45),inset 0 0 8px rgba(120,88,44,.5);
}
/* paper fibre grain */
.parch::before{
  content:'';position:absolute;inset:0;clip-path:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.16;mix-blend-mode:multiply;
}
/* age stains + edge burn */
.parch::after{
  content:'';position:absolute;inset:0;clip-path:inherit;
  background:
    radial-gradient(28% 16% at 12% 30%, rgba(150,112,58,.16), transparent 70%),
    radial-gradient(20% 12% at 88% 22%, rgba(150,112,58,.14), transparent 70%),
    radial-gradient(30% 18% at 70% 92%, rgba(140,104,52,.18), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 58%, rgba(122,90,46,.42) 100%);
  mix-blend-mode:multiply;
}

/* red shield crest */
.crest{
  position:absolute;left:50%;top:0;
  width:clamp(62px,5vw,80px);
  transform:translate(-50%,-46%);
  z-index:3;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.7));
}
.crest svg{width:100%;height:auto;overflow:visible}
.crest .cr-body{fill:#13294d}
.crest .cr-edge{fill:none;stroke:var(--g-2);stroke-width:4}
.crest .cr-in{fill:none;stroke:rgba(240,206,138,.50);stroke-width:1.6}
.crest .cr-w{font-family:var(--ff-display);font-weight:900;font-size:46px;fill:#f6dfa6;stroke:none}

/* ══════════════════════════════ 6. STRIP ══════════════════════════════ */

.strip{
  display:flex;align-items:stretch;
  gap:clamp(6px,1vw,14px);
  padding:clamp(8px,.7vw,11px) clamp(12px,1.5vw,24px);
  border:1px solid rgba(180,138,66,.38);
  background:
    linear-gradient(180deg,rgba(10,19,36,.90),rgba(4,8,18,.94)),
    radial-gradient(90% 200% at 50% 0%,rgba(58,96,158,.20),transparent 60%);
  box-shadow:0 18px 42px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,220,150,.1);
  backdrop-filter:blur(3px);
}
.strip-item{display:flex;align-items:center;gap:clamp(9px,1vw,15px);flex:1 1 0;min-width:0}
.strip-item h4{
  margin:0 0 2px;
  font-family:var(--ff-head);font-weight:600;
  font-size:clamp(10.5px,.85vw,14px);letter-spacing:.12em;
  color:var(--g-1);
}
.strip-item p{
  margin:0;
  font-size:clamp(11px,.82vw,13.5px);line-height:1.34;
  color:#a3937a;
}
.strip-div{
  flex:none;width:1px;align-self:stretch;
  background:linear-gradient(180deg,transparent,rgba(180,138,66,.5) 22%,rgba(180,138,66,.5) 78%,transparent);
}

/* ══════════════════════════════ 7. FOOTER ══════════════════════════════ */

.foot{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;padding:clamp(7px,.8vw,11px) 0 0;
}
.foot-word{
  display:block;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(18px,1.6vw,26px);letter-spacing:.06em;
  background:linear-gradient(176deg,#f7e6bd,var(--g-2) 60%,#8a5f1d);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.foot-brand small{display:block;margin-top:3px;font-size:clamp(11px,.82vw,13.5px);color:#93826a}

.foot-links{text-align:center;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 10px}
.foot-links a{
  font-size:clamp(11.5px,.86vw,14px);color:#bdab8b;text-decoration:none;transition:color .18s ease;
}
.foot-links a:hover{color:var(--g-1)}
.foot-links i{width:1px;height:12px;background:rgba(160,130,84,.45)}
.foot-links p{flex:1 0 100%;margin:4px 0 0;font-size:clamp(11px,.82vw,13.5px);color:#8b7a62}

.foot-social{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.foot-social > span{font-family:var(--ff-head);font-size:clamp(9.5px,.72vw,12px);letter-spacing:.2em;color:#9a8867}
.foot-social div{display:flex;gap:9px}
.foot-social a{
  width:29px;height:29px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;
  color:#c1a97e;text-decoration:none;
  border:1px solid rgba(170,132,72,.4);
  background:linear-gradient(180deg,rgba(14,26,48,.9),rgba(4,9,19,.95));
  transition:all .2s ease;
}
.foot-social a:hover{color:#1b1206;background:linear-gradient(180deg,var(--g-1),var(--g-3));
  border-color:var(--g-1);box-shadow:0 0 16px rgba(224,172,78,.5)}

/* ══════════════════════════════ 8. MODAL ══════════════════════════════ */

.modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-veil{position:absolute;inset:0;background:rgba(3,2,1,.78);backdrop-filter:blur(6px)}
.modal-card{
  position:relative;width:min(430px,100%);margin-top:0;
  animation:rise .3s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* ══════════════════════════ 9. SORTING OVERLAY ══════════════════════════ */

.sorting{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:radial-gradient(60% 60% at 50% 45%,rgba(38,22,6,.92),rgba(2,1,1,.97));
  backdrop-filter:blur(10px);animation:fadeIn .35s ease both}
.sorting[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sorting-in{text-align:center;padding:20px}
.sorting-seal{width:clamp(90px,9vw,130px);margin:0 auto 22px;animation:sealSpin 3.4s ease-out both}
.sorting-seal svg{width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 0 30px rgba(226,172,72,.7))}
@keyframes sealSpin{
  0%{transform:rotate(-180deg) scale(.5);opacity:0}
  40%{transform:rotate(0) scale(1);opacity:1}
  100%{transform:rotate(0) scale(1);opacity:1}
}
.sorting h3{
  margin:0;font-family:var(--ff-head);font-weight:700;
  font-size:clamp(26px,3vw,46px);letter-spacing:.14em;
  background:linear-gradient(176deg,#fff3d4,var(--g-1) 40%,var(--g-2) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(226,166,68,.5));
}
.sorting p{margin:12px 0 0;font-size:clamp(14px,1.1vw,18px);color:#cbb894;font-style:italic}

/* ══════════════════════════════ 10. RESPONSIVE ══════════════════════════ */

/* short laptops: tighten the rhythm so the whole page still lands in one fold */
@media (min-width:1231px) and (max-height:820px){
  .panel-login,.panel-register,.modal-card{padding-top:38px;padding-bottom:12px}
  .panel-login .field,.panel-register .field{margin-bottom:8px}
  .panel-login .field input,.panel-register .field input{padding:9px 12px}
  .panel-login .btn-face,.panel-register .btn-face{padding:10px 16px}
  .panel-login .or,.panel-register .or{margin:9px 0 8px}
  .panel-login .socials .soc{--sz:36px}
  .socials-sm .soc{--sz:34px}
  .row-between{margin:8px 0 10px}
  .check-terms{margin:7px 0 10px}
  .panel-sub{margin-bottom:12px}
  .hero{padding:14px 16px 10px}
  .strip{padding:7px 18px}
  .foot{padding-top:6px}
}



@media (max-width:1230px){
  .stage{grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,34px)}
  .hero{grid-column:1/-1;width:100%;margin-top:12px}
  .hero-lede{max-width:60ch}
  .hero-list{grid-template-columns:repeat(3,1fr);grid-auto-flow:column;gap:0 20px}
  .hero-list li{border-bottom:0}
  .hero-list p{max-width:none}
  .panel-login,.panel-register{margin-top:44px}
}
@media (max-width:900px){
  .topbar{grid-template-columns:1fr auto;row-gap:10px}
  .nav{grid-column:1/-1;order:3;flex-wrap:wrap;justify-content:flex-start;
    gap:8px 18px;padding-top:6px;border-top:1px solid rgba(170,132,72,.22)}
  .hero-list{grid-auto-flow:row;grid-template-columns:1fr}
  .strip{flex-wrap:wrap;gap:14px 18px}
  .strip-item{flex:1 1 240px}
  .strip-div{display:none}
  .foot{grid-template-columns:1fr;text-align:center;justify-items:center}
  .foot-social{align-items:center}
}
@media (max-width:760px){
  :root{--panel-w:100%;--reg-w:100%;--rail:16px}
  .stage{grid-template-columns:1fr;gap:16px}
  .panel-login,.panel-register{margin-top:50px}
  .playnow-in{padding:9px 18px}
}

/* narrow screens scroll past the fixed plate, so hold a readable floor under
   the copy without blacking the artwork out */
@media (max-width:900px){
  .scene-grade{
    background:
      linear-gradient(180deg, rgba(4,3,2,.62) 0%, rgba(4,3,2,.34) 22%,
                              rgba(4,3,2,.34) 70%, rgba(4,3,2,.78) 100%);
  }
  .scene-grade::after{
    background:radial-gradient(150% 108% at 50% 42%, transparent 30%, rgba(3,2,1,.66) 100%);
  }
}

/* phones: the top bar becomes one centred stack */
@media (max-width:620px){
  .topbar{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px}
  .brand-word{font-size:34px}
  .nav{order:3;justify-content:center;gap:6px 14px;width:100%}
  .nav-link{font-size:11.5px;letter-spacing:.12em;padding:5px 2px}
  .playnow{order:2;width:min(320px,100%)}
  .playnow-in{padding:10px 14px}
  .hero-title{font-size:clamp(30px,9vw,42px)}
  .strip{padding:12px 14px}
  .strip-item{flex:1 1 100%}
  .foot-links{gap:0 8px}
  .btn-face{letter-spacing:.12em}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}