/* ============================================================
   WORLDDEX — Auth page
   Sits over the same animated Emerald background as the game.
   Unlike the game screen this one may scroll: the form plus the
   rankings will not fit a short viewport.
   ============================================================ */

.authbody{
  overflow-y:auto;
  min-height:100dvh;
}

.auth{
  position:relative;z-index:1;
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(16px,3vh,30px);
  padding:clamp(20px,5vh,54px) 16px clamp(28px,6vh,60px);
}

/* ── Brand ───────────────────────────────────────────── */
.auth__brand{text-align:center}
.auth__ball{
  width:64px;height:64px;object-fit:contain;image-rendering:auto;
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.6));
  animation:ballFloat 3.2s ease-in-out infinite;
}
@keyframes ballFloat{50%{transform:translateY(-7px)}}
.auth__title{
  font-size:clamp(30px,6vw,52px);font-weight:900;letter-spacing:.12em;
  margin-top:6px;
  background:linear-gradient(180deg,#fff,#FFCB05 55%,#EE1515);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 3px 16px rgba(0,0,0,.5);
}
.auth__sub{
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--txt-dim);margin-top:2px;
}

/* ── Card ────────────────────────────────────────────── */
.auth__card{
  width:min(420px,100%);
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  overflow:hidden;
}

.auth__tabs{display:flex;border-bottom:1px solid var(--line)}
.authtab{
  flex:1;padding:14px 8px;font-size:13px;font-weight:700;
  color:var(--txt-dim);position:relative;transition:.16s;
}
.authtab:hover{color:var(--txt);background:rgba(255,255,255,.03)}
.authtab.is-active{color:var(--txt)}
.authtab.is-active::after{
  content:'';position:absolute;left:22%;right:22%;bottom:-1px;height:2px;
  background:var(--red);border-radius:2px 2px 0 0;
}

.authpane{display:none;flex-direction:column;gap:13px;padding:20px}
.authpane.is-active{display:flex}

.auth__lead{font-size:13px;line-height:1.6;color:var(--txt-dim)}

.fld__hint{font-size:11px;color:var(--txt-dim);line-height:1.45}
.authpane .fld input{
  padding:11px 13px;font-size:14px;
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--txt);outline:none;transition:border-color .16s,box-shadow .16s;
}
.authpane .fld input:focus{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(238,21,21,.14);
}
.authpane .fld input:invalid:not(:placeholder-shown){border-color:var(--red-dk)}

.auth__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.check{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;color:var(--txt-dim)}
.check input{width:15px;height:15px;accent-color:var(--red);cursor:pointer}
.check:hover{color:var(--txt)}

.linkbtn{
  font-size:12px;color:var(--blue);text-decoration:underline;
  text-underline-offset:2px;transition:.16s;
}
.linkbtn:hover{color:#5AA9E8}
.linkbtn--center{align-self:center;margin-top:2px}

.btn--wide{width:100%;padding:12px;font-size:14px;margin-top:2px}

.auth__msg{font-size:12px;line-height:1.5;min-height:16px}
.auth__msg.is-bad{color:#FF7B7B}
.auth__msg.is-good{color:var(--ok)}

/* ── Leaderboard ─────────────────────────────────────── */
.auth__board{width:min(680px,100%)}
.auth__boardhead{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-dim);text-align:center;margin-bottom:9px;font-weight:800;
}
.board{
  background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r);overflow:hidden;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.board__head,.board__row{
  display:grid;
  grid-template-columns:52px 1fr 132px 96px 68px;
  align-items:center;gap:8px;padding:9px 14px;
}
.board__head{
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-dim);font-weight:800;border-bottom:1px solid var(--line);
}
.board__row{border-bottom:1px solid rgba(255,255,255,.04);font-size:13px}
.board__row:last-child{border-bottom:none}
.board__row:hover{background:rgba(255,255,255,.03)}

.board__rank{font-family:var(--mono);font-weight:800;display:flex;align-items:center;gap:5px}
.board__medal{width:9px;height:9px;border-radius:50%;display:inline-block}
.board__medal--1{background:#FFD54A;box-shadow:0 0 7px rgba(255,213,74,.7)}
.board__medal--2{background:#C8D0DA}
.board__medal--3{background:#CD7F32}
.board__name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board__badges{display:flex;align-items:center;gap:3px}
.bdot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.12);display:inline-block;
}
.bdot.is-on{background:var(--yellow);box-shadow:0 0 5px rgba(255,203,5,.55)}
.board__badges b{font-size:11px;font-family:var(--mono);color:var(--txt-dim);margin-left:4px}
.board__champ{
  font-size:10px;font-weight:800;letter-spacing:.05em;
  padding:2px 8px;border-radius:99px;
  background:linear-gradient(135deg,var(--yellow),#E8A800);color:#3A2E00;
}
.board__no{color:var(--txt-dim)}
.board__dex{font-family:var(--mono);font-size:12px;color:var(--blue)}
.board__empty{padding:26px;text-align:center;color:var(--txt-dim);font-size:13px}

/* Highlight the signed-in player's own row. */
.board__row.is-you{background:rgba(238,21,21,.1);box-shadow:inset 3px 0 0 var(--red)}

@media (max-width:560px){
  .board__head,.board__row{grid-template-columns:38px 1fr 76px 56px;gap:6px;padding:8px 10px}
  .board__head span:nth-child(5),.board__row span:nth-child(5){display:none}
  .board__badges b{display:none}
  .bdot{width:6px;height:6px}
}

/* ── Guest entry ─────────────────────────────────────── */
.auth__or{
  display:flex;align-items:center;gap:10px;
  color:var(--txt-dim);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  margin:4px 0 2px;
}
.auth__or::before,.auth__or::after{
  content:'';flex:1;height:1px;background:var(--line);
}
.btn--ghost{
  background:transparent;border:1px solid var(--line);color:var(--txt);
}
.btn--ghost:hover{background:var(--ink-3);border-color:var(--txt-dim)}
.auth__note{
  font-size:11px;line-height:1.5;color:var(--txt-dim);text-align:center;
}


/* The sign-in page uses the same card rows; only the shell differs. */
.board{
  background:transparent;border:none;border-radius:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}