:root {
  --font-body: system-ui, Arial, sans-serif;
  --line-height: 1.55;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --transition-fast: 0.15s ease;
  --max-width: 900px;

  /* Default (fallback) palette */
  --color-bg: #121212;
  --color-panel: #181818;
  --color-border: #222;
  --color-text: #ddd;
  --color-muted: #777;
  --color-accent: #0ff;
  --color-accent-alt: #6ef;
  --color-glow: rgba(0,255,255,0.45);
  --color-quote-bg: #182026;
  --color-card-bg: #181d22;
  --color-card-border: #1f2a33;
}

/* THEME VARIANTS -------------------------------------------------- */
body.theme-2048 {
  --color-bg:#121212; --color-panel:#181818; --color-border:#222; --color-text:#ddd; --color-muted:#777; --color-accent:#ff0; --color-accent-alt:#fff59a; --color-glow:rgba(255,255,0,0.45); --color-quote-bg:#202010; --color-card-bg:#181d12; --color-card-border:#282c18;
}
body.theme-flappy {
  --color-bg:#101014; --color-panel:#151522; --color-border:#222235; --color-text:#e9e9f5; --color-muted:#aaa; --color-accent:#ffd92c; --color-accent-alt:#ffe783; --color-glow:rgba(255,217,44,0.45); --color-quote-bg:#1e1e2c; --color-card-bg:#1d1d2a; --color-card-border:#27273a;
}
body.theme-breakout {
  --color-bg:#121212; --color-panel:#181818; --color-border:#222; --color-text:#ddd; --color-muted:#777; --color-accent:#0ff; --color-accent-alt:#9fe; --color-glow:rgba(0,255,255,0.55); --color-quote-bg:#182026; --color-card-bg:#181d22; --color-card-border:#1f2a33;
}
body.theme-pong {
  --color-bg:#081416; --color-panel:#0d2226; --color-border:#12373f; --color-text:#ddf9ff; --color-muted:#6ca0a7; --color-accent:#39edff; --color-accent-alt:#9cf3ff; --color-glow:rgba(57,237,255,0.45); --color-quote-bg:#0e262b; --color-card-bg:#0e262b; --color-card-border:#14373f;
}
body.theme-asteroids {
  --color-bg:#060a14; --color-panel:#081426; --color-border:#0e223b; --color-text:#d9ebff; --color-muted:#6ea0bb; --color-accent:#7cc4ff; --color-accent-alt:#b5deff; --color-glow:rgba(124,196,255,0.45); --color-quote-bg:#0a1a29; --color-card-bg:#0a1a29; --color-card-border:#12354d;
}
body.theme-minesweeper {
  --color-bg:#10161a; --color-panel:#132026; --color-border:#1d3440; --color-text:#cfe7ef; --color-muted:#6a8b94; --color-accent:#48eaff; --color-accent-alt:#9ae9ff; --color-glow:rgba(72,234,255,0.4); --color-quote-bg:#162e37; --color-card-bg:#15252c; --color-card-border:#1d3540;
}
body.theme-sudoku {
  --color-bg:#181818; --color-panel:#1f1f1f; --color-border:#2c2c2c; --color-text:#eee8b5; --color-muted:#b3ab7a; --color-accent:#ffeb3b; --color-accent-alt:#fff59d; --color-glow:rgba(255,235,59,0.4); --color-quote-bg:#232018; --color-card-bg:#242424; --color-card-border:#333;
}
body.theme-puzzle { /* generic fallback for logic/pattern */
  --color-bg:#121318; --color-panel:#1a1c23; --color-border:#252832; --color-text:#e2e6f0; --color-muted:#8b93a3; --color-accent:#5fa8ff; --color-accent-alt:#a8d3ff; --color-glow:rgba(95,168,255,0.45); --color-quote-bg:#202736; --color-card-bg:#1d2430; --color-card-border:#293241;
}
body.theme-nonogram {
  --color-bg:#101318; --color-panel:#161b22; --color-border:#232b36; --color-text:#e1e7f2; --color-muted:#8a94a3; --color-accent:#6fb3ff; --color-accent-alt:#b4dbff; --color-glow:rgba(111,179,255,0.45); --color-quote-bg:#1c2530; --color-card-bg:#1a222d; --color-card-border:#273240;
}
body.theme-memory {
  --color-bg:#18121b; --color-panel:#231a26; --color-border:#352836; --color-text:#f2e4f6; --color-muted:#b29fb8; --color-accent:#ff74d4; --color-accent-alt:#ffb5ea; --color-glow:rgba(255,116,212,0.45); --color-quote-bg:#2c1f31; --color-card-bg:#271d2a; --color-card-border:#3a2a3f;
}
body.theme-simon {
  --color-bg:#0f1214; --color-panel:#161c1f; --color-border:#202a2e; --color-text:#d5faff; --color-muted:#7fa3aa; --color-accent:#32e3ff; --color-accent-alt:#87f0ff; --color-glow:rgba(50,227,255,0.45); --color-quote-bg:#152127; --color-card-bg:#182429; --color-card-border:#25363c;
}

/* BASE LAYOUT ------------------------------------------------------ */
body { background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); margin:0; line-height:var(--line-height); }
header { background:var(--color-panel); padding:12px 20px; border-bottom:1px solid var(--color-border); }
main { max-width:var(--max-width); margin:20px auto 60px; padding:0 16px 40px; }
footer { max-width:var(--max-width); margin:10px auto 40px; padding:0 16px; font-size:.8rem; color:var(--color-muted); }
/* Standard site footer extension */
.site-footer { max-width:var(--max-width); margin:40px auto 60px; padding:16px 16px 32px; font-size:.75rem; line-height:1.4; color:var(--color-muted); text-align:center; border-top:1px solid var(--color-border); background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(255,255,255,0.02) 100%); }
.site-footer a { color:var(--color-accent); }
.site-footer a:hover { color:var(--color-accent-alt); }
.site-footer .disclosure { margin-top:10px; font-size:.7rem; color:var(--color-muted); }

/* Ad slot placeholders (prevent CLS before ads load) */
.ad-slot { display:block; margin:18px auto; text-align:center; min-height:90px; background:var(--color-panel); border:1px dashed var(--color-border); border-radius:var(--radius-md); color:var(--color-muted); font-size:.65rem; letter-spacing:.5px; padding:4px; }
.ad-slot.small { min-height:60px; }
.ad-slot.leaderboard { min-height:90px; }
.ad-slot.rectangle { min-height:250px; }
.ad-slot:empty:before { content:"Ad space"; opacity:.35; }

/* TYPOGRAPHY ------------------------------------------------------- */
h1 { margin:0; font-size:1.9rem; color:var(--color-accent); font-weight:600; }
h2 { color:var(--color-accent); margin-bottom:8px; font-size:1.35rem; }
h3 { color:var(--color-accent-alt); margin-top:22px; margin-bottom:6px; font-size:1.05rem; }

/* SKIP LINK ------------------------------------------------------- */
.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:static; width:auto; height:auto; background:var(--color-accent); color:#000; padding:6px 12px; border-radius:var(--radius-sm); font-weight:600; box-shadow:0 0 0 3px var(--color-glow); }

/* GLOBAL NAV ------------------------------------------------------ */
.site-nav { background:var(--color-panel); border-bottom:1px solid var(--color-border); box-shadow:0 2px 8px -4px var(--color-glow); position:sticky; top:0; z-index:50; }
.site-nav-inner { max-width:var(--max-width); margin:0 auto; display:flex; align-items:center; gap:18px; padding:10px 16px; flex-wrap:wrap; }
.brand { font-weight:600; letter-spacing:.5px; color:var(--color-accent); font-size:1.05rem; }
.nav-links a { margin-right:14px; font-size:.9rem; font-weight:500; }
.nav-links a:last-child { margin-right:0; }
.nav-spacer { flex:1; }
.nav-cta { background:var(--color-accent); color:#000; padding:6px 14px; border-radius:var(--radius-md); font-size:.8rem; font-weight:600; box-shadow:0 0 8px var(--color-glow); }
.nav-cta:hover { filter:brightness(1.1); }

@media (max-width:640px){
  .site-nav-inner { gap:10px; }
  .nav-links a { margin-right:10px; }
}

/* LINKS ------------------------------------------------------------ */
a { color:var(--color-accent); text-decoration:none; transition:color var(--transition-fast); }
a:hover { color:var(--color-accent-alt); }

/* GAME WRAPPER ----------------------------------------------------- */
#gameWrapper { text-align:center; position:relative; }
canvas { display:block; margin:24px auto 8px; border:2px solid var(--color-accent); background:#06090d; box-shadow:0 0 18px -4px var(--color-accent), 0 0 14px -6px var(--color-accent-alt) inset; }
#score { color:var(--color-accent); font-family:monospace; font-size:1.15em; margin-top:4px; }

/* BUTTONS ---------------------------------------------------------- */
#startBtn, #restartBtn { font-size:1em; padding:8px 24px; margin:4px auto 12px; cursor:pointer; background:var(--color-accent); color:#000; border:0; border-radius:var(--radius-md); font-weight:600; box-shadow:0 0 12px var(--color-glow); transition:filter var(--transition-fast), transform var(--transition-fast); }
#startBtn:hover, #restartBtn:hover { filter:brightness(1.1); }
#startBtn:active, #restartBtn:active { transform:translateY(1px); }

/* GRID / CARD UTILITIES ------------------------------------------- */
.tips-grid, .patterns-grid, .tech-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:12px; }
.tip, .pattern, .tech, .info-card { background:var(--color-card-bg); padding:12px 14px; border:1px solid var(--color-card-border); border-radius:var(--radius-md); font-size:.9rem; }

/* FAQ -------------------------------------------------------------- */
.faq details { background:var(--color-card-bg); margin:10px 0; padding:10px 14px; border:1px solid var(--color-card-border); border-radius:var(--radius-md); }
.faq summary { cursor:pointer; font-weight:600; color:var(--color-accent-alt); }

/* QUOTE ------------------------------------------------------------ */
blockquote { margin:14px 0; padding:12px 18px; background:var(--color-quote-bg); border-left:4px solid var(--color-accent); border-radius:var(--radius-sm); font-size:.92rem; }

/* META BOX --------------------------------------------------------- */
.meta-box { background:var(--color-panel); padding:12px 14px; border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:.85rem; margin-top:28px; }

/* INTERNAL LINKS --------------------------------------------------- */
.internal-links a { display:inline-block; margin:4px 10px 0 0; font-size:.83rem; }

/* RESPONSIVE ------------------------------------------------------- */
@media (max-width:640px){
  h1 { font-size:1.55rem; }
  canvas { width:100%; height:auto; }
}