body,html{margin:0;padding:0;height:100%;justify-content:center;align-items:center;background-color:#f1f1f1;font-family:Arial,sans-serif;color:#202020}.welcome-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#e8e8e8}.welcome-content{background:transparent;border-radius:0;padding:40px;text-align:center;box-shadow:none;max-width:500px;width:100%;animation:slideIn .5s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.welcome-title{font-size:4em;font-weight:700;color:#5a8bc4;margin-bottom:30px;text-shadow:none;letter-spacing:2px}.welcome-description{font-size:1.1em;color:#888;margin-bottom:50px;line-height:1.6;font-weight:400}.instructions{display:none}.team-selector{margin-bottom:40px}.team-selector label{display:block;font-weight:400;font-size:1.2em;margin-bottom:20px;color:#666}.dropdown{position:relative;width:100%}.dropdown-button{width:100%;padding:15px 20px;font-size:16px;border:2px solid #ccc;border-radius:8px;background:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all .3s ease;color:#999;text-align:left}.dropdown-button .team-option{flex:1}.dropdown-button:hover{border-color:#999}.dropdown-button.selected{border-color:#666;color:#333;font-weight:400}.dropdown-arrow{transition:transform .3s ease}.dropdown-arrow.open{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:100%;left:0;right:0;background:#fff;border:2px solid #ccc;border-top:none;border-radius:0 0 8px 8px;max-height:200px;overflow-y:auto;z-index:1000;box-shadow:0 4px 10px #0000001a}.dropdown-item{padding:12px 20px;cursor:pointer;transition:background-color .2s ease;border-bottom:1px solid #f0f0f0}.dropdown-item:hover{background-color:#f8f9fa}.dropdown-item:last-child{border-bottom:none}.team-option{display:flex;align-items:center;gap:12px}.team-color-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.1)}.start-game-button{width:100%;padding:15px 30px;font-size:16px;font-weight:400;border:none;border-radius:8px;cursor:pointer;margin-bottom:50px;transition:all .3s ease;text-transform:none;display:flex;align-items:center;justify-content:center;gap:10px}.start-game-button.enabled{background:linear-gradient(135deg,#e74c3c,#3498db);color:#fff;transform:translateY(0);box-shadow:0 4px 15px #0003}.start-game-button.enabled:hover{background:linear-gradient(135deg,#c0392b,#2980b9);transform:translateY(-1px);box-shadow:0 6px 20px #0000004d}.start-game-button.disabled{background:#e8e8e8;color:#ccc;cursor:not-allowed}.social-buttons{text-align:center}.social-buttons p{color:#888;margin:5px 0;font-size:1em}.twitter-follow-button{display:inline-flex;align-items:center;background-color:#1da1f2;color:#fff;padding:12px 24px;font-size:16px;border-radius:25px;text-decoration:none;transition:all .3s ease;margin-top:10px}.profile-image{width:32px;height:32px;border-radius:50%;margin-right:10px;border:2px solid white;flex-shrink:0}.social-buttons-game{text-align:center;margin-top:9px}.social-buttons-game p{color:#000;margin:5px 0;font-size:1em}.twitter-follow-button-game{display:inline-flex;align-items:center;background-color:#1da1f2;color:#fff;padding:12px 24px;font-size:16px;border-radius:25px;text-decoration:none;transition:all .3s ease;margin-top:10px;margin-bottom:30px}.profile-image-game{width:24px;height:24px;border-radius:50%;margin-right:8px;border:2px solid white;flex-shrink:0}.twitter-follow-button-game:hover{background-color:#1991db;transform:translateY(0);box-shadow:none}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-content{background:#fff;border-radius:16px;padding:0;max-width:500px;width:90%;box-shadow:0 20px 60px #0000004d;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{background:linear-gradient(135deg,#e74c3c,#3498db);color:#fff;padding:20px;border-radius:16px 16px 0 0;display:flex;justify-content:space-between;align-items:center}.modal-header h2{margin:0;font-size:1.5em}.modal-close{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.modal-close:hover{background-color:#fff3}.modal-body{padding:30px}.modal-message{text-align:center;margin-bottom:25px;font-size:1.1em;color:#333}.highlight-time{color:#e74c3c;font-weight:700}.highlight-team{color:#3498db;font-weight:700}.form-group{margin-bottom:25px}.form-group label{display:block;margin-bottom:8px;font-weight:700;color:#333}.name-input{width:100%;padding:12px 16px;border:2px solid #ddd;border-radius:8px;font-size:16px;transition:border-color .3s;box-sizing:border-box}.name-input:focus{outline:none;border-color:#3498db}.modal-buttons{display:flex;gap:12px;justify-content:flex-end}.btn-cancel,.btn-submit{padding:12px 24px;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:all .3s}.btn-cancel{background:#95a5a6;color:#fff}.btn-cancel:hover:not(:disabled){background:#7f8c8d}.btn-submit{background:linear-gradient(135deg,#e74c3c,#3498db);color:#fff;font-weight:700}.btn-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #0003}.btn-submit:disabled,.btn-cancel:disabled{opacity:.6;cursor:not-allowed;transform:none}.leaderboard-top10{margin-top:30px;max-width:100%;background:#fff;border-radius:16px;padding:20px;box-shadow:0 4px 12px #0000001a}.leaderboard-top10 h3{color:#333;margin:0 0 20px;text-align:center;font-size:1.4em;font-weight:700}.leaderboard-loading,.leaderboard-error,.leaderboard-empty{text-align:center;color:#888;padding:20px;font-style:italic}.leaderboard-error{color:#e74c3c}.retry-button{display:block;margin:10px auto 0;padding:8px 16px;background:#3498db;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px}.retry-button:hover{background:#2980b9}.top10-list{display:flex;flex-direction:column;gap:12px}.top10-item{display:flex;align-items:center;justify-content:space-between;padding:4px 20px;border-radius:12px;border:2px solid transparent;transition:all .2s;background:#fff}.top10-item.rank-1{border-color:gold;background:#fff}.top10-item.rank-2{border-color:silver;background:#fff}.top10-item.rank-3{border-color:#cd7f32;background:#fff}.player-info-top10{display:flex;align-items:center;flex:1}.player-name-top10{font-weight:700;color:#333;margin-right:8px;font-size:16px}.player-time-top10{color:#666;font-size:16px}.team-logo-container{display:flex;align-items:center}.team-logo{width:40px;height:40px;object-fit:contain;border-radius:4px}.leaderboard{margin-top:30px;max-width:100%}.leaderboard h3{color:#666;margin-bottom:20px;text-align:center;font-size:1.2em}.leaderboard-list{display:flex;flex-direction:column;gap:8px}.leaderboard-item{display:flex;align-items:center;padding:12px 16px;background:#ffffff1a;border-radius:10px;border:1px solid rgba(255,255,255,.2);transition:all .2s}.leaderboard-item:hover{background:#ffffff26;transform:translate(2px)}.leaderboard-item.rank-1{background:linear-gradient(90deg,#ffd7001a,#ffffff1a);border-color:#ffd7004d}.leaderboard-item.rank-2{background:linear-gradient(90deg,#c0c0c01a,#ffffff1a);border-color:#c0c0c04d}.leaderboard-item.rank-3{background:linear-gradient(90deg,#cd7f321a,#ffffff1a);border-color:#cd7f324d}.rank{font-size:18px;font-weight:700;margin-right:15px;min-width:35px;text-align:center}.player-info{flex:1}.player-name{font-weight:700;color:#333;margin-bottom:4px}.player-team{display:flex;align-items:center;font-size:12px;color:#666;gap:6px}.team-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.1)}.score-time{font-weight:700;color:#e74c3c;font-size:16px}.instagram-follow-button{display:none}.twitter-follow-button:hover{background-color:#1991db;transform:translateY(0);box-shadow:none}.game-container{display:flex;align-items:center;height:100vh;flex-direction:column;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.title{font-size:20px;font-weight:700;margin-bottom:20px;max-width:90%;height:50px}.span{font-size:15px}.top_light{width:100%;display:flex;flex-direction:row}.bottom_light{display:flex;flex-direction:row}.semaforo{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:240px;margin-bottom:60px}.light{width:15vw;height:15vw;max-width:80px;max-height:80px;border-radius:50%;margin:1vw}.message{font-size:20px;font-weight:700;min-height:1.5em}.purple{color:purple}.green{color:green}.yellow{color:#b4b400}.red{color:red}.try-again{font-size:15px;margin-top:30px}.game-buttons{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin-top:20px}.view-top10-button{display:flex;flex-direction:row;align-items:center;background-color:#27ae60;color:#fff;padding:10px 20px;font-size:16px;border:none;border-radius:5px;text-decoration:none;cursor:pointer;transition:background-color .3s;width:200px;justify-content:center}.view-top10-button:hover{background-color:#229954}.result-container{background:#ffffff40;border-radius:12px;padding:15px 20px 20px;margin-bottom:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.4);box-shadow:0 4px 12px #0000001a}.result-time{font-size:20px;font-weight:700;margin-bottom:10px;margin-top:10px}.result-message{font-size:18px;margin-top:5px;margin-bottom:0;color:#000}.tweet-button{display:flex;flex-direction:row;align-items:center;background-color:#1da1f2;color:#fff;padding:10px 20px;font-size:16px;border-radius:20px;text-decoration:none;width:200px!important;justify-content:center}img{margin-left:5px}.tweet-button:hover{background-color:#1991db}.messages{min-height:100px;max-height:100px;max-width:90%;display:flex;flex-direction:column;align-items:center;margin-top:20px}.footer{margin-top:70px;font-size:15px}.footer a i{color:#000;font-size:15px;margin-left:8px;transition:transform .2s}.footer a i:hover{transform:scale(1.2)}@media (max-width: 768px){.welcome-content{padding:30px 20px;margin:20px}.welcome-title{font-size:2.5em}.welcome-description{font-size:1.1em}.instructions{padding:15px}.modal-content{width:95%;margin:20px}.modal-body{padding:20px}.modal-buttons{flex-direction:column;gap:10px}.btn-cancel,.btn-submit{width:100%}.leaderboard-item{padding:10px 12px}.rank{font-size:16px;min-width:30px;margin-right:10px}.player-name,.score-time{font-size:14px}.leaderboard-top10{margin:20px 0;padding:15px}.top10-item{padding:4px 16px}.player-name-top10,.player-time-top10{font-size:14px}.team-logo{width:35px;height:35px}.game-buttons{flex-direction:column;gap:10px}.tweet-button,.view-top10-button{width:100%;justify-content:center}}@media (max-width: 480px){.welcome-content{padding:20px 15px;margin:10px}.welcome-title{font-size:2em}.welcome-description{font-size:1em}.dropdown-button{padding:12px 15px;font-size:14px}.start-game-button{padding:12px 20px;font-size:16px}.twitter-follow-button{padding:10px 20px;font-size:14px}}@media (min-width: 440px) and (max-width: 500px){.semaforo{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:240px;margin-bottom:120px}}@media (min-width: 500px){.semaforo{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:240px;margin-bottom:120px}}@media (min-width: 600px){.light{width:80px;height:80px;border-radius:50%;margin:3px 10px}.semaforo{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:240px;margin-bottom:110px}}@media (max-height: 600px){.game-container{padding-top:100px;display:flex;align-items:center;height:100vh;flex-direction:column;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}}@media (min-height: 600px){.game-container{display:flex;align-items:center;height:100vh;flex-direction:column;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}}@media (max-width: 400px){.messages{margin-top:0}}@media (max-width: 350px){.messages{margin-top:-20px}}