@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --bg:#07070d; --panel:#0d0d17; --panel-soft:#11111d; --line:rgba(255,255,255,.09); --muted:#858393; --text:#f3f2f8; --violet:#956bff; --cyan:#67e8f9; --pink:#f460a8; --green:#8df69b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:var(--bg); font-family:'Manrope',ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button { color:inherit; border:0; cursor:pointer; }
.page-shell { min-height:100vh; display:flex; background:radial-gradient(circle at 88% -10%,rgba(91,48,140,.13),transparent 27rem),var(--bg); }
.sidebar { position:fixed; inset:0 auto 0 0; width:94px; display:flex; flex-direction:column; align-items:center; padding:28px 12px 20px; border-right:1px solid rgba(255,255,255,.06); background:rgba(8,8,15,.82); backdrop-filter:blur(22px); z-index:5; }
.brand-mark { position:relative; display:grid; place-items:center; width:46px; height:46px; margin-bottom:68px; color:#fff; text-decoration:none; }
.brand-mark:before { content:''; position:absolute; inset:1px; border:1px solid rgba(177,137,255,.72); border-radius:13px 13px 13px 3px; transform:rotate(-6deg); background:linear-gradient(145deg,#21185d,#0f0d2c 60%,#1e0c2f); box-shadow:0 0 25px rgba(119,79,255,.3),inset 0 0 14px rgba(255,255,255,.1); }
.brand-orbit { position:absolute; width:24px; height:10px; border:1px solid #c6aaff; border-radius:50%; transform:rotate(-30deg); opacity:.75; }
.brand-d { position:relative; font-weight:800; font-size:18px; letter-spacing:-.1em; margin-left:-2px; }
.side-nav { display:flex; flex-direction:column; gap:19px; width:100%; }
.nav-item { position:relative; width:100%; display:flex; flex-direction:column; align-items:center; gap:7px; padding:8px 2px; background:none; color:#6f6e7f; transition:.2s ease; }
.nav-item svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.nav-item span { font-size:9px; letter-spacing:.02em; }
.nav-item:hover,.nav-item.active { color:#e7dfff; }
.nav-item.active:before { content:''; position:absolute; left:-12px; top:6px; bottom:6px; width:2px; border-radius:4px; background:linear-gradient(#c3a5ff,#6a43e7); box-shadow:0 0 15px #8e6aff; }
.sidebar-bottom { margin-top:auto; width:100%; display:flex; flex-direction:column; align-items:center; gap:26px; }
.profile-chip { display:flex; flex-direction:column; align-items:center; gap:6px; color:#b6b3c0; text-align:center; }
.profile-avatar,.top-avatar { display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#5c42bd,#f355a7); font-weight:800; }
.profile-avatar { width:30px; height:30px; font-size:9px; box-shadow:0 0 17px rgba(157,92,255,.4); }
.profile-chip strong,.profile-chip small { display:block; font-size:8px; white-space:nowrap; }
.profile-chip small { color:#646270; margin-top:2px; }
.online-dot { position:absolute; bottom:59px; margin-left:23px; width:7px; height:7px; border:2px solid #090912; border-radius:50%; background:#78ef98; }
.main-content { width:calc(100% - 94px); margin-left:94px; padding:0 clamp(24px,4vw,68px) 34px; overflow:hidden; }
.topbar { height:83px; display:flex; align-items:center; justify-content:space-between; }
.breadcrumbs { display:flex; align-items:center; gap:10px; color:#656473; font-size:11px; }
.breadcrumbs i { font-style:normal; color:#34333e; }.breadcrumbs strong { color:#bbb8c6; font-weight:500; }
.top-actions { display:flex; align-items:center; gap:16px; }.status-pill { display:flex; align-items:center; gap:8px; color:#a6a3b1; font-size:10px; }.status-pill span { width:6px; height:6px; border-radius:50%; background:#65eb9a; box-shadow:0 0 8px #65eb9a; }
.icon-button { position:relative; display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.02); color:#a8a5b5; }.icon-button svg { width:15px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; }.icon-button b { position:absolute; top:7px; right:7px; width:4px; height:4px; border-radius:50%; background:#e978bd; }
.top-avatar { width:31px; height:31px; border:1px solid #6b51cd; font-size:9px; }
.hero-panel { position:relative; min-height:410px; overflow:hidden; isolation:isolate; border:1px solid rgba(182,150,255,.16); border-radius:4px; background:linear-gradient(112deg,#0b0b20 0%,#14102a 50%,#1a1027 100%); }
.hero-panel:after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(5,5,15,.88) 0%,rgba(5,5,15,.68) 39%,rgba(11,5,22,.19) 100%),radial-gradient(circle at 72% 50%,rgba(232,52,143,.14),transparent 25%); }
.hero-grid { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(175,133,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(175,133,255,.12) 1px,transparent 1px); background-size:54px 54px; mask-image:linear-gradient(90deg,black,transparent 80%); }
.hero-stars { position:absolute; inset:0; opacity:.62; background-image:radial-gradient(1px 1px at 16% 18%,#fff,transparent),radial-gradient(1px 1px at 37% 70%,#9dd9ff,transparent),radial-gradient(1px 1px at 81% 16%,#fff,transparent),radial-gradient(1px 1px at 67% 76%,#f5bbff,transparent),radial-gradient(1px 1px at 93% 60%,#fff,transparent),radial-gradient(1px 1px at 54% 22%,#c4b9ff,transparent); }
.hero-nebula { position:absolute; filter:blur(34px); border-radius:50%; opacity:.56; }.nebula-one { width:300px;height:190px;right:9%;top:10%;background:rgba(97,42,205,.3); }.nebula-two { width:230px;height:180px;right:28%;bottom:-50px;background:rgba(225,30,138,.18); }
.hero-orbit { position:absolute; right:18%; top:50%; width:430px; height:430px; border:1px solid rgba(193,140,255,.75); border-radius:50%; transform:translate(50%,-50%) rotate(-28deg); box-shadow:0 0 25px rgba(154,96,255,.45),inset 0 0 25px rgba(229,54,166,.22); }.hero-orbit:after { content:''; position:absolute; inset:14px; border:1px solid rgba(255,92,178,.65); border-radius:50%; box-shadow:0 0 26px rgba(249,76,177,.42); }.orbit-two { width:520px;height:170px;right:11%; transform:translate(50%,-50%) rotate(29deg); border-color:rgba(251,89,195,.32); box-shadow:none; }.orbit-two:after { display:none; }
.hero-copy { position:relative; z-index:1; max-width:570px; padding:72px 7% 78px; }.eyebrow,.section-kicker { color:#a68cff; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.19em; }.eyebrow { display:flex; align-items:center; gap:9px; }.eyebrow-dot { width:6px;height:6px;border-radius:50%;background:#ad92ff;box-shadow:0 0 10px #a68cff; }
h1,h2,p { margin:0; }.hero-copy h1 { margin:16px 0 16px; font-size:clamp(40px,5vw,72px); line-height:.98; letter-spacing:-.07em; font-weight:700; }.hero-copy h1 em,.community-copy h2 em,.weekly-panel h2 em { color:#8f72ec; font-style:normal; }.hero-copy p { max-width:380px; color:#a6a2b2; font-size:13px; line-height:1.7; }
.hero-actions { display:flex; align-items:center; gap:20px; margin-top:28px; }.primary-button,.small-button { display:flex; align-items:center; gap:22px; background:#f3f0ff; color:#15121f; padding:12px 17px; border-radius:3px; font-size:11px; font-weight:800; box-shadow:0 0 23px rgba(226,216,255,.18); transition:.2s ease; }.primary-button span,.small-button span { font-size:16px; }.primary-button:hover,.small-button:hover { transform:translateY(-2px); background:#fff; }.ghost-button { display:flex; align-items:center; gap:8px; background:none; color:#c1bcca; font-size:11px; }.play-icon { display:grid; place-items:center; width:25px; height:25px; border:1px solid #656174; border-radius:50%; font-size:8px; padding-left:2px; }
.hero-meta { position:absolute; z-index:2; left:7%; bottom:25px; display:flex; align-items:center; gap:13px; color:#898493; font-family:'DM Mono',monospace; font-size:9px; }.hero-meta strong { color:#f1effa; }.hero-progress { width:90px; height:2px; background:#3c334b; }.hero-progress span { display:block; width:31%; height:100%; background:#d1b9ff; }.hero-next { color:#bdb1d7; background:none; font-size:18px; }
.hero-feature-card { position:absolute; right:4.5%; bottom:22px; z-index:2; display:flex; align-items:center; gap:11px; padding:8px 10px; min-width:235px; border:1px solid rgba(255,255,255,.1); background:rgba(14,11,28,.55); backdrop-filter:blur(11px); }.mini-art { display:grid; place-items:center; width:42px;height:42px; border-radius:2px; color:#fff; font-size:20px; background:radial-gradient(circle at 35% 40%,#ffc3ed 1px,transparent 2px),linear-gradient(145deg,#e157bc,#492c86 60%,#16122c); }.hero-feature-card small,.hero-feature-card strong,.hero-feature-card div>span { display:block; }.hero-feature-card small { color:#a48ee9; font:8px 'DM Mono',monospace; letter-spacing:.12em; }.hero-feature-card strong { margin:3px 0; font-size:10px; }.hero-feature-card div>span { color:#807c92; font-size:8px; }.feature-arrow { margin-left:auto; color:#b795ff; }
.library-section { padding-top:52px; }.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }.section-kicker { display:block; color:#757184; font-size:9px; letter-spacing:.16em; }.section-heading h2 { margin-top:7px; font-size:26px; letter-spacing:-.05em; }.section-heading h2 span { color:#9c7dff; font-size:14px; vertical-align:top; }.heading-tools { display:flex; align-items:center; gap:17px; }.search-box { display:flex; align-items:center; gap:9px; width:180px; padding:9px 11px; border:1px solid var(--line); border-radius:3px; background:rgba(255,255,255,.025); color:#747181; }.search-box svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }.search-box input { width:100%; border:0; outline:0; background:transparent; color:#e8e3f3; font-size:10px; }.search-box input::placeholder { color:#6f6d7a; }.view-all { background:none; color:#b7a5e8; font-size:10px; }.view-all span { padding-left:10px; font-size:16px; }.filter-row { display:flex; gap:8px; padding:25px 0 19px; overflow-x:auto; scrollbar-width:none; }.filter-row::-webkit-scrollbar { display:none; }.filter-chip { display:flex; align-items:center; gap:7px; flex:0 0 auto; padding:8px 12px; border:1px solid var(--line); border-radius:3px; background:rgba(255,255,255,.015); color:#858291; font-size:10px; transition:.2s ease; }.filter-chip span { color:#9b78f4; font-size:13px; }.filter-chip:hover,.filter-chip.active { color:#f3f0ff; border-color:#7654cb; background:linear-gradient(90deg,rgba(101,65,190,.23),rgba(145,85,216,.1)); }.game-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }.game-card { min-width:0; cursor:pointer; }.game-art { position:relative; height:143px; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:3px; background:var(--card-gradient); transition:.3s ease; }.game-art:before { content:''; position:absolute; width:170px;height:170px; left:20%; top:-60px; border-radius:50%; border:1px solid rgba(255,255,255,.25); box-shadow:0 0 34px var(--accent); transform:rotate(23deg); opacity:.6; }.game-art:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(4,4,10,.66)); }.game-card:hover .game-art { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 12px 30px rgba(0,0,0,.3),0 0 18px color-mix(in srgb,var(--accent) 20%,transparent); }.art-icon { position:absolute; z-index:1; right:15%; top:27%; display:grid; place-items:center; width:63px;height:63px; border-radius:22px 28px 24px 27px; color:#fff; font-size:30px; transform:rotate(-11deg); text-shadow:0 2px 8px rgba(0,0,0,.5); background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.8),transparent 4px),linear-gradient(145deg,color-mix(in srgb,var(--accent) 90%,white 10%),#111326); box-shadow:-12px 12px 0 rgba(0,0,0,.2),0 0 20px var(--accent); }.art-label { position:absolute; z-index:2; left:10px; bottom:9px; color:#e9e6f2; font-size:8px; font-weight:700; letter-spacing:.04em; }.art-label span { color:#a9a3b7; font-weight:400; margin-left:3px; }.game-info { padding:11px 2px 0; }.game-info h3 { margin:0 0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:700; }.game-info p { color:#777382; font-size:9px; }.game-meta { display:flex; align-items:center; gap:7px; margin-top:8px; color:#9692a2; font-size:9px; }.rating { color:#f5d567; letter-spacing:1px; }.game-badge { margin-left:auto; padding:3px 5px; border-radius:2px; color:#9b85d4; background:rgba(135,102,225,.14); font:8px 'DM Mono',monospace; }.empty-state { padding:50px 0; color:#8d899a; text-align:center; font-size:12px; }
.lower-grid { display:grid; grid-template-columns:1.34fr 1fr; gap:16px; padding-top:56px; }.community-panel,.weekly-panel { position:relative; overflow:hidden; min-height:226px; border:1px solid var(--line); background:var(--panel); }.community-panel { padding:31px 36px; }.community-copy { position:relative; z-index:2; }.community-copy h2,.weekly-panel h2 { margin:8px 0 10px; font-size:28px; line-height:.98; letter-spacing:-.06em; }.community-copy p { max-width:230px; color:#878291; font-size:10px; line-height:1.6; }.small-button { margin-top:18px; padding:10px 12px; gap:14px; font-size:9px; }.community-glow { position:absolute; width:320px; height:190px; right:-50px; top:-35px; border-radius:50%; background:radial-gradient(circle,rgba(132,85,240,.45),transparent 68%); filter:blur(12px); }.community-ring { position:absolute; width:215px;height:215px; right:60px;top:13px; border:1px solid rgba(161,123,255,.47); border-radius:50%; box-shadow:0 0 30px rgba(143,92,255,.28),inset 0 0 22px rgba(157,98,255,.18); }.community-ring:after { content:''; position:absolute; inset:17px; border:1px dashed rgba(222,120,255,.4); border-radius:50%; }.orbit-avatar { position:absolute; z-index:2; display:grid; place-items:center; width:29px;height:29px; border:2px solid #171521; border-radius:50%; color:#fff; font-size:9px; font-weight:700; background:linear-gradient(145deg,#3b9ac0,#9a4fdd); box-shadow:0 0 13px rgba(139,91,255,.6); }.avatar-a { right:235px; top:19px; }.avatar-b { right:91px; top:46px; background:linear-gradient(145deg,#e6a448,#ce3e8e); }.avatar-c { right:51px; top:161px; background:linear-gradient(145deg,#5dd18f,#2b5fb7); }.avatar-d { right:198px; bottom:12px; background:linear-gradient(145deg,#f26d84,#7646ce); }.weekly-panel { padding:29px 28px 18px; background:linear-gradient(120deg,#151026,#0f0e19 70%); }.live-label { margin-left:9px; padding:3px 5px; color:#ec85c0; border:1px solid rgba(236,133,192,.4); font-size:8px; letter-spacing:.1em; }.challenge-title { display:flex; justify-content:space-between; align-items:flex-start; }.challenge-title>span { display:grid; place-items:center; width:39px; height:39px; border:1px solid rgba(171,127,255,.4); border-radius:50%; color:#ba91ff; font-size:20px; }.challenge-progress { margin-top:18px; }.challenge-progress>div:first-child { display:flex; justify-content:space-between; color:#6f6b7d; font:8px 'DM Mono',monospace; }.challenge-progress strong { color:#d4c1ff; font-weight:400; }.progress-track { height:4px; margin-top:7px; background:#292333; }.progress-track span { display:block; width:72%; height:100%; background:linear-gradient(90deg,#8464f0,#db69bb); box-shadow:0 0 13px rgba(173,94,229,.7); }.challenge-row { display:flex; align-items:center; gap:10px; width:100%; margin-top:21px; padding:10px 0 0; border-top:1px solid var(--line); background:none; text-align:left; }.challenge-icon { display:grid; place-items:center; width:27px;height:27px; border-radius:7px; color:#f6bdff; background:linear-gradient(145deg,#7350d3,#e15bb1); font-size:13px; }.challenge-row span:nth-child(2) { display:flex; flex-direction:column; gap:3px; }.challenge-row strong { font-size:10px; }.challenge-row small { color:#777281; font-size:8px; }.challenge-row b { margin-left:auto; color:#a88bf1; font-weight:400; }.site-footer { display:flex; justify-content:space-between; padding:45px 0 0; color:#575464; font-size:9px; }.footer-links { display:flex; gap:16px; }.footer-links a { color:#777382; text-decoration:none; }.footer-links a:hover { color:#c6b3f0; }
.toast { position:fixed; z-index:20; left:50%; bottom:25px; padding:12px 16px; border:1px solid rgba(185,151,255,.32); border-radius:4px; color:#e7def9; background:rgba(19,15,31,.92); box-shadow:0 9px 30px rgba(0,0,0,.3); opacity:0; transform:translate(-50%,12px); pointer-events:none; font-size:11px; transition:.25s ease; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:1050px) { .game-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.hero-orbit { right:4%; }.hero-feature-card { right:3%; }.lower-grid { grid-template-columns:1fr; } }
@media (max-width:760px) { .sidebar { width:62px; padding:17px 7px; }.main-content { width:calc(100% - 62px); margin-left:62px; padding:0 17px 25px; }.brand-mark { transform:scale(.82); margin-bottom:42px; }.nav-item span,.profile-chip { display:none; }.nav-item.active:before { left:-7px; }.sidebar-bottom { gap:20px; }.hero-panel { min-height:480px; }.hero-copy { padding:56px 26px 84px; }.hero-copy h1 { font-size:47px; }.hero-orbit { right:-22%; top:53%; opacity:.5; }.hero-feature-card { left:26px; right:auto; bottom:21px; min-width:0; }.hero-meta { left:26px; bottom:100px; }.topbar { height:67px; }.status-pill { display:none; }.section-heading { align-items:flex-start; flex-direction:column; }.heading-tools { width:100%; justify-content:space-between; }.search-box { flex:1; max-width:250px; }.game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.game-art { height:124px; }.art-icon { width:53px;height:53px;font-size:25px; }.lower-grid { padding-top:42px; }.community-panel { padding:27px 22px; }.community-ring { right:-20px; }.avatar-a { right:155px; }.avatar-b { right:25px; }.avatar-c { right:15px; }.avatar-d { right:124px; }.site-footer { flex-wrap:wrap; gap:10px; }.footer-links { width:100%; } }
@media (max-width:430px) { .hero-copy h1 { font-size:41px; }.game-grid { grid-template-columns:1fr 1fr; }.game-art { height:112px; }.game-info h3 { font-size:11px; }.heading-tools { gap:10px; }.view-all { font-size:9px; } }