*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark: #1a1a2e;--bg-card: #16213e;--bg-panel: #0f3460;--accent: #e94560;--accent2: #533483;--text: #ffffff;--text-muted: #a0a0c0;--success: #22c55e;--error: #ef4444;--color-a: #7C3AED;--color-b: #0D9488;--color-c: #EA580C;--color-d: #D97706}html,body,#root{height:100%;font-family:Segoe UI,system-ui,-apple-system,sans-serif}body{background-color:var(--bg-dark);color:var(--text);min-height:100vh}.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem}.page-top{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1.5rem}.card{background:var(--bg-card);border-radius:16px;padding:2rem;width:100%;max-width:480px;box-shadow:0 8px 32px #0006}.card-wide{background:var(--bg-card);border-radius:16px;padding:2rem;width:100%;max-width:800px;box-shadow:0 8px 32px #0006}h1{font-size:3rem;font-weight:800;text-align:center;background:linear-gradient(135deg,#e94560,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}h2{font-size:1.75rem;font-weight:700;margin-bottom:1.5rem;text-align:center}h3{font-size:1.25rem;font-weight:600;margin-bottom:1rem}.btn{display:block;width:100%;padding:1rem 1.5rem;border:none;border-radius:12px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:transform .1s ease,opacity .2s ease,box-shadow .2s ease;text-align:center;text-decoration:none}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#e94560,#7c3aed);color:#fff}.btn-secondary{background:var(--bg-panel);color:#fff}.btn-success{background:#22c55e;color:#fff}.btn-danger{background:#ef4444;color:#fff}.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid rgba(255,255,255,.2)}.btn-ghost:hover:not(:disabled){background:#ffffff1a}.btn-sm{padding:.5rem 1rem;font-size:.875rem;border-radius:8px;width:auto;display:inline-block}.btn-group{display:flex;gap:.75rem;margin-top:1rem}.btn-group .btn{flex:1}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;max-width:600px;margin-top:1.5rem}.answer-btn{padding:1.5rem 1rem;border:none;border-radius:16px;font-size:1.2rem;font-weight:700;cursor:pointer;color:#fff;transition:transform .1s ease,filter .2s ease,box-shadow .2s ease;min-height:100px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.3;box-shadow:0 4px 15px #0000004d}.answer-btn:hover:not(:disabled){transform:scale(1.03);box-shadow:0 8px 25px #0006}.answer-btn:active:not(:disabled){transform:scale(.98)}.answer-btn:disabled{cursor:not-allowed;filter:brightness(.7)}.answer-btn.correct{filter:brightness(1.2);animation:pulse-green .5s ease;outline:4px solid #22c55e}.answer-btn.incorrect{filter:brightness(.5)}.answer-btn.revealed-correct{outline:4px solid #22c55e;filter:brightness(1.1)}@keyframes pulse-green{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.btn-a{background:var(--color-a)}.btn-b{background:var(--color-b)}.btn-c{background:var(--color-c)}.btn-d{background:var(--color-d)}.answer-grid.two-col{grid-template-columns:1fr 1fr}.form-group{margin-bottom:1.25rem}label{display:block;margin-bottom:.4rem;font-size:.9rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}input[type=text],input[type=number],select,textarea{width:100%;padding:.85rem 1rem;background:#ffffff12;border:1.5px solid rgba(255,255,255,.15);border-radius:10px;color:#fff;font-size:1rem;transition:border-color .2s ease;outline:none}input[type=text]:focus,input[type=number]:focus,select:focus,textarea:focus{border-color:var(--accent)}input::placeholder{color:var(--text-muted)}select option{background:var(--bg-card);color:#fff}textarea{resize:vertical;min-height:80px}.pin-display{font-size:5rem;font-weight:900;text-align:center;letter-spacing:.15em;background:linear-gradient(135deg,#e94560,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;margin:1rem 0}.player-list{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.player-list li{background:var(--bg-panel);padding:.4rem .9rem;border-radius:999px;font-size:.9rem;font-weight:600}.scores-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;width:100%;max-width:480px}.score-item{display:flex;align-items:center;justify-content:space-between;background:var(--bg-panel);padding:.75rem 1.25rem;border-radius:12px;font-weight:600}.score-item .rank{font-size:1.2rem;min-width:2rem}.score-item .name{flex:1;text-align:left;padding:0 1rem}.score-item .points{font-size:1.1rem;color:#fbbf24}.podium{display:flex;align-items:flex-end;justify-content:center;gap:1rem;margin:2rem 0}.podium-place{display:flex;flex-direction:column;align-items:center;gap:.5rem}.podium-name{font-weight:700;font-size:.95rem;text-align:center;max-width:100px;word-break:break-word}.podium-score{font-size:.85rem;color:#fbbf24;font-weight:600}.podium-block{width:80px;border-radius:8px 8px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:.5rem;font-size:2rem}.podium-block.first{height:120px;background:#fbbf24}.podium-block.second{height:90px;background:#94a3b8}.podium-block.third{height:70px;background:#b45309}.quick-picks{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.quick-pick-btn{background:var(--bg-panel);border:1px solid rgba(255,255,255,.2);color:#fff;padding:.35rem .85rem;border-radius:999px;font-size:.85rem;cursor:pointer;transition:background .2s}.quick-pick-btn:hover{background:var(--accent2)}.progress-bar-container{width:100%;background:#ffffff1a;border-radius:999px;height:8px;overflow:hidden;margin-bottom:1rem}.progress-bar{height:100%;background:linear-gradient(90deg,#e94560,#7c3aed);border-radius:999px;transition:width .3s ease}.table-wrap{width:100%;overflow-x:auto;margin-top:1rem}table{width:100%;border-collapse:collapse;font-size:.9rem}th{background:var(--bg-panel);padding:.75rem 1rem;text-align:left;font-weight:700;color:var(--text-muted);text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}td{padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle}tr:hover td{background:#ffffff08}.alert{padding:.85rem 1.2rem;border-radius:10px;font-size:.95rem;font-weight:500;margin-bottom:1rem}.alert-error{background:#ef444433;border:1px solid rgba(239,68,68,.4);color:#fca5a5}.alert-success{background:#22c55e33;border:1px solid rgba(34,197,94,.4);color:#86efac}.alert-info{background:#3b82f633;border:1px solid rgba(59,130,246,.4);color:#93c5fd}.question-box{background:var(--bg-panel);border-radius:16px;padding:1.75rem;text-align:center;font-size:1.4rem;font-weight:700;line-height:1.4;margin-bottom:1.5rem;width:100%;max-width:700px}.question-meta{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:700px;margin-bottom:.75rem;font-size:.9rem;color:var(--text-muted);font-weight:600}.answered-counter{font-size:1.1rem;font-weight:700;color:var(--text-muted);margin:.75rem 0}.waiting-msg{font-size:1.1rem;color:var(--text-muted);text-align:center;margin-top:1.5rem;font-style:italic}.result-flash{font-size:2rem;font-weight:800;text-align:center;margin:1rem 0}.result-flash.correct{color:#22c55e}.result-flash.incorrect{color:#ef4444}.nav-links{display:flex;gap:1.5rem;margin-top:2rem}.nav-link{color:var(--text-muted);text-decoration:none;font-size:.9rem;transition:color .2s}.nav-link:hover{color:#fff}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.text-center{text-align:center}.text-muted{color:var(--text-muted)}.text-success{color:var(--success)}.text-error{color:var(--error)}.flex{display:flex}.gap-1{gap:.5rem}.gap-2{gap:1rem}.items-center{align-items:center}.justify-between{justify-content:space-between}.w-full{width:100%}.divider{border:none;border-top:1px solid rgba(255,255,255,.1);margin:1.5rem 0}@media (max-width: 480px){h1{font-size:2.2rem}h2{font-size:1.4rem}.answer-grid{grid-template-columns:1fr}.answer-btn{min-height:70px;font-size:1rem}.card,.card-wide{padding:1.5rem}.pin-display{font-size:3.5rem}.podium{gap:.5rem}.podium-block{width:60px}}.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:2rem auto}@keyframes spin{to{transform:rotate(360deg)}}