/* ==========================================================================
   Tyrone v10 — login / register / forgot password
   The core prints these pages itself (includes/page-login.php,
   page-register.php) and only lets a theme add this stylesheet, so the
   "press start" screen is built from the existing markup.
   ========================================================================== */
@font-face{font-family:"Recursive";src:url("../assets/fonts/recursive-casual.woff2") format("woff2");font-weight:500 900;font-display:swap}

:root{--night:#0E1033;--surface:#171A4D;--raised:#20246A;--line:#2B3080;--text:#EEF0FF;--text-2:#A9AEE0;--text-3:#7C81BE;
  --cobalt:#4353FF;--token:#FFC83D;--token-deep:#D99A00;--hot:#FF5C7A;--fresh:#2BD9A0;
  --display:"Recursive",ui-sans-serif,system-ui,sans-serif;color-scheme:dark}

html,body.login-body{min-height:100%;background:var(--night)!important;color:var(--text)!important;font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
body.login-body{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(380px,520px);min-height:100vh;margin:0;padding:0!important}

/* left half: a big arcade "attract screen" built from gradients only */
body.login-body::before{content:"PRESS\A START";white-space:pre;display:flex;align-items:flex-end;padding:56px;
  font:900 clamp(56px,8vw,120px)/.88 var(--display);letter-spacing:-.06em;color:#fff;
  background:
    radial-gradient(60% 50% at 20% 20%,#ffc83d55,transparent 70%),
    radial-gradient(50% 60% at 85% 75%,#ff5c7a55,transparent 70%),
    repeating-linear-gradient(0deg,#ffffff08 0 2px,transparent 2px 6px),
    linear-gradient(135deg,#4353FF 0%,#2A33C9 50%,#1C2194 100%)}

.login-container,.register-container{display:flex!important;align-items:center;justify-content:center;min-height:100vh;width:auto!important;max-width:none!important;margin:0!important;padding:40px 32px!important;background:var(--night)!important}
.login-form,.register-form{width:100%;max-width:400px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
.login-form .container,.register-form .container,.register-form .container{padding:0!important;max-width:none!important}

/* logo slot → the theme monogram */
.login-logo{display:flex!important;align-items:center;gap:14px;margin:0 0 32px!important;text-align:left!important}
.login-logo img{display:none!important}
.login-logo::before{content:"T";display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--token);color:var(--night);
  font:900 30px/1 var(--display);box-shadow:inset 0 -4px 0 var(--token-deep)}
.login-logo::after{content:"Tyrone's Unblocked Games";font:900 20px/1.1 var(--display);letter-spacing:-.03em;color:var(--text)}
.login-form form::before,.register-form form::before{content:"Welcome back";display:block;font:900 34px/1.05 var(--display);letter-spacing:-.05em;margin-bottom:6px}
.login-form form::after,.register-form form::after{content:"";display:block}
body.register-body .login-form form::before,.login-form form:has(input[name="action"][value="register"])::before,.register-form form::before{content:"Create your player"}
.login-form form:has(input[name="action"][value="forgot-password"])::before,.register-form form:has(input[name="action"][value="forgot-password"])::before{content:"Reset password"}

/* fields */
.login-form .form-control,.register-form .form-control{height:52px;padding:0 18px!important;border-radius:16px!important;border:1px solid var(--line)!important;background:var(--surface)!important;color:var(--text)!important;font-size:15px!important;box-shadow:none!important}
.login-form textarea.form-control,.register-form textarea.form-control{height:auto;padding:14px 18px!important}
.login-form .form-control::placeholder,.register-form .form-control::placeholder{color:var(--text-3)!important}
.login-form .form-control:focus,.register-form .form-control:focus{border-color:var(--cobalt)!important;background:var(--raised)!important}
.login-form .mb-3,.register-form .mb-3{margin-bottom:12px!important}
.login-form label,.register-form label{color:var(--text-2)!important;font:700 13px var(--display)}
.login-form .form-check,.register-form .form-check{display:flex;align-items:center;gap:10px;padding-left:0!important}
.login-form .form-check-input,.register-form .form-check-input{float:none!important;margin:0!important;width:20px;height:20px;background-color:var(--surface)!important;border:1px solid var(--line)!important}
.login-form .form-check-input:checked,.register-form .form-check-input:checked{background-color:var(--token)!important;border-color:var(--token)!important}
.login-form .form-check-inline,.register-form .form-check-inline{margin-right:14px}

/* the yellow coin button */
.login-form .btn-primary,.register-form .btn-primary{display:flex!important;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;border:0!important;border-radius:999px!important;
  background:var(--token)!important;color:var(--night)!important;font:900 17px var(--display)!important;box-shadow:0 5px 0 var(--token-deep)!important;transition:transform .1s,box-shadow .1s}
.login-form .btn-primary:hover,.register-form .btn-primary:hover{transform:translateY(-1px)}
.login-form .btn-primary:active,.register-form .btn-primary:active{transform:translateY(4px);box-shadow:0 1px 0 var(--token-deep)!important}
.login-form .btn-sm,.register-form .btn-sm{height:48px}

.login-links,.login-form .text-center,.register-form .text-center{color:var(--text-2)!important}
.login-form a,.register-form a{color:var(--token)!important;text-decoration:none;font-weight:700}
.login-form a:hover,.register-form a:hover{text-decoration:underline}
.link-register,.link-forgot-password{margin-top:8px}

/* alerts and captcha */
.login-form .alert,.register-form .alert{border-radius:14px!important;border:1px solid var(--line)!important;background:var(--raised)!important;color:var(--text)!important;font-size:14px}
.login-form .alert-warning,.login-form .alert-danger,.register-form .alert-warning,.register-form .alert-danger{border-color:#FF5C7A66!important;color:#FFC2CD!important}
.login-form .alert-success,.register-form .alert-success{border-color:#2BD9A066!important;color:#B8F5DF!important}
.login-form .btn-close,.register-form .btn-close{filter:invert(1)}
.captcha-container img,.login-form img[src*="captcha"],.register-form img[src*="captcha"]{border-radius:12px;margin-bottom:8px}

@media (max-width:860px){
  body.login-body{grid-template-columns:1fr}
  body.login-body::before{content:"PRESS START";min-height:150px;padding:28px 24px;font-size:44px;align-items:flex-end}
  .login-container,.register-container{min-height:0;padding:28px 20px 48px!important;align-items:flex-start}
}

.register-form form::before{content:"Create your player"!important}
body.login-body::before{position:sticky;top:0;height:100vh}
@media (max-width:860px){body.login-body::before{position:static;height:auto}}