/* =============================================
   TF2 Bolt — Steam-only login experience
   A blurred, non-interactive home dashboard sits behind the auth card so
   first-time visitors immediately understand what they are signing into.
   ============================================= */
html, body.login-page { min-height:100%; }
body.login-page {
  /* styles.css has a legacy body.login flex-centered layout. The login page
     is now a full-screen scene, so explicitly neutralise those old rules. */
  margin:0;
  padding:0;
  display:block;
  width:100vw;
  min-width:100%;
  overflow:hidden;
  background:#090b0f;
  color:var(--text,#ece7dc);
}
body.login-page::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 72% 14%, rgba(232,145,43,.10), transparent 31%),
    radial-gradient(circle at 18% 80%, rgba(62,105,170,.08), transparent 34%),
    #090b0f;
}

.login-stage { position:relative; width:100vw; min-width:100%; min-height:100vh; overflow:hidden; isolation:isolate; }

/* ---------- blurred home-page preview ---------- */
.login-home-preview {
  position:absolute;
  inset:-24px;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  filter:blur(4px) saturate(.94) brightness(.96);
  transform:scale(1.018);
  transform-origin:center;
  opacity:.86;
}
.login-preview-header {
  height:74px;
  padding:0 30px;
  display:flex;
  align-items:center;
  gap:24px;
  background:linear-gradient(180deg,rgba(20,24,30,.98),rgba(14,17,22,.96));
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 28px rgba(0,0,0,.24);
}
.login-preview-logo { display:flex;align-items:center;gap:10px;flex:0 0 auto; }
.login-preview-logo .brand-mark { width:30px;height:30px;display:inline-flex; }
.login-preview-logo b { font-size:20px;letter-spacing:1.2px;white-space:nowrap;color:#eee9df; }
.login-preview-logo em { color:#eb9337;font-style:italic; }
.login-preview-nav { display:flex;align-items:center;gap:24px;flex:1;min-width:0;color:#9299a3;font-size:12px;font-weight:800; }
.login-preview-nav span { display:flex;gap:6px;align-items:center;white-space:nowrap; }
.login-preview-balance { display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;background:#202630;border:1px solid rgba(255,255,255,.07);font-size:12px; }
.login-preview-balance i { color:#efa13f; }

.login-preview-body { width:calc(100% - 70px);max-width:1780px;margin:30px auto 0; }
.login-preview-hero-grid { display:grid;grid-template-columns:minmax(310px,.72fr) minmax(520px,1.45fr);gap:18px; }
.login-preview-card {
  position:relative;
  min-height:240px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(28,32,40,.96),rgba(18,22,28,.98));
  box-shadow:0 16px 50px rgba(0,0,0,.25);
}
.login-preview-welcome { padding:28px; }
.login-preview-welcome::after { content:"";position:absolute;inset:auto -80px -110px 25%;height:220px;background:radial-gradient(circle,rgba(235,143,52,.40),transparent 65%); }
.login-preview-user-row { display:flex;gap:16px;align-items:center;position:relative;z-index:1; }
.login-preview-avatar { width:62px;height:62px;border-radius:17px;border:2px solid #dc8b39;display:flex;align-items:center;justify-content:center;font-size:25px;background:#252932;color:#dad4c8;box-shadow:0 0 0 6px rgba(232,145,43,.07); }
.login-preview-user-row small,.login-preview-section-title small { color:#a7acb3;font-size:10px;font-weight:900;letter-spacing:1.4px; }
.login-preview-user-row h3 { margin:3px 0 1px;font-size:24px; }
.login-preview-user-row p { margin:0;color:#8e949d;font-size:11px; }
.login-preview-progress-meta { display:flex;justify-content:space-between;margin-top:28px;font-size:11px;font-weight:800;position:relative;z-index:1; }
.login-preview-progress { height:8px;border-radius:99px;margin-top:9px;background:rgba(255,255,255,.08);overflow:hidden;position:relative;z-index:1; }
.login-preview-progress i { display:block;width:74%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e98f34,#ffd28e); }
.login-preview-actions { display:flex;gap:10px;margin-top:26px;position:relative;z-index:1; }
.login-preview-actions span { padding:10px 17px;border-radius:9px;background:#e98f34;color:#1d140a;font-size:10px;font-weight:900; }
.login-preview-actions span+span { background:rgba(255,255,255,.05);color:#ddd6c8;border:1px solid rgba(255,255,255,.08); }

.login-preview-match {
  padding:27px 30px;
  background:
    radial-gradient(circle at 92% 20%,rgba(232,145,43,.32),transparent 34%),
    linear-gradient(130deg,#10212a 0%,#151b23 48%,#3c2615 100%);
}
.login-preview-match::before { content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:18px 18px;opacity:.12; }
.login-preview-match-head,.login-preview-versus,.login-preview-match-foot { position:relative;z-index:1; }
.login-preview-match-head { display:flex;justify-content:space-between;font-size:11px;font-weight:900;letter-spacing:.7px; }
.login-preview-match-head span i { color:#ef9c3d;margin-right:6px; }
.login-preview-match-head b { color:#59df8a; }
.login-preview-versus { display:grid;grid-template-columns:1fr 55px 1fr;align-items:center;margin:30px auto 24px;max-width:590px; }
.login-preview-versus>div { display:flex;align-items:center;gap:12px; }
.login-preview-versus>div:last-child { justify-content:flex-end; }
.login-preview-versus>div>i { width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:23px;background:rgba(255,255,255,.06); }
.login-preview-versus strong { font-size:19px; }
.login-preview-versus small { color:#f0a44a;font-size:12px;font-weight:900; }
.login-preview-versus em { text-align:center;font-size:13px;font-weight:900;color:#7c838d;font-style:normal; }
.login-preview-match-foot { display:flex;justify-content:space-between;color:#939aa3;font-size:11px;font-weight:800; }

.login-preview-mini-row { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px; }
.login-preview-mini-row>div { display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:#171b21;border:1px solid rgba(255,255,255,.07); }
.login-preview-mini-row i { width:34px;height:34px;border-radius:10px;background:rgba(232,145,43,.1);color:#ef9b3e;display:flex;align-items:center;justify-content:center; }
.login-preview-mini-row span { display:flex;flex-direction:column;gap:2px; }
.login-preview-mini-row small { color:#7e858f;font-size:8px;font-weight:900;letter-spacing:1px; }
.login-preview-mini-row b { font-size:11px; }

.login-preview-section-title { margin:27px 0 13px; }
.login-preview-section-title small { color:#e89237; }
.login-preview-section-title h2 { margin:5px 0 0;font-size:26px; }
.login-preview-games { display:grid;grid-template-columns:repeat(4,1fr);gap:13px; }
.login-preview-game { min-height:160px;border-radius:18px;padding:18px;display:flex;align-items:flex-end;justify-content:space-between;overflow:hidden;border:1px solid rgba(255,255,255,.08);position:relative;background:#1b2027; }
.login-preview-game.wide { grid-column:span 2;min-height:185px; }
.login-preview-game.orange { background:linear-gradient(135deg,#302015,#48250e); }
.login-preview-game.red { background:linear-gradient(135deg,#311416,#50151c); }
.login-preview-game.blue { background:linear-gradient(135deg,#102538,#123859); }
.login-preview-game.purple { background:linear-gradient(135deg,#25132f,#3b1851); }
.login-preview-game.amber { background:linear-gradient(135deg,#312312,#4a3212); }
.login-preview-game.teal { background:linear-gradient(135deg,#102b2b,#174040); }
.login-preview-game span { display:flex;flex-direction:column;position:relative;z-index:1; }
.login-preview-game small { font-size:8px;color:#b1a899;font-weight:900;letter-spacing:1px; }
.login-preview-game b { font-size:22px;margin-top:5px; }
.login-preview-game em { margin-top:4px;font-size:10px;color:#aaa49b;font-style:normal; }
.login-preview-game>i { position:absolute;right:22px;top:23px;font-size:64px;opacity:.28;transform:rotate(-8deg); }

/* overlays intentionally make the preview enticing, but never compete with auth */
.login-backdrop-wash {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,9,13,.34) 0%,rgba(7,9,13,.16) 28%,rgba(7,9,13,.18) 72%,rgba(7,9,13,.36) 100%),
    linear-gradient(180deg,rgba(7,9,13,.08),rgba(7,9,13,.32));
  box-shadow:inset 0 0 160px rgba(0,0,0,.34);
  backdrop-filter:blur(.7px);
}
.login-backdrop-wash::after { content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,transparent 0 24%,rgba(5,6,9,.07) 54%,rgba(5,6,9,.28) 100%); }

/* ---------- authentication card ---------- */
.login-auth-shell {
  position:relative;
  z-index:3;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:34px 22px;
  box-sizing:border-box;
}
.login-auth-card {
  width:min(440px,calc(100vw - 44px));
  padding:30px 31px 25px;
  box-sizing:border-box;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.115);
  background:linear-gradient(160deg,rgba(25,29,36,.94),rgba(13,16,21,.96));
  box-shadow:0 35px 90px rgba(0,0,0,.62),0 0 0 1px rgba(232,145,43,.04),inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(22px) saturate(1.15);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);
  position:relative;
  overflow:hidden;
}
.login-auth-card::before { content:"";position:absolute;left:15%;right:15%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,#f3a447,transparent);box-shadow:0 0 24px rgba(232,145,43,.4); }
.login-auth-card::after { content:"";position:absolute;width:240px;height:240px;border-radius:50%;right:-120px;top:-130px;background:radial-gradient(circle,rgba(232,145,43,.13),transparent 68%);pointer-events:none; }
.login-auth-brand { position:relative;z-index:1;display:flex;justify-content:center;margin-bottom:19px; }
.login-auth-brand .brand { transform:scale(1.15);transform-origin:center; }
.login-auth-kicker { display:flex;align-items:center;justify-content:center;gap:9px;color:#8e96a1;font-size:9px;font-weight:900;letter-spacing:1.65px;position:relative;z-index:1; }
.login-auth-kicker span { width:28px;height:1px;background:linear-gradient(90deg,transparent,rgba(232,145,43,.7)); }
.login-auth-kicker span:last-child { transform:scaleX(-1); }
.login-auth-card h1 { position:relative;z-index:1;margin:14px 0 9px;text-align:center;font-size:29px;line-height:1.12;letter-spacing:-.8px; }
.login-auth-card h1 strong { color:#f0a044;font-weight:900; }
.login-auth-lead { position:relative;z-index:1;margin:0 auto 24px;max-width:350px;text-align:center;color:#9299a3;font-size:12px;line-height:1.6; }

.login-steam-btn {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:48px 1fr 28px;
  align-items:center;
  gap:12px;
  width:100%;
  padding:11px 13px;
  box-sizing:border-box;
  border-radius:13px;
  text-decoration:none;
  color:#f5f7fa;
  border:1px solid rgba(102,192,244,.33);
  background:linear-gradient(135deg,#223446,#162330 58%,#13202a);
  box-shadow:0 12px 30px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,filter .16s ease;
}
.login-steam-btn:hover { transform:translateY(-2px);border-color:rgba(102,192,244,.68);box-shadow:0 16px 38px rgba(0,0,0,.34),0 0 24px rgba(102,192,244,.08);filter:brightness(1.07); }
.login-steam-btn:active { transform:translateY(0); }
.login-steam-icon { width:48px;height:48px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.055);font-size:25px; }
.login-steam-copy { display:flex;flex-direction:column;gap:2px; }
.login-steam-copy small { color:#8eacbe;font-size:8px;font-weight:900;letter-spacing:1.25px; }
.login-steam-copy b { font-size:14px;letter-spacing:.1px; }
.login-steam-arrow { justify-self:end;color:#8dbedb;font-size:12px;transition:transform .16s ease; }
.login-steam-btn:hover .login-steam-arrow { transform:translateX(3px); }

.login-trust-grid { position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px; }
.login-trust-grid>div { display:flex;align-items:center;gap:10px;min-width:0;padding:11px 12px;border:1px solid rgba(255,255,255,.065);border-radius:10px;background:rgba(255,255,255,.025); }
.login-trust-grid i { color:#62c985;font-size:15px; }
.login-trust-grid span { display:flex;flex-direction:column;min-width:0; }
.login-trust-grid b { color:#e0e4e8;font-size:11px;line-height:1.25; }
.login-trust-grid small { margin-top:3px;color:#939ba6;font-size:9px;line-height:1.3; }
.login-auth-divider { position:relative;z-index:1;display:flex;align-items:center;gap:9px;margin:20px 0 10px;color:#5f6670;font-size:7px;font-weight:900;letter-spacing:1.5px; }
.login-auth-divider::before,.login-auth-divider::after { content:"";height:1px;flex:1;background:rgba(255,255,255,.055); }
.login-auth-foot { position:relative;z-index:1;margin:0;text-align:center;color:#9aa1aa;font-size:10.5px;line-height:1.5; }

@media (max-width:900px) {
  .login-home-preview { filter:blur(5.5px) saturate(.84) brightness(.92);opacity:.74; }
  .login-preview-body { width:calc(100% - 34px); }
  .login-preview-hero-grid { grid-template-columns:1fr; }
  .login-preview-match { display:none; }
  .login-preview-mini-row { grid-template-columns:1fr 1fr; }
  .login-preview-games { grid-template-columns:1fr 1fr; }
  .login-preview-game.wide { grid-column:span 1; }
  .login-preview-nav { display:none; }
  .login-preview-header { padding:0 18px;justify-content:space-between; }
}
@media (max-width:520px) {
  .login-auth-shell { padding:18px 14px; }
  .login-auth-card { width:100%;padding:27px 21px 22px;border-radius:18px; }
  .login-auth-card h1 { font-size:25px; }
  .login-trust-grid { grid-template-columns:1fr; }
  .login-preview-body { margin-top:20px; }
  .login-preview-mini-row { grid-template-columns:1fr; }
  .login-preview-games { grid-template-columns:1fr; }
  .login-preview-game:nth-child(n+4) { display:none; }
}