:root{--bg-primary: #0f0f0f;--bg-secondary: #1a1a1a;--bg-tertiary: #1f1f1f;--bg-surface: #252525;--bg-surface-hover: #2a2a2a;--bg-border: #333333;--gold-primary: #FFD700;--gold-bright: #FFA500;--gold-dark: #DAA520;--gold-glow: rgba(255, 215, 0, .3);--text-primary: #ffffff;--text-secondary: #b3b3b3;--text-tertiary: #808080;--success: #10b981;--error: #ef4444;--warning: #f59e0b;--info: #3b82f6}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;max-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;overflow:hidden}#app{width:100%;height:100%;max-height:100vh;display:flex;align-items:center;justify-content:center;overflow:auto}.container{text-align:center;max-width:600px;width:100%}h1{font-size:3rem;margin-bottom:1rem;color:var(--gold-primary);text-shadow:0 0 10px var(--gold-glow),2px 2px 4px rgba(0,0,0,.5);font-weight:700}.subtitle{font-size:1.2rem;margin-bottom:2rem;color:var(--text-secondary)}.status{background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:12px;padding:2rem;margin-top:2rem}.status-item{margin:1rem 0;font-size:1.1rem}.status-label{font-weight:600;margin-right:.5rem}.loading{display:inline-block;width:20px;height:20px;border:3px solid var(--bg-border);border-radius:50%;border-top-color:var(--gold-primary);animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{background:#ef44441a;border:1px solid var(--error);border-radius:8px;padding:1rem;margin-top:1rem;display:none;color:var(--error)}.error.show{display:block}.auth-button{background:var(--gold-primary);color:var(--bg-primary);border:none;padding:12px 24px;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;margin-top:1rem;transition:all .2s;box-shadow:0 4px 6px #0000004d,0 0 10px var(--gold-glow)}.auth-button:hover{background:var(--gold-bright);box-shadow:0 6px 12px #0006,0 0 15px var(--gold-glow);transform:translateY(-2px)}.auth-button:disabled{background:var(--bg-surface);color:var(--text-tertiary);cursor:not-allowed;box-shadow:none;transform:none}.main-menu{width:100%;max-width:1200px;margin:0 auto;padding:2rem;color:var(--text-primary)}.menu-header{text-align:center;margin-bottom:2rem}.menu-header h1{font-size:3rem;margin-bottom:.5rem;color:var(--gold-primary);text-shadow:0 0 15px var(--gold-glow),2px 2px 4px rgba(0,0,0,.5);font-weight:700}.menu-header .subtitle{font-size:1.2rem;color:var(--text-secondary)}.credits-panel{background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:12px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 4px 6px #0000004d}.credits-display{display:flex;justify-content:space-around;flex-wrap:wrap;gap:1rem}.credits-item{display:flex;flex-direction:column;align-items:center;gap:.5rem}.credits-label{font-size:.9rem;color:var(--text-secondary);font-weight:500}.credits-value{font-size:1.5rem;font-weight:700;color:var(--gold-primary);text-shadow:0 0 8px var(--gold-glow)}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-bottom:2rem}.game-card{background:var(--bg-surface);border:2px solid var(--bg-border);border-radius:12px;padding:1.5rem;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;gap:1rem;box-shadow:0 2px 4px #0000004d}.game-card:hover:not([data-disabled]){transform:translateY(-4px);border-color:var(--gold-primary);box-shadow:0 8px 16px #00000080,0 0 20px var(--gold-glow);background:var(--bg-surface-hover)}.game-card[data-disabled]{opacity:.5;cursor:not-allowed;border-color:var(--bg-border)}.game-icon{font-size:3rem;text-align:center}.game-info{flex:1}.game-name{font-size:1.3rem;margin-bottom:.5rem;font-weight:600;color:var(--text-primary)}.game-description{font-size:.9rem;color:var(--text-secondary);margin-bottom:.75rem;line-height:1.4}.game-meta{display:flex;gap:1rem;font-size:.85rem;color:var(--text-tertiary);flex-wrap:wrap}.game-play-button{background:var(--gold-primary);color:var(--bg-primary);border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;width:100%;box-shadow:0 2px 4px #0000004d,0 0 8px var(--gold-glow)}.game-play-button:hover{background:var(--gold-bright);box-shadow:0 4px 8px #0006,0 0 12px var(--gold-glow);transform:translateY(-2px)}.game-loading{text-align:center;padding:3rem;font-size:1.2rem;color:var(--text-secondary)}.menu-footer{text-align:center}.refresh-button{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--bg-border);padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .2s;font-weight:500}.refresh-button:hover{background:var(--bg-surface-hover);border-color:var(--gold-primary);color:var(--gold-primary);box-shadow:0 0 10px var(--gold-glow)}.game-container{width:100%;max-width:1200px;margin:0 auto;padding:2rem;color:var(--text-primary);display:block;position:relative;z-index:1}.game-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-shrink:0}.back-button{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--bg-border);padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .2s;font-weight:500}.back-button:hover{background:var(--bg-surface-hover);border-color:var(--gold-primary);color:var(--gold-primary);box-shadow:0 0 10px var(--gold-glow)}.game-header h1{font-size:2.5rem;margin:0;color:var(--gold-primary);text-shadow:0 0 15px var(--gold-glow),2px 2px 4px rgba(0,0,0,.5);font-weight:700}.game-content{background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:12px;padding:3rem;min-height:400px;box-shadow:0 4px 6px #0000004d}.game-placeholder{text-align:center;padding:2rem}.game-placeholder h2{font-size:2rem;margin-bottom:1rem;color:var(--gold-primary);text-shadow:0 0 10px var(--gold-glow);font-weight:700}.game-placeholder p{font-size:1.1rem;margin:1rem 0;color:var(--text-secondary);line-height:1.6}.connect4-game{width:100%;max-width:800px;margin:0 auto;display:flex;flex-direction:column;height:100%;max-height:100%;overflow:hidden}.connect4-status{background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:12px;padding:1.5rem;margin-bottom:2rem;text-align:center;box-shadow:0 4px 6px #0000004d}.status-text{font-size:1.5rem;font-weight:600;color:var(--text-primary)}.status-text.game-over.winner{color:var(--gold-primary);text-shadow:0 0 10px var(--gold-glow);animation:pulse 1s ease-in-out infinite}.status-text.game-over.draw{color:var(--text-secondary)}.player-indicator{display:inline-block;padding:.25rem .75rem;border-radius:6px;font-weight:700;margin:0 .25rem}.player-indicator.player-1{background:#ef444433;color:#ef4444;border:2px solid #ef4444}.player-indicator.player-2{background:#eab30833;color:#eab308;border:2px solid #eab308}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.connect4-board-container{background:var(--bg-surface);border:1px solid var(--bg-border);border-radius:12px;padding:1rem;margin-bottom:1rem;box-shadow:0 4px 6px #0000004d;display:flex;justify-content:center;align-items:center;flex:1;min-height:0;overflow:auto}.connect4-board{display:flex;flex-direction:column;gap:.5rem}.connect4-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);gap:.5rem;background:#1e40af;padding:1rem;border-radius:12px;border:3px solid #1e3a8a}.connect4-cell{width:50px;height:50px;border-radius:50%;background:var(--bg-primary);border:3px solid var(--bg-border);display:flex;align-items:center;justify-content:center;font-size:2rem;transition:all .2s ease;position:relative;box-shadow:inset 0 2px 4px #0000004d;cursor:pointer}.connect4-cell:hover:not(.player-1):not(.player-2){background:var(--bg-tertiary);border-color:var(--gold-primary);box-shadow:inset 0 2px 4px #0000004d,0 0 8px var(--gold-glow)}.connect4-cell.player-1{background:#ef4444;border-color:#dc2626;box-shadow:0 0 15px #ef444480,inset 0 2px 4px #0000004d;animation:dropPiece .4s ease-out}.connect4-cell.player-2{background:#eab308;border-color:#ca8a04;box-shadow:0 0 15px #eab30880,inset 0 2px 4px #0000004d;animation:dropPiece .4s ease-out}.connect4-cell.winning-cell{animation:winPulse .6s ease-in-out infinite;box-shadow:0 0 20px var(--gold-glow),0 0 30px var(--gold-glow)}@keyframes dropPiece{0%{transform:translateY(-300px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes winPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.connect4-controls{display:flex;justify-content:center;gap:1rem}.connect4-reset{background:var(--gold-primary);color:var(--bg-primary);border:none;padding:.75rem 2rem;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 2px 4px #0000004d,0 0 8px var(--gold-glow)}.connect4-reset:hover{background:var(--gold-bright);box-shadow:0 4px 8px #0006,0 0 12px var(--gold-glow);transform:translateY(-2px)}.connect4-reset:active{transform:translateY(0)}@media (max-width: 768px){.games-grid{grid-template-columns:1fr}.credits-display{flex-direction:column;align-items:flex-start}.game-container{padding:1rem}.game-header h1{font-size:1.8rem}.connect4-cell{width:35px;height:35px;font-size:1.5rem}.connect4-grid{padding:.5rem;gap:.3rem}.status-text{font-size:1rem}.game-container{padding:.5rem}.game-header h1{font-size:1.5rem}.connect4-status{padding:.75rem}}