@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Quicksand:wght@400;600&display=swap');
:root{
  --bg: #fff7f0;
  --bg-soft: #ffeede;
  --surface: #ffffff;
  --text: #1a1226;
  --muted: #7a6c80;
  --border: rgba(0,0,0,0.08);
  --shadow: 0 20px 60px -20px rgba(204,80,40,0.25);
  --primary: #7c5cff;
  --accent: #ff5cae;
  --radius: 6px;
  --font-body: 'Quicksand', system-ui, sans-serif;
  --font-heading: 'Caveat', cursive;
  --card-scale: 1;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:var(--primary);text-decoration:none;}
a:hover{opacity:0.85;}
img{display:block;max-width:100%;}
h1,h2,h3,h4{font-family:var(--font-heading);line-height:1.2;margin:0 0 0.5em;}
.container{max-width:1280px;margin:0 auto;padding:0 24px;}

.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 85%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1280px;margin:0 auto;}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-heading);font-weight:800;font-size:22px;color:var(--text);}
.logo-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--accent));display:grid;place-items:center;color:#fff;font-weight:800;}
.nav{display:flex;gap:8px;align-items:center;}
.nav a{padding:8px 14px;border-radius:8px;color:var(--text);font-weight:500;font-size:15px;transition:background .2s;}
.nav a:hover{background:var(--bg-soft);}
.nav a.active{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;}
.menu-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer;}
@media(max-width:820px){.menu-toggle{display:block;}.nav{display:none;position:absolute;top:100%;right:24px;flex-direction:column;background:var(--surface);padding:12px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow);}.nav.open{display:flex;}}

.hero{padding:80px 24px 60px;text-align:center;background:radial-gradient(ellipse at top, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%);}
.hero h1{font-size:clamp(36px,6vw,64px);background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p{font-size:clamp(16px,2vw,20px);color:var(--muted);max-width:720px;margin:0 auto 28px;}
.btn{display:inline-block;padding:14px 28px;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:600;border:none;cursor:pointer;font-family:inherit;font-size:16px;transition:transform .2s, box-shadow .2s;}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px var(--primary);}
.btn.secondary{background:var(--surface);color:var(--text);border:1px solid var(--border);}

.section{padding:60px 0;}
.section-title{font-size:32px;margin-bottom:8px;}
.section-sub{color:var(--muted);margin-bottom:32px;}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:center;}
.stat .num{font-family:var(--font-heading);font-size:36px;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat .lbl{color:var(--muted);font-size:14px;margin-top:6px;}

.cta-box{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border-radius:calc(var(--radius) * 1.5);padding:48px 32px;text-align:center;}
.cta-box h2{color:#fff;font-size:32px;}
.cta-box p{color:rgba(255,255,255,0.92);max-width:560px;margin:0 auto 24px;}
.cta-box .btn{background:#fff;color:var(--text);}

.cats{display:flex;flex-wrap:wrap;gap:10px;}
.cat-chip{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 18px;font-size:14px;color:var(--text);}
.cat-chip:hover{background:var(--bg-soft);}

.games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}.games-grid .game-card:first-child{grid-column:1 / -1;}.games-grid .game-card:first-child .thumb-wrap{aspect-ratio:21/9;}.games-grid .game-card:first-child h3{font-size:28px;}@media(max-width:900px){.games-grid{grid-template-columns:1fr 1fr;}}
.game-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s, box-shadow .25s, border-color .25s;transform:scale(var(--card-scale, 1));transform-origin:center center;}
.game-card:hover{transform:translateY(-4px) scale(var(--card-scale, 1));box-shadow:var(--shadow);border-color:color-mix(in srgb, var(--primary) 40%, var(--border));}
.game-card .thumb-wrap{aspect-ratio:16/10;overflow:hidden;background:var(--bg-soft);display:block;}
.game-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.game-card:hover img{transform:scale(1.06);}
.game-card .body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.game-card h3{font-size:18px;margin:0;}
.game-card p{color:var(--muted);font-size:14px;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.game-card .play{margin-top:auto;padding-top:8px;}
.game-card .play a{display:inline-block;padding:8px 16px;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-size:14px;font-weight:600;}
.game-card{background:transparent;border:none;box-shadow:none;}.game-card:hover{box-shadow:none;transform:translateY(-2px);}.game-card .body{padding:12px 4px;}.game-card .body p{display:none;}
.site-header{background:transparent!important;border:none!important;margin:0!important;}.site-header .inner{padding:16px 24px!important;}.logo{color:#fff!important;text-shadow:0 0 15px var(--primary),0 0 30px var(--primary)!important;font-weight:800!important;}.nav{gap:8px!important;}.nav a{padding:12px 22px!important;border-radius:9999px!important;border:2px solid var(--primary)!important;color:#fff!important;text-shadow:0 0 10px var(--primary)!important;font-weight:600!important;transition:all 0.3s ease!important;}.nav a:hover{box-shadow:0 0 30px var(--primary),0 0 60px var(--primary)!important;border-color:transparent!important;background:rgba(255,255,255,0.1)!important;}.nav a.active{background:var(--primary)!important;border-color:var(--primary)!important;box-shadow:0 0 40px var(--primary),0 0 80px var(--primary)!important;}

/* Detail page */
.back-button{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border-radius:12px;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:#fff;font-weight:600;font-size:14px;text-decoration:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);margin:20px 0;box-shadow:0 4px 15px rgba(124,92,255,0.25),0 2px 6px rgba(0,0,0,0.08);position:relative;overflow:hidden;}.back-button::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s ease;}.back-button:hover::before{left:100%;}.back-button:hover{transform:translateY(-2px) translateX(-3px);box-shadow:0 8px 25px rgba(124,92,255,0.35),0 4px 12px rgba(0,0,0,0.12);}.back-button:active{transform:translateY(0) translateX(-1px);}.back-button svg{transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);}.back-button:hover svg{transform:translateX(-3px);}.back-button span{letter-spacing:0.5px;}
.detail-hero{padding:40px 0 20px;}
.detail-hero h1{font-size:clamp(28px,4vw,44px);}
.detail-meta{color:var(--muted);font-size:14px;margin-bottom:16px;}
.game-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;border:1px solid var(--border);box-shadow:var(--shadow);}
.game-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.detail-grid{display:grid;grid-template-columns:1fr 320px;gap:32px;}
@media(max-width:900px){.detail-grid{grid-template-columns:1fr;}}
.detail-sidebar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;height:fit-content;}
.related{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px;}
.related a{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--border);}
.related img{aspect-ratio:16/10;object-fit:cover;}
.detail-immersive .game-frame{aspect-ratio:21/9;}
.detail-arcade{background:radial-gradient(ellipse at center, color-mix(in srgb, var(--primary) 18%, transparent), transparent 70%);padding:30px;border-radius:var(--radius);}

.form{display:grid;gap:16px;max-width:560px;}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted);}
.form input,.form textarea{padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:inherit;font-size:15px;}

.prose{max-width:780px;}
.prose p{margin:0 0 16px;color:var(--text);}
.prose h2{margin-top:32px;font-size:24px;}
.prose ul{margin:0 0 16px;padding-left:22px;}.prose li{margin-bottom:6px;}

.ad-slot{margin:24px auto;max-width:1280px;padding:0 24px;}
.ad-slot > div{margin:0 auto;}
.detail-sidebar .ad-slot{padding:0;margin:16px 0;}

.section-divider{display:flex;align-items:center;gap:16px;margin:32px 0;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.section-divider::before,.section-divider::after{content:"";flex:1;height:1px;background:var(--border);}
.section-divider h3{margin:0;font-size:18px;color:var(--muted);font-family:var(--font-heading);}

.site-footer{margin-top:60px;background:var(--bg-soft);border-top:1px solid var(--border);padding:40px 24px 24px;}
.site-footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;max-width:1280px;margin:0 auto;}
.site-footer h4{font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;}
.site-footer ul a{color:var(--text);font-size:14px;}
.site-footer .copyright{text-align:center;color:var(--muted);font-size:13px;margin-top:32px;padding-top:24px;border-top:1px solid var(--border);}