/*
Theme Name: Statefall
Theme URI: https://statefall.org
Author: Statefall
Description: Official theme for Statefall RTS — a real-time strategy browser game. Dark, map-inspired design matching the in-game palette.
Version: 1.0.0
Text Domain: statefall
*/

/* ============================================================
   TOKENS — matched 1:1 to the game's in-canvas palette
   ============================================================ */
:root{
  --bg:        #0f1a26;
  --bg-deep:   #0a1420;
  --panel:     #1a2634;
  --panel-2:   #202f40;
  --border:    #2c3d50;
  --ink:       #e8ecef;
  --muted:     #9db0c2;
  --gold:      #ffd27a;
  --gold-deep: #f2c14e;
  --blue:      #7fb3ff;
  --blue-deep: #2f5a8c;
  --red:       #ff8f6b;
  --red-deep:  #b63a3a;
  --green:     #5fd18b;
  --radius:     14px;
  --radius-sm:  8px;
  --shadow:     0 12px 32px rgba(0,0,0,.35);
  --maxw:       1180px;
  --font: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(127,179,255,.08), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(255,210,122,.06), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--gold); }
h1,h2,h3,h4{ font-weight:800; line-height:1.15; margin:0 0 .5em; letter-spacing:.2px; }
h2{ font-size:clamp(28px,4vw,40px); }
h3{ font-size:clamp(18px,2.4vw,22px); }
p{ margin:0 0 1em; color:var(--ink); }
.muted{ color:var(--muted); }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
section{ padding:88px 0; }
section.tight{ padding:56px 0; }
.eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px;
}
.section-head{ max-width:720px; margin:0 auto 48px; text-align:center; }
.section-head p{ color:var(--muted); font-size:18px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px; font-weight:700; font-size:16px;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{
  background:linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
  color:#0a1420; box-shadow:0 8px 24px rgba(127,179,255,.28);
}
.btn-primary:hover{ color:#0a1420; box-shadow:0 10px 30px rgba(127,179,255,.4); }
.btn-gold{
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color:#241a06; box-shadow:0 8px 24px rgba(255,210,122,.25);
}
.btn-gold:hover{ color:#241a06; }
.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--border);
}
.btn-ghost:hover{ color:var(--gold); border-color:var(--gold); }
.btn-lg{ padding:18px 36px; font-size:18px; }
.btn-block{ width:100%; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
#site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(15,26,38,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:var(--maxw); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:var(--ink); }
.brand:hover{ color:var(--ink); }
.brand svg{ display:block; }
.brand .rts{ font-size:11px; color:var(--muted); font-weight:600; letter-spacing:1.5px; margin-left:2px; }
.main-nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; align-items:center; }
.main-nav a{ color:var(--ink); font-weight:600; font-size:15px; }
.main-nav a:hover{ color:var(--gold); }
.header-actions{ display:flex; align-items:center; gap:12px; }
.header-actions .btn{ padding:10px 20px; font-size:14px; }
.user-chip{ display:flex; align-items:center; gap:10px; font-size:14px; }
.user-chip a{ color:var(--muted); }
.user-chip strong{ color:var(--ink); }
.nav-toggle{ display:none; background:none; border:1px solid var(--border); border-radius:8px; color:var(--ink); padding:8px 10px; }

@media (max-width:860px){
  .main-nav{ position:absolute; top:100%; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--border); display:none; }
  .main-nav.open{ display:block; }
  .main-nav ul{ flex-direction:column; align-items:flex-start; padding:16px 24px; gap:16px; }
  .nav-toggle{ display:inline-block; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:100px 0 60px; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
.hero h1{ font-size:clamp(36px,5.4vw,58px); margin-bottom:20px; }
.hero h1 .accent{ color:var(--gold); }
.hero p.lede{ font-size:19px; color:var(--muted); max-width:520px; margin-bottom:32px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
.hero-note{ font-size:13px; color:var(--muted); }
.hero-note strong{ color:var(--gold); }
.hero-shot{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);
  box-shadow:var(--shadow); background:var(--panel);
}
.hero-shot img{ width:100%; }

@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero{ padding:56px 0 40px; }
}

/* founding player banner strip */
.founder-strip{
  background:linear-gradient(90deg, rgba(255,210,122,.12), rgba(127,179,255,.10));
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:14px 0; text-align:center; font-size:14.5px;
}
.founder-strip strong{ color:var(--gold); }
.founder-strip a{ text-decoration:underline; }

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:920px){ .grid-3,.grid-4,.grid-5{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-3,.grid-4,.grid-5{ grid-template-columns:1fr; } }

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; transition:border-color .15s ease, transform .15s ease;
}
.card:hover{ border-color:var(--blue); transform:translateY(-2px); }
.card .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; background:var(--panel-2); color:var(--gold);
  font-weight:800; margin-bottom:16px;
}
.card h3{ margin-bottom:10px; }
.card p{ color:var(--muted); font-size:15px; margin-bottom:0; }

.roster-card .tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:14px;
}
.roster-card.land .tag{ background:rgba(255,210,122,.15); color:var(--gold); }
.roster-card.sea .tag{ background:rgba(127,179,255,.15); color:var(--blue); }
.roster-card.air .tag{ background:rgba(255,143,107,.15); color:var(--red); }
.roster-card ul{ margin:14px 0 0; padding-left:18px; color:var(--muted); font-size:14.5px; }
.roster-card ul li{ margin-bottom:6px; }
.roster-card .more{ display:inline-block; margin-top:14px; font-size:14px; font-weight:700; }

.mode-tile{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm); padding:18px 20px; }
.mode-tile h4{ margin:0 0 6px; font-size:15px; }
.mode-tile p{ margin:0; font-size:13.5px; color:var(--muted); }

.garrison-block{
  background:linear-gradient(135deg, rgba(127,179,255,.08), rgba(255,210,122,.06));
  border:1px solid var(--border); border-radius:var(--radius); padding:36px;
  display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center;
}
@media (max-width:800px){ .garrison-block{ grid-template-columns:1fr; } }

.map-tile{
  position:relative; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border);
  aspect-ratio:4/3; background:var(--panel-2) center/cover no-repeat; display:flex; align-items:flex-end; padding:14px;
  font-weight:700; font-size:14px; color:#fff; text-decoration:none; transition:transform .18s ease, border-color .18s ease;
}
.map-tile:hover{ transform:translateY(-3px); border-color:rgba(127,179,255,.5); }
.map-tile span{ position:relative; z-index:1; }
.map-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.35) 100%); }

.map-hero{ width:100%; border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; }
.map-hero img{ width:100%; display:block; }
.map-kind-badge{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; background:rgba(127,179,255,.15); color:var(--accent, #7fb3ff); margin-bottom:12px;
}
.map-nav-strip{ display:flex; flex-wrap:wrap; gap:10px; margin-top:40px; }
.map-nav-strip a{
  padding:8px 14px; border-radius:999px; border:1px solid var(--border); font-size:13.5px; text-decoration:none; color:var(--muted);
  transition:border-color .15s ease, color .15s ease;
}
.map-nav-strip a:hover{ border-color:rgba(127,179,255,.5); color:#fff; }
.map-nav-strip a.current{ background:rgba(127,179,255,.15); color:#fff; border-color:transparent; }

/* ============================================================
   TECH FACTS / STATS STRIP
   ============================================================ */
.stat-strip{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.stat{ flex:1 1 180px; padding:26px 20px; text-align:center; border-right:1px solid var(--border); background:var(--panel); }
.stat:last-child{ border-right:none; }
.stat .v{ font-size:26px; font-weight:800; color:var(--gold); }
.stat .l{ font-size:13px; color:var(--muted); margin-top:4px; }

.tech-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.tech-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--muted); font-size:15px; }
.tech-list li::before{ content:"—"; color:var(--gold); font-weight:800; flex-shrink:0; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-item{ border-bottom:1px solid var(--border); padding:20px 0; }
.faq-item summary{ cursor:pointer; font-weight:700; font-size:17px; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--gold); font-size:22px; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ color:var(--muted); margin-top:12px; }

/* ============================================================
   LEADERBOARD / PROFILE
   ============================================================ */
.board-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
table.statefall-table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:760px; }
table.statefall-table th, table.statefall-table td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--border); }
table.statefall-table th{ background:var(--panel-2); color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:1px; }
table.statefall-table tr:last-child td{ border-bottom:none; }
table.statefall-table tr:hover td{ background:rgba(127,179,255,.05); }
table.statefall-table a.seed{ font-family:monospace; color:var(--blue); }
.rank-1{ color:var(--gold); font-weight:800; }
.rank-2{ color:#d8d8d8; font-weight:800; }
.rank-3{ color:#d98f4a; font-weight:800; }

.board-filters{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; align-items:center; }
.board-filters select{ background:var(--panel); color:var(--ink); border:1px solid var(--border); border-radius:8px; padding:10px 14px; font-size:14px; }

.profile-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px; }
@media (max-width:700px){ .profile-stats{ grid-template-columns:repeat(2,1fr); } }
.profile-stats .stat{ background:var(--panel); }

.founder-badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,210,122,.15);
  color:var(--gold); border:1px solid rgba(255,210,122,.4); border-radius:999px;
  padding:6px 16px; font-size:13px; font-weight:700; margin-bottom:20px;
}

/* ============================================================
   FORMS / LOGIN / REGISTER (WP core forms restyled)
   ============================================================ */
.auth-wrap{ max-width:420px; margin:0 auto; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:40px; }
.auth-wrap h1{ font-size:26px; text-align:center; }
.auth-wrap p.sub{ text-align:center; color:var(--muted); margin-bottom:28px; }
#loginform, #registerform, #lostpasswordform, .auth-wrap form{ display:flex; flex-direction:column; gap:16px; }
#loginform label, #registerform label, #lostpasswordform label{ font-size:13px; color:var(--muted); font-weight:600; margin-bottom:6px; display:block; }
#loginform input[type=text], #loginform input[type=password],
#registerform input[type=text], #registerform input[type=email],
#lostpasswordform input[type=text],
.auth-wrap input[type=text], .auth-wrap input[type=password], .auth-wrap input[type=email]{
  width:100%; background:var(--panel-2); border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; color:var(--ink); font-size:15px;
}
#loginform input:focus, #registerform input:focus{ outline:none; border-color:var(--blue); }
.login-remember{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); }
.login-submit, #wp-submit{
  background:linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
  color:#0a1420; border:none; border-radius:999px; padding:13px 24px; font-weight:700; font-size:15px; cursor:pointer;
}
.auth-links{ text-align:center; margin-top:20px; font-size:14px; color:var(--muted); }

/* ============================================================
   PLAY PAGE (chrome-free, only used if theme fallback renders it)
   ============================================================ */
body.statefall-play{ margin:0; height:100vh; overflow:hidden; }

/* ============================================================
   COMMUNITY / FORUM (bbPress default template, dark override)
   bbPress ships hard-coded light colors on very specific
   selectors, so we match its own selectors 1:1 to win the
   cascade instead of fighting specificity generically.
   ============================================================ */
#bbpress-forums{ color:var(--ink); background:transparent; font-size:14px; line-height:1.6; }
#bbpress-forums, #bbpress-forums.bbpress-wrapper{ background:transparent; }
#bbpress-forums ul, #bbpress-forums.bbpress-wrapper ul{ background:transparent; }
#bbpress-forums > ul.bbp-forums, #bbpress-forums > ul.bbp-topics, #bbpress-forums ul.bbp-replies,
#bbpress-forums div.bbp-forums, div.bbp-forum-content ul.bbp-forums{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
}
#bbpress-forums div.even, #bbpress-forums ul.even,
#bbpress-forums div.odd, #bbpress-forums ul.odd{
  background-color:var(--panel) !important; border-bottom:1px solid var(--border);
}
#bbpress-forums div.bbp-forum-header, #bbpress-forums div.bbp-reply-header, #bbpress-forums div.bbp-topic-header{
  background-color:var(--panel-2) !important;
}
#bbpress-forums li.bbp-footer, #bbpress-forums li.bbp-header{
  background:var(--panel-2) !important; border-top:1px solid var(--border) !important;
  border-bottom:1px solid var(--border) !important; color:var(--muted); font-weight:700; text-transform:uppercase; font-size:12px; letter-spacing:1px;
}
#bbpress-forums li.bbp-header{ background:var(--panel-2) !important; }
#bbpress-forums li{ background:transparent; color:var(--ink); }
#bbpress-forums div.bbp-forum-title h3, #bbpress-forums div.bbp-reply-title h3, #bbpress-forums div.bbp-topic-title h3{
  background:transparent; color:var(--ink);
}
#bbpress-forums div.bbp-reply-content a, #bbpress-forums div.bbp-topic-content a{ color:var(--blue); }
#bbpress-forums div.bbp-reply-content code, #bbpress-forums div.bbp-reply-content pre,
#bbpress-forums div.bbp-topic-content code, #bbpress-forums div.bbp-topic-content pre{
  background-color:var(--panel-2); border:1px solid var(--border); color:var(--ink);
}
#bbpress-forums .bbp-pagination-links a, #bbpress-forums .bbp-pagination-links span.current,
#bbpress-forums .bbp-topic-pagination a{
  background:var(--panel-2); border:1px solid var(--border); color:var(--ink);
}
#bbpress-forums .bbp-pagination-links a:hover, #bbpress-forums .bbp-pagination-links span.current,
#bbpress-forums .bbp-topic-pagination a:hover{ background:var(--blue-deep); border-color:var(--blue); color:#fff; }
#bbpress-forums a{ color:var(--ink); }
#bbpress-forums a:hover{ color:var(--gold); }
#bbpress-forums .bbp-forum-title, #bbpress-forums .bbp-topic-title{ color:var(--ink); font-weight:700; }
#bbpress-forums .bbp-forum-content, #bbpress-forums .bbp-topic-content-wrapper{ color:var(--muted); font-size:13.5px; }
#bbpress-forums .bbp-forum-info, #bbpress-forums .bbp-topic-title{ padding:16px 20px; }
#bbpress-forums .bbp-forum-freshness, #bbpress-forums .bbp-topic-freshness-author,
#bbpress-forums .bbp-forum-topic-count, #bbpress-forums .bbp-forum-reply-count,
#bbpress-forums .bbp-topic-meta{ color:var(--muted); }
#bbpress-forums .bbp-breadcrumb, #bbpress-forums .bbp-breadcrumb a{ color:var(--muted); }
#bbpress-forums .bbp-breadcrumb-current{ color:var(--ink); }
#bbpress-forums fieldset{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; }
#bbpress-forums fieldset legend{ color:var(--gold); font-weight:700; padding:0 8px; }
#bbpress-forums input, #bbpress-forums textarea, #bbpress-forums select{
  background:var(--panel-2); color:var(--ink); border:1px solid var(--border); border-radius:8px; padding:10px;
}
#bbpress-forums input:focus, #bbpress-forums textarea:focus{ outline:none; border-color:var(--blue); }
#bbpress-forums #bbp-search-form input[type=submit], #bbpress-forums button, #bbpress-forums input[type=submit]{
  background:linear-gradient(135deg, var(--blue), var(--blue-deep)) !important; color:#0a1420 !important; border:none !important;
  border-radius:999px !important; padding:10px 20px !important; font-weight:700; cursor:pointer;
}
#bbpress-forums .status-spam.even, #bbpress-forums .status-trash.even,
#bbpress-forums .status-spam.odd, #bbpress-forums .status-trash.odd{ background-color:rgba(255,111,111,.12) !important; }
#bbpress-forums .quicktags-toolbar input{ background:var(--panel); }
#bbpress-forums .bbp-forums-front-header h1, #bbpress-forums h1, #bbpress-forums h2{ color:var(--ink); }
.bbpress-wrapper .bbp-breadcrumb{ margin-bottom:20px; display:block; }

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer{ border-top:1px solid var(--border); padding:48px 0; margin-top:40px; }
.footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:center; }
.footer-links{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a{ color:var(--muted); font-size:14px; }
.footer-links a:hover{ color:var(--gold); }
.footer-note{ color:var(--muted); font-size:13px; }

/* misc */
.center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }