:root{--ink:#fff;--muted:#c8c2e7;--panel:rgba(17,12,45,.76);--line:rgba(255,255,255,.16);--purple:#9d6cff;--pink:#ff59bd;--gold:#ffd85a;--cyan:#62edff}
*{box-sizing:border-box}html{min-height:100%;background:#080513}body{margin:0;min-height:100vh;color:var(--ink);font-family:Inter,ui-rounded,"SF Pro Rounded",system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(circle at 18% 5%,rgba(123,73,255,.38),transparent 32%),radial-gradient(circle at 84% 14%,rgba(255,67,178,.25),transparent 29%),linear-gradient(145deg,#080513 0%,#130a2b 48%,#071428 100%);overflow-x:hidden}.stars{position:fixed;inset:0;pointer-events:none;opacity:.75;background-image:radial-gradient(circle,rgba(255,255,255,.8) 1px,transparent 1.5px),radial-gradient(circle,rgba(255,216,90,.75) 1px,transparent 1.5px);background-size:46px 46px,79px 79px;background-position:0 0,20px 28px;mask-image:linear-gradient(to bottom,#000,transparent 92%)}.shell{position:relative;width:min(1180px,calc(100% - 32px));margin:0 auto;padding:clamp(48px,8vw,92px) 0 28px}.hero{text-align:center;max-width:800px;margin:0 auto 42px}.eyebrow{display:inline-flex;padding:8px 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.07);font-size:12px;font-weight:900;letter-spacing:.14em;color:#fff2ac}.hero h1{margin:18px 0 12px;font-size:clamp(42px,7vw,82px);line-height:.95;letter-spacing:-.065em;text-shadow:0 8px 44px rgba(137,85,255,.42)}.hero p{margin:0;color:var(--muted);font-size:clamp(16px,2vw,20px);line-height:1.55}.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.game-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:30px;background:var(--panel);box-shadow:0 25px 80px rgba(0,0,0,.32);backdrop-filter:blur(16px);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.game-card:hover{transform:translateY(-7px);border-color:rgba(255,255,255,.34);box-shadow:0 35px 100px rgba(0,0,0,.45)}.art{position:relative;height:280px;overflow:hidden;border-bottom:1px solid var(--line)}.star-art{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.28),transparent 17%),linear-gradient(145deg,#8a5cff,#ff63b8 65%,#ffcf67)}.star-art:after{content:"";position:absolute;inset:auto -15% -38% -15%;height:62%;border-radius:50%;background:linear-gradient(180deg,#6f42c9,#2c226a);box-shadow:inset 0 14px 0 rgba(255,255,255,.08)}.star-art img{position:relative;z-index:3;width:190px;filter:drop-shadow(0 20px 24px rgba(36,12,84,.42));animation:float 3.6s ease-in-out infinite}.moon{position:absolute;width:110px;height:110px;border-radius:50%;right:11%;top:13%;background:#fff4b8;box-shadow:0 0 45px rgba(255,244,184,.6)}.spark{position:absolute;z-index:2;font-size:38px;color:#fff}.s1{left:12%;top:16%}.s2{right:21%;bottom:20%;font-size:25px}.hover-art{display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,rgba(255,216,74,.18),transparent 25%),linear-gradient(145deg,#050615,#151021 55%,#260d2c)}.arena-lines{position:absolute;inset:0;background:linear-gradient(rgba(98,237,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,89,189,.15) 1px,transparent 1px);background-size:38px 38px;transform:perspective(420px) rotateX(58deg) scale(1.45);transform-origin:center bottom;mask-image:linear-gradient(to top,#000,transparent 85%)}.hover-logo{position:relative;z-index:2;width:150px;height:150px;border-radius:42px;display:grid;place-items:center;font-size:84px;font-weight:1000;color:#08090d;background:linear-gradient(135deg,#fff,#ccefff 35%,#ffd84a 67%,#ff4fc3);box-shadow:0 0 60px rgba(255,216,74,.28),0 0 100px rgba(255,79,195,.18);animation:hoverzoom 2.7s ease-in-out infinite}.hover-logo small{position:absolute;bottom:17px;font-size:13px;letter-spacing:.28em}.orb{position:absolute;border-radius:50%;filter:blur(1px)}.o1{width:28px;height:28px;background:var(--cyan);left:16%;top:22%;box-shadow:0 0 26px var(--cyan)}.o2{width:20px;height:20px;background:var(--pink);right:16%;bottom:20%;box-shadow:0 0 24px var(--pink)}.content{padding:25px}.meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#bdb5e4;font-size:12px;font-weight:900;letter-spacing:.11em}.badge{padding:7px 10px;border-radius:999px;color:#fff;letter-spacing:0;background:rgba(255,255,255,.1)}h2{margin:16px 0 10px;font-size:clamp(28px,4vw,42px);letter-spacing:-.04em}.content p{min-height:72px;margin:0;color:var(--muted);line-height:1.5}.features{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.features span{padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.07);font-size:13px}.play{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border-radius:16px;color:#100a24;text-decoration:none;font-weight:1000;background:linear-gradient(135deg,#fff,#d9cfff 48%,#ffd85a);transition:filter .2s ease,transform .2s ease}.hover-card .play{background:linear-gradient(135deg,#fff,#ffd84a 58%,#ff74ca)}.play:hover{filter:brightness(1.08);transform:scale(1.015)}.play b{font-size:24px}footer{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:28px 10px 0;color:#9f98bf;font-size:13px}@keyframes float{50%{transform:translateY(-10px) rotate(2deg)}}@keyframes hoverzoom{50%{transform:translateY(-8px) scale(1.035)}}@media(max-width:780px){.shell{width:min(100% - 22px,620px);padding-top:38px}.game-grid{grid-template-columns:1fr}.art{height:230px}.content p{min-height:0}.hero{margin-bottom:28px}.game-card{border-radius:24px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}