:root{--bg-color: #121212;--surface-color: #1e1e1e;--primary-color: #bb86fc;--secondary-color: #03dac6;--error-color: #cf6679;--on-bg: #e0e0e0;--on-surface: #ffffff;--text-secondary: #a0a0a0;--input-bg: #2c2c2c;--input-border: #444444;--border-color: #333333;--hover-bg: rgba(255, 255, 255, .05);--card-border: rgba(255, 255, 255, .05);--header-hover-opacity: .9;--font-family: "Inter", system-ui, -apple-system, sans-serif}:root[data-theme=light]{--bg-color: #f8f9fa;--surface-color: #ffffff;--primary-color: #6200ee;--secondary-color: #018786;--error-color: #b00020;--on-bg: #1f2937;--on-surface: #111827;--text-secondary: #6b7280;--input-bg: #ffffff;--input-border: #d1d5db;--border-color: #e5e7eb;--hover-bg: rgba(0, 0, 0, .05);--card-border: rgba(0, 0, 0, .1);--header-hover-opacity: .7}.theme-toggle-btn{position:fixed;bottom:2rem;right:2rem;width:3.5rem;height:3.5rem;border-radius:50%;border:none;background:var(--surface-color);color:var(--on-surface);box-shadow:0 4px 12px #0000004d;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:1000;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--card-border)}.theme-toggle-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 16px #0003;background:var(--hover-bg)}.theme-toggle-btn:focus,.theme-toggle-btn:focus-visible{outline:none}body{margin:0;padding:0;font-family:var(--font-family);background-color:var(--bg-color);color:var(--on-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;justify-content:center;min-height:100vh;transition:background-color .3s ease,color .3s ease}#root{width:100%;max-width:1200px;padding:2rem;box-sizing:border-box}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--surface-color);color:var(--on-surface);cursor:pointer;transition:all .25s;margin:.5rem;box-shadow:0 1px 3px #0000001a}button:hover{background-color:var(--hover-bg);border-color:var(--primary-color)}button:active{transform:scale(.98)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}h1,h2,h3{color:var(--on-surface);font-weight:700}.card{background-color:var(--surface-color);padding:2rem;border-radius:12px;box-shadow:0 4px 6px #0000001a;margin-bottom:2rem;border:1px solid var(--card-border)}input{background-color:var(--input-bg);border:1px solid var(--input-border);color:var(--on-surface);padding:.6rem 1rem;border-radius:4px;font-size:1rem;margin-right:.5rem;transition:border-color .2s,box-shadow .2s}input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #6200ee1a}.flex-center{display:flex;justify-content:center;align-items:center;flex-direction:column}.reaction-game-container{max-width:800px;margin:0 auto;text-align:center}.game-header{cursor:pointer;transition:transform .2s,opacity .2s;display:inline-block;margin-bottom:2rem}.game-header:hover{transform:scale(1.02);opacity:var(--header-hover-opacity)}.game-header h1{margin:0}.game-area{height:300px;width:100%;border-radius:16px;display:flex;justify-content:center;align-items:center;font-size:1.5rem;font-weight:700;cursor:pointer;transition:background-color .2s;-webkit-user-select:none;user-select:none;color:#fff;box-shadow:0 4px 12px #00000026}.game-waiting{background-color:var(--surface-color);color:var(--on-surface);border:2px dashed var(--input-border)}.game-ready-wait{background-color:var(--error-color);color:#fff}.game-now{background-color:var(--secondary-color);color:#fff}.leaderboard-table{width:100%;border-collapse:collapse;margin-top:1rem}.leaderboard-table th,.leaderboard-table td{padding:.8rem;text-align:left;border-bottom:1px solid var(--border-color)}.leaderboard-table th{color:var(--primary-color)}.my-rank{background-color:#bb86fc1a}:root[data-theme=light] .my-rank{background-color:#6200ee14}.server-selector-container{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem;background:var(--surface-color);padding:.5rem;border-radius:12px;display:inline-flex;box-shadow:0 4px 6px #0000001a;border:1px solid var(--card-border)}.server-option{padding:1rem 2rem;border-radius:8px;cursor:pointer;font-weight:700;font-size:1.1rem;transition:all .3s ease;border:2px solid transparent;color:var(--text-secondary);background:transparent;margin:0}.server-option:hover{background:var(--hover-bg);color:var(--on-surface)}.server-option.active{background:var(--primary-color);color:#fff;box-shadow:0 4px 12px #6200ee4d;transform:scale(1.05)}.server-option.active:hover{background:var(--primary-color);border-color:transparent}.landing-container{width:100%;min-height:80vh;display:flex;flex-direction:column}.global-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;margin-bottom:2rem;width:100%}.logo-container{display:flex;align-items:center;gap:.75rem;color:var(--primary-color)}.logo-text{font-size:1.5rem;font-weight:700;letter-spacing:-.025em;color:var(--on-surface)}.hero-section{text-align:center;margin-bottom:5rem}.hero-title{font-size:4rem;line-height:1.1;margin-bottom:1.5rem;letter-spacing:-.03em;color:var(--on-surface)}.gradient-text{background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-subtitle{font-size:1.25rem;color:var(--text-secondary);max-width:600px;margin:0 auto;line-height:1.6}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;width:100%;margin-bottom:4rem}.project-card{position:relative;background:var(--surface-color);border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--card-border)}.project-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px #00000026;border-color:var(--primary-color)}.card-gradient-bg{position:absolute;top:0;left:0;width:100%;height:6px}.bg-gradient-to-br.from-orange-400.to-red-500{background:linear-gradient(to bottom right,#fb923c,#ef4444)}.bg-gradient-to-br.from-blue-400.to-purple-500{background:linear-gradient(to bottom right,#60a5fa,#a855f7)}.card-content{padding:2rem;display:flex;flex-direction:column;height:100%;box-sizing:border-box}.card-icon-wrapper{margin-bottom:1.5rem;padding:1rem;background:var(--hover-bg);border-radius:12px;display:inline-block;width:min-content}.text-yellow-400{color:#facc15}.text-blue-400{color:#60a5fa}.card-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.card-title{font-size:1.5rem;margin:0;color:var(--on-surface)}.status-badge{font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:100px;text-transform:uppercase}.status-live{background:#03dac626;color:var(--secondary-color)}.status-soon{background:var(--hover-bg);color:var(--text-secondary)}.card-description{color:var(--text-secondary);line-height:1.6;margin-top:0;margin-bottom:1.5rem;flex-grow:1}.card-footer{display:flex;align-items:center;color:var(--primary-color);font-weight:600;gap:.5rem;transition:gap .2s}.project-card:hover .card-footer{gap:.75rem}.landing-footer{margin-top:auto;text-align:center;border-top:1px solid var(--card-border);padding-top:2rem;color:var(--text-secondary)}@media(max-width:600px){.hero-title{font-size:2.5rem}.projects-grid{grid-template-columns:1fr}#root{padding:1rem}}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .3s ease}.modal-container{background-color:var(--surface-color);width:90%;max-width:600px;border-radius:16px;padding:2rem;position:relative;box-shadow:0 10px 25px #00000080;border:1px solid var(--card-border);animation:slideUp .3s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}.modal-header{margin-bottom:1.5rem}.modal-title{font-size:2rem;margin:0;background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.modal-close-btn{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:var(--text-secondary);font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:none}.modal-close-btn:hover{background-color:var(--hover-bg);color:var(--on-surface);transform:rotate(90deg)}.modal-content{color:var(--on-surface);line-height:1.6;font-size:1.1rem;margin-bottom:2rem}.modal-footer{display:flex;justify-content:flex-end}.modal-action-btn{background-color:var(--primary-color);color:#fff;border:none;padding:.8rem 1.5rem;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:background-color .2s}.modal-action-btn:hover{background-color:var(--secondary-color)}.card-action-btn{position:absolute;width:2.5rem;height:2.5rem;border-radius:50%;background-color:var(--surface-color);border:1px solid var(--card-border);display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .2s ease;z-index:10;color:var(--text-secondary);box-shadow:0 2px 4px #0000001a;padding:0}.card-action-btn:hover{background-color:var(--hover-bg);color:var(--primary-color);transform:scale(1.1);border-color:var(--primary-color)}.action-btn-top-right{top:1rem;right:1rem}.action-btn-bottom-right{bottom:1rem;right:1rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}