@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-main:#121212;--bg-card:#1e1e1e;--bg-elevated:#2a2a2a;--text-main:#e0e0e0;--text-muted:#9e9e9e;--primary:#07f;--primary-hover:#005fcc;--accent:#00faff;--border:#ffffff14}body{background-color:var(--bg-main);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;font-family:Inter,sans-serif}html{scroll-behavior:smooth}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.4s ease-out forwards fadeIn}header{background:var(--bg-card);z-index:100;position:sticky;top:0;box-shadow:0 4px 12px #0006}.navbar{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:16px 40px;display:flex}.logo{color:var(--accent);letter-spacing:.5px;font-size:1.5rem;font-weight:700;text-decoration:none;transition:transform .2s}.logo:hover{transform:scale(1.02)}.nav-links{align-items:center;gap:20px;display:flex}.nav-links a{color:var(--text-main);border-radius:8px;padding:8px 12px;font-weight:500;text-decoration:none;transition:all .2s}.nav-links a:hover{color:var(--accent);background:#00faff0d}.nav-links a.active{color:var(--accent);background:#00faff1a}.hero{text-align:center;color:var(--text-main);border-bottom:1px solid var(--border);background:linear-gradient(135deg,#1a1a1a,#2c2c2c);padding:80px 20px}.hero h1{color:#fff;margin:0;font-size:3rem;font-weight:700}.hero p{color:var(--text-muted);margin-top:12px;font-size:1.2rem}.btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:8px;margin-top:20px;padding:12px 24px;font-size:1rem;font-weight:600;text-decoration:none;transition:background .3s,transform .15s,box-shadow .3s;display:inline-block}.btn:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 4px 12px #0077ff4d}.btn:active{transform:scale(.96);box-shadow:0 2px 6px #07f3}.logout-btn{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:8px;padding:8px 16px;font-size:.95rem;font-weight:600;transition:background .2s,transform .15s,box-shadow .2s}.logout-btn:hover{background:#dc2626;transform:translateY(-2px);box-shadow:0 4px 12px #ef44444d}.container{max-width:1200px;margin:0 auto;padding:0 16px}a:focus,button:focus,input:focus,select:focus{outline:2px solid var(--primary);outline-offset:2px}.featured{text-align:center;max-width:1100px;margin:60px auto 20px;padding:20px}.featured h2{color:var(--accent);margin-bottom:30px;font-size:2.2rem;font-weight:700}.featured-card{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;flex-wrap:wrap;justify-content:center;align-items:center;padding:40px;transition:transform .3s,box-shadow .3s;display:flex;overflow:hidden;box-shadow:0 8px 24px #0009}.featured-card:hover{transform:scale(1.02);box-shadow:0 16px 40px #00faff33}.featured-card:active{transform:scale(.98)}.featured-card-icon{background:var(--bg-elevated);border-radius:16px;justify-content:center;align-items:center;width:220px;height:220px;margin-right:50px;font-size:7rem;display:flex}.featured-info{text-align:left;max-width:450px}.featured-info h3{color:#fff;margin:0;font-size:2.2rem}.featured-info p{color:var(--text-muted);margin:15px 0 30px;font-size:1.15rem;line-height:1.6}.games{text-align:center;max-width:1200px;margin:40px auto;padding:20px}.games h2{color:var(--accent);margin-bottom:30px;font-size:2.2rem;font-weight:700}.search-filter{flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:40px;display:flex}.search-filter input,.search-filter select{border:1px solid var(--border);background:var(--bg-card);min-width:250px;color:var(--text-main);border-radius:10px;padding:12px 20px;font-family:Inter,sans-serif;font-size:1rem;transition:border-color .2s,box-shadow .2s}.search-filter input:focus,.search-filter select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0077ff1a}.game-menu{grid-template-columns:repeat(4,1fr);gap:30px;padding:10px 0 50px;display:grid}@media (width<=1024px){.game-menu{grid-template-columns:repeat(3,1fr)}}@media (width<=768px){.game-menu{grid-template-columns:repeat(2,1fr)}.featured-card{flex-direction:column;padding:30px 20px}.featured-card-icon{width:180px;height:180px;margin-bottom:30px;margin-right:0;font-size:5rem}.featured-info{text-align:center}}@media (width<=480px){.game-menu{grid-template-columns:1fr}}.game-card{background:var(--bg-card);border:1px solid var(--border);cursor:pointer;text-align:center;border-radius:16px;flex-direction:column;align-items:center;padding:24px;transition:transform .3s,box-shadow .3s;display:flex;overflow:hidden;box-shadow:0 6px 16px #0006}.game-card:hover{z-index:10;transform:scale(1.04);box-shadow:0 16px 32px #0077ff40}.game-card:active{transform:scale(.97)}.game-card-icon{background:var(--bg-elevated);border-radius:12px;justify-content:center;align-items:center;width:100%;height:150px;margin-bottom:20px;font-size:5rem;transition:transform .3s;display:flex}.game-card:hover .game-card-icon{transform:scale(1.05)}.game-card h3{color:#fff;margin:0 0 10px;font-size:1.4rem;font-weight:600}.game-desc{color:var(--text-muted);flex-grow:1;margin:0 0 24px;font-size:.95rem;line-height:1.5}.play-btn{box-sizing:border-box;width:100%;margin-top:auto;padding:12px}.auth-container{background:var(--bg-main);min-height:calc(100vh - 80px);color:var(--text-main);justify-content:center;align-items:center;padding:20px;display:flex}.auth-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;width:100%;max-width:420px;padding:40px;box-shadow:0 12px 40px #0009}.auth-card h2{text-align:center;color:#fff;margin-top:0;margin-bottom:30px;font-size:2rem;font-weight:700}.auth-card input{border:1px solid var(--border);background:var(--bg-elevated);color:#fff;box-sizing:border-box;border-radius:10px;outline:none;width:100%;margin:12px 0;padding:14px 16px;font-family:Inter,sans-serif;font-size:1rem;transition:border-color .2s,box-shadow .2s}.auth-card input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0077ff26}.auth-card input::placeholder{color:var(--text-muted)}.auth-card button{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:10px;width:100%;margin-top:20px;padding:14px;font-size:1.1rem;font-weight:600;transition:background .3s,transform .15s,box-shadow .3s}.auth-card button:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 6px 16px #0077ff4d}.auth-card p{text-align:center;color:var(--text-muted);margin-top:24px;font-size:.95rem}.auth-card a{color:var(--accent);font-weight:500;text-decoration:none;transition:color .2s}.auth-card a:hover{color:#fff;text-decoration:underline}.alert{text-align:center;border-radius:8px;margin-bottom:20px;padding:12px;font-size:.95rem;font-weight:500}.alert-error{color:#fca5a5;background:#ef444426;border:1px solid #ef44444d}.alert-success{color:#86efac;background:#22c55e26;border:1px solid #22c55e4d}.auth-card button:disabled{opacity:.7;cursor:not-allowed;box-shadow:none;transform:none}:root{--brand:#07f;--text:#e0e0e0;--muted:#9e9e9e;--card-bg:#1e1e1e;--chip-bg:#2a2a2a;--cell-bg:#1a1a1a;--grid-line:#ffffff14;--accent-win:#16c37b;--accent-lose:#f55;--accent-draw:#ffb86c}.rps-card{background:var(--card-bg);text-align:center;border:1px solid #ffffff14;border-radius:16px;max-width:560px;margin:24px auto 60px;padding:20px 20px 24px;box-shadow:0 4px 20px #0009}.choices{justify-content:center;gap:16px;margin:10px 0 16px;display:flex}.choice-btn{border:1px solid var(--grid-line);background:var(--cell-bg);width:110px;height:110px;color:var(--text);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:2.4rem;transition:transform .2s,box-shadow .25s,background .25s;display:flex;box-shadow:0 2px 8px #1018280a}.choice-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px #0077ff2e}.choice-btn.win{box-shadow:0 0 0 2px var(--accent-win), 0 10px 24px #16c37b40}.choice-btn.lose{box-shadow:0 0 0 2px var(--accent-lose), 0 10px 24px #ff555540}.choice-btn.draw{box-shadow:0 0 0 2px var(--accent-draw), 0 10px 24px #ffb86c40}:root{--brand:#07f;--text:#e0e0e0;--muted:#9e9e9e;--card-bg:#1e1e1e;--chip-bg:#2a2a2a;--cell-bg:#151515;--grid-line:#ffffff14;--snake:#16c37b;--food:#f55;--radius-board:12px}.snake-card{background:var(--card-bg);border:1px solid var(--grid-line);text-align:center;box-sizing:border-box;border-radius:16px;flex-direction:column;align-items:center;width:100%;max-width:500px;margin:24px auto;padding:24px;display:flex;box-shadow:0 4px 20px #0009}.snake-card h2{color:#fff;margin-top:0}.scoreboard{color:var(--text);justify-content:center;gap:20px;width:100%;margin:10px 0 24px;display:flex}.scoreboard p{background:var(--chip-bg);border:1px solid var(--grid-line);border-radius:10px;margin:0;padding:10px 18px;font-size:1.05rem}.snake-board{border-radius:var(--radius-board);box-sizing:border-box;background:#2a2a2a;border:2px solid #2a2a2a;grid-template-columns:repeat(20,1fr);gap:1px;width:100%;max-width:400px;margin:0 auto 24px;display:grid;position:relative;overflow:hidden;box-shadow:0 8px 32px #0077ff26}.snake-cell{aspect-ratio:1;box-sizing:border-box;background:#111;width:100%;display:flex}.snake-cell.snake{background:var(--snake)}.snake-cell.food{background:var(--food)}.actions{justify-content:center;gap:16px;width:100%;display:flex}:root{--brand:#07f;--text:#e0e0e0;--muted:#9e9e9e;--card-bg:#1e1e1e;--chip-bg:#2a2a2a;--cell-bg:#1a1a1a;--grid-line:#ffffff14;--winner:#ffb86c;--x-color:#f55;--o-color:#16c37b}.ttt-card{background:var(--card-bg);text-align:center;border:1px solid #ffffff14;border-radius:16px;max-width:560px;margin:24px auto 60px;padding:20px 20px 24px;box-shadow:0 4px 20px #0009}.scoreboard{color:var(--text);justify-content:center;gap:20px;margin:6px 0 10px;display:flex}.scoreboard span{color:var(--brand);font-weight:700}.status{color:var(--text);text-align:center;min-height:1.5em;margin:8px 0 12px;font-size:1.2rem}.ttt-board{background:var(--chip-bg);box-shadow:inset 0 0 0 1px var(--grid-line);aspect-ratio:1;box-sizing:border-box;border-radius:12px;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:320px;margin:10px auto 20px;padding:14px;display:grid}.ttt-cell{background:var(--cell-bg);border:1px solid var(--grid-line);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;border-radius:12px;justify-content:center;align-items:center;width:100%;height:100%;font-size:3.5rem;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 2px 8px #1018280a}.ttt-cell:hover:not(.taken){transform:translateY(-2px);box-shadow:0 10px 28px #0077ff2e}.ttt-cell.taken{cursor:not-allowed}.ttt-cell.X{color:var(--x-color);font-weight:700}.ttt-cell.O{color:var(--o-color);font-weight:700}.winner{background:var(--winner)!important}.leaderboard-container{justify-content:center;align-items:flex-start;min-height:calc(100vh - 160px);padding:2rem;display:flex}.leaderboard-card{background-color:var(--card-bg);border-radius:var(--radius);width:100%;max-width:600px;box-shadow:var(--shadow);border:1px solid var(--border-color);text-align:center;padding:2.5rem}.leaderboard-card h2{color:var(--primary);margin-top:0;margin-bottom:2rem;font-size:2rem}.leaderboard-tabs{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:2rem;display:flex}.tab-btn{background-color:var(--bg-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:var(--radius);cursor:pointer;transition:var(--transition);padding:.5rem 1rem;font-weight:500}.tab-btn:hover{background-color:var(--border-color)}.tab-btn.active{background-color:var(--primary);color:#fff;border-color:var(--primary)}.table-responsive{overflow-x:auto}.leaderboard-table{border-collapse:collapse;text-align:left;width:100%}.leaderboard-table th,.leaderboard-table td{border-bottom:1px solid var(--border-color);padding:1rem}.leaderboard-table th{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;font-weight:600}.leaderboard-table tr{transition:var(--transition)}.leaderboard-table tbody tr:hover{background-color:#ffffff0d}.player-name{color:var(--text-color);font-weight:500}.score-value{color:var(--primary);font-weight:700}.top-1{background-color:#ffd7001a}.top-2{background-color:#c0c0c01a}.top-3{background-color:#cd7f321a}.no-data{text-align:center;color:var(--text-muted);padding:2rem!important}.loading-spinner,.error-message{color:var(--text-muted);padding:3rem}