*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;background:radial-gradient(circle at 20% 0%,#263b9b,#070b18 58%);color:white}.nav{position:sticky;top:0;z-index:10;display:flex;gap:18px;align-items:center;justify-content:space-between;padding:16px 5%;background:rgba(9,14,31,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.12)}.logo{font-size:25px;font-weight:900;text-decoration:none;color:white}#search{width:min(500px,52vw);border:0;border-radius:18px;padding:14px 18px;background:#182243;color:white}.hero{max-width:1200px;margin:28px auto;padding:38px 24px;display:grid;grid-template-columns:1.4fr .8fr;gap:24px;align-items:center}.hero-text{padding:44px;border-radius:34px;background:linear-gradient(135deg,#2563eb,#7c3aed);box-shadow:0 25px 70px #0008}.badge{display:inline-block;background:#fff;color:#111;padding:9px 14px;border-radius:999px;font-weight:900;font-size:13px}.hero h1{font-size:54px;line-height:1;margin:16px 0}.sub{font-size:19px;color:#e6eaff;max-width:620px}.btn{display:inline-block;margin-top:14px;background:#22c55e;color:#061018;text-decoration:none;font-weight:900;padding:14px 22px;border-radius:18px}.hero-card{min-height:315px;border-radius:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:110px;background:linear-gradient(145deg,#06b6d4,#22c55e);box-shadow:0 25px 70px #0008}.hero-card span{font-size:30px;font-weight:900}.chips{max-width:1200px;margin:0 auto 18px;padding:0 20px;display:flex;gap:10px;flex-wrap:wrap}.chip{border:1px solid #33406d;background:#101936;color:white;padding:10px 15px;border-radius:999px;cursor:pointer}.chip.active{background:#2563eb}main{max-width:1200px;margin:auto;padding:0 20px 45px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:18px}.card{position:relative;overflow:hidden;background:#121a36;border:1px solid #26315c;border-radius:24px;color:white;text-decoration:none;box-shadow:0 12px 30px #0006;transition:.18s}.card:hover{transform:translateY(-7px);border-color:#48e1ff}.thumb{height:125px;display:flex;align-items:center;justify-content:center;font-size:56px;background:linear-gradient(135deg,#0ea5e9,#8b5cf6)}.card h3{font-size:16px;padding:12px 13px 4px;margin:0}.tag{color:#b8c4ff;padding:0 13px 14px;font-size:13px}.playmark{position:absolute;top:10px;right:10px;background:#22c55e;color:#061018;border-radius:999px;font-weight:900;font-size:12px;padding:6px 9px}.online{background:#facc15;color:#111}.game-page{max-width:1100px;margin:28px auto;padding:20px}.game-box{background:#111936;border-radius:26px;padding:18px;box-shadow:0 20px 50px #0008}.game-area{height:580px;background:#050816;border-radius:18px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;text-align:center}button{padding:12px 18px;border:0;border-radius:14px;background:#2563eb;color:white;font-weight:900;cursor:pointer;margin:6px}input.gameinput{padding:12px;border-radius:12px;border:0;margin:8px}.big{font-size:80px}.panel{font-size:22px;line-height:1.7}.target{position:absolute;border-radius:50%;background:white;width:50px;height:50px;cursor:pointer}.player{position:absolute;width:45px;height:45px;background:#22c55e;border-radius:10px}.enemy{position:absolute;width:45px;height:45px;background:#ef4444;border-radius:10px}.star{position:absolute;font-size:38px}.paddle{position:absolute;width:16px;height:90px;background:white;border-radius:8px}.ball{position:absolute;width:28px;height:28px;background:white;border-radius:50%}.cell{width:90px;height:90px;font-size:40px}.tile{width:70px;height:70px;background:#1e2a55;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px}footer{text-align:center;color:#9aa6d6;padding:32px}@media(max-width:760px){.nav{flex-direction:column;align-items:stretch}.hero{grid-template-columns:1fr}.hero h1{font-size:36px}#search{width:100%}.game-area{height:470px}}