/* =============================================================================
   Bracket Layout Styles
   =============================================================================
   Layout:
     LEFT SIDE              CENTER        RIGHT SIDE
     ┌────────────────┐   ┌────────┐   ┌────────────────┐
     │   East Region  │   │  FF 1  │   │  West Region   │
     │ R64→R32→S16→E8 │   │  NCG   │   │ E8←S16←R32←R64│
     ├────────────────┤   │  FF 2  │   ├────────────────┤
     │  South Region  │   └────────┘   │ Midwest Region │
     │ R64→R32→S16→E8 │               │ E8←S16←R32←R64 │
     └────────────────┘               └────────────────┘

   Key rules:
   - Both sides: two regions stacked VERTICALLY (top + bottom)
   - Left  side: R64 on far left,  E8 nearest center  (natural order)
   - Right side: R64 on far right, E8 nearest center  (row-reversed)
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Outer wrapper
   --------------------------------------------------------------------------- */
.bracket-wrapper {
    width:      100%;
    overflow-x: auto;
    padding:    1.5rem 0 2rem;
}

.bracket-page-header {
    max-width: var(--container-max);
    width:     30%;
    margin:    0 auto;
    padding:   1rem 1rem 0;    
}

.bracket-page-header__name-row {
    display:       flex;
    flex-wrap:     wrap;
    align-items:   flex-end;
    gap:           1rem;
    margin-bottom: .7rem;
}

.bracket-page-header__field {
    flex:      1;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   Main bracket grid — three columns
   --------------------------------------------------------------------------- */
.bracket-grid {
    display:               grid;
    grid-template-columns: 1fr 190px 1fr;
    grid-template-rows:    1fr;
    gap:                   0;
    min-width:             1200px;
    max-width:             var(--container-max);
    padding:               0 .5rem;
    align-items:           stretch;
    margin:                10px auto 10px auto;
    
}

/* ---------------------------------------------------------------------------
   Side containers — two regions stacked VERTICALLY
   --------------------------------------------------------------------------- */
.bracket-side {
    display:        flex;
    flex-direction: column;  /* TOP region above BOTTOM region */
    align-items:    stretch;
}

/* ---------------------------------------------------------------------------
   Each region — a horizontal row of round columns
   --------------------------------------------------------------------------- */
.bracket-region {
    display:        flex;
    flex-direction: row;
    flex:           1;
    min-height:     0;
}

/* Left: R64 (outermost/left) → E8 (innermost/right) */
.bracket-side--left .bracket-region {
    flex-direction: row;
}

/* Right: E8 (innermost/left) → R64 (outermost/right)
   We achieve the mirror by reversing the column order */
.bracket-side--right .bracket-region {
    flex-direction: row-reverse;
}

/* ---------------------------------------------------------------------------
   Round columns
   --------------------------------------------------------------------------- */
.bracket-round {
    display:        flex;
    flex-direction: column;
    min-width:      138px;
    max-width:      158px;
    flex:           1;
}

.bracket-round__label {
    font-family:    var(--font-display);
    font-size:      .7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--color-text-muted);
    text-align:     center;
    padding:        .3rem 0 .45rem;
    border-bottom:  1px solid var(--color-border);
    margin-bottom:  .4rem;
    white-space:    nowrap;
}

.bracket-round__games {
    display:         flex;
    flex-direction:  column;
    flex:            1;
    justify-content: space-around;
}

/* ---------------------------------------------------------------------------
   Individual game matchup
   --------------------------------------------------------------------------- */

/* Outer wrapper — position:relative so wrong-pick labels anchor to it */
.bracket-matchup-outer {
    position: relative;
}

/* Wrong-pick label shown outside side-column matchup boxes (above or below) */
.bracket-wrong-pick {
    position:        absolute;
    left:            0;
    right:           0;
    font-size:       .62rem;
    font-weight:     600;
    color:           #dc2626;
    text-decoration: line-through;
    text-align:      center;
    padding:         .1rem .3rem;
    line-height:     1.3;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
}

.bracket-wrong-pick--top    { bottom: 100%; }
.bracket-wrong-pick--bottom { top:    100%; }

/* Wrong-pick shown inline inside center-column buttons */
.bracket-team__wrong-pick-inline {
    font-size:       .6rem;
    font-weight:     600;
    font-style:      normal;
    color:           #dc2626;
    text-decoration: line-through;
    margin-left:     4px;
    flex-shrink:     0;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
    max-width:       60px;
}

.bracket-matchup {
    display:        flex;
    flex-direction: column;
    margin:         .28rem .22rem;
    position:       relative;
}

/* Left side: connector line extends rightward from matchup */
/*
.bracket-side--left .bracket-matchup::after {
    content:    '';
    position:   absolute;
    right:      -5px;
    top:        50%;
    width:      5px;
    height:     1px;
    background: var(--color-border);
}
*/

/* Right side: connector line extends leftward from matchup */
/*
.bracket-side--right .bracket-matchup::after {
    content:    '';
    position:   absolute;
    left:       -5px;
    top:        50%;
    width:      5px;
    height:     1px;
    background: var(--color-border);
}
*/

/* ---------------------------------------------------------------------------
   Team slot button
   --------------------------------------------------------------------------- */
.bracket-team {
    display:       flex;
    align-items:   center;
    gap:           5px;
    padding:       4px 7px;
    border:        1px solid var(--color-border);
    background:    var(--color-surface);
    cursor:        pointer;
    transition:    background .12s, color .12s, border-color .12s;
    font-size:     .74rem;
    font-family:   var(--font-body);
    font-weight:   500;
    color:         var(--color-text);
    line-height:   1.2;
    min-height:    29px;
    position:      relative;
    text-align:    left;
    width:         100%;
    border-radius: 0;
    user-select:   none;
    border-left:   3px solid var(--color-primary); 
}

.bracket-team:first-child {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.bracket-team:last-child {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    border-top:    none;
}

.bracket-grid:not(.bracket-grid--readonly) .bracket-team:hover:not(.bracket-team--tbd):not(.bracket-team--picked) {
/*    background:   var(--color-accent);*/
        color:        var(--color-accent) !important;
    
    z-index:      1;

/*    transform:    scale(1.02);*/
}

.bracket-grid:not(.bracket-grid--readonly) .bracket-team:hover:not(.bracket-team--tbd):not(.bracket-team--picked) .bracket-team__seed {
/*    color: rgba(0,0,0,.55) !important;*/
        color:        var(--color-accent) !important;

}

/* Selected — solid colour fill */
.bracket-team--picked {
/*    background:   var(--color-pick) !important;*/
    border-color: var(--color-accent) !important;
    color:        var(--color-text-body) !important;
    z-index:      2;
/*    background: linear-gradient(135deg, #fff4eb 50%, #E8872A 100%);*/
    background:     #fff4eb;
/*    box-shadow: inset 0 0 20px rgba(255, 255, 255, 1);*/
}

/* Bottom-slot selections share their top seam with the button above.
   Paint over that shared divider so the selected outline stays continuous. */
.bracket-team--picked:last-child::before {
    content:       '';
    position:      absolute;
    top:           -1px;
    left:          -1px;
    right:         -1px;
    border-top:    1px solid var(--color-accent);
    pointer-events:none;
}

.bracket-team--picked .bracket-team__seed {
/*    color: rgba(255,255,255,.55) !important;*/
    color:        var(--color-text-muted) !important;
    
}


/* Eliminated loser — dimmed */

/* TBD slot */
.bracket-team--tbd {
    color:      var(--color-text-muted);
    cursor:     default;
}

.bracket-team__seed {
    font-size:   .63rem;
    font-weight: 700;
    color:       var(--color-text-muted);
    min-width:   14px;
    text-align:  right;
    flex-shrink: 0;
}

.bracket-team__name {
    flex:          1;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.bracket-team__score {
    margin-left: auto;
    padding-left: 6px;
    font-size:   .7rem;
    font-weight: 700;
    color:       #000;
    flex-shrink: 0;
    text-align:  right;
}

/* ---------------------------------------------------------------------------
   Read-only mode: loser — faded grey text + strikethrough on name
   --------------------------------------------------------------------------- */
.bracket-team--loser {
    color: #9ca3af !important;
}

.bracket-team--loser .bracket-team__seed {
    color: #9ca3af !important;
}

.bracket-team--loser .bracket-team__name {
    color: #9ca3af !important;
}

.bracket-team--loser .bracket-team__score {
    color: #9ca3af !important;
}

/* ---------------------------------------------------------------------------
   Read-only mode: advance coloring — did the user pick this team to get here?
   Applied to the team's button in the round they advanced into.
   --------------------------------------------------------------------------- */
.bracket-team--correct-advance .bracket-team__name,
.bracket-team--correct-advance .bracket-team__seed {
    color: #16a34a !important;
}

.bracket-team--incorrect-advance .bracket-team__name,
.bracket-team--incorrect-advance .bracket-team__seed {
    color: #dc2626 !important;    
}

.bracket-team--tbd-wrong-pick,
.bracket-team--tbd-wrong-pick .bracket-team__name,
.bracket-team--tbd-wrong-pick .bracket-team__seed {
    color: #9ca3af !important;
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Center column
   Three sections stacked vertically:
     1.  FF slot — East vs South winner  (top ~40%)
     2.  NCG slot — Championship         (middle ~20%)
     3.  FF slot — West vs Midwest winner (bottom ~40%)
   --------------------------------------------------------------------------- */
.bracket-center {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: space-between;
    gap:             -1rem;
    padding:         23.3rem .2rem;
    position:        relative;
/*    transform: translateY(1.15rem);*/
}

/*
.bracket-center {
    background: linear-gradient(
        to bottom,
        transparent                  0%,
        rgba(230, 184, 0, 0.055)    35%,
        rgba(230, 184, 0, 0.11)     50%,
        rgba(230, 184, 0, 0.055)    65%,
        transparent                 100%
    );
}
*/

/* Each FF slot takes half of the remaining height */
.bracket-ff-slot {
    flex:            1;
    width:           100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         .75rem 0;
    gap:             4px;
    position:        relative;
    z-index:         0;
}

.bracket-ff-slot__label {
    font-family:    var(--font-display);
    font-size:      .62rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--color-text-muted);
    text-align:     center;
    margin-bottom:  4px;
}

.bracket-ff-slot .bracket-ff-slot__label:last-child {
    margin-top:    4px;
    margin-bottom: 0;
}

/* Championship block */
.bracket-ncg-slot {
    width:           100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             5px;
    padding:         .85rem 0;
    border-top:      1px solid var(--color-border);
    border-bottom:   1px solid var(--color-border);
    position:        relative;
    isolation:       isolate;
    overflow:        visible;
    z-index:         2;
}

.bracket-ncg-slot > :not(.bracket-ncg-slot__champ-logo) {
    position: relative;
    z-index:  1;
}

.bracket-ncg-slot__champ-logo {
    position:       absolute;
    left:           50%;
    top:            50%;
    width:          clamp(22rem, 40vw, 32rem);
    height:         clamp(22rem, 40vw, 32rem);
    transform:      translate(-50%, -50%);
    pointer-events: none;
    opacity:        0;
    transition:     opacity .18s ease;
    z-index:        9999;
    display:        flex;
    align-items:    center;
    justify-content:center;
}

.bracket-ncg-slot__champ-logo--visible {
    opacity: .08;
}

.bracket-ncg-slot__champ-logo--fallback {
    opacity: .08;
}

.bracket-ncg-slot__champ-logo-img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    filter:     drop-shadow(0 18px 28px rgba(120, 90, 0, 0.18));
}

.bracket-ncg-slot__champ-logo-fallback {
    position:       absolute;
    inset:          0;
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-size:      clamp(15rem, 30vw, 22rem);
    line-height:    1;
    opacity:        0;
    filter:         drop-shadow(0 18px 28px rgba(120, 90, 0, 0.18));
}

.bracket-ncg-slot__champ-logo--fallback .bracket-ncg-slot__champ-logo-fallback {
    opacity: 1;
}

.bracket-ncg-slot .bracket-team{
}

.bracket-ncg-slot .bracket-team--picked{
/*    background: var(--color-accent) !important;*/
}

.bracket-ncg-slot__label {
    font-family:    var(--font-display);
    font-size:      .62rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--color-text-muted);
    text-align:     center;
}

/* Shared matchup container used inside center column */
.bracket-center-matchup {
    width:          100%;
    display:        flex;
    flex-direction: column;    
}

.bracket-center-matchup .bracket-team {
/*    border-left-width: 1px solid var(--color-border);    override coloured stripe */
}

.bracket-center-matchup .bracket-team:first-child {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-top:    1px solid var(--color-border);
}

.bracket-center-matchup .bracket-team:last-child {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    border-top:    none;
}

/* Champion display */
.bracket-champion {
    width:         100%;
    border:        2px solid #e6b800;
    border-radius: var(--radius-md);
    padding:       .55rem .5rem;
    text-align:    center;
    background:    var(--color-surface);
    margin-top:    .4rem;
    position:      relative;
    z-index:       2;
}

.bracket-champion--crowned {
    background: linear-gradient(135deg, #6b4f00 0%, #b8860b 35%, #e6b800 50%, #b8860b 65%, #6b4f00 100%);
    position:   relative;
    overflow:   hidden;
}

.bracket-champion--crowned .bracket-champion__label {
    color: #fff;
}

.bracket-champion--crowned::after {
    content:    '';
    position:   absolute;
    top:        -50%;
    left:       -100%;
    width:      60%;
    height:     200%;
    background: linear-gradient(to right, transparent 0%, rgba(255, 248, 180, 0.55) 50%, transparent 100%);
    transform:  skewX(-15deg);
    animation:  champion-shimmer 2.4s ease-in-out infinite;
}

@keyframes champion-shimmer {
    0%   { left: -100%; }
    100% { left: 160%; }
}

.bracket-champion__label {
    font-size:      .6rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          #e6b800;
    margin-bottom:  .15rem;
}

.bracket-champion__name {
    font-family:    var(--font-display);
    font-size:      1.2rem;
    font-weight:    700;
    color:          white;    /*change after winner crowned to: var(--color-primary);*/
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bracket-champion__wrong-pick {
    font-size:       .65rem;
    font-weight:     600;
    color:           #dc2626;
    text-decoration: line-through;
    font-style:      italic;
    margin-top:      .25rem;
    min-height:      0;
}

.bracket-ncg-slot__tiebreaker {
    margin-top:  .75rem;
    text-align:  center;
}

.bracket-ncg-slot__tiebreaker-label {
    display:        block;
    font-size:      .65rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--color-text-muted);
    margin-bottom:  .3rem;
}

.bracket-ncg-slot__tiebreaker-input {
    width:      80px;
    text-align: center;
    font-size:  .9rem;
}

.bracket-ncg-slot__tiebreaker-input::-webkit-outer-spin-button,
.bracket-ncg-slot__tiebreaker-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bracket-ncg-slot__tiebreaker-input[type=number] {
    -moz-appearance: textfield;
}

/* ---------------------------------------------------------------------------
   Region name header pill
   --------------------------------------------------------------------------- */
.bracket-region-header {
    display:        block;
    font-family:    var(--font-display);
    font-size:      .76rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align:     center;
    padding:        .22rem .5rem;
    background:     #e9f1fc;
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-sm);
    margin-bottom:  .35rem;
    color:          var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Region accent colours — coloured left-border stripe on team buttons
   --------------------------------------------------------------------------- */
/*
.bracket-region--east    .bracket-team { border-left: 3px solid #a2bcf6; }
.bracket-region--west    .bracket-team { border-left: 3px solid #a5f3e7; }
.bracket-region--south   .bracket-team { border-left: 3px solid #fde69b; }
.bracket-region--midwest .bracket-team { border-left: 3px solid #cda3f5; }

.bracket-region--east    .bracket-team--picked { border-left-color: #1d4ed8 !important; }
.bracket-region--west    .bracket-team--picked { border-left-color: #0d9488 !important; }
.bracket-region--south   .bracket-team--picked { border-left-color: #d97706 !important; }
.bracket-region--midwest .bracket-team--picked { border-left-color: #7e22ce !important; }

.bracket-region--east    .bracket-region-header { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.bracket-region--west    .bracket-region-header { color: #0f766e; border-color: #99f6e4; background: #f0fdfa; }
.bracket-region--south   .bracket-region-header { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.bracket-region--midwest .bracket-region-header { color: #7e22ce; border-color: #e9d5ff; background: #faf5ff; }
*/

/* ---------------------------------------------------------------------------
   Sticky submit bar
   --------------------------------------------------------------------------- */
.bracket-submit-bar {
    position:        sticky;
    bottom:          0;
    background:      var(--color-primary);
/*    opacity:         90%;*/
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    box-shadow:      0 -5px 10px rgba(0,0,0,.2);
    z-index:         50;
    flex-wrap:       wrap;
    margin-top:      20px;
}

.bracket-submit-bar__progress {
    color:     rgba(255,255,255,.8);
    font-size: .85rem;
}

.bracket-submit-bar__progress strong {
    color:       #fff;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Bracket selector — single trigger card + dropdown (read-only mode)
   --------------------------------------------------------------------------- */
.bracket-center {
    position: relative;
}

.bracket-selector {
    position:  absolute;
    top:       6rem;
    left:      50%;
    transform: translateX(-50%);
    width:     350px;
    z-index:   5;
}

/* Action bar — edit + share buttons, centered above the selector */
.bs-action-bar {
    position:  absolute;
    top:       10.4rem;
    left:      50%;
    transform: translateX(-50%);
    z-index:   5;
    display:   flex;
    gap:       .5rem;
    align-items: center;
}

.bs-edit-btn {
    white-space: nowrap;
    padding:   7.5px 20px;
}

.bs-edit-btn:active {
    transform: scale(.98);
}

.bs-edit-btn--disabled {
    opacity: .5;
    cursor:  not-allowed;
}

.bs-edit-btn--disabled:active {
    transform: none;
}

/* Share button + menu */
.bs-share-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         7.5px 12px;
}

.bs-share-menu {
    display:       none;
    position:      absolute;
    top:           calc(100% + 6px);
    right:         0;
    z-index:       100;
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-lg);
    min-width:     180px;
    overflow:      hidden;
}

.bs-share-menu.open {
    display: block;
}

.bs-share-menu__item {
    display:     flex;
    align-items: center;
    gap:         .55rem;
    padding:     .55rem .85rem;
    font-size:   .82rem;
    cursor:      pointer;
    color:       var(--color-text);
    white-space: nowrap;
    border:      none;
    background:  none;
    width:       100%;
    text-align:  left;
    font-family: inherit;
}

.bs-share-menu__item:hover {
    background: var(--color-surface-alt);
}


/* Trigger row: card + caret button */
.bs-trigger {
    display:     flex;
    align-items: stretch;
    cursor:      pointer;
}

.bs-trigger .bs-card {
    flex:                1;
    min-width:           0;
    border-right:        none;
    border-radius:       var(--radius-md) 0 0 var(--radius-md);
}

.bs-trigger .bs-card:hover {
    box-shadow:   none;
    border-color: var(--color-border);
}

.bs-trigger:hover .bs-card,
.bs-trigger:hover .bs-trigger__caret {
    border-color: var(--color-primary-light);
}

.bs-trigger__caret {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           26px;
    flex-shrink:     0;
    background:      var(--color-surface);
    border:          1px solid var(--color-border);
    border-radius:   0 var(--radius-md) var(--radius-md) 0;
    font-size:       .55rem;
    color:           var(--color-text-muted);
    transition:      background .15s, border-color .15s, transform .2s;
}

.bs-open .bs-trigger__caret {
    transform: rotate(180deg);
}

/* Dropdown panel */
.bs-dropdown {
    display:        none;
    flex-direction: column;
    gap:            .3rem;
    margin-top:     .35rem;
    padding:        .35rem;
    max-height:     55vh;
    overflow-y:     auto;
    background:     var(--color-surface);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-md);
    box-shadow:     var(--shadow-lg);
}

.bs-open .bs-dropdown {
    display: flex;
}

/* Placeholder label style */
.bs-placeholder__label {
    font-weight: 400;
    color:       var(--color-text-muted);
}

.bs-card {
    display:     flex;
    align-items: center;
    gap:         .55rem;
    padding:     .4rem .55rem;
    background:  var(--color-surface);
    border:      1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor:      pointer;
    transition:  box-shadow .15s, border-color .15s;
}

.bs-card:hover {
    box-shadow:   var(--shadow-sm);
    border-color: var(--color-primary-light);
}

.bs-card--active {
    border-color: var(--color-primary);
    background:   var(--color-primary-pale);
}

.bs-card--editable {
    background: #f0fdf4;
}

.bs-private-wrap {
    position: relative;
}
.bs-card--private {
    filter: blur(4px);
    user-select: none;
    pointer-events: none;
    cursor: default;
}
.bs-private-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
    padding: .5rem;
    border-radius: var(--radius-sm);
    pointer-events: none;
}
.bs-private-wrap:hover .bs-private-overlay {
    opacity: 1;
}

.bs-card__logo {
    width:           30px;
    height:          30px;
    border-radius:   50%;
    background:      var(--color-surface-alt);
    border:          1px solid var(--color-border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    overflow:        hidden;
}

.bs-card__logo img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    padding:    3px;
}

.bs-card__logo-ph {
    font-size: .8rem;
    color:     var(--color-text-muted);
}

.bs-card__info {
    flex:      1;
    min-width: 0;
}

.bs-card__name {
    font-family:   var(--font-display);
    font-size:     .9rem;
    font-weight:   700;
    line-height:   1.3;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.bs-card__submitter {
    font-size:     .65rem;
    line-height:   1.5;
    color:         var(--color-text-muted);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    font-style:    italic;
}

#bs-card__submitter-span:hover {
    color:         var(--color-accent);
}

.bs-card__league {
    font-size:     .65rem;
    line-height:   1.5;
    color:         var(--color-text-muted);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.bs-card__league-link {
    color:           var(--color-text-muted);
    text-decoration: none;
}

.bs-card__league-link:hover {
    color:           var(--color-accent);
}

.bs-card__stat {
    text-align:  right;
    flex-shrink: 0;
}

.bs-card__stat--rank {
    padding-left: .45rem;
    margin-left:  .45rem;
    border-left:  1px solid var(--color-border);
    min-width:    2.8rem;
}

.bs-card__stat-label {
    font-size:      .52rem;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--color-text-muted);
    line-height:    1;
}

.bs-card__stat-val {
    font-family: var(--font-display);
    font-size:   1.5rem;
    font-weight: 700;
    line-height: 1;
}

.bs-card__stat-sub {
    font-size:   .8rem;
    font-weight: 400;
    color:       var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   Scroll hint for narrow screens
   --------------------------------------------------------------------------- */
.bracket-scroll-hint {
    display:    none;
    font-size:  .8rem;
    color:      var(--color-text-muted);
    text-align: center;
    padding:    .4rem;
}

@media (max-width: 1200px) {
    .bracket-scroll-hint { display: block; }
}

/* =============================================================================
   Analytics Overlay
   =============================================================================
   Activated by adding .bracket-grid--analytics-mode to the bracket grid.
   Each .bracket-team gets --at (analytics tint) as an inline CSS variable.
   The analytics mode CSS replaces pick-success coloring with the tint.
   ============================================================================= */

/* Tint: applied via background-color override in analytics mode */
.bracket-grid--analytics-mode .bracket-team {
    background: var(--at, var(--color-surface)) !important;
}

.bracket-grid--analytics-mode .bracket-team__name,
.bracket-grid--analytics-mode .bracket-team__seed {
    overflow: visible;
    text-shadow:
    0 0 10px rgba(255,255,255,1),
    0 0 10px rgba(255,255,255,1),
    0 0 10px rgba(255,255,255,1),
    0 0 10px rgba(255,255,255,1),
    0 0 10px rgba(255,255,255,1),
    0 0 10px rgba(255,255,255,1);
}

/* Allow the glow to bleed past the button edge too */
.bracket-grid--analytics-mode .bracket-team {
    overflow: visible;
}


/* -----------------------------------------------------------------------
   Insights button — prevent label + caret from wrapping
   ----------------------------------------------------------------------- */
.bs-analytics-btn {
    white-space: nowrap;
    padding:   7.5px 20px;
    position: relative;
}

/* -----------------------------------------------------------------------
   Insights button active state
   ----------------------------------------------------------------------- */
.bs-analytics-btn--active {
    background:   color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
    border-color: var(--color-primary) !important;
    color:        var(--color-primary) !important;
}

/* -----------------------------------------------------------------------
   Dropdown menu
   ----------------------------------------------------------------------- */
.bs-analytics-menu {
    position:      absolute;
    z-index:       2000;
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    box-shadow:    0 8px 28px rgba(0,0,0,.14);
    min-width:     300px;
    max-width:     360px;
    overflow:      hidden;
    display:       none;
}

.bs-analytics-menu__header {
    padding:        .6rem .85rem .4rem;
    font-size:      .68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--color-text-muted);
    border-bottom:  1px solid var(--color-border);
}

.bs-analytics-menu__divider {
    height:     1px;
    background: var(--color-border);
    margin:     .2rem 0;
}

.bs-analytics-menu__item {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    width:          100%;
    padding:        .5rem .85rem;
    border:         none;
    background:     transparent;
    cursor:         pointer;
    text-align:     left;
    gap:            .15rem;
    transition:     background .1s;
}

.bs-analytics-menu__item:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.bs-analytics-menu__item--active {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}

.bs-analytics-menu__item--active .bs-analytics-menu__item-label {
    color: var(--color-primary);
}

.bs-analytics-menu__item-label {
    font-size:   .82rem;
    font-weight: 600;
    color:       var(--color-text);
    line-height: 1.2;
}

.bs-analytics-menu__item-desc {
    font-size:   .73rem;
    color:       var(--color-text-muted);
    line-height: 1.4;
}

/* -----------------------------------------------------------------------
   Legend bar (shown above bracket card when a map is active)
   ----------------------------------------------------------------------- */
.bs-analytics-legend {
    position:    absolute;
    top:         calc(100% + 6px);
    left:        50%;
    transform:   translateX(-50%);
    z-index:     200;
    padding:     .5rem .75rem;
    background:  var(--color-surface);
    border:      1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    box-sizing:  border-box;
    font-family: var(--font-body);
    display:     none;
}

.bs-analytics-legend__row {
    display:       flex;
    align-items:   baseline;
    gap:           .35rem;
    flex-wrap:     wrap;
    margin-bottom: .3rem;
}

.bs-analytics-legend__name {
    font-size:   .78rem;
    font-weight: 700;
    color:       var(--color-text);
    white-space: nowrap;
}

.bs-analytics-legend__sep {
    font-size: .75rem;
    color:     var(--color-text-muted);
}

.bs-analytics-legend__desc {
    font-size:  .73rem;
    color:      var(--color-text-muted);
    line-height: 1.35;
}

.bs-analytics-legend__scale {
    display:     flex;
    align-items: center;
    gap:         .5rem;
}

.bs-analytics-legend__bound {
    font-size:   .68rem;
    color:       var(--color-text-muted);
    white-space: nowrap;
}

.bs-analytics-legend__bar {
    flex:          1;
    height:        8px;
    border-radius: 4px;
    min-width:     60px;
}

/* ===========================================================================
   Print styles — landscape, bracket only
   =========================================================================== */
@media print {
    @page {
        size: landscape;
        margin: .25in;
    }

    /* Hide everything except the bracket */
    .site-nav,
    .page-hero,
    .site-footer,
    .bracket-submit-bar,
    .bracket-scroll-hint,
    .bs-action-bar,
    .bs-share-menu,
    .bs-analytics-menu,
    .bs-analytics-legend,
    #flash-container {
        display: none !important;
    }

    /* Remove container constraints */
    .container {
        max-width: none !important;
        padding:   0 !important;
        margin:    0 !important;
    }

    body {
        background: #fff !important;
        margin:     0 !important;
        padding:    0 !important;
    }

    * {
        box-shadow: none !important;
    }
}