nav{background:var(--bg-primary);border-bottom:1px solid var(--border);z-index:100;position:sticky;top:0;box-shadow:0 1px 12px #c22a2a14}.nav-bar{justify-content:space-between;align-items:center;padding:.75rem 1.5rem;display:flex}.nav-brand{color:var(--gold);letter-spacing:-.02em;font-size:1.2rem;font-weight:700;text-decoration:none}.nav-brand:hover{color:var(--gold-bright)}.nav-toggle{border:1px solid var(--border-light);color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition);background:0 0;padding:.25rem .6rem;font-size:1.2rem;line-height:1}.nav-toggle:hover{color:var(--text);border-color:var(--red);box-shadow:var(--red-border-glow)}.menu-dropdown{background:var(--bg-surface);border-top:1px solid var(--border);flex-direction:column;padding:.25rem 1.5rem;display:none}.menu-dropdown.open{display:flex}.menu-dropdown a,.menu-dropdown button{color:var(--text-secondary);cursor:pointer;text-align:left;border:none;border-bottom:1px solid var(--border);transition:color var(--transition);background:0 0;padding:.65rem 0;font-size:.95rem;text-decoration:none}.menu-dropdown a:last-child,.menu-dropdown button:last-child{border-bottom:none}.menu-dropdown a:hover,.menu-dropdown button:hover{color:var(--gold)}@media (width>=769px){nav{align-items:center;padding:0 2rem;display:flex}.nav-bar{flex-shrink:0;padding:.75rem 0}.nav-toggle{display:none}.menu-dropdown,.menu-dropdown.open{background:0 0;border-top:none;flex-direction:row;gap:.25rem;margin-left:auto;padding:0;display:flex}.menu-dropdown a,.menu-dropdown button{border-radius:var(--radius-sm);background:0 0;border:none;padding:.4rem .75rem;font-family:inherit;font-size:.9rem}.menu-dropdown a:hover,.menu-dropdown button:hover{background:var(--bg-elevated);color:var(--gold)}}.verification-banner{background:var(--gold-dim);color:var(--bg-deep);text-align:center;padding:.5rem;font-size:.85rem}.verification-banner button{cursor:pointer;color:var(--bg-deep);background:0 0;border:none;margin-left:.5rem;font-weight:600;text-decoration:underline}main{flex:1;width:100%;max-width:900px;margin:0 auto;padding:2.5rem 1.5rem}header{text-align:center;margin-bottom:2rem}h1{color:var(--gold);letter-spacing:-.02em;font-size:2rem;font-weight:700}h2,h3{color:var(--text);font-weight:600}form{flex-direction:column;gap:1rem;max-width:400px;margin:0 auto;display:flex}label{color:var(--text-secondary);flex-direction:column;gap:.3rem;font-size:.9rem;display:flex}input,select{background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text);transition:all var(--transition);padding:.6rem .75rem;font-size:1rem}input:focus,select:focus{border-color:var(--red);box-shadow:var(--red-border-glow);outline:none}input::placeholder{color:var(--text-muted)}select{cursor:pointer}select option{background:var(--bg-surface);color:var(--text)}form button{background:var(--red);color:#fff;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);border:none;padding:.65rem;font-size:1rem;font-weight:600}form button:hover{background:var(--red-bright);box-shadow:var(--red-glow)}form button:active{transform:scale(.98)}p[role=alert]{color:var(--error);font-size:.9rem}.tagline{color:var(--text-secondary);margin-top:.25rem;font-size:1rem}.game-selection-block{flex-wrap:wrap;justify-content:center;gap:1.25rem;display:flex}.game-tile{color:var(--text);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:220px;transition:all var(--transition-slow);flex-direction:column;justify-content:center;align-items:center;padding:2rem 1.5rem;text-decoration:none;display:flex;box-shadow:0 1px 12px #c22a2a14}.game-tile:hover{border-color:var(--red);box-shadow:var(--red-glow-strong);transform:translateY(-3px)}.game-tile h2{color:var(--gold);margin-bottom:.4rem;font-size:1.2rem}.game-tile p{color:var(--text-secondary);text-align:center;font-size:.85rem}.Login-Page,.Register-Page{justify-content:center;display:flex}.Login-Box,.Register-Box{text-align:center;width:100%;max-width:400px}.Login-Box p,.Register-Box p{color:var(--text-secondary);margin-top:1.25rem;font-size:.9rem}.Login-Box a,.Register-Box a{color:var(--gold);transition:color var(--transition);text-decoration:none}.Login-Box a:hover,.Register-Box a:hover{color:var(--gold-bright);text-decoration:underline}.compare-results{justify-content:center;gap:2rem;margin-top:2rem;display:flex}.user1-results,.user2-results{flex:1;max-width:300px}.user1-results h2,.user2-results h2{text-align:center;color:var(--gold);margin-bottom:1rem;font-size:1.25rem}.game-score{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);text-align:center;transition:all var(--transition);margin-bottom:1rem;padding:1rem;box-shadow:0 1px 12px #c22a2a14}.game-score h3{margin-bottom:.25rem;font-size:1rem}.game-score.winning{border-color:var(--success-dim);box-shadow:0 0 10px #2ecc711f}.game-score.winning p:last-child{color:var(--success);font-weight:700}.game-score.losing{border-color:#c22a2a59;box-shadow:0 0 10px #c22a2a14}.game-score.losing p:last-child{color:var(--error);font-weight:700}.leaderboard-select{text-align:center;margin-bottom:1.5rem}.leaderboard-select label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;flex-direction:column;gap:.4rem;font-size:.85rem;display:inline-flex}.leaderboard-select select{min-width:200px}.leaderboard table{border-collapse:collapse;width:100%}.leaderboard th{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;text-align:left;border-bottom:1px solid var(--border-light);padding:.6rem 1rem;font-size:.75rem;font-weight:600}.leaderboard td{border-bottom:1px solid var(--border);padding:.7rem 1rem;font-size:.95rem}.leaderboard tbody tr{transition:background var(--transition)}.leaderboard tbody tr:hover{background:var(--bg-surface)}.leaderboard .top-1 td{color:var(--gold-bright);font-weight:700}.leaderboard .top-2 td{color:silver;font-weight:600}.leaderboard .top-3 td{color:#cd7f32;font-weight:600}.game-start,.game-over{text-align:center;animation:.3s fadeIn}.game-start button,.game-over button{background:var(--red);color:#fff;border-radius:var(--radius);cursor:pointer;transition:all var(--transition);border:none;margin-top:1.25rem;padding:.75rem 2.25rem;font-size:1.05rem;font-weight:600}.game-start button:hover,.game-over button:hover{background:var(--red-bright);box-shadow:var(--red-glow)}.game-start button:active,.game-over button:active{transform:scale(.97)}.game-start p{color:var(--text-secondary)}.game-over h2{color:var(--red);text-shadow:0 0 25px #c22a2a59;margin-bottom:.5rem;font-size:1.75rem}.round-display{text-align:center;color:var(--gold);margin-bottom:1rem;font-size:1.25rem;font-weight:700}.color-grid{grid-template-columns:repeat(3,1fr);gap:.75rem;max-width:360px;margin:0 auto;display:grid}.color-block{aspect-ratio:1;border-radius:var(--radius);cursor:pointer;transition:transform var(--transition), border-color var(--transition);border:2px solid #ffffff0a}.color-block:hover{border-color:#ffffff1a;transform:scale(1.04)}.color-canvas{cursor:pointer;width:100%;max-width:360px;margin:0 auto;display:block}.typing-game{text-align:center}.typing-timer{color:var(--gold);margin-bottom:1rem;font-size:2.25rem;font-weight:700}.typing-words{scrollbar-width:none;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;gap:.5rem;max-height:150px;margin-bottom:1.25rem;padding:1rem;line-height:2;display:flex;overflow-y:auto}.typing-words::-webkit-scrollbar{display:none}.typing-word{border-radius:var(--radius-sm);padding:.1rem .3rem;font-size:1.1rem;transition:all .15s}.typing-word.current{background:var(--red);color:#fff;box-shadow:0 0 8px #c22a2a4d}.typing-word.correct{color:var(--success)}.typing-word.incorrect{color:var(--error);text-decoration:line-through}.typing-input{background:var(--bg-surface);border:2px solid var(--border-light);border-radius:var(--radius);width:100%;max-width:400px;color:var(--text);text-align:center;transition:all var(--transition);padding:.75rem;font-size:1.25rem}.typing-input:focus{border-color:var(--red);box-shadow:var(--red-border-glow);outline:none}.typing-stats{margin:1.25rem 0;font-size:1.2rem}.typing-stats p{margin:.4rem 0}.typing-stats strong{color:var(--gold)}.stats-sections{flex-direction:column;gap:2rem;display:flex}.stats-section h3{color:var(--gold);border-bottom:1px solid var(--border-light);margin-bottom:1rem;padding-bottom:.5rem;font-size:1.1rem}.stats-games{flex-wrap:wrap;gap:1rem;display:flex}.stats-game-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);text-align:center;min-width:150px;transition:all var(--transition);padding:1rem 1.5rem;box-shadow:0 1px 12px #c22a2a14}.stats-game-card:hover{border-color:var(--red);box-shadow:var(--red-border-glow)}.stats-game-name{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem;font-size:.8rem}.stats-game-score{color:var(--gold);font-size:1.75rem;font-weight:700}.coin-game-canvas{border-radius:var(--radius-lg);touch-action:none;cursor:crosshair;width:100%;max-width:600px;margin:0 auto;display:block}.account-info{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);max-width:500px;margin-bottom:2rem;margin-left:auto;margin-right:auto;padding:1.5rem;box-shadow:0 1px 12px #c22a2a14}.account-field{border-bottom:1px solid var(--border);justify-content:space-between;padding:.75rem 0;display:flex}.account-field:last-child{border-bottom:none}.account-label{color:var(--text-muted);font-weight:600}.account-value{color:var(--gold)}.account-password{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);max-width:500px;margin-left:auto;margin-right:auto;padding:1.5rem;box-shadow:0 1px 12px #c22a2a14}.account-password h3{margin-bottom:1rem}.success-msg{color:var(--gold);margin-top:.5rem}.groups-forms{flex-direction:column;gap:1.5rem;max-width:500px;margin-bottom:2rem;margin-left:auto;margin-right:auto;display:flex}.group-form-box{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center;padding:1.5rem;box-shadow:0 1px 12px #c22a2a14}.group-form-box h3{color:var(--gold);text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem;font-size:1rem}.group-form-box form{flex-direction:column;align-items:center;gap:.75rem;display:flex}.group-form-box input{flex:1;width:100%;max-width:300px}.invite-result{color:var(--success);margin-top:.75rem}.invite-result strong{color:var(--gold-bright);letter-spacing:.1em;font-family:monospace;font-size:1.1rem}.groups-list{margin-bottom:2rem}.groups-list h3{color:var(--gold);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;font-size:1rem}.group-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:var(--transition);justify-content:space-between;align-items:center;margin-bottom:.5rem;padding:.75rem 1.25rem;display:flex;box-shadow:0 1px 12px #c22a2a14}.group-card:hover{border-color:var(--red);box-shadow:var(--red-border-glow)}.group-card.active{border-color:var(--gold);box-shadow:0 0 10px #c9a84c33}.group-name{color:var(--text);font-weight:600}.group-code{color:var(--text-muted);font-family:monospace;font-size:.85rem}.group-detail{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-top:1.5rem;padding:1.5rem;box-shadow:0 1px 12px #c22a2a14}.group-detail-header{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:1.5rem;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.group-detail-header h2{color:var(--gold);margin:0}.group-detail-header .group-code{flex:1}.leave-btn{color:var(--error);border:1px solid var(--error);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);background:0 0;padding:.4rem 1rem;font-size:.85rem}.leave-btn:hover{background:var(--error);color:var(--bg-deep)}.group-members{margin-bottom:1.5rem}.group-members h3{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.9rem}.member-list{flex-wrap:wrap;gap:.5rem;display:flex}.member-tag{background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text);padding:.3rem .75rem;font-size:.85rem}.group-leaderboards h3{color:var(--gold);text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem;font-size:1rem}.group-game-board{margin-bottom:1.25rem}.group-game-board h4{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.8rem}.group-scores{flex-direction:column;gap:.25rem;display:flex}.group-score-row{background:var(--bg-elevated);border-radius:var(--radius-sm);align-items:center;padding:.5rem .75rem;display:flex}.group-score-row .rank{width:2rem;color:var(--text-muted);font-weight:600}.group-score-row .username{color:var(--text);flex:1}.group-score-row .score{color:var(--gold);font-weight:700}.group-score-row.top-1 .rank{color:var(--gold-bright)}.group-score-row.top-2 .rank{color:silver}.group-score-row.top-3 .rank{color:#cd7f32}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (width<=600px){main{padding:1.5rem 1rem}h1{font-size:1.5rem}.game-selection-block{flex-direction:column;align-items:center}.game-tile{width:100%;max-width:300px}.compare-results{flex-direction:column;align-items:center}.user1-results,.user2-results{width:100%;max-width:100%}.color-grid{max-width:280px}.typing-words{max-height:120px}.stats-games{flex-direction:column}.stats-game-card{width:100%;min-width:0}.leaderboard th,.leaderboard td{padding:.5rem .6rem;font-size:.85rem}.groups-forms{flex-direction:column}.group-form-box form{flex-direction:column;align-items:stretch}.group-detail-header{flex-direction:column;align-items:flex-start;gap:.75rem}}:root{--bg-deep:#080808;--bg-primary:#0d0d0d;--bg-surface:#141414;--bg-elevated:#1c1c1c;--border:#1f1f1f;--border-light:#2a2a2a;--red:#c22a2a;--red-bright:#e04040;--red-glow:0 0 15px #c22a2a40;--red-glow-strong:0 0 20px #c22a2a73, 0 0 40px #c22a2a26;--red-border-glow:0 0 8px #c22a2a4d;--gold:#c9a84c;--gold-bright:#dfc06a;--gold-dim:#9e8338;--text:#e0e0e0;--text-secondary:#8a8a8a;--text-muted:#555;--success:#2ecc71;--success-dim:#1a9e53;--error:#e04040;--radius:8px;--radius-sm:4px;--radius-lg:12px;--transition:.2s ease;--transition-slow:.3s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-deep);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6}#root{flex-direction:column;min-height:100vh;display:flex}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background:var(--red);color:#fff}