/* ==========================================================================
   ISB Originals — Brick Game Console: AUTH SKIN
   Shared styling for /login, /register, /forgot-password
   Reuses tokens + .lcd + .lcd-scanlines from brickgame.css. Load AFTER it.
   ========================================================================== */

/* Pixel font (safe fallback already defined in brickgame.css) */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Space+Grotesk:wght@400;500;700&display=swap');

/* ---------- shell ---------- */
html, body { height: 100%; }
body.bg-auth{
  margin:0;
  background:var(--isb-orange);
  color:var(--isb-black);
  font-family:var(--font-body);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:16px 16px 80px;
  position:relative;
  overflow-x:hidden;
}

/* subtle brick-game "console speckle" background */
body.bg-auth::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.1) 0 2px, transparent 3px),
    radial-gradient(circle at 75% 80%, rgba(0,0,0,.1) 0 2px, transparent 3px);
  background-size:40px 40px;
  opacity:.6;
}

.bga-wrap{
  position:relative;z-index:1;
  width:100%;max-width:460px;
  margin:0 auto;
  display:flex;flex-direction:column;gap:14px;
  flex:1;
}

/* ---------- top bar ---------- */
.bga-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 2px 2px;
}
.bga-back{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--isb-black);color:#fff;
  padding:8px 12px;border-radius:6px;
  font-family:var(--font-pixel);font-size:9px;
  letter-spacing:.1em;text-decoration:none;
  border:2px solid var(--isb-black);
  box-shadow:3px 3px 0 rgba(0,0,0,.4);
  transition:transform .1s ease, box-shadow .1s ease;
}
.bga-back:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(0,0,0,.5);color:var(--isb-yellow);}
.bga-back:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.3);}
.bga-logo{
  font-family:var(--font-pixel);font-size:10px;letter-spacing:.14em;
  color:var(--isb-black);text-align:right;line-height:1.5;
}
.bga-logo .bga-logo-small{font-size:7px;opacity:.65;letter-spacing:.2em;display:block;}

/* ---------- console display ---------- */
.bga-console{
  background:var(--isb-black);
  border-radius:18px;
  padding:14px;
  box-shadow:
    0 10px 0 var(--isb-orange-deep),
    0 14px 30px rgba(0,0,0,.4),
    inset 0 2px 0 rgba(255,255,255,.08);
  position:relative;
}
.bga-console::before{
  content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:46px;height:5px;border-radius:3px;background:#2a2a2a;
}

.bga-lcd{
  width:100%;background:var(--isb-lcd);
  border-radius:10px;padding:22px 20px;
  border:3px solid var(--isb-black);
  box-shadow:inset 0 0 0 2px var(--isb-lcd-dark), inset 0 6px 20px rgba(0,0,0,.18), 0 2px 0 rgba(0,0,0,.3);
  position:relative;color:var(--isb-lcd-ink);
  background-image:
    linear-gradient(0deg,rgba(0,0,0,.03) 50%,transparent 50%),
    linear-gradient(90deg,rgba(0,0,0,.02) 50%,transparent 50%),
    var(--isb-lcd);
  background-size:2px 2px, 2px 2px, auto;
  overflow:hidden;
}
.bga-lcd .lcd-scanlines{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(0deg,rgba(0,0,0,.05) 50%,transparent 50%);
  background-size:2px 2px;opacity:.6;z-index:0;
}

/* ---------- heading ---------- */
.bga-head{position:relative;z-index:1;text-align:center;margin-bottom:18px;}
.bga-eyebrow{
  font-family:var(--font-pixel);font-size:9px;letter-spacing:.22em;
  color:var(--isb-lcd-ink);opacity:.7;margin-bottom:10px;
}
.bga-title{
  font-family:var(--font-pixel);font-size:20px;line-height:1.2;letter-spacing:.04em;
  color:var(--isb-lcd-ink);margin:0 0 10px;
  text-shadow:1px 1px 0 rgba(255,255,255,.3);
}
.bga-title .bga-blink{
  display:inline-block;color:var(--isb-orange-deep);
  animation:bgaBlink 1.1s steps(2) infinite;
}
.bga-sub{
  font-family:var(--font-pixel);font-size:9px;line-height:1.8;letter-spacing:.08em;
  color:var(--isb-lcd-ink);opacity:.75;margin:0;
}
@keyframes bgaBlink{50%{opacity:0;}}

/* status LEDs row below title */
.bga-leds{display:flex;justify-content:center;gap:10px;margin:14px 0 4px;}
.bga-led{width:7px;height:7px;border-radius:50%;background:#333;box-shadow:inset 0 1px 2px rgba(0,0,0,.5);}
.bga-led.on{background:var(--isb-orange);box-shadow:0 0 6px var(--isb-orange),inset 0 1px 2px rgba(0,0,0,.3);}
.bga-led.pulse{animation:bgaLedPulse 1.4s ease-in-out infinite;}
@keyframes bgaLedPulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---------- form ---------- */
.bga-form{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;}
.bga-group{display:flex;flex-direction:column;gap:6px;}
.bga-label{
  font-family:var(--font-pixel);font-size:8px;letter-spacing:.18em;
  color:var(--isb-lcd-ink);
}
.bga-label .bga-req{color:var(--isb-orange-deep);margin-left:2px;}
.bga-input{
  width:100%;padding:12px 14px;
  background:#d8d8bb;color:var(--isb-black);
  border:2.5px solid var(--isb-black);
  border-radius:4px;
  font-family:var(--font-pixel);font-size:12px;letter-spacing:.02em;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.15);
  transition:background .15s ease, box-shadow .15s ease;
  caret-color:var(--isb-orange-deep);
}
.bga-input::placeholder{color:#6b6b56;letter-spacing:.1em;}
.bga-input:focus{
  outline:none;
  background:#e5e5c6;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.15),0 0 0 3px var(--isb-orange);
}
.bga-input.error{border-color:#c62828;background:#f3dad8;}

/* row (name + phone or similar) */
.bga-row{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:420px){.bga-row.cols-2{grid-template-columns:1fr 1fr;}}

/* password strength bar — LCD segments */
.bga-strength{display:flex;gap:3px;margin-top:4px;}
.bga-strength .seg{
  flex:1;height:7px;background:#8a8a71;border:1px solid var(--isb-black);border-radius:2px;
  transition:background .2s ease;
}
.bga-strength.weak .seg:nth-child(1){background:#c62828;}
.bga-strength.medium .seg:nth-child(1),
.bga-strength.medium .seg:nth-child(2){background:var(--isb-yellow-d);}
.bga-strength.strong .seg{background:#2e7d32;}

/* forgot link */
.bga-forgot{text-align:right;margin-top:-4px;}
.bga-forgot a{
  font-family:var(--font-pixel);font-size:8px;letter-spacing:.1em;
  color:var(--isb-lcd-ink);text-decoration:none;opacity:.75;
}
.bga-forgot a:hover{opacity:1;color:var(--isb-orange-deep);text-decoration:underline;}

/* turnstile */
#turnstileContainer{display:none;justify-content:center;margin-top:6px;}

/* ---------- CTA button ---------- */
.bga-cta{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:14px 16px;margin-top:6px;
  background:var(--isb-orange);color:#fff;
  border:3px solid var(--isb-black);border-radius:6px;
  font-family:var(--font-pixel);font-size:12px;letter-spacing:.14em;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--isb-black);
  transition:transform .08s ease, box-shadow .08s ease, background .15s ease;
  text-transform:uppercase;
}
.bga-cta:hover{background:var(--isb-orange-dark);}
.bga-cta:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--isb-black);}
.bga-cta:disabled{background:#9b9b86;cursor:not-allowed;transform:none;box-shadow:4px 4px 0 rgba(0,0,0,.3);}
.bga-cta .bga-cta-icon{font-size:14px;line-height:1;}

.bga-spinner{
  display:inline-block;width:14px;height:14px;
  border:2px solid #fff;border-top-color:transparent;border-radius:50%;
  animation:bgaSpin .8s linear infinite;
}
@keyframes bgaSpin{to{transform:rotate(360deg);}}

/* ---------- alert ---------- */
.bga-alert{
  position:relative;z-index:1;
  font-family:var(--font-pixel);font-size:9px;letter-spacing:.08em;line-height:1.8;
  padding:10px 12px;border:2px solid var(--isb-black);border-radius:4px;
  margin-bottom:4px;background:#f3dad8;color:#5c0c0c;
}
.bga-alert.success{background:#d3ebd6;color:#1b4b1f;}
.bga-alert.success::before{content:"[OK] ";}
.bga-alert.danger::before{content:"[ERR] ";}

/* ---------- footer links ---------- */
.bga-divider{
  display:flex;align-items:center;gap:10px;margin:14px 0 6px;
  font-family:var(--font-pixel);font-size:8px;letter-spacing:.2em;color:var(--isb-lcd-ink);opacity:.6;
}
.bga-divider::before,.bga-divider::after{content:"";flex:1;border-bottom:2px dashed rgba(10,10,10,.25);}
.bga-switch{
  font-family:var(--font-pixel);font-size:9px;letter-spacing:.1em;line-height:1.8;text-align:center;
  color:var(--isb-lcd-ink);
}
.bga-switch a{color:var(--isb-orange-deep);text-decoration:none;border-bottom:2px solid var(--isb-orange-deep);padding-bottom:1px;}
.bga-switch a:hover{color:var(--isb-black);border-color:var(--isb-black);}

.bga-terms{
  font-family:var(--font-pixel);font-size:7px;letter-spacing:.1em;line-height:1.9;
  text-align:center;color:var(--isb-lcd-ink);opacity:.7;margin:10px 0 0;
}
.bga-terms a{color:var(--isb-orange-deep);text-decoration:none;border-bottom:1px solid currentColor;}

/* ---------- "PRESS START" footer tip ---------- */
.bga-presstip{
  margin:16px auto 0;text-align:center;
  font-family:var(--font-pixel);font-size:8px;letter-spacing:.22em;
  color:var(--isb-black);opacity:.65;
}
.bga-presstip strong{color:var(--isb-black);animation:bgaBlink 1.2s steps(2) infinite;}

/* ---------- success state (forgot password) ---------- */
.bga-success-view{position:relative;z-index:1;text-align:center;padding:10px 0 6px;}
.bga-success-icon{
  width:56px;height:56px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--isb-orange);color:#fff;
  border:3px solid var(--isb-black);border-radius:50%;
  box-shadow:3px 3px 0 var(--isb-black);
  font-family:var(--font-pixel);font-size:20px;
}
.bga-success-view h5{
  font-family:var(--font-pixel);font-size:14px;letter-spacing:.08em;margin:0 0 10px;color:var(--isb-lcd-ink);
}
.bga-success-view p{
  font-family:var(--font-pixel);font-size:9px;line-height:1.9;letter-spacing:.06em;
  color:var(--isb-lcd-ink);opacity:.85;margin:0 0 12px;
}
.bga-success-view a{color:var(--isb-orange-deep);text-decoration:none;border-bottom:1px solid currentColor;}

/* ---------- responsive ---------- */
@media(min-width:520px){
  .bga-title{font-size:22px;}
  .bga-lcd{padding:28px 26px;}
}