:root{
  --bg:#0a0f16;
  --surface:linear-gradient(180deg,#071128, #050613);
  --muted:#9aa0a6;
  --text:#f6f8fb;
  --accent-1:#7c4dff; /* used sparingly */
  --accent-2:#37a2ff; /* used sparingly */
  --shadow: 0 12px 34px rgba(2,6,12,0.6);
}

*{box-sizing:border-box}
.site-bg{position:fixed;inset:0;background:var(--bg);z-index:-1}
html,body{height:100%;margin:0;font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;color:var(--text);}
.subtle-bg{position:fixed;inset:0;z-index:0;background:radial-gradient(closest-side, rgba(16,20,24,0.02), transparent 40%);}
.site-header{position:fixed;top:0;left:0;right:0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;z-index:10;backdrop-filter:blur(6px)}
.logo{font-weight:600;font-size:18px;letter-spacing:1px}
.nav{display:flex;align-items:center}
.nav a{color:var(--text);margin-left:20px;text-decoration:none;font-weight:500;opacity:0.9}
.nav .cta{border-radius:10px;padding:8px 14px;color:var(--text);border:1px solid rgba(16,24,32,0.06);background:transparent}
main{position:relative;z-index:5;padding-top:110px}
.hero{min-height:68vh;display:flex;align-items:center;justify-content:center}
.hero-inner{width:min(1100px,92%);text-align:center;padding:64px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));backdrop-filter:blur(6px)}
.hero-title{font-family:'Playfair Display', serif;font-size:56px;margin:0;color:var(--text);letter-spacing:-1px;text-shadow:0 6px 18px rgba(2,6,12,0.6)}
.lead{margin-top:12px;color:var(--muted);font-size:18px;opacity:0.95}
.hero-ctas{margin-top:28px}
.btn{display:inline-block;padding:12px 20px;margin:0 8px;border-radius:12px;color:var(--text);text-decoration:none;border:1px solid rgba(255,255,255,0.06);background:transparent;font-weight:700}
.btn.primary{background:linear-gradient(90deg, var(--accent-1), var(--accent-2));box-shadow:var(--shadow);border:none;color:#fff}
.section{padding:80px 32px}
.section-title{font-size:18px;margin:0 0 22px;color:var(--text);font-weight:600}
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.game-card{background:transparent;padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 6px 28px rgba(2,6,12,0.35);transition:transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s}
.game-card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(2,6,12,0.48)}
.game-thumb{height:140px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));border-radius:10px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;border:1px solid rgba(255,255,255,0.04);overflow:hidden;position:relative}
.game-title{font-weight:600;color:var(--text)}
.game-genre{color:var(--muted);font-size:13px}
.community-preview{display:flex;gap:16px;padding:22px;border-radius:12px;background:var(--surface);border:1px solid rgba(16,24,32,0.03)}
.team-grid{display:flex;gap:16px}
.team-card{padding:20px;width:240px;text-align:center;background:transparent}
.avatar{width:84px;height:84px;border-radius:12px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 12px;color:white}
.site-footer{padding:48px 32px;text-align:center;color:var(--muted)}

/* Play overlay on thumbnail */
.game-thumb-wrap{position:relative}
.play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background .16s}
.play-overlay::before{content:'';width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,0.06);display:inline-block;box-shadow:0 8px 20px rgba(2,6,12,0.5)}
.play-icon{position:absolute;width:18px;height:18px;border-left:12px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:6px;filter:drop-shadow(0 4px 10px rgba(2,6,12,0.5))}

/* Modal */
.game-modal{position:fixed;inset:0;background:rgba(2,6,12,0.72);display:none;align-items:center;justify-content:center;z-index:60}
.game-modal[aria-hidden="false"]{display:flex}
.game-modal-inner{width:min(1200px,96%);height:min(720px,92%);background:linear-gradient(180deg,#050613,#071428);border-radius:14px;overflow:hidden;box-shadow:0 30px 120px rgba(2,6,12,0.7);position:relative;border:1px solid rgba(255,255,255,0.03)}
.game-modal iframe{width:100%;height:100%;border:0;background:#000}
.modal-close{position:absolute;right:14px;top:14px;border:0;background:transparent;font-size:28px;line-height:1;color:var(--text);cursor:pointer;padding:8px;border-radius:8px}

/* Community posts */
.post-card{background:transparent;border-radius:10px;padding:18px;border:1px solid rgba(16,24,32,0.03);margin-bottom:12px}
.post-title{font-weight:600;margin:0 0 6px}
.post-meta{color:var(--muted);font-size:13px;margin-bottom:8px}
.post-excerpt{color:var(--text)}

/* Utility */
.muted{color:var(--muted)}

@media (max-width:800px){.hero-title{font-size:36px}.team-grid{flex-direction:column}.games-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}