/* assets/css/bracket.css
   Knockout Bracket – public tournament view
   Desktop: 4-column bracket (QF › SF › Final › Champion) with SVG connectors
   Mobile/Tablet: round tabs, one round at a time */

:root {
    --bk-bg: #0f172a;
    --bk-board: #ffffff;
    --bk-line: #cbd5e1;
    --bk-line-done: #16a34a;
    --bk-win: #16a34a;
    --bk-live: #dc3545;
    --bk-gold: #f59e0b;
    --bk-muted: #94a3b8;
    --bk-card-h: 116px;
}

.bk-page { font-family: 'Inter', system-ui, sans-serif; }

/* ---------- Hero ---------- */
.bk-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(245, 158, 11, .25), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(22, 163, 74, .30), transparent 45%),
        linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #14532d 100%);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
}
.bk-hero::after { /* pitch centre circle watermark */
    content: '';
    position: absolute;
    right: -60px; top: -60px;
    width: 260px; height: 260px;
    border: 2px solid rgba(255, 255, 255, .06);
    border-radius: 50%;
    pointer-events: none;
}
.bk-hero-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: grid; place-items: center;
    font-size: 1.6rem;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1f2937;
    box-shadow: 0 6px 18px rgba(245, 158, 11, .4);
    flex-shrink: 0;
}
.bk-hero h1 { font-size: clamp(1.25rem, 2.6vw, 1.85rem); font-weight: 800; letter-spacing: -.02em; }
.bk-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .78rem; font-weight: 600;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #e2e8f0;
}
.bk-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .7);
    animation: bkPing 1.8s infinite;
}
@keyframes bkPing {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); }
    70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ---------- Progress stepper ---------- */
.bk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.bk-step {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .75rem;
    padding: .65rem .8rem;
}
.bk-step-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #cbd5e1; font-weight: 700; }
.bk-step-count { font-size: 1.1rem; font-weight: 800; }
.bk-step .progress { height: 6px; background: rgba(255, 255, 255, .12); }
.bk-step.is-done { border-color: rgba(34, 197, 94, .6); }
.bk-step.is-current { border-color: rgba(251, 191, 36, .8); background: rgba(251, 191, 36, .12); }

/* ---------- Board ---------- */
.bk-board {
    background:
        linear-gradient(90deg, rgba(22, 163, 74, .035) 50%, transparent 50%) 0 0 / 120px 100%,
        var(--bk-board);
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
}
.bk-legend { font-size: .75rem; color: #64748b; }
.bk-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: .3rem; vertical-align: -1px; }

.bk-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(230px, 1fr)) minmax(210px, .85fr);
    column-gap: 56px;
}
.bk-col-head {
    text-align: center;
    font-size: .72rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    color: #64748b;
    padding-bottom: .75rem;
}
.bk-col-head small { display: block; font-weight: 600; letter-spacing: 0; text-transform: none; color: #94a3b8; font-size: .72rem; }
.bk-col-head.is-final { color: var(--bk-gold); }
.bk-col {
    display: flex; flex-direction: column;
    justify-content: space-around;
    gap: 18px;
    min-height: calc(4 * var(--bk-card-h) + 3 * 18px + 24px);
    position: relative; z-index: 2;
}
.bk-svg { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.bk-svg path { fill: none; stroke: var(--bk-line); stroke-width: 2; stroke-dasharray: 5 5; }
.bk-svg path.is-done { stroke: var(--bk-line-done); stroke-dasharray: none; stroke-width: 2.5; }

/* ---------- Match card ---------- */
.bk-match {
    height: var(--bk-card-h);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .8rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
    user-select: none;
}
.bk-match:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, .1); border-color: #cbd5e1; }
.bk-match:active { transform: translateY(0); }
.bk-match-head {
    display: flex; align-items: center; gap: .45rem;
    padding: .38rem .65rem;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
    font-size: .7rem; color: #64748b;
}
.bk-pos { font-weight: 800; color: #0f172a; letter-spacing: .03em; }
.bk-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-status {
    margin-left: auto;
    font-weight: 700; font-size: .62rem;
    letter-spacing: .05em; text-transform: uppercase;
    padding: .15rem .5rem; border-radius: 999px;
    background: #e2e8f0; color: #475569;
    white-space: nowrap;
}
.bk-status.is-live { background: var(--bk-live); color: #fff; animation: pulseGlow 1.5s infinite ease-in-out; }
.bk-status.is-ht { background: #fbbf24; color: #1f2937; }
.bk-status.is-done { background: #dcfce7; color: #166534; }
.bk-status.is-scheduled { background: #f8fafc; color: #334155; border: 1px solid #e2e8f0; }
.bk-status.is-delayed { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; font-weight: 700; }
.bk-status.is-locked { background: #f1f5f9; color: #94a3b8; }

.bk-team {
    flex: 1;
    display: flex; align-items: center; gap: .55rem;
    padding: 0 .65rem;
    font-size: .86rem; font-weight: 600; color: #1e293b;
    min-width: 0;
}
.bk-team + .bk-team { border-top: 1px dashed #eef2f7; }
.bk-colour { width: 4px; height: 22px; border-radius: 4px; background: var(--c, #cbd5e1); flex-shrink: 0; }
.bk-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-score {
    min-width: 30px; text-align: center;
    font-weight: 800; font-variant-numeric: tabular-nums;
    padding: .15rem .4rem; border-radius: .4rem;
    background: #f1f5f9; color: #334155;
}
.bk-team.is-win { background: linear-gradient(90deg, rgba(22, 163, 74, .10), transparent 80%); color: #14532d; }
.bk-team.is-win .bk-score { background: var(--bk-win); color: #fff; }
.bk-team.is-win .bk-name::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: .4rem; font-size: .7rem; color: var(--bk-win); }
.bk-team.is-lose { color: #94a3b8; }
.bk-team.is-lose .bk-colour { opacity: .35; }
.bk-team.is-tbd { color: var(--bk-muted); font-style: italic; font-weight: 500; }
.bk-team.is-tbd .bk-colour { background: repeating-linear-gradient(180deg, #cbd5e1 0 4px, transparent 4px 7px); }
.bk-team.is-tbd .bk-score { background: transparent; color: #cbd5e1; }
.bk-tbd-icon { font-size: .75rem; color: #cbd5e1; }

.bk-match.is-live { border-color: rgba(220, 53, 69, .55); box-shadow: 0 0 0 3px rgba(220, 53, 69, .12), 0 4px 14px rgba(220, 53, 69, .15); }
.bk-match.is-locked { background: #fbfcfe; border-style: dashed; box-shadow: none; }
.bk-match.is-locked:hover { transform: none; }
.bk-match.stage-final { border: 2px solid rgba(245, 158, 11, .55); }
.bk-match.stage-final .bk-match-head { background: linear-gradient(90deg, #fffbeb, #fff); }

/* ---------- Champion ---------- */
.bk-champion {
    align-self: center;
    text-align: center;
    border-radius: 1rem;
    padding: 1.4rem 1rem;
    background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 100%);
    border: 2px solid rgba(245, 158, 11, .45);
    box-shadow: 0 10px 26px rgba(245, 158, 11, .18);
}
.bk-champion .bk-trophy { font-size: 2.6rem; color: var(--bk-gold); filter: drop-shadow(0 4px 8px rgba(245, 158, 11, .4)); }
.bk-champion.is-pending { background: #f8fafc; border: 2px dashed #e2e8f0; box-shadow: none; }
.bk-champion.is-pending .bk-trophy { color: #cbd5e1; filter: none; }
.bk-champion-name { font-weight: 800; font-size: 1.05rem; color: #78350f; }
.bk-champion.is-crowned .bk-trophy { animation: bkBounce 2.4s ease-in-out infinite; }
@keyframes bkBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- Round tabs (mobile/tablet) ---------- */
.bk-tabs { display: none; }
.bk-tabs .btn { font-size: .78rem; font-weight: 700; }
.bk-tabs .badge { font-size: .62rem; }

/* ---------- Classification ---------- */
.bk-section-title { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.bk-round-tag { font-size: .66rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .bk-grid { column-gap: 40px; grid-template-columns: repeat(3, minmax(210px, 1fr)) minmax(180px, .8fr); }
}
@media (max-width: 991.98px) {
    .bk-tabs { display: flex; }
    .bk-grid { display: block; }
    .bk-svg, .bk-col-head { display: none; }
    .bk-col { display: none; min-height: 0; gap: 12px; }
    .bk-col.is-active { display: flex; }
    .bk-col.bk-col-champion.is-active { display: block; margin-top: 12px; }
    .bk-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
    .bk-step { padding: .5rem .6rem; }
}
@media (max-width: 575.98px) {
    :root { --bk-card-h: 108px; }
    .bk-hero-icon { width: 46px; height: 46px; font-size: 1.3rem; }
    .bk-step-label { font-size: .6rem; }
    .bk-step-count { font-size: .95rem; }
    .bk-team { font-size: .82rem; }
}