/* ============================================================================
   Vitare account - shared energetic auth styling (matches vitaregame.com)
   Used by index (login), register, forgot-password, verify, reset-password.
   Pages must also load the fonts: Luckiest Guy + Nunito.
   ============================================================================ */
:root{
  /* Decorative fills. Unchanged: these are large areas, not text or borders,
     and --line also draws the chunky drop-bar shadows. */
  --blue:#38b6ff; --blue-deep:#1a8fe0; --blue-dark:#12568f;
  --line:#d6ecfb; --light:#eaf7ff; --card:#fff;
  /* Text and UI colours, corrected to WCAG 2.2 AA (measured against #fff and
     against the #eaf7ff tinted panels). */
  --ink:#0c3a60;          /* 11.73:1 */
  --muted:#4d6880;        /*  5.82:1, was #5c7791 at 4.27:1 on tint */
  --error:#c22946;        /*  5.68:1, was #d63a5b at 4.17:1 on tint */
  --success:#0f7355;      /*  5.83:1, was #1aa078 at 3.31:1 */
  --warning:#8a5f00;      /*  5.65:1, was #d49000 at 2.70:1 */
  --link:#1877b8;         /*  4.81:1, for brand-blue text and links */
  --field-border:#4e8dc0; /*  3.56:1, non-text UI needs 3:1; was 1.22:1 */
  --focus:#12568f;        /*  focus ring, 7.63:1 */
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ min-height:100%; }
body{ font-family:'Nunito',system-ui,sans-serif; font-weight:700; color:var(--ink); min-height:100vh;
      display:flex; flex-direction:column; overflow-x:hidden;
      background:linear-gradient(180deg,#cfecff 0%,#e2f4ff 34%,#eef8ff 60%,#f6fbff 100%); }
body::before{ content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 60% 55% at 18% 22%, rgba(56,182,255,.14), transparent 60%),
            radial-gradient(ellipse 55% 60% at 88% 82%, rgba(127,208,255,.20), transparent 58%); }
a{ text-decoration:none; color:inherit; }
.display{ font-family:'Luckiest Guy',cursive; font-weight:400; letter-spacing:.5px; }

/* ---- Glass nav ---- */
.auth-nav{ display:flex; justify-content:center; padding:16px 0; position:relative; z-index:20; }
.auth-nav-in{ width:min(1180px,94vw); display:flex; align-items:center; gap:16px;
  background:rgba(255,255,255,.5); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:2px solid rgba(255,255,255,.75); border-radius:20px; padding:9px 16px; box-shadow:0 14px 34px -18px rgba(9,40,70,.35); }
.auth-nav .brand img{ height:34px; display:block; }
.auth-nav .spacer{ margin-left:auto; }
.auth-nav .back{ font-family:'Luckiest Guy',cursive; font-size:13px; letter-spacing:.4px; color:var(--ink);
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:12px; }
.auth-nav .back:hover{ background:var(--blue); color:#fff; }
.auth-nav .back svg{ width:14px; height:14px; }
.auth-nav .cta{ font-family:'Luckiest Guy',cursive; font-size:13px; letter-spacing:.4px; color:var(--ink);
  background:linear-gradient(180deg,#7fd0ff,var(--blue)); border:2px solid #fff; box-shadow:0 4px 0 var(--blue-dark);
  border-radius:12px; padding:8px 16px; }
.auth-nav .cta:hover{ filter:brightness(1.05); }

/* ---- Chunky button ---- */
.btn-play{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Luckiest Guy',cursive; letter-spacing:.5px;
  background:linear-gradient(180deg,#7fd0ff,var(--blue)); color:var(--ink); border:3px solid #fff; border-radius:16px;
  box-shadow:0 6px 0 var(--blue-dark),0 14px 24px -14px rgba(9,40,70,.5); padding:14px 26px; font-size:16px; cursor:pointer;
  transition:transform .1s,box-shadow .1s; }
.btn-play:hover{ transform:translateY(-2px); }
.btn-play:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--blue-dark); }
.btn-play.full{ width:100%; }
.btn-ghost{ display:inline-flex; align-items:center; justify-content:center; font-family:'Luckiest Guy',cursive; letter-spacing:.4px;
  background:#fff; color:var(--link); border:3px solid var(--line); border-radius:16px; box-shadow:0 5px 0 var(--line);
  padding:13px 24px; font-size:15px; cursor:pointer; }
.btn-ghost:hover{ background:var(--light); }
.btn-ghost:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--line); }

/* ---- Form card ---- */
.auth-card{ background:#fff; border:3px solid var(--line); border-radius:24px;
  box-shadow:0 10px 0 var(--line),0 30px 60px -30px rgba(9,40,70,.45); padding:38px 36px; }
.auth-heading{ font-family:'Luckiest Guy',cursive; font-weight:400; font-size:clamp(28px,4vw,38px); color:var(--ink); line-height:1.04;
  -webkit-text-stroke:2px #fff; paint-order:stroke fill; margin-bottom:6px; }
.auth-sub{ font-size:15px; color:var(--muted); font-weight:600; margin-bottom:26px; line-height:1.5; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.field input[type=text],.field input[type=email],.field input[type=password]{ width:100%; padding:14px 16px; background:var(--light);
  border:2px solid var(--field-border); border-radius:12px; color:var(--ink); font-family:'Nunito',sans-serif; font-weight:700; font-size:16px;
  transition:border-color .2s,box-shadow .2s; -webkit-appearance:none; appearance:none; }
.field input:focus{ border-color:var(--focus); }
/* Visible focus for keyboard users. :focus-visible means a mouse click never
   shows the ring, so nothing changes for pointer users. */
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; }
.field input:focus-visible{ outline-offset:2px; }
.field input::placeholder{ color:#6b8299; }
.pw-wrap{ position:relative; }
.pw-toggle{ position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--muted);
  font-size:12px; font-weight:800; cursor:pointer; text-transform:uppercase; letter-spacing:.5px; }
.auth-links{ text-align:center; margin-top:16px; font-size:13px; color:var(--muted); font-weight:600; }
.auth-links a{ color:var(--link); font-weight:800; text-decoration:underline; }
.auth-links a:hover{ text-decoration:underline; }

/* ---- Status messages ---- */
.status{ padding:13px 16px; border-radius:12px; font-size:14px; font-weight:700; margin-bottom:16px; border:2px solid transparent; }
.status.error{ background:rgba(214,58,91,.08); border-color:rgba(214,58,91,.25); color:var(--error); }
.status.success{ background:rgba(26,160,120,.08); border-color:rgba(26,160,120,.30); color:var(--success); }
.status.warning{ background:rgba(212,144,0,.08); border-color:rgba(212,144,0,.35); color:var(--warning); }

/* ---- Two-column split (login / register) ---- */
.auth-split{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 480px; gap:44px;
  width:min(1180px,94vw); margin:14px auto 56px; align-items:center; flex:1; }
.auth-hero{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:24px 0; min-height:520px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%); }
.auth-hero .logo{ position:relative; z-index:2; }
.auth-hero .logo img{ width:200px; height:auto; filter:drop-shadow(0 8px 18px rgba(56,182,255,.35)); }
.live-eyebrow{ position:relative; z-index:2; font-family:'Luckiest Guy',cursive; font-size:14px; letter-spacing:1.4px; text-transform:uppercase; color:var(--blue-deep); margin-bottom:4px; }
.live-heading{ position:relative; z-index:2; font-family:'Luckiest Guy',cursive; font-weight:400; font-size:clamp(24px,3vw,34px); color:var(--ink); line-height:1.05; -webkit-text-stroke:2px #fff; paint-order:stroke fill; margin-bottom:2px; }
.auth-hero .tagline{ font-family:'Luckiest Guy',cursive; font-size:clamp(20px,2.4vw,30px); color:var(--ink); margin-top:14px; line-height:1.1;
  -webkit-text-stroke:2px #fff; paint-order:stroke fill; max-width:16ch; }
.online-badge{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:9px 20px; background:rgba(255,255,255,.85);
  border:2px solid var(--line); border-radius:999px; font-size:13px; font-weight:800; color:var(--ink); box-shadow:0 4px 16px rgba(56,182,255,.12); }
.online-dot{ width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 8px var(--success); animation:aupulse 2s ease-in-out infinite; }
@keyframes aupulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.6; transform:scale(.85); } }
@media(max-width:900px){ .auth-split{ grid-template-columns:1fr; gap:22px; } .auth-hero{ padding:28px 16px; min-height:380px; } .auth-hero .tagline{ max-width:none; } }

/* ---- Centered single card (forgot / verify / reset) ---- */
.auth-center{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  width:min(560px,94vw); margin:34px auto 56px; flex:1; }
.auth-center .logo{ margin-bottom:20px; }
.auth-center .logo img{ width:180px; height:auto; filter:drop-shadow(0 8px 18px rgba(56,182,255,.3)); }
.auth-center .auth-card{ width:100%; }

/* ---- Site footer (matches vitaregame.com) ---- */
.site-footer{ background:#0a1834; color:#9fb3c8; padding:4rem 0 2.5rem; margin-top:auto; position:relative; z-index:1; }
.site-footer .fwrap{ width:min(1180px,92vw); margin:0 auto; }
.site-footer .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; }
.site-footer .fbrand img{ height:40px; width:auto; display:block; }
.site-footer .ftag{ margin-top:.75rem; font-size:14px; color:#9fb3c8; max-width:34ch; font-weight:600; }
.site-footer h4{ color:#9fb3c8; font-size:13px; letter-spacing:1px; text-transform:uppercase; font-weight:800; margin-bottom:.75rem; }
.site-footer ul{ list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.site-footer a{ color:#c7d6e6; font-size:14px; font-weight:700; }
.site-footer a:hover{ color:#fff; }
.site-footer .copyright{ text-align:center; color:#6b7e94; font-size:13px; margin-top:2.5rem; }
@media(max-width:760px){ .site-footer .cols{ grid-template-columns:1fr 1fr; gap:2rem; } }

/* ---- Status badge (verify page) ---- */
.auth-badge{ width:78px; height:78px; border-radius:50%; display:grid; place-items:center; margin:0 auto 18px; font-size:38px; color:#fff; border:3px solid #fff; }
.auth-badge.ok{ background:linear-gradient(160deg,#3ddc97,#17a978); box-shadow:0 8px 0 #0f8a63,0 18px 30px -14px rgba(9,40,70,.5); }
.auth-badge.bad{ background:linear-gradient(160deg,#ff8f7a,#e0503f); box-shadow:0 8px 0 #c23d2e,0 18px 30px -14px rgba(9,40,70,.5); }

/* --- Accessibility: field hints + reveal button (Phase 1) --- */
/* The password rule used to live only in the placeholder, which is faint and
   vanishes on first keystroke. .field-hint keeps it on screen and is wired to
   the input with aria-describedby so it is announced with the field. */
.field-hint{ margin:7px 0 0; font-size:13.5px; font-weight:600; color:var(--muted); line-height:1.45; }
/* Reserve room so the revealed password never runs under the Show button. */
.pw-wrap input[type=password],.pw-wrap input[type=text]{ padding-right:74px; }
.pw-toggle{ min-width:44px; min-height:44px; padding:0 10px; border-radius:8px; }
.pw-toggle:hover{ color:var(--ink); }

/* --- Accessibility: honour a reduced-motion preference (Phase 2) --- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* --- Accessibility: skip link (Phase 3) --- */
/* Off-screen until focused, so keyboard users can jump the nav without any
   visual change for everyone else. */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; padding:12px 18px; min-height:44px; }
.skip-link:focus{ left:12px; top:12px; padding:12px 18px; background:#fff; color:var(--ink);
  border:3px solid var(--focus); border-radius:12px; font-family:'Nunito',sans-serif;
  font-weight:800; font-size:15px; box-shadow:0 8px 24px -10px rgba(9,40,70,.5); }