:root{--bg-dark: #0f172a;--bg-card: #1e293b;--primary: #8b5cf6;--text-main: #f8fafc;--text-muted: #94a3b8}body{margin:0;font-family:sans-serif;background-color:var(--bg-dark);color:var(--text-main);min-height:100vh}.container{max-width:800px;margin:0 auto;padding:20px;text-align:center}header{margin-bottom:40px;border-bottom:1px solid #334155;padding-bottom:20px}h1{font-size:2.5rem;background:linear-gradient(to right,var(--primary),#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.card{background:var(--bg-card);border-radius:15px;overflow:hidden;cursor:pointer;border:1px solid #334155;transition:transform .2s}.card:hover{transform:translateY(-5px);border-color:var(--primary)}.card-img{height:120px;background-color:#334155;display:flex;align-items:center;justify-content:center;font-size:40px}.card-content{padding:15px}.card h3{margin:0 0 5px;font-size:1.1rem}.card p{margin:0;color:var(--text-muted);font-size:.9rem}.bored-btn{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border:none;padding:15px 30px;font-size:1.2rem;font-weight:700;border-radius:50px;cursor:pointer;margin-top:20px;box-shadow:0 4px 15px #f59e0b66}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin-animation{animation:spin 1s linear infinite;color:var(--primary)}