/* ============================================================
   SUNBLINK STUDIOS — site.css
   Single source of truth. Every page links this file.
   Change here → updates everywhere.
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:ital,wght@0,400;0,500;1,400&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Brand colors */
  --color-bg:            #0a0a0f;
  --color-surface:       #13131a;
  --color-surface2:      #1c1c26;
  --color-border:        #2a2a38;
  --color-border-hover:  #3a3a50;

  /* Text */
  --color-text:          #f0f0f8;
  --color-muted:         #7070a0;
  --color-hint:          #3a3a55;

  /* Accent palette */
  --color-accent:        #f5c842;   /* primary yellow */
  --color-accent-dark:   #c9a030;
  --color-accent2:       #ff6b4a;   /* coral / hot */
  --color-purple:        #9b7cff;
  --color-teal:          #3dd9c0;
  --color-green:         #4ade80;

  /* Semantic */
  --color-hot:           #ff6b4a;
  --color-new:           #3dd9c0;
  --color-top:           #f5c842;

  /* Ad slot visual (dev only — removed in production) */
  --color-ad-border:     #2a2a50;
  --color-ad-bg:         #0d0d1a;
  --color-house-border:  #3a3010;
  --color-house-bg:      #13130a;

  /* Typography */
  --font-head:  'Syne', sans-serif;
  --font-body:  'DM Sans', sans-serif;

  /* Spacing scale */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* Layout */
  --max-width:      1200px;
  --sidebar-width:  220px;
  --nav-height:     60px;

  /* Transitions */
  --transition:     0.18s ease;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background:  var(--color-bg);
  color:       var(--color-text);
  font-family: var(--font-body);
  font-size:   15px;
  line-height: 1.6;
  min-height:  100vh;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-body); }
ul, ol { list-style: none; }

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-head);
  font-weight:    800;
  line-height:    1.1;
  letter-spacing: -0.03em;
  color:          var(--color-text);
}

h1 { font-size: clamp(32px, 6vw, 56px); }
h2 { font-size: clamp(22px, 4vw, 32px); }
h3 { font-size: 18px; }
h4 { font-size: 15px; }

.text-accent  { color: var(--color-accent); }
.text-coral   { color: var(--color-accent2); }
.text-purple  { color: var(--color-purple); }
.text-teal    { color: var(--color-teal); }
.text-muted   { color: var(--color-muted); }

/* ── Layout Utilities ─────────────────────────────────────── */
.container {
  max-width:   var(--max-width);
  margin:      0 auto;
  padding:     0 var(--space-lg);
}

.page-layout {
  display:               grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap:                   var(--space-lg);
  align-items:           start;
}

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.gap-sm      { gap: var(--space-sm); }
.gap-md      { gap: var(--space-md); }

/* ── Navigation ───────────────────────────────────────────── */
.site-nav {
  position:      sticky;
  top:           0;
  z-index:       100;
  height:        var(--nav-height);
  background:    rgba(10, 10, 15, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  display:       flex;
  align-items:   center;
}

.site-nav .container {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
}

.nav-logo {
  font-family:    var(--font-head);
  font-size:      20px;
  font-weight:    800;
  letter-spacing: -0.5px;
  color:          var(--color-text);
}
.nav-logo .accent { color: var(--color-accent); }

.nav-links {
  display: flex;
  gap:     var(--space-lg);
}
.nav-links a {
  font-size:   14px;
  color:       var(--color-muted);
  transition:  color var(--transition);
  position:    relative;
  padding-bottom: 2px;
}
.nav-links a::after {
  content:    '';
  position:   absolute;
  bottom:     -2px; left: 0;
  width:      0; height: 2px;
  background: var(--color-accent);
  transition: width var(--transition);
  border-radius: var(--radius-pill);
}
.nav-links a:hover         { color: var(--color-text); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a.active        { color: var(--color-text); }

.nav-right { display: flex; align-items: center; gap: var(--space-sm); }

.hamburger {
  display:        none;
  flex-direction: column;
  gap:            5px;
  background:     none;
  border:         none;
  padding:        var(--space-sm);
}
.hamburger span {
  display:       block;
  width:         22px; height: 2px;
  background:    var(--color-text);
  border-radius: var(--radius-pill);
  transition:    transform var(--transition), opacity var(--transition);
}

.mobile-menu {
  display:       none;
  flex-direction:column;
  background:    var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding:       var(--space-md) var(--space-lg);
  gap:           var(--space-md);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size:  15px;
  color:      var(--color-muted);
  padding:    var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}
.mobile-menu a:hover { color: var(--color-text); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-sm);
  padding:       10px 22px;
  border-radius: var(--radius-md);
  font-size:     14px;
  font-weight:   500;
  border:        none;
  transition:    all var(--transition);
  white-space:   nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-accent);
  color:      #0a0a0f;
}
.btn-primary:hover { background: var(--color-accent-dark); }

.btn-ghost {
  background: transparent;
  color:      var(--color-text);
  border:     1px solid var(--color-border);
}
.btn-ghost:hover { border-color: var(--color-border-hover); background: var(--color-surface); }

.btn-purple {
  background: var(--color-purple);
  color:      #fff;
}
.btn-purple:hover { opacity: 0.88; }

.btn-sm { padding: 6px 14px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-lg { padding: 13px 30px; font-size: 16px; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition:    border-color var(--transition), transform var(--transition);
}
.card:hover { border-color: var(--color-border-hover); }

/* ── Badges / Pills ───────────────────────────────────────── */
.badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       2px 9px;
  border-radius: var(--radius-pill);
  font-size:     11px;
  font-weight:   500;
  border:        1px solid transparent;
}
.badge-hot    { background: #ff6b4a18; color: var(--color-hot);    border-color: #ff6b4a44; }
.badge-new    { background: #3dd9c018; color: var(--color-new);    border-color: #3dd9c044; }
.badge-top    { background: #f5c84218; color: var(--color-top);    border-color: #f5c84244; }
.badge-purple { background: #9b7cff18; color: var(--color-purple); border-color: #9b7cff44; }

.live-dot {
  width:      6px; height: 6px;
  border-radius: 50%;
  background: var(--color-teal);
  animation:  pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ── Stats Bar ────────────────────────────────────────────── */
.stats-bar {
  display:         flex;
  justify-content: center;
  gap:             var(--space-xl);
  padding:         var(--space-md) 0;
  border-top:      1px solid var(--color-border);
  border-bottom:   1px solid var(--color-border);
}
.stat-val {
  font-family: var(--font-head);
  font-size:   22px;
  font-weight: 700;
}
.stat-lbl { font-size: 12px; color: var(--color-muted); margin-top: 2px; }

/* ── Category Chips ───────────────────────────────────────── */
.cat-chips {
  display:    flex;
  gap:        var(--space-sm);
  flex-wrap:  wrap;
  margin:     var(--space-md) 0;
}
.cat-chip {
  background:    var(--color-surface2);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding:       6px 14px;
  font-size:     13px;
  color:         var(--color-muted);
  transition:    all var(--transition);
}
.cat-chip:hover, .cat-chip.active {
  background:   var(--color-accent);
  color:        #0a0a0f;
  border-color: var(--color-accent);
}

/* ── Section Header ───────────────────────────────────────── */
.section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--space-md);
}
.section-title {
  font-family: var(--font-head);
  font-size:   18px;
  font-weight: 700;
}
.section-title .accent { color: var(--color-accent); }
.see-all-link {
  font-size:   13px;
  color:       var(--color-muted);
  transition:  color var(--transition);
}
.see-all-link:hover { color: var(--color-text); }

/* ── Game Cards Grid ──────────────────────────────────────── */
.games-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   var(--space-md);
}

.game-card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  transition:    border-color var(--transition), transform var(--transition);
  cursor:        pointer;
}
.game-card:hover {
  border-color: var(--color-accent);
  transform:    translateY(-3px);
}

.game-thumb {
  aspect-ratio: 16/9;
  display:      flex;
  align-items:  center;
  justify-content: center;
  font-size:    40px;
  position:     relative;
  background:   var(--color-surface2);
}
.game-thumb .badge {
  position: absolute;
  top:      8px; left: 8px;
}

.game-info { padding: 10px 12px; }
.game-name {
  font-size:   14px;
  font-weight: 500;
  margin-bottom: 4px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.game-meta {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}
.game-plays  { font-size: 12px; color: var(--color-muted); }
.game-rating { font-size: 12px; color: var(--color-accent); }

/* ── Ranked List ──────────────────────────────────────────── */
.rank-list { display: flex; flex-direction: column; gap: var(--space-sm); }

.rank-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-md);
  padding:       10px 14px;
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor:        pointer;
  transition:    border-color var(--transition);
}
.rank-item:hover { border-color: var(--color-accent2); }

.rank-num {
  font-family: var(--font-head);
  font-size:   16px;
  font-weight: 800;
  width:       24px;
  text-align:  center;
  flex-shrink: 0;
}
.rank-num.r1 { color: var(--color-accent); }
.rank-num.r2 { color: var(--color-muted); }
.rank-num.r3 { color: #cd7f32; }
.rank-num.rx { color: var(--color-border); }

.rank-icon {
  font-size:       22px;
  width:           40px; height: 40px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--color-surface2);
  border-radius:   var(--radius-sm);
  flex-shrink:     0;
}
.rank-info   { flex: 1; min-width: 0; }
.rank-name   { font-size: 14px; font-weight: 500; }
.rank-cat    { font-size: 12px; color: var(--color-muted); }
.rank-stat   { text-align: right; }
.rank-val    { font-size: 14px; font-weight: 500; color: var(--color-teal); }
.rank-lbl    { font-size: 11px; color: var(--color-muted); }

/* ── Tabs ─────────────────────────────────────────────────── */
.tabs {
  display:       flex;
  gap:           3px;
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       4px;
  margin-bottom: var(--space-md);
}
.tab-btn {
  flex:          1;
  padding:       7px;
  text-align:    center;
  font-size:     13px;
  color:         var(--color-muted);
  background:    none;
  border:        none;
  border-radius: var(--radius-sm);
  transition:    all var(--transition);
}
.tab-btn:hover  { color: var(--color-text); }
.tab-btn.active {
  background:  var(--color-accent);
  color:       #0a0a0f;
  font-weight: 500;
}

/* ── Daily Challenge ──────────────────────────────────────── */
.daily-challenge {
  display:       flex;
  align-items:   center;
  gap:           var(--space-lg);
  background:    var(--color-surface);
  border:        1px solid #9b7cff44;
  border-radius: var(--radius-lg);
  padding:       var(--space-lg);
  margin:        var(--space-lg) 0;
}
.daily-icon  { font-size: 52px; flex-shrink: 0; }
.daily-title {
  font-family: var(--font-head);
  font-size:   22px;
  font-weight: 700;
  margin:      var(--space-xs) 0 var(--space-sm);
}
.daily-desc  { font-size: 14px; color: var(--color-muted); margin-bottom: var(--space-md); }

/* ── Sidebar Widgets ──────────────────────────────────────── */
.sidebar { display: flex; flex-direction: column; gap: var(--space-md); }

.sidebar-widget {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}
.widget-header {
  display:       flex;
  align-items:   center;
  gap:           var(--space-sm);
  padding:       12px var(--space-md);
  border-bottom: 1px solid var(--color-border);
  font-size:     13px;
  font-weight:   500;
}
.widget-body { padding: var(--space-sm) var(--space-md); }

.mini-game-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-sm);
  padding:       8px 0;
  border-bottom: 1px solid var(--color-border);
  cursor:        pointer;
}
.mini-game-item:last-child { border-bottom: none; }
.mini-game-item:hover .mini-game-name { color: var(--color-accent); }
.mini-game-icon {
  font-size:       18px;
  width:           32px; height: 32px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--color-surface2);
  border-radius:   var(--radius-sm);
  flex-shrink:     0;
}
.mini-game-info  { flex: 1; }
.mini-game-name  { font-size: 13px; font-weight: 500; transition: color var(--transition); }
.mini-game-plays { font-size: 11px; color: var(--color-muted); }

/* ── Mobile Teaser ────────────────────────────────────────── */
.mobile-teaser {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           var(--space-lg);
  background:    var(--color-surface2);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-lg);
  margin:        var(--space-lg) 0;
}
.mobile-teaser-tag  { font-size: 12px; color: var(--color-teal); font-weight: 500; margin-bottom: 4px; }
.mobile-teaser h3   { font-size: 18px; margin-bottom: 4px; }
.mobile-teaser p    { font-size: 13px; color: var(--color-muted); }
.mobile-game-pills  { display: flex; gap: var(--space-sm); }
.mobile-game-pill {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       8px 14px;
  text-align:    center;
  font-size:     12px;
  color:         var(--color-muted);
}
.mobile-game-pill-icon { font-size: 22px; display: block; margin-bottom: 3px; }

/* ── AD SLOTS ─────────────────────────────────────────────── */
/*
  These slots are wired by ads.js.
  - When Google AdSense is live: ads.js injects the AdSense <ins> tag
  - When not approved yet: ads.js injects your house ad HTML
  Do NOT delete these classes — ads.js targets them by class name.
*/

.ad-slot {
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   var(--radius-md);
  overflow:        hidden;
  background:      var(--color-ad-bg);
  border:          1px dashed var(--color-ad-border);
  position:        relative;
}

/* Top leaderboard banner — 728×90 */
.ad-leaderboard {
  width:      100%;
  height:     90px;
  margin:     var(--space-sm) 0 var(--space-md);
}

/* Mid-page banner — 728×90 */
.ad-mid-page {
  width:      100%;
  height:     90px;
  margin:     var(--space-lg) 0;
}

/* Sidebar rectangle — 300×250 (highest CPM unit) */
.ad-sidebar-rect {
  width:      100%;
  height:     250px;
}

/* Sidebar house ad — 300×120 — your own mobile game promo */
.ad-sidebar-house {
  width:      100%;
  height:     120px;
  background: var(--color-house-bg);
  border-color: var(--color-house-border);
}

/* In-game interstitial — shown between game loads */
.ad-interstitial {
  width:      100%;
  height:     90px;
  margin:     var(--space-md) 0;
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  border-top:    1px solid var(--color-border);
  padding:       var(--space-lg) 0;
  margin-top:    var(--space-xl);
}
.footer-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-md);
}
.footer-logo {
  font-family: var(--font-head);
  font-size:   17px;
  font-weight: 800;
}
.footer-logo .accent { color: var(--color-accent); }
.footer-links {
  display: flex;
  gap:     var(--space-lg);
}
.footer-links a { font-size: 13px; color: var(--color-muted); transition: color var(--transition); }
.footer-links a:hover { color: var(--color-text); }
.footer-copy { font-size: 12px; color: var(--color-muted); }

/* ── Responsive Breakpoints ───────────────────────────────── */

/* Tablet — ≤ 900px */
@media (max-width: 900px) {
  .page-layout {
    grid-template-columns: 1fr;
  }
  .sidebar { display: none; } /* sidebar collapses on tablet */
  .ad-leaderboard,
  .ad-mid-page { height: 60px; }
  .stats-bar  { gap: var(--space-lg); }
}

/* Mobile — ≤ 600px */
@media (max-width: 600px) {
  :root { --space-lg: 16px; }

  .nav-links   { display: none; }
  .hamburger   { display: flex; }
  .nav-cta     { display: none; }

  h1 { letter-spacing: -1.5px; }

  .games-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-bar {
    gap:         var(--space-md);
    flex-wrap:   wrap;
  }
  .stat-val { font-size: 18px; }

  .daily-challenge {
    flex-direction: column;
    text-align:     center;
  }
  .daily-icon { font-size: 40px; }
  .daily-title { font-size: 18px; }

  .mobile-teaser {
    flex-direction: column;
    text-align:     center;
  }
  .mobile-game-pills { justify-content: center; }

  .tabs { overflow-x: auto; }
  .tab-btn { white-space: nowrap; font-size: 12px; }

  .rank-item { padding: 8px 10px; gap: var(--space-sm); }
  .rank-icon { width: 32px; height: 32px; font-size: 16px; }

  .footer-inner { flex-direction: column; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }

  .ad-leaderboard,
  .ad-mid-page { height: 50px; }

  .container { padding: 0 var(--space-md); }
}

/* Very small — ≤ 380px */
@media (max-width: 380px) {
  .games-grid { grid-template-columns: 1fr; }
  .cat-chips  { gap: 6px; }
  .cat-chip   { font-size: 12px; padding: 5px 10px; }
}