/* Shared styles for Make America Game Again content pages */
:root{
  --bg:#06080f; --panel:#0c1122; --line:#1d2740;
  --gold:#ffd34d; --red:#d42a1f; --mut:#76809c; --ink:#dfe4f2;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink);
           font-family:system-ui,'Segoe UI',Arial,sans-serif; line-height:1.65; }
a{ color:#9fb4e8; }

/* header / nav */
.site-head{ display:flex; align-items:center; gap:16px; padding:12px 20px;
            border-bottom:1px solid var(--line); flex-wrap:wrap;
            position:sticky; top:0; z-index:20;
            background:rgba(6,8,15,.96); backdrop-filter:blur(6px); }
.logo{ margin:0; font:900 22px Impact,'Arial Black',sans-serif; letter-spacing:1px;
       text-decoration:none; white-space:nowrap; }
.logo .c1{ color:#fff; } .logo .c2{ color:var(--red); }
nav.main{ display:flex; gap:4px; flex:1; flex-wrap:wrap; }
nav.main a{ color:var(--ink); text-decoration:none; font-size:14px;
            padding:6px 11px; border-radius:7px; }
nav.main a:hover, nav.main a.active{ background:#16203a; color:#fff; }
.play-btn{ background:var(--red); color:#fff; border:2px solid var(--gold);
           border-radius:8px; padding:7px 15px; font-weight:800;
           text-decoration:none; font-size:14px; white-space:nowrap; }
.play-btn:hover{ filter:brightness(1.1); }

/* content */
main.wrap{ max-width:840px; margin:0 auto; padding:26px 18px 64px; }
main.wrap.wide{ max-width:1040px; }
.crumb{ color:var(--mut); font-size:13px; margin-bottom:2px; }
h1{ font:900 34px Impact,'Arial Black',sans-serif; letter-spacing:1px; margin:10px 0 8px; }
h2{ font-size:22px; color:var(--gold); margin:32px 0 8px; }
h3{ font-size:17px; margin:22px 0 4px; color:#fff; }
p, li{ color:#c4cce0; font-size:16px; }
.lede{ font-size:18px; color:var(--ink); }
ul,ol{ padding-left:22px; } li{ margin:6px 0; }
strong{ color:#eef1f8; }
.callout{ background:var(--panel); border:1px solid var(--line);
          border-left:3px solid var(--gold); border-radius:8px;
          padding:14px 18px; margin:20px 0; }
.callout p:last-child{ margin-bottom:0; } .callout p:first-child{ margin-top:0; }

/* tiles & cards */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin:18px 0; }
.tile{ display:block; background:var(--panel); border:1px solid var(--line);
       border-radius:10px; padding:18px; text-decoration:none; color:var(--ink);
       transition:transform .15s, border-color .15s; }
.tile:hover{ transform:translateY(-3px); border-color:var(--gold); }
.tile h3{ margin:0 0 6px; } .tile p{ font-size:14px; color:var(--mut); margin:0; }
.tile .em{ font-size:30px; }

.fighter-card{ background:var(--panel); border:1px solid var(--line);
               border-radius:12px; padding:20px 22px; margin:20px 0; }
.fighter-card h3{ margin-top:0; font-size:20px; }
.fighter-card .nick{ color:var(--gold); font-size:14px; font-weight:700; }
.fighter-card .stats{ display:flex; gap:18px; flex-wrap:wrap; margin:12px 0;
                      font-size:13px; color:var(--mut); }
.fighter-card .stats b{ color:var(--ink); }

.cta-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:28px 0 6px; }

/* footer */
footer{ border-top:1px solid var(--line); color:var(--mut); font-size:13px;
        text-align:center; padding:20px 16px; margin-top:20px; }
footer a{ color:#9fb4e8; }
footer p{ margin:6px 0; }
.disclaim{ font-size:12px; color:#5e667c; max-width:680px; margin:8px auto; }

@media (max-width:640px){
  nav.main{ order:3; width:100%; }
  h1{ font-size:28px; }
}