@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--bg:#0c0812;--panel:#171020;--panel2:#21152e;--purple:#9b5cff;--purple2:#c09aff;--text:#f7f2ff;--muted:#a99bb8;--line:#30213f}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}.topbar{height:76px;padding:0 max(5vw,22px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12;background:#100b18;position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:10px;font:700 17px 'Space Grotesk',sans-serif;letter-spacing:1.2px}.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#b477ff,#6831bd);box-shadow:0 0 24px #9b5cff55;font-size:21px}.brand-accent{color:var(--purple2)}nav{display:flex;gap:30px}.nav-link{font-size:13px;color:var(--muted)}.nav-link:hover,.nav-link.active{color:white}.submit-link{font-size:12px;border:1px solid #65428a;border-radius:8px;padding:10px 14px;color:#e5d4ff}.submit-link span{color:var(--purple2);font-size:17px;margin-left:7px}
main{max-width:1180px;margin:auto;padding:0 28px}.hero{min-height:440px;display:flex;align-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.hero-copy{position:relative;z-index:2;max-width:570px;padding:65px 0}.eyebrow{font-size:10px;letter-spacing:2.1px;font-weight:700;color:var(--purple2)}.pulse{display:inline-block;width:7px;height:7px;background:#a879ff;border-radius:50%;margin-right:8px;box-shadow:0 0 12px #a879ff}h1,h2{font-family:'Space Grotesk',sans-serif;margin:12px 0;letter-spacing:-1.5px}h1{font-size:clamp(42px,6vw,70px);line-height:.98}h1 span,h2 span{color:var(--purple)}.hero-description{max-width:440px;color:var(--muted);font-size:14px;line-height:1.8;margin:22px 0 28px}.primary-button{display:inline-flex;align-items:center;gap:28px;background:linear-gradient(110deg,#a66aff,#7438c6);padding:13px 18px;border-radius:8px;font-size:13px;font-weight:700;box-shadow:0 8px 30px #8c4ee633}.primary-button span{font-size:18px}.hero-art{position:absolute;right:3%;top:50%;transform:translateY(-50%);width:390px;height:330px;display:grid;place-items:center}.hero-glow{position:absolute;width:230px;height:230px;background:#8038cb55;filter:blur(70px);border-radius:50%}.orbit{position:absolute;border:1px solid #a86bff55;border-radius:50%;transform:rotate(-25deg)}.orbit-one{width:330px;height:145px}.orbit-two{width:270px;height:270px;border-color:#a86bff30}.hero-controller{z-index:1;width:170px;height:130px;border-radius:45px 45px 60px 60px;background:linear-gradient(145deg,#3a2850,#171020);border:1px solid #a56aff88;box-shadow:0 20px 60px #0009,0 0 50px #8f4bce55;display:grid;place-items:center;font-size:72px;color:#c7a2ff;transform:rotate(-12deg)}.floating-chip{position:absolute;z-index:2;border:1px solid #9b5cff88;background:#1c1229;padding:9px 15px;border-radius:7px;color:#d8c0ff;font:700 10px 'Space Grotesk';letter-spacing:2px}.chip-one{top:45px;right:30px;transform:rotate(8deg)}.chip-two{bottom:45px;left:25px;transform:rotate(-9deg)}.stats-row{display:flex;gap:0;padding:23px 0;border-bottom:1px solid var(--line)}.stats-row div{padding:0 42px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px}.stats-row div:first-child{padding-left:0}.stats-row div:last-child{border:0}.stats-row strong{font:700 15px 'Space Grotesk'}.stats-row span{font-size:9px;letter-spacing:1.8px;color:var(--muted)}
.library-section,.favorites-section{padding:65px 0 25px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}.section-heading h2,.how-section h2{font-size:35px;margin:5px 0}.section-heading .eyebrow{margin:0}.search-wrap{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:0 13px;width:min(280px,45%);color:var(--purple2)}.search-wrap input{width:100%;background:none;border:0;outline:0;color:white;padding:12px 0;font:13px 'DM Sans'}.search-wrap input::placeholder{color:#81758d}.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:23px}.filter{background:transparent;border:1px solid var(--line);border-radius:7px;color:var(--muted);padding:9px 14px;font:600 11px 'DM Sans';cursor:pointer}.filter:hover,.filter.active{background:#8c4ed522;border-color:#9b5cff;color:#e5d4ff}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.game-card{background:var(--panel);border:1px solid var(--line);border-radius:11px;overflow:hidden;transition:.2s;min-width:0}.game-card:hover{transform:translateY(-4px);border-color:#8450b4;box-shadow:0 12px 35px #0005}.game-art{height:145px;display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(135deg,#33204a,#15101e)}.game-art:before,.game-art:after{content:"";position:absolute;border:1px solid #ffffff22;border-radius:50%;width:180px;height:180px}.game-art:after{width:120px;height:120px}.game-icon{font-size:48px;z-index:1;filter:drop-shadow(0 5px 15px #0008)}.game-tag{position:absolute;top:11px;left:11px;font-size:9px;letter-spacing:1px;background:#0b071bbd;border:1px solid #ffffff22;padding:5px 8px;border-radius:5px;color:#d9c6f2}.game-info{padding:14px}.game-info-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.game-info h3{font:600 15px 'Space Grotesk';margin:0}.favorite{border:0;background:none;color:#a99bb8;font-size:21px;cursor:pointer;padding:0 3px}.favorite.saved{color:#c39aff}.game-info p{font-size:11px;color:var(--muted);margin:8px 0 13px;line-height:1.5}.play-button{display:block;text-align:center;background:#342044;border:1px solid #5e3a7c;border-radius:6px;padding:9px;color:#e8d9ff;font-size:11px;font-weight:700}.play-button:hover{background:#543176}.empty-state,.muted{color:var(--muted);font-size:13px}.favorites-section{border-top:1px solid var(--line);margin-top:45px}.compact{margin-bottom:20px}.how-section{margin:55px 0 70px;padding:28px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(120deg,#1a1026,#100b17)}.how-section p:last-child{max-width:700px;color:var(--muted);font-size:13px;line-height:1.8}.how-section code{color:#d6baff;background:#2a1b3a;padding:3px 6px;border-radius:4px}footer{border-top:1px solid var(--line);padding:25px max(5vw,22px);display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}.footer-brand{color:white}
@media(max-width:760px){.topbar{height:66px}nav{gap:13px}.nav-link{font-size:11px}.submit-link{display:none}.hero{min-height:410px}.hero-art{right:-155px;opacity:.38}.hero-copy{max-width:500px}.stats-row div{padding:0 20px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-art{height:125px}}
@media(max-width:480px){main{padding:0 18px}.brand{font-size:14px}nav{gap:10px}.nav-link{font-size:10px}.hero{min-height:390px}.hero-copy{padding:50px 0}.hero-art{right:-210px}.section-heading{align-items:flex-start;flex-direction:column}.search-wrap{width:100%}.game-grid{gap:11px}.game-art{height:105px}.game-icon{font-size:38px}.game-info{padding:11px}.game-info h3{font-size:13px}.stats-row{justify-content:space-between}.stats-row div{padding:0 10px}.stats-row strong{font-size:12px}.stats-row span{font-size:8px}footer{gap:12px;flex-direction:column;align-items:flex-start}}
