:root {
    --green: #1fff87;
    --purple: #a044ff;
    --bg-dark: #07030a;
    --line: rgba(160, 68, 255, 0.2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg-dark); color: #fff; font-family: 'Inter', sans-serif; height: 100vh; overflow: hidden; }

.main-layout { display: flex; height: 100vh; }

/* SIDEBAR */
.sidebar { width: 240px; background: #0d0816; border-right: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; flex-shrink: 0; z-index: 50; }
.label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.label-row label { font-size: 0.6rem; font-weight: 900; color: var(--purple); letter-spacing: 2px; }
#playerCount { font-size: 0.65rem; background: var(--purple); color: #fff; padding: 2px 6px; border-radius: 4px; font-weight: 900; }
#playerInput { width: 100%; height: 350px; background: #000; color: var(--green); border: 1px solid #1a1a1a; border-radius: 8px; padding: 12px; font-family: monospace; outline: none; font-size: 0.8rem; resize: none; }
.action-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; }
button { padding: 12px; border-radius: 6px; font-weight: 900; cursor: pointer; border: none; font-size: 0.7rem; text-transform: uppercase; transition: 0.3s; }
.btn-shuffle { background: rgba(160, 68, 255, 0.1); color: var(--purple); border: 1px solid var(--purple); }
.btn-primary { background: var(--green); color: #000; }
.btn-outline { background: transparent; color: #333; margin-top: 10px; font-size: 0.6rem; }

/* CONTENT & SCROLLING */
.content-area { flex: 1; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.scroll-wrapper { flex: 1; overflow-y: auto; overflow-x: auto; display: flex; flex-direction: column; }
.bg-glow { position: fixed; inset: 0; background: radial-gradient(circle at 50% 10%, rgba(160, 68, 255, 0.08), transparent); z-index: -1; }

.tourney-header { padding: 30px 0; text-align: center; flex-shrink: 0; }
.tourney-title { font-family: 'Rajdhani'; font-size: 2.2rem; font-weight: 800; letter-spacing: 3px; }
.tourney-title span { color: var(--green); }

/* BRACKET ALIGNMENT ENGINE */
.bracket-container { 
    display: flex; 
    padding: 40px 60px 100px 60px; 
    flex: 1;
    align-items: stretch;
    gap: 0; /* Gap handled by connector width */
}

.round-column { 
    display: flex; 
    flex-direction: column; 
    width: 200px;
    position: relative;
}

.round-column h3 { 
    height: 30px;
    text-align: center; 
    font-size: 0.65rem; 
    color: var(--purple); 
    font-weight: 900; 
    letter-spacing: 2px; 
    margin-bottom: 20px;
}

/* This makes the vertical centering work */
.match-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 10px 0;
}

.matchup-box { 
    background: rgba(255,255,255,0.02); 
    border: 1px solid var(--line); 
    border-radius: 8px; 
    position: relative;
    z-index: 10;
    width: 100%;
}

/* HORIZONTAL CONNECTOR */
.matchup-box::after {
    content: "";
    position: absolute;
    right: -61px;
    top: 50%;
    width: 61px;
    height: 1px;
    background: var(--line);
}

.round-column:last-child .matchup-box::after,
.champion-col .matchup-box::after { display: none; }

/* SIDE MARGIN FOR COLUMNS */
.round-column { margin-right: 60px; }
.round-column:last-child { margin-right: 0; }

.player-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.03); opacity: 0.4; }
.player-row:last-child { border-bottom: none; }
.player-row.active { opacity: 1; }
.p-name { font-size: 0.8rem; font-weight: 800; color: #fff; }
.p-score { width: 40px; background: #000; border: 1px solid #222; color: var(--green); text-align: center; font-size: 0.8rem; border-radius: 4px; padding: 3px; font-weight: 900; outline: none; }

/* CHAMPION REVEAL */
.champion-display { text-align: center; display: flex; flex-direction: column; align-items: center; }
.trophy-wrap { position: relative; width: 120px; height: 120px; margin-bottom: 15px; }
.champ-logo { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--purple); box-shadow: 0 0 40px rgba(160, 68, 255, 0.4); padding: 8px; background: #000; }
.svg-crown { position: absolute; top: -35px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; filter: drop-shadow(0 0 8px gold); }
.champ-name { font-family: 'Rajdhani'; font-size: 1.8rem; color: var(--purple); font-weight: 900; text-transform: uppercase; }

/* FOOTER */
.footer-v2 { border-top: 1px solid rgba(255,255,255,0.05); padding: 50px 40px; background: rgba(13, 8, 22, 0.8); flex-shrink: 0; }
.footer-content { display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 0 auto; }
.footer-brand img { width: 45px; border-radius: 50%; border: 2px solid var(--purple); margin-bottom: 8px; }
.footer-brand p { font-size: 0.7rem; color: #555c71; font-weight: 700; }
.footer-links { display: flex; gap: 25px; }
.footer-links a { text-decoration: none; color: #b1bad3; font-weight: 700; font-size: 0.75rem; transition: 0.3s; }
.footer-links a:hover { color: var(--green); }
.vman { color: var(--green); text-decoration: none; font-weight: 900; }

.empty-state { width: 100%; text-align: center; font-weight: 900; opacity: 0.05; letter-spacing: 10px; font-size: 2rem; margin-top: 100px; }