*,*::before,*::after {margin:0;padding:0;box-sizing:border-box;}
@font-face {font-family:'Poppins';src:url('../fonts/Poppins-Regular.woff2') format('woff2');font-weight:400;font-style:normal;}
@font-face {font-family:'Poppins';src:url('../fonts/Poppins-Bold.woff2') format('woff2');font-weight:700;font-style:normal;}

#particles-js {position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;}
:root {--primary:#8a2be2;--primary-light:#9d4edd;--secondary:#6a0dad;--dark:#121212;--darker:#0a0a0a;--light:#e0e0e0;--text:rgba(255,255,255,0.9);--text-secondary:rgba(255,255,255,0.6);--hover-color:#b388ff;}
* {margin:0;padding:0;box-sizing:border-box;}
body {font-family:'Poppins',sans-serif;background-color:var(--dark);color:var(--text);line-height:1.6;}
a {text-decoration:none;color:inherit;}
.header {background:var(--darker);padding:1rem;border-bottom:1px solid rgba(138,43,226,0.2);}
.header-container {max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;}
.logo-wrapper {display:flex;align-items:center;gap:0.75rem;}
.logo-img {height:36px;transition:transform 0.3s;}
.logo-img:hover {transform:scale(1.05);}
.site-title {font-size:1.5rem;font-weight:700;background:linear-gradient(to right,var(--primary),var(--hover-color));-webkit-background-clip:text;background-clip:text;color:transparent;position: absolute;left: -999999px;}
.main-nav {flex:1;min-width:300px;}
.nav-list {display:flex;list-style:none;gap:0.5rem;flex-wrap:wrap;justify-content:center;}
.nav-item {position:relative;}
.nav-link {color:var(--text-secondary);padding:0.5rem 1rem;font-size:0.95rem;transition:all 0.3s;border-radius:20px;}
.nav-link:hover,.nav-link.active {color:white;background:rgba(138,43,226,0.2);}
.nav-link.active {font-weight:600;}
.search-box {position:relative;min-width:220px;flex:1;max-width:400px;}
.search-input {width:100%;padding:0.6rem 2.5rem 0.6rem 1rem;border-radius:20px;border:1px solid rgba(138,43,226,0.3);background:rgba(30,30,30,0.8);color:white;font-size:0.95rem;transition:all 0.3s;}
.search-input:focus {outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(138,43,226,0.3);}
.search-button {position:absolute;right:0.5rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-secondary);cursor:pointer;transition:color 0.3s;}
.search-button:hover {color:var(--primary);}
.main-content {max-width:1200px;margin:2rem auto;padding:0 1rem;}
.section-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:0 0.5rem;}
.section-title {font-size:1.75rem;font-weight:700;color:var(--primary);position:relative;padding-bottom:0.5rem;}
.section-title::after {content:'';position:absolute;bottom:0;left:0;width:50px;height:3px;background:linear-gradient(to right,var(--primary),var(--hover-color));}
.view-all {color:var(--text-secondary);font-size:0.95rem;transition:color 0.3s;min-width: 65px;}
.view-all:hover {color:var(--primary);}
.games-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem;margin-bottom:3rem;}
.game-card {background:rgba(255,255,255,0.05);border-radius:10px;overflow:hidden;transition:all 0.3s;border:1px solid rgba(138,43,226,0.1);}
.game-card:hover {transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,0.3);border-color:rgba(138,43,226,0.3);}
.game-image-link {display:block;overflow:hidden;}
.game-image {width:100%;height:150px;object-fit:cover;transition:transform 0.5s;}
.game-card:hover .game-image {transform:scale(1.05);}
.game-content {padding:1.25rem;}
.game-category {display:inline-block;background:var(--primary);color:white;padding:0.25rem 0.75rem;border-radius:20px;font-size:0.75rem;font-weight:600;margin-bottom:0.75rem;transition:background 0.3s;}
.game-category:hover {background:var(--primary-light);}
.game-title-link {display:block;margin-bottom:0.5rem;}
.game-title {font-size:1.1rem;font-weight:600;transition:color 0.3s;display:inline;}
.game-title:hover {color:var(--hover-color);text-decoration:underline;}
.game-desc {color:var(--text-secondary);font-size:0.875rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px;}
.about-section {background:rgba(30,30,30,0.6);padding:2.5rem;border-radius:10px;margin:3rem 0;border:1px solid rgba(138,43,226,0.1);}
.about-title {font-size:1.75rem;color:var(--primary);margin-bottom:1.5rem;position:relative;}
.about-title::after {content:'';position:absolute;bottom:-0.5rem;left:0;width:50px;height:3px;background:linear-gradient(to right,var(--primary),var(--hover-color));}
.about-content {color:var(--text-secondary);line-height:1.7;}
.about-content p {margin-bottom:1rem;}
.about-features {margin:1.5rem 0;padding-left:1.5rem;}
.about-features li {margin-bottom:0.75rem;position:relative;}
.about-features li::before {content:'•';color:var(--primary);font-weight:bold;display:inline-block;width:1em;margin-left:-1em;}
.footer {background:var(--darker);padding:2.5rem 1rem;text-align:center;border-top:1px solid rgba(138,43,226,0.1);}
.footer-links {display:flex;justify-content:center;flex-wrap:wrap;gap:1.5rem;margin-bottom:1.5rem;}
.footer-links a {color:var(--text-secondary);font-size:0.95rem;transition:color 0.3s;position:relative;}
.footer-links a:hover {color:var(--primary);}
.footer-links a:not(:last-child)::after {content:'•';position:absolute;right:-0.75rem;color:var(--text-secondary);}
.copyright {color:var(--text-secondary);font-size:0.85rem;}
@media (max-width:768px) {.header-container {flex-direction:column;gap:1rem;}
.main-nav {order:2;width:100%;}
.nav-list {justify-content:space-around;gap:0.25rem;}
.nav-link {padding:0.5rem 0.75rem;font-size:0.85rem;}
.search-box {order:3;width:100%;max-width:100%;}
.games-grid {grid-template-columns:repeat(2,1fr);gap:1rem;}
.section-title {font-size:1.5rem;}
.about-section {padding:1.5rem;}
;}
@media (max-width:480px) {.logo-wrapper {width:100%;justify-content:center;}
.nav-link {padding:0.5rem;font-size:0.8rem;}
.game-content {padding:1rem;}
.game-title {font-size:1rem;}
.about-section {padding:1.25rem;}
.footer-links {gap:1rem;}
.footer-links a {font-size:0.85rem;}
.footer-links a:not(:last-child)::after {right:-0.5rem;}
;}