/* ============================================================
   coolgames.cc — Shared Base Styles
   Dark theme • Mobile-first • Zero dependencies
   ============================================================ */

/* --- CSS Variables (Dark Theme) --- */
:root {
  --bg: #1a1a2e;
  --surface: #16213e;
  --surface-hover: #1c2a4a;
  --accent: #e2b04a;
  --accent-hover: #f0c860;
  --accent-dark: #c49a3c;
  --text: #e0e0e0;
  --text-muted: #a0a0b0;
  --text-dim: #6a6a7a;
  --border: #2a2a4a;
  --border-light: #3a3a5a;
  --success: #4caf50;
  --danger: #f44336;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --max-width: 1200px;
  --header-height: 64px;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
}

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent-hover)}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit}
::selection{background:var(--accent);color:var(--bg)}

/* --- Typography --- */
h1,h2,h3,h4,h5,h6{line-height:1.2;font-weight:700;color:#fff}
h1{font-size:clamp(1.75rem, 4vw, 2.75rem)}
h2{font-size:clamp(1.4rem, 3vw, 2rem)}
h3{font-size:clamp(1.15rem, 2.5vw, 1.5rem)}
h4{font-size:1.1rem}

/* --- Layout --- */
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 16px;
}
@media(min-width:768px){.container{padding:0 24px}}
@media(min-width:1024px){.container{padding:0 32px}}

/* --- Header --- */
.site-header{
  background:var(--surface);
  border-bottom:2px solid var(--accent);
  position:sticky;
  top:0;
  z-index:100;
  height:var(--header-height);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
}
.site-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.35rem;
  font-weight:800;
  color:#fff;
  letter-spacing:-0.5px;
}
.site-logo:hover{color:var(--accent)}
.site-logo .logo-icon{
  width:36px;
  height:36px;
  background:var(--accent);
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  color:var(--bg);
  font-weight:900;
}
.site-nav{display:flex;align-items:center;gap:8px}
.site-nav a{
  color:var(--text-muted);
  padding:6px 14px;
  border-radius:var(--radius-xs);
  font-size:0.9rem;
  font-weight:500;
  transition:color .2s,background .2s;
}
.site-nav a:hover,.site-nav a.active{color:#fff;background:rgba(255,255,255,0.06)}
/* Mobile nav toggle */
.nav-toggle{
  display:flex;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:8px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:all .3s;
}
@media(min-width:768px){.nav-toggle{display:none}}
@media(max-width:767px){
  .site-nav{
    position:fixed;
    top:var(--header-height);
    left:0;
    right:0;
    background:var(--surface);
    flex-direction:column;
    padding:16px;
    border-bottom:2px solid var(--accent);
    transform:translateY(-110%);
    opacity:0;
    transition:transform .3s,opacity .3s;
    pointer-events:none;
  }
  .site-nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .site-nav a{width:100%;padding:12px 16px;text-align:center}
}

/* --- Footer --- */
.site-footer{
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:40px 0 24px;
  margin-top:60px;
}
.site-footer .footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px 16px;
  margin-bottom:32px;
}
@media(min-width:600px){
  .site-footer .footer-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:900px){
  .site-footer .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}
}
.footer-col h4{
  color:#fff;
  margin-bottom:12px;
  font-size:0.95rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  opacity:0.9;
}
.footer-col p{color:var(--text-muted);font-size:0.85rem;line-height:1.7}
.footer-col a{
  display:block;
  color:var(--text-muted);
  font-size:0.85rem;
  padding:4px 0;
  transition:color .2s;
}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{
  border-top:1px solid var(--border);
  padding-top:20px;
  text-align:center;
  font-size:0.8rem;
  color:var(--text-dim);
}
.footer-bottom a{color:var(--text-muted)}
.footer-bottom a:hover{color:var(--accent)}

/* --- Ad Slots --- */
.ad-slot{
  background:var(--surface);
  border:1px dashed var(--border-light);
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim);
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  overflow:hidden;
  margin:0 auto;
}
.ad-banner{width:728px;max-width:100%;height:90px}
.ad-sidebar{width:300px;height:600px}
.ad-rectangle{width:300px;max-width:100%;height:250px}
.ad-label{
  text-align:center;
  font-size:0.65rem;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:0.15em;
  margin-bottom:4px;
}
/* Hide sidebar ad on mobile */
@media(max-width:1023px){.ad-sidebar{display:none}}
/* Sidebar ad sticky on desktop */
@media(min-width:1024px){
  .ad-sidebar-wrap{position:sticky;top:calc(var(--header-height) + 24px)}
}

/* --- Utility Classes --- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-center{text-align:center}
.text-muted{color:var(--text-muted)}
.text-accent{color:var(--accent)}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mt-3{margin-top:24px}
.mt-4{margin-top:32px}
.mb-2{margin-bottom:16px}
.mb-3{margin-bottom:24px}
.mb-4{margin-bottom:32px}
.hidden-mobile{display:none}
@media(min-width:768px){.hidden-mobile{display:block}}
.hidden-desktop{display:block}
@media(min-width:768px){.hidden-desktop{display:none}}

/* --- Buttons --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 24px;
  border-radius:var(--radius-xs);
  font-size:0.95rem;
  font-weight:600;
  border:none;
  transition:all .25s;
  text-decoration:none;
}
.btn-primary{
  background:var(--accent);
  color:var(--bg);
}
.btn-primary:hover{background:var(--accent-hover);color:var(--bg);transform:translateY(-1px);box-shadow:0 4px 16px rgba(226,176,74,0.3)}
.btn-secondary{
  background:rgba(255,255,255,0.08);
  color:var(--text);
}
.btn-secondary:hover{background:rgba(255,255,255,0.14);color:#fff}
.btn-sm{padding:6px 16px;font-size:0.85rem}

/* --- Section Styles --- */
.section{padding:48px 0}
@media(min-width:768px){.section{padding:64px 0}}
.section-title{
  text-align:center;
  margin-bottom:16px;
}
.section-subtitle{
  text-align:center;
  color:var(--text-muted);
  font-size:1.05rem;
  max-width:600px;
  margin:0 auto 40px;
}
@media(min-width:768px){.section-subtitle{margin-bottom:48px}}

/* --- Card Base --- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--accent);
}

/* --- Content Page Layout --- */
.content-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
@media(min-width:1024px){
  .content-layout{
    grid-template-columns:1fr 300px;
  }
}
.content-main{min-width:0}

/* --- Breadcrumbs --- */
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
  font-size:0.85rem;
  color:var(--text-muted);
  margin-bottom:20px;
}
.breadcrumbs a{color:var(--text-muted)}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs .sep{color:var(--text-dim);margin:0 4px}