@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;600;700;900&display=swap');

:root { --ink:#f8f5ed; --muted:#b5afbc; --bg:#12111f; --line:rgba(248,245,237,.16); --lime:#d9ff72; --coral:#ff806a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { min-width:320px; margin:0; overflow-x:hidden; color:var(--ink); background:var(--bg); font-family:"Noto Sans SC",system-ui,sans-serif; }
.content-width { width:min(1180px,calc(100% - 48px)); margin-inline:auto; position:relative; z-index:1; }
.noise { position:fixed; inset:0; z-index:0; opacity:.16; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.ambient { position:fixed; z-index:0; width:42vw; height:42vw; border-radius:50%; filter:blur(100px); opacity:.18; pointer-events:none; }
.ambient-one { background:#7f47dc; top:-18vw; left:-16vw; }.ambient-two { background:#e35d48; right:-19vw; top:42vh; }
.site-header { height:84px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-weight:900; font-size:17px; text-decoration:none; letter-spacing:.08em; }.brand-mark { display:grid; width:28px; height:28px; place-items:center; color:#16141f; background:var(--lime); border-radius:9px; transform:rotate(-9deg); }
.header-note { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }.header-note span { width:8px; height:8px; border-radius:50%; background:#73e3a7; box-shadow:0 0 0 4px rgba(115,227,167,.13); }
.hero { min-height:430px; padding:90px 48px 80px; margin-top:38px; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:28px; background:linear-gradient(115deg,rgba(127,71,220,.45),rgba(43,32,75,.76) 48%,rgba(17,17,31,.72)); box-shadow:0 30px 80px rgba(0,0,0,.24); }
.hero::before { content:""; position:absolute; right:-80px; top:-150px; width:460px; height:460px; border:1px solid rgba(217,255,114,.35); border-radius:43% 57% 49% 51% / 41% 43% 57% 59%; transform:rotate(18deg); }.hero::after { content:""; position:absolute; left:52%; bottom:-180px; width:500px; height:250px; border:1px solid rgba(255,255,255,.1); border-radius:50%; }
.eyebrow { margin:0 0 14px; color:var(--lime); font:500 11px/1 "DM Mono",monospace; letter-spacing:.18em; }.hero h1 { max-width:710px; margin:0; font-size:clamp(42px,6.2vw,78px); line-height:1.11; letter-spacing:-.07em; font-weight:900; }.hero h1 em { color:var(--lime); font-style:normal; }.hero-copy { width:min(430px,100%); margin:24px 0 30px; color:#ddd8e2; font-size:16px; line-height:1.8; }.hero-action { display:inline-flex; align-items:center; gap:18px; padding:13px 18px; color:#19181c; background:var(--lime); border-radius:999px; font-size:14px; font-weight:900; text-decoration:none; transition:transform .25s,box-shadow .25s; }.hero-action:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(217,255,114,.25); }.hero-action span { font-size:19px; }
.hero-sticker { position:absolute; z-index:2; right:84px; bottom:60px; display:grid; place-items:center; width:96px; height:96px; color:#1a1830; background:var(--coral); border:2px solid #1a1830; border-radius:50%; outline:2px dashed rgba(255,128,106,.8); outline-offset:6px; font:500 14px/1.2 "DM Mono",monospace; letter-spacing:.05em; text-align:center; transform:rotate(13deg); }.hero-die { position:absolute; z-index:1; display:grid; width:84px; height:84px; place-items:center; border:1px solid rgba(255,255,255,.36); border-radius:20px; font-size:54px; line-height:1; box-shadow:inset 0 0 40px rgba(255,255,255,.12); }.die-one { right:245px; top:90px; color:#e4c4ff; transform:rotate(-18deg); }.die-two { right:46px; top:80px; color:#ffcc95; transform:rotate(16deg); }
.games-section { padding:104px 0 72px; }.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:32px; }.section-heading h2 { margin:0; font-size:clamp(28px,4vw,42px); letter-spacing:-.06em; }.game-count { margin:0; font:500 34px/1 "DM Mono",monospace; color:var(--lime); }.game-count span { color:var(--muted); font-size:11px; }
.game-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:17px; }.game-card { position:relative; display:flex; min-height:375px; overflow:hidden; flex-direction:column; grid-column:span 2; padding:23px; color:var(--ink); border:1px solid var(--line); border-radius:21px; text-decoration:none; background:#1a1927; isolation:isolate; transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }.game-card:is(a):hover { transform:translateY(-7px) rotate(-.3deg); border-color:rgba(255,255,255,.4); box-shadow:0 20px 40px rgba(0,0,0,.28); }.game-card::after { content:""; position:absolute; inset:0; z-index:-1; opacity:0; background:linear-gradient(125deg,rgba(255,255,255,.12),transparent 46%); transition:opacity .3s; }.game-card:is(a):hover::after { opacity:1; }.card-number { position:absolute; right:19px; top:20px; color:rgba(255,255,255,.52); font:500 12px "DM Mono",monospace; }.card-art { position:relative; height:164px; flex:none; }.card-content { display:flex; flex:1; flex-direction:column; align-items:flex-start; }.game-type { margin:0 0 7px; color:rgba(255,255,255,.65); font:500 10px "DM Mono",monospace; letter-spacing:.15em; }.card-content h3 { margin:0; font-size:28px; letter-spacing:-.06em; }.card-content > p:not(.game-type) { max-width:250px; margin:12px 0 18px; color:rgba(255,255,255,.76); font-size:13px; line-height:1.65; }.play-link { display:flex; align-items:center; gap:10px; margin-top:auto; font-size:13px; font-weight:700; }.play-link b { display:grid; width:27px; height:27px; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:17px; transition:transform .25s; }.game-card:hover .play-link b { transform:translateX(5px); }
.score-card { background:linear-gradient(150deg,#1d5c69,#143c4a); }.chip { position:absolute; display:grid; width:92px; height:92px; place-items:center; border:8px dashed; border-radius:50%; font:900 30px Georgia,serif; box-shadow:inset 0 0 0 5px rgba(0,0,0,.17),0 10px 20px rgba(0,0,0,.25); }.chip-back { top:18px; left:48px; color:#f6bf5a; background:#e26950; transform:rotate(-22deg); }.chip-front { top:45px; left:130px; color:#243142; background:#d8ff72; transform:rotate(17deg); }.spark { position:absolute; color:#ffe4a5; }.spark-one { left:20px; top:25px; font-size:21px; }.spark-two { left:225px; top:28px; font-size:14px; }
.undercover-card { background:linear-gradient(145deg,#633262,#2d1f4e); }.eye { position:absolute; top:43px; width:58px; height:37px; border:5px solid #ffd2a4; border-radius:100% 0 100% 0; transform:rotate(-45deg); }.eye::after { content:""; position:absolute; top:8px; left:19px; width:14px; height:14px; background:#ffd2a4; border-radius:50%; }.eye-left { left:68px; }.eye-right { left:132px; transform:rotate(135deg); }.magnifier { position:absolute; top:16px; left:191px; width:52px; height:52px; border:6px solid #d9ff72; border-radius:50%; transform:rotate(-15deg); }.magnifier::after { content:""; position:absolute; width:34px; height:7px; right:-25px; bottom:-14px; border-radius:20px; background:#d9ff72; transform:rotate(52deg); }.question { position:absolute; top:95px; left:208px; color:#ff8773; font:900 44px/1 Georgia,serif; transform:rotate(15deg); }
.icebreaker-card { background:linear-gradient(145deg,#b95854,#672941); }.card-back { position:absolute; display:grid; width:83px; height:114px; place-items:center; border:3px solid rgba(255,255,255,.72); border-radius:12px; color:#412340; background:linear-gradient(135deg,#fff5db,#ffb792); box-shadow:0 12px 20px rgba(0,0,0,.24); font:900 32px Georgia,serif; }.card-back-one { left:83px; top:25px; transform:rotate(-15deg); }.card-back-two { left:150px; top:35px; color:#fff4df; background:linear-gradient(135deg,#e47b7b,#9b3c58); transform:rotate(13deg); }.light-ray { position:absolute; left:30px; top:0; width:190px; height:150px; opacity:.42; background:linear-gradient(105deg,transparent 30%,#ffd369 31%,transparent 32%); transform:rotate(10deg); }
.coming-card { min-height:245px; grid-column:span 3; flex-direction:row; align-items:center; gap:22px; background:rgba(255,255,255,.035); border-style:dashed; color:#bdb8c3; }.coming-card .card-content { justify-content:center; }.coming-card .card-content h3 { font-size:21px; }.coming-card .card-content > p:not(.game-type) { margin-bottom:13px; }.coming-art { display:grid; flex:none; width:80px; height:80px; place-items:center; color:#80798a; border:1px dashed #80798a; border-radius:50%; font-size:38px; }.alternate .coming-art { color:#aa9aac; border-color:#aa9aac; }.coming-label { padding:5px 10px; border:1px solid rgba(255,255,255,.18); border-radius:999px; font-size:11px; }
.site-footer { display:flex; justify-content:space-between; padding:23px 0 35px; color:#aaa5b1; border-top:1px solid var(--line); font-size:12px; }.site-footer a { color:var(--lime); text-decoration:none; }.site-footer a span { margin-left:5px; }
@media (max-width:760px) { .content-width { width:min(100% - 32px,1180px); }.site-header { height:68px; }.header-note { display:none; }.hero { min-height:540px; padding:56px 25px; margin-top:20px; }.hero h1 { letter-spacing:-.08em; }.hero-sticker { right:43px; bottom:60px; }.die-one { right:116px; top:300px; }.die-two { right:25px; top:254px; width:63px; height:63px; font-size:40px; }.games-section { padding-top:70px; }.section-heading { align-items:start; }.game-count { font-size:23px; }.game-count span { display:none; }.game-grid { grid-template-columns:1fr; }.game-card,.coming-card { grid-column:auto; min-height:340px; }.coming-card { min-height:200px; }.site-footer { gap:20px; line-height:1.6; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.game-card,.hero-action { transition:none; } }