*{margin:0;padding:0;box-sizing:border-box}body{width:1500px;margin:0 auto;font-family:segoe ui,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;padding:20px}h1{text-align:center;color:#667eea;margin-bottom:30px;font-size:2.5em}hr{height:1px;background:linear-gradient(to right,transparent,#888,transparent);margin:2em 0}input[type=file]{display:none}.hidden{display:none!important}.container{max-width:1800px;margin:0 auto;background:#fff;border-radius:20px;padding:30px;box-shadow:0 20px 60px rgba(0,0,0,.3)}.phase-indicator{text-align:center;margin-bottom:20px;padding:15px;background:#f0f4ff;border-radius:10px;font-size:1.2em;font-weight:700;color:#667eea}.setup-phase{display:block}.upload-area{border:3px dashed #667eea;border-radius:15px;padding:40px;text-align:center;margin-bottom:30px;background:#f8f9ff;cursor:pointer;transition:all .3s}.upload-area:hover{background:#f0f4ff;border-color:#764ba2}.upload-area.dragover{background:#e8ecff;border-color:#764ba2;transform:scale(1.02)}.participants-header{display:flex;justify-content:space-evenly;align-items:center;margin-bottom:20px;padding:15px;background:#f8f9ff;border-radius:10px}.participants-count{font-size:1.2em;font-weight:700;color:#667eea}.clear-all-btn{border:none;border-radius:10px;cursor:pointer;font-weight:700;transition:all .3s;padding:10px 20px;background:#ff3b30;color:#fff}.clear-all-btn:hover{background:#ff5252;transform:translateY(-2px)}.participants-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;margin-bottom:30px;min-height:200px;max-height:600px;overflow-y:auto;padding:10px;background:#f8f9ff;border-radius:10px}.participant-card{background:#fff;border:2px solid #e0e0e0;border-radius:10px;padding:10px;cursor:move;transition:all .3s;position:relative}.participant-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,.15);border-color:#667eea}.participant-card.dragging{opacity:.5}.participant-card img{width:100%;object-fit:cover;border-radius:5px;height:150px;margin-bottom:8px}.participant-name{text-align:center;font-size:.9em;color:#333;word-break:break-word}.remove-btn{position:absolute;top:15px;right:15px;background:rgba(255,59,48,.9);color:#fff;border:none;width:25px;height:25px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:10}.remove-btn:hover{background:#ff3b30;transform:scale(1.1)}.start-btn{border:none;border-radius:10px;cursor:pointer;font-weight:700;transition:all .3s;display:block;width:100%;max-width:400px;margin:0 auto;padding:20px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;font-size:1.3em}.start-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 25px rgba(102,126,234,.4)}.start-btn:disabled{opacity:.5;cursor:not-allowed}.tournament-phase{display:none}.tournament-progress{display:flex;justify-content:space-around;margin-bottom:30px;padding:20px;background:#f0f4ff;border-radius:10px;flex-wrap:wrap;gap:15px}.progress-stat{text-align:center}.progress-stat-value{font-size:2em;font-weight:700;color:#667eea}.progress-stat-label{font-size:.9em;color:#666;margin-top:5px}.current-match-indicator{text-align:center;margin-bottom:20px;padding:15px;background:#fff3e0;border-radius:10px;border:2px solid #ffa726;font-size:1.1em;color:#f57c00;font-weight:700}.match-container{max-width:900px;margin:0 auto;padding:20px}.round-title{text-align:center;font-size:1.8em;color:#667eea;margin-bottom:30px;font-weight:700}.match{display:flex;gap:20px;justify-content:center;margin-bottom:40px;border:1px solid #ddd;padding:.5rem;background:#fafafa;border-radius:8px}.competitor{flex:1;max-width:400px;background:#fff;border:3px solid #e0e0e0;border-radius:15px;padding:20px;cursor:pointer;transition:all .3s;text-align:center}.competitor:hover{transform:scale(1.05);border-color:#667eea;box-shadow:0 15px 35px rgba(102,126,234,.3)}.competitor img{width:100%;object-fit:cover;border-radius:5px;height:300px;border-radius:10px;margin-bottom:15px}.competitor-name{font-size:1.2em;font-weight:700;color:#333}.vs-divider{display:flex;align-items:center;justify-content:center;font-size:2em;font-weight:700;color:#764ba2}.vs{text-align:center;font-weight:700;margin:.4rem 0}.bracket-container{overflow-x:auto;padding:40px 20px;background:#f8f9ff;border-radius:15px}.bracket{display:flex;justify-content:center;gap:60px;min-width:fit-content}.bracket-column{display:flex;flex-direction:column;justify-content:space-around;min-width:200px}.bracket-column:last-child .match-pair::after{display:none}.round{min-width:200px}.round-header{text-align:center;font-size:1.2em;font-weight:700;color:#667eea;margin-bottom:20px;padding:10px;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);position:absolute;top:339px}.match-pair{display:flex;flex-direction:column;gap:10px;margin:20px 0;position:relative}.match-pair::after{content:'';position:absolute;right:-30px;top:50%;width:30px;height:2px;background:#667eea;transform:translateY(-50%)}.bracket-item{background:#fff;border:3px solid #e0e0e0;border-radius:10px;padding:10px;cursor:pointer;transition:all .3s;position:relative;min-height:100px}.bracket-item:hover:not(.winner):not(.loser){transform:scale(1.05);border-color:#667eea;box-shadow:0 8px 20px rgba(102,126,234,.3)}.bracket-item.clickable{cursor:pointer}.bracket-item.winner{border-color:#4caf50;background:#e8f5e9;box-shadow:0 4px 15px rgba(76,175,80,.3)}.bracket-item.loser{opacity:.4;border-color:#ccc}.bracket-item.current-match{border-color:#ffa726;background:#fff3e0;animation:pulse 2s infinite}.bracket-item.pending{border-color:#ffa726;background:#fff3e0}.bracket-item.empty{background:#f5f5f5;border-style:dashed;display:flex;align-items:center;justify-content:center;color:#999}.bracket-item img{width:100%;object-fit:cover;border-radius:5px;height:120px;margin-bottom:8px}.bracket-item-name{text-align:center;font-size:.85em;font-weight:700;color:#333}@keyframes pulse{0%,100%{box-shadow:0 0 rgba(255,167,38,.7)}50%{box-shadow:0 0 0 10px rgba(255,167,38,0)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.winner-column{display:flex;align-items:center;justify-content:center}.winner-column .bracket-item{min-height:200px;border-width:4px}.winner-column .bracket-item img{height:180px}.winner-column .bracket-item.winner{background:linear-gradient(135deg,#4CAF50 0%,#45a049 100%);color:#fff;border-color:gold;box-shadow:0 10px 40px rgba(255,215,0,.5)}.winner-column .bracket-item-name{font-size:1.2em;color:#fff}.winner-badge{text-align:center;font-size:2em;margin-bottom:10px}.winner-display{text-align:center;padding:40px}.winner-display h2{font-size:2.5em;color:#667eea;margin-bottom:30px}.winner-card{max-width:500px;margin:0 auto;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:20px;padding:30px;color:#fff}.winner-card img{width:100%;object-fit:cover;border-radius:5px;height:400px;border-radius:15px;margin-bottom:20px;border:5px solid #fff}.winner-card h3{font-size:2em;margin-bottom:20px}.match-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s}.match-overlay.active{display:flex}.match-window{background:#fff;border-radius:20px;padding:40px;max-width:1200px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:slideUp .4s}.match-header{text-align:center;margin-bottom:30px}.match-round-title{font-size:2em;color:#667eea;font-weight:700;margin-bottom:10px}.match-info{font-size:1.1em;color:#666}.match-content{display:flex;gap:40px;justify-content:center;align-items:stretch}.match-competitor{flex:1;max-width:450px;background:#f8f9ff;border:4px solid #e0e0e0;border-radius:15px;padding:20px;cursor:pointer;transition:all .3s;text-align:center}.match-competitor:hover{transform:scale(1.05);border-color:#667eea;box-shadow:0 15px 40px rgba(102,126,234,.4);background:#fff}.match-competitor img{width:100%;height:400px;object-fit:cover;border-radius:10px;margin-bottom:20px;box-shadow:0 5px 20px rgba(0,0,0,.2)}.match-competitor-name{font-size:1.4em;font-weight:700;color:#333;margin-bottom:10px}.match-click-hint{font-size:.9em;color:#667eea;font-weight:700}.match-vs{display:flex;align-items:center;justify-content:center;font-size:3em;font-weight:700;color:#764ba2}.player{display:flex;flex-direction:column;align-items:center;padding:.25rem}.player-image{width:80px;height:80px;object-fit:cover;border-radius:6px}.player-name{margin-top:.4rem}.winner{outline:3px solid gold}.bracket-controls{margin-top:1rem;display:flex;gap:8px}.reset-btn{border:none;border-radius:10px;cursor:pointer;font-weight:700;transition:all .3s;display:block;margin:30px auto 0;padding:15px 40px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;font-size:1.1em}.reset-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(102,126,234,.4)}nav ul{border:1px solid #ddd;padding:.5rem;gap:1rem;background:#fafafa;border-radius:8px;justify-content:center;display:flex}nav ul a{color:#111;text-decoration:none}nav ul a:hover{text-decoration:underline}nav ul li{display:inline;margin-left:2rem}footer{border:1px solid #ddd;background:#f2f2f2;padding:.5rem;font-size:.7em;text-align:center;position:static;display:flex;bottom:2em;border-radius:8px;gap:1rem;margin-top:60rem}@media(max-width:1200px){.bracket{gap:40px}.bracket-column{min-width:160px}.match-content{flex-direction:column}.match-vs{transform:rotate(90deg);margin:20px 0}}@media(max-width:768px){body{width:100%;padding:10px}.container{padding:20px;border-radius:10px}h1{font-size:1.8em;margin-bottom:14px}.upload-area{padding:20px;font-size:.9em}.participants-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:15px;max-height:400px}.participant-card img{height:120px}.participants-header{flex-direction:column;gap:10px}.start-btn{font-size:1.1em;padding:15px}.tournament-progress{flex-direction:column;gap:10px}.progress-stat-value{font-size:1.5em}.match-container{padding:10px}.round-title{font-size:1.4em}.competitor{max-width:100%}.competitor img{height:250px}.bracket{gap:30px}.bracket-column{min-width:140px}.bracket-item{min-height:80px}.bracket-item img{height:100px}.round-header{font-size:1em;padding:8px}.match-window{width:95%;padding:20px}.match-round-title{font-size:1.5em}.match-competitor{max-width:100%}.match-competitor img{height:300px}.match-competitor-name{font-size:1.2em}.winner-column .bracket-item{min-height:150px}.winner-column .bracket-item img{height:140px}.winner-card{max-width:90%}.winner-card img{height:300px}nav ul{flex-direction:column;gap:.5rem}nav ul li{margin-left:0}footer{flex-direction:column;gap:.5rem;padding:1rem}}@media(max-width:480px){body{padding:5px}.container{padding:15px;border-radius:8px}h1{font-size:1.5em;margin-bottom:15px}hr{margin:1em 0}.phase-indicator{font-size:1em;padding:10px}.upload-area{padding:15px;font-size:.85em;border-width:2px}.participants-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;max-height:300px;padding:5px}.participant-card{padding:8px}.participant-card img{height:100px}.participant-name{font-size:.8em}.remove-btn{width:20px;height:20px;top:10px;right:10px;font-size:14px}.participants-header{padding:10px}.participants-count{font-size:1em}.clear-all-btn{padding:8px 15px;font-size:.9em}.start-btn{font-size:1em;padding:12px;max-width:100%}.reset-btn{font-size:1em;padding:12px 30px}.tournament-progress{padding:15px;gap:8px}.progress-stat-value{font-size:1.3em}.progress-stat-label{font-size:.8em}.current-match-indicator{font-size:.95em;padding:10px}.match-container{padding:5px}.round-title{font-size:1.2em;margin-bottom:20px}.match{flex-direction:column;gap:15px;padding:.3rem}.competitor{padding:15px}.competitor img{height:200px}.competitor-name{font-size:1em}.vs-divider{font-size:1.5em;transform:rotate(90deg)}.vs{margin:.2rem 0}.bracket-container{padding:20px 10px}.bracket{gap:20px;flex-direction:column}.bracket-column{min-width:100%}.bracket-item{min-height:70px;padding:8px}.bracket-item img{height:80px}.bracket-item-name{font-size:.75em}.round{min-width:100%}.round-header{font-size:.9em;padding:8px;position:relative;top:0;margin-bottom:10px}.match-pair{margin:15px 0}.match-pair::after{display:none}.match-overlay{padding:10px}.match-window{width:98%;padding:15px;border-radius:10px}.match-header{margin-bottom:20px}.match-round-title{font-size:1.3em;margin-bottom:5px}.match-info{font-size:.9em}.match-content{gap:20px}.match-competitor{padding:15px;border-width:3px}.match-competitor img{height:250px;margin-bottom:15px}.match-competitor:hover{transform:scale(1.02)}.match-competitor-name{font-size:1.1em;margin-bottom:8px}.match-click-hint{font-size:.85em}.match-vs{font-size:2em;transform:rotate(90deg);margin:10px 0}.winner-column .bracket-item{min-height:120px;border-width:3px}.winner-column .bracket-item img{height:110px}.winner-column .bracket-item-name{font-size:1em}.winner-badge{font-size:1.5em}.winner-display{padding:20px}.winner-display h2{font-size:1.8em;margin-bottom:20px}.winner-card{padding:20px}.winner-card img{height:250px;border-width:3px}.winner-card h3{font-size:1.5em;margin-bottom:15px}.player{padding:.2rem}.player-image{width:60px;height:60px}.bracket-controls{flex-direction:column;gap:6px}nav ul{padding:.3rem;gap:.3rem}nav ul a{font-size:.9em}footer{font-size:.65em;padding:.8rem;margin-top:30rem}}@media(max-width:360px){h1{font-size:1.3em}.participants-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.participant-card img{height:80px}.match-competitor img{height:200px}.competitor img{height:180px}.winner-card img{height:200px}}