body { background-color: #0f172a; /* Darker background for neon effects */ color: #f8fafc; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } .navbar { background-color: rgba(15, 23, 42, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid #1e293b !important; } .navbar-brand, .nav-link, .text-muted { color: #94a3b8 !important; } .navbar-brand { color: #f8fafc !important; } .game-container { display: inline-block; border-radius: 8px; background: #000; border: 2px solid #1e293b !important; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 10px rgba(59, 130, 246, 0.2); overflow: hidden; } #tetris, #opponent-tetris { display: block; background-color: #000; } .card { background-color: #1e293b; border: 1px solid #334155; border-radius: 8px; color: #f8fafc; } .card-title { color: #f8fafc; } .btn { border-radius: 6px; transition: all 0.2s ease-in-out; } .btn-primary { background-color: #3b82f6; border-color: #3b82f6; } .btn-primary:hover { background-color: #2563eb; border-color: #2563eb; box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); } .btn-dark { background-color: #0f172a; border-color: #334155; } .btn-outline-dark { color: #94a3b8; border-color: #334155; } .btn-outline-dark:hover { background-color: #334155; color: #f8fafc; } .btn-outline-info { color: #3b82f6; border-color: #3b82f6; } .btn-outline-info:hover { background-color: #3b82f6; color: #f8fafc; } .next-piece-container { background-color: #0f172a !important; border: 1px solid #334155 !important; border-radius: 6px; } #next-piece { background-color: transparent !important; } .list-group-item { background-color: transparent; border-color: #334155; color: #94a3b8; } .form-control { background-color: #0f172a; border: 1px solid #334155; color: #f8fafc; } .form-control:focus { background-color: #0f172a; border-color: #3b82f6; color: #f8fafc; box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25); } .form-control::placeholder { color: #64748b; } /* Multiplayer specific */ #multiplayer-status-bar { border-radius: 8px; font-weight: 600; background-color: #1e293b; border: 1px solid #3b82f6; color: #3b82f6; } #opponent-column { transition: opacity 0.5s ease; } #player-label, #opponent-label { letter-spacing: 0.15em; font-size: 0.7rem; color: #64748b; } #score-val, #level-val, #opponent-score-val { color: #3b82f6; font-weight: 700; } .badge.bg-dark { background-color: #0f172a !important; border: 1px solid #334155; } hr { border-color: #334155; opacity: 0.5; }