@font-face{font-family:InterDisplay;src:url('../fonts/inter-regular.woff2')}
.icon{width:1em;height:1em;display:inline-block;vertical-align:-.15em}.providers button .icon{width:15px;height:15px;margin-right:8px}
@font-face{font-family:InterDisplay;src:url('../fonts/inter-bold.woff2');font-weight:700}
@font-face{font-family:InterDisplay;src:url('../fonts/inter-black.woff2');font-weight:900}
:root{--gold:#fbd03e;--gold-strong:#fdd441;--cream:#f5f3ec;--line:rgba(255,255,255,.13)}
*{box-sizing:border-box}body{margin:0;background:#0e0e0e;color:#efede7;font-family:InterDisplay,Arial,sans-serif}a{color:inherit;text-decoration:none}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(420px,1.12fr) minmax(510px,.88fr)}
.auth-visual{position:relative;background:url('../img/site/auth-background.jpg') center/cover;overflow:hidden}
.signup-shell .auth-visual{background-image:url('../img/site/auth-background.jpg')}
.auth-visual:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.45)),linear-gradient(0deg,rgba(0,0,0,.8),transparent 70%)}
.auth-logo{position:absolute;top:40px;left:48px;width:158px}.auth-logo img{width:100%}
.auth-quote{position:absolute;left:8%;bottom:9%;max-width:620px}.auth-quote small,.auth-title small,.account-wrap small{font-size:8px;color:var(--gold);letter-spacing:.24em;font-weight:700}
.auth-quote h1{font-size:clamp(42px,4vw,64px);line-height:.99;letter-spacing:-.06em;margin:20px 0}.auth-quote p{font-size:12px;color:#aaa}
.auth-panel{position:relative;display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:42px 6vw 25px;background:#101010}
.back{align-self:flex-end;font-size:8px;letter-spacing:.16em;color:#777}.auth-card{width:100%;max-width:455px;margin:auto}
.auth-title h1{font-size:42px;letter-spacing:-.055em;margin:13px 0 8px}.auth-title p{font-size:11px;color:#777;line-height:1.6}
.providers{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:28px}.providers.two{grid-template-columns:1fr 1fr}
.providers button{height:45px;background:#151515;border:1px solid #393939;color:#aaa;font-size:7px;font-weight:700;letter-spacing:.07em;cursor:pointer}.providers button:hover{border-color:var(--gold);color:#eee}.providers b{font-size:12px;margin-right:4px}
.divide{display:flex;align-items:center;gap:12px;margin:27px 0;color:#5e5b57;font-size:7px;letter-spacing:.12em}.divide:before,.divide:after{content:'';height:1px;background:var(--line);flex:1}
form{display:grid;gap:18px}label{font-size:8px;letter-spacing:.12em;color:#9d9991;font-weight:700}label>a{float:right;color:var(--gold)}
input{width:100%;height:48px;margin-top:8px;border:1px solid #343434;background:#141414;color:#f2eee6;padding:0 14px;font-family:inherit;outline:none}input:focus{border-color:var(--gold)}
.password-field{display:block;position:relative}.password-field input{margin:0}.password-field button{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:0;background:none;color:#777;font-size:7px;cursor:pointer}
.submit{height:50px;border:1px solid var(--gold-strong);background:linear-gradient(135deg,var(--gold-strong),var(--gold));color:#090909;font-size:9px;font-weight:900;letter-spacing:.14em;cursor:pointer}.submit span{float:right}
.form-error{font-size:9px;color:#c47e70;min-height:11px;margin:-7px 0}.switch{text-align:center;margin-top:22px;font-size:8px;color:#666;letter-spacing:.1em}.switch a{color:var(--gold)}
.auth-panel footer{width:100%;display:flex;justify-content:space-between;color:#484848;font-size:7px;letter-spacing:.12em}.auth-panel footer span{display:flex;gap:18px}
.check{display:grid;grid-template-columns:17px 1fr;align-items:start;gap:9px;line-height:1.6;font-weight:400;color:#666;letter-spacing:0}.check input{position:absolute;opacity:0;width:16px;height:16px;margin:0}.check i{width:16px;height:16px;border:1px solid #4b4945;margin-top:0;position:relative}.check input:checked+i{background:var(--gold)}.check input:checked+i:after{content:'✓';position:absolute;color:#111;left:2px;top:-2px;font-size:12px}.check a{color:#aaa;text-decoration:underline}
.auth-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);background:var(--cream);color:#111;padding:13px 20px;font-size:9px;font-weight:700;opacity:0;visibility:hidden;transition:.2s}.auth-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.account-page{min-height:100vh;background:url('../img/site/bg1.jpg') center/cover}.account-page:before{content:'';position:fixed;inset:0;background:rgba(0,0,0,.76)}
.account-wrap{position:relative;z-index:1;max-width:700px;margin:auto;min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:30px}.account-wrap>a>img{width:180px;margin-bottom:45px}
.account-wrap section{width:100%;padding:50px;border:1px solid rgba(255,242,215,.25);background:rgba(13,13,13,.86);text-align:center}.account-wrap h1{font-size:43px;letter-spacing:-.055em}.account-wrap h1 span{color:var(--cream)}.account-wrap p{color:#888;line-height:1.7}
.account-wrap section>div{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px;margin:30px 0;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.15em;color:#777}.account-wrap section>div b{color:#92a666}.account-wrap .submit{width:190px}.return-home{display:block;margin-top:24px;color:var(--gold);font-size:8px;letter-spacing:.15em}
@media(max-width:850px){.auth-shell{grid-template-columns:1fr}.auth-visual{height:240px;min-height:0}.auth-logo{top:25px;left:25px;width:126px}.auth-quote{left:25px;bottom:20px}.auth-quote h1{font-size:31px;margin:11px 0}.auth-quote p{display:none}.auth-panel{min-height:calc(100vh - 240px);padding:25px 22px}.back{position:absolute;top:-211px;right:24px;color:#ddd}.auth-card{margin:35px auto}.auth-title h1{font-size:36px}.providers{grid-template-columns:1fr}.providers.two{grid-template-columns:1fr 1fr}.auth-panel footer{padding-top:20px}.account-wrap section{padding:35px 22px}.account-wrap h1{font-size:34px}}

/* Let the mobile hero grow with its content: the full-height logo cannot share
   a fixed 240px panel with a multi-line welcome heading. */
@media(max-width:850px){
  .auth-visual{height:auto;min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding:20px 22px 24px}
  .auth-logo{position:relative;top:auto;left:auto;z-index:1;display:block;flex:none;width:92px}
  .auth-quote{position:relative;left:auto;bottom:auto;z-index:1;width:100%;max-width:620px}
  .auth-quote h1,html.borderline-login-page .auth-quote h1{font-size:clamp(25px,6vw,33px)!important;line-height:1.08;letter-spacing:-.045em;margin:9px 0 0}
  .auth-quote small{display:block;line-height:1.4}
  .auth-panel{min-height:0;padding:24px 22px 34px}
  .back{position:static;align-self:flex-end;color:#ddd}
  .auth-card{margin:32px auto 18px}
}
@media(max-width:380px){.auth-visual{gap:16px;padding:18px 16px 22px}.auth-panel{padding-left:16px;padding-right:16px}}

/* Borderline 2026 full logo */
.auth-logo{width:132px}.auth-logo img{width:100%;height:auto;object-fit:contain}@media(max-width:850px){.auth-logo{width:92px}}

/* Guided Steam + Discord onboarding */
.connection-onboarding{width:min(720px,calc(100% - 30px));border:1px solid rgba(255,242,215,.22);background:#101010;color:#efede7;padding:0;box-shadow:0 30px 100px #000}
.connection-onboarding::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(7px)}
.connection-onboarding-inner{padding:34px}
.onboarding-kicker{display:block;color:var(--gold);font-size:8px;font-weight:800;letter-spacing:.2em}
.connection-onboarding h2{font-size:30px;letter-spacing:-.045em;margin:10px 0 8px}
.connection-onboarding-inner>p:not(.onboarding-error){color:#7d7972;font-size:11px;line-height:1.65;margin:0}
.connection-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 16px}
.connection-steps article{min-height:178px;border:1px solid #303030;background:#151515;padding:18px;display:grid;grid-template-columns:42px 1fr;grid-template-rows:1fr auto;gap:12px 14px;align-items:start;transition:border-color .2s,background .2s,box-shadow .2s}
.connection-steps article.linked{border-color:rgba(60,211,122,.42);background:linear-gradient(135deg,rgba(60,211,122,.07),#151515 58%);box-shadow:inset 0 0 0 1px rgba(60,211,122,.03)}
.connection-steps article.error{border-color:rgba(207,83,72,.52);background:linear-gradient(135deg,rgba(207,83,72,.07),#151515 58%)}
.onboarding-provider-icon{width:42px;height:42px;border:1px solid #403b33;display:grid;place-items:center;color:#b5a787;background:#111;position:relative}
.onboarding-provider-icon:after{content:'';position:absolute;right:-5px;bottom:-5px;width:14px;height:14px;border:2px solid #151515;background:#4a4741}
.linked .onboarding-provider-icon:after{content:'✓';display:grid;place-items:center;background:#3cd37a;color:#07150d;font-size:9px;font-weight:900}
.error .onboarding-provider-icon:after{content:'×';display:grid;place-items:center;background:#cf5348;color:#fff;font-size:11px;font-weight:900}
.onboarding-provider-icon .icon{width:18px;height:18px}
.onboarding-provider-copy{display:grid;gap:5px;min-width:0}
.onboarding-provider-copy strong{font-size:12px}
.onboarding-provider-copy small{font-size:9px;color:#6f6b64;line-height:1.45}
.onboarding-provider-copy em{font-style:normal;font-size:8px;color:#79746b;letter-spacing:.09em;font-weight:800;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linked .onboarding-provider-copy em{color:#55d98d}.error .onboarding-provider-copy em{color:#d87970}
.connection-steps article>button{grid-column:1/-1;height:39px;border:1px solid #4a4438;background:#111;color:#c7b895;font:800 8px/1 InterDisplay,Arial,sans-serif;letter-spacing:.11em;cursor:pointer;transition:.18s}
.connection-steps article>button:hover:not(:disabled){border-color:#8c7f66;background:rgba(181,167,135,.07);color:var(--cream)}
.connection-steps article>button:disabled{cursor:default}.connection-steps article.linked>button{border-color:rgba(60,211,122,.28);color:#55d98d;background:rgba(60,211,122,.04)}
.onboarding-security{display:flex;align-items:flex-start;gap:12px;border:1px solid #292929;background:#0d0d0d;padding:14px 16px;margin-bottom:12px}
.onboarding-security>i{color:#8d836e;display:grid;place-items:center}.onboarding-security>i .icon{width:17px;height:17px}
.onboarding-security>span{display:grid;gap:4px}.onboarding-security strong{font-size:9px;letter-spacing:.06em}.onboarding-security small{font-size:8px;color:#666;line-height:1.55}
.onboarding-error{min-height:18px;margin:0 0 10px;color:#d87970;font-size:9px;line-height:1.45;opacity:0}.onboarding-error.show{opacity:1}
.onboarding-finish{width:100%}.onboarding-finish:disabled{cursor:not-allowed;filter:none;opacity:.34;background:#191919;color:#666;border-color:#343434}
@media(max-width:560px){.connection-onboarding-inner{padding:26px 20px}.connection-steps{grid-template-columns:1fr}.connection-onboarding h2{font-size:26px}.connection-steps article{min-height:160px}}

/* Keep primary auth actions on the same Borderline yellow used site-wide. */
.submit:hover:not(:disabled),.submit:focus-visible{background:var(--gold-strong);border-color:var(--gold-strong)}
.submit:disabled{opacity:.62;cursor:not-allowed}