/* GameplayZone — Guides & devlog article styles */
:root {
  --bg:#0d0e1a; --bg2:#13142a; --bg3:#1a1c35; --card:#1e2040; --card2:#252848;
  --border:#2e3260; --accent:#6c63ff; --accent2:#a78bfa; --accent3:#38bdf8;
  --gold:#fbbf24; --green:#22c55e; --red:#f87171; --orange:#fb923c;
  --text:#e2e8f0; --text2:#94a3b8; --text3:#64748b;
  --radius:14px; --shadow:0 8px 32px rgba(0,0,0,.45);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;line-height:1.6;}
a{color:inherit;text-decoration:none;}
button,a,[onclick]{touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;}
::-webkit-scrollbar{width:6px;} ::-webkit-scrollbar-track{background:var(--bg2);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

/* ── NAV ── */
.site-nav{position:sticky;top:0;z-index:100;background:rgba(13,14,26,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;height:58px;}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.1rem;color:var(--text);letter-spacing:.02em;}
.nav-logo span{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.nav-links{display:flex;align-items:center;gap:6px;}
.nav-back{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--text2);padding:7px 14px;border:1px solid var(--border);border-radius:20px;transition:all .2s;}
.nav-back:hover{border-color:var(--accent2);color:var(--accent2);}
.nav-back svg{width:14px;height:14px;}

/* ── HUB ── */
.hub-hero{max-width:1000px;margin:0 auto;padding:52px 24px 28px;text-align:center;}
.hub-hero h1{font-family:'Fredoka One',cursive;font-size:clamp(2rem,6vw,3rem);line-height:1.1;margin-bottom:14px;color:#fff;}
.hub-hero p{font-size:1.08rem;color:var(--text2);max-width:640px;margin:0 auto;}
.hub-wrap{max-width:1000px;margin:0 auto;padding:8px 24px 60px;}
.hub-section-title{font-family:'Fredoka One',cursive;font-size:1.3rem;color:#fff;margin:32px 0 16px;display:flex;align-items:center;gap:9px;}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.guide-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;transition:all .22s;display:flex;flex-direction:column;gap:10px;}
.guide-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow);}
.guide-card .g-kicker{font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent2);}
.guide-card h3{font-size:1.2rem;color:#fff;line-height:1.25;}
.guide-card p{font-size:.92rem;color:var(--text2);flex:1;}
.guide-card .g-meta{font-size:.78rem;color:var(--text3);display:flex;align-items:center;gap:12px;}
.g-tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:20px;background:rgba(108,99,255,.16);border:1px solid rgba(108,99,255,.35);color:var(--accent2);}
.g-tag.devlog{background:rgba(56,189,248,.14);border-color:rgba(56,189,248,.35);color:var(--accent3);}
.g-tag.roundup{background:rgba(34,197,94,.13);border-color:rgba(34,197,94,.35);color:#4ade80;}

/* ── ARTICLE ── */
.article{max-width:760px;margin:0 auto;padding:8px 24px 60px;}
.article-head{padding:44px 0 22px;border-bottom:1px solid var(--border);margin-bottom:30px;}
.breadcrumb{font-size:.82rem;color:var(--text3);margin-bottom:18px;}
.breadcrumb a:hover{color:var(--accent2);}
.article-tags{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.article h1{font-family:'Fredoka One',cursive;font-size:clamp(1.8rem,5vw,2.6rem);line-height:1.15;color:#fff;margin-bottom:14px;}
.article-standfirst{font-size:1.12rem;color:var(--text2);line-height:1.6;}
.article-byline{font-size:.82rem;color:var(--text3);margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.article-body h2{font-family:'Fredoka One',cursive;font-size:1.5rem;color:#fff;margin:34px 0 12px;}
.article-body h3{font-size:1.15rem;color:var(--accent2);margin:24px 0 8px;font-weight:800;}
.article-body p{font-size:1.02rem;color:var(--text);margin-bottom:16px;line-height:1.7;}
.article-body ul,.article-body ol{margin:0 0 18px 22px;color:var(--text);}
.article-body li{margin-bottom:8px;line-height:1.65;}
.article-body strong{color:#fff;}
.article-body a{color:var(--accent2);text-decoration:underline;text-underline-offset:2px;}
.callout{background:var(--bg3);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:16px 18px;margin:20px 0;font-size:.98rem;color:var(--text2);}
.callout strong{color:var(--accent2);}
.play-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(108,99,255,.14),rgba(167,139,250,.08));border:1px solid rgba(108,99,255,.35);border-radius:var(--radius);padding:22px 24px;margin:34px 0;}
.play-cta .pc-text strong{color:#fff;font-size:1.1rem;}
.play-cta .pc-text p{color:var(--text2);font-size:.9rem;margin:4px 0 0;}
.btn-play{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:800;font-size:.98rem;border-radius:50px;border:none;box-shadow:0 4px 20px rgba(108,99,255,.45);transition:all .2s;white-space:nowrap;}
.btn-play:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(108,99,255,.6);}
.btn-play svg{width:16px;height:16px;}
.stat-table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:.95rem;}
.stat-table th,.stat-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);}
.stat-table th{color:var(--accent2);font-weight:800;background:var(--bg3);}
.stat-table td:first-child{font-weight:700;color:#fff;}
.related{margin-top:44px;padding-top:28px;border-top:1px solid var(--border);}
.related h2{font-family:'Fredoka One',cursive;font-size:1.3rem;color:#fff;margin-bottom:16px;}
.related-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.related-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;transition:all .2s;}
.related-card:hover{border-color:var(--accent2);transform:translateY(-3px);}
.related-card h3{font-size:1rem;color:#fff;margin-bottom:5px;}
.related-card p{font-size:.85rem;color:var(--text2);}

/* ── FOOTER ── */
footer{border-top:1px solid var(--border);padding:32px 24px;text-align:center;background:var(--bg2);}
.footer-links{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:14px;}
.footer-links a{font-size:.85rem;color:var(--text2);transition:color .2s;}
.footer-links a:hover{color:var(--accent2);}
.footer-copy{font-size:.78rem;color:var(--text3);}

@media (max-width:640px){
  .hub-hero{padding:36px 20px 20px;}
  .article-head{padding:30px 0 18px;}
}