:root{
  /* Blue Envy base palette (brighter dark blues) */
  --bg-100: #062a45; /* deep but brighter blue-envious base */
  --bg-150: #0a3b66; /* mid tone */
  --bg-200: #0f4f81; /* lighter dark blue for highlights */
  --blue-100: #bfe9ff;
  --blue-200: #8cc8ff;
  --blue-300: #6aa6ff;
  --blue-400: #4f8cff;
  --blue-500: #2f66ff;
  --blue-600: #1b4bd6;
  --accent: #ff7a59; /* warm coral accent for contrast */
  --accent-2: #ffb48f;
  --purple-100: #4b3b9f;
  --purple-200: #7b67df;
    --purple-100: #0f2b52; /* darker blue-leaning purple */
    --purple-200: #0b3b67; /* deeper blue tone */
  --text: #e6f5ff;
  --muted: #9bb3d6;
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --shadow-elev: 0 12px 36px rgba(3,10,30,0.48);
  --shadow-elev-soft: 0 8px 26px rgba(3,10,30,0.38);
  --focus-ring: 0 0 0 4px rgba(47,142,255,0.10);
}
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap');
*{box-sizing:border-box}
html,body{height:100%}
.site-root{min-height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 8% 8%, rgba(47,142,255,0.10), transparent 12%),
    radial-gradient(800px 500px at 92% 72%, rgba(255,122,89,0.04), transparent 18%),
    linear-gradient(135deg,var(--bg-100),var(--bg-200));
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:17px;
  line-height:1.6;
}
.container{max-width:1100px;margin:0 auto;padding:28px}
.site-header{background-color:var(--purple-100);backdrop-filter:blur(6px);border-bottom:2px solid rgba(11,59,103,0.12);position:sticky;top:0;z-index:60;padding:14px 0;transition:background-color .18s,backdrop-filter .18s,box-shadow .18s}
.site-header.scrolled{box-shadow:var(--shadow-elev-soft)}
.header-inner{display:flex;align-items:center;gap:16px;justify-content:space-between}
/* site logo – use the same "Great Vibes" script and gradient treatment
   that the game pages use for their titles */
.logo{
  font-family:'Great Vibes', Georgia, 'Times New Roman', serif !important;
  font-weight:400;
  text-decoration:none;
  display:inline-block;
  position:relative;
  font-size:2.2rem; /* match .page-title size */
  letter-spacing:0;
  padding-left:22px;
  background:linear-gradient(90deg,var(--accent),var(--blue-300));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.logo .tag{font-weight:600;color:rgba(255,122,89,0.85);margin-left:10px;font-size:.82rem;opacity:1}
.logo::before{content:"◉";position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--accent);font-size:0.9rem;filter:drop-shadow(0 4px 8px rgba(255,122,89,0.12))}
.logo::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:6px;border-radius:6px;background:linear-gradient(90deg,rgba(255,122,89,0.14),rgba(47,102,255,0.38));filter:blur(8px);opacity:0.98}
.menu-btn{display:none;border:0;background:transparent;font-size:1.3rem;color:var(--muted)}
.nav-list{list-style:none;padding:0;margin:0;display:flex;gap:20px;align-items:center}
.nav-list a{text-decoration:none;color:var(--muted);padding:8px 10px;border-radius:8px;transition:color .16s,background .16s,transform .18s,box-shadow .18s}
.nav-list a:hover{background:linear-gradient(90deg, rgba(255,122,89,0.06), rgba(140,200,255,0.08));color:var(--accent);transform:translateY(-1px)}
.nav-list a.active{background:linear-gradient(90deg,var(--accent),var(--blue-400));color:white;box-shadow:0 10px 30px rgba(255,122,89,0.12);transform:translateY(-1px)}
.nav-list a:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.hero{margin:36px 0;padding:42px;border-radius:20px;background-color:var(--purple-100);color:var(--text);box-shadow:var(--shadow-elev);border:1px solid rgba(255,255,255,0.04);position:relative;transition:transform .18s,box-shadow .18s}
.hero::before{display:none}
.hero h1{
  margin:0 0 8px;
  font-size:2.2rem;
  font-family:'Quicksand',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  font-weight:600;
  letter-spacing:0.6px;
  background:linear-gradient(90deg,var(--accent),var(--blue-400));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 4px 14px rgba(255,122,89,0.05);
}

/* gradient text utility for headings */
.gradient-text{
  font-family:'Great Vibes', Georgia, 'Times New Roman', serif;
  font-weight:400;
  /* start coral and fade toward a vivid blue */
  background:linear-gradient(90deg,var(--accent) 0%,var(--blue-500) 80%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 2px 6px rgba(0,0,0,0.12);
}

/* page-title mimics the logo styling exactly (use for section titles) */
.page-title{
  font-family:'Great Vibes', Georgia, 'Times New Roman', serif;
  font-weight:400;
  font-size:2.2rem;
  background:linear-gradient(90deg,var(--accent),var(--blue-300));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* smaller version for section headings */
h2.page-title{
  font-size:1.6rem;
  margin-bottom:8px;
  text-align:center;
}
.hero:focus-within{transform:translateY(-4px);box-shadow:0 20px 44px rgba(3,10,30,0.52)}
.lede{margin:0 0 18px;color:var(--muted)}
.cta-row{display:flex;gap:12px;margin-top:8px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--blue-300));color:white;text-decoration:none;box-shadow:var(--shadow-elev-soft);transition:transform .14s,box-shadow .14s,opacity .12s}
.btn:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(3,10,30,0.48)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn.muted{background:transparent;color:var(--accent);border:1px solid rgba(255,122,89,0.12)}
.btn.outline{background:transparent;border:1px solid rgba(255,122,89,0.14);color:var(--accent);transition:background .12s,color .12s,border-color .12s}
.btn.outline:hover{background:linear-gradient(90deg, rgba(255,122,89,0.06), rgba(47,102,255,0.04));border-color:rgba(255,122,89,0.22)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:22px 0}
.card{background-color:var(--purple-100);border-radius:14px;padding:18px;box-shadow:var(--shadow-elev-soft);border:1px solid rgba(255,255,255,0.04);color:var(--muted);transition:transform .16s,box-shadow .16s}
.card h3{margin:0 0 8px;color:var(--text);font-family:'Quicksand',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;font-weight:600;letter-spacing:0.2px}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(3,10,30,0.48)}
.card:focus-within{box-shadow:0 18px 44px rgba(3,10,30,0.48);outline:none}
.small-btn{text-decoration:none;color:var(--blue-300);font-weight:600;font-family:'Quicksand',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial}

/* generic small text used across pages */
.small, small{
  font-size:0.9rem;
  color:var(--muted);
}

/* specialized leaderboard description styling */


/* Use Quicksand for secondary headings and tiles to feel lighter/playful */
h2,h3,section h2,section h3{font-family:'Quicksand',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;font-weight:600;letter-spacing:0.2px}
.lede{font-family:'Quicksand',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;font-weight:400}

/* Featured card variant (accent stripe, gradient heading, accent CTA) */
.card.featured{position:relative;overflow:visible}
.card.featured::before{content:"";position:absolute;left:-8px;top:14px;bottom:14px;width:8px;border-radius:6px;background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:0 10px 30px rgba(255,122,89,0.12)}
.card.featured h3{margin:0 0 8px;background:linear-gradient(90deg,var(--accent),var(--blue-300));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.card.featured .small-btn{display:inline-block;padding:8px 12px;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--blue-300));color:white;text-decoration:none;box-shadow:0 10px 30px rgba(255,122,89,0.12)}
.card.featured p{color:var(--muted)}
/* --- game tiles & master leaderboard --- */
.game-tile{display:flex;flex-direction:column;gap:12px}
/* center button and accent color inside game tiles */
.game-tile p {margin-top:auto;text-align:center;}
.game-tile .small-btn{color:var(--accent);display:inline-block;}

/* make the entire tile feel clickable */
.game-tile{cursor:pointer;}
.game-tile:hover{box-shadow:0 18px 44px rgba(3,10,30,0.48);transform:translateY(-6px);}

.game-tile .preview{border-radius:10px;overflow:hidden}
.leaderboard-master{position:relative;overflow:hidden;padding:36px 32px;border-radius:18px;background:linear-gradient(135deg,rgba(6,42,69,0.9),rgba(15,79,129,0.96));border:2px solid;border-image:linear-gradient(135deg,rgba(255,122,89,0.8),rgba(111,196,255,0.6)) 1;margin-bottom:32px;box-shadow:0 0 60px rgba(255,122,89,0.25),0 25px 50px rgba(3,10,30,0.5),inset 0 1px 1px rgba(255,255,255,0.08)}
.leaderboard-glow{position:absolute;inset:-50%;background:radial-gradient(circle at 10% 20%,rgba(255,122,89,0.35),transparent 50%),radial-gradient(circle at 90% 10%,rgba(111,196,255,0.3),transparent 55%);filter:blur(60px);opacity:0.6;z-index:0;animation:pulse-glow 4s ease-in-out infinite}
@keyframes pulse-glow{0%,100%{opacity:0.6}50%{opacity:0.8}}
.leaderboard-master>*{position:relative;z-index:1}
.leaderboard-header{display:flex;flex-direction:column;gap:12px;margin-bottom:28px;text-align:center}
.leaderboard-title{font-family:'Great Vibes',Georgia,'Times New Roman',serif;font-weight:400;font-size:2.4rem;background:linear-gradient(135deg,#ff7a59,#6aa6ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0;text-shadow:0 4px 12px rgba(255,122,89,0.3);letter-spacing:1px}
.leaderboard-subtitle{font-size:0.95rem;color:#ffd700;margin:0;font-weight:600;letter-spacing:0.5px}

/* center titles inside game tiles */
.game-tile h3 { text-align:center; }
/* also center headings in any card for consistency */
.card h3 { text-align:center; }
.leaderboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:8px}
.leaderboard-game{min-width:0;position:relative;overflow:hidden;border-radius:12px;padding:16px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,122,89,0.2);transition:all 0.3s ease}
.leaderboard-game:hover{transform:translateY(-4px);background:rgba(0,0,0,0.3);border-color:rgba(255,122,89,0.4);box-shadow:0 12px 30px rgba(255,122,89,0.2)}
.game-avatar{width:60px;height:60px;object-fit:contain;margin-bottom:10px;filter:drop-shadow(0 4px 8px rgba(255,122,89,0.25));opacity:0.95;transition:transform 0.3s ease}
.leaderboard-game:hover .game-avatar{transform:scale(1.05);opacity:1}
.leaderboard-game h4{margin:0 0 12px;font-size:0.95rem;color:var(--text);font-weight:600;letter-spacing:0.4px;display:flex;align-items:center;gap:8px}
.leaderboard-list-small{list-style:none;padding:0;margin:0;border-radius:8px;overflow:hidden;background:rgba(0,0,0,0.25);border:1px solid rgba(255,122,89,0.15)}
.leaderboard-list-small li{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);border-bottom:1px solid rgba(255,122,89,0.08);transition:all 0.2s ease}
.leaderboard-list-small li:hover{background:linear-gradient(90deg,rgba(255,255,255,0.06),transparent);padding-left:16px}
.leaderboard-list-small li strong{color:var(--text);font-weight:600}
.leaderboard-list-small li.small{color:var(--muted)}
.leaderboard-list-small li .score{color:var(--blue-300);font-weight:700;min-width:50px;text-align:right;font-size:1rem}
.leaderboard-list-small li.rank-1{background:linear-gradient(90deg,rgba(248,213,126,0.25),transparent);border-bottom-color:rgba(248,213,126,0.3)}
.leaderboard-list-small li.rank-1 strong{color:#ffd700}
.leaderboard-list-small li.rank-2{background:linear-gradient(90deg,rgba(206,215,224,0.2),transparent);border-bottom-color:rgba(206,215,224,0.25)}
.leaderboard-list-small li.rank-2 strong{color:#e8f0f7}
.leaderboard-list-small li.rank-3,
.leaderboard-list-small li.rank-4,
.leaderboard-list-small li.rank-5{background:linear-gradient(90deg,rgba(242,176,128,0.15),transparent);border-bottom-color:rgba(242,176,128,0.2)}
.leaderboard-list-small li:last-child{border-bottom:none}
.leaderboard-list-small li .muted{color:rgba(255,255,255,0.25);margin:0 8px}

/* Master leaderboard tile display */
.leaderboard-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-top:12px}
.master-leaderboard-tile{display:flex;flex-direction:column;gap:0;position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,rgba(6,42,69,0.75),rgba(15,79,129,0.92));border:2px solid rgba(255,122,89,0.3);text-decoration:none;color:inherit;transition:all 0.3s ease;cursor:pointer;padding:0;box-shadow:0 8px 24px rgba(3,10,30,0.45)}
.master-leaderboard-tile:hover{transform:translateY(-8px);border-color:rgba(255,122,89,0.65);box-shadow:0 18px 48px rgba(255,122,89,0.25),0 0 40px rgba(111,196,255,0.25)}
.master-preview{position:relative;width:100%;min-height:220px;overflow:hidden;background:rgba(0,0,0,0.25);display:flex;align-items:center;justify-content:center;padding:16px;border-bottom:1px solid rgba(255,255,255,0.05)}
.master-preview img{max-width:260px;max-height:180px;width:auto;height:auto;object-fit:contain;display:block;filter:brightness(1.02) saturate(1.1)}
.master-game-info{flex:1;display:flex;flex-direction:column;gap:10px;padding:18px 20px 12px}
.master-game-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.master-game-info h4{margin:0;font-size:1.25rem;color:var(--text);font-weight:600;letter-spacing:0.5px}
.master-link{font-size:0.75rem;color:var(--accent);text-transform:uppercase;letter-spacing:0.14rem;font-weight:700}
.master-desc{margin:0;font-size:0.95rem;color:var(--muted);flex:1}
.master-score-list{list-style:none;margin:0;padding:0 20px 20px;display:flex;flex-direction:column;gap:10px}
.master-score-list li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);transition:transform 0.2s ease,background 0.2s ease}
.master-score-list li .rank{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.08);font-weight:600;color:var(--text);font-size:0.9rem}
.master-score-list li .name{flex:1;font-weight:600;color:var(--text)}
.master-score-list li .score{font-weight:700;color:var(--accent);font-size:1.1rem}
.master-score-list li.rank-1{background:linear-gradient(135deg,rgba(255,215,0,0.15),rgba(255,122,89,0.08));border-color:rgba(255,215,0,0.25)}
.master-score-list li.rank-1 .rank{background:linear-gradient(135deg,#ffd700,#ffb347);color:#4b2a00}
.master-score-list li.rank-2{background:linear-gradient(135deg,rgba(206,215,224,0.2),rgba(120,150,190,0.08));border-color:rgba(206,215,224,0.2)}
.master-score-list li.rank-2 .rank{background:linear-gradient(135deg,#f0f4ff,#cfd6e7);color:#1f2a44}
.master-score-list li.rank-3{background:linear-gradient(135deg,rgba(226,186,142,0.2),rgba(130,88,41,0.15));border-color:rgba(226,186,142,0.25)}
.master-score-list li.rank-3 .rank{background:linear-gradient(135deg,#f0c27b,#ff9234);color:#3a1d00}
.master-score-list li.empty{justify-content:center;font-style:italic;color:var(--muted);border-style:dashed}
.master-score-list li:hover{transform:translateX(4px);background:rgba(255,255,255,0.08)}

.site-footer{padding:28px 0;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02);margin-top:36px}
.site-footer a{color:white;text-decoration:underline;}
@media (max-width:880px){.grid{grid-template-columns:repeat(2,1fr)}.container{padding:20px}}
@media (max-width:760px){.grid{grid-template-columns:1fr}.menu-btn{display:block}.nav-list{position:absolute;right:16px;top:64px;flex-direction:column;padding:12px;background:linear-gradient(180deg, rgba(3,10,25,0.72), rgba(3,10,25,0.5));border-radius:10px;box-shadow:0 10px 40px rgba(2,8,23,0.7);transform-origin:top right;display:none;transition:opacity .22s ease,transform .22s ease}.nav-list.open{display:flex;opacity:1;transform:translateY(0)}.nav-list{opacity:0;transform:translateY(-8px)}.nav-list a{padding:8px 12px}}