/* The Beautiful Game Quiz — blog. Editorial, readable, brand-accented. */
:root{
  --ink:#15181d; --muted:#5b6572; --line:#e7e9ee; --bg:#fbfbfa; --card:#ffffff;
  --green:#15803d; --green-2:#16a34a; --navy:#0a1628; --gold:#b8860b;
  --max:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;font-size:19px;line-height:1.72;}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* Top bar */
.masthead{background:var(--navy);color:#fff}
.masthead .wrap{max-width:1040px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{font-family:'Poppins',Arial,sans-serif;font-weight:800;letter-spacing:.04em;color:#fff;font-size:15px;text-transform:uppercase}
.brand span{color:#4ade80}
.masthead nav a{color:#cbd5e1;font-family:'Poppins',Arial,sans-serif;font-size:14px;font-weight:600;margin-left:18px;letter-spacing:.02em}
.masthead nav a:hover{color:#fff;text-decoration:none}
.play-btn{display:inline-block;background:linear-gradient(135deg,#22c55e,#15803d);color:#fff!important;
  font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:14px;padding:9px 16px;border-radius:9px;margin-left:18px}
.play-btn:hover{text-decoration:none;filter:brightness(1.06)}

/* Layout */
main{max-width:var(--max);margin:0 auto;padding:44px 22px 20px}
h1,h2,h3{font-family:'Poppins',Arial,sans-serif;line-height:1.2;color:var(--ink)}
h1{font-size:40px;font-weight:800;margin:0 0 10px;letter-spacing:-.01em}
h2{font-size:27px;font-weight:700;margin:38px 0 12px}
h3{font-size:21px;font-weight:700;margin:28px 0 8px}
.kicker{font-family:'Poppins',Arial,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:13px;color:var(--green-2);margin:0 0 12px}
.byline{color:var(--muted);font-family:'Poppins',Arial,sans-serif;font-size:14px;margin:0 0 30px;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
p{margin:0 0 20px}
strong{color:var(--ink)}
blockquote{margin:28px 0;padding:6px 0 6px 22px;border-left:4px solid var(--green-2);
  font-size:23px;line-height:1.5;color:var(--ink);font-style:italic}
ul,ol{margin:0 0 22px;padding-left:24px}
li{margin:0 0 8px}
hr{border:0;border-top:1px solid var(--line);margin:36px 0}

/* Play CTA box */
.cta{background:var(--navy);color:#fff;border-radius:16px;padding:26px 28px;margin:38px 0;text-align:center}
.cta h3{color:#fff;margin:0 0 6px}
.cta p{color:#cbd5e1;font-size:16px;margin:0 0 16px;font-family:'Poppins',Arial,sans-serif}
.cta .play-btn{margin:0;font-size:16px;padding:12px 24px}

/* Blog index cards */
.hero{max-width:1040px;margin:0 auto;padding:40px 22px 8px}
.hero h1{font-size:44px}
.hero p{color:var(--muted);max-width:640px}
.grid{max-width:1040px;margin:0 auto;padding:14px 22px 40px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.post{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:24px;transition:transform .15s ease,box-shadow .15s ease}
.post:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 12px 28px rgba(10,22,40,.08)}
.post .kicker{margin-bottom:10px}
.post h2{font-size:22px;margin:0 0 8px;color:var(--ink)}
.post p{color:var(--muted);font-size:16px;font-family:Georgia,serif;margin:0}

/* Footer */
footer{background:var(--navy);color:#93a1b3;margin-top:40px}
footer .wrap{max-width:1040px;margin:0 auto;padding:26px 22px;font-family:'Poppins',Arial,sans-serif;font-size:14px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:#cbd5e1}
@media(max-width:560px){h1{font-size:32px}.hero h1{font-size:34px}main{padding-top:30px}}

/* Real question/answer list on the quiz landing pages — the content that turns a templated stub
   into something worth reading. Numbered, roomy, and the answer visually secondary to the question. */
ol.qa { list-style: none; padding: 0; margin: 18px 0; counter-reset: none; }
ol.qa li { padding: 14px 16px; margin: 0 0 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; }
ol.qa .q { margin: 0 0 6px; line-height: 1.45; }
ol.qa .a { margin: 0; opacity: 0.8; font-size: 0.95em; }
ol.qa .diff { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(74,222,128,0.15); color: #4ade80; vertical-align: middle; }