:root{color-scheme:light;--bg-start: #f7f9fc;--bg-mid: #fff0f5;--bg-end: #eaf2ff;--text: #1f2a44;--muted: #5b6b88;--card-bg: #ffffff;--card-border: #e6ecf5;--shadow: rgba(25, 40, 80, .12);--btn-bg: #E6E6FA;--btn-text: #1f1b2e;--btn-border: #d2c5ff;--primary: #B57EDC;--primary-text: #ffffff;--focus: rgba(79, 138, 255, .35);--accent-blue: #38bdf8;--accent-violet: #a78bfa;--accent-pink: #f472b6;--accent-teal: #14b8a6}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,var(--bg-start),var(--bg-end) 60%,var(--bg-mid));background-attachment:fixed}a{color:inherit;text-decoration:none}.container{max-width:960px;margin:0 auto;padding:16px}h1{font-weight:800;letter-spacing:-.5px;background:linear-gradient(90deg,#0ea5e9,#6366f1 60%,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:16px;margin-bottom:12px;box-shadow:0 8px 24px var(--shadow)}.row{display:flex;gap:8px;flex-wrap:wrap}.btn{padding:10px 14px;border:1px solid var(--btn-border);border-radius:10px;background:linear-gradient(135deg,var(--btn-bg),#FBCFE8);color:var(--btn-text);cursor:pointer;transition:transform .12s ease,box-shadow .16s ease,background-color .16s ease;box-shadow:0 4px 12px var(--shadow)}.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--shadow);filter:saturate(1.05)}.btn:active{transform:translateY(0)}.btn.primary{background:linear-gradient(135deg,var(--primary),var(--accent-pink));color:var(--primary-text);border-color:var(--primary)}.btn.primary:hover{filter:brightness(1.06) saturate(1.08)}input,select{width:100%;padding:10px;border-radius:10px;border:1px solid var(--card-border);background:#fff;color:var(--text);box-shadow:0 2px 8px var(--shadow) inset}input::placeholder,select::placeholder{color:var(--muted)}input:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--focus)}.options button{width:100%;text-align:left}.grid{display:grid;grid-template-columns:1fr;gap:12px}@media (min-width: 768px){.grid{grid-template-columns:repeat(2,1fr)}}.grid-vertical{display:grid;grid-template-columns:1fr;gap:12px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}.modal{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:16px;width:100%;max-width:420px;box-shadow:0 10px 30px var(--shadow);border-image:linear-gradient(135deg,var(--accent-blue),var(--accent-violet)) 1}.toast-container{position:fixed;bottom:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:1100}.toast{background:#fff;color:var(--text);border:1px solid var(--card-border);padding:10px 12px;border-radius:10px;box-shadow:0 6px 18px var(--shadow)}.leaderboard-container{padding:24px;background:linear-gradient(135deg,var(--card-bg) 0%,#fafbfc 100%)}.leaderboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--card-border)}.leaderboard-header h3{margin:0;font-size:1.5rem;font-weight:700;background:linear-gradient(90deg,gold,orange);-webkit-background-clip:text;background-clip:text;color:transparent}.player-count{font-size:.9rem;color:var(--muted);font-weight:500}.leaderboard-empty{text-align:center;padding:40px 20px;color:var(--muted)}.leaderboard-empty p{font-size:1.1rem;margin:0}.leaderboard-list{display:flex;flex-direction:column;gap:8px}.leaderboard-row{display:flex;align-items:center;padding:16px 20px;border-radius:12px;transition:all .3s ease;border:1px solid transparent}.leaderboard-row:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a;border-color:var(--card-border)}.leaderboard-row.podium{border:2px solid rgba(255,255,255,.3);position:relative;overflow:hidden}.leaderboard-row.podium:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#ffffff1a,#ffffff4d);pointer-events:none}.rank-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:50px;min-height:50px;border-radius:50%;background:#fff3;margin-right:16px;flex-shrink:0;padding:8px 4px}.rank-icon{font-size:1.2rem;font-weight:700;line-height:1}.user-info{flex:1;min-width:0}.username{font-size:1.1rem;font-weight:600;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-email{font-size:.85rem;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-container{display:flex;flex-direction:column;align-items:flex-end;margin-right:16px}.score-label{font-size:.8rem;opacity:.7;margin-bottom:2px}.score-value{font-size:1.3rem;font-weight:700;font-family:Courier New,monospace}.podium-badge{display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-left:8px}.crown{animation:sparkle 2s ease-in-out infinite}@keyframes sparkle{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(-5deg)}}.rank-title{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:4px;opacity:.8;line-height:1;text-align:center}.you-badge{color:var(--accent-blue);font-weight:600;font-size:.9em}.current-user{border:2px solid var(--accent-blue)!important;box-shadow:0 4px 12px #38bdf84d!important;position:relative}.current-user:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border:1px solid rgba(56,189,248,.5);border-radius:14px;pointer-events:none}.current-user-badge{display:flex;align-items:center;justify-content:center;margin-left:8px}.user-star{color:var(--accent-blue);font-size:1.3rem;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@media (max-width: 640px){.leaderboard-header{flex-direction:column;align-items:flex-start;gap:8px}.leaderboard-row{padding:12px 16px}.rank-badge{width:40px;min-height:40px;margin-right:12px;padding:6px 3px}.rank-icon{font-size:1rem}.rank-title{font-size:.55rem;margin-top:3px}.username{font-size:1rem}.score-value{font-size:1.1rem}.score-container{margin-right:8px}}
