@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#07080d;--panel:#10121a;--panel2:#151824;--text:#f6f7fb;--muted:#9da2b2;--accent:#8b5cf6;--accent2:#22d3ee}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% 0,#21113e 0,transparent 35%),var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}a{text-decoration:none;color:inherit}
#loader{position:fixed;inset:0;background:#050509;z-index:99;display:grid;place-content:center;gap:18px;text-align:center;animation:loaderOut .7s ease 1.8s forwards}.loader-logo{font-size:52px;font-weight:900;letter-spacing:-4px}.loader-logo span{color:var(--accent)}.loader-bar{width:180px;height:3px;background:#242735;border-radius:9px;overflow:hidden;margin:auto}.loader-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));animation:load 1.5s ease forwards}
@keyframes load{to{width:100%}}@keyframes loaderOut{to{opacity:0;visibility:hidden;pointer-events:none}}
header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;border-bottom:1px solid #ffffff0c;background:#07080dcc;backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}.brand{font-weight:900;letter-spacing:-1px}.brand span{display:inline-grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));width:30px;height:30px;border-radius:9px;margin-right:8px}.brand b{color:var(--muted);font-size:11px;margin-left:5px;letter-spacing:1px}nav{display:flex;gap:28px;color:#b8bdcb;font-size:14px}nav a:hover{color:white}.nav-btn,.primary{background:linear-gradient(135deg,var(--accent),#6d4cf2);padding:12px 17px;border-radius:11px;font-size:13px;font-weight:700;box-shadow:0 10px 35px #7c3aed25}
.hero{min-height:650px;max-width:1200px;margin:auto;padding:90px 6%;display:flex;align-items:center;justify-content:space-between;gap:50px;overflow:hidden}.hero-copy{max-width:650px;animation:up .8s ease .15s both}.eyebrow{color:#a78bfa;font-size:11px;font-weight:800;letter-spacing:3px;margin:0 0 15px}.hero h1{font-size:clamp(48px,7vw,88px);line-height:.96;letter-spacing:-5px;margin:0 0 25px}.hero h1 em{font-style:normal;background:linear-gradient(90deg,#c4b5fd,#67e8f9);color:transparent;background-clip:text}.lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:570px}.primary{display:inline-flex;margin-top:15px;gap:18px;align-items:center}.primary span{font-size:18px}.hero-orb{width:350px;height:350px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#8b5cf6 0,#321b6b 28%,#11121b 64%,transparent 70%);animation:float 5s ease-in-out infinite}.orb-core{width:130px;height:130px;border-radius:38px;display:grid;place-items:center;font-size:75px;font-weight:900;background:#0b0c13;border:1px solid #ffffff22;box-shadow:0 0 80px #8b5cf680}
@keyframes float{50%{transform:translateY(-14px) rotate(3deg)}}@keyframes up{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
.section{max-width:1200px;margin:auto;padding:75px 6%}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.section h2{font-size:42px;letter-spacing:-2px;margin:0}.count{color:var(--muted);font-size:13px}.games{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.game{background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid #ffffff0b;border-radius:20px;overflow:hidden;transition:.25s}.game:hover{transform:translateY(-5px);border-color:#8b5cf655;box-shadow:0 20px 60px #0008}.cover{height:190px;background:linear-gradient(135deg,#21134a,#0d2231);display:grid;place-items:center;font-size:52px;font-weight:900}.game:nth-child(2) .cover{background:linear-gradient(135deg,#402016,#13151f)}.game:nth-child(3) .cover{background:linear-gradient(135deg,#0c3b3d,#151526)}.game-info{padding:18px}.game-info h3{margin:0 0 7px;font-size:18px}.meta{color:var(--muted);font-size:12px}.rating{margin:13px 0;color:#fbbf24;font-size:14px}.play{display:block;text-align:center;background:#ffffff0a;padding:11px;border-radius:10px;font-size:13px;font-weight:700}.about{border-top:1px solid #ffffff0a;text-align:center;max-width:900px}.about p:last-child{color:var(--muted);line-height:1.8}footer{border-top:1px solid #ffffff0a;padding:35px 6%;display:flex;justify-content:space-between;gap:30px;color:var(--muted);font-size:12px}footer strong{color:white}.copyright{text-align:right;line-height:1.7}
.modal{position:fixed;inset:0;background:#000b;z-index:50;display:grid;place-items:center;padding:20px}.hidden{display:none}.modal-card{width:min(650px,100%);max-height:90vh;overflow:auto;background:#11131c;border:1px solid #ffffff14;border-radius:22px;padding:28px;position:relative}.close{position:absolute;right:16px;top:12px;background:none;border:0;color:white;font-size:30px;cursor:pointer}.modal-card h2{margin-top:0}.comment{padding:14px 0;border-bottom:1px solid #ffffff0b}.comment b{font-size:13px}.comment p{color:#b4b8c5;font-size:13px;line-height:1.5}.comment-form{display:flex;flex-direction:column;gap:10px;margin-top:20px}.comment-form input,.comment-form textarea{background:#090a10;border:1px solid #ffffff12;border-radius:10px;padding:12px;color:white;font:inherit}.stars{display:flex;gap:5px}.stars button{background:none;border:0;font-size:23px;color:#555;cursor:pointer}.stars button.active{color:#fbbf24}
@media(max-width:800px){header{padding:0 4%;height:68px}nav{display:none}.nav-btn{padding:10px 12px}.hero{min-height:600px;padding:70px 6%;display:block}.hero-orb{width:260px;height:260px;margin:55px auto 0}.orb-core{width:100px;height:100px;font-size:55px}.games{grid-template-columns:1fr}.section{padding:55px 6%}.section h2{font-size:34px}footer{display:block}.copyright{text-align:left;margin-top:22px}.hero h1{letter-spacing:-3px}}

.empty-games{width:100%;padding:70px 24px;text-align:center;border:1px dashed rgba(255,255,255,.14);border-radius:24px;background:rgba(255,255,255,.02)}
.empty-icon{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);font-size:30px;color:#fff}
.empty-games h3{margin:0 0 8px;font-size:22px}
.empty-games p{margin:0;color:#888}
.instagram{display:inline-block;margin-top:10px;color:#aaa;text-decoration:none}.instagram:hover{color:#fff}
