/* Spread 'Em 2026 identity: brand-only layer. No app or game logic. */
:root{
  --bg:#080D10;--surface:#111B1D;--surface2:#182729;--surface3:#203234;
  --text:#F4F7EE;--muted:#A6B9B6;--muted2:#819795;--line:#304043;
  --lime:#D6FF59;--lime-dim:#253629;--violet:#C0ABFF;--gold:#FFC47C;
  --danger:#FF9B8E;--shadow:0 18px 55px rgba(0,0,0,.26);
}
html,body{background-color:var(--bg)}
body{background:radial-gradient(ellipse 85% 480px at 78% -120px,rgba(79,125,86,.16),transparent 75%),var(--bg)}
::selection{background:var(--lime);color:#0A1214}
h1,h2,h3,.display,.wordmark,.hero-number,.stat-value{
  font-family:'Barlow Condensed','Space Grotesk',sans-serif;
}
h1{font-size:clamp(2.65rem,5.6vw,4.85rem);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.015em;line-height:.98}
h2{font-size:1.95rem;font-weight:800;letter-spacing:.003em}
h3{font-size:1.38rem;font-weight:750;letter-spacing:.008em}
.page-title{margin-top:13px}
.page-copy{max-width:650px}
.brand{gap:12px}
.brand-mark{
  flex-shrink:0;width:48px;height:48px;display:inline-block;
  background:#0A1214 url('/favicon.svg') center/contain no-repeat;
  border:1px solid #2C4945;border-radius:14px;
  color:transparent;font-size:0;transform:none;
  box-shadow:0 0 0 1px rgba(214,255,89,.07);
}
.brand-mark span{display:none}
.wordmark{
  color:var(--text);font-size:2.03rem;font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:.02em;line-height:.9;
}
.wordmark .accent{color:var(--lime)}
.side{
  background:linear-gradient(165deg,#111B1D 0%,#0C1518 62%,#0A1114 100%);
  border-right-color:#283B3C;
}
.side .brand{padding:2px 5px}
.side .nav{gap:6px}
.nav button,.bottom-nav button{font-weight:800;transition:background .15s ease,color .15s ease}
.nav button.active{
  background:linear-gradient(90deg,rgba(214,255,89,.14),rgba(214,255,89,.035));
  color:var(--lime);box-shadow:inset 3px 0 0 var(--lime);
}
.nav button:hover,.bottom-nav button:hover{background:#1B2B2D}
.nav-glyph{color:inherit}
.mini-avatar{background:linear-gradient(145deg,#314E47,#596C5A);border:1px solid #536B59;border-radius:12px;color:#F4F7EE}
.main{padding-top:40px}
.eyebrow{color:var(--lime);letter-spacing:.17em;font-size:.73rem}
.pill{background:#182426;border-color:#334346;letter-spacing:.035em}
.pill.lime{background:#253729;border-color:#486641;color:var(--lime)}
.pill.gold{background:#352B1E;border-color:#695338;color:var(--gold)}
.hero{
  background:
    linear-gradient(92deg,rgba(7,16,16,.95),rgba(10,30,29,.81) 62%,rgba(25,54,45,.78)),
    repeating-linear-gradient(120deg,transparent 0 39px,rgba(214,255,89,.08) 39px 40px);
  border-color:#41604C;border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(214,255,89,.12),0 18px 45px rgba(0,0,0,.12);
  min-height:235px;
}
.hero::after{
  content:'';position:absolute;right:0;top:0;width:240px;height:240px;
  border:0;border-radius:0;box-shadow:none;
  background:url('/favicon.svg') center/contain no-repeat;
  opacity:.11;transform:translate(24px,-8px) rotate(-12deg);pointer-events:none;
}
.hero>div{position:relative;z-index:1}
.hero .label{color:var(--lime)}
.hero h2{
  font-family:'Barlow Condensed','Space Grotesk',sans-serif;
  font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(2.45rem,4.1vw,3.65rem);letter-spacing:0;line-height:.95;
  margin:16px 0 14px;
}
.hero p{color:#CBDAD3}
.btn{
  border-radius:10px;font-family:'DM Sans',system-ui,sans-serif;
  font-weight:800;letter-spacing:.015em;
}
.btn-primary{background:var(--lime);color:#111B13;box-shadow:0 5px 22px rgba(214,255,89,.10)}
.btn-primary:hover:not(:disabled){background:#E2FF86}
.btn-outline{background:#1C2A2C}
.btn-ghost{background:#101B1D}
.stat-card,.panel,.game-card,.form-panel{
  background:linear-gradient(150deg,#132022,#10191C);
  border-color:var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.stat-card{border-radius:16px;border-top:2px solid #47613C}
.stat-value{font-size:2.85rem;font-weight:900;letter-spacing:-.015em;line-height:.95}
.stat-card .stat-label{font-size:.78rem;letter-spacing:.015em}
.section-head h2{font-size:1.75rem;text-transform:uppercase;font-weight:900;font-style:italic;letter-spacing:0}
.rank-row .pts{font-family:'Barlow Condensed',sans-serif;font-size:1.27rem;font-weight:900}
.leaderboard-table .points-cell{font-family:'Barlow Condensed',sans-serif;font-size:1.48rem;font-weight:900}
.leaderboard-table tr.is-me{background:rgba(214,255,89,.085)}
.game-card{border-radius:16px}
.game-card:focus-within{border-color:#648A55}
.team-option{background:#172326;border-color:#3A4A4D;border-radius:10px}
.team-option.selected{background:#26392C;border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime)}
.team-initials{background:#2B3C40}
.team-option.selected .team-initials{background:var(--lime);color:#152116}
.select,.field{background:#162426;border-color:#34474A}
.field:focus,.select:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(214,255,89,.1)}
.segment{background:#111D1F}
.segment button.active{color:#111A13;background:var(--lime)}
.progress,.slate-progress{background:#2B3C3E}
.progress-bar,.slate-progress span{background:linear-gradient(90deg,#A5EC4A,var(--lime))}
.auth-art{
  background:
    radial-gradient(ellipse 80% 80% at 6% 70%,rgba(70,117,74,.30),transparent 72%),
    repeating-linear-gradient(115deg,rgba(214,255,89,.045) 0 1px,transparent 1px 100px),
    linear-gradient(150deg,#122323 0%,#0C1B20 67%,#192D25 100%);
  border-right-color:#3C5549;
}
.auth-art::after{border-color:rgba(214,255,89,.24);box-shadow:0 0 0 65px rgba(214,255,89,.04),0 0 0 160px rgba(214,255,89,.025)}
.auth-art h1{
  font-size:clamp(4.4rem,7.9vw,8.4rem);max-width:630px;
  line-height:.85;font-weight:900;font-style:italic;letter-spacing:-.025em;
}
.auth-art h1 em{color:var(--lime)}
.auth-art p{font-size:1.03rem;max-width:435px;color:#BFCFC8}
.auth-art .small-print{color:#B9D0B7;letter-spacing:.14em}
.auth-main{background:radial-gradient(ellipse at 50% 2%,rgba(76,130,76,.10),transparent 53%),#080D10}
.auth-box h2{
  font-size:3.2rem;font-weight:900;font-style:italic;
  text-transform:uppercase;line-height:.94;letter-spacing:.005em;margin:14px 0 18px;
}
.auth-box p{color:var(--muted)}
.login-icon{border-color:#486347;background:#24392A}
.auth-box .field{background:#152326;border-color:#38504B}
.bottom-nav{background:rgba(11,20,22,.97)}
.bottom-nav button.active{color:var(--lime)}
.splash{background:radial-gradient(circle at center,rgba(68,108,72,.16),transparent 50%),var(--bg)}
.splash>.brand-mark{width:72px;height:72px;border-radius:20px}
@media(max-width:900px){
  .main{padding-top:25px}
  .auth-main{background:radial-gradient(ellipse at 50% 4%,rgba(79,127,75,.22),transparent 55%),#080D10}
  .auth-logo{display:flex}
}
@media(max-width:570px){
  .main{padding-top:18px}
  .brand-mark,.mobile-brand .brand-mark{width:42px;height:42px;border-radius:12px}
  .wordmark{font-size:1.72rem}
  h1{font-size:clamp(2.6rem,11.5vw,3.7rem)}
  .hero{min-height:245px;padding:26px 22px}
  .hero h2{font-size:2.6rem}
  .hero::after{right:-54px;opacity:.08}
  .stat-card{padding:17px 15px}
  .stat-value{font-size:2.35rem}
  .section-head h2{font-size:1.52rem}
  .auth-box h2{font-size:3rem}
  .auth-logo{margin-bottom:43px}
}
@media(prefers-reduced-motion:reduce){
  .btn,.nav button,.bottom-nav button{transition:none}
}