:root{--bg-color: #0f172a;--bg-color-light: #1e293b;--primary-color: #0ea5e9;--primary-hover: #38bdf8;--accent-color: #f43f5e;--text-main: #f8fafc;--text-muted: #94a3b8;--success: #10b981;--border-color: #334155;--wa-color: #25D366;--fb-color: #1877F2}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Outfit,sans-serif;background-color:var(--bg-color);color:var(--text-main);line-height:1.6}#app{max-width:1200px;margin:0 auto;padding:0 20px;min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid var(--border-color);margin-bottom:30px}.app-header.hidden{display:none!important}.logo{font-size:24px;font-weight:800;letter-spacing:1px}.logo span{color:var(--primary-color)}.logo-large{font-size:48px;text-align:center;margin-bottom:5px}nav{display:flex;gap:15px}.nav-btn{background:transparent;color:var(--text-muted);border:none;font-size:16px;font-weight:600;cursor:pointer;padding:8px 16px;border-radius:8px;transition:all .3s ease}.nav-btn:hover{color:var(--text-main);background-color:var(--bg-color-light)}.nav-btn.active{color:var(--primary-color);background-color:#0ea5e91a}.screen{display:none;animation:fadeIn .4s ease forwards;flex:1}.screen.active-screen{display:block}.hidden{display:none!important}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.login-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;margin-top:5vh}.login-sub{color:var(--text-muted);margin-bottom:30px}.login-box{background-color:var(--bg-color-light);padding:40px;border-radius:16px;border:1px solid var(--border-color);width:100%;max-width:400px}.login-box input{width:100%;padding:12px 15px;border-radius:8px;border:1px solid var(--border-color);background-color:var(--bg-color);color:var(--text-main);font-family:inherit;font-size:16px;outline:none}.login-box input:focus{border-color:var(--primary-color)}.divider{text-align:center;margin:20px 0;color:var(--text-muted);font-size:14px}.btn-secondary{background-color:transparent;color:var(--text-main);border:1px solid var(--border-color);padding:12px 24px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.btn-secondary:hover{background-color:var(--bg-color)}.hero{text-align:center;padding:20px 0 40px}.hero h2{font-size:36px;margin-bottom:10px}.hero p{color:var(--text-muted);font-size:18px}.config-panel{background-color:var(--bg-color-light);border:1px solid var(--border-color);border-radius:16px;padding:30px;margin-bottom:30px}.config-panel h3{margin-bottom:20px;text-align:center;color:var(--primary-color)}.config-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:14px;color:var(--text-muted);font-weight:600}.form-group select{padding:10px;border-radius:8px;border:1px solid var(--border-color);background-color:var(--bg-color);color:var(--text-main);font-family:inherit;font-size:15px;outline:none}.form-group select:focus{border-color:var(--primary-color)}.modes-container{display:flex;gap:40px;justify-content:center;border-top:1px solid var(--border-color);padding-top:30px;flex-wrap:wrap}.mode-column{display:flex;flex-direction:column;align-items:center}.mode-card{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:12px;padding:20px;width:250px;text-align:center;cursor:pointer;transition:all .3s ease;color:var(--text-main);font-family:inherit}.mode-card:hover{transform:translateY(-5px);border-color:var(--primary-color);box-shadow:0 5px 15px #0ea5e926}.mode-icon{font-size:32px;margin-bottom:10px}.lobby-container{background-color:var(--bg-color-light);border:1px solid var(--border-color);border-radius:16px;padding:40px;text-align:center;max-width:600px;margin:0 auto}.room-code-display{font-size:24px;margin:20px 0;padding:15px;background-color:#f43f5e1a;border:2px dashed var(--accent-color);border-radius:12px;display:inline-block}.room-code-display span{font-weight:800;color:var(--accent-color);letter-spacing:3px;margin-left:10px}.players-list-container{background-color:var(--bg-color);border-radius:12px;padding:20px;margin-top:20px}.lobby-players{list-style:none;text-align:left}.lobby-player-item{display:flex;align-items:center;padding:10px;border-bottom:1px solid var(--border-color);gap:15px}.player-color-dot{width:15px;height:15px;border-radius:50%}.lobby-player-item:last-child{border-bottom:none}.history-panel{background-color:var(--bg-color-light);border:1px solid var(--border-color);border-radius:16px;padding:30px;margin-bottom:30px}.history-panel h3{margin-bottom:15px}.history-list{list-style:none;max-height:200px;overflow-y:auto}.history-list li{padding:10px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;font-size:14px}.history-list li:last-child{border-bottom:none}.filters{display:flex;gap:10px;margin:20px 0;flex-wrap:wrap}.filter-btn{background-color:var(--bg-color-light);color:var(--text-main);border:1px solid var(--border-color);padding:8px 16px;border-radius:20px;cursor:pointer;transition:all .2s}.filter-btn.active,.filter-btn:hover{background-color:var(--primary-color);border-color:var(--primary-color)}.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}.skater-card{background-color:var(--bg-color-light);border-radius:12px;padding:20px;border:1px solid var(--border-color);text-align:center}.skater-card .name{font-size:18px;font-weight:600;margin-bottom:5px}.skater-card .category{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--primary-color);margin-bottom:15px}.skater-card .stat{display:flex;justify-content:space-between;font-size:14px;color:var(--text-muted);margin-bottom:5px}.sim-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.player-highlight{background-color:#0ea5e926;border:1px solid var(--primary-color);border-radius:8px;padding:15px;margin-bottom:20px;text-align:center;font-size:18px}.player-highlight strong{color:var(--primary-color)}.btn-danger{background-color:transparent;color:var(--accent-color);border:1px solid var(--accent-color);padding:8px 16px;border-radius:8px;cursor:pointer;transition:all .2s}.btn-danger:hover{background-color:var(--accent-color);color:#fff}.btn-primary{background-color:var(--primary-color);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;display:block}.btn-primary:hover{background-color:var(--primary-hover)}.sim-layout{display:grid;grid-template-columns:1fr 1fr;gap:30px}.sim-feed{background-color:var(--bg-color-light);border:1px solid var(--border-color);border-radius:12px;padding:20px;height:500px;overflow-y:auto;display:flex;flex-direction:column;gap:15px}.feed-item{padding:12px;border-radius:8px;background-color:#ffffff08;border-left:4px solid var(--primary-color);animation:fadeIn .3s ease}.feed-item.highlight{font-weight:700;color:var(--primary-color);background-color:#ff44001a;text-align:center;border-left:none}.feed-item.player-action{border-left-color:var(--success);background-color:#10b9811a}.sim-leaderboard{background-color:var(--bg-color-light);border:1px solid var(--border-color);border-radius:12px;padding:20px;height:500px;overflow-y:auto}.sim-leaderboard h3{margin-bottom:15px;font-size:18px;border-bottom:1px solid var(--border-color);padding-bottom:10px}.standings-list{list-style:none}.standing-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}.standing-item:last-child{border-bottom:none}.standing-item.is-player{background-color:#10b98126;border-radius:4px;padding:10px 5px}.standing-rank{font-weight:800;color:var(--primary-color);width:25px}.standing-name{flex:1}.standing-score{font-weight:600}.podium{display:flex;justify-content:center;align-items:flex-end;height:250px;gap:10px;margin:40px 0}.podium-place{display:flex;flex-direction:column;align-items:center;width:120px}.podium-place .skater-name{margin-bottom:10px;font-weight:600;text-align:center}.podium-place.is-player .skater-name{color:var(--success);font-size:1.1em}.podium-place .block{width:100%;display:flex;justify-content:center;align-items:center;font-size:24px;font-weight:800;border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:0 -5px 15px #0003}.first .block{height:150px;background:linear-gradient(135deg,#fbbf24,#d97706);color:#fff}.second .block{height:110px;background:linear-gradient(135deg,#94a3b8,#475569);color:#fff}.third .block{height:80px;background:linear-gradient(135deg,#b45309,#78350f);color:#fff}.player-result-msg{text-align:center;font-size:20px;font-weight:600;margin-bottom:30px;color:var(--success)}.share-container{background-color:var(--bg-color-light);border:1px solid var(--border-color);border-radius:12px;padding:20px;margin:0 auto 30px;max-width:600px;text-align:center}.share-container h3{margin-bottom:15px;color:var(--primary-color)}.share-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.btn-social{border:none;border-radius:8px;padding:10px 15px;font-weight:600;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:14px;transition:transform .2s,opacity .2s}.btn-social:hover{transform:translateY(-2px);opacity:.9}.btn-whatsapp{background-color:var(--wa-color)}.btn-facebook{background-color:var(--fb-color)}.btn-copy{background-color:#6366f1}.btn-download{background-color:#4b5563}.btn-share-native{background-color:#8b5cf6}.full-standings-container{max-width:600px;margin:0 auto 30px;background-color:var(--bg-color-light);border-radius:12px;padding:20px}.sim-track{width:100%;height:140px;background:linear-gradient(to bottom,#1e1e24,#2a2a30);border:2px solid var(--border-color);border-radius:8px;margin-bottom:20px;position:relative;overflow:hidden;box-shadow:inset 0 5px 15px #00000080}.sim-track:after{content:"";position:absolute;bottom:15px;left:0;width:100%;height:3px;background:#fff3;border-radius:2px}.skater-avatar{position:absolute;bottom:15px;width:45px;height:45px;z-index:10}.skater-avatar svg{width:100%;height:100%;filter:drop-shadow(0px 5px 3px rgba(0,0,0,.6))}.jumping svg{animation:skate-jump 1s ease-in-out forwards}@keyframes skate-move{0%{left:-60px;transform:scaleX(1)}49%{left:calc(100% + 20px);transform:scaleX(1)}50%{left:calc(100% + 20px);transform:scaleX(-1)}99%{left:-60px;transform:scaleX(-1)}to{left:-60px;transform:scaleX(1)}}@keyframes skate-jump{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-70px) rotate(180deg)}50%{transform:translateY(-80px) rotate(360deg)}70%{transform:translateY(-50px) rotate(540deg)}to{transform:translateY(0) rotate(720deg)}}